chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -59,7 +59,7 @@ import {Tracker} from './FreshRecording.js';
 import {ModificationsManager} from './ModificationsManager.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {TimelinePanel} from './TimelinePanel.js';
-import {TimelineSelection} from './TimelineSelection.js';
+import {selectionFromEvent} from './TimelineSelection.js';
 import * as Utils from './utils/utils.js';
 
 const UIStrings = {
@@ -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
@@ -522,6 +549,14 @@ const UIStrings = {
    * @description Label for a description text of a metric.
    */
   description: 'Description',
+  /**
+   * @description Label for a numeric value that was how long to wait before a function was run.
+   */
+  delay: 'Delay',
+  /**
+   * @description Label for a string that describes the priority at which a task was scheduled, like 'background' for low-priority tasks, and 'user-blocking' for high priority.
+   */
+  priority: 'Priority',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -604,26 +639,24 @@ export class TimelineUIUtils {
     }
   }
 
-  static eventStyle(event: Trace.Types.Events.Event): TimelineComponents.EntryStyles.TimelineRecordStyle {
+  static eventStyle(event: Trace.Types.Events.Event): Utils.EntryStyles.TimelineRecordStyle {
     if (Trace.Types.Events.isProfileCall(event) && event.callFrame.functionName === '(idle)') {
-      return new TimelineComponents.EntryStyles.TimelineRecordStyle(
-          event.name, TimelineComponents.EntryStyles.getCategoryStyles().idle);
+      return new Utils.EntryStyles.TimelineRecordStyle(event.name, Utils.EntryStyles.getCategoryStyles().idle);
     }
 
     if (event.cat === Trace.Types.Events.Categories.Console || event.cat === Trace.Types.Events.Categories.UserTiming) {
-      return new TimelineComponents.EntryStyles.TimelineRecordStyle(
-          event.name, TimelineComponents.EntryStyles.getCategoryStyles()['scripting']);
+      return new Utils.EntryStyles.TimelineRecordStyle(event.name, Utils.EntryStyles.getCategoryStyles()['scripting']);
     }
 
-    return TimelineComponents.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name) ??
-        new TimelineComponents.EntryStyles.TimelineRecordStyle(
-            event.name, TimelineComponents.EntryStyles.getCategoryStyles().other);
+    return Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name) ??
+        new Utils.EntryStyles.TimelineRecordStyle(event.name, Utils.EntryStyles.getCategoryStyles().other);
   }
 
   static eventColor(event: Trace.Types.Events.Event): string {
     if (Trace.Types.Events.isProfileCall(event)) {
       const frame = event.callFrame;
       if (TimelineUIUtils.isUserFrame(frame)) {
+        // TODO(andoli): This should use the resolved (sourcemapped) URL
         return TimelineUIUtils.colorForId(frame.url);
       }
     }
@@ -634,7 +667,7 @@ export class TimelineUIUtils {
     // This event is considered idle time but still rendered as a scripting event here
     // to connect the StreamingCompileScriptParsing events it belongs to.
     if (event.name === Trace.Types.Events.Name.STREAMING_COMPILE_SCRIPT_WAITING) {
-      parsedColor = TimelineComponents.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
+      parsedColor = Utils.EntryStyles.getCategoryStyles().scripting.getComputedColorValue();
       if (!parsedColor) {
         throw new Error('Unable to parse color from getCategoryStyles().scripting.color');
       }
@@ -653,7 +686,7 @@ export class TimelineUIUtils {
     }
     if (event.name === 'EventTiming' && Trace.Types.Events.isSyntheticInteraction(event)) {
       // TODO(crbug.com/365047728): replace this entire method with this call.
-      return TimelineComponents.EntryName.nameForEntry(event);
+      return Utils.EntryName.nameForEntry(event);
     }
     const title = TimelineUIUtils.eventStyle(event).title;
     if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console)) {
@@ -1235,6 +1268,14 @@ export class TimelineUIUtils {
         break;
       }
 
+      case Trace.Types.Events.Name.SCHEDULE_POST_TASK_CALLBACK:
+      case Trace.Types.Events.Name.RUN_POST_TASK_CALLBACK: {
+        contentHelper.appendTextRow(
+            i18nString(UIStrings.delay), i18n.TimeUtilities.millisToString(unsafeEventData['delay']));
+        contentHelper.appendTextRow(i18nString(UIStrings.priority), unsafeEventData['priority']);
+        break;
+      }
+
       case Trace.Types.Events.Name.FIRE_ANIMATION_FRAME: {
         contentHelper.appendTextRow(i18nString(UIStrings.callbackId), unsafeEventData['id']);
         break;
@@ -1419,35 +1460,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 +1634,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(
@@ -1730,9 +1818,8 @@ export class TimelineUIUtils {
 
       function onStartEvent(e: Trace.Types.Events.Event): void {
         const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(e);
-        const category =
-            TimelineComponents.EntryStyles.getEventStyle(e.name as Trace.Types.Events.Name)?.category.name ||
-            TimelineComponents.EntryStyles.getCategoryStyles().other.name;
+        const category = Utils.EntryStyles.getEventStyle(e.name as Trace.Types.Events.Name)?.category.name ||
+            Utils.EntryStyles.getCategoryStyles().other.name;
         const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null;
         if (category !== parentCategory) {
           categoryChange(parentCategory || null, category, startTime);
@@ -1886,16 +1973,16 @@ 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', () => {
-        TimelinePanel.instance().select(TimelineSelection.fromTraceEvent((entry)));
+        TimelinePanel.instance().select(selectionFromEvent(entry));
       });
 
       link.addEventListener('keydown', event => {
         if (event.key === 'Enter') {
-          TimelinePanel.instance().select(TimelineSelection.fromTraceEvent((entry)));
+          TimelinePanel.instance().select(selectionFromEvent(entry));
           event.consume(true);
         }
       });
@@ -2085,11 +2172,10 @@ export class TimelineUIUtils {
     paintProfilerButton.textContent = i18nString(UIStrings.paintProfiler);
     UI.ARIAUtils.markAsLink(container);
     container.tabIndex = 0;
-    container.addEventListener(
-        'click', () => TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(event)), false);
+    container.addEventListener('click', () => TimelinePanel.instance().select(selectionFromEvent(event)), false);
     container.addEventListener('keydown', keyEvent => {
       if (keyEvent.key === 'Enter') {
-        TimelinePanel.instance().select(TimelineSelection.fromTraceEvent(event));
+        TimelinePanel.instance().select(selectionFromEvent(event));
         keyEvent.consume(true);
       }
     });
@@ -2112,21 +2198,20 @@ export class TimelineUIUtils {
   }
 
   static visibleEventsFilter(): TimelineModel.TimelineModelFilter.TimelineModelFilter {
-    return new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(
-        TimelineComponents.EntryStyles.visibleTypes());
+    return new TimelineModel.TimelineModelFilter.TimelineVisibleEventsFilter(Utils.EntryStyles.visibleTypes());
   }
 
   // Included only for layout tests.
   // TODO(crbug.com/1386091): Fix/port layout tests and remove.
-  static categories(): TimelineComponents.EntryStyles.CategoryPalette {
-    return TimelineComponents.EntryStyles.getCategoryStyles();
+  static categories(): Utils.EntryStyles.CategoryPalette {
+    return Utils.EntryStyles.getCategoryStyles();
   }
 
   static generatePieChart(
       aggregatedStats: {
         [x: string]: number,
       },
-      selfCategory?: TimelineComponents.EntryStyles.TimelineCategory, selfTime?: number): Element {
+      selfCategory?: Utils.EntryStyles.TimelineCategory, selfTime?: number): Element {
     let total = 0;
     for (const categoryName in aggregatedStats) {
       total += aggregatedStats[categoryName];
@@ -2168,9 +2253,8 @@ export class TimelineUIUtils {
     }
 
     // Add other categories.
-    for (const categoryName in TimelineComponents.EntryStyles.getCategoryStyles()) {
-      const category = TimelineComponents.EntryStyles
-                           .getCategoryStyles()[categoryName as keyof TimelineComponents.EntryStyles.CategoryPalette];
+    for (const categoryName in Utils.EntryStyles.getCategoryStyles()) {
+      const category = Utils.EntryStyles.getCategoryStyles()[categoryName as keyof Utils.EntryStyles.CategoryPalette];
       if (categoryName === selfCategory?.name) {
         // Do not add an entry for this event's self category because 2
         // entries for it where added just before this for loop (for
@@ -2205,6 +2289,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/UIDevtoolsController.ts

@@ -30,16 +30,16 @@
 
 import type * as SDK from '../../core/sdk/sdk.js';
 
-import * as Components from './components/components.js';
 import {type Client, TimelineController} from './TimelineController.js';
 import {UIDevtoolsUtils} from './UIDevtoolsUtils.js';
+import * as Utils from './utils/utils.js';
 
 export class UIDevtoolsController extends TimelineController {
   constructor(rootTarget: SDK.Target.Target, primaryPageTarget: SDK.Target.Target, client: Client) {
     super(rootTarget, primaryPageTarget, client);
-    Components.EntryStyles.setEventStylesMap(UIDevtoolsUtils.categorizeEvents());
-    Components.EntryStyles.setCategories(UIDevtoolsUtils.categories());
-    Components.EntryStyles.setTimelineMainEventCategories(
-        UIDevtoolsUtils.getMainCategoriesList().filter(Components.EntryStyles.stringIsEventCategory));
+    Utils.EntryStyles.setEventStylesMap(UIDevtoolsUtils.categorizeEvents());
+    Utils.EntryStyles.setCategories(UIDevtoolsUtils.categories());
+    Utils.EntryStyles.setTimelineMainEventCategories(
+        UIDevtoolsUtils.getMainCategoriesList().filter(Utils.EntryStyles.stringIsEventCategory));
   }
 }

package/front_end/panels/timeline/UIDevtoolsUtils.ts

@@ -31,7 +31,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 
-import * as Components from './components/components.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -99,9 +99,9 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/UIDevtoolsUtils.ts', U
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let eventStylesMap: {
-  [x: string]: Components.EntryStyles.TimelineRecordStyle,
+  [x: string]: Utils.EntryStyles.TimelineRecordStyle,
 }|null = null;
-let categories: Components.EntryStyles.CategoryPalette|null = null;
+let categories: Utils.EntryStyles.CategoryPalette|null = null;
 
 export class UIDevtoolsUtils {
   static isUiDevTools(): boolean {
@@ -109,7 +109,7 @@ export class UIDevtoolsUtils {
   }
 
   static categorizeEvents(): {
-    [x: string]: Components.EntryStyles.TimelineRecordStyle,
+    [x: string]: Utils.EntryStyles.TimelineRecordStyle,
   } {
     if (eventStylesMap) {
       return eventStylesMap;
@@ -124,93 +124,84 @@ export class UIDevtoolsUtils {
     const other = categories['other'];
 
     const eventStyles: {
-      [x: string]: Components.EntryStyles.TimelineRecordStyle,
+      [x: string]: Utils.EntryStyles.TimelineRecordStyle,
     } = {};
 
+    const {TimelineRecordStyle} = Utils.EntryStyles;
+
     // Paint Categories
-    eventStyles[type.ViewPaint] = new Components.EntryStyles.TimelineRecordStyle('View::Paint', painting);
-    eventStyles[type.ViewOnPaint] = new Components.EntryStyles.TimelineRecordStyle('View::OnPaint', painting);
-    eventStyles[type.ViewPaintChildren] =
-        new Components.EntryStyles.TimelineRecordStyle('View::PaintChildren', painting);
-    eventStyles[type.ViewOnPaintBackground] =
-        new Components.EntryStyles.TimelineRecordStyle('View::OnPaintBackground', painting);
-    eventStyles[type.ViewOnPaintBorder] =
-        new Components.EntryStyles.TimelineRecordStyle('View::OnPaintBorder', painting);
+    eventStyles[type.ViewPaint] = new TimelineRecordStyle('View::Paint', painting);
+    eventStyles[type.ViewOnPaint] = new TimelineRecordStyle('View::OnPaint', painting);
+    eventStyles[type.ViewPaintChildren] = new TimelineRecordStyle('View::PaintChildren', painting);
+    eventStyles[type.ViewOnPaintBackground] = new TimelineRecordStyle('View::OnPaintBackground', painting);
+    eventStyles[type.ViewOnPaintBorder] = new TimelineRecordStyle('View::OnPaintBorder', painting);
     eventStyles[type.LayerPaintContentsToDisplayList] =
-        new Components.EntryStyles.TimelineRecordStyle('Layer::PaintContentsToDisplayList', painting);
+        new TimelineRecordStyle('Layer::PaintContentsToDisplayList', painting);
 
     // Layout Categories
-    eventStyles[type.ViewLayout] = new Components.EntryStyles.TimelineRecordStyle('View::Layout', layout);
-    eventStyles[type.ViewLayoutBoundsChanged] =
-        new Components.EntryStyles.TimelineRecordStyle('View::Layout(bounds_changed)', layout);
+    eventStyles[type.ViewLayout] = new TimelineRecordStyle('View::Layout', layout);
+    eventStyles[type.ViewLayoutBoundsChanged] = new TimelineRecordStyle('View::Layout(bounds_changed)', layout);
 
     // Raster Categories
-    eventStyles[type.RasterTask] = new Components.EntryStyles.TimelineRecordStyle('RasterTask', rasterizing);
+    eventStyles[type.RasterTask] = new TimelineRecordStyle('RasterTask', rasterizing);
     eventStyles[type.RasterizerTaskImplRunOnWorkerThread] =
-        new Components.EntryStyles.TimelineRecordStyle('RasterizerTaskImpl::RunOnWorkerThread', rasterizing);
+        new TimelineRecordStyle('RasterizerTaskImpl::RunOnWorkerThread', rasterizing);
 
     // Draw Categories
-    eventStyles[type.DirectRendererDrawFrame] =
-        new Components.EntryStyles.TimelineRecordStyle('DirectRenderer::DrawFrame', drawing);
-    eventStyles[type.BeginFrame] =
-        new Components.EntryStyles.TimelineRecordStyle(i18nString(UIStrings.frameStart), drawing, true);
-    eventStyles[type.DrawFrame] =
-        new Components.EntryStyles.TimelineRecordStyle(i18nString(UIStrings.drawFrame), drawing, true);
-    eventStyles[type.NeedsBeginFrameChanged] =
-        new Components.EntryStyles.TimelineRecordStyle('NeedsBeginFrameChanged', drawing, true);
+    eventStyles[type.DirectRendererDrawFrame] = new TimelineRecordStyle('DirectRenderer::DrawFrame', drawing);
+    eventStyles[type.BeginFrame] = new TimelineRecordStyle(i18nString(UIStrings.frameStart), drawing, true);
+    eventStyles[type.DrawFrame] = new TimelineRecordStyle(i18nString(UIStrings.drawFrame), drawing, true);
+    eventStyles[type.NeedsBeginFrameChanged] = new TimelineRecordStyle('NeedsBeginFrameChanged', drawing, true);
 
     // Other Categories
-    eventStyles[type.ThreadControllerImplRunTask] =
-        new Components.EntryStyles.TimelineRecordStyle('ThreadControllerImpl::RunTask', other);
+    eventStyles[type.ThreadControllerImplRunTask] = new TimelineRecordStyle('ThreadControllerImpl::RunTask', other);
 
     eventStylesMap = eventStyles;
     return eventStyles;
   }
 
-  static categories(): Components.EntryStyles.CategoryPalette {
+  static categories(): Utils.EntryStyles.CategoryPalette {
     if (categories) {
       return categories;
     }
+    const {TimelineCategory, EventCategory} = Utils.EntryStyles;
     categories = {
-      layout: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.LAYOUT, i18nString(UIStrings.layout), true,
-          '--app-color-loading-children', '--app-color-loading'),
-      rasterizing: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.RASTERIZING, i18nString(UIStrings.rasterizing), true,
-          '--app-color-children', '--app-color-scripting'),
-      drawing: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.DRAWING, i18nString(UIStrings.drawing), true,
-          '--app-color-rendering-children', '--app-color-rendering'),
-      painting: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.PAINTING, i18nString(UIStrings.painting), true,
-          '--app-color-painting-children', '--app-color-painting'),
-      other: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.OTHER, i18nString(UIStrings.system), false,
-          '--app-color-system-children', '--app-color-system'),
-      idle: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.IDLE, i18nString(UIStrings.idle), false, '--app-color-idle-children',
-          '--app-color-idle'),
-      loading: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.LOADING, i18nString(UIStrings.loading), false,
-          '--app-color-loading-children', '--app-color-loading'),
-      experience: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.EXPERIENCE, i18nString(UIStrings.experience), false,
-          '--app-color-rendering-children', '--pp-color-rendering'),
-      messaging: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.MESSAGING, i18nString(UIStrings.messaging), false,
-          '--app-color-messaging-children', '--pp-color-messaging'),
-      scripting: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.SCRIPTING, i18nString(UIStrings.scripting), false,
-          '--app-color-scripting-children', '--pp-color-scripting'),
-      rendering: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.RENDERING, i18nString(UIStrings.rendering), false,
-          '--app-color-rendering-children', '--pp-color-rendering'),
-      gpu: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.GPU, i18nString(UIStrings.gpu), false, '--app-color-painting-children',
+      layout: new TimelineCategory(
+          EventCategory.LAYOUT, i18nString(UIStrings.layout), true, '--app-color-loading-children',
+          '--app-color-loading'),
+      rasterizing: new TimelineCategory(
+          EventCategory.RASTERIZING, i18nString(UIStrings.rasterizing), true, '--app-color-children',
+          '--app-color-scripting'),
+      drawing: new TimelineCategory(
+          EventCategory.DRAWING, i18nString(UIStrings.drawing), true, '--app-color-rendering-children',
+          '--app-color-rendering'),
+      painting: new TimelineCategory(
+          EventCategory.PAINTING, i18nString(UIStrings.painting), true, '--app-color-painting-children',
           '--app-color-painting'),
-      async: new Components.EntryStyles.TimelineCategory(
-          Components.EntryStyles.EventCategory.ASYNC, i18nString(UIStrings.async), false, '--app-color-async-children',
-          '--app-color-async'),
+      other: new TimelineCategory(
+          EventCategory.OTHER, i18nString(UIStrings.system), false, '--app-color-system-children',
+          '--app-color-system'),
+      idle: new TimelineCategory(
+          EventCategory.IDLE, i18nString(UIStrings.idle), false, '--app-color-idle-children', '--app-color-idle'),
+      loading: new TimelineCategory(
+          EventCategory.LOADING, i18nString(UIStrings.loading), false, '--app-color-loading-children',
+          '--app-color-loading'),
+      experience: new TimelineCategory(
+          EventCategory.EXPERIENCE, i18nString(UIStrings.experience), false, '--app-color-rendering-children',
+          '--pp-color-rendering'),
+      messaging: new TimelineCategory(
+          EventCategory.MESSAGING, i18nString(UIStrings.messaging), false, '--app-color-messaging-children',
+          '--pp-color-messaging'),
+      scripting: new TimelineCategory(
+          EventCategory.SCRIPTING, i18nString(UIStrings.scripting), false, '--app-color-scripting-children',
+          '--pp-color-scripting'),
+      rendering: new TimelineCategory(
+          EventCategory.RENDERING, i18nString(UIStrings.rendering), false, '--app-color-rendering-children',
+          '--pp-color-rendering'),
+      gpu: new TimelineCategory(
+          EventCategory.GPU, i18nString(UIStrings.gpu), false, '--app-color-painting-children', '--app-color-painting'),
+      async: new TimelineCategory(
+          EventCategory.ASYNC, i18nString(UIStrings.async), false, '--app-color-async-children', '--app-color-async'),
     };
     return categories;
   }

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

@@ -5,7 +5,6 @@
 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 * 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 +50,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,15 +122,15 @@ 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',
               height: '16px',
-            } as IconButton.Icon.IconData}>`
+            }}>`
             : ''}
       `;
-    // clang-format on
+              // clang-format on
   }
 
   #render(): void {