chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/timeline/components/CPUThrottlingSelector.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 '../../../ui/components/menus/menus.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.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 MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
@@ -40,7 +42,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/CPUThrottli
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class CPUThrottlingSelector extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-cpu-throttling-selector`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #currentRate: number;
@@ -79,7 +80,7 @@ export class CPUThrottlingSelector extends HTMLElement {
 
     // clang-format off
     const output = html`
-      <${Menus.SelectMenu.SelectMenu.litTagName}
+      <devtools-select-menu
             @selectmenuselected=${this.#onMenuItemSelected}
             .showDivider=${true}
             .showArrow=${true}
@@ -93,17 +94,17 @@ export class CPUThrottlingSelector extends HTMLElement {
           ${MobileThrottling.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.map(rate => {
             const title = rate === 1 ? i18nString(UIStrings.noThrottling) : i18nString(UIStrings.dSlowdown, {PH1: rate});
             const jslogContext = rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`;
-            return LitHtml.html`
-              <${Menus.Menu.MenuItem.litTagName}
+            return html`
+              <devtools-menu-item
                 .value=${rate}
                 .selected=${this.#currentRate === rate}
                 jslog=${VisualLogging.item(jslogContext).track({click: true})}
               >
                 ${title}
-              </${Menus.Menu.MenuItem.litTagName}>
+              </devtools-menu-item>
             `;
           })}
-      </${Menus.SelectMenu.SelectMenu.litTagName}>
+      </devtools-select-menu>
     `;
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});

package/front_end/panels/timeline/components/FieldSettingsDialog.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 '../../../ui/components/data_grid/data_grid.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
+import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -120,7 +122,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/FieldSettingsDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {html, nothing} = LitHtml;
+const {html, nothing, Directives: {ifDefined}} = LitHtml;
 
 export class ShowDialog extends Event {
   static readonly eventName = 'showdialog';
@@ -131,7 +133,6 @@ export class ShowDialog extends Event {
 }
 
 export class FieldSettingsDialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-field-settings-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #dialog?: Dialogs.Dialog.Dialog;
@@ -247,7 +248,7 @@ export class FieldSettingsDialog extends HTMLElement {
     if (this.#configSetting.get().enabled) {
       // clang-format off
       return html`
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           class="config-button"
           @click=${this.#showDialog}
           .data=${{
@@ -255,13 +256,13 @@ export class FieldSettingsDialog extends HTMLElement {
             title: i18nString(UIStrings.configure),
           } as Buttons.Button.ButtonData}
         jslog=${VisualLogging.action('timeline.field-data.configure').track({click: true})}
-        >${i18nString(UIStrings.configure)}</${Buttons.Button.Button.litTagName}>
+        >${i18nString(UIStrings.configure)}</devtools-button>
       `;
       // clang-format on
     }
     // clang-format off
     return html`
-      <${Buttons.Button.Button.litTagName}
+      <devtools-button
         class="setup-button"
         @click=${this.#showDialog}
         .data=${{
@@ -270,7 +271,7 @@ export class FieldSettingsDialog extends HTMLElement {
         } as Buttons.Button.ButtonData}
         jslog=${VisualLogging.action('timeline.field-data.setup').track({click: true})}
         data-field-data-setup
-      >${i18nString(UIStrings.setUp)}</${Buttons.Button.Button.litTagName}>
+      >${i18nString(UIStrings.setUp)}</devtools-button>
     `;
     // clang-format on
   }
@@ -278,7 +279,7 @@ export class FieldSettingsDialog extends HTMLElement {
   #renderEnableButton(): LitHtml.LitTemplate {
     // clang-format off
     return html`
-      <${Buttons.Button.Button.litTagName}
+      <devtools-button
         @click=${() => {
           void this.#submit(true);
         }}
@@ -288,7 +289,7 @@ export class FieldSettingsDialog extends HTMLElement {
         } as Buttons.Button.ButtonData}
         jslog=${VisualLogging.action('timeline.field-data.enable').track({click: true})}
         data-field-data-enable
-      >${i18nString(UIStrings.ok)}</${Buttons.Button.Button.litTagName}>
+      >${i18nString(UIStrings.ok)}</devtools-button>
     `;
     // clang-format on
   }
@@ -297,7 +298,7 @@ export class FieldSettingsDialog extends HTMLElement {
     const label = this.#configSetting.get().enabled ? i18nString(UIStrings.optOut) : i18nString(UIStrings.cancel);
     // clang-format off
     return html`
-      <${Buttons.Button.Button.litTagName}
+      <devtools-button
         @click=${() => {
           void this.#submit(false);
         }}
@@ -307,7 +308,7 @@ export class FieldSettingsDialog extends HTMLElement {
         } as Buttons.Button.ButtonData}
         jslog=${VisualLogging.action('timeline.field-data.disable').track({click: true})}
         data-field-data-disable
-      >${label}</${Buttons.Button.Button.litTagName}>
+      >${label}</devtools-button>
     `;
     // clang-format on
   }
@@ -422,7 +423,7 @@ export class FieldSettingsDialog extends HTMLElement {
             // clang-format off
             renderer: value => html`
               <div style="display: flex; align-items: center; justify-content: center;">
-                <${Buttons.Button.Button.litTagName}
+                <devtools-button
                   class="delete-mapping"
                   .data=${{
                     variant: Buttons.Button.Variant.ICON,
@@ -432,7 +433,7 @@ export class FieldSettingsDialog extends HTMLElement {
                     jslogContext: 'delete-origin-mapping',
                   } as Buttons.Button.ButtonData}
                   @click=${() => this.#deleteOriginMapping(index)}
-                ></${Buttons.Button.Button.litTagName}>
+                ></devtools-button>
               </div>
             `,
             // clang-format on
@@ -458,7 +459,7 @@ export class FieldSettingsDialog extends HTMLElement {
                 aria-label=${
                   i18nString(UIStrings.developmentOriginValue, {PH1: value as string})}
                 style=${inputStyle}
-                title=${value}
+                title=${ifDefined(value as string)}
                 @keyup=${this.#onEditGridDevelopmentOriginChange}
                 @change=${this.#onEditGridDevelopmentOriginChange} />
             `,
@@ -475,7 +476,7 @@ export class FieldSettingsDialog extends HTMLElement {
                 aria-label=${
                   i18nString(UIStrings.productionOriginValue, {PH1: value as string})}
                 style=${inputStyle}
-                title=${value}
+                title=${ifDefined(value as string)}
                 @keyup=${this.#onEditGridProductionOriginChange}
                 @change=${this.#onEditGridProductionOriginChange} />
             `,
@@ -487,7 +488,7 @@ export class FieldSettingsDialog extends HTMLElement {
             // clang-format off
             renderer: value => html`
               <div style="display: flex; align-items: center; justify-content: center;">
-                <${Buttons.Button.Button.litTagName}
+                <devtools-button
                   id="add-mapping-button"
                   .data=${{
                     variant: Buttons.Button.Variant.ICON,
@@ -498,7 +499,7 @@ export class FieldSettingsDialog extends HTMLElement {
                     jslogContext: 'add-origin-mapping',
                   } as Buttons.Button.ButtonData}
                   @click=${() => this.#addOriginMapping()}
-                ></${Buttons.Button.Button.litTagName}>
+                ></devtools-button>
               </div>
             `,
             // clang-format on
@@ -540,15 +541,15 @@ export class FieldSettingsDialog extends HTMLElement {
     // clang-format off
     return html`
       <div>${i18nString(UIStrings.mapDevelopmentOrigins)}</div>
-      <${DataGrid.DataGridController.DataGridController.litTagName}
+      <devtools-data-grid-controller
         class="origin-mapping-grid"
         .data=${gridData as DataGrid.DataGridController.DataGridControllerData}
-      ></${DataGrid.DataGridController.DataGridController.litTagName}>
+      ></devtools-data-grid-controller>
       ${this.#originMapWarning ? html`
         <div class="warning" role="alert" aria-label=${this.#originMapWarning}>${this.#originMapWarning}</div>
       ` : nothing}
       <div class="origin-mapping-button-section">
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           @click=${this.#startEditingOriginMapping}
           .data=${{
             variant: Buttons.Button.Variant.TEXT,
@@ -557,8 +558,8 @@ export class FieldSettingsDialog extends HTMLElement {
             disabled: this.#isEditingOriginGrid,
           } as Buttons.Button.ButtonData}
           jslogContext=${'new-origin-mapping'}
-        >${i18nString(UIStrings.new)}</${Buttons.Button.Button.litTagName}>
-      <div>
+        >${i18nString(UIStrings.new)}</devtools-button>
+      </div>
     `;
     // clang-format on
   }
@@ -571,12 +572,12 @@ export class FieldSettingsDialog extends HTMLElement {
     // clang-format off
     const output = html`
       <div class="open-button-section">${this.#renderOpenButton()}</div>
-      <${Dialogs.Dialog.Dialog.litTagName}
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}
         .position=${Dialogs.Dialog.DialogVerticalPosition.AUTO}
         .horizontalAlignment=${Dialogs.Dialog.DialogHorizontalAlignment.CENTER}
-        .jslogContext=${VisualLogging.dialog('timeline.field-data.settings')}
+        .jslogContext=${'timeline.field-data.settings'}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#dialog = node as Dialogs.Dialog.Dialog;
         })}
@@ -610,21 +611,21 @@ export class FieldSettingsDialog extends HTMLElement {
                 class="devtools-text-input"
                 .disabled=${!this.#urlOverrideEnabled}
                 .value=${this.#urlOverride}
-                placeholder=${this.#urlOverrideEnabled ? i18nString(UIStrings.url) : undefined}
+                placeholder=${ifDefined(this.#urlOverrideEnabled ? i18nString(UIStrings.url) : undefined)}
               />
               ${
                 this.#urlOverrideWarning
                   ? html`<div class="warning" role="alert" aria-label=${this.#urlOverrideWarning}>${this.#urlOverrideWarning}</div>`
                   : nothing
               }
-            <div>
+            </div>
           </details>
           <div class="buttons-section">
             ${this.#renderDisableButton()}
             ${this.#renderEnableButton()}
           </div>
         </div>
-      </${Dialogs.Dialog.Dialog.litTagName}
+      </devtools-dialog>
     `;
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});

package/front_end/panels/timeline/components/InteractionBreakdown.ts

@@ -8,6 +8,8 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import styles from './interactionBreakdown.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text shown next to the interaction event's input delay time in the detail view.
@@ -26,7 +28,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/Interaction
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class InteractionBreakdown extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-interaction-breakdown`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #entry: Trace.Types.Events.SyntheticInteractionPair|null = null;
@@ -51,7 +52,7 @@ export class InteractionBreakdown extends HTMLElement {
     const mainThreadTime = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#entry.mainThreadHandling);
     const presentationDelay = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#entry.presentationDelay);
     LitHtml.render(
-        LitHtml.html`<ul class="breakdown">
+        html`<ul class="breakdown">
                      <li data-entry="input-delay">${i18nString(UIStrings.inputDelay)}<span class="value">${
             inputDelay}</span></li>
                      <li data-entry="processing-duration">${

package/front_end/panels/timeline/components/LayoutShiftDetails.test.ts

@@ -18,10 +18,6 @@ describeWithMockConnection('LayoutShiftDetails', () => {
     details.setData(shiftEvent, insights, parsedTrace, false);
 
     assert.isNotNull(details.shadowRoot);
-    const decorativeChip = details.shadowRoot.querySelector('.insight-chip');
-    assert.isNotNull(decorativeChip);
-
-    assert.include(decorativeChip?.textContent, 'Layout shift culprits');
     const eventTitle = details.shadowRoot.querySelector('.layout-shift-details-title');
     assert.include(eventTitle?.textContent, 'Layout shift');
 
@@ -46,15 +42,21 @@ describeWithMockConnection('LayoutShiftDetails', () => {
     details.setData(cluster, insights, parsedTrace, false);
 
     assert.isNotNull(details.shadowRoot);
-    const decorativeChip = details.shadowRoot.querySelector('.insight-chip');
-    assert.isNotNull(decorativeChip);
-
-    assert.include(decorativeChip?.textContent, 'Layout shift culprits');
     const eventTitle = details.shadowRoot.querySelector('.layout-shift-details-title');
     assert.include(eventTitle?.textContent, 'Layout shift cluster');
 
-    const clusterDetails = details.shadowRoot.querySelector('.cluster-details');
-    assert.include(clusterDetails?.textContent, 'Duration');
-    assert.include(clusterDetails?.textContent, 'Start time');
+    const table = details.shadowRoot.querySelector('.layout-shift-details-table');
+    const tableHeaders = ['Start time', 'Shift score'];
+    const content = table?.textContent;
+    for (const header of tableHeaders) {
+      assert.include(content, header);
+    }
+
+    // Shift row should be "layout shift @".
+    const shiftRow = details.shadowRoot.querySelector('.shift-row');
+    assert.include(shiftRow?.textContent, 'Layout shift @ ');
+
+    const lastRow = details.shadowRoot.querySelector('.total-row');
+    assert.include(lastRow?.textContent, 'Total');
   });
 });