chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -419,24 +419,51 @@ const UIStrings = {
    *@description Label in front of reasons why a CSS animation wasn't composited (aka hardware accelerated)
    */
   compositingFailed: 'Compositing failed',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to accelerated animations being disabled. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedAcceleratedAnimationsDisabled: 'Accelerated animations disabled',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to DevTools suppressing the effect. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedEffectSuppressedByDevtools: 'Effect suppressed by DevTools ',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation or effect being invalid. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedInvalidAnimationOrEffect: 'Invalid animation or effect',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having unsupported timing parameters. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedEffectHasUnsupportedTimingParams: 'Effect has unsupported timing parameters',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having a composite mode which is not `replace`. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedEffectHasNonReplaceCompositeMode: 'Effect has composite mode other than "replace"',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the target being in an invalid compositing state. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedTargetHasInvalidCompositingState: 'Target has invalid compositing state',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to another animation on the same target being incompatible. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedTargetHasIncompatibleAnimations: 'Target has another animation which is incompatible',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the target having a CSS offset. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedTargetHasCSSOffset: 'Target has CSS offset',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation affecting non-CSS properties. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedAnimationAffectsNonCSSProperties: 'Animation affects non-CSS properties',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the transform-related property not being able to be animated on the target. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedTransformRelatedPropertyCannotBeAcceleratedOnTarget:
+      'Transform-related property cannot be accelerated on target',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `transform` property being dependent on the size of the element itself. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedTransformDependsBoxSize: 'Transform-related property depends on box size',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `filter` property possibly moving pixels. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedFilterRelatedPropertyMayMovePixels: 'Filter-related property may move pixels',
   /**
    * @description [ICU Syntax] Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animated CSS property not being supported on the compositor. Shown in a table with a list of other potential failure reasons.
    * @example {height, width} properties
    */
-  unsupportedCSSProperty: `{propertyCount, plural,
+  compositingFailedUnsupportedCSSProperty: `{propertyCount, plural,
     =1 {Unsupported CSS property: {properties}}
     other {Unsupported CSS properties: {properties}}
   }`,
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `transform` property being dependent on the size of the element itself. Shown in a table with a list of other potential failure reasons.  */
-  transformDependsBoxSize: 'Transform-related property depends on box size',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `filter` property possibly moving pixels. Shown in a table with a list of other potential failure reasons.  */
-  filterMayMovePixels: 'Filter-related property may move pixels',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having a composite mode which is not `replace`. Shown in a table with a list of other potential failure reasons.  */
-  nonReplaceCompositeMode: 'Effect has composite mode other than "replace"',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to another animation on the same target being incompatible. Shown in a table with a list of other potential failure reasons.  */
-  incompatibleAnimations: 'Target has another animation which is incompatible',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having unsupported timing parameters. Shown in a table with a list of other potential failure reasons.  */
-  unsupportedTimingParameters: 'Effect has unsupported timing parameters',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to mixing keyframe value types. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedMixedKeyframeValueTypes: 'Mixed keyframe value types',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the timeline source being in an invalid compositing state. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedTimelineSourceHasInvalidCompositingState: 'Timeline source has invalid compositing state',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation having no visible change. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedAnimationHasNoVisibleChange: 'Animation has no visible change',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect affecting an important property. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedAffectsImportantProperty: 'Effect affects a property with !important',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the SVG target having an independent transfrom property. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedSVGTargetHasIndependentTransformProperty: 'SVG target has independent transform property',
+  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an unknown reason. Shown in a table with a list of other potential failure reasons.  */
+  compositingFailedUnknownReason: 'Unknown Reason',
 
   /**
    *@description Text for the execution stack trace
@@ -1419,35 +1446,81 @@ export class TimelineUIUtils {
         const unsupportedProperties =
             new Set(failures.map(f => f.unsupportedProperties).flat().filter(Boolean)) as Set<string>;
 
-        for (const reason of failureReasons) {
-          let str;
-          switch (reason) {
-            case CLSInsight.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY:
-              str = i18nString(UIStrings.unsupportedCSSProperty, {
-                propertyCount: unsupportedProperties.size,
-                properties:
-                    new Intl.ListFormat(undefined, {style: 'short', type: 'conjunction'}).format(unsupportedProperties),
-              });
-              break;
-            case CLSInsight.AnimationFailureReasons.TRANSFROM_BOX_SIZE_DEPENDENT:
-              str = i18nString(UIStrings.transformDependsBoxSize);
-              break;
-            case CLSInsight.AnimationFailureReasons.FILTER_MAY_MOVE_PIXELS:
-              str = i18nString(UIStrings.filterMayMovePixels);
-              break;
-            case CLSInsight.AnimationFailureReasons.NON_REPLACE_COMPOSITE_MODE:
-              str = i18nString(UIStrings.nonReplaceCompositeMode);
-              break;
-            case CLSInsight.AnimationFailureReasons.INCOMPATIBLE_ANIMATIONS:
-              str = i18nString(UIStrings.incompatibleAnimations);
-              break;
-            case CLSInsight.AnimationFailureReasons.UNSUPPORTED_TIMING_PARAMS:
-              str = i18nString(UIStrings.unsupportedTimingParameters);
-              break;
-            default:
-              break;
+        // The failureReasons can be empty when Blink added a new failure reason that is
+        // not supported by DevTools yet
+        if (failureReasons.size === 0) {
+          contentHelper.appendElementRow(
+              i18nString(UIStrings.compositingFailed), i18nString(UIStrings.compositingFailedUnknownReason), true);
+        } else {
+          for (const reason of failureReasons) {
+            let str;
+            switch (reason) {
+              case CLSInsight.AnimationFailureReasons.ACCELERATED_ANIMATIONS_DISABLED:
+                str = i18nString(UIStrings.compositingFailedAcceleratedAnimationsDisabled);
+                break;
+              case CLSInsight.AnimationFailureReasons.EFFECT_SUPPRESSED_BY_DEVTOOLS:
+                str = i18nString(UIStrings.compositingFailedEffectSuppressedByDevtools);
+                break;
+              case CLSInsight.AnimationFailureReasons.INVALID_ANIMATION_OR_EFFECT:
+                str = i18nString(UIStrings.compositingFailedInvalidAnimationOrEffect);
+                break;
+              case CLSInsight.AnimationFailureReasons.EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS:
+                str = i18nString(UIStrings.compositingFailedEffectHasUnsupportedTimingParams);
+                break;
+              case CLSInsight.AnimationFailureReasons.EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE:
+                str = i18nString(UIStrings.compositingFailedEffectHasNonReplaceCompositeMode);
+                break;
+              case CLSInsight.AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE:
+                str = i18nString(UIStrings.compositingFailedTargetHasInvalidCompositingState);
+                break;
+              case CLSInsight.AnimationFailureReasons.TARGET_HAS_INCOMPATIBLE_ANIMATIONS:
+                str = i18nString(UIStrings.compositingFailedTargetHasIncompatibleAnimations);
+                break;
+              case CLSInsight.AnimationFailureReasons.TARGET_HAS_CSS_OFFSET:
+                str = i18nString(UIStrings.compositingFailedTargetHasCSSOffset);
+                break;
+              case CLSInsight.AnimationFailureReasons.ANIMATION_AFFECTS_NON_CSS_PROPERTIES:
+                str = i18nString(UIStrings.compositingFailedAnimationAffectsNonCSSProperties);
+                break;
+              case CLSInsight.AnimationFailureReasons.TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET:
+                str = i18nString(UIStrings.compositingFailedTransformRelatedPropertyCannotBeAcceleratedOnTarget);
+                break;
+              case CLSInsight.AnimationFailureReasons.TRANSFROM_BOX_SIZE_DEPENDENT:
+                str = i18nString(UIStrings.compositingFailedTransformDependsBoxSize);
+                break;
+              case CLSInsight.AnimationFailureReasons.FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS:
+                str = i18nString(UIStrings.compositingFailedFilterRelatedPropertyMayMovePixels);
+                break;
+              case CLSInsight.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY:
+                str = i18nString(UIStrings.compositingFailedUnsupportedCSSProperty, {
+                  propertyCount: unsupportedProperties.size,
+                  properties: new Intl.ListFormat(undefined, {style: 'short', type: 'conjunction'})
+                                  .format(unsupportedProperties),
+                });
+                break;
+              case CLSInsight.AnimationFailureReasons.MIXED_KEYFRAME_VALUE_TYPES:
+                str = i18nString(UIStrings.compositingFailedMixedKeyframeValueTypes);
+                break;
+              case CLSInsight.AnimationFailureReasons.TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE:
+                str = i18nString(UIStrings.compositingFailedTimelineSourceHasInvalidCompositingState);
+                break;
+              case CLSInsight.AnimationFailureReasons.ANIMATION_HAS_NO_VISIBLE_CHANGE:
+                str = i18nString(UIStrings.compositingFailedAnimationHasNoVisibleChange);
+                break;
+              case CLSInsight.AnimationFailureReasons.AFFECTS_IMPORTANT_PROPERTY:
+                str = i18nString(UIStrings.compositingFailedAffectsImportantProperty);
+                break;
+              case CLSInsight.AnimationFailureReasons.SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY:
+                str = i18nString(UIStrings.compositingFailedSVGTargetHasIndependentTransformProperty);
+                break;
+              default:
+                // We should never actually end up here, as adding a new AnimationFailureReason
+                // should also require adding a UIString that describes it
+                str = i18nString(UIStrings.compositingFailedUnknownReason);
+                break;
+            }
+            str && contentHelper.appendElementRow(i18nString(UIStrings.compositingFailed), str, true);
           }
-          str && contentHelper.appendElementRow(i18nString(UIStrings.compositingFailed), str, true);
         }
 
         break;
@@ -1547,7 +1620,8 @@ export class TimelineUIUtils {
         if (!layoutShiftEventData) {
           break;
         }
-        contentHelper.appendTextRow(i18nString(UIStrings.score), layoutShiftEventData['score'].toPrecision(4));
+        contentHelper.appendTextRow(
+            i18nString(UIStrings.score), layoutShiftEventData.weighted_score_delta.toPrecision(4));
         contentHelper.appendTextRow(
             i18nString(UIStrings.cumulativeScore), layoutShiftEventData['cumulative_score'].toPrecision(4));
         contentHelper.appendTextRow(
@@ -1886,7 +1960,7 @@ export class TimelineUIUtils {
     const isEntryHidden = ModificationsManager.activeManager()?.getEntriesFilter().entryIsInvisible(entry);
 
     if (!isEntryOutsideBreadcrumb) {
-      link.classList.add('devtools-link');
+      link.classList.add('timeline-link');
       UI.ARIAUtils.markAsLink(link);
       link.tabIndex = 0;
       link.addEventListener('click', () => {
@@ -2205,6 +2279,7 @@ export class TimelineUIUtils {
     if (filmStrip && filmStripFrame) {
       const filmStripPreview = document.createElement('div');
       filmStripPreview.classList.add('timeline-filmstrip-preview');
+      // TODO(paulirish): Adopt Util.ImageCache
       void UI.UIUtils.loadImage(filmStripFrame.screenshotEvent.args.dataUri)
           .then(image => image && filmStripPreview.appendChild(image));
       contentHelper.appendElementRow('', filmStripPreview);

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -16,7 +16,7 @@ import {
 import {ExtensionDataGatherer} from './ExtensionDataGatherer.js';
 import * as Extensions from './extensions/extensions.js';
 import {TimelineFlameChartMarker} from './TimelineFlameChartView.js';
-import {type TimelineMarkerStyle} from './TimelineUIUtils.js';
+import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**

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

@@ -5,7 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Trace from '../../../models/trace/trace.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 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';
@@ -51,7 +51,6 @@ export class BreadcrumbActivatedEvent extends Event {
 }
 
 export class BreadcrumbsUI extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-breadcrumbs-ui`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #initialBreadcrumb: Trace.Types.File.Breadcrumb|null = null;
@@ -124,7 +123,7 @@ export class BreadcrumbsUI extends HTMLElement {
           </div>
           ${breadcrumb.child !== null ?
             html`
-            <${IconButton.Icon.Icon.litTagName} .data=${{
+            <devtools-icon .data=${{
               iconName: 'chevron-right',
               color: 'var(--icon-default)',
               width: '16px',

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');
   });
 });