chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/ui/components/data_grid/DataGridEvents.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2021 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 {type Cell, type Column, type Row} from './DataGridUtils.js';
+import type {Cell, Column, Row} from './DataGridUtils.js';
 
 export class ColumnHeaderClickEvent extends Event {
   static readonly eventName = 'columnheaderclick';

package/front_end/ui/components/data_grid/DataGridRenderers.ts

@@ -2,10 +2,13 @@
 // 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 {type CellValue} from './DataGridUtils.js';
+
+import type {CellValue} from './DataGridUtils.js';
+
+const {html} = LitHtml;
 
 export const primitiveRenderer = (value: CellValue): LitHtml.TemplateResult => {
-  return LitHtml.html`${value}`;
+  return html`${value}`;
 };
 
 export const codeBlockRenderer = (value: CellValue): LitHtml.TemplateResult|typeof LitHtml.nothing => {
@@ -13,12 +16,12 @@ export const codeBlockRenderer = (value: CellValue): LitHtml.TemplateResult|type
     return LitHtml.nothing;
   }
   const stringValue = String(value);
-  return LitHtml.html`<code>${stringValue}</code>`;
+  return html`<code>${stringValue}</code>`;
 };
 
 export const iconRenderer = (icon: CellValue): LitHtml.TemplateResult|typeof LitHtml.nothing => {
   if (!icon) {
     return LitHtml.nothing;
   }
-  return LitHtml.html`<div style="display: flex; justify-content: center;">${icon}</div>`;
+  return html`<div style="display: flex; justify-content: center;">${icon}</div>`;
 };

package/front_end/ui/components/dialogs/Dialog.ts

@@ -11,6 +11,8 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import dialogStyles from './dialog.css.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 const IS_DIALOG_SUPPORTED = 'HTMLDialogElement' in globalThis;
@@ -673,7 +675,7 @@ export class Dialog extends HTMLElement {
       // we have to explicitly render a slot and hide it with CSS.
       LitHtml.render(
           // clang-format off
-      LitHtml.html`
+      html`
         <slot></slot>
       `,  this.#shadow, {host: this});
       // clang-format on
@@ -681,7 +683,7 @@ export class Dialog extends HTMLElement {
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <dialog @click=${this.#handlePointerEvent} @pointermove=${this.#handlePointerEvent} @cancel=${this.#onCancel}
               jslog=${VisualLogging.dialog(this.#props.jslogContext).track({resize: true, keydown: 'Escape'}).parent('mapped')}>
         <div id="content-wrap">

package/front_end/ui/components/dialogs/IconDialog.ts

@@ -4,7 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * 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';
 
@@ -15,6 +15,8 @@ import {
 } from './Dialog.js';
 import iconDialogStyles from './iconDialog.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Title of close button for the shortcuts dialog.
@@ -101,10 +103,10 @@ export class IconDialog extends HTMLElement {
     if (this.#data.closeButton) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      maybeCloseButton = LitHtml.html`
+      maybeCloseButton = html`
         <div id='close-button-container'>
           <div id='close-button-right-aligner'>
-            <${IconButton.Icon.Icon.litTagName}
+            <devtools-icon
               @click=${this.#closeDialog}
               .data=${{
                 iconName: 'cross',
@@ -114,7 +116,7 @@ export class IconDialog extends HTMLElement {
               } as IconButton.Icon.IconWithName}
               jslog=${VisualLogging.close().track({click: true})}
               title=${i18nString(UIStrings.close)}
-            ></${IconButton.Icon.Icon.litTagName}>
+            ></devtools-icon>
           </div>
         </div>
       `;
@@ -122,14 +124,14 @@ export class IconDialog extends HTMLElement {
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${IconButton.Icon.Icon.litTagName}
+    LitHtml.render(html`
+      <devtools-icon
         @click=${this.#showDialog}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#icon = node as IconButton.Icon.Icon;
         })}
         .data=${this.#data.iconData as IconButton.Icon.IconWithName}
-      ></${IconButton.Icon.Icon.litTagName}>
+      ></devtools-icon>
       <${DialogElement.litTagName}
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}

package/front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -17,6 +17,8 @@ import {
 } from './Dialog.js';
 import shortcutDialogStyles from './shortcutDialog.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
 
   /**
@@ -109,8 +111,8 @@ export class ShortcutDialog extends HTMLElement {
 
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
-      <${Buttons.Button.Button.litTagName}
+      html`
+      <devtools-button
         @click=${this.#showDialog}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#showButton = node as Buttons.Button.Button;
@@ -120,7 +122,7 @@ export class ShortcutDialog extends HTMLElement {
           iconName: 'help',
           title: i18nString(UIStrings.showShortcutTitle),
         } as Buttons.Button.ButtonData}
-      ></${Buttons.Button.Button.litTagName}>
+      ></devtools-button>
       <${DialogElement.litTagName}
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}
@@ -139,7 +141,7 @@ export class ShortcutDialog extends HTMLElement {
       >
         <div class="keybinds-category-header">
           <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             @click=${this.#closeDialog}
             class='close-icon'
             .data=${{
@@ -148,20 +150,20 @@ export class ShortcutDialog extends HTMLElement {
               title: i18nString(UIStrings.close),
             } as Buttons.Button.ButtonData}
             jslog=${VisualLogging.close().track({click: true})}
-          ></${Buttons.Button.Button.litTagName}>
+          ></devtools-button>
         </div>
         <ul class="keybinds-list">
           ${this.#shortcuts.map(shortcut =>
-            LitHtml.html`
+            html`
               <li class="keybinds-list-item">
                 <div class="keybinds-action-name keybinds-list-text">${shortcut.title}</div>
                 ${shortcut.bindings.map((binding, index) =>
-                  LitHtml.html`
+                  html`
                     <div class="keybinds-shortcut keybinds-list-text">
                       <span class="keybinds-key">${binding}</span>
                     </div>
                     ${shortcut.bindings.at(index + 1) ?
-                      LitHtml.html`<span class="keybinds-shortcut-separator"> - </span>`
+                      html`<span class="keybinds-shortcut-separator"> - </span>`
                       : LitHtml.nothing
                     }
                 `)}

package/front_end/ui/components/diff_view/DiffView.ts

@@ -10,6 +10,8 @@ import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
 import diffViewStyles from './diffView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text prepended to a removed line in a diff in the Changes tool, viewable only by screen reader.
@@ -190,7 +192,7 @@ class DiffRenderer {
   }
 
   #render(rows: readonly Row[]): LitHtml.TemplateResult {
-    return LitHtml.html`
+    return html`
       <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)}>
         ${rows.map(row => this.#renderRow(row))}
       </div>`;
@@ -204,13 +206,13 @@ class DiffRenderer {
     if (row.type === RowType.ADDITION) {
       marker = '+';
       markerClass += ' diff-line-addition';
-      screenReaderText = LitHtml.html`<span class="diff-hidden-text">${i18nString(UIStrings.additions)}</span>`;
+      screenReaderText = html`<span class="diff-hidden-text">${i18nString(UIStrings.additions)}</span>`;
     } else if (row.type === RowType.DELETION) {
       marker = '-';
       markerClass += ' diff-line-deletion';
-      screenReaderText = LitHtml.html`<span class="diff-hidden-text">${i18nString(UIStrings.deletions)}</span>`;
+      screenReaderText = html`<span class="diff-hidden-text">${i18nString(UIStrings.deletions)}</span>`;
     }
-    return LitHtml.html`
+    return html`
       <div class="diff-line-number" aria-hidden="true">${baseNumber}</div>
       <div class="diff-line-number" aria-hidden="true">${curNumber}</div>
       <div class=${markerClass} aria-hidden="true">${marker}</div>
@@ -221,7 +223,7 @@ class DiffRenderer {
 
   #renderRowContent(row: Row): LitHtml.TemplateResult[] {
     if (row.type === RowType.SPACER) {
-      return row.tokens.map(tok => LitHtml.html`${tok.text}`);
+      return row.tokens.map(tok => html`${tok.text}`);
     }
     const [doc, startPos] = row.type === RowType.DELETION ?
         [this.originalHighlighter, this.originalMap.get(row.originalLineNumber) as number] :
@@ -231,11 +233,10 @@ class DiffRenderer {
     for (const token of row.tokens) {
       const tokenContent: (LitHtml.TemplateResult|string)[] = [];
       doc.highlightRange(pos, pos + token.text.length, (text, style) => {
-        tokenContent.push(style ? LitHtml.html`<span class=${style}>${text}</span>` : text);
+        tokenContent.push(style ? html`<span class=${style}>${text}</span>` : text);
       });
       content.push(
-          token.className ? LitHtml.html`<span class=${token.className}>${tokenContent}</span>` :
-                            LitHtml.html`${tokenContent}`);
+          token.className ? html`<span class=${token.className}>${tokenContent}</span>` : html`${tokenContent}`);
       pos += token.text.length;
     }
     return content;

package/front_end/ui/components/docs/create_breadcrumbs.ts

@@ -3,11 +3,13 @@
 // found in the LICENSE file.
 import * as LitHtml from '../../lit-html/lit-html.js';
 
+const {html} = LitHtml;
+
 export function init(): void {
   const container = document.createElement('ul');
   // clang-format off
   // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-  LitHtml.render(LitHtml.html`
+  LitHtml.render(html`
 
   <style>
     .docs-breadcrumbs {

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

@@ -6,17 +6,19 @@ import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as LitHtml from '../../../lit-html/lit-html.js';
 import * as ExpandableList from '../../expandable_list/expandable_list.js';
 
+const {html} = LitHtml;
+
 await FrontendHelpers.initializeGlobalVars();
 
 const component = new ExpandableList.ExpandableList.ExpandableList();
 
 const rows = [];
-rows.push(LitHtml.html`
+rows.push(html`
   <div>This is row 1. Click on the triangle icon to expand.</div>
 `);
 
 for (let rowNumber = 2; rowNumber < 11; rowNumber++) {
-  rows.push(LitHtml.html`
+  rows.push(html`
     <div>This is row ${rowNumber}.</div>
   `);
 }

package/front_end/ui/components/docs/floating_button/basic.html

@@ -0,0 +1,26 @@
+<!--
+  Copyright 2021 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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Basic Expandable List example</title>
+    <style>
+      #container {
+        padding: 20px;
+        font-size: 16px;
+        display: flex;
+        gap: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,20 @@
+// Copyright 2021 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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
+import * as FloatingButton from '../../floating_button/floating_button.js';
+
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new FloatingButton.FloatingButton.FloatingButton({
+  iconName: 'smart-assistant',
+});
+
+const componentDisabled = new FloatingButton.FloatingButton.FloatingButton({
+  iconName: 'smart-assistant',
+  disabled: true,
+});
+
+document.getElementById('container')?.appendChild(component);
+document.getElementById('container')?.appendChild(componentDisabled);

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

@@ -4,6 +4,8 @@
 
 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 * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
@@ -45,12 +47,15 @@ const component = new Freestyler.FreestylerChatUi({
   onFeedbackSubmit: noop,
   onCancelClick: noop,
   onSelectedNetworkRequestClick: noop,
+  onSelectedFileRequestClick: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
   messages,
   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,
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,

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

@@ -4,6 +4,8 @@
 
 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 * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
@@ -19,12 +21,15 @@ const component = new Freestyler.FreestylerChatUi({
   onFeedbackSubmit: noop,
   onCancelClick: noop,
   onSelectedNetworkRequestClick: noop,
+  onSelectedFileRequestClick: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
   messages: [],
   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,
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,

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

@@ -7,15 +7,17 @@ import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  /
 import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
 import * as LitHtml from '../../../lit-html/lit-html.js';
 
+const {html} = LitHtml;
+
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();
 
 // Disabled until https://crbug.com/1079231 is fixed.
 // clang-format off
-const iconDialog = LitHtml.html`
+const iconDialog = html`
 Hello...
 
-<${Dialogs.IconDialog.IconDialog.litTagName}
+<devtools-icon-dialog
   .data=${{
     iconData: {
       iconName: 'info',
@@ -36,7 +38,7 @@ Hello...
       This is a dialog describing some additional information.
     </div>
   </div>
-</${Dialogs.IconDialog.IconDialog.litTagName}>
+</devtools-icon-dialog>
 `;
 // clang-format on
 

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

@@ -2,24 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../components/panel_introduction_steps/panel_introduction_steps.js';
+
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as PanelIntroductionSteps from '../../../components/panel_introduction_steps/panel_introduction_steps.js';
 import * as LitHtml from '../../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
+const {html} = LitHtml;
+
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();
 
 const container = document.getElementById('container');
 if (container) {
   LitHtml.render(
-      LitHtml.html`
-<${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+      html`
+<devtools-panel-introduction-steps>
 <span slot="title">Get actionable insights on your website's performance</span>
 <span slot="step-1">Record or import a trace into the Performance Insights panel</span>
 <span slot="step-2">Get an overview of your page’s runtime performance</span>
 <span slot="step-3">Identify improvements to your performance via a list of actionable insights</span>
-</${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+</devtools-panel-introduction-steps>
                  `,
       container, {host: this});
 }

package/front_end/ui/components/docs/performance_panel/flamechart.html

@@ -16,6 +16,9 @@
         display: flex;
         margin-bottom: 20px;
       }
+      #extension {
+        height: 300px;
+      }
     </style>
 
   </head>
@@ -24,6 +27,7 @@
     <div id="basic" class="container"></div>
     <div id="decorations" class="container"></div>
     <div id="nested" class="container"></div>
+    <div id="extension" class="container"></div>
 
     <div id="track-customization" class="container"></div>
     <button id="hide">Hide Group</button>

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

@@ -4,6 +4,7 @@
 
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as Extensions from '../../../../panels/timeline/extensions/extensions.js';
 import * as EnvironmentHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as TraceHelpers from '../../../../testing/TraceHelpers.js';
 import * as PerfUI from '../../../legacy/components/perf_ui/perf_ui.js';
@@ -363,8 +364,52 @@ function renderInitiatorsExample() {
   flameChart.update();
 }
 
+/**
+ * Used to test the color palette for extension events
+ */
+function renderExtensionTrackExample() {
+  const colorPalette = Trace.Types.Extensions.extensionPalette;
+  const paletteLength = colorPalette.length;
+
+  class FakeProviderWithExtensionColors extends TraceHelpers.FakeFlameChartProvider {
+    override entryColor(entryIndex: number): string {
+      const color = colorPalette[entryIndex % paletteLength];
+      return Extensions.ExtensionUI.extensionEntryColor(
+          {args: {color}} as Trace.Types.Extensions.SyntheticExtensionEntry);
+    }
+    override maxStackDepth(): number {
+      return paletteLength + 1;
+    }
+    override timelineData(): PerfUI.FlameChart.FlameChartTimelineData|null {
+      return PerfUI.FlameChart.FlameChartTimelineData.create({
+        entryLevels: colorPalette.map((_, i) => i),
+        entryStartTimes: colorPalette.map(() => 0),
+        entryTotalTimes: colorPalette.map(() => 100),
+        groups: [{
+          name: 'Testing extension palette' as Platform.UIString.LocalizedString,
+          startLevel: 0,
+          style: defaultGroupStyle,
+        }],
+      });
+    }
+  }
+  const container = document.querySelector('div#extension');
+  if (!container) {
+    throw new Error('No container');
+  }
+  const delegate = new TraceHelpers.MockFlameChartDelegate();
+  const dataProvider = new FakeProviderWithExtensionColors();
+  const flameChart = new PerfUI.FlameChart.FlameChart(dataProvider, delegate);
+
+  flameChart.markAsRoot();
+  flameChart.setWindowTimes(0, 100);
+  flameChart.show(container);
+  flameChart.update();
+}
+
 renderBasicExample();
 renderDecorationExample();
 renderNestedExample();
 renderTrackCustomizationExample();
 renderInitiatorsExample();
+renderExtensionTrackExample();

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

@@ -5,7 +5,9 @@
 import * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../../front_end/ui/lit-html/lit-html.js';
 import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
+
+const {html} = LitHtml;  // eslint-disable-line rulesdir/es_modules_import
 
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();
@@ -59,20 +61,21 @@ function litRender(template: LitHtml.TemplateResult): void {
   LitHtml.render(template, div);  // eslint-disable-line
 }
 
-litRender(LitHtml.html`
-    <${RecorderComponents.SelectButton.SelectButton.litTagName} .items=${items} .value=${items[0].value}></${
-    RecorderComponents.SelectButton.SelectButton.litTagName}>`);
-litRender(LitHtml.html`
-    <${RecorderComponents.SelectButton.SelectButton.litTagName} .disabled=${true} .items=${items} .value=${
-    items[0].value}></${RecorderComponents.SelectButton.SelectButton.litTagName}>`);
-litRender(LitHtml.html`
-    <${RecorderComponents.SelectButton.SelectButton.litTagName}
-    .variant=${RecorderComponents.SelectButton.Variant.OUTLINED}
-    .items=${replayItems}
-    .value=${replayItems[0].value}></${RecorderComponents.SelectButton.SelectButton.litTagName}>`);
-litRender(LitHtml.html`
-    <${RecorderComponents.SelectButton.SelectButton.litTagName}
-    .disabled=${true}
-    .variant=${RecorderComponents.SelectButton.Variant.OUTLINED}
-    .items=${replayItems}
-    .value=${replayItems[2].value}></${RecorderComponents.SelectButton.SelectButton.litTagName}>`);
+litRender(html`
+    <devtools-select-button .items=${items} .value=${items[0].value}></devtools-select-button>`);
+litRender(html`
+    <devtools-select-button .disabled=${true} .items=${items} .value=${items[0].value}>
+    </devtools-select-button>`);
+litRender(html`
+    <devtools-select-button
+      .variant=${RecorderComponents.SelectButton.Variant.OUTLINED}
+      .items=${replayItems}
+      .value=${replayItems[0].value}>
+    </devtools-select-button>`);
+litRender(html`
+    <devtools-select-button
+      .disabled=${true}
+      .variant=${RecorderComponents.SelectButton.Variant.OUTLINED}
+      .items=${replayItems}
+      .value=${replayItems[2].value}>
+    </devtools-select-button>`);

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

@@ -2,15 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../report_view/report_view.js';
+
 import * as LitHtml from '../../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as ReportView from '../../report_view/report_view.js';
+import type * as ReportView from '../../report_view/report_view.js';
+
+const {html} = LitHtml;
 
 await ComponentHelpers.ComponentServerSetup.setup();
 
-const exampleRenderHelper = (key: string, value: string) => LitHtml.html`
-          <${ReportView.ReportView.ReportKey.litTagName}>${key}</${ReportView.ReportView.ReportKey.litTagName}>
-          <${ReportView.ReportView.ReportValue.litTagName}>${value}</${ReportView.ReportView.ReportValue.litTagName}>
+const exampleRenderHelper = (key: string, value: string) => html`
+          <devtools-report-key>${key}</devtools-report-key>
+          <devtools-report-value>${value}</devtools-report-value>
         `;
 
 const container = document.querySelector<HTMLElement>('#container');
@@ -19,34 +23,26 @@ if (!container) {
 }
 
 LitHtml.render(
-    LitHtml.html`
+    html`
         <style>
           .source-code {
             font-family: monospace;
           }
         </style>
 
-        <${ReportView.ReportView.Report.litTagName} .data=${{
+        <devtools-report .data=${{
       reportTitle: 'Optional Title',
     } as ReportView.ReportView.ReportData}>
-          <${ReportView.ReportView.ReportSectionHeader.litTagName}>Section 1</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-          <${ReportView.ReportView.ReportKey.litTagName}>Basic plain text field</${
-        ReportView.ReportView.ReportKey.litTagName}>
-          <${ReportView.ReportView.ReportValue.litTagName}>And this is the value</${
-        ReportView.ReportView.ReportValue.litTagName}>
-          <${ReportView.ReportView.ReportKey.litTagName}>A field with a code value</${
-        ReportView.ReportView.ReportKey.litTagName}>
-          <${ReportView.ReportView.ReportValue.litTagName} class="source-code">SomeCodeValue</${
-        ReportView.ReportView.ReportValue.litTagName}>
-          <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
-          <${ReportView.ReportView.ReportSectionHeader.litTagName}>Section 2</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
+          <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>
+          <devtools-report-key>A field with a code value</devtools-report-key>
+          <devtools-report-value class="source-code">SomeCodeValue</devtools-report-value>
+          <devtools-report-divider></devtools-report-divider>
+          <devtools-report-section-header>Section 2</devtools-report-section-header>
           ${exampleRenderHelper('Using a small helper', 'to render report rows')}
           ${exampleRenderHelper('This wide column defines the column width', 'for all rows')}
-          <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
-        </${ReportView.ReportView.Report.litTagName}>
+          <devtools-report-divider></devtools-report-divider>
+        </devtools-report>
       `,
     container);