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