Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(724)

Unified Diff: third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js b/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js
index cc037203cfecd4581fd6e6bdec00dee34b5faf94..ba7074a1bc74025e4772270c45154b289b1d66e3 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/FilterBar.js
@@ -27,207 +27,193 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-
/**
- * @constructor
- * @extends {WebInspector.HBox}
- * @param {string} name
- * @param {boolean=} visibleByDefault
+ * @unrestricted
*/
-WebInspector.FilterBar = function(name, visibleByDefault)
-{
- WebInspector.HBox.call(this);
- this.registerRequiredCSS("ui/filter.css");
+WebInspector.FilterBar = class extends WebInspector.HBox {
+ /**
+ * @param {string} name
+ * @param {boolean=} visibleByDefault
+ */
+ constructor(name, visibleByDefault) {
+ super();
+ this.registerRequiredCSS('ui/filter.css');
this._filtersShown = false;
this._enabled = true;
- this.element.classList.add("filter-bar");
+ this.element.classList.add('filter-bar');
- this._filterButton = new WebInspector.ToolbarButton(WebInspector.UIString("Filter"), "filter-toolbar-item");
- this._filterButton.addEventListener("click", this._handleFilterButtonClick, this);
+ this._filterButton = new WebInspector.ToolbarButton(WebInspector.UIString('Filter'), 'filter-toolbar-item');
+ this._filterButton.addEventListener('click', this._handleFilterButtonClick, this);
this._filters = [];
- this._stateSetting = WebInspector.settings.createSetting("filterBar-" + name + "-toggled", !!visibleByDefault);
+ this._stateSetting = WebInspector.settings.createSetting('filterBar-' + name + '-toggled', !!visibleByDefault);
this._setState(this._stateSetting.get());
+ }
+
+ /**
+ * @return {!WebInspector.ToolbarButton}
+ */
+ filterButton() {
+ return this._filterButton;
+ }
+
+ /**
+ * @param {!WebInspector.FilterUI} filter
+ */
+ addFilter(filter) {
+ this._filters.push(filter);
+ this.element.appendChild(filter.element());
+ filter.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._filterChanged, this);
+ this._updateFilterButton();
+ }
+
+ setEnabled(enabled) {
+ this._enabled = enabled;
+ this._filterButton.setEnabled(enabled);
+ this._updateFilterBar();
+ }
+
+ forceShowFilterBar() {
+ this._alwaysShowFilters = true;
+ this._updateFilterBar();
+ }
+
+ /**
+ * @override
+ */
+ wasShown() {
+ this._updateFilterBar();
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _filterChanged(event) {
+ this._updateFilterButton();
+ }
+
+ /**
+ * @return {string}
+ */
+ _filterBarState() {
+ if (this._filtersShown)
+ return WebInspector.FilterBar.FilterBarState.Shown;
+ var isActive = false;
+ for (var i = 0; i < this._filters.length; ++i) {
+ if (this._filters[i].isActive())
+ return WebInspector.FilterBar.FilterBarState.Active;
+ }
+ return WebInspector.FilterBar.FilterBarState.Inactive;
+ }
+
+ _updateFilterBar() {
+ var visible = this._alwaysShowFilters || (this._filtersShown && this._enabled);
+ this.element.classList.toggle('hidden', !visible);
+ if (visible) {
+ for (var i = 0; i < this._filters.length; ++i) {
+ if (this._filters[i] instanceof WebInspector.TextFilterUI) {
+ var textFilterUI = /** @type {!WebInspector.TextFilterUI} */ (this._filters[i]);
+ textFilterUI.focus();
+ }
+ }
+ }
+ this.invalidateSize();
+ }
+
+ _updateFilterButton() {
+ this._filterButton.setState(this._filterBarState());
+ }
+
+ /**
+ * @param {!WebInspector.Event} event
+ */
+ _handleFilterButtonClick(event) {
+ this._setState(!this._filtersShown);
+ }
+
+ /**
+ * @param {boolean} filtersShown
+ */
+ _setState(filtersShown) {
+ if (this._filtersShown === filtersShown)
+ return;
+
+ this._filtersShown = filtersShown;
+ if (this._stateSetting)
+ this._stateSetting.set(filtersShown);
+
+ this._updateFilterButton();
+ this._updateFilterBar();
+ this.dispatchEventToListeners(WebInspector.FilterBar.Events.Toggled);
+ }
+
+ clear() {
+ this.element.removeChildren();
+ this._filters = [];
+ this._updateFilterButton();
+ }
};
WebInspector.FilterBar.FilterBarState = {
- Inactive : "inactive",
- Active : "active",
- Shown : "on"
+ Inactive: 'inactive',
+ Active: 'active',
+ Shown: 'on'
};
/** @enum {symbol} */
WebInspector.FilterBar.Events = {
- Toggled: Symbol("Toggled")
-};
-
-WebInspector.FilterBar.prototype = {
- /**
- * @return {!WebInspector.ToolbarButton}
- */
- filterButton: function()
- {
- return this._filterButton;
- },
-
- /**
- * @param {!WebInspector.FilterUI} filter
- */
- addFilter: function(filter)
- {
- this._filters.push(filter);
- this.element.appendChild(filter.element());
- filter.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._filterChanged, this);
- this._updateFilterButton();
- },
-
- setEnabled: function(enabled)
- {
- this._enabled = enabled;
- this._filterButton.setEnabled(enabled);
- this._updateFilterBar();
- },
-
- forceShowFilterBar: function()
- {
- this._alwaysShowFilters = true;
- this._updateFilterBar();
- },
-
- /**
- * @override
- */
- wasShown: function()
- {
- this._updateFilterBar();
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _filterChanged: function(event)
- {
- this._updateFilterButton();
- },
-
- /**
- * @return {string}
- */
- _filterBarState: function()
- {
- if (this._filtersShown)
- return WebInspector.FilterBar.FilterBarState.Shown;
- var isActive = false;
- for (var i = 0; i < this._filters.length; ++i) {
- if (this._filters[i].isActive())
- return WebInspector.FilterBar.FilterBarState.Active;
- }
- return WebInspector.FilterBar.FilterBarState.Inactive;
- },
-
- _updateFilterBar: function()
- {
- var visible = this._alwaysShowFilters || (this._filtersShown && this._enabled);
- this.element.classList.toggle("hidden", !visible);
- if (visible) {
- for (var i = 0; i < this._filters.length; ++i) {
- if (this._filters[i] instanceof WebInspector.TextFilterUI) {
- var textFilterUI = /** @type {!WebInspector.TextFilterUI} */ (this._filters[i]);
- textFilterUI.focus();
- }
- }
- }
- this.invalidateSize();
- },
-
- _updateFilterButton: function()
- {
- this._filterButton.setState(this._filterBarState());
- },
-
- /**
- * @param {!WebInspector.Event} event
- */
- _handleFilterButtonClick: function(event)
- {
- this._setState(!this._filtersShown);
- },
-
- /**
- * @param {boolean} filtersShown
- */
- _setState: function(filtersShown)
- {
- if (this._filtersShown === filtersShown)
- return;
-
- this._filtersShown = filtersShown;
- if (this._stateSetting)
- this._stateSetting.set(filtersShown);
-
- this._updateFilterButton();
- this._updateFilterBar();
- this.dispatchEventToListeners(WebInspector.FilterBar.Events.Toggled);
- },
-
- clear: function()
- {
- this.element.removeChildren();
- this._filters = [];
- this._updateFilterButton();
- },
-
- __proto__: WebInspector.HBox.prototype
+ Toggled: Symbol('Toggled')
};
/**
* @interface
* @extends {WebInspector.EventTarget}
*/
-WebInspector.FilterUI = function()
-{
-};
+WebInspector.FilterUI = function() {};
/** @enum {symbol} */
WebInspector.FilterUI.Events = {
- FilterChanged: Symbol("FilterChanged")
+ FilterChanged: Symbol('FilterChanged')
};
WebInspector.FilterUI.prototype = {
- /**
- * @return {boolean}
- */
- isActive: function() { },
-
- /**
- * @return {!Element}
- */
- element: function() { }
+ /**
+ * @return {boolean}
+ */
+ isActive: function() {},
+
+ /**
+ * @return {!Element}
+ */
+ element: function() {}
};
/**
- * @constructor
- * @extends {WebInspector.Object}
* @implements {WebInspector.FilterUI}
* @implements {WebInspector.SuggestBoxDelegate}
- * @param {boolean=} supportRegex
+ * @unrestricted
*/
-WebInspector.TextFilterUI = function(supportRegex)
-{
+WebInspector.TextFilterUI = class extends WebInspector.Object {
+ /**
+ * @param {boolean=} supportRegex
+ */
+ constructor(supportRegex) {
+ super();
this._supportRegex = !!supportRegex;
this._regex = null;
- this._filterElement = createElement("div");
- this._filterElement.className = "filter-text-filter";
+ this._filterElement = createElement('div');
+ this._filterElement.className = 'filter-text-filter';
- this._filterInputElement = /** @type {!HTMLInputElement} */ (this._filterElement.createChild("input", "filter-input-field"));
- this._filterInputElement.placeholder = WebInspector.UIString("Filter");
- this._filterInputElement.id = "filter-input-field";
- this._filterInputElement.addEventListener("input", this._onInput.bind(this), false);
- this._filterInputElement.addEventListener("change", this._onChange.bind(this), false);
- this._filterInputElement.addEventListener("keydown", this._onInputKeyDown.bind(this), true);
- this._filterInputElement.addEventListener("blur", this._onBlur.bind(this), true);
+ this._filterInputElement =
+ /** @type {!HTMLInputElement} */ (this._filterElement.createChild('input', 'filter-input-field'));
+ this._filterInputElement.placeholder = WebInspector.UIString('Filter');
+ this._filterInputElement.id = 'filter-input-field';
+ this._filterInputElement.addEventListener('input', this._onInput.bind(this), false);
+ this._filterInputElement.addEventListener('change', this._onChange.bind(this), false);
+ this._filterInputElement.addEventListener('keydown', this._onInputKeyDown.bind(this), true);
+ this._filterInputElement.addEventListener('blur', this._onBlur.bind(this), true);
/** @type {?WebInspector.TextFilterUI.SuggestionBuilder} */
this._suggestionBuilder = null;
@@ -235,552 +221,506 @@ WebInspector.TextFilterUI = function(supportRegex)
this._suggestBox = new WebInspector.SuggestBox(this);
if (this._supportRegex) {
- this._filterElement.classList.add("supports-regex");
- var label = createCheckboxLabel(WebInspector.UIString("Regex"));
- this._regexCheckBox = label.checkboxElement;
- this._regexCheckBox.id = "text-filter-regex";
- this._regexCheckBox.addEventListener("change", this._onInput.bind(this), false);
- this._filterElement.appendChild(label);
-
- this._regexLabel = this._filterElement.textElement;
+ this._filterElement.classList.add('supports-regex');
+ var label = createCheckboxLabel(WebInspector.UIString('Regex'));
+ this._regexCheckBox = label.checkboxElement;
+ this._regexCheckBox.id = 'text-filter-regex';
+ this._regexCheckBox.addEventListener('change', this._onInput.bind(this), false);
+ this._filterElement.appendChild(label);
+
+ this._regexLabel = this._filterElement.textElement;
}
-};
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ isActive() {
+ return !!this._filterInputElement.value;
+ }
+
+ /**
+ * @override
+ * @return {!Element}
+ */
+ element() {
+ return this._filterElement;
+ }
+
+ /**
+ * @return {boolean}
+ */
+ isRegexChecked() {
+ return this._supportRegex ? this._regexCheckBox.checked : false;
+ }
+
+ /**
+ * @return {string}
+ */
+ value() {
+ return this._filterInputElement.value;
+ }
+
+ /**
+ * @param {string} value
+ */
+ setValue(value) {
+ this._filterInputElement.value = value;
+ this._valueChanged(false);
+ }
+
+ /**
+ * @param {boolean} checked
+ */
+ setRegexChecked(checked) {
+ if (this._supportRegex)
+ this._regexCheckBox.checked = checked;
+ }
+
+ /**
+ * @return {?RegExp}
+ */
+ regex() {
+ return this._regex;
+ }
+
+ /**
+ * @param {!Event} event
+ */
+ _onBlur(event) {
+ this._cancelSuggestion();
+ }
+
+ _cancelSuggestion() {
+ if (this._suggestionBuilder && this._suggestBox.visible) {
+ this._suggestionBuilder.unapplySuggestion(this._filterInputElement);
+ this._suggestBox.hide();
+ }
+ }
+
+ _onInput() {
+ this._valueChanged(true);
+ }
+
+ _onChange() {
+ this._valueChanged(false);
+ }
+
+ focus() {
+ this._filterInputElement.focus();
+ }
+
+ /**
+ * @param {?WebInspector.TextFilterUI.SuggestionBuilder} suggestionBuilder
+ */
+ setSuggestionBuilder(suggestionBuilder) {
+ this._cancelSuggestion();
+ this._suggestionBuilder = suggestionBuilder;
+ }
+
+ _updateSuggestions() {
+ if (!this._suggestionBuilder)
+ return;
+ if (this.isRegexChecked()) {
+ if (this._suggestBox.visible())
+ this._suggestBox.hide();
+ return;
+ }
+ var suggestions = this._suggestionBuilder.buildSuggestions(this._filterInputElement);
+ if (suggestions && suggestions.length) {
+ if (this._suppressSuggestion)
+ delete this._suppressSuggestion;
+ else
+ this._suggestionBuilder.applySuggestion(this._filterInputElement, suggestions[0], true);
+ var anchorBox = this._filterInputElement.boxInWindow().relativeTo(new AnchorBox(-3, 0));
+ this._suggestBox.updateSuggestions(anchorBox, suggestions.map(item => ({title: item})), 0, true, '');
+ } else {
+ this._suggestBox.hide();
+ }
+ }
+
+ /**
+ * @param {boolean} showSuggestions
+ */
+ _valueChanged(showSuggestions) {
+ if (showSuggestions)
+ this._updateSuggestions();
+ else
+ this._suggestBox.hide();
-WebInspector.TextFilterUI.prototype = {
- /**
- * @override
- * @return {boolean}
- */
- isActive: function()
- {
- return !!this._filterInputElement.value;
- },
-
- /**
- * @override
- * @return {!Element}
- */
- element: function()
- {
- return this._filterElement;
- },
-
- /**
- * @return {boolean}
- */
- isRegexChecked: function()
- {
- return this._supportRegex ? this._regexCheckBox.checked : false;
- },
-
- /**
- * @return {string}
- */
- value: function()
- {
- return this._filterInputElement.value;
- },
-
- /**
- * @param {string} value
- */
- setValue: function(value)
- {
- this._filterInputElement.value = value;
- this._valueChanged(false);
- },
-
- /**
- * @param {boolean} checked
- */
- setRegexChecked: function(checked)
- {
- if (this._supportRegex)
- this._regexCheckBox.checked = checked;
- },
-
- /**
- * @return {?RegExp}
- */
- regex: function()
- {
- return this._regex;
- },
-
- /**
- * @param {!Event} event
- */
- _onBlur: function(event)
- {
- this._cancelSuggestion();
- },
+ var filterQuery = this.value();
- _cancelSuggestion: function()
- {
- if (this._suggestionBuilder && this._suggestBox.visible) {
- this._suggestionBuilder.unapplySuggestion(this._filterInputElement);
- this._suggestBox.hide();
+ this._regex = null;
+ this._filterInputElement.classList.remove('filter-text-invalid');
+ if (filterQuery) {
+ if (this.isRegexChecked()) {
+ try {
+ this._regex = new RegExp(filterQuery, 'i');
+ } catch (e) {
+ this._filterInputElement.classList.add('filter-text-invalid');
}
- },
+ } else {
+ this._regex = createPlainTextSearchRegex(filterQuery, 'i');
+ }
+ }
- _onInput: function()
- {
- this._valueChanged(true);
- },
-
- _onChange: function()
- {
- this._valueChanged(false);
- },
-
- focus: function()
- {
- this._filterInputElement.focus();
- },
-
- /**
- * @param {?WebInspector.TextFilterUI.SuggestionBuilder} suggestionBuilder
- */
- setSuggestionBuilder: function(suggestionBuilder)
- {
+ this._dispatchFilterChanged();
+ }
+
+ _dispatchFilterChanged() {
+ this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
+ }
+
+ /**
+ * @param {!Event} event
+ * @return {boolean}
+ */
+ _onInputKeyDown(event) {
+ var handled = false;
+ if (event.key === 'Backspace') {
+ this._suppressSuggestion = true;
+ } else if (this._suggestBox.visible()) {
+ if (event.key === 'Escape') {
this._cancelSuggestion();
- this._suggestionBuilder = suggestionBuilder;
- },
-
- _updateSuggestions: function()
- {
- if (!this._suggestionBuilder)
- return;
- if (this.isRegexChecked()) {
- if (this._suggestBox.visible())
- this._suggestBox.hide();
- return;
- }
- var suggestions = this._suggestionBuilder.buildSuggestions(this._filterInputElement);
- if (suggestions && suggestions.length) {
- if (this._suppressSuggestion)
- delete this._suppressSuggestion;
- else
- this._suggestionBuilder.applySuggestion(this._filterInputElement, suggestions[0], true);
- var anchorBox = this._filterInputElement.boxInWindow().relativeTo(new AnchorBox(-3, 0));
- this._suggestBox.updateSuggestions(anchorBox, suggestions.map(item => ({title: item})), 0, true, "");
- } else {
- this._suggestBox.hide();
- }
- },
-
- /**
- * @param {boolean} showSuggestions
- */
- _valueChanged: function(showSuggestions)
- {
- if (showSuggestions)
- this._updateSuggestions();
- else
- this._suggestBox.hide();
-
- var filterQuery = this.value();
-
- this._regex = null;
- this._filterInputElement.classList.remove("filter-text-invalid");
- if (filterQuery) {
- if (this.isRegexChecked()) {
- try {
- this._regex = new RegExp(filterQuery, "i");
- } catch (e) {
- this._filterInputElement.classList.add("filter-text-invalid");
- }
- } else {
- this._regex = createPlainTextSearchRegex(filterQuery, "i");
- }
- }
-
- this._dispatchFilterChanged();
- },
-
- _dispatchFilterChanged: function()
- {
- this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
- },
-
- /**
- * @param {!Event} event
- * @return {boolean}
- */
- _onInputKeyDown: function(event)
- {
- var handled = false;
- if (event.key === "Backspace") {
- this._suppressSuggestion = true;
- } else if (this._suggestBox.visible()) {
- if (event.key === "Escape") {
- this._cancelSuggestion();
- handled = true;
- } else if (event.key === "Tab") {
- this._suggestBox.acceptSuggestion();
- this._valueChanged(true);
- handled = true;
- } else {
- handled = this._suggestBox.keyPressed(/** @type {!KeyboardEvent} */ (event));
- }
- }
- if (handled)
- event.consume(true);
- return handled;
- },
-
- /**
- * @override
- * @param {string} suggestion
- * @param {boolean=} isIntermediateSuggestion
- */
- applySuggestion: function(suggestion, isIntermediateSuggestion)
- {
- if (!this._suggestionBuilder)
- return;
- this._suggestionBuilder.applySuggestion(this._filterInputElement, suggestion, !!isIntermediateSuggestion);
- if (isIntermediateSuggestion)
- this._dispatchFilterChanged();
- },
-
- /** @override */
- acceptSuggestion: function()
- {
- this._filterInputElement.scrollLeft = this._filterInputElement.scrollWidth;
+ handled = true;
+ } else if (event.key === 'Tab') {
+ this._suggestBox.acceptSuggestion();
this._valueChanged(true);
- },
-
- __proto__: WebInspector.Object.prototype
+ handled = true;
+ } else {
+ handled = this._suggestBox.keyPressed(/** @type {!KeyboardEvent} */ (event));
+ }
+ }
+ if (handled)
+ event.consume(true);
+ return handled;
+ }
+
+ /**
+ * @override
+ * @param {string} suggestion
+ * @param {boolean=} isIntermediateSuggestion
+ */
+ applySuggestion(suggestion, isIntermediateSuggestion) {
+ if (!this._suggestionBuilder)
+ return;
+ this._suggestionBuilder.applySuggestion(this._filterInputElement, suggestion, !!isIntermediateSuggestion);
+ if (isIntermediateSuggestion)
+ this._dispatchFilterChanged();
+ }
+
+ /** @override */
+ acceptSuggestion() {
+ this._filterInputElement.scrollLeft = this._filterInputElement.scrollWidth;
+ this._valueChanged(true);
+ }
};
/**
* @interface
*/
-WebInspector.TextFilterUI.SuggestionBuilder = function()
-{
-};
+WebInspector.TextFilterUI.SuggestionBuilder = function() {};
WebInspector.TextFilterUI.SuggestionBuilder.prototype = {
- /**
- * @param {!HTMLInputElement} input
- * @return {?Array.<string>}
- */
- buildSuggestions: function(input) { },
-
- /**
- * @param {!HTMLInputElement} input
- * @param {string} suggestion
- * @param {boolean} isIntermediate
- */
- applySuggestion: function(input, suggestion, isIntermediate) { },
-
- /**
- * @param {!HTMLInputElement} input
- */
- unapplySuggestion: function(input) { }
+ /**
+ * @param {!HTMLInputElement} input
+ * @return {?Array.<string>}
+ */
+ buildSuggestions: function(input) {},
+
+ /**
+ * @param {!HTMLInputElement} input
+ * @param {string} suggestion
+ * @param {boolean} isIntermediate
+ */
+ applySuggestion: function(input, suggestion, isIntermediate) {},
+
+ /**
+ * @param {!HTMLInputElement} input
+ */
+ unapplySuggestion: function(input) {}
};
/**
- * @constructor
- * @extends {WebInspector.Object}
* @implements {WebInspector.FilterUI}
- * @param {!Array.<!WebInspector.NamedBitSetFilterUI.Item>} items
- * @param {!WebInspector.Setting=} setting
+ * @unrestricted
*/
-WebInspector.NamedBitSetFilterUI = function(items, setting)
-{
- this._filtersElement = createElementWithClass("div", "filter-bitset-filter");
- this._filtersElement.title = WebInspector.UIString("%sClick to select multiple types", WebInspector.KeyboardShortcut.shortcutToString("", WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta));
+WebInspector.NamedBitSetFilterUI = class extends WebInspector.Object {
+ /**
+ * @param {!Array.<!WebInspector.NamedBitSetFilterUI.Item>} items
+ * @param {!WebInspector.Setting=} setting
+ */
+ constructor(items, setting) {
+ super();
+ this._filtersElement = createElementWithClass('div', 'filter-bitset-filter');
+ this._filtersElement.title = WebInspector.UIString(
+ '%sClick to select multiple types',
+ WebInspector.KeyboardShortcut.shortcutToString('', WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta));
this._allowedTypes = {};
this._typeFilterElements = {};
- this._addBit(WebInspector.NamedBitSetFilterUI.ALL_TYPES, WebInspector.UIString("All"));
- this._filtersElement.createChild("div", "filter-bitset-filter-divider");
+ this._addBit(WebInspector.NamedBitSetFilterUI.ALL_TYPES, WebInspector.UIString('All'));
+ this._filtersElement.createChild('div', 'filter-bitset-filter-divider');
for (var i = 0; i < items.length; ++i)
- this._addBit(items[i].name, items[i].label, items[i].title);
+ this._addBit(items[i].name, items[i].label, items[i].title);
if (setting) {
- this._setting = setting;
- setting.addChangeListener(this._settingChanged.bind(this));
- this._settingChanged();
+ this._setting = setting;
+ setting.addChangeListener(this._settingChanged.bind(this));
+ this._settingChanged();
} else {
- this._toggleTypeFilter(WebInspector.NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
+ this._toggleTypeFilter(WebInspector.NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
}
+ }
+
+ reset() {
+ this._toggleTypeFilter(WebInspector.NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ isActive() {
+ return !this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES];
+ }
+
+ /**
+ * @override
+ * @return {!Element}
+ */
+ element() {
+ return this._filtersElement;
+ }
+
+ /**
+ * @param {string} typeName
+ * @return {boolean}
+ */
+ accept(typeName) {
+ return !!this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES] || !!this._allowedTypes[typeName];
+ }
+
+ _settingChanged() {
+ var allowedTypes = this._setting.get();
+ this._allowedTypes = {};
+ for (var typeName in this._typeFilterElements) {
+ if (allowedTypes[typeName])
+ this._allowedTypes[typeName] = true;
+ }
+ this._update();
+ }
+
+ _update() {
+ if ((Object.keys(this._allowedTypes).length === 0) ||
+ this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES]) {
+ this._allowedTypes = {};
+ this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES] = true;
+ }
+ for (var typeName in this._typeFilterElements)
+ this._typeFilterElements[typeName].classList.toggle('selected', this._allowedTypes[typeName]);
+ this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
+ }
+
+ /**
+ * @param {string} name
+ * @param {string} label
+ * @param {string=} title
+ */
+ _addBit(name, label, title) {
+ var typeFilterElement = this._filtersElement.createChild('li', name);
+ typeFilterElement.typeName = name;
+ typeFilterElement.createTextChild(label);
+ if (title)
+ typeFilterElement.title = title;
+ typeFilterElement.addEventListener('click', this._onTypeFilterClicked.bind(this), false);
+ this._typeFilterElements[name] = typeFilterElement;
+ }
+
+ /**
+ * @param {!Event} e
+ */
+ _onTypeFilterClicked(e) {
+ var toggle;
+ if (WebInspector.isMac())
+ toggle = e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;
+ else
+ toggle = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
+ this._toggleTypeFilter(e.target.typeName, toggle);
+ }
+
+ /**
+ * @param {string} typeName
+ * @param {boolean} allowMultiSelect
+ */
+ _toggleTypeFilter(typeName, allowMultiSelect) {
+ if (allowMultiSelect && typeName !== WebInspector.NamedBitSetFilterUI.ALL_TYPES)
+ this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES] = false;
+ else
+ this._allowedTypes = {};
+
+ this._allowedTypes[typeName] = !this._allowedTypes[typeName];
+
+ if (this._setting)
+ this._setting.set(this._allowedTypes);
+ else
+ this._update();
+ }
};
/** @typedef {{name: string, label: string, title: (string|undefined)}} */
WebInspector.NamedBitSetFilterUI.Item;
-WebInspector.NamedBitSetFilterUI.ALL_TYPES = "all";
-
-WebInspector.NamedBitSetFilterUI.prototype = {
- reset: function()
- {
- this._toggleTypeFilter(WebInspector.NamedBitSetFilterUI.ALL_TYPES, false /* allowMultiSelect */);
- },
-
- /**
- * @override
- * @return {boolean}
- */
- isActive: function()
- {
- return !this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES];
- },
-
- /**
- * @override
- * @return {!Element}
- */
- element: function()
- {
- return this._filtersElement;
- },
-
- /**
- * @param {string} typeName
- * @return {boolean}
- */
- accept: function(typeName)
- {
- return !!this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES] || !!this._allowedTypes[typeName];
- },
-
- _settingChanged: function()
- {
- var allowedTypes = this._setting.get();
- this._allowedTypes = {};
- for (var typeName in this._typeFilterElements) {
- if (allowedTypes[typeName])
- this._allowedTypes[typeName] = true;
- }
- this._update();
- },
-
- _update: function()
- {
- if ((Object.keys(this._allowedTypes).length === 0) || this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES]) {
- this._allowedTypes = {};
- this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES] = true;
- }
- for (var typeName in this._typeFilterElements)
- this._typeFilterElements[typeName].classList.toggle("selected", this._allowedTypes[typeName]);
- this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
- },
-
- /**
- * @param {string} name
- * @param {string} label
- * @param {string=} title
- */
- _addBit: function(name, label, title)
- {
- var typeFilterElement = this._filtersElement.createChild("li", name);
- typeFilterElement.typeName = name;
- typeFilterElement.createTextChild(label);
- if (title)
- typeFilterElement.title = title;
- typeFilterElement.addEventListener("click", this._onTypeFilterClicked.bind(this), false);
- this._typeFilterElements[name] = typeFilterElement;
- },
-
- /**
- * @param {!Event} e
- */
- _onTypeFilterClicked: function(e)
- {
- var toggle;
- if (WebInspector.isMac())
- toggle = e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;
- else
- toggle = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
- this._toggleTypeFilter(e.target.typeName, toggle);
- },
-
- /**
- * @param {string} typeName
- * @param {boolean} allowMultiSelect
- */
- _toggleTypeFilter: function(typeName, allowMultiSelect)
- {
- if (allowMultiSelect && typeName !== WebInspector.NamedBitSetFilterUI.ALL_TYPES)
- this._allowedTypes[WebInspector.NamedBitSetFilterUI.ALL_TYPES] = false;
- else
- this._allowedTypes = {};
-
- this._allowedTypes[typeName] = !this._allowedTypes[typeName];
-
- if (this._setting)
- this._setting.set(this._allowedTypes);
- else
- this._update();
- },
-
- __proto__: WebInspector.Object.prototype
-};
+WebInspector.NamedBitSetFilterUI.ALL_TYPES = 'all';
/**
- * @constructor
* @implements {WebInspector.FilterUI}
- * @extends {WebInspector.Object}
- * @param {!Array.<!{value: *, label: string, title: string}>} options
+ * @unrestricted
*/
-WebInspector.ComboBoxFilterUI = function(options)
-{
- this._filterElement = createElement("div");
- this._filterElement.className = "filter-combobox-filter";
+WebInspector.ComboBoxFilterUI = class extends WebInspector.Object {
+ /**
+ * @param {!Array.<!{value: *, label: string, title: string}>} options
+ */
+ constructor(options) {
+ super();
+ this._filterElement = createElement('div');
+ this._filterElement.className = 'filter-combobox-filter';
this._options = options;
this._filterComboBox = new WebInspector.ToolbarComboBox(this._filterChanged.bind(this));
for (var i = 0; i < options.length; ++i) {
- var filterOption = options[i];
- var option = createElement("option");
- option.text = filterOption.label;
- option.title = filterOption.title;
- this._filterComboBox.addOption(option);
- this._filterComboBox.element.title = this._filterComboBox.selectedOption().title;
+ var filterOption = options[i];
+ var option = createElement('option');
+ option.text = filterOption.label;
+ option.title = filterOption.title;
+ this._filterComboBox.addOption(option);
+ this._filterComboBox.element.title = this._filterComboBox.selectedOption().title;
}
this._filterElement.appendChild(this._filterComboBox.element);
-};
-
-WebInspector.ComboBoxFilterUI.prototype = {
- /**
- * @override
- * @return {boolean}
- */
- isActive: function()
- {
- return this._filterComboBox.selectedIndex() !== 0;
- },
-
- /**
- * @override
- * @return {!Element}
- */
- element: function()
- {
- return this._filterElement;
- },
-
- /**
- * @return {*}
- */
- value: function()
- {
- var option = this._options[this._filterComboBox.selectedIndex()];
- return option.value;
- },
-
- /**
- * @param {number} index
- */
- setSelectedIndex: function(index)
- {
- this._filterComboBox.setSelectedIndex(index);
- },
-
- /**
- * @return {number}
- */
- selectedIndex: function(index)
- {
- return this._filterComboBox.selectedIndex();
- },
-
- /**
- * @param {!Event} event
- */
- _filterChanged: function(event)
- {
- var option = this._options[this._filterComboBox.selectedIndex()];
- this._filterComboBox.element.title = option.title;
- this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
- },
-
- __proto__: WebInspector.Object.prototype
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ isActive() {
+ return this._filterComboBox.selectedIndex() !== 0;
+ }
+
+ /**
+ * @override
+ * @return {!Element}
+ */
+ element() {
+ return this._filterElement;
+ }
+
+ /**
+ * @return {*}
+ */
+ value() {
+ var option = this._options[this._filterComboBox.selectedIndex()];
+ return option.value;
+ }
+
+ /**
+ * @param {number} index
+ */
+ setSelectedIndex(index) {
+ this._filterComboBox.setSelectedIndex(index);
+ }
+
+ /**
+ * @return {number}
+ */
+ selectedIndex(index) {
+ return this._filterComboBox.selectedIndex();
+ }
+
+ /**
+ * @param {!Event} event
+ */
+ _filterChanged(event) {
+ var option = this._options[this._filterComboBox.selectedIndex()];
+ this._filterComboBox.element.title = option.title;
+ this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
+ }
};
/**
- * @constructor
* @implements {WebInspector.FilterUI}
- * @extends {WebInspector.Object}
- * @param {string} className
- * @param {string} title
- * @param {boolean=} activeWhenChecked
- * @param {!WebInspector.Setting=} setting
+ * @unrestricted
*/
-WebInspector.CheckboxFilterUI = function(className, title, activeWhenChecked, setting)
-{
- this._filterElement = createElementWithClass("div", "filter-checkbox-filter");
+WebInspector.CheckboxFilterUI = class extends WebInspector.Object {
+ /**
+ * @param {string} className
+ * @param {string} title
+ * @param {boolean=} activeWhenChecked
+ * @param {!WebInspector.Setting=} setting
+ */
+ constructor(className, title, activeWhenChecked, setting) {
+ super();
+ this._filterElement = createElementWithClass('div', 'filter-checkbox-filter');
this._activeWhenChecked = !!activeWhenChecked;
this._label = createCheckboxLabel(title);
this._filterElement.appendChild(this._label);
this._checkboxElement = this._label.checkboxElement;
if (setting)
- WebInspector.SettingsUI.bindCheckbox(this._checkboxElement, setting);
+ WebInspector.SettingsUI.bindCheckbox(this._checkboxElement, setting);
else
- this._checkboxElement.checked = true;
- this._checkboxElement.addEventListener("change", this._fireUpdated.bind(this), false);
-};
-
-WebInspector.CheckboxFilterUI.prototype = {
- /**
- * @override
- * @return {boolean}
- */
- isActive: function()
- {
- return this._activeWhenChecked === this._checkboxElement.checked;
- },
-
- /**
- * @return {boolean}
- */
- checked: function()
- {
- return this._checkboxElement.checked;
- },
-
- /**
- * @param {boolean} checked
- */
- setChecked: function(checked)
- {
- this._checkboxElement.checked = checked;
- },
-
- /**
- * @override
- * @return {!Element}
- */
- element: function()
- {
- return this._filterElement;
- },
-
- /**
- * @return {!Element}
- */
- labelElement: function()
- {
- return this._label;
- },
-
- _fireUpdated: function()
- {
- this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
- },
-
- /**
- * @param {string} backgroundColor
- * @param {string} borderColor
- */
- setColor: function(backgroundColor, borderColor)
- {
- this._label.backgroundColor = backgroundColor;
- this._label.borderColor = borderColor;
- },
-
- __proto__: WebInspector.Object.prototype
+ this._checkboxElement.checked = true;
+ this._checkboxElement.addEventListener('change', this._fireUpdated.bind(this), false);
+ }
+
+ /**
+ * @override
+ * @return {boolean}
+ */
+ isActive() {
+ return this._activeWhenChecked === this._checkboxElement.checked;
+ }
+
+ /**
+ * @return {boolean}
+ */
+ checked() {
+ return this._checkboxElement.checked;
+ }
+
+ /**
+ * @param {boolean} checked
+ */
+ setChecked(checked) {
+ this._checkboxElement.checked = checked;
+ }
+
+ /**
+ * @override
+ * @return {!Element}
+ */
+ element() {
+ return this._filterElement;
+ }
+
+ /**
+ * @return {!Element}
+ */
+ labelElement() {
+ return this._label;
+ }
+
+ _fireUpdated() {
+ this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
+ }
+
+ /**
+ * @param {string} backgroundColor
+ * @param {string} borderColor
+ */
+ setColor(backgroundColor, borderColor) {
+ this._label.backgroundColor = backgroundColor;
+ this._label.borderColor = borderColor;
+ }
};

Powered by Google App Engine
This is Rietveld 408576698