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.requireTemplate('tracing.category_filter_dialog');
12
13base.require('base.utils');
14base.require('tracing.filter');
15base.require('ui.overlay');
16
17base.exportTo('tracing', function() {
18  var CategoryFilterDialog = ui.define('div');
19
20  CategoryFilterDialog.prototype = {
21    __proto__: ui.Overlay.prototype,
22
23    decorate: function() {
24      ui.Overlay.prototype.decorate.call(this);
25
26      this.className = 'view-category-filter-overlay';
27      this.obeyCloseEvents = true;
28
29      var node =
30          base.instantiateTemplate('#view-category-filter-dialog-template');
31      this.appendChild(node);
32
33      this.formEl_ = this.querySelector('form');
34      this.categoriesEl_ = this.querySelector('.categories');
35
36      this.addEventListener('visibleChange', this.onVisibleChange_.bind(this));
37    },
38
39    set categories(c) {
40      this.categories_ = c;
41    },
42
43    set settingUpdatedCallback(c) {
44      this.settingUpdatedCallback_ = c;
45    },
46
47    unselectedCategories_: function() {
48      var inputs = this.formEl_.querySelectorAll('input');
49      var categories = [];
50      for (var i = 0; i < inputs.length; ++i) {
51        var input = inputs[i];
52        if (input.checked === false)
53          categories.push(input.value);
54      }
55      return categories;
56    },
57
58    onVisibleChange_: function() {
59      if (this.visible) {
60        this.updateForm_();
61      }
62    },
63
64    updateForm_: function() {
65      this.categoriesEl_.innerHTML = ''; // Clear old categories
66
67      var categories = this.categories_.sort();
68      for (var i = 0; i < categories.length; i++) {
69        var category = categories[i];
70        var inputEl = document.createElement('input');
71        inputEl.type = 'checkbox';
72        inputEl.id = category;
73        inputEl.value = category;
74
75        inputEl.checked = true;
76        inputEl.onchange = this.updateSetting_.bind(this);
77
78        var labelEl = document.createElement('label');
79        labelEl.textContent = category;
80        labelEl.setAttribute('for', category);
81
82        var divEl = document.createElement('div');
83        divEl.appendChild(inputEl);
84        divEl.appendChild(labelEl);
85        this.categoriesEl_.appendChild(divEl);
86      }
87    },
88
89    updateSetting_: function(e) {
90      var checkbox = e.target;
91      if (this.settingUpdatedCallback_ !== undefined)
92        this.settingUpdatedCallback_(this.unselectedCategories_());
93    }
94  };
95
96  return {
97    CategoryFilterDialog: CategoryFilterDialog
98  };
99});
100