• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Copyright (c) 2012 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 CategoryFilterButton extracts categories from the model
9 * and shows/hides them based on settings.
10 */
11base.require('filter');
12base.require('overlay');
13base.exportTo('tracing', function() {
14
15  var CategoryFilterDialog = tracing.ui.define('div');
16
17  CategoryFilterDialog.prototype = {
18    __proto__: tracing.ui.Overlay.prototype,
19
20    decorate: function() {
21      tracing.ui.Overlay.prototype.decorate.call(this);
22
23      this.className = 'view-category-filter-overlay';
24      this.autoClose = true;
25
26      var containerEl = document.createElement('div');
27      containerEl.className = 'category-filter-dialog';
28      containerEl.textContent = 'Select active categories:';
29      this.formEl_ = document.createElement('form');
30      this.formEl_.className = 'category-filter-dialog-form';
31      containerEl.appendChild(this.formEl_);
32      this.appendChild(containerEl);
33
34      this.categoriesEl_ = document.createElement('div');
35      this.categoriesEl_.className = 'categories';
36      this.formEl_.appendChild(this.categoriesEl_);
37
38      this.addEventListener('visibleChange', this.onVisibleChange_.bind(this));
39
40      this.onChangeCallback_ = undefined;
41      this.isCheckedCallback_ = undefined;
42    },
43
44    set categories(c) {
45      this.categories_ = c;
46    },
47
48    set settings_key(k) {
49      this.settings_key_ = k;
50    },
51
52    set settings(s) {
53      this.settings_ = s;
54    },
55
56    set settingUpdatedCallback(c) {
57      this.settingUpdatedCallback_ = c;
58    },
59
60    selectedCategories: function() {
61      // TODO(dsinclair): This can be made smarter by just storing an array
62      // of selected categories when they're clicked.
63      var inputs = this.categoriesEl_.querySelectorAll('input');
64      var inputs_length = inputs.length;
65      var categories = [];
66      for (var i = 0; i < inputs_length; ++i) {
67        var input = inputs[i];
68        if (input.checked)
69          categories.push(input.value);
70      }
71      return categories;
72    },
73
74    unselectedCategories: function() {
75      var inputs = this.categoriesEl_.querySelectorAll('input');
76      var inputs_length = inputs.length;
77      var categories = [];
78      for (var i = 0; i < inputs_length; ++i) {
79        var input = inputs[i];
80        if (input.checked)
81          continue;
82        categories.push(input.value);
83      }
84      return categories;
85    },
86
87    onVisibleChange_: function() {
88      if (this.visible) {
89        this.updateForm_();
90      }
91    },
92
93    updateForm_: function() {
94      this.categoriesEl_.innerHTML = ''; // Clear old categories
95
96      // Dedup the categories. We may have things in settings that are also
97      // returned when we query the category list.
98      var set = {};
99      var allCategories =
100          this.categories_.concat(this.settings_.keys(this.settings_key_));
101      var allCategoriesLength = allCategories.length;
102      for (var i = 0; i < allCategoriesLength; ++i) {
103        set[allCategories[i]] = true;
104      }
105      var categories = [];
106      for (var category in set) {
107        categories.push(category);
108      }
109      categories = categories.sort();
110
111      for (var i = 0; i < categories.length; i++) {
112        var category = categories[i];
113        var inputEl = document.createElement('input');
114        inputEl.type = 'checkbox';
115        inputEl.id = inputEl.value = category;
116        inputEl.checked =
117            this.settings_.get(category, 'true', this.settings_key_) === 'true';
118        inputEl.onchange = this.updateSetting_.bind(this);
119
120        var labelEl = document.createElement('label');
121        labelEl.textContent = category;
122        labelEl.setAttribute('for', category);
123
124        var divEl = document.createElement('div');
125        divEl.appendChild(inputEl);
126        divEl.appendChild(labelEl);
127        this.categoriesEl_.appendChild(divEl);
128      }
129    },
130
131    updateSetting_: function(e) {
132      var checkbox = e.target;
133      this.settings_.set(checkbox.value, checkbox.checked, this.settings_key_);
134      if (this.settingUpdatedCallback_ !== undefined)
135        this.settingUpdatedCallback_();
136    }
137  };
138
139  return {
140    CategoryFilterDialog: CategoryFilterDialog
141  };
142});
143