From 6c5d77f8f435d03f7326fa18e707e39370170952 Mon Sep 17 00:00:00 2001 From: Kim-Anh Tran Date: Mon, 31 Mar 2025 12:20:49 +0200 Subject: [PATCH] [GM3Restyling] Update filter bar in experiments settings This updates the filter bar to the updated filter in the experiments settings. Before: https://i.imgur.com/oniQF3F.png After: https://i.imgur.com/V6L8Rtp.png Fixed: 407480170 Change-Id: Ieae203a2f3576bfa3696d1e08f7b99b60c459735 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6415792 Reviewed-by: Kateryna Prokopenko Commit-Queue: Kateryna Prokopenko Commit-Queue: Kim-Anh Tran Auto-Submit: Kim-Anh Tran --- front_end/panels/settings/SettingsScreen.ts | 43 ++++++++++---------- front_end/panels/settings/settingsScreen.css | 11 ++--- front_end/ui/legacy/Toolbar.ts | 4 ++ 3 files changed, 28 insertions(+), 30 deletions(-) diff --git a/front_end/panels/settings/SettingsScreen.ts b/front_end/panels/settings/SettingsScreen.ts index 4b10eb8e33..077dad2828 100644 --- a/front_end/panels/settings/SettingsScreen.ts +++ b/front_end/panels/settings/SettingsScreen.ts @@ -39,6 +39,7 @@ import type * as Cards from '../../ui/components/cards/cards.js'; import * as IconButton from '../../ui/components/icon_button/icon_button.js'; import * as Components from '../../ui/legacy/components/utils/utils.js'; import * as UI from '../../ui/legacy/legacy.js'; +import {html, render} from '../../ui/lit/lit.js'; import * as VisualLogging from '../../ui/visual_logging/visual_logging.js'; import {PanelUtils} from '../utils/utils.js'; @@ -80,10 +81,6 @@ const UIStrings = { *@description Message to display if a setting change requires a reload of DevTools */ oneOrMoreSettingsHaveChanged: 'One or more settings have changed which requires a reload to take effect', - /** - * @description Label for a filter text input that controls which experiments are shown. - */ - filterExperimentsLabel: 'Filter', /** * @description Warning text shown when the user has entered text to filter the * list of experiments, but no experiments match the filter. @@ -97,6 +94,10 @@ const UIStrings = { *@description Text that is usually a hyperlink to a feedback form */ sendFeedback: 'Send feedback', + /** + *@description Placeholder text in search bar + */ + searchExperiments: 'Search experiments', } as const; const str_ = i18n.i18n.registerUIStrings('panels/settings/SettingsScreen.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); @@ -393,28 +394,31 @@ export class GenericSettingsTab extends SettingsTab { export class ExperimentsSettingsTab extends SettingsTab { #experimentsSection: Cards.Card.Card|undefined; #unstableExperimentsSection: Cards.Card.Card|undefined; - #inputElement: HTMLInputElement; private readonly experimentToControl = new Map(); constructor() { super('experiments-tab-content'); this.containerElement.classList.add('settings-card-container'); + this.element.setAttribute('jslog', `${VisualLogging.pane('experiments')}`); const filterSection = this.containerElement.createChild('div'); filterSection.classList.add('experiments-filter'); + render( + html` + + + + `, + filterSection); + this.renderExperiments(''); + const filter = filterSection.querySelector('devtools-toolbar-input') as HTMLElement; + this.setDefaultFocusedElement(filter); + } - this.element.setAttribute('jslog', `${VisualLogging.pane('experiments')}`); - - const labelElement = filterSection.createChild('label'); - labelElement.textContent = i18nString(UIStrings.filterExperimentsLabel); - this.#inputElement = UI.UIUtils.createInput('', 'text', 'experiments-filter'); - UI.ARIAUtils.bindLabelToControl(labelElement, this.#inputElement); - filterSection.appendChild(this.#inputElement); - this.#inputElement.addEventListener( - 'input', () => this.renderExperiments(this.#inputElement.value.toLowerCase()), false); - this.setDefaultFocusedElement(this.#inputElement); - - this.setFilter(''); + #onFilterChanged(e: CustomEvent): void { + this.renderExperiments(e.detail.toLowerCase()); } private renderExperiments(filterText: string): void { @@ -530,11 +534,6 @@ export class ExperimentsSettingsTab extends SettingsTab { } } - setFilter(filterText: string): void { - this.#inputElement.value = filterText; - this.#inputElement.dispatchEvent(new Event('input', {bubbles: true, cancelable: true})); - } - override wasShown(): void { UI.Context.Context.instance().setFlavor(ExperimentsSettingsTab, this); super.wasShown(); diff --git a/front_end/panels/settings/settingsScreen.css b/front_end/panels/settings/settingsScreen.css index 20c16746a7..6d3c0a7970 100644 --- a/front_end/panels/settings/settingsScreen.css +++ b/front_end/panels/settings/settingsScreen.css @@ -26,18 +26,13 @@ fieldset { border: none; } -.experiments-filter { - padding-top: 1px; - display: flex; - align-items: center; -} - label { padding-right: 8px; } -.experiments-filter label { - padding-bottom: 0; +.experiments-filter { + width: 100%; + padding: 0 var(--sys-size-4) 0 var(--sys-size-3); } .settings-select { diff --git a/front_end/ui/legacy/Toolbar.ts b/front_end/ui/legacy/Toolbar.ts index 2a6bb20c1e..5d218ca424 100644 --- a/front_end/ui/legacy/Toolbar.ts +++ b/front_end/ui/legacy/Toolbar.ts @@ -891,6 +891,10 @@ class ToolbarInputElement extends HTMLElement { }); } + override focus(): void { + this.item.focus(); + } + async #onAutocomplete(expression: string, prefix: string, force?: boolean): Promise { if (!prefix && !force && expression || !this.datalist) { return [];