chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/ui/components/docs/building-ui-documentation/CreatingComponents.md

@@ -25,18 +25,7 @@ front_end/ui/components/button/Button.ts // component definition
 
 ## Defining and naming a component
 
-A component should be given a `static readonly litTagName` property, which defines its name:
-
-```ts
-// ElementBreadcrumbs.ts
-export class ElementBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
-}
-```
-
-> Remember that all custom elements **must** contain a hyphen. Prefer `devtools-` as the prefix by default.
-
-We then use the `ComponentHelpers` module (`front_end/ui/components/helpers`) to define the component and register it with the browser:
+All custom elements **must** contain a hyphen. Use `devtools-` as the prefix.  Use `customElements.define` to define the component and register it with the browser:
 
 ```ts
 customElements.define('devtools-elements-breadcrumbs', ElementsBreadcrumbs);
@@ -54,7 +43,7 @@ declare global {
 
 By doing this, TypeScript understands that `document.querySelector('devtools-elements-breadcrumbs')` returns an `ElementsBreadcrumbs` instance.
 
-We have a custom ESLint rule that ensures that the tag name is used consistently in all the locations where it is required.
+We use lit-analyzer in a lint state to verify that component definitions are imported where the component is used.
 
 ## Creating a shadow root
 
@@ -62,7 +51,6 @@ Each component gets its own Shadow Root to ensure that styles and events that oc
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 }
 ```
@@ -78,7 +66,7 @@ Each component defines a `#render` method which is responsible for invoking LitH
 The `#render` method calls `LitHtml.render`, building up a template with `LitHtml.html`:
 
 ```ts
-LitHtml.render(LitHtml.html`<p>hello world!</p>`, this.#shadow, {host: this});
+LitHtml.render(html`<p>hello world!</p>`, this.#shadow, {host: this});
 ```
 
 The third argument (`{host: this}`) tells LitHtml to automatically bind event listeners to the component. This can save you some painful debugging where event listeners do not have the right `this` reference; so we enforce the use of `{host: this}` via a custom ESLint rule.
@@ -99,7 +87,6 @@ We can use the `ScheduledRender` helper (`front_end/ui/components/helpers/schedu
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 }
@@ -117,12 +104,11 @@ To summarise, most components start off life looking like:
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
   #render(): void {
-    LitHtml.render(LitHtml.html``, this.#shadow, {host:this});
+    LitHtml.render(html``, this.#shadow, {host:this});
   }
 }
 ```
@@ -135,7 +121,6 @@ To ensure we trigger a render once the component is added to the DOM, we can def
 
 ```ts
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -144,7 +129,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
   }
 
   #render(): void {
-    LitHtml.render(LitHtml.html``, this.#shadow, {host:this});
+    LitHtml.render(html``, this.#shadow, {host:this});
   }
 }
 ```
@@ -191,12 +176,12 @@ this.appendChild(breadcrumbs);
 
 ### From another component
 
-If you are rendering a component from within another component, render it within the call to `LitHtml.html` and use the static `litTagName` property:
+If you are rendering a component from within another component, import the module defining it and render within the call to `LitHtml.html`:
 
 ```ts
 // Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName}></${ElementsBreadcrumbs>
+LitHtml.render(html`
+  <devtools-elements-breadcrumbs></devtools-elements-breadcrumbs>
 `, this.#shadow, {host: this});
 ```
 
@@ -204,30 +189,15 @@ To pass data, we use [LitHtml's dot syntax](https://lit.dev/docs/templates/expre
 
 ```ts
 // Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName} .data=${{
+LitHtml.render(html`
+  <devtools-elements-breadcrumbs .data=${{
     selectedNode: node,
     crumbs: [...],
   }}>
-  </${ElementsBreadcrumbs>
+  </devtools-elements-breadcrumbs>
 `, this.#shadow, {host: this});
 ```
 
-To enforce some type safety, we also use TypeScript's `as` keyword to force the compiler to type-check the `data` object against the interface:
-
-```ts
-// Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName} .data=${{
-    selectedNode: node,
-    crumbs: [...],
-  } as ElementsBreadcrumbsData}>
-  </${ElementsBreadcrumbs>
-`, this.#shadow, {host: this});
-```
-
-This type-checking requirement is enforced by an ESLint rule.
-
 ## Performance concerns with data passing
 
 The approach of `set data(data)` was chosen because:
@@ -271,9 +241,9 @@ Rendering this component within another Lit component would now be done like so:
 
 ```ts
 // Within some component
-LitHtml.render(LitHtml.html`
-  <${ElementsBreadcrumbs.litTagName} .crumbs=${[...]} .selectedNode=${node}>
-  </${ElementsBreadcrumbs>
+LitHtml.render(html`
+  <devtools-elements-breadcrumbs .crumbs=${[...]} .selectedNode=${node}>
+  </devtools-elements-breadcrumbs>
 `, this.#shadow, {host: this});
 ```
 

package/front_end/ui/components/docs/freestyler/basic.ts

@@ -4,9 +4,9 @@
 
 import * as Host from '../../../../core/host/host.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Trace from '../../../../models/trace/trace.js';
 import type * as Workspace from '../../../../models/workspace/workspace.js';
 import * as Freestyler from '../../../../panels/freestyler/freestyler.js';
+import type * as TimelineUtils from '../../../../panels/timeline/utils/utils.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
@@ -22,7 +22,6 @@ const messages: Freestyler.ChatMessage[] = [
   },
   {
     entity: Freestyler.ChatMessageEntity.MODEL,
-    suggestions: [],
     steps: [
       {
         isLoading: false,
@@ -55,7 +54,7 @@ const component = new Freestyler.FreestylerChatUi({
   selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
   selectedFile: {} as unknown as Workspace.UISourceCode.UISourceCode,
   selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
-  selectedStackTrace: {} as unknown as Trace.Helpers.TreeHelpers.TraceEntryNodeForAI,
+  selectedAiCallTree: {} as unknown as TimelineUtils.AICallTree.AICallTree,
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,

package/front_end/ui/components/docs/freestyler/empty_state.ts

@@ -4,9 +4,9 @@
 
 import * as Host from '../../../../core/host/host.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Trace from '../../../../models/trace/trace.js';
 import type * as Workspace from '../../../../models/workspace/workspace.js';
 import * as Freestyler from '../../../../panels/freestyler/freestyler.js';
+import type * as TimelineUtils from '../../../../panels/timeline/utils/utils.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
@@ -29,7 +29,7 @@ const component = new Freestyler.FreestylerChatUi({
   selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
   selectedFile: {} as unknown as Workspace.UISourceCode.UISourceCode,
   selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
-  selectedStackTrace: {} as unknown as Trace.Helpers.TreeHelpers.TraceEntryNodeForAI,
+  selectedAiCallTree: {} as unknown as TimelineUtils.AICallTree.AICallTree,
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,

package/front_end/ui/components/docs/icon_dialog/basic.ts

@@ -30,7 +30,7 @@ Hello...
     horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
     closeOnESC: true,
     closeOnScroll: false,
-  } as Dialogs.IconDialog.IconDialogData}
+  }}
 >
   <div>
     <h2>Hello world!</h2>
@@ -40,7 +40,7 @@ Hello...
   </div>
 </devtools-icon-dialog>
 `;
-// clang-format on
+    // clang-format on
 
-const container = document.getElementById('container') as HTMLElement;
-LitHtml.render(iconDialog, container);
+    const container = document.getElementById('container') as HTMLElement;
+    LitHtml.render(iconDialog, container);

package/front_end/ui/components/docs/performance_panel/basic.ts

@@ -101,7 +101,10 @@ const cpuprofileName = params.get('cpuprofile');
 const traceUrl = params.get('loadTimelineFromURL');
 const nodeMode = params.get('isNode');
 const isNodeMode = nodeMode === 'true' ? true : false;
-Root.Runtime.experiments.setEnabled('timeline-invalidation-tracking', params.has('invalidations'));
+
+// These are both enabled by default in Chrome M131 and will be removed in M132.
+Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS, true);
+Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS, true);
 
 const timeline = Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, isNode: isNodeMode});
 const container = document.getElementById('container');

package/front_end/ui/components/docs/report/basic.ts

@@ -6,7 +6,6 @@ import '../../report_view/report_view.js';
 
 import * as LitHtml from '../../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
-import type * as ReportView from '../../report_view/report_view.js';
 
 const {html} = LitHtml;
 
@@ -31,8 +30,9 @@ LitHtml.render(
         </style>
 
         <devtools-report .data=${{
-      reportTitle: 'Optional Title',
-    } as ReportView.ReportView.ReportData}>
+reportTitle:
+  'Optional Title',
+    }}>
           <devtools-report-section-header>Section 1</devtools-report-section-header>
           <devtools-report-key>Basic plain text field</devtools-report-key>
           <devtools-report-value>And this is the value</devtools-report-value>

package/front_end/ui/components/expandable_list/ExpandableList.ts

@@ -15,7 +15,6 @@ export interface ExpandableListData {
 }
 
 export class ExpandableList extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-expandable-list`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #expanded = false;

package/front_end/ui/components/floating_button/FloatingButton.ts

@@ -16,7 +16,6 @@ interface FloatingButtonData {
 }
 
 export class FloatingButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-floating-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: FloatingButtonData;
 

package/front_end/ui/components/icon_button/FileSourceIcon.test.ts

@@ -0,0 +1,32 @@
+// Copyright 2022 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 {
+  assertElements,
+  renderElementIntoDOM,
+} from '../../../testing/DOMHelpers.js';
+
+import * as IconButton from './icon_button.js';
+
+const renderFileSourceIconButton = (data: IconButton.FileSourceIcon.FileSourceIconData):
+    {component: IconButton.FileSourceIcon.FileSourceIcon, shadowRoot: ShadowRoot} => {
+      const component = new IconButton.FileSourceIcon.FileSourceIcon('document');
+      component.data = data;
+      renderElementIntoDOM(component);
+      assert.isNotNull(component.shadowRoot);
+      return {component, shadowRoot: component.shadowRoot};
+    };
+
+describe('FileSourceIcon', () => {
+  it('returns document icon', async () => {
+    const {shadowRoot} = renderFileSourceIconButton({
+      contentType: 'icon',
+    });
+    const icons = shadowRoot.querySelectorAll('.icon');
+
+    assertElements(icons, IconButton.Icon.Icon);
+    assert.strictEqual(
+        icons[0].outerHTML, '<devtools-icon role="presentation" name="document" class="icon"></devtools-icon>');
+  });
+});

package/front_end/ui/components/icon_button/FileSourceIcon.ts

@@ -0,0 +1,76 @@
+// 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 * as LitHtml from '../../lit-html/lit-html.js';
+
+import styles from './fileSourceIcon.css.js';
+import {create} from './Icon.js';
+
+const {html} = LitHtml;
+
+export interface FileSourceIconData {
+  contentType?: string;
+  hasDotBadge?: boolean;
+  isDotPurple?: boolean;
+}
+
+export class FileSourceIcon extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-file-source-icon`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  #iconType: string;
+  #contentType?: string;
+  #hasDotBadge?: boolean;
+  #isDotPurple?: boolean;
+
+  constructor(iconType: string) {
+    super();
+    this.#iconType = iconType;
+  }
+
+  set data(data: FileSourceIconData) {
+    this.#contentType = data.contentType;
+    this.#hasDotBadge = data.hasDotBadge;
+    this.#isDotPurple = data.isDotPurple;
+    this.#render();
+  }
+
+  get data(): FileSourceIconData {
+    return {
+      contentType: this.#contentType,
+      hasDotBadge: this.#hasDotBadge,
+      isDotPurple: this.#isDotPurple,
+    };
+  }
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [styles];
+    this.#render();
+  }
+
+  #render(): void {
+    let iconStyles: string[] = [];
+    if (this.#hasDotBadge) {
+      iconStyles = this.#isDotPurple ? ['dot', 'purple'] : ['dot', 'green'];
+    }
+    if (this.#contentType) {
+      iconStyles.push(this.#contentType);
+    }
+    const icon = create(this.#iconType, iconStyles.join(' '));
+
+    // clang-format off
+    LitHtml.render(html`${icon}`, this.#shadow, {
+      host: this,
+    });
+    // clang-format on
+  }
+}
+
+customElements.define('devtools-file-source-icon', FileSourceIcon);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-file-source-icon': FileSourceIcon;
+  }
+}

package/front_end/ui/components/icon_button/Icon.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-
 import iconStyles from './icon.css.legacy.js';
 
 /**
@@ -71,7 +69,6 @@ export type IconData = IconWithName|{
  * @prop {IconData} data - Deprecated way to set dimensions, color and name at once.
  */
 export class Icon extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-icon`;
   static readonly observedAttributes = ['name'];
 
   readonly #shadowRoot;

package/front_end/ui/components/icon_button/IconButton.ts

@@ -29,7 +29,6 @@ export interface IconButtonData {
 }
 
 export class IconButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`icon-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #clickHandler: undefined|(() => void) = undefined;
   #groups: IconWithTextData[] = [];

package/front_end/ui/components/icon_button/fileSourceIcon.css

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+:host {
+  devtools-icon.script,
+  devtools-icon.sm-script,
+  devtools-icon.snippet {
+    color: var(--icon-file-script);
+  }
+
+  devtools-icon.stylesheet,
+  devtools-icon.sm-stylesheet {
+    color: var(--icon-file-styles);
+  }
+
+  devtools-icon.image,
+  devtools-icon.font {
+    color: var(--icon-file-image);
+  }
+
+  devtools-icon.dot::before {
+    content: var(--image-file-empty);
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    outline: var(--sys-size-1) solid var(--icon-gap-focus-selected);
+    top: 12px;
+    left: 11px;
+    position: absolute;
+    z-index: 1;
+  }
+
+  devtools-icon.purple.dot::before {
+    background-color: var(--sys-color-purple-bright);
+  }
+
+  devtools-icon.green.dot::before {
+    background-color: var(--sys-color-green-bright);
+  }
+}

package/front_end/ui/components/icon_button/icon_button.ts

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as FileSourceIcon from './FileSourceIcon.js';
 import * as Icon from './Icon.js';
 import * as IconButton from './IconButton.js';
 
 export {
+  FileSourceIcon,
   Icon,
   IconButton,
 };

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -85,7 +85,6 @@ export function getIssueCountsEnumeration(
 }
 
 export class IssueCounter extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-issue-counter`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #clickHandler: undefined|(() => void) = undefined;
   #tooltipCallback: undefined|(() => void) = undefined;
@@ -195,8 +194,7 @@ export class IssueCounter extends HTMLElement {
     };
     LitHtml.render(
         html`
-        <icon-button .data=${data as IconButton.IconButton.IconButtonData} .accessibleName=${
-            this.#accessibleName}></icon-button>
+        <icon-button .data=${data} .accessibleName=${this.#accessibleName}></icon-button>
         `,
         this.#shadow, {host: this});
     this.#tooltipCallback?.();

package/front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -53,7 +53,6 @@ export const extractShortPath = (path: string): string => {
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class IssueLinkIcon extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-issue-link-icon`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   // The value `null` indicates that the issue is not available,
   // `undefined` that it is still being resolved.

package/front_end/ui/components/legacy_wrapper/LegacyWrapper.ts

@@ -28,7 +28,7 @@ legacyWrapper<T extends Constructor<UI.Widget.Widget>, Component extends Wrappab
     #component: Component;
 
     constructor(..._args: any[]) {
-      super(/* isWebComponent=*/ true);
+      super(/* useShadowDom=*/ true);
       this.#component = component;
       this.#component.wrapper = this as InstanceType<T>;
       void this.#component.render();

package/front_end/ui/components/linkifier/LinkifierImpl.ts

@@ -18,6 +18,7 @@ export interface LinkifierData {
   lineNumber?: number;
   columnNumber?: number;
   linkText?: string;
+  title?: string;
 }
 
 export class LinkifierClick extends Event {
@@ -32,19 +33,20 @@ export class LinkifierClick extends Event {
 }
 
 export class Linkifier extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-linkifier`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #url: Platform.DevToolsPath.UrlString = Platform.DevToolsPath.EmptyUrlString;
   #lineNumber?: number;
   #columnNumber?: number;
   #linkText?: string;
+  #title?: string;
 
   set data(data: LinkifierData) {
     this.#url = data.url;
     this.#lineNumber = data.lineNumber;
     this.#columnNumber = data.columnNumber;
     this.#linkText = data.linkText;
+    this.#title = data.title;
 
     if (!this.#url) {
       throw new Error('Cannot construct a Linkifier without providing a valid string URL.');
@@ -73,7 +75,7 @@ export class Linkifier extends HTMLElement {
     await coordinator.write(() => {
       // clang-format off
       // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-      LitHtml.render(html`<a class="link" href=${this.#url} @click=${this.#onLinkActivation}><slot>${linkText}</slot></a>`, this.#shadow, { host: this});
+      LitHtml.render(html`<a class="link" href=${this.#url} @click=${this.#onLinkActivation} title=${LitHtml.Directives.ifDefined(this.#title) as string}><slot>${linkText}</slot></a>`, this.#shadow, { host: this});
       // clang-format on
     });
   }

package/front_end/ui/components/markdown_view/CodeBlock.ts

@@ -43,7 +43,6 @@ export interface Heading {
 }
 
 export class CodeBlock extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-code-block`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
 

package/front_end/ui/components/markdown_view/MarkdownImage.ts

@@ -23,7 +23,6 @@ export interface MarkdownImageData {
  * This makes sure that all icons/images are accounted for in markdown.
  */
 export class MarkdownImage extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-markdown-image`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #imageData?: ImageData;

package/front_end/ui/components/markdown_view/MarkdownLink.ts

@@ -23,7 +23,6 @@ export interface MarkdownLinkData {
  * This makes sure that all links are accounted for and no bad links are introduced to devtools via markdown.
  */
 export class MarkdownLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-markdown-link`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #linkText: string = '';

package/front_end/ui/components/markdown_view/MarkdownView.ts

@@ -10,8 +10,6 @@ import type * as Marked from '../../../third_party/marked/marked.js';
 import * as UI from '../../legacy/legacy.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 
-import type {MarkdownImageData} from './MarkdownImage.js';
-import type {MarkdownLinkData} from './MarkdownLink.js';
 import markdownViewStyles from './markdownView.css.js';
 
 const html = LitHtml.html;
@@ -23,7 +21,6 @@ export interface MarkdownViewData {
 }
 
 export class MarkdownView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-markdown-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #tokenData: readonly Marked.Marked.Token[] = [];
@@ -149,11 +146,17 @@ export class MarkdownLitRenderer {
       case 'space':
         return html``;
       case 'link':
-        return html`<devtools-markdown-link .data=${
-            {key: token.href, title: token.text} as MarkdownLinkData}></devtools-markdown-link>`;
+        return html`<devtools-markdown-link .data=${{
+        key:
+          token.href, title: token.text,
+        }
+        }></devtools-markdown-link>`;
       case 'image':
-        return html`<devtools-markdown-image .data=${
-            {key: token.href, title: token.text} as MarkdownImageData}></devtools-markdown-image>`;
+        return html`<devtools-markdown-image .data=${{
+        key:
+          token.href, title: token.text,
+        }
+        }></devtools-markdown-image>`;
       case 'heading':
         return this.renderHeading(token);
       case 'strong':

package/front_end/ui/components/menus/Menu.ts

@@ -66,7 +66,6 @@ export interface MenuData {
 const selectedItemCheckmark = new URL('../../../Images/checkmark.svg', import.meta.url).toString();
 
 export class Menu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #dialog: Dialogs.Dialog.Dialog|null = null;
@@ -430,7 +429,6 @@ interface MenuItemData {
 }
 
 export class MenuItem extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu-item`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   connectedCallback(): void {
@@ -496,7 +494,6 @@ interface MenuGroupData {
 }
 
 export class MenuGroup extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu-group`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   connectedCallback(): void {

package/front_end/ui/components/menus/SelectMenu.ts

@@ -87,7 +87,6 @@ type TitleCallback = () => LitHtml.TemplateResult;
 const deployMenuArrow = new URL('../../../Images/triangle-down.svg', import.meta.url).toString();
 
 export class SelectMenu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-select-menu`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #button: SelectMenuButton|null = null;
@@ -325,7 +324,6 @@ export interface SelectMenuButtonData {
   jslogContext: string;
 }
 export class SelectMenuButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-select-menu-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #showButton: HTMLButtonElement|null = null;