chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/elements/components/AdornerSettingsPane.ts

@@ -8,7 +8,7 @@ import * as Input from '../../../ui/components/input/input.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {type AdornerSettingsMap} from './AdornerManager.js';
+import type {AdornerSettingsMap} from './AdornerManager.js';
 import adornerSettingsPaneStyles from './adornerSettingsPane.css.js';
 
 const UIStrings = {
@@ -45,7 +45,6 @@ export interface AdornerSettingsPaneData {
 }
 
 export class AdornerSettingsPane extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-adorner-settings-pane`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #settings: AdornerSettingsMap = new Map();
 
@@ -109,13 +108,13 @@ export class AdornerSettingsPane extends HTMLElement {
         <div class="setting-list" @change=${this.#onChange}>
           ${settingTemplates}
         </div>
-        <${Buttons.Button.Button.litTagName} aria-label=${i18nString(UIStrings.closeButton)}
+        <devtools-button aria-label=${i18nString(UIStrings.closeButton)}
                                              .iconName=${'cross'}
                                              .size=${Buttons.Button.Size.SMALL}
                                              .title=${i18nString(UIStrings.closeButton)}
                                              .variant=${Buttons.Button.Variant.ICON}
                                              jslog=${VisualLogging.close().track({click: true})}
-                                             @click=${this.hide}></${Buttons.Button.Button.litTagName}>
+                                             @click=${this.hide}></devtools-button>
       </div>
     `, this.#shadow, {
       host: this,

package/front_end/panels/elements/components/AnchorFunctionLinkSwatch.ts

@@ -1,10 +1,12 @@
 // Copyright (c) 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 '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/legacy/components/inline_editor/inline_editor.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as InlineEditor from '../../../ui/legacy/components/inline_editor/inline_editor.js';
+import type * as InlineEditor from '../../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -43,7 +45,6 @@ export type AnchorFunctionLinkSwatchData = {
 // clang-format on
 
 export class AnchorFunctionLinkSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-anchor-function-link-swatch`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: AnchorFunctionLinkSwatchData;
 
@@ -73,7 +74,7 @@ export class AnchorFunctionLinkSwatch extends HTMLElement {
 
   #renderIdentifierLink(): LitHtml.LitTemplate {
     // clang-format off
-    return html`<${InlineEditor.LinkSwatch.LinkSwatch.litTagName}
+    return html`<devtools-link-swatch
       @mouseenter=${this.#data.onMouseEnter}
       @mouseleave=${this.#data.onMouseLeave}
       .data=${{
@@ -81,13 +82,13 @@ export class AnchorFunctionLinkSwatch extends HTMLElement {
         isDefined: Boolean(this.#data.anchorNode),
         jslogContext: 'anchor-link',
         onLinkActivate: this.#data.onLinkActivate,
-      } as InlineEditor.LinkSwatch.LinkSwatchRenderData}></${InlineEditor.LinkSwatch.LinkSwatch.litTagName}>`;
+      } as InlineEditor.LinkSwatch.LinkSwatchRenderData}></devtools-link-swatch>`;
     // clang-format on
   }
 
   #renderIconLink(): LitHtml.LitTemplate {
     // clang-format off
-    return html`<${IconButton.Icon.Icon.litTagName}
+    return html`<devtools-icon
       role='button'
       title=${i18nString(UIStrings.jumpToAnchorNode)}
       class='icon-link'
@@ -97,7 +98,7 @@ export class AnchorFunctionLinkSwatch extends HTMLElement {
       @mouseleave=${this.#data.onMouseLeave}
       @mousedown=${(ev: MouseEvent) => ev.stopPropagation()}
       @click=${this.#handleIconClick}
-    ></${IconButton.Icon.Icon.litTagName}>`;
+    ></devtools-icon>`;
     // clang-format on
   }
 

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/legacy/legacy.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
@@ -25,7 +27,6 @@ interface Hint {
 }
 
 export class CSSHintDetailsView extends HTMLElement {
-    static readonly litTagName = LitHtml.literal`devtools-css-hint-details-view`;
     readonly #shadow = this.attachShadow({mode: 'open'});
     readonly #authoringHint: Hint;
 
@@ -48,7 +49,7 @@ export class CSSHintDetailsView extends HTMLElement {
               <div class="hint-popup-possible-fix">
                   ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
                   ${link ? html`
-                      <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text"}>
+                      <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text">
                           ${i18nString(UIStrings.learnMore)}
                       </x-link>
                   `: ''}

package/front_end/panels/elements/components/CSSPropertyDocsView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/legacy/legacy.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -35,7 +37,6 @@ interface CSSProperty {
 }
 
 export class CSSPropertyDocsView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-property-docs-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #cssProperty: CSSProperty;
 
@@ -76,7 +77,7 @@ export class CSSPropertyDocsView extends HTMLElement {
               ${i18nString(UIStrings.learnMore)}
             </x-link>
             <label class="dont-show">
-              <input type="checkbox" @change=${this.#dontShowChanged} jslog=${VisualLogging.toggle('css-property-doc').track({ change: true })}/>
+              <input type="checkbox" @change=${this.#dontShowChanged} jslog=${VisualLogging.toggle('css-property-doc').track({ change: true })} />
               ${i18nString(UIStrings.dontShow)}
             </label>
           </div>

package/front_end/panels/elements/components/CSSQuery.ts

@@ -20,7 +20,6 @@ export interface CSSQueryData {
 }
 
 export class CSSQuery extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-query`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #queryPrefix: string = '';

package/front_end/panels/elements/components/CSSVariableValueView.ts

@@ -39,14 +39,13 @@ export interface RegisteredPropertyDetails {
 
 function getLinkSection(details: RegisteredPropertyDetails): LitHtml.TemplateResult {
   return html`<div class="registered-property-links">
-            <span role="button" @click=${details?.goToDefinition} class="clickable underlined unbreakable-text"}>
+            <span role="button" @click=${details?.goToDefinition} class="clickable underlined unbreakable-text">
               ${i18nString(UIStrings.registeredPropertyLinkTitle)}
             </span>
           </div>`;
 }
 
 export class CSSVariableParserError extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-variable-parser-error`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   constructor(details: RegisteredPropertyDetails) {
@@ -70,7 +69,6 @@ export class CSSVariableParserError extends HTMLElement {
 }
 
 export class CSSVariableValueView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-variable-value-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly variableName: string;
   readonly value: string|undefined;

package/front_end/panels/elements/components/ComputedStyleProperty.ts

@@ -17,7 +17,6 @@ export class NavigateToSourceEvent extends Event {
 }
 
 export class ComputedStyleProperty extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-computed-style-property`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #inherited = false;
   #traceable = false;

package/front_end/panels/elements/components/ComputedStyleTrace.ts

@@ -17,7 +17,6 @@ export interface ComputedStyleTraceData {
 }
 
 export class ComputedStyleTrace extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-computed-style-trace`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #selector = '';

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -2,18 +2,23 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/components/node_text/node_text.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
 import {crumbsToRender, type UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
-import {type DOMNode} from './Helper.js';
+import type {DOMNode} from './Helper.js';
+
+const {html} = LitHtml;
 
 const UIStrings = {
   /**
@@ -50,7 +55,6 @@ export interface ElementsBreadcrumbsData {
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #resizeObserver = new ResizeObserver(() => this.#checkForOverflowOnResize());
   readonly #renderBound = this.#render.bind(this);
@@ -272,20 +276,20 @@ export class ElementsBreadcrumbs extends HTMLElement {
 
     const tooltipString = direction === 'left' ? i18nString(UIStrings.scrollLeft) : i18nString(UIStrings.scrollRight);
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button
         class=${buttonStyles}
         @click=${this.#onOverflowClick(direction)}
         ?disabled=${disabled}
         aria-label=${tooltipString}
         title=${tooltipString}>
-        <${IconButton.Icon.Icon.litTagName} .data=${{
+        <devtools-icon .data=${{
           iconName: 'triangle-' + direction,
           color: 'var(--sys-color-on-surface)',
           width: '12px',
           height: '10px',
         } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
       </button>
       `;
     // clang-format on
@@ -296,7 +300,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)} jslog=${VisualLogging.elementsBreadcrumbs()}>
         ${this.#renderOverflowButton('left', this.#userScrollPosition === 'start')}
 
@@ -308,7 +312,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                 selected: crumb.selected,
               };
               // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-              return LitHtml.html`
+              return html`
                 <li class=${LitHtml.Directives.classMap(crumbClasses)}
                   data-node-id=${crumb.node.id}
                   data-crumb="true"
@@ -322,11 +326,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
                     @focus=${this.#onCrumbFocus(crumb.node)}
                     @blur=${this.#onCrumbBlur(crumb.node)}
-                  ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
+                  ><devtools-node-text data-node-title=${crumb.title.main} .data=${{
                     nodeTitle: crumb.title.main,
                     nodeId: crumb.title.extras.id,
                     nodeClasses: crumb.title.extras.classes,
-                  } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
+                  } as NodeText.NodeText.NodeTextData}></devtools-node-text></a>
                 </li>`;
             })}
           </ul>

package/front_end/panels/elements/components/ElementsBreadcrumbsUtils.ts

@@ -4,7 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 
-import {type DOMNode} from './Helper.js';
+import type {DOMNode} from './Helper.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/components/ElementsTreeExpandButton.ts

@@ -2,13 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import elementsTreeExpandButtonStyles from './elementsTreeExpandButton.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Aria label for a button expanding collapsed subtree
@@ -22,7 +25,6 @@ export interface ElementsTreeExpandButtonData {
   clickHandler: (event?: Event) => void;
 }
 export class ElementsTreeExpandButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-tree-expand-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #clickHandler: ((event?: Event) => void) = () => {};
@@ -44,12 +46,12 @@ export class ElementsTreeExpandButton extends HTMLElement {
     // clang-format off
     // This button's innerText will be tested by e2e test and blink layout tests.
     // It can't have any other characters like '\n' or space, otherwise it will break tests.
-    LitHtml.render(LitHtml.html`<button
+    LitHtml.render(html`<button
         class="expand-button"
         tabindex="-1"
         aria-label=${i18nString(UIStrings.expand)}
         jslog=${VisualLogging.action('expand').track({click: true})}
-        @click=${this.#clickHandler}><${IconButton.Icon.Icon.litTagName} name="dots-horizontal"></${IconButton.Icon.Icon.litTagName}></button>`,
+        @click=${this.#clickHandler}><devtools-icon name="dots-horizontal"></devtools-icon></button>`,
       this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/panels/elements/components/LayoutPane.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/node_text/node_text.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -9,7 +11,7 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
+import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
@@ -18,7 +20,7 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import layoutPaneStyles from './layoutPane.css.js';
-import {type BooleanSetting, type EnumSetting, type LayoutElement, type Setting} from './LayoutPaneUtils.js';
+import type {BooleanSetting, EnumSetting, LayoutElement, Setting} from './LayoutPaneUtils.js';
 
 const UIStrings = {
   /**
@@ -167,7 +169,6 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 let layoutPaneWrapperInstance: LegacyWrapper.LegacyWrapper.LegacyWrapper<UI.Widget.Widget, LayoutPane>;
 
 export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-layout-pane`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #settings: Readonly<Setting[]> = [];
   readonly #uaShadowDOMSetting: Common.Settings.Setting<boolean>;
@@ -462,24 +463,24 @@ export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
       <label data-element="true" class="checkbox-label">
         <input data-input="true" type="checkbox" .checked=${element.enabled} @change=${onElementToggle} jslog=${VisualLogging.toggle().track({click:true})} />
         <span class="node-text-container" data-label="true" @mouseenter=${onMouseEnter} @mouseleave=${onMouseLeave}>
-          <${NodeText.NodeText.NodeText.litTagName} .data=${{
+          <devtools-node-text .data=${{
             nodeId: element.domId,
             nodeTitle: element.name,
             nodeClasses: element.domClasses,
-          } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}>
+          } as NodeText.NodeText.NodeTextData}></devtools-node-text>
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} class="color-picker-label" style="background: ${element.color};" jslog=${VisualLogging.showStyleEditor('color').track({click: true})}>
         <input @change=${onColorChange} @input=${onColorChange} title=${i18nString(UIStrings.chooseElementOverlayColor)} tabindex="0" class="color-picker" type="color" value=${element.color} />
       </label>
-      <${Buttons.Button.Button.litTagName} class="show-element"
+      <devtools-button class="show-element"
                                            .title=${i18nString(UIStrings.showElementInTheElementsPanel)}
                                            aria-label=${i18nString(UIStrings.showElementInTheElementsPanel)}
                                            .iconName=${'select-element'}
                                            .jslogContext=${'elements.select-element'}
                                            .size=${Buttons.Button.Size.SMALL}
                                            .variant=${Buttons.Button.Variant.ICON}
-                                           @click=${onElementClick}></${Buttons.Button.Button.litTagName}>
+                                           @click=${onElementClick}></devtools-button>
     </div>`;
     // clang-format on
   }

package/front_end/panels/elements/components/QueryContainer.test.ts

@@ -4,7 +4,7 @@
 
 import * as SDK from '../../../core/sdk/sdk.js';
 import {assertNodeTextContent, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
+import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 
 import * as ElementsComponents from './components.js';
 
@@ -29,8 +29,7 @@ const containerTemplate: ElementsComponents.Helper.DOMNode = {
 };
 
 const assertContainerContent = (container: HTMLElement, expectedContent: string) => {
-  const nodeText =
-      container.shadowRoot!.querySelector<NodeText.NodeText.NodeText>(`${NodeText.NodeText.NodeText.litTagName.value}`);
+  const nodeText = container.shadowRoot!.querySelector<NodeText.NodeText.NodeText>('devtools-node-text');
   if (!nodeText || !nodeText.shadowRoot) {
     assert.fail('node text element and its shadowRoot should exist');
     return;

package/front_end/panels/elements/components/QueryContainer.ts

@@ -2,13 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/components/node_text/node_text.js';
+
 import * as SDK from '../../../core/sdk/sdk.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {type DOMNode} from './Helper.js';
+import type {DOMNode} from './Helper.js';
 import queryContainerStyles from './queryContainer.css.js';
 
 const {render, html} = LitHtml;
@@ -28,8 +31,6 @@ export interface QueryContainerData {
 }
 
 export class QueryContainer extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-query-container`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #queryName?: string;
   #container?: DOMNode;
@@ -90,13 +91,13 @@ export class QueryContainer extends HTMLElement {
         @click=${this.#onContainerLinkClick}
         @mouseenter=${this.#onContainerLinkMouseEnter}
         @mouseleave=${this.#onContainerLinkMouseLeave}
-      ><${NodeText.NodeText.NodeText.litTagName}
+      ><devtools-node-text
           data-node-title=${nodeTitle}
           .data=${{
         nodeTitle,
         nodeId: idToDisplay,
         nodeClasses: classesToDisplay,
-      } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
+      } as NodeText.NodeText.NodeTextData}></devtools-node-text></a>
       ${this.#isContainerLinkHovered ? this.#renderQueriedSizeDetails() : LitHtml.nothing}
     `, this.#shadow, {
       host: this,
@@ -121,11 +122,11 @@ export class QueryContainer extends HTMLElement {
     // clang-format off
     return html`
       <span class="queried-size-details">
-        (${this.#queriedSizeDetails.queryAxis}<${IconButton.Icon.Icon.litTagName}
+        (${this.#queriedSizeDetails.queryAxis}<devtools-icon
           class=${axisIconClasses} .data=${{
             iconName: 'width',
             color: 'var(--icon-default)',
-          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>)
+          } as IconButton.Icon.IconData}></devtools-icon>)
         ${areBothAxesQueried && this.#queriedSizeDetails.width ? 'width:' : LitHtml.nothing}
         ${this.#queriedSizeDetails.width || LitHtml.nothing}
         ${areBothAxesQueried && this.#queriedSizeDetails.height ? 'height:' : LitHtml.nothing}

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -66,7 +67,6 @@ export class PropertyDeselectedEvent extends Event {
   }
 }
 
-// eslint-disable-next-line rulesdir/check_component_naming
 export class StylePropertyEditor extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #authoredProperties: Map<string, string> = new Map();
@@ -140,8 +140,8 @@ export class StylePropertyEditor extends HTMLElement {
               class=${classes}
               jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
-        <${IconButton.Icon.Icon.litTagName} style=${transform} name=${iconInfo.iconName}>
-        </${IconButton.Icon.Icon.litTagName}>
+        <devtools-icon style=${transform} name=${iconInfo.iconName}>
+        </devtools-icon>
       </button>
     `;
   }

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -29,7 +29,8 @@
 }
 
 .computed-style-property.inherited {
-  opacity: 50%;
+  opacity: 75%;
+  font-style: italic;
 }
 
 .property-name,

package/front_end/panels/elements/components/cssPropertyDocsView.css

@@ -35,6 +35,7 @@
   justify-content: space-between;
 }
 
-.dont-show input {
-  vertical-align: bottom;
+.dont-show {
+  display: inline-flex;
+  align-items: center;
 }

package/front_end/panels/elements/elementsTreeOutline.css

@@ -83,6 +83,23 @@
   margin-left: -12px;
 }
 
+.elements-disclosure li .ai-button-container {
+  display: none;
+  margin-left: 1ch;
+  overflow: visible;
+  max-height: var(--sys-size-6);
+  vertical-align: top;
+  margin-top: -1px;
+  position: absolute;
+  right: var(--sys-size-3);
+  bottom: 5px;
+  z-index: 999;
+}
+
+.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.hovered .ai-button-container {
+  display: inline-flex;
+}
+
 .elements-disclosure li .selected-hint::before {
   font-style: italic;
   content: " == $0";

package/front_end/panels/elements/stylesSidebarPane.css

@@ -54,7 +54,7 @@
   .try-rule-selector-element,
   .ancestor-rule-list,
   .ancestor-closing-braces {
-    color: var(--sys-color-token-meta);
+    color: var(--app-color-element-sidebar-subtitle);
   }
 
   .ancestor-rule-list,
@@ -191,7 +191,7 @@
   background-color: var(--sys-color-surface2);
   padding: 0 5px;
   border-bottom: 1px solid var(--sys-color-divider);
-  color: var(--sys-color-token-subtle);
+  color: var(--sys-color-on-surface-subtle);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -10,7 +10,7 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {DeviceModeView} from './DeviceModeView.js';
-import {type InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
+import type {InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
 let deviceModeWrapperInstance: DeviceModeWrapper;
 

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -8,6 +8,8 @@ import * as UILegacy from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
+const {html} = LitHtml;
+
 class SizeChangedEvent extends Event {
   static readonly eventName = 'sizechanged';
   constructor(public size: number) {
@@ -62,7 +64,7 @@ export class SizeInputElement extends HTMLElement {
         // to use proper constructed stylesheets, when the code runs
         // in the correct frame context.
         // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
-        LitHtml.html`
+        html`
       <style>
         input {
           /*