chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/panels/settings/SettingsScreen.ts

@@ -28,13 +28,15 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/components/cards/cards.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as Cards from '../../ui/components/cards/cards.js';
+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';
@@ -103,8 +105,9 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let settingsScreenInstance: SettingsScreen;
 
 function createSettingsCard(heading: Common.UIString.LocalizedString, ...content: HTMLElement[]): Cards.Card.Card {
-  const card = new Cards.Card.Card();
-  card.data = {heading, content};
+  const card = document.createElement('devtools-card');
+  card.heading = heading;
+  card.append(...content);
   return card;
 }
 
@@ -115,6 +118,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
 
   private constructor() {
     super(true);
+    this.registerRequiredCSS(settingsScreenStyles);
 
     this.contentElement.classList.add('settings-window-main');
     this.contentElement.classList.add('vbox');
@@ -122,9 +126,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
     const settingsLabelElement = document.createElement('div');
     settingsLabelElement.classList.add('settings-window-label-element');
     const settingsTitleElement =
-        UI.UIUtils
-            .createShadowRootWithCoreStyles(
-                settingsLabelElement, {cssFile: [settingsScreenStyles], delegatesFocus: undefined})
+        UI.UIUtils.createShadowRootWithCoreStyles(settingsLabelElement, {cssFile: settingsScreenStyles})
             .createChild('div', 'settings-window-title');
 
     UI.ARIAUtils.markAsHeading(settingsTitleElement, 1);
@@ -133,7 +135,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
     this.tabbedLocation = UI.ViewManager.ViewManager.instance().createTabbedLocation(
         () => SettingsScreen.revealSettingsScreen(), 'settings-view');
     const tabbedPane = this.tabbedLocation.tabbedPane();
-    tabbedPane.registerCSSFiles([settingsScreenStyles]);
+    tabbedPane.registerRequiredCSS(settingsScreenStyles);
     tabbedPane.headerElement().prepend(settingsLabelElement);
     tabbedPane.setShrinkableTabs(false);
     tabbedPane.makeVerticalTabLayout();
@@ -166,6 +168,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
 
     settingsScreen.reportTabOnReveal = true;
     const dialog = new UI.Dialog.Dialog('settings');
+    dialog.contentElement.removeAttribute('aria-modal');
     dialog.contentElement.tabIndex = -1;
     dialog.addCloseButton();
     dialog.setOutsideClickCallback(() => {});
@@ -236,10 +239,6 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
       this.keybindsTab.onEscapeKeyPressed(event);
     }
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([settingsScreenStyles]);
-  }
 }
 
 abstract class SettingsTab extends UI.Widget.VBox {
@@ -477,7 +476,8 @@ export class ExperimentsSettingsTab extends SettingsTab {
   }
 
   private createExperimentCheckbox(experiment: Root.Runtime.Experiment): HTMLParagraphElement {
-    const label = UI.UIUtils.CheckboxLabel.create(experiment.title, experiment.isEnabled(), undefined, experiment.name);
+    const label = UI.UIUtils.CheckboxLabel.createWithStringLiteral(
+        experiment.title, experiment.isEnabled(), undefined, experiment.name);
     label.classList.add('experiment-label');
     const input = label.checkboxElement;
     input.name = experiment.name;

package/front_end/panels/settings/aiSettingsTab.css

@@ -8,6 +8,11 @@
   box-sizing: border-box;
 }
 
+:host {
+  container-type: inline-size; /* stylelint-disable-line property-no-unknown */
+  container-name: ai-settings; /* stylelint-disable-line property-no-unknown */
+}
+
 .shared-disclaimer {
   background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
   border-radius: var(--sys-size-5);
@@ -154,7 +159,8 @@
   flex-direction: column;
 }
 
-@media (min-width: 640px) {
+/* stylelint-disable-next-line at-rule-no-unknown */
+@container ai-settings (min-width: 480px) {
   .settings-container-wrapper {
     align-items: center;
   }
@@ -166,14 +172,18 @@ header {
 }
 
 .disabled-explainer {
-  display: flex;
-  gap: var(--sys-size-6);
   background-color: var(--sys-color-surface-yellow);
   border-radius: var(--sys-shape-corner-medium-small);
   margin-top: var(--sys-size-11);
-  padding: var(--sys-size-8) var(--sys-size-11);
+  padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
   width: 100%;
   max-width: var(--sys-size-35);
   min-width: var(--sys-size-28);
   color: var(--sys-color-yellow);
 }
+
+.disabled-explainer-row {
+  display: flex;
+  gap: var(--sys-size-6);
+  margin-top: var(--sys-size-4);
+}

package/front_end/panels/settings/components/SyncSection.test.ts

@@ -4,7 +4,7 @@
 
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {createFakeSetting, describeWithLocale} from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as SettingComponents from '../../../ui/components/settings/settings.js';
 
 import * as PanelComponents from './components.js';
@@ -14,7 +14,7 @@ async function renderSyncSection(data: PanelComponents.SyncSection.SyncSectionDa
   const section = new PanelComponents.SyncSection.SyncSection();
   renderElementIntoDOM(section);
   section.data = data;
-  await Coordinator.RenderCoordinator.RenderCoordinator.instance().done();
+  await RenderCoordinator.done();
   assert.isNotNull(section.shadowRoot);
   return {section, shadowRoot: section.shadowRoot};
 }

package/front_end/panels/settings/components/SyncSection.ts

@@ -10,11 +10,15 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 
-import syncSectionStyles from './syncSection.css.js';
+import syncSectionStylesRaw from './syncSection.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const syncSectionStyles = new CSSStyleSheet();
+syncSectionStyles.replaceSync(syncSectionStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -75,7 +79,7 @@ export class SyncSection extends HTMLElement {
     this.#syncSetting?.setDisabled(checkboxDisabled);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(html`
+    Lit.render(html`
       <fieldset>
         ${renderAccountInfoOrWarning(this.#syncInfo)}
         <setting-checkbox .data=${
@@ -88,9 +92,8 @@ export class SyncSection extends HTMLElement {
 }
 
 /* x-link doesn't work with custom click/keydown handlers */
-/* eslint-disable rulesdir/ban_a_tags_in_lit_html */
 
-function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): LitHtml.TemplateResult {
+function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): Lit.TemplateResult {
   if (!syncInfo.isSyncActive) {
     const link = 'chrome://settings/syncSetup' as Platform.DevToolsPath.UrlString;
     // Disabled until https://crbug.com/1079231 is fixed.

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/cards/cards.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
 import type * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as Cards from '../../../ui/components/cards/cards.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -24,7 +25,7 @@ const UIStrings = {
   /**
    *@description Button to add a custom device (e.g. phone, tablet) the Device Toolbar.
    */
-  addCustomDevice: 'Add custom device...',
+  addCustomDevice: 'Add custom device',
   /**
    *@description Label/title for UI to add a new custom device type. Device means mobile/tablet etc.
    */
@@ -85,6 +86,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
 
   constructor() {
     super();
+    this.registerRequiredCSS(devicesSettingsTabStyles);
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('devices')}`);
 
@@ -93,6 +95,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     this.containerElement.classList.add('settings-card-container', 'ignore-list-settings');
 
     this.#defaultDeviceList = new UI.ListWidget.ListWidget(this, false /* delegatesFocus */);
+    this.#defaultDeviceList.registerRequiredCSS(devicesSettingsTabStyles);
     this.#defaultDeviceList.element.classList.add('devices-list', 'device-card-content');
 
     this.muteUpdate = false;
@@ -115,31 +118,23 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     const deviceList = customSettings.createChild('div');
     customSettings.appendChild(this.addCustomButton);
 
-    const customDevicesCard = new Cards.Card.Card();
-    customDevicesCard.data = {
-      heading: i18nString(UIStrings.customDevices),
-      content: [customSettings],
-    };
-    this.containerElement.appendChild(customDevicesCard);
+    const customDevicesCard = this.containerElement.createChild('devtools-card');
+    customDevicesCard.heading = i18nString(UIStrings.customDevices);
+    customDevicesCard.append(customSettings);
 
     this.#customDeviceList = new UI.ListWidget.ListWidget(this, false /* delegatesFocus */);
+    this.#customDeviceList.registerRequiredCSS(devicesSettingsTabStyles);
     this.#customDeviceList.element.classList.add('devices-list');
     this.#customDeviceList.show(deviceList);
 
-    const defaultDevicesCard = new Cards.Card.Card();
-    defaultDevicesCard.data = {
-      heading: i18nString(UIStrings.defaultDevices),
-      content: [this.#defaultDeviceList.element],
-    };
-    this.containerElement.appendChild(defaultDevicesCard);
+    const defaultDevicesCard = this.containerElement.createChild('devtools-card');
+    defaultDevicesCard.heading = i18nString(UIStrings.defaultDevices);
+    defaultDevicesCard.append(this.#defaultDeviceList.element);
   }
 
   override wasShown(): void {
     super.wasShown();
     this.devicesUpdated();
-    this.registerCSSFiles([devicesSettingsTabStyles]);
-    this.#defaultDeviceList.registerCSSFiles([devicesSettingsTabStyles]);
-    this.#customDeviceList.registerCSSFiles([devicesSettingsTabStyles]);
   }
 
   private devicesUpdated(): void {
@@ -189,7 +184,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
   renderItem(device: EmulationModel.EmulatedDevices.EmulatedDevice, editable: boolean): Element {
     const label = document.createElement('label');
     label.classList.add('devices-list-item');
-    const checkbox = (label.createChild('input', 'devices-list-checkbox') as HTMLInputElement);
+    const checkbox = label.createChild('input', 'devices-list-checkbox');
     checkbox.type = 'checkbox';
     checkbox.checked = device.show();
     checkbox.addEventListener('click', onItemClicked.bind(this), false);

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -10,13 +10,17 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../../ui/components/input/input.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as EmulationUtils from '../utils/utils.js';
 
-import userAgentClientHintsFormStyles from './userAgentClientHintsForm.css.js';
+import userAgentClientHintsFormStylesRaw from './userAgentClientHintsForm.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const userAgentClientHintsFormStyles = new CSSStyleSheet();
+userAgentClientHintsFormStyles.replaceSync(userAgentClientHintsFormStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -443,7 +447,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
 
   #renderInputWithLabel(
       label: string, placeholder: string, value: string,
-      stateKey: keyof Protocol.Emulation.UserAgentMetadata): LitHtml.TemplateResult {
+      stateKey: keyof Protocol.Emulation.UserAgentMetadata): Lit.TemplateResult {
     const handleInputChange = (event: KeyboardEvent): void => {
       const value = (event.target as HTMLInputElement).value;
       this.#handleInputChange(stateKey, value);
@@ -464,7 +468,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
     `;
   }
 
-  #renderPlatformSection(): LitHtml.TemplateResult {
+  #renderPlatformSection(): Lit.TemplateResult {
     const {platform, platformVersion} = this.#metaData;
     const handlePlatformNameChange = (event: KeyboardEvent): void => {
       const value = (event.target as HTMLInputElement).value;
@@ -503,7 +507,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
     `;
   }
 
-  #renderDeviceModelSection(): LitHtml.TemplateResult {
+  #renderDeviceModelSection(): Lit.TemplateResult {
     const {model, mobile} = this.#metaData;
     const handleDeviceModelChange = (event: KeyboardEvent): void => {
       const value = (event.target as HTMLInputElement).value;
@@ -542,7 +546,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
     `;
   }
 
-  #renderUseragent(): LitHtml.TemplateResult {
+  #renderUseragent(): Lit.TemplateResult {
     const {
       brands =
           [
@@ -644,7 +648,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
     `;
   }
 
-  #renderFullVersionList(): LitHtml.TemplateResult {
+  #renderFullVersionList(): Lit.TemplateResult {
     const {
       fullVersionList =
           [
@@ -770,7 +774,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       >
         ${i18nString(UIStrings.update)}
       </devtools-button>
-    ` : LitHtml.nothing;
+    ` : Lit.nothing;
     // clang-format on
 
     // clang-format off
@@ -835,7 +839,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       </section>
     `;
               // clang-format on
-              LitHtml.render(output, this.#shadow, {host: this});
+            Lit.render(output, this.#shadow, {host: this});
   }
 
   validate = (): UI.ListWidget.ValidatorResult => {

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -23,8 +23,7 @@
   display: grid;
   grid-template-columns: 1fr 1fr 1fr auto;
   align-items: center;
-  column-gap: 10px;
-  row-gap: 8px;
+  gap: 8px 10px;
   padding: 0 10px;
 }
 

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -10,7 +10,9 @@
 }
 
 .list {
-  border: none;
+  &:has(div) {
+    border: none;
+  }
 }
 
 #custom-device-add-button {

package/front_end/panels/settings/emulation/utils/StructuredHeaders.test.ts

@@ -55,7 +55,7 @@ function assertParams(
   assert.lengthOf(result.items, expectParams.length);
   for (let i = 0; i < expectParams.length; ++i) {
     assert.strictEqual(result.items[i].name.value, expectParams[i][0]);
-    assert.deepStrictEqual(result.items[i].value, expectParams[i][1], 'Param ' + i + ' value mismatch');
+    assert.deepEqual(result.items[i].value, expectParams[i][1], 'Param ' + i + ' value mismatch');
   }
 }
 
@@ -88,7 +88,7 @@ function assertListItem(
     assert.fail('Unexpected inner list when an item expected');
     return;
   }
-  assert.deepStrictEqual(
+  assert.deepEqual(
       item.value, expectValue,
       'List item bare value mismatch, ' + item.value.value + ' vs expected ' + expectValue.value);
   assertItemParams(item, expectParams);

package/front_end/panels/settings/emulation/utils/UserAgentMetadata.ts

@@ -5,18 +5,18 @@
 // Helper functions for working with UserAgentMetadata protocol objects, in
 // particular their plain string representation.
 
-import type * as UI from '../../../../ui/legacy/legacy.js';
 import type * as Protocol from '../../../../generated/protocol.js';
+import type * as UI from '../../../../ui/legacy/legacy.js';
 
 import {
-  parseList,
-  ResultKind,
-  serializeItem,
-  serializeList,
   type Item,
   type List,
   type Parameters,
   type ParamName,
+  parseList,
+  ResultKind,
+  serializeItem,
+  serializeList,
   type String as SHString,
 } from './StructuredHeaders.js';
 

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -28,11 +28,7 @@
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
-  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
-
-  &:last-of-type {
-    border-bottom: unset;
-  }
+  border-top: var(--sys-size-1) solid var(--app-color-card-divider);
 }
 
 .keybinds-list-item:focus-visible {
@@ -107,13 +103,13 @@
   height: var(--sys-size-13);
   padding: var(--sys-size-4) var(--sys-size-7);
   white-space: nowrap;
-}
 
-.keybinds-list-item-wrapper + .keybinds-header-wrapper {
-  margin-top: var(--sys-size-9);
+  + .keybinds-list-item-wrapper > .keybinds-list-item {
+    border-top: unset;
+  }
 }
 
-.keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),
+.keybinds-list-item-wrapper:has(.keybinds-list-item:hover),
 .keybinds-list-item-wrapper:has(
   .keybinds-list-item:not(.keybinds-editing)):focus-within {
   background: var(--sys-color-state-hover-on-subtle);

package/front_end/panels/settings/settingsScreen.css

@@ -10,8 +10,7 @@
 }
 
 .settings-content {
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   margin: 8px 8px 8px 0;
   padding: 0 4px;
   flex: auto;
@@ -45,6 +44,7 @@ label {
   align-items: center;
   display: grid;
   row-gap: var(--sys-size-3);
+  margin: var(--sys-size-4) 0;
 }
 
 div:has(.settings-select) + div:has(.settings-select) {
@@ -73,29 +73,46 @@ div:has(.settings-select) + div:has(.settings-select) {
 
 .settings-card-container-wrapper {
   scrollbar-gutter: stable;
-  padding-bottom: var(--sys-size-8);
+  padding: var(--sys-size-8) 0;
   overflow: auto;
   position: absolute;
   inset: var(--sys-size-8) 0 0;
+  container-type: inline-size; /* stylelint-disable-line property-no-unknown */
+  container-name: settings-content; /* stylelint-disable-line property-no-unknown */
 }
 
-.settings-card-container {
+.settings-card-container,
+.settings-multicolumn-card-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--sys-size-9);
+
+  > devtools-button {
+    min-width: var(--sys-size-31);
+    max-width: var(--sys-size-35);
+    width: calc(100% - var(--sys-size-5));
+    margin-left: var(--sys-size-5);
+  }
 }
 
-.settings-multicolumn-card-container {
-  column-width: var(--sys-size-32);
-  column-gap: var(--sys-size-11);
+/* In multi-column mode, we adopt single-column styles unless
+   enough space is available to actually show two columns (at 850px) */
+/* stylelint-disable-next-line at-rule-no-unknown */
+@container settings-content (min-width: 850px) {
+  .settings-multicolumn-card-container {
+    display: block;
+    column-width: var(--sys-size-32);
+    column-gap: var(--sys-size-11);
+    margin: 0 var(--sys-size-9);
 
-  > * + * {
-    margin-top: var(--sys-size-8);
-  }
+    > * + * {
+      margin-top: var(--sys-size-8);
+    }
 
-  > devtools-button {
-    margin-left: var(--sys-size-5);
+    > devtools-button {
+      align-self: start;
+    }
   }
 }
 
@@ -127,7 +144,8 @@ devtools-button.link-icon {
 }
 
 .experiment-label {
-  margin-right: 2px;
+  margin: var(--sys-size-3) var(--sys-size-2) var(--sys-size-3) 0;
+  white-space: normal;
 }
 
 .settings-experiment-unstable {

package/front_end/panels/snippets/ScriptSnippetFileSystem.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -14,12 +14,14 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Snippets from './snippets.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithMockConnection('ScriptSnippetFileSystem', () => {
   it('evaluates snippets with user gesture', async () => {
     UI.Context.Context.instance().setFlavor(
         SDK.RuntimeModel.ExecutionContext, new MockExecutionContext(createTarget()));
     const uiSourceCode = new Workspace.UISourceCode.UISourceCode(
-        {} as Persistence.FileSystemWorkspaceBinding.FileSystem, 'snippet://test.js' as Platform.DevToolsPath.UrlString,
+        {} as Persistence.FileSystemWorkspaceBinding.FileSystem, urlString`snippet://test.js`,
         Common.ResourceType.resourceTypes.Script);
     await Snippets.ScriptSnippetFileSystem.evaluateScriptSnippet(uiSourceCode);
     UI.Context.Context.instance().setFlavor(SDK.RuntimeModel.ExecutionContext, null);

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -3,8 +3,9 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 
 import {evaluateScriptSnippet, findSnippetsProject} from './ScriptSnippetFileSystem.js';
 
@@ -21,6 +22,10 @@ const UIStrings = {
    *@description Text for suggestion of run a code snippet
    */
   snippet: 'Snippet',
+  /**
+   *@description Text for help title of run code snippet menu
+   */
+  runSnippet: 'Run snippet',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/snippets/SnippetsQuickOpen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -77,8 +82,9 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
   }
 
   override renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
+    const icon = IconButton.Icon.create('snippet', 'snippet');
+    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
     titleElement.textContent = this.snippets[itemIndex].name();
-    titleElement.classList.add('monospace');
     QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query, true);
   }
 }
@@ -86,8 +92,8 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
 QuickOpen.FilteredListWidget.registerProvider({
   prefix: '!',
   iconName: 'exclamation',
-  iconWidth: '20px',
   provider: () => Promise.resolve(SnippetsQuickOpen.instance()),
+  helpTitle: i18nLazyString(UIStrings.runSnippet),
   titlePrefix: i18nLazyString(UIStrings.run),
   titleSuggestion: i18nLazyString(UIStrings.snippet),
 });

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -32,6 +32,7 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
       label: Platform.UIString.LocalizedString, jslogContext: string,
       callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
     super(/* useShadowDom */ true);
+    this.registerRequiredCSS(dialogStyles);
 
     this.contentElement.createChild('label').textContent = label;
 
@@ -84,8 +85,4 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
       this.apply();
     }
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([dialogStyles]);
-  }
 }

package/front_end/panels/sources/BreakpointEditDialog.test.ts

@@ -17,8 +17,7 @@ function setCodeMirrorContent(editor: CodeMirror.EditorView, content: string) {
 
 function setBreakpointType(
     dialog: Sources.BreakpointEditDialog.BreakpointEditDialog, newType: SDK.DebuggerModel.BreakpointType) {
-  const toolbar = dialog.contentElement.querySelector('.toolbar');
-  const selectElement = toolbar!.shadowRoot!.querySelector('select');
+  const selectElement = dialog.contentElement.querySelector<HTMLSelectElement>('devtools-toolbar select');
   selectElement!.value = newType;
   selectElement!.dispatchEvent(new Event('change'));
 }
@@ -60,7 +59,7 @@ describeWithEnvironment('BreakpointEditDialog', () => {
       const {editorForTest: {editor}} = dialog;
       setCodeMirrorContent(editor, 'x === 5');
 
-      dialog.contentElement.querySelector('devtools-icon')!.click();
+      dialog.contentElement.querySelector<HTMLElement>('.dialog-header > devtools-icon')!.click();
     });
 
     const {committed, condition} = await resultPromise;