chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -279,6 +279,96 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
                stylePropertyTreeElement.valueElement?.querySelectorAll('devtools-link-swatch');
            assert.strictEqual(animationNameSwatches?.length, 2);
          });
+
+      describe('jumping to animations panel', () => {
+        let domModel: SDK.DOMModel.DOMModel;
+        beforeEach(() => {
+          const target = createTarget();
+          const domModelBeforeAssertion = target.model(SDK.DOMModel.DOMModel);
+          assert.exists(domModelBeforeAssertion);
+          domModel = domModelBeforeAssertion;
+        });
+
+        afterEach(() => {
+          sinon.reset();
+        });
+
+        it('should render a jump-to icon when the animation with the given name exists for the node', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          assert.exists(jumpToIcon);
+        });
+
+        it('should clicking on the jump-to icon reveal the resolved animation group', async () => {
+          const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
+          const revealerSpy = sinon.spy(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+          const getAnimationGroupForAnimationStub =
+              sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                  .resolves(stubAnimationGroup);
+          const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+            nodeId: 1 as Protocol.DOM.NodeId,
+            backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+            nodeType: Node.ELEMENT_NODE,
+            nodeName: 'div',
+            localName: 'div',
+            nodeValue: '',
+          });
+          const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+          sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+          stylePropertyTreeElement.updateTitle();
+          await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+          const jumpToIcon =
+              stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+          jumpToIcon?.dispatchEvent(new Event('mouseup'));
+          assert.isTrue(
+              revealerSpy.calledWith(stubAnimationGroup),
+              'Common.Revealer.reveal is not called for the animation group');
+        });
+
+        it('should not render a jump-to icon when the animation with the given name does not exist for the node',
+           async () => {
+             const getAnimationGroupForAnimationStub =
+                 sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
+                     .resolves(null);
+             const domNode = SDK.DOMModel.DOMNode.create(domModel, null, false, {
+               nodeId: 1 as Protocol.DOM.NodeId,
+               backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+               nodeType: Node.ELEMENT_NODE,
+               nodeName: 'div',
+               localName: 'div',
+               nodeValue: '',
+             });
+             const stylePropertyTreeElement = getTreeElement('animation-name', 'first-keyframe, second-keyframe');
+             sinon.stub(stylePropertyTreeElement, 'node').returns(domNode);
+
+             stylePropertyTreeElement.updateTitle();
+             await Promise.all(getAnimationGroupForAnimationStub.returnValues);
+
+             const jumpToIcon =
+                 stylePropertyTreeElement.valueElement?.querySelector('devtools-icon.open-in-animations-panel');
+             assert.notExists(jumpToIcon);
+           });
+      });
     });
   });
 
@@ -295,8 +385,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     const {valueElement} = stylePropertyTreeElement;
     assert.exists(valueElement);
 
-    const swatch = valueElement.querySelector<InlineEditor.ColorSwatch.ColorSwatch>(
-        `${InlineEditor.ColorSwatch.ColorSwatch.litTagName.value}`);
+    const swatch = valueElement.querySelector<InlineEditor.ColorSwatch.ColorSwatch>('devtools-color-swatch');
 
     assert.exists(swatch);
 
@@ -648,6 +737,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       positionTryRules: [],
       propertyRules: [],
       cssPropertyRegistrations: [],
+      activePositionFallbackIndex: -1,
       fontPaletteValuesRule: undefined,
     });
   }
@@ -1477,7 +1567,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
   });
 
   describe('LengthRenderer', () => {
-    it('renders the length too', () => {
+    it('renders the length tool', () => {
       const stylePropertyTreeElement = getTreeElement('width', '100px');
       stylePropertyTreeElement.updateTitle();
       const swatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-length');
@@ -1530,6 +1620,39 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     });
   });
 
+  describe('PositionTryRenderer', () => {
+    it('renders the position-try fallback values with correct styles', () => {
+      mockMatchedStyles.activePositionFallbackIndex.returns(1);
+      mockMatchedStyles.positionTryRules.returns([]);
+      const stylePropertyTreeElement = getTreeElement('position-try-fallbacks', '--top, --left, --bottom');
+      stylePropertyTreeElement.updateTitle();
+      const values =
+          stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span') as NodeListOf<HTMLElement>|
+          undefined;
+      assert.exists(values);
+      assert.strictEqual(values?.length, 3);
+      assert.strictEqual(values[0].style.textDecoration, 'line-through');
+      assert.strictEqual(values[1].style.textDecoration, '');
+      assert.strictEqual(values[2].style.textDecoration, 'line-through');
+    });
+
+    it('renders the position-try correctly with keyword', () => {
+      mockMatchedStyles.activePositionFallbackIndex.returns(1);
+      mockMatchedStyles.positionTryRules.returns([]);
+      const stylePropertyTreeElement =
+          getTreeElement('position-try', '/* comment */ most-height --top, --left, --bottom');
+      stylePropertyTreeElement.updateTitle();
+      const values =
+          stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span') as NodeListOf<HTMLElement>|
+          undefined;
+      assert.exists(values);
+      assert.strictEqual(values?.length, 3);
+      assert.strictEqual(values[0].style.textDecoration, 'line-through');
+      assert.strictEqual(values[1].style.textDecoration, '');
+      assert.strictEqual(values[2].style.textDecoration, 'line-through');
+    });
+  });
+
   describe('Autocompletion', function(this: Mocha.Suite) {
     let promptStub: sinon.SinonStub<Parameters<Elements.StylesSidebarPane.CSSPropertyPrompt['initialize']>>;
     beforeEach(async () => {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -40,6 +40,8 @@ import {
   ColorMixMatcher,
   type CSSWideKeywordMatch,
   CSSWideKeywordMatcher,
+  type FlexGridMatch,
+  FlexGridMatcher,
   type FontMatch,
   FontMatcher,
   type GridTemplateMatch,
@@ -55,13 +57,15 @@ import {
   LinkableNameProperties,
   type PositionAnchorMatch,
   PositionAnchorMatcher,
+  type PositionTryMatch,
+  PositionTryMatcher,
   type ShadowMatch,
   ShadowMatcher,
   ShadowType,
 } from './PropertyMatchers.js';
 import {type MatchRenderer, Renderer, RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StyleEditorWidget} from './StyleEditorWidget.js';
-import {type StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
 import {
   CSSPropertyPrompt,
@@ -92,7 +96,7 @@ const UIStrings = {
   /**
    *@description Context menu item for style property in edit mode
    */
-  revealInSourcesPanel: 'Reveal in Sources panel',
+  openInSourcesPanel: 'Open in Sources panel',
   /**
    *@description A context menu item in Styles panel to copy CSS declaration
    */
@@ -153,6 +157,37 @@ interface StylePropertyTreeElementParams {
   newProperty: boolean;
 }
 
+export class FlexGridRenderer implements MatchRenderer<FlexGridMatch> {
+  #treeElement: StylePropertyTreeElement;
+  constructor(treeElement: StylePropertyTreeElement) {
+    this.#treeElement = treeElement;
+  }
+
+  matcher(): SDK.CSSPropertyParser.Matcher<FlexGridMatch> {
+    return new FlexGridMatcher();
+  }
+
+  render(match: FlexGridMatch, context: RenderingContext): Node[] {
+    const key =
+        `${this.#treeElement.section().getSectionIdx()}_${this.#treeElement.section().nextEditorTriggerButtonIdx}`;
+    const button = StyleEditorWidget.createTriggerButton(
+        this.#treeElement.parentPane(), this.#treeElement.section(), match.isFlex ? FlexboxEditor : GridEditor,
+        match.isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
+    button.setAttribute(
+        'jslog', `${VisualLogging.showStyleEditor().track({click: true}).context(match.isFlex ? 'flex' : 'grid')}`);
+    this.#treeElement.section().nextEditorTriggerButtonIdx++;
+    button.addEventListener('click', () => {
+      Host.userMetrics.swatchActivated(
+          match.isFlex ? Host.UserMetrics.SwatchType.FLEX : Host.UserMetrics.SwatchType.GRID);
+    });
+    const helper = this.#treeElement.parentPane().swatchPopoverHelper();
+    if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
+      helper.setAnchorElement(button);
+    }
+    return [...Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context).nodes, button];
+  }
+}
+
 export class CSSWideKeywordRenderer implements MatchRenderer<CSSWideKeywordMatch> {
   #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
@@ -680,7 +715,7 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
 
   #getLinkData(match: LinkableNameMatch):
       {jslogContext: string, metric: null|Host.UserMetrics.SwatchType, ruleBlock: string, isDefined: boolean} {
-    switch (match.properyName) {
+    switch (match.propertyName) {
       case LinkableNameProperties.ANIMATION:
       case LinkableNameProperties.ANIMATION_NAME:
         return {
@@ -722,6 +757,33 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
       jslogContext,
     };
 
+    if (match.propertyName === LinkableNameProperties.ANIMATION ||
+        match.propertyName === LinkableNameProperties.ANIMATION_NAME) {
+      const el = document.createElement('span');
+      el.appendChild(swatch);
+
+      const node = this.#treeElement.node();
+      if (node) {
+        const animationModel = node.domModel().target().model(SDK.AnimationModel.AnimationModel);
+        void animationModel?.getAnimationGroupForAnimation(match.text, node.id).then(maybeAnimationGroup => {
+          if (!maybeAnimationGroup) {
+            return;
+          }
+
+          const icon = IconButton.Icon.create('open-externally', 'open-in-animations-panel');
+          icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
+          icon.setAttribute('role', 'button');
+          icon.addEventListener('mouseup', ev => {
+            ev.consume(true);
+
+            void Common.Revealer.reveal(maybeAnimationGroup);
+          });
+          el.insertBefore(icon, swatch);
+        });
+      }
+      return [el];
+    }
+
     return [swatch];
   }
 
@@ -1227,6 +1289,39 @@ export class PositionAnchorRenderer implements MatchRenderer<PositionAnchorMatch
   }
 }
 
+export class PositionTryRenderer implements MatchRenderer<PositionTryMatch> {
+  #treeElement: StylePropertyTreeElement;
+
+  constructor(treeElement: StylePropertyTreeElement) {
+    this.#treeElement = treeElement;
+  }
+
+  render(match: PositionTryMatch, context: RenderingContext): Node[] {
+    const content = [];
+    if (match.preamble.length > 0) {
+      const {nodes} = Renderer.render(match.preamble, context);
+      content.push(...nodes);
+    }
+    for (const [i, fallback] of match.fallbacks.entries()) {
+      const fallbackContent = document.createElement('span');
+      if (i > 0) {
+        fallbackContent.appendChild(document.createTextNode(', '));
+      }
+      if (i !== this.#treeElement.matchedStyles().activePositionFallbackIndex()) {
+        fallbackContent.style.textDecoration = 'line-through';
+      }
+      Renderer.renderInto(fallback, context, fallbackContent);
+
+      content.push(fallbackContent);
+    }
+    return content;
+  }
+
+  matcher(): PositionTryMatcher {
+    return new PositionTryMatcher();
+  }
+}
+
 export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private readonly style: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
   private matchedStylesInternal: SDK.CSSMatchedStyles.CSSMatchedStyles;
@@ -1653,6 +1748,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
           new LinearGradientRenderer(),
           new AnchorFunctionRenderer(this),
           new PositionAnchorRenderer(this),
+          new FlexGridRenderer(this),
+          new PositionTryRenderer(this),
           new FontRenderer(this),
         ] :
         [];
@@ -1701,30 +1798,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    if (this.valueElement && this.#parentSection.editable && this.property.name === 'display') {
-      const propertyValue = this.property.trimmedValueWithoutImportant();
-      const isFlex = propertyValue === 'flex' || propertyValue === 'inline-flex';
-      const isGrid = propertyValue === 'grid' || propertyValue === 'inline-grid';
-      if (isFlex || isGrid) {
-        const key = `${this.#parentSection.getSectionIdx()}_${this.#parentSection.nextEditorTriggerButtonIdx}`;
-        const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, this.#parentSection, isFlex ? FlexboxEditor : GridEditor,
-            isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
-        button.setAttribute(
-            'jslog', `${VisualLogging.showStyleEditor().track({click: true}).context(isFlex ? 'flex' : 'grid')}`);
-        this.#parentSection.nextEditorTriggerButtonIdx++;
-        button.addEventListener('click', () => {
-          Host.userMetrics.swatchActivated(
-              isFlex ? Host.UserMetrics.SwatchType.FLEX : Host.UserMetrics.SwatchType.GRID);
-        });
-        this.listItemElement.appendChild(button);
-        const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
-          helper.setAnchorElement(button);
-        }
-      }
-    }
-
     if (this.property.parsedOk) {
       this.updateAuthoringHint();
     } else {
@@ -1888,7 +1961,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     const revealCallback = this.navigateToSource.bind(this) as () => void;
     contextMenu.defaultSection().appendItem(
-        i18nString(UIStrings.revealInSourcesPanel), revealCallback, {jslogContext: 'reveal-in-sources-panel'});
+        i18nString(UIStrings.openInSourcesPanel), revealCallback, {jslogContext: 'reveal-in-sources-panel'});
     void contextMenu.show();
   }
 

package/front_end/panels/elements/StylesSidebarPane.test.ts

@@ -73,6 +73,7 @@ describe('StylesSidebarPane', () => {
           propertyRules: [],
           cssPropertyRegistrations: [],
           fontPaletteValuesRule: undefined,
+          activePositionFallbackIndex: -1,
         });
 
         const sectionBlocks =
@@ -99,6 +100,7 @@ describe('StylesSidebarPane', () => {
         animationsPayload: [],
         parentLayoutNodeId: undefined,
         positionTryRules: [],
+        activePositionFallbackIndex: -1,
         propertyRules: [],
         cssPropertyRegistrations: [],
         fontPaletteValuesRule: {

package/front_end/panels/elements/TopLayerContainer.ts

@@ -8,10 +8,9 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
+import type {ElementsTreeElement} from './ElementsTreeElement.js';
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 
-import {type ElementsTreeElement} from './ElementsTreeElement.js';
-
 const UIStrings = {
   /**
    *@description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.

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

@@ -11,6 +11,8 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import accessibilityTreeNodeStyles from './accessibilityTreeNode.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Ignored node element text content in Accessibility Tree View of the Elements panel
@@ -52,7 +54,6 @@ export interface AccessibilityTreeNodeData {
 }
 
 export class AccessibilityTreeNode extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-accessibility-tree-node`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #ignored = true;
@@ -75,20 +76,20 @@ export class AccessibilityTreeNode extends HTMLElement {
   }
 
   async #render(): Promise<void> {
-    const role = LitHtml.html`<span class='role-value'>${truncateTextIfNeeded(this.#role)}</span>`;
-    const name = LitHtml.html`"<span class='attribute-value'>${this.#name}</span>"`;
+    const role = html`<span class='role-value'>${truncateTextIfNeeded(this.#role)}</span>`;
+    const name = html`"<span class='attribute-value'>${this.#name}</span>"`;
     const properties = this.#properties.map(
         ({name, value}) => isPrintable(value.type) ?
-            LitHtml.html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
+            html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
                 value.value}</span>` :
             LitHtml.nothing);
-    const content = this.#ignored ? LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
-                                    LitHtml.html`${role}&nbsp;${name}${properties}`;
+    const content =
+        this.#ignored ? html`<span>${i18nString(UIStrings.ignored)}</span>` : html`${role}&nbsp;${name}${properties}`;
     await Coordinator.RenderCoordinator.RenderCoordinator.instance().write(
         `Accessibility node ${this.#id} render`, () => {
           // clang-format off
       LitHtml.render(
-        LitHtml.html`<div class='container'>${content}</div>`,
+        html`<div class='container'>${content}</div>`,
         this.#shadow,
         {host: this});
           // clang-format on

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 = '';