chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/recorder/RecorderController.ts

@@ -14,15 +14,15 @@ import * as Emulation from '../../panels/emulation/emulation.js';
 import * as Timeline from '../../panels/timeline/timeline.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
+import type * 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 UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
-import {type AddBreakpointEvent, type RemoveBreakpointEvent} from './components/StepView.js';
+import type {AddBreakpointEvent, RemoveBreakpointEvent} from './components/StepView.js';
 import type * as Controllers from './controllers/controllers.js';
 import * as Converters from './converters/converters.js';
 import * as Extensions from './extensions/extensions.js';
@@ -1078,7 +1078,7 @@ export class RecorderController extends LitElement {
     const recordings = this.#storage.getRecordings();
     // clang-format off
     return html`
-      <${Components.RecordingListView.RecordingListView.litTagName}
+      <devtools-recording-list-view
         .recordings=${recordings.map(recording => ({
           storageName: recording.storageName,
           name: recording.flow.title,
@@ -1089,7 +1089,7 @@ export class RecorderController extends LitElement {
         @openrecording=${this.#onRecordingSelected}
         @playrecording=${this.#onPlayRecordingByName}
         >
-      </${Components.RecordingListView.RecordingListView.litTagName}>
+      </devtools-recording-list-view>
     `;
     // clang-format on
   }
@@ -1097,9 +1097,9 @@ export class RecorderController extends LitElement {
   #renderStartPage(): LitHtml.TemplateResult {
     // clang-format off
     return html`
-      <${Components.StartView.StartView.litTagName}
+      <devtools-start-view
         @createrecording=${this.#onCreateNewRecording}
-      ></${Components.StartView.StartView.litTagName}>
+      ></devtools-start-view>
     `;
     // clang-format on
   }
@@ -1107,7 +1107,7 @@ export class RecorderController extends LitElement {
   #renderRecordingPage(): LitHtml.TemplateResult {
     // clang-format off
     return html`
-      <${Components.RecordingView.RecordingView.litTagName}
+      <devtools-recording-view
         .data=${
           {
             recording: this.currentRecording?.flow,
@@ -1146,7 +1146,7 @@ export class RecorderController extends LitElement {
         @abortreplay=${this.#onAbortReplay}
         @recorderextensionviewclosed=${this.#onExtensionViewClosed}
         @addassertion=${this.#handleAddAssertionEvent}
-      ></${Components.RecordingView.RecordingView.litTagName}>
+      ></devtools-recording-view>
     `;
     // clang-format on
   }
@@ -1154,7 +1154,7 @@ export class RecorderController extends LitElement {
   #renderCreateRecordingPage(): LitHtml.TemplateResult {
     // clang-format off
     return html`
-      <${Components.CreateRecordingView.CreateRecordingView.litTagName}
+      <devtools-create-recording-view
         .data=${
           {
             recorderSettings: this.#recorderSettings,
@@ -1162,7 +1162,7 @@ export class RecorderController extends LitElement {
         }
         @recordingstarted=${this.#onRecordingStarted}
         @recordingcancelled=${this.#onRecordingCancelled}
-      ></${Components.CreateRecordingView.CreateRecordingView.litTagName}>
+      ></devtools-create-recording-view>
     `;
     // clang-format on
   }
@@ -1210,7 +1210,7 @@ export class RecorderController extends LitElement {
     return html`
         <div class="wrapper">
           <div class="header" jslog=${VisualLogging.toolbar()}>
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               @click=${this.#onCreateNewRecording}
               .data=${
                 {
@@ -1227,7 +1227,7 @@ export class RecorderController extends LitElement {
                   jslogContext: Actions.RecorderActions.CREATE_RECORDING,
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>
+            ></devtools-button>
             <div class="separator"></div>
             <select
               .disabled=${
@@ -1249,7 +1249,7 @@ export class RecorderController extends LitElement {
               )}
             </select>
             <div class="separator"></div>
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               @click=${this.#onImportRecording}
               .data=${
                 {
@@ -1259,8 +1259,8 @@ export class RecorderController extends LitElement {
                   jslogContext: 'import-recording',
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>
-            <${Buttons.Button.Button.litTagName}
+            ></devtools-button>
+            <devtools-button
               id='origin'
               @click=${this.#onExportRecording}
               on-render=${ComponentHelpers.Directives.nodeRenderedCallback(
@@ -1277,8 +1277,8 @@ export class RecorderController extends LitElement {
                 } as Buttons.Button.ButtonData
               }
               jslog=${VisualLogging.dropDown('export-recording').track({click: true})}
-            ></${Buttons.Button.Button.litTagName}>
-            <${Menus.Menu.Menu.litTagName}
+            ></devtools-button>
+            <devtools-menu
               @menucloserequest=${this.#onExportMenuClosed}
               @menuitemselected=${this.#onExportOptionSelected}
               .origin=${this.#getExportMenuButton}
@@ -1287,47 +1287,43 @@ export class RecorderController extends LitElement {
               .showConnector=${false}
               .open=${this.exportMenuExpanded}
             >
-              <${Menus.Menu.MenuGroup.litTagName} .name=${i18nString(
+              <devtools-menu-group .name=${i18nString(
       UIStrings.export,
     )}>
                 ${LitHtml.Directives.repeat(
                   this.#builtInConverters,
                   converter => {
                     return html`
-                    <${
-                      Menus.Menu.MenuItem.litTagName
-                    } .value=${converter.getId()}
+                    <devtools-menu-item
+                      .value=${converter.getId()}
                       jslog=${VisualLogging.item(`converter-${Platform.StringUtilities.toKebabCase(converter.getId())}`).track({click: true})}>
                       ${converter.getFormatName()}
-                    </${Menus.Menu.MenuItem.litTagName}>
+                    </devtools-menu-item>
                   `;
                   },
                 )}
-              </${Menus.Menu.MenuGroup.litTagName}>
-              <${Menus.Menu.MenuGroup.litTagName} .name=${i18nString(
+              </devtools-menu-group>
+              <devtools-menu-group .name=${i18nString(
       UIStrings.exportViaExtensions,
     )}>
                 ${LitHtml.Directives.repeat(
                   this.extensionConverters,
                   converter => {
                     return html`
-                    <${
-                      Menus.Menu.MenuItem.litTagName
-                    } .value=${converter.getId()}
+                    <devtools-menu-item
+                     .value=${converter.getId()}
                       jslog=${VisualLogging.item('converter-extension').track({click: true})}>
                     ${converter.getFormatName()}
-                    </${Menus.Menu.MenuItem.litTagName}>
+                    </devtools-menu-item>
                   `;
                   },
                 )}
-                <${
-                  Menus.Menu.MenuItem.litTagName
-                } .value=${GET_EXTENSIONS_MENU_ITEM}>
+                <devtools-menu-item .value=${GET_EXTENSIONS_MENU_ITEM}>
                   ${i18nString(UIStrings.getExtensions)}
-                </${Menus.Menu.MenuItem.litTagName}>
-              </${Menus.Menu.MenuGroup.litTagName}>
-            </${Menus.Menu.Menu.litTagName}>
-            <${Buttons.Button.Button.litTagName}
+                </devtools-menu-item>
+              </devtools-menu-group>
+            </devtools-menu>
+            <devtools-button
               @click=${this.#onDeleteRecording}
               .data=${
                 {
@@ -1342,9 +1338,9 @@ export class RecorderController extends LitElement {
                   jslogContext: 'delete-recording',
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>
+            ></devtools-button>
             <div class="separator"></div>
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               @click=${() => this.recordingPlayer?.continue()}
               .data=${
                 {
@@ -1357,8 +1353,8 @@ export class RecorderController extends LitElement {
                   jslogContext: 'continue-replay',
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>
-            <${Buttons.Button.Button.litTagName}
+            ></devtools-button>
+            <devtools-button
               @click=${() => this.recordingPlayer?.stepOver()}
               .data=${
                 {
@@ -1371,20 +1367,20 @@ export class RecorderController extends LitElement {
                   jslogContext: 'step-over',
                 } as Buttons.Button.ButtonData
               }
-            ></${Buttons.Button.Button.litTagName}>
+            ></devtools-button>
             <div class="feedback">
               <x-link class="x-link" href=${
                 Components.StartView.FEEDBACK_URL
               } jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.sendFeedback)}</x-link>
             </div>
             <div class="separator"></div>
-            <${Dialogs.ShortcutDialog.ShortcutDialog.litTagName}
+            <devtools-shortcut-dialog
               .data=${
                 {
                   shortcuts: this.#getShortcutsInfo(),
                 } as Dialogs.ShortcutDialog.ShortcutDialogData
               } jslog=${VisualLogging.action('show-shortcuts').track({click: true})}
-            ></${Dialogs.ShortcutDialog.ShortcutDialog.litTagName}>
+            ></devtools-shortcut-dialog>
           </div>
           ${
             this.importError

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

@@ -21,7 +21,7 @@ export class ControlButton extends LitElement {
 
   @property() declare label: string;
   @property() declare shape: string;
-  @property() declare disabled: boolean;
+  @property({type: Boolean}) declare disabled: boolean;
 
   constructor() {
     super();

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

@@ -5,10 +5,11 @@
 /* eslint-disable rulesdir/inject_checkbox_styles */
 
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/components/icon_button/icon_button.js';
+import './ControlButton.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 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';
@@ -17,6 +18,8 @@ import * as Actions from '../recorder-actions/recorder-actions.js';
 
 import createRecordingViewStyles from './createRecordingView.css.js';
 
+const {html, Directives: {ifDefined}} = LitHtml;
+
 const UIStrings = {
   /**
    * @description The label for the input where the user enters a name for the new recording.
@@ -140,7 +143,6 @@ export interface CreateRecordingViewData {
 }
 
 export class CreateRecordingView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-create-recording-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #defaultRecordingName: string = '';
   #error?: Error;
@@ -263,11 +265,11 @@ export class CreateRecordingView extends HTMLElement {
     ]);
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
         <div class="wrapper">
           <div class="header-wrapper">
             <h1>${i18nString(UIStrings.createRecording)}</h1>
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               title=${i18nString(UIStrings.cancelRecording)}
               jslog=${VisualLogging.close().track({click: true})}
               .data=${
@@ -278,7 +280,7 @@ export class CreateRecordingView extends HTMLElement {
                 } as Buttons.Button.ButtonData
               }
               @click=${this.#dispatchRecordingCancelled}
-            ></${Buttons.Button.Button.litTagName}>
+            ></devtools-button>
           </div>
           <label class="row-label" for="user-flow-name">${i18nString(
             UIStrings.recordingName,
@@ -297,12 +299,12 @@ export class CreateRecordingView extends HTMLElement {
               class="link" href="https://g.co/devtools/recorder#selector"
               title=${i18nString(UIStrings.learnMore)}
               jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
-              <${IconButton.Icon.Icon.litTagName} name="help">
-              </${IconButton.Icon.Icon.litTagName}>
+              <devtools-icon name="help">
+              </devtools-icon>
             </x-link>
           </label>
           <input
-            value=${this.#recorderSettings?.selectorAttribute}
+            value=${ifDefined(this.#recorderSettings?.selectorAttribute)}
             placeholder="data-testid"
             @keydown=${this.#onKeyDown}
             jslog=${VisualLogging.textField('selector-attribute').track({change: true})}
@@ -315,23 +317,21 @@ export class CreateRecordingView extends HTMLElement {
               class="link" href="https://g.co/devtools/recorder#selector"
               title=${i18nString(UIStrings.learnMore)}
               jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
-              <${IconButton.Icon.Icon.litTagName} name="help">
-              </${IconButton.Icon.Icon.litTagName}>
+              <devtools-icon name="help">
+              </devtools-icon>
             </x-link>
           </label>
           <div class="checkbox-container">
             ${Object.values(Models.Schema.SelectorType).map(selectorType => {
               const checked =
                 this.#recorderSettings?.getSelectorByType(selectorType);
-              return LitHtml.html`
+              return html`
                   <label class="checkbox-label selector-type">
                     <input
                       @keydown=${this.#onKeyDown}
                       .value=${selectorType}
                       jslog=${VisualLogging.toggle().track({click: true}).context(`selector-${selectorType}`)}
-                      checked=${LitHtml.Directives.ifDefined(
-                        checked ? checked : undefined,
-                      )}
+                      ?checked=${checked}
                       type="checkbox"
                     />
                     ${selectorTypeToLabel.get(selectorType) || selectorType}
@@ -342,7 +342,7 @@ export class CreateRecordingView extends HTMLElement {
 
           ${
             this.#error &&
-            LitHtml.html`
+            html`
           <div class="error" role="alert">
             ${this.#error.message}
           </div>

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

@@ -3,17 +3,19 @@
 // found in the LICENSE file.
 
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as PublicExtensions from '../../../models/extensions/extensions.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Extensions from '../extensions/extensions.js';
 
 import extensionViewStyles from './extensionView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description The button label that closes the panel that shows the extension content inside the Recorder panel.
@@ -47,7 +49,6 @@ export class ClosedEvent extends Event {
 }
 
 export class ExtensionView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-recorder-extension-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #descriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
 
@@ -88,18 +89,18 @@ export class ExtensionView extends HTMLElement {
     const iframe = Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#descriptor.id).frame();
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
         <div class="extension-view">
           <header>
             <div class="title">
-              <${IconButton.Icon.Icon.litTagName}
+              <devtools-icon
                 class="icon"
                 title=${i18nString(UIStrings.extension)}
                 name="extension">
-              </${IconButton.Icon.Icon.litTagName}>
+              </devtools-icon>
               ${this.#descriptor.title}
             </div>
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               title=${i18nString(UIStrings.closeView)}
               jslog=${VisualLogging.close().track({click: true})}
               .data=${
@@ -110,11 +111,11 @@ export class ExtensionView extends HTMLElement {
                 } as Buttons.Button.ButtonData
               }
               @click=${this.#closeView}
-            ></${Buttons.Button.Button.litTagName}>
+            ></devtools-button>
           </header>
           <main>
             ${iframe}
-          <main>
+          </main>
       </div>
     `,
       this.#shadow,

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

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Models from '../models/models.js';
@@ -13,6 +14,8 @@ import * as Actions from '../recorder-actions/recorder-actions.js';
 
 import recordingListViewStyles from './recordingListView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description The title of the page that contains a list of saved recordings that the user has..
@@ -86,7 +89,6 @@ interface Recording {
 }
 
 export class RecordingListView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-recording-list-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #props: {recordings: Recording[], replayAllowed: boolean} = {
     recordings: [],
@@ -145,11 +147,11 @@ export class RecordingListView extends HTMLElement {
   #render = (): void => {
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
+      html`
         <div class="wrapper">
           <div class="header">
             <h1>${i18nString(UIStrings.savedRecordings)}</h1>
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               .variant=${Buttons.Button.Variant.PRIMARY}
               @click=${this.#onCreateClick}
               title=${Models.Tooltip.getTooltipForActions(
@@ -159,11 +161,11 @@ export class RecordingListView extends HTMLElement {
               .jslogContext=${'create-recording'}
             >
               ${i18nString(UIStrings.createRecording)}
-            </${Buttons.Button.Button.litTagName}>
+            </devtools-button>
           </div>
           <div class="table">
             ${this.#props.recordings.map(recording => {
-              return LitHtml.html`
+              return html`
                   <div
                     role="button"
                     tabindex="0"
@@ -181,15 +183,15 @@ export class RecordingListView extends HTMLElement {
                       .track({ click: true })
                       .context('recording')}>
                     <div class="icon">
-                      <${IconButton.Icon.Icon.litTagName} name="flow">
-                      </${IconButton.Icon.Icon.litTagName}>
+                      <devtools-icon name="flow">
+                      </devtools-icon>
                     </div>
                     <div class="title">${recording.name}</div>
                     <div class="actions">
                       ${
                         this.#props.replayAllowed
-                          ? LitHtml.html`
-                              <${Buttons.Button.Button.litTagName}
+                          ? html`
+                              <devtools-button
                                 title=${i18nString(UIStrings.playRecording)}
                                 .data=${
                                   {
@@ -203,11 +205,11 @@ export class RecordingListView extends HTMLElement {
                                   recording.storageName,
                                 )}
                                 @keydown=${this.#stopPropagation}
-                              ></${Buttons.Button.Button.litTagName}>
+                              ></devtools-button>
                               <div class="divider"></div>`
                           : ''
                       }
-                      <${Buttons.Button.Button.litTagName}
+                      <devtools-button
                         class="delete-recording-button"
                         title=${i18nString(UIStrings.deleteRecording)}
                         .data=${
@@ -222,7 +224,7 @@ export class RecordingListView extends HTMLElement {
                           recording.storageName,
                         )}
                         @keydown=${this.#stopPropagation}
-                      ></${Buttons.Button.Button.litTagName}>
+                      ></devtools-button>
                     </div>
                   </div>
                 `;