chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/recorder/components/RecordingView.ts

@@ -2,6 +2,12 @@
 // 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/split_view/split_view.js';
+import './ExtensionView.js';
+import './ControlButton.js';
+import './ReplaySection.js';
+
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -12,10 +18,8 @@ import type * as PuppeteerReplay from '../../../third_party/puppeteer-replay/pup
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../../ui/components/code_highlighter/code_highlighter.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
-import * as Menus from '../../../ui/components/menus/menus.js';
-import * as SplitView from '../../../ui/components/split_view/split_view.js';
+import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as TextEditor from '../../../ui/components/text_editor/text_editor.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -25,20 +29,17 @@ import * as Models from '../models/models.js';
 import {PlayRecordingSpeed} from '../models/RecordingPlayer.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
-import {ExtensionView} from './ExtensionView.js';
 import recordingViewStyles from './recordingView.css.js';
-import {
-  ReplaySection,
-  type ReplaySectionData,
-  type StartReplayEvent,
-} from './ReplaySection.js';
+import type {ReplaySectionData, StartReplayEvent} from './ReplaySection.js';
 import {
   type CopyStepEvent,
   State,
-  StepView,
+  type StepView,
   type StepViewData,
 } from './StepView.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Depicts that the recording was done on a mobile device (e.g., a smartphone or tablet).
@@ -306,8 +307,6 @@ function converterIdToStepMetric(
 }
 
 export class RecordingView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-recording-view`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #replayState: ReplayState = {isPlaying: false, isPausedOnBreakpoint: false};
   #userFlow: Models.Schema.UserFlow|null = null;
@@ -472,8 +471,8 @@ export class RecordingView extends HTMLElement {
       ): LitHtml.TemplateResult {
     const stepIndex = this.#steps.indexOf(step);
     // clang-format off
-    return LitHtml.html`
-      <${StepView.litTagName}
+    return html`
+      <devtools-step-view
       @click=${this.#onStepClick}
       @mouseover=${this.#onStepHover}
       @copystep=${this.#onCopyStepEvent}
@@ -500,7 +499,7 @@ export class RecordingView extends HTMLElement {
         } as StepViewData
       }
       jslog=${VisualLogging.section('step').track({click: true})}
-      ></${StepView.litTagName}>
+      ></devtools-step-view>
     `;
     // clang-format on
   }
@@ -654,21 +653,21 @@ export class RecordingView extends HTMLElement {
 
   #renderSettings(): LitHtml.TemplateResult {
     if (!this.#settings) {
-      return LitHtml.html``;
+      return html``;
     }
     const environmentFragments = [];
     if (this.#settings.viewportSettings) {
       // clang-format off
       environmentFragments.push(
-        LitHtml.html`<div>${
+        html`<div>${
           this.#settings.viewportSettings.isMobile
             ? i18nString(UIStrings.mobile)
             : i18nString(UIStrings.desktop)
         }</div>`,
       );
-      environmentFragments.push(LitHtml.html`<div class="separator"></div>`);
+      environmentFragments.push(html`<div class="separator"></div>`);
       environmentFragments.push(
-        LitHtml.html`<div>${this.#settings.viewportSettings.width}×${
+        html`<div>${this.#settings.viewportSettings.width}×${
           this.#settings.viewportSettings.height
         } px</div>`,
       );
@@ -680,14 +679,14 @@ export class RecordingView extends HTMLElement {
         if (this.#settings.networkConditionsSettings.title) {
           // clang-format off
           replaySettingsFragments.push(
-            LitHtml.html`<div>${
+            html`<div>${
               this.#settings.networkConditionsSettings.title
             }</div>`,
           );
           // clang-format on
         } else {
           // clang-format off
-          replaySettingsFragments.push(LitHtml.html`<div>
+          replaySettingsFragments.push(html`<div>
             ${i18nString(UIStrings.download, {
               value: Platform.NumberUtilities.bytesToString(
                 this.#settings.networkConditionsSettings.download,
@@ -707,7 +706,7 @@ export class RecordingView extends HTMLElement {
       } else {
         // clang-format off
         replaySettingsFragments.push(
-          LitHtml.html`<div>${
+          html`<div>${
             SDK.NetworkManager.NoThrottlingConditions.title instanceof Function
               ? SDK.NetworkManager.NoThrottlingConditions.title()
               : SDK.NetworkManager.NoThrottlingConditions.title
@@ -716,9 +715,9 @@ export class RecordingView extends HTMLElement {
         // clang-format on
       }
       // clang-format off
-      replaySettingsFragments.push(LitHtml.html`<div class="separator"></div>`);
+      replaySettingsFragments.push(html`<div class="separator"></div>`);
       replaySettingsFragments.push(
-        LitHtml.html`<div>${i18nString(UIStrings.timeout, {
+        html`<div>${i18nString(UIStrings.timeout, {
           value: this.#settings.timeout || Models.RecordingPlayer.defaultTimeout,
         })}</div>`,
       );
@@ -739,10 +738,10 @@ export class RecordingView extends HTMLElement {
             : selectedOptionTitle.title;
       }
 
-      replaySettingsFragments.push(LitHtml.html`<div class="editable-setting">
+      replaySettingsFragments.push(html`<div class="editable-setting">
         <label class="wrapping-label" @click=${this.#onSelectMenuLabelClick}>
           ${i18nString(UIStrings.network)}
-          <${Menus.SelectMenu.SelectMenu.litTagName}
+          <devtools-select-menu
             @selectmenuselected=${this.#onNetworkConditionsChange}
             .disabled=${!this.#steps.find(step => step.type === 'navigate')}
             .showDivider=${true}
@@ -755,8 +754,8 @@ export class RecordingView extends HTMLElement {
             .buttonTitle=${menuButtonTitle}
           >
             ${networkConditionPresets.map(condition => {
-              return LitHtml.html`<${Menus.Menu.MenuItem.litTagName}
-                .value=${condition.i18nTitleKey}
+              return html`<devtools-menu-item
+                .value=${condition.i18nTitleKey || ''}
                 .selected=${selectedOption === condition.i18nTitleKey}
                 jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(condition.i18nTitleKey || ''))}
               >
@@ -765,12 +764,12 @@ export class RecordingView extends HTMLElement {
                     ? condition.title()
                     : condition.title
                 }
-              </${Menus.Menu.MenuItem.litTagName}>`;
+              </devtools-menu-item>`;
             })}
-          </${Menus.SelectMenu.SelectMenu.litTagName}>
+          </devtools-select-menu>
         </label>
       </div>`);
-      replaySettingsFragments.push(LitHtml.html`<div class="editable-setting">
+      replaySettingsFragments.push(html`<div class="editable-setting">
         <label class="wrapping-label" title=${i18nString(
           UIStrings.timeoutExplanation,
         )}>
@@ -800,7 +799,7 @@ export class RecordingView extends HTMLElement {
       settings: true,
     };
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="settings-row">
         <div class="settings-container">
           <div
@@ -814,10 +813,10 @@ export class RecordingView extends HTMLElement {
             <span>${i18nString(UIStrings.replaySettings)}</span>
             ${
               isEditable
-                ? LitHtml.html`<${IconButton.Icon.Icon.litTagName}
+                ? html`<devtools-icon
                     class="chevron"
                     name="triangle-down">
-                  </${IconButton.Icon.Icon.litTagName}>`
+                  </devtools-icon>`
                 : ''
             }
           </div>
@@ -825,7 +824,7 @@ export class RecordingView extends HTMLElement {
             ${
               replaySettingsFragments.length
                 ? replaySettingsFragments
-                : LitHtml.html`<div>${i18nString(UIStrings.default)}</div>`
+                : html`<div>${i18nString(UIStrings.default)}</div>`
             }
           </div>
         </div>
@@ -835,7 +834,7 @@ export class RecordingView extends HTMLElement {
             ${
               environmentFragments.length
                 ? environmentFragments
-                : LitHtml.html`<div>${i18nString(UIStrings.default)}</div>`
+                : html`<div>${i18nString(UIStrings.default)}</div>`
             }
           </div>
         </div>
@@ -858,9 +857,9 @@ export class RecordingView extends HTMLElement {
   #renderTimelineArea(): LitHtml.LitTemplate {
     if (this.#extensionDescriptor) {
       // clang-format off
-      return LitHtml.html`
-        <${ExtensionView.litTagName} .descriptor=${this.#extensionDescriptor}>
-        </${ExtensionView.litTagName}>
+      return html`
+        <devtools-recorder-extension-view .descriptor=${this.#extensionDescriptor}>
+        </devtools-recorder-extension-view>
       `;
       // clang-format on
     }
@@ -869,14 +868,14 @@ export class RecordingView extends HTMLElement {
     // clang-format off
     return !this.#showCodeView
       ? this.#renderSections()
-      : LitHtml.html`
-        <${SplitView.SplitView.SplitView.litTagName}>
+      : html`
+        <devtools-split-view>
           <div slot="main">
             ${this.#renderSections()}
           </div>
           <div slot="sidebar" jslog=${VisualLogging.pane('source-code').track({resize: true})}>
             <div class="section-toolbar" jslog=${VisualLogging.toolbar()}>
-              <${Menus.SelectMenu.SelectMenu.litTagName}
+              <devtools-select-menu
                 @selectmenuselected=${this.#onCodeFormatChange}
                 .showDivider=${true}
                 .showArrow=${true}
@@ -884,29 +883,29 @@ export class RecordingView extends HTMLElement {
                 .showSelectedItem=${true}
                 .showConnector=${false}
                 .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
-                .buttonTitle=${converterFormatName}
+                .buttonTitle=${converterFormatName || ''}
                 .jslogContext=${'code-format'}
               >
                 ${this.#builtInConverters.map(converter => {
-                  return LitHtml.html`<${Menus.Menu.MenuItem.litTagName}
+                  return html`<devtools-menu-item
                     .value=${converter.getId()}
                     .selected=${this.#converterId === converter.getId()}
                     jslog=${VisualLogging.action().track({click: true}).context(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`)}
                   >
                     ${converter.getFormatName()}
-                  </${Menus.Menu.MenuItem.litTagName}>`;
+                  </devtools-menu-item>`;
                 })}
                 ${this.#extensionConverters.map(converter => {
-                  return LitHtml.html`<${Menus.Menu.MenuItem.litTagName}
+                  return html`<devtools-menu-item
                     .value=${converter.getId()}
                     .selected=${this.#converterId === converter.getId()}
                     jslog=${VisualLogging.action().track({click: true}).context('converter-extension')}
                   >
                     ${converter.getFormatName()}
-                  </${Menus.Menu.MenuItem.litTagName}>`;
+                  </devtools-menu-item>`;
                 })}
-              </${Menus.SelectMenu.SelectMenu.litTagName}>
-              <${Buttons.Button.Button.litTagName}
+              </devtools-select-menu>
+              <devtools-button
                 title=${Models.Tooltip.getTooltipForActions(
                   i18nString(UIStrings.hideCode),
                   Actions.RecorderActions.TOGGLE_CODE_VIEW,
@@ -920,19 +919,28 @@ export class RecordingView extends HTMLElement {
                 }
                 @click=${this.showCodeToggle}
                 jslog=${VisualLogging.close().track({click: true})}
-              ></${Buttons.Button.Button.litTagName}>
-            </div>
-            <div class="text-editor" jslog=${VisualLogging.textField().track({change: true})}>
-              <${TextEditor.TextEditor.TextEditor.litTagName} .state=${
-          this.#editorState
-        }></${TextEditor.TextEditor.TextEditor.litTagName}>
+              ></devtools-button>
             </div>
+            ${this.#renderTextEditor()}
           </div>
-        </${SplitView.SplitView.SplitView.litTagName}>
+        </devtools-split-view>
       `;
     // clang-format on
   }
 
+  #renderTextEditor(): LitHtml.TemplateResult {
+    if (!this.#editorState) {
+      throw new Error('Unexpected: trying to render the text editor without editorState');
+    }
+    // clang-format off
+    return html`
+      <div class="text-editor" jslog=${VisualLogging.textField().track({change: true})}>
+        <devtools-text-editor .state=${this.#editorState}></devtools-text-editor>
+      </div>
+    `;
+    // clang-format on
+  }
+
   #renderScreenshot(
       section: Models.Section.Section,
       ): LitHtml.TemplateResult|null {
@@ -941,7 +949,7 @@ export class RecordingView extends HTMLElement {
     }
 
     // clang-format off
-    return LitHtml.html`
+    return html`
       <img class="screenshot" src=${section.screenshot} alt=${i18nString(
       UIStrings.screenshotForSection,
     )} />
@@ -951,15 +959,15 @@ export class RecordingView extends HTMLElement {
 
   #renderReplayOrAbortButton(): LitHtml.TemplateResult {
     if (this.#replayState.isPlaying) {
-      return LitHtml.html`
-        <${Buttons.Button.Button.litTagName} .jslogContext=${'abort-replay'} @click=${
+      return html`
+        <devtools-button .jslogContext=${'abort-replay'} @click=${
           this.#handleAbortReplay} .iconName=${'pause'} .variant=${Buttons.Button.Variant.OUTLINED}>
           ${i18nString(UIStrings.cancelReplay)}
-        </${Buttons.Button.Button.litTagName}>`;
+        </devtools-button>`;
     }
 
     // clang-format off
-    return LitHtml.html`<${ReplaySection.litTagName}
+    return html`<devtools-replay-section
         .data=${
           {
             settings: this.#recorderSettings,
@@ -969,7 +977,7 @@ export class RecordingView extends HTMLElement {
         .disabled=${this.#replayState.isPlaying}
         @startreplay=${this.#handleTogglePlaying}
         >
-      </${ReplaySection.litTagName}>`;
+      </devtools-replay-section>`;
     // clang-format on
   }
 
@@ -1077,12 +1085,12 @@ export class RecordingView extends HTMLElement {
 
   #renderSections(): LitHtml.LitTemplate {
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="sections">
       ${
         !this.#showCodeView
-          ? LitHtml.html`<div class="section-toolbar">
-        <${Buttons.Button.Button.litTagName}
+          ? html`<div class="section-toolbar">
+        <devtools-button
           @click=${this.showCodeToggle}
           class="show-code"
           .data=${
@@ -1097,19 +1105,19 @@ export class RecordingView extends HTMLElement {
           jslog=${VisualLogging.toggleSubpane(Actions.RecorderActions.TOGGLE_CODE_VIEW).track({click: true})}
         >
           ${i18nString(UIStrings.showCode)}
-        </${Buttons.Button.Button.litTagName}>
+        </devtools-button>
       </div>`
           : ''
       }
       ${this.#sections.map(
-        (section, i) => LitHtml.html`
+        (section, i) => html`
             <div class="section">
               <div class="screenshot-wrapper">
                 ${this.#renderScreenshot(section)}
               </div>
               <div class="content">
                 <div class="steps">
-                  <${StepView.litTagName}
+                  <devtools-step-view
                     @click=${this.#onStepClick}
                     @mouseover=${this.#onStepHover}
                     .data=${
@@ -1136,7 +1144,7 @@ export class RecordingView extends HTMLElement {
                       } as StepViewData
                     }
                   >
-                  </${StepView.litTagName}>
+                  </devtools-step-view>
                   ${section.steps.map(step =>
                     this.#renderStep(
                       section,
@@ -1144,7 +1152,7 @@ export class RecordingView extends HTMLElement {
                       i === this.#sections.length - 1,
                     ),
                   )}
-                  ${!this.#recordingTogglingInProgress && this.#isRecording && i === this.#sections.length - 1 ? LitHtml.html`<devtools-button
+                  ${!this.#recordingTogglingInProgress && this.#isRecording && i === this.#sections.length - 1 ? html`<devtools-button
                     class="step add-assertion-button"
                     .data=${
                       {
@@ -1157,7 +1165,7 @@ export class RecordingView extends HTMLElement {
                   >${i18nString(UIStrings.addAssertion)}</devtools-button>` : undefined}
                   ${
                     this.#isRecording && i === this.#sections.length - 1
-                      ? LitHtml.html`<div class="step recording">${i18nString(
+                      ? html`<div class="step recording">${i18nString(
                           UIStrings.recording,
                         )}</div>`
                       : null
@@ -1179,7 +1187,7 @@ export class RecordingView extends HTMLElement {
     const {title} = this.#userFlow;
     const isTitleEditable = !this.#replayState.isPlaying && !this.#isRecording;
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="header">
         <div class="header-title-wrapper">
           <div class="header-title">
@@ -1194,7 +1202,7 @@ export class RecordingView extends HTMLElement {
                   })}
                   .innerText=${LitHtml.Directives.live(title)}></span>
             <div class="title-button-bar">
-              <${Buttons.Button.Button.litTagName}
+              <devtools-button
                 @click=${this.#onEditTitleButtonClick}
                 .data=${
                   {
@@ -1205,12 +1213,12 @@ export class RecordingView extends HTMLElement {
                     jslogContext: 'edit-title',
                   } as Buttons.Button.ButtonData
                 }
-              ></${Buttons.Button.Button.litTagName}>
+              ></devtools-button>
             </div>
           </div>
           ${
             this.#isTitleInvalid
-              ? LitHtml.html`<div class="title-input-error-text">
+              ? html`<div class="title-input-error-text">
             ${
               i18nString(UIStrings.requiredTitleError)
             }
@@ -1220,8 +1228,8 @@ export class RecordingView extends HTMLElement {
         </div>
         ${
           !this.#isRecording && this.#replayAllowed
-            ? LitHtml.html`<div class="actions">
-                <${Buttons.Button.Button.litTagName}
+            ? html`<div class="actions">
+                <devtools-button
                   @click=${this.#handleMeasurePerformanceClickEvent}
                   .data=${
                     {
@@ -1234,7 +1242,7 @@ export class RecordingView extends HTMLElement {
                   }
                 >
                   ${i18nString(UIStrings.performancePanel)}
-                </${Buttons.Button.Button.litTagName}>
+                </devtools-button>
                 <div class="separator"></div>
                 ${this.#renderReplayOrAbortButton()}
               </div>`
@@ -1251,7 +1259,7 @@ export class RecordingView extends HTMLElement {
     const translation = this.#recordingTogglingInProgress ? i18nString(UIStrings.recordingIsBeingStopped) :
                                                             i18nString(UIStrings.endRecording);
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="footer">
         <div class="controls">
           <devtools-control-button
@@ -1283,7 +1291,7 @@ export class RecordingView extends HTMLElement {
 
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
       <div @click=${this.#onWrapperClick} class=${LitHtml.Directives.classMap(
         classNames,
       )}>
@@ -1291,13 +1299,13 @@ export class RecordingView extends HTMLElement {
           ${this.#renderHeader()}
           ${
             this.#extensionDescriptor
-              ? LitHtml.html`
-            <${ExtensionView.litTagName} .descriptor=${
+              ? html`
+            <devtools-recorder-extension-view .descriptor=${
                   this.#extensionDescriptor
                 }>
-            </${ExtensionView.litTagName}>
+            </devtools-recorder-extension-view>
           `
-              : LitHtml.html`
+              : html`
             ${this.#renderSettings()}
             ${this.#renderTimelineArea()}
           `

package/front_end/panels/recorder/components/ReplaySection.ts

@@ -13,13 +13,14 @@ import {PlayRecordingSpeed} from '../models/RecordingPlayer.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
 import {
-  SelectButton,
   type SelectButtonClickEvent,
   type SelectButtonItem,
   type SelectMenuSelectedEvent,
   Variant as SelectButtonVariant,
 } from './SelectButton.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Replay button label
@@ -130,7 +131,6 @@ export interface ReplaySectionData {
 const REPLAY_EXTENSION_PREFIX = 'extension';
 
 export class ReplaySection extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-replay-section`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   readonly #props: ReplaySectionProps = {disabled: false};
@@ -224,19 +224,19 @@ export class ReplaySection extends HTMLElement {
 
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
-    <${SelectButton.litTagName}
+      html`
+    <devtools-select-button
       @selectmenuselected=${this.#handleSelectMenuSelected}
       @selectbuttonclick=${this.#handleSelectButtonClick}
       .variant=${SelectButtonVariant.PRIMARY}
       .showItemDivider=${false}
       .disabled=${this.#props.disabled}
       .action=${Actions.RecorderActions.REPLAY_RECORDING}
-      .value=${this.#settings?.replayExtension || this.#settings?.speed}
+      .value=${this.#settings?.replayExtension || this.#settings?.speed || ''}
       .buttonLabel=${i18nString(UIStrings.Replay)}
       .groups=${groups}
       jslog=${VisualLogging.action(Actions.RecorderActions.REPLAY_RECORDING).track({click: true})}>
-    </${SelectButton.litTagName}>`,
+    </devtools-select-button>`,
       this.#shadow,
       { host: this },
     );

package/front_end/panels/recorder/components/SelectButton.ts

@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/menus/menus.js';
+
 import * as Platform from '../../../core/platform/platform.js';
-import {type LocalizedString} from '../../../core/platform/UIString.js';
+import type {LocalizedString} from '../../../core/platform/UIString.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as Menus from '../../../ui/components/menus/menus.js';
+import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Models from '../models/models.js';
@@ -15,6 +17,8 @@ import type * as Actions from '../recorder-actions/recorder-actions.js';
 
 import selectButtonStyles from './selectButton.css.js';
 
+const {html, Directives: {ifDefined, classMap}} = LitHtml;
+
 export const enum Variant {
   PRIMARY = 'primary',
   OUTLINED = 'outlined',
@@ -95,7 +99,6 @@ export class SelectMenuSelectedEvent extends Event {
 }
 
 export class SelectButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-select-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #props: SelectButtonProps = {
     disabled: false,
@@ -178,12 +181,12 @@ export class SelectButton extends HTMLElement {
       selectedItem: SelectButtonItem,
       ): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
-      <${Menus.Menu.MenuItem.litTagName} .value=${item.value} .selected=${
+    return html`
+      <devtools-menu-item .value=${item.value} .selected=${
       item.value === selectedItem.value
     } jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(item.value)).track({click: true})}>
         ${item.label()}
-      </${Menus.Menu.MenuItem.litTagName}>
+      </devtools-menu-item>
     `;
     // clang-format on
   }
@@ -193,10 +196,10 @@ export class SelectButton extends HTMLElement {
       selectedItem: SelectButtonItem,
       ): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
-      <${Menus.Menu.MenuGroup.litTagName} .name=${group.name}>
+    return html`
+      <devtools-menu-group .name=${group.name}>
         ${group.items.map(item => this.#renderSelectItem(item, selectedItem))}
-      </${Menus.Menu.MenuGroup.litTagName}>
+      </devtools-menu-group>
     `;
     // clang-format on
   }
@@ -224,19 +227,17 @@ export class SelectButton extends HTMLElement {
 
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
-      <div class="select-button" title=${
-        this.#getTitle(menuLabel) || LitHtml.nothing
-      }>
-      <${Menus.SelectMenu.SelectMenu.litTagName}
-          class=${LitHtml.Directives.classMap(classes)}
+      html`
+      <div class="select-button" title=${ifDefined(this.#getTitle(menuLabel))}>
+      <devtools-select-menu
+          class=${classMap(classes)}
           @selectmenuselected=${this.#handleSelectMenuSelect}
           ?disabled=${this.#props.disabled}
           .showArrow=${true}
           .sideButton=${false}
           .showSelectedItem=${true}
           .disabled=${this.#props.disabled}
-          .buttonTitle=${LitHtml.html`${menuLabel}`}
+          .buttonTitle=${() => html`${menuLabel}`}
           .position=${Dialogs.Dialog.DialogVerticalPosition.BOTTOM}
           .horizontalAlignment=${
             Dialogs.Dialog.DialogHorizontalAlignment.RIGHT
@@ -251,17 +252,17 @@ export class SelectButton extends HTMLElement {
                   this.#renderSelectItem(item, selectedItem),
                 )
           }
-        </${Menus.SelectMenu.SelectMenu.litTagName}>
+        </devtools-select-menu>
         ${
           selectedItem
-            ? LitHtml.html`
-        <${Buttons.Button.Button.litTagName}
+            ? html`
+        <devtools-button
             .disabled=${this.#props.disabled}
             .variant=${buttonVariant}
             .iconName=${selectedItem.buttonIconName}
             @click=${this.#handleClick}>
             ${this.#props.buttonLabel}
-        </${Buttons.Button.Button.litTagName}>`
+        </devtools-button>`
             : ''
         }
       </div>`,