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