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; |
+ } |
}; |