src/third_party/trace-viewer/trace_viewer/tracing/record_selection_dialog.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 /**
   8  * @fileoverview RecordSelectionDialog presents the available categories
   9  * to be enabled/disabled during tracing.
  10  */
  11 tvcm.requireTemplate('tracing.record_selection_dialog');
  12
  13 tvcm.require('tvcm.utils');
  14 tvcm.require('tracing.filter');
  15 tvcm.require('tvcm.ui.overlay');
  16 tvcm.require('tvcm.ui.dom_helpers');
  17
  18 tvcm.exportTo('tracing', function() {
  19   var RecordSelectionDialog = tvcm.ui.define('div');
  20
  21   RecordSelectionDialog.prototype = {
  22     __proto__: tvcm.ui.Overlay.prototype,
  23
  24     decorate: function() {
  25       tvcm.ui.Overlay.prototype.decorate.call(this);
  26       this.title = 'Record a new trace...';
  27
  28       this.classList.add('record-dialog-overlay');
  29
  30       var node = tvcm.instantiateTemplate('#record-selection-dialog-template');
  31       this.appendChild(node);
  32
  33       this.recordButtonEl_ = document.createElement('button');
  34       this.recordButtonEl_.textContent = 'Record';
  35       this.recordButtonEl_.addEventListener(
  36           'click',
  37           this.onRecordButtonClicked_.bind(this));
  38       this.recordButtonEl_.style.fontSize = '110%';
  39       this.rightButtons.appendChild(this.recordButtonEl_);
  40
  41       this.continuousTracingBn_ = tvcm.ui.createCheckBox(
  42           undefined, undefined,
  43           'recordSelectionDialog.useContinuousTracing', true,
  44           'Continuous tracing');
  45       this.systemTracingBn_ = tvcm.ui.createCheckBox(
  46           undefined, undefined,
  47           'recordSelectionDialog.useSystemTracing', true,
  48           'System tracing');
  49       this.samplingTracingBn_ = tvcm.ui.createCheckBox(
  50           undefined, undefined,
  51           'recordSelectionDialog.useSampling', false,
  52           'State sampling');
  53       this.leftButtons.appendChild(this.continuousTracingBn_);
  54       this.leftButtons.appendChild(this.systemTracingBn_);
  55       this.leftButtons.appendChild(this.samplingTracingBn_);
  56
  57       this.enabledCategoriesContainerEl_ =
  58           this.querySelector('.default-enabled-categories .categories');
  59
  60       this.disabledCategoriesContainerEl_ =
  61           this.querySelector('.default-disabled-categories .categories');
  62
  63       this.createGroupSelectButtons_(
  64           this.querySelector('.default-enabled-categories'));
  65       this.createGroupSelectButtons_(
  66           this.querySelector('.default-disabled-categories'));
  67
  68       this.addEventListener('visibleChange', this.onVisibleChange_.bind(this));
  69     },
  70
  71     set supportsSystemTracing(s) {
  72       if (s) {
  73         this.systemTracingBn_.style.display = undefined;
  74       } else {
  75         this.systemTracingBn_.style.display = 'none';
  76         this.useSystemTracing = false;
  77       }
  78     },
  79
  80     get useContinuousTracing() {
  81       return this.continuousTracingBn_.checked;
  82     },
  83     set useContinuousTracing(value) {
  84       this.continuousTracingBn_.checked = !!value;
  85     },
  86
  87     get useSystemTracing() {
  88       return this.systemTracingBn_.checked;
  89     },
  90     set useSystemTracing(value) {
  91       this.systemTracingBn_.checked = !!value;
  92     },
  93     get useSampling() {
  94       return this.samplingTracingBn_.checked;
  95     },
  96     set useSampling(value) {
  97       this.samplingTracingBn_.checked = !!value;
  98     },
  99
 100     set categories(c) {
 101       this.categories_ = c;
 102
 103       for (var i = 0; i < this.categories_.length; i++) {
 104         var split = this.categories_[i].split(',');
 105         this.categories_[i] = split.shift();
 106         if (split.length > 0)
 107           this.categories_ = this.categories_.concat(split);
 108       }
 109     },
 110
 111     set settings_key(k) {
 112       this.settings_key_ = k;
 113     },
 114
 115     set settings(s) {
 116       throw new Error('Dont use this!');
 117     },
 118
 119     categoryFilter: function() {
 120       var categories = this.unselectedCategories_();
 121       var categories_length = categories.length;
 122       var negated_categories = [];
 123       for (var i = 0; i < categories_length; ++i) {
 124         // Skip any category with a , as it will cause issues when we negate.
 125         // Both sides should have been added as separate categories, these can
 126         // only come from settings.
 127         if (categories[i].match(/,/))
 128           continue;
 129         negated_categories.push('-' + categories[i]);
 130       }
 131       categories = negated_categories.join(',');
 132
 133       var disabledCategories = this.enabledDisabledByDefaultCategories_();
 134       disabledCategories = disabledCategories.join(',');
 135
 136       var results = [];
 137       if (categories !== '')
 138         results.push(categories);
 139       if (disabledCategories !== '')
 140         results.push(disabledCategories);
 141
 142       return results.join(',');
 143     },
 144
 145     clickRecordButton: function() {
 146       this.recordButtonEl_.click();
 147     },
 148
 149     onRecordButtonClicked_: function() {
 150       this.visible = false;
 151       tvcm.dispatchSimpleEvent(this, 'recordclick');
 152       return false;
 153     },
 154
 155     collectInputs_: function(inputs, isChecked) {
 156       var inputs_length = inputs.length;
 157       var categories = [];
 158       for (var i = 0; i < inputs_length; ++i) {
 159         var input = inputs[i];
 160         if (input.checked === isChecked)
 161           categories.push(input.value);
 162       }
 163       return categories;
 164     },
 165
 166     unselectedCategories_: function() {
 167       var inputs =
 168           this.enabledCategoriesContainerEl_.querySelectorAll('input');
 169       return this.collectInputs_(inputs, false);
 170     },
 171
 172     enabledDisabledByDefaultCategories_: function() {
 173       var inputs =
 174           this.disabledCategoriesContainerEl_.querySelectorAll('input');
 175       return this.collectInputs_(inputs, true);
 176     },
 177
 178     onVisibleChange_: function() {
 179       if (this.visible)
 180         this.updateForm_();
 181     },
 182
 183     buildInputs_: function(inputs, checkedDefault, parent) {
 184       var inputs_length = inputs.length;
 185       for (var i = 0; i < inputs_length; i++) {
 186         var category = inputs[i];
 187
 188         var inputEl = document.createElement('input');
 189         inputEl.type = 'checkbox';
 190         inputEl.id = category;
 191         inputEl.value = category;
 192
 193         inputEl.checked = tvcm.Settings.get(
 194             category, checkedDefault, this.settings_key_);
 195         inputEl.onclick = this.updateSetting_.bind(this);
 196
 197         var labelEl = document.createElement('label');
 198         labelEl.textContent = category.replace('disabled-by-default-', '');
 199         labelEl.setAttribute('for', category);
 200
 201         var divEl = document.createElement('div');
 202         divEl.appendChild(inputEl);
 203         divEl.appendChild(labelEl);
 204
 205         parent.appendChild(divEl);
 206       }
 207     },
 208
 209     updateForm_: function() {
 210       this.enabledCategoriesContainerEl_.innerHTML = ''; // Clear old categories
 211       this.disabledCategoriesContainerEl_.innerHTML = '';
 212
 213       this.recordButtonEl_.focus();
 214
 215       // Dedup the categories. We may have things in settings that are also
 216       // returned when we query the category list.
 217       var set = {};
 218       var allCategories =
 219           this.categories_.concat(tvcm.Settings.keys(this.settings_key_));
 220       var allCategoriesLength = allCategories.length;
 221       for (var i = 0; i < allCategoriesLength; ++i) {
 222         set[allCategories[i]] = true;
 223       }
 224
 225       var categories = [];
 226       var disabledCategories = [];
 227       for (var category in set) {
 228         if (category.indexOf('disabled-by-default-') == 0)
 229           disabledCategories.push(category);
 230         else
 231           categories.push(category);
 232       }
 233       disabledCategories = disabledCategories.sort();
 234       categories = categories.sort();
 235
 236       this.buildInputs_(categories, true, this.enabledCategoriesContainerEl_);
 237
 238       if (disabledCategories.length > 0) {
 239         this.disabledCategoriesContainerEl_.hidden = false;
 240         this.buildInputs_(disabledCategories, false,
 241             this.disabledCategoriesContainerEl_);
 242       }
 243     },
 244
 245     updateSetting_: function(e) {
 246       var checkbox = e.target;
 247       tvcm.Settings.set(checkbox.value, checkbox.checked, this.settings_key_);
 248     },
 249
 250     createGroupSelectButtons_: function(parent) {
 251       var flipInputs = function(dir) {
 252         var inputs = parent.querySelectorAll('input');
 253         for (var i = 0; i < inputs.length; i++) {
 254           if (inputs[i].checked === dir)
 255             continue;
 256           // click() is used so the settings will be correclty stored. Setting
 257           // checked does not trigger the onclick (or onchange) callback.
 258           inputs[i].click();
 259         }
 260       };
 261
 262       var allBtn = parent.querySelector('.all-btn');
 263       allBtn.onclick = function(evt) {
 264         flipInputs(true);
 265         evt.preventDefault();
 266       };
 267
 268       var noneBtn = parent.querySelector('.none-btn');
 269       noneBtn.onclick = function(evt) {
 270         flipInputs(false);
 271         evt.preventDefault();
 272       };
 273     }
 274   };
 275
 276   return {
 277     RecordSelectionDialog: RecordSelectionDialog
 278   };
 279 });