chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/ui/legacy/checkboxTextLabel.css

@@ -34,6 +34,10 @@ input.inside-datagrid {
 .dt-checkbox-text {
   overflow: hidden;
   text-overflow: ellipsis;
+
+  input:disabled ~ & {
+    opacity: 38%;
+  }
 }
 
 .dt-checkbox-subtitle {

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -42,7 +42,7 @@ import * as UI from '../../legacy.js';
 
 import {colorFormatSpec, type SpectrumColorFormat} from './ColorFormatSpec.js';
 import {ContrastDetails, Events as ContrastDetailsEvents} from './ContrastDetails.js';
-import {type ContrastInfo} from './ContrastInfo.js';
+import type {ContrastInfo} from './ContrastInfo.js';
 import {ContrastOverlay} from './ContrastOverlay.js';
 import {FormatPickerContextMenu} from './FormatPickerContextMenu.js';
 import spectrumStyles from './spectrum.css.js';

package/front_end/ui/legacy/components/data_grid/DataGrid.test.ts

@@ -0,0 +1,51 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as UI from '../../legacy.js';
+
+import * as DataGrid from './data_grid.js';
+
+const {render, html} = LitHtml;
+const widgetRef = UI.Widget.widgetRef;
+
+describeWithEnvironment('DataGrid', () => {
+  it('can be instantiated from template', async () => {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    let widget!: DataGrid.DataGrid.DataGridWidget<unknown>;
+
+    const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<unknown> = {
+      implParams: {
+        displayName: 'testGrid',
+        columns: [{
+          id: 'test',
+          sortable: false,
+        }],
+      },
+      nodes: [new DataGrid.DataGrid.DataGridNode({test: 'testNode'})],
+      markAsRoot: true,
+    };
+
+    // clang-format off
+        render(
+            html`
+        <devtools-data-grid-widget
+            .options=${dataGridOptions}
+            ${widgetRef(DataGrid.DataGrid.DataGridWidget, e => { widget = e; })}
+        ></devtools-data-grid-widget>
+        `,
+        container, {host: this});
+    // clang-format on
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    assert.exists(widget);
+    // There is a single test row
+    assert.strictEqual(widget.dataGrid.rootNode().children.length, 1);
+  });
+});

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -228,7 +228,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.editing = false;
     this.selectedNode = null;
     this.expandNodesWhenArrowing = false;
-    this.setRootNode((new DataGridNode() as DataGridNode<T>));
+    this.setRootNode(new DataGridNode<T>());
 
     this.setHasSelection(false);
 
@@ -1549,9 +1549,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return 0;
   }
 
-  asWidget(): DataGridWidget<T> {
+  asWidget(element?: HTMLElement): DataGridWidget<T> {
     if (!this.dataGridWidget) {
-      this.dataGridWidget = new DataGridWidget(this);
+      this.dataGridWidget = new DataGridWidget(this, element);
     }
     return this.dataGridWidget;
   }
@@ -2441,9 +2441,9 @@ export class CreationDataGridNode<T> extends DataGridNode<T> {
 }
 
 export class DataGridWidget<T> extends UI.Widget.VBox {
-  private readonly dataGrid: DataGridImpl<T>;
-  constructor(dataGrid: DataGridImpl<T>) {
-    super();
+  readonly dataGrid: DataGridImpl<T>;
+  constructor(dataGrid: DataGridImpl<T>, element?: HTMLElement) {
+    super(undefined, undefined, element);
     this.dataGrid = dataGrid;
     this.element.appendChild(dataGrid.element);
     this.setDefaultFocusedElement(dataGrid.element);
@@ -2466,6 +2466,92 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
     return [this.dataGrid.scrollContainer];
   }
 }
+
+export interface DataGridWidgetOptions<T> {
+  implParams: Parameters;
+  dataGridImpl?: DataGridImpl<T>;
+  markAsRoot?: boolean;
+  nodes: DataGridNode<T>[];
+}
+
+export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
+  #options: DataGridWidgetOptions<T>;
+
+  constructor() {
+    super();
+    // default values for options
+    this.#options = {
+      implParams: {
+        displayName: 'dataGrid',
+        columns: [],
+      },
+      nodes: [],
+    };
+  }
+
+  set options(options: DataGridWidgetOptions<T>) {
+    this.#options = options;
+  }
+
+  override createWidget(): DataGridWidget<T> {
+    const {
+      implParams,
+      markAsRoot,
+      nodes,
+    } = this.#options;
+
+    if (!this.#options.dataGridImpl) {
+      this.#options.dataGridImpl = new DataGridImpl<T>(implParams);
+    }
+
+    this.#options.dataGridImpl.rootNode().removeChildren();
+    for (const node of nodes) {
+      this.#options.dataGridImpl.rootNode().appendChild(node);
+    }
+
+    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    this.#options.dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
+    const widget = this.#options.dataGridImpl.asWidget(this);
+
+    if (markAsRoot) {
+      widget.markAsRoot();
+    }
+    return widget;
+  }
+
+  #selectedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('selectedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #deselectedNode(): void {
+    const domEvent = new CustomEvent('deselectedNode');
+    this.dispatchEvent(domEvent);
+  }
+
+  #openedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('openedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #sortingChanged(): void {
+    const domEvent = new CustomEvent('sortingChanged');
+    this.dispatchEvent(domEvent);
+  }
+
+  #paddingChanged(): void {
+    const domEvent = new CustomEvent('paddingChanged');
+    this.dispatchEvent(domEvent);
+  }
+}
+
+customElements.define('devtools-data-grid-widget', DataGridWidgetElement);
+
 export interface Parameters {
   displayName: string;
   columns: ColumnDescriptor[];

package/front_end/ui/legacy/components/data_grid/DataGridWithPreview.ts

@@ -50,10 +50,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 interface Callbacks {
   // Called to refresh items, e.g when the sorting order is changed.
   refreshItems: () => void;
-  // Called when a key is deleted in the UI.
-  removeItem: (key: string) => void;
-  // Called when an item is created or updated in the UI.
-  setItem: (key: string, value: string) => void;
+  // Edit callbacks. If undefined, the data grid is not editable.
+  edit?: {
+    // Called when a key is deleted in the UI.
+    removeItem: (key: string) => void,
+    // Called when an item is created or updated in the UI.
+    setItem: (key: string, value: string) => void,
+  };
   // Called when the selection state changes.
   setCanDeleteSelected: (canSelect: boolean) => void;
   // Called to create the preview widget when a new item is selected.
@@ -86,9 +89,12 @@ export class DataGridWithPreview {
     this.#dataGrid = new DataGridImpl({
       displayName: this.#messages.title,
       columns,
-      editCallback: this.#editingCallback.bind(this),
-      deleteCallback: this.#deleteCallback.bind(this),
       refreshCallback: this.#callbacks.refreshItems,
+      ...(this.#callbacks.edit ? {
+        editCallback: this.#editingCallback.bind(this),
+        deleteCallback: this.#deleteCallback.bind(this),
+      } :
+                                 {}),
     });
     this.#dataGrid.addEventListener(Events.SELECTED_NODE, event => {
       void this.#previewEntry(event.data);
@@ -188,6 +194,7 @@ export class DataGridWithPreview {
         continue;
       }
       selectedKey = node.data.key;
+      void this.#previewEntry(node);
       break;
     }
     rootNode.removeChildren();
@@ -226,12 +233,12 @@ export class DataGridWithPreview {
       void {
     if (columnIdentifier === 'key') {
       if (typeof oldText === 'string') {
-        this.#callbacks.removeItem(oldText);
+        this.#callbacks.edit?.removeItem(oldText);
       }
-      this.#callbacks.setItem(newText, editingNode.data.value || '');
+      this.#callbacks.edit?.setItem(newText, editingNode.data.value || '');
       this.#removeDupes(editingNode);
     } else {
-      this.#callbacks.setItem(editingNode.data.key || '', newText);
+      this.#callbacks.edit?.setItem(editingNode.data.key || '', newText);
     }
   }
 
@@ -251,7 +258,7 @@ export class DataGridWithPreview {
       return;
     }
 
-    this.#callbacks.removeItem(node.data.key);
+    this.#callbacks.edit?.removeItem(node.data.key);
 
     ARIAUtils.alert(this.#messages.itemDeleted);
   }
@@ -283,4 +290,8 @@ export class DataGridWithPreview {
       this.showPreview(null, value);
     }
   }
+
+  detach(): void {
+    this.#splitWidget.detach();
+  }
 }

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -86,6 +86,10 @@
 .data-grid tbody tr {
   display: none;
   height: 20px;
+
+  &:has(td.show-more) {
+    height: var(--sys-size-13);
+  }
 }
 
 .data-grid tbody tr.revealed {
@@ -291,10 +295,13 @@
 
 .data-grid td.show-more {
   white-space: normal;
-  gap: 4px;
+  gap: var(--sys-size-3);
 
   devtools-button {
     margin-right: var(--sys-size-6);
+    position: relative;
+    margin-top: 3px;
+    margin-bottom: 3px;
   }
 }
 

package/front_end/ui/legacy/components/inline_editor/AnimationTimingUI.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
-import {type AnimationTimingModel} from './AnimationTimingModel.js';
+import type {AnimationTimingModel} from './AnimationTimingModel.js';
 import {BezierUI} from './BezierUI.js';
 import {CSSLinearEasingModel, type Point} from './CSSLinearEasingModel.js';
 

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -2,11 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './CSSAngleEditor.js';
+import './CSSAngleSwatch.js';
+
 import * as LitHtml from '../../../lit-html/lit-html.js';
 
 import cssAngleStyles from './cssAngle.css.js';
-import {CSSAngleEditor, type CSSAngleEditorData} from './CSSAngleEditor.js';
-import {CSSAngleSwatch, type CSSAngleSwatchData} from './CSSAngleSwatch.js';
 import {
   type Angle,
   AngleUnit,
@@ -58,7 +59,6 @@ const DefaultAngle = {
 };
 
 export class CSSAngle extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = DefaultAngle;
   private displayedAngle: Angle = DefaultAngle;
@@ -116,7 +116,7 @@ export class CSSAngle extends HTMLElement {
     if (miniIconBottom && miniIconLeft) {
       // We offset mini icon's X and Y positions with the containing styles
       // pane's positions because DevTools' root SplitWidget's
-      // insertion-point-sidebar slot, where most of the DevTools content lives,
+      // sidebar slot, where most of the DevTools content lives,
       // has an offset of positions, which makes all of its children's DOMRect
       // positions to have this offset.
       const offsetTop = this.containingPane.getBoundingClientRect().top;
@@ -227,14 +227,14 @@ export class CSSAngle extends HTMLElement {
     render(html`
       <div class="css-angle" @focusout=${this.minify} @keydown=${this.onKeydown} tabindex="-1">
         <div class="preview">
-          <${CSSAngleSwatch.litTagName}
+          <devtools-css-angle-swatch
             @click=${this.onMiniIconClick}
             @mousedown=${this.consume}
             @dblclick=${this.consume}
             .data=${{
               angle: this.angle,
-            } as CSSAngleSwatchData}>
-          </${CSSAngleSwatch.litTagName}><slot></slot></div>
+            }}>
+          </devtools-css-angle-swatch><slot></slot></div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
     `, this.shadow, {
@@ -252,7 +252,7 @@ export class CSSAngle extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-    <${CSSAngleEditor.litTagName}
+    <devtools-css-angle-editor
       class="popover popover-css-angle"
       style=${styleMap({top: this.popoverStyleTop, left: this.popoverStyleLeft})}
       .data=${{
@@ -261,10 +261,10 @@ export class CSSAngle extends HTMLElement {
           this.updateAngle(angle);
         },
         background: contextualBackground,
-      } as CSSAngleEditorData}
-    ></${CSSAngleEditor.litTagName}>
+      }}
+    ></devtools-css-angle-editor>
     `;
-    // clang-format on
+        // clang-format on
   }
 }
 

package/front_end/ui/legacy/components/inline_editor/CSSAngleEditor.ts

@@ -28,7 +28,6 @@ export interface CSSAngleEditorData {
 }
 
 export class CSSAngleEditor extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle-editor`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = {
     value: 0,

package/front_end/ui/legacy/components/inline_editor/CSSAngleSwatch.ts

@@ -17,7 +17,6 @@ export interface CSSAngleSwatchData {
 }
 
 export class CSSAngleSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle-swatch`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = {

package/front_end/ui/legacy/components/inline_editor/CSSLength.ts

@@ -57,7 +57,6 @@ type CSSLengthData = {
 };
 
 export class CSSLength extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-length`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private readonly onDraggingValue = this.dragValue.bind(this);

package/front_end/ui/legacy/components/inline_editor/ColorMixSwatch.ts

@@ -9,6 +9,8 @@ import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 
 import colorMixSwatchStyles from './colorMixSwatch.css.js';
 
+const {html} = LitHtml;
+
 export const enum Events {
   COLOR_CHANGED = 'colorChanged',
 }
@@ -18,7 +20,6 @@ export interface EventTypes {
 }
 
 export class ColorMixSwatch extends Common.ObjectWrapper.eventMixin<EventTypes, typeof HTMLElement>(HTMLElement) {
-  static readonly litTagName = LitHtml.literal`devtools-color-mix-swatch`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private colorMixText: string = '';     // color-mix(in srgb, hotpink, white)
   private firstColorText: string = '';   // hotpink
@@ -95,7 +96,7 @@ export class ColorMixSwatch extends Common.ObjectWrapper.eventMixin<EventTypes,
     // Note also that whitespace between nodes is removed on purpose to avoid pushing these elements apart. Do not
     // re-format the HTML code.
     LitHtml.render(
-      LitHtml.html`<div class="swatch-icon" jslog=${VisualLogging.cssColorMix()} style="--color: ${this.colorMixText}">
+      html`<div class="swatch-icon" jslog=${VisualLogging.cssColorMix()} style="--color: ${this.colorMixText}">
         <span class="swatch swatch-left" id="swatch-1" style="--color: ${this.firstColorText}"></span>
         <span class="swatch swatch-right" id="swatch-2" style="--color: ${this.secondColorText}"></span>
         <span class="swatch swatch-mix" id="mix-result" style="--color: ${this.colorMixText}"></span>

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -10,6 +10,8 @@ import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 
 import colorSwatchStyles from './colorSwatch.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Icon element title in Color Swatch of the inline editor in the Styles tab
@@ -39,7 +41,6 @@ export class ClickEvent extends Event {
 }
 
 export class ColorSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-color-swatch`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
   private color: Common.Color.Color|null = null;
@@ -106,7 +107,7 @@ export class ColorSwatch extends HTMLElement {
     // Note also that whitespace between nodes is removed on purpose to avoid pushing these elements apart. Do not
     // re-format the HTML code.
     LitHtml.render(
-      LitHtml.html`<span class=${colorSwatchClasses} title=${this.tooltip}><span class="color-swatch-inner"
+      html`<span class=${colorSwatchClasses} title=${this.tooltip}><span class="color-swatch-inner"
         style="background-color: ${this.getText()};"
         jslog=${VisualLogging.showStyleEditor('color').track({click: true})}
         @click=${this.onClick}

package/front_end/ui/legacy/components/inline_editor/LinkSwatch.ts

@@ -19,7 +19,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/inline_editor/LinkSwatch.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, Directives} = LitHtml;
+const {render, html, Directives: {ifDefined, classMap}} = LitHtml;
 
 interface BaseLinkSwatchRenderData {
   text: string;
@@ -30,7 +30,6 @@ interface BaseLinkSwatchRenderData {
 }
 
 class BaseLinkSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-base-link-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
   protected onLinkActivate: (linkText: string, event: MouseEvent|KeyboardEvent) => void = () => undefined;
   #linkElement: HTMLSpanElement|undefined;
@@ -59,7 +58,7 @@ class BaseLinkSwatch extends HTMLElement {
 
   private render(data: BaseLinkSwatchRenderData): void {
     const {isDefined, text, title} = data;
-    const classes = Directives.classMap({
+    const classes = classMap({
       'link-style': true,
       'text-button': true,
       'link-swatch-link': true,
@@ -71,10 +70,10 @@ class BaseLinkSwatch extends HTMLElement {
     // We added var popover, so don't need the title attribute when no need for showing title and
     // only provide the data-title for the popover to get the data.
     const {startNode} = render(
-        html`<button .disabled=${!isDefined} class=${classes} title=${
-            LitHtml.Directives.ifDefined(data.showTitle ? title : null)} data-title=${
-            LitHtml.Directives.ifDefined(
-                !data.showTitle ? title : null)} @click=${onActivate} role="link" tabindex="-1">${text}</button>`,
+        html`<button .disabled=${!isDefined} class=${classes}
+                     title=${ifDefined(data.showTitle ? title : undefined)}
+                     data-title=${ifDefined(!data.showTitle ? title : undefined)}
+                     @click=${onActivate} role="link" tabindex="-1">${text}</button>`,
         this.shadow, {host: this});
     if (startNode?.nextSibling instanceof HTMLButtonElement) {
       this.#linkElement = startNode?.nextSibling;
@@ -91,7 +90,6 @@ interface CSSVarSwatchRenderData {
 }
 
 export class CSSVarSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-var-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
   #link: BaseLinkSwatch|undefined;
 
@@ -150,7 +148,6 @@ export interface LinkSwatchRenderData {
 }
 
 export class LinkSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-link-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
 
   set data(data: LinkSwatchRenderData) {
@@ -161,13 +158,13 @@ export class LinkSwatch extends HTMLElement {
     const {text, isDefined, onLinkActivate, jslogContext} = data;
     const title = isDefined ? text : i18nString(UIStrings.sIsNotDefined, {PH1: text});
     render(
-        html`<span title=${data.text} jslog=${VisualLogging.link().track({click: true}).context(jslogContext)}><${
-            BaseLinkSwatch.litTagName} .data=${{
+        html`<span title=${data.text} jslog=${
+            VisualLogging.link().track({click: true}).context(jslogContext)}><devtools-base-link-swatch .data=${{
           text,
           isDefined,
           title,
           onLinkActivate,
-        } as BaseLinkSwatchRenderData}></${BaseLinkSwatch.litTagName}></span>`,
+        } as BaseLinkSwatchRenderData}></devtools-base-link-swatch></span>`,
         this.shadow, {host: this});
   }
 }

package/front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -8,9 +8,11 @@ import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import bezierSwatchStyles from './bezierSwatch.css.js';
-import {type CSSShadowModel} from './CSSShadowEditor.js';
+import type {CSSShadowModel} from './CSSShadowEditor.js';
 import cssShadowSwatchStyles from './cssShadowSwatch.css.js';
 
+const {html} = LitHtml;
+
 export class BezierSwatch extends HTMLSpanElement {
   private readonly iconElementInternal: IconButton.Icon.Icon;
   private textElement: HTMLElement;
@@ -58,7 +60,6 @@ export class BezierSwatch extends HTMLSpanElement {
 }
 
 export class CSSShadowSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`css-shadow-swatch`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #icon: IconButton.Icon.Icon;
   readonly #model: CSSShadowModel;
@@ -71,11 +72,10 @@ export class CSSShadowSwatch extends HTMLElement {
     ];
 
     LitHtml.render(
-        LitHtml.html`<${IconButton.Icon.Icon.litTagName} name="shadow" class="shadow-swatch-icon"></${
-            IconButton.Icon.Icon.litTagName}><slot></slot>`,
-        this.#shadow, {host: this});
+        html`<devtools-icon name="shadow" class="shadow-swatch-icon"></devtools-icon><slot></slot>`, this.#shadow,
+        {host: this});
 
-    this.#icon = this.#shadow.querySelector(IconButton.Icon.Icon.litTagName.value as string) as IconButton.Icon.Icon;
+    this.#icon = this.#shadow.querySelector('devtools-icon') as IconButton.Icon.Icon;
   }
 
   model(): CSSShadowModel {

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -127,7 +127,7 @@ const UIStrings = {
    * which are based on bytes and can be shown in a hexadecimal viewer.
    * Clicking on the button will display that object in the Memory inspector panel.
    */
-  revealInMemoryInpector: 'Reveal in Memory inspector panel',
+  openInMemoryInpector: 'Open in Memory inspector panel',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/ObjectPropertiesSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -391,7 +391,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     });
     memoryIcon.setAttribute('jslog', `${VisualLogging.action('open-memory-inspector').track({click: true})}`);
 
-    const revealText = i18nString(UIStrings.revealInMemoryInpector);
+    const revealText = i18nString(UIStrings.openInMemoryInpector);
     UI.Tooltip.Tooltip.install(memoryIcon, revealText);
     UI.ARIAUtils.setLabel(memoryIcon, revealText);
 

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -6,7 +6,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as WindowBounds from '../../../../services/window_bounds/window_bounds.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
-import {type FlameChart} from './FlameChart.js';
+import type {FlameChart} from './FlameChart.js';
 
 const UIStrings = {
   /**
@@ -108,7 +108,7 @@ const colorPallettes: ColorPalette[] = [
   },
 ];
 
-/* eslint-disable rulesdir/check_component_naming, rulesdir/no_underscored_properties, rulesdir/ban_style_tags_in_lit_html, rulesdir/ban_a_tags_in_lit_html, rulesdir/lit_html_host_this */
+/* rulesdir/no_underscored_properties, rulesdir/ban_style_tags_in_lit_html, rulesdir/ban_a_tags_in_lit_html, rulesdir/lit_html_host_this */
 export class BrickBreaker extends HTMLElement {
   #canvas: HTMLCanvasElement;
   #ctx: CanvasRenderingContext2D;