chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -20,7 +20,7 @@ import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   timings: 'Timings',
 } as const;
@@ -65,7 +65,7 @@ export class TimingsTrackAppender implements TrackAppender {
    * timings track.
    * @param trackStartLevel the horizontal level of the flame chart events where
    * the track's events will start being appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    * @returns the first available level to append more data after having
    * appended the track's events.
    */
@@ -115,8 +115,7 @@ export class TimingsTrackAppender implements TrackAppender {
    * extension markers (the first available level to append more data).
    */
   #appendExtensionsAtLevel(currentLevel: number): number {
-    let markers: Trace.Types.Extensions.SyntheticExtensionMarker[] = [];
-    markers = markers.concat(this.#extensionMarkers).sort((m1, m2) => m1.ts - m2.ts);
+    const markers = this.#extensionMarkers.toSorted((m1, m2) => m1.ts - m2.ts);
     if (markers.length === 0) {
       return currentLevel;
     }
@@ -256,12 +255,18 @@ export class TimingsTrackAppender implements TrackAppender {
   }
 
   setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
-    // If an event is a marker event, rather than show a duration of 0, we can instead show the time that the event happened, which is much more useful. We do this currently for:
+    // If an event is a marker event, rather than show a duration of 0, we can
+    // instead show the time that the event happened, which is much more
+    // useful. We do this currently for:
     // Page load events: DCL, FCP and LCP
-    // performance.mark() events
+    // performance.mark() events (including extensibility events)
     // console.timestamp() events
+
+    const isExtensibilityMarker = Trace.Types.Extensions.isSyntheticExtensionEntry(event) &&
+        Trace.Types.Extensions.isExtensionPayloadMarker(event.args);
+
     if (Trace.Types.Events.isMarkerEvent(event) || Trace.Types.Events.isPerformanceMark(event) ||
-        Trace.Types.Events.isConsoleTimeStamp(event)) {
+        Trace.Types.Events.isConsoleTimeStamp(event) || isExtensibilityMarker) {
       const timeOfEvent = Trace.Helpers.Timing.timeStampForEventAdjustedByClosestNavigation(
           event,
           this.#parsedTrace.Meta.traceBounds,

package/front_end/panels/timeline/TrackConfigBanner.test.ts

@@ -0,0 +1,68 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Trace from '../../models/trace/trace.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as Timeline from './timeline.js';
+
+const {createHiddenTracksOverlay} = Timeline.TrackConfigBanner;
+
+function fakeTrace(): Trace.Handlers.Types.ParsedTrace {
+  // We don't need a real trace here; it is used as the cache key.
+  // So to keep the tests lightweight, let's just fake it
+  return {} as Trace.Handlers.Types.ParsedTrace;
+}
+const NO_OP_CALLBACKS = {
+  onShowAllTracks: () => {},
+  onShowTrackConfigurationMode: () => {},
+  onClose: () => {},
+};
+
+function overlayIsBottomBar(overlay: Trace.Types.Overlays.Overlay|null): overlay is Trace.Types.Overlays.BottomInfoBar {
+  return overlay?.type === 'BOTTOM_INFO_BAR' && overlay?.infobar instanceof UI.Infobar.Infobar;
+}
+
+describeWithEnvironment('TrackConfigBanner', () => {
+  it('creates the overlay if the user has not seen it for this trace', async () => {
+    const trace = fakeTrace();
+    const maybeOverlay = createHiddenTracksOverlay(trace, NO_OP_CALLBACKS);
+    assert.isOk(overlayIsBottomBar(maybeOverlay));
+  });
+
+  it('re-uses the same infobar for the same trace', async () => {
+    const trace = fakeTrace();
+    const overlay1 = createHiddenTracksOverlay(trace, NO_OP_CALLBACKS);
+    assert.isOk(overlayIsBottomBar(overlay1));
+
+    const overlay2 = createHiddenTracksOverlay(trace, NO_OP_CALLBACKS);
+    assert.isOk(overlayIsBottomBar(overlay2));
+    assert.strictEqual(overlay1.infobar, overlay2.infobar);
+  });
+
+  it('creates new infobars for each trace', async () => {
+    const trace1 = fakeTrace();
+    const trace2 = fakeTrace();
+    const overlay1 = createHiddenTracksOverlay(trace1, NO_OP_CALLBACKS);
+    assert.isOk(overlayIsBottomBar(overlay1));
+
+    const overlay2 = createHiddenTracksOverlay(trace2, NO_OP_CALLBACKS);
+    assert.isOk(overlayIsBottomBar(overlay2));
+
+    assert.notStrictEqual(overlay1.infobar, overlay2.infobar);
+  });
+
+  it('does not create a new overlay if the user has seen and dismissed it', async () => {
+    const trace = fakeTrace();
+    const overlay1 = createHiddenTracksOverlay(trace, NO_OP_CALLBACKS);
+    assert.isOk(overlayIsBottomBar(overlay1));
+    // This is equivalent to the user clicking the button to close it.
+    overlay1.infobar.dispose();
+
+    const overlay2 = createHiddenTracksOverlay(trace, NO_OP_CALLBACKS);
+    // The user has seen and dismissed the overlay, so we don't want to show it again.
+    assert.isNull(overlay2);
+  });
+});

package/front_end/panels/timeline/TrackConfigBanner.ts

@@ -0,0 +1,97 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as Trace from '../../models/trace/trace.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+const UIStrings = {
+  /**
+   * @description Message shown in a banner when some tracks are hidden in the timeline.
+   */
+  someTracksAreHidden:
+      'Some tracks are hidden in this trace. You can configure tracks by right clicking the track name.',
+  /**
+   * @description Text for a button to show all hidden tracks.
+   */
+  showAll: 'Show all',
+  /**
+   * @description Text for a button that opens a view to configure which tracks are visible.
+   */
+  configureTracks: 'Configure tracks',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/TrackConfigBanner.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+/**
+ * If the user records/imports a trace and their configuration means some
+ * tracks are hidden, we show them a dismissable banner at the bottom of the
+ * timeline. But we need to remember when they dismiss the banner, so we don't
+ * show it again for this trace; so this map stores either the infobar element,
+ * or 'DISMISSED', which tells us not to show or create another infobar. If
+ * there
+ * is no entry for a trace in this map it is assumed to be a new trace and the
+ * banner will be shown if the user has any hidden track config.
+ */
+const hiddenTracksInfoBarPerTrace = new WeakMap<Trace.Handlers.Types.ParsedTrace, UI.Infobar.Infobar|'DISMISSED'>();
+
+/**
+ * Creates an overlay for the timeline that will show a banner informing the user that at least one track is hidden.
+ *
+ * @param trace The trace parsed data.
+ * @param callbacks An object containing the callback functions to be executed
+ * when the user interacts with the banner.
+ *   - `onShowAllTracks`: called when the user clicks the "Unhide all" button.
+ *   - `onShowTrackConfigurationMode`: called when the user clicks the "Show hidden tracks" button.
+ *   - `onClose`: called when the banner is closed by the user.
+ * @returns A `Trace.Types.Overlays.Overlay` object to be rendered, or `null` if
+ * no banner should be shown (because the user has already seen the banner)
+ */
+export function createHiddenTracksOverlay(trace: Trace.Handlers.Types.ParsedTrace, callbacks: {
+  onShowAllTracks: () => void,
+  onShowTrackConfigurationMode: () => void,
+  onClose: () => void,
+}): Trace.Types.Overlays.BottomInfoBar|null {
+  const status = hiddenTracksInfoBarPerTrace.get(trace);
+  if (status === 'DISMISSED') {
+    // The user has already seen the banner + dismissed it for this trace, so
+    // we don't need to do anything.
+    return null;
+  }
+  if (status instanceof UI.Infobar.Infobar) {
+    // We already have an infobar, so let's update the overlay to show it.
+    // The Bottom Info Bar overlay is a singleton, so we can safely do this and it won't show two banners.
+    return {
+      type: 'BOTTOM_INFO_BAR',
+      infobar: status,
+    };
+  }
+
+  // If we got here, it means that the user has hidden tracks, and has not seen the banner for this trace.
+  const infobarForTrace = new UI.Infobar.Infobar(
+      UI.Infobar.Type.WARNING,
+      i18nString(UIStrings.someTracksAreHidden),
+      [
+        {
+          text: i18nString(UIStrings.showAll),
+          delegate: callbacks.onShowAllTracks,
+          dismiss: true,
+        },
+        {
+          text: i18nString(UIStrings.configureTracks),
+          delegate: callbacks.onShowTrackConfigurationMode,
+          dismiss: true,
+          buttonVariant: Buttons.Button.Variant.PRIMARY,
+        }
+      ],
+  );
+  infobarForTrace.setCloseCallback(() => {
+    callbacks.onClose();
+    hiddenTracksInfoBarPerTrace.set(trace, 'DISMISSED');
+  });
+
+  hiddenTracksInfoBarPerTrace.set(trace, infobarForTrace);
+  return {type: 'BOTTOM_INFO_BAR', infobar: infobarForTrace};
+}

package/front_end/panels/timeline/TrackConfiguration.test.ts

@@ -38,9 +38,9 @@ describe('TrackConfiguration', () => {
     const visualOrder = [1, 2, 0];
     const data = buildPersistedConfig(groups, visualOrder);
     assert.deepEqual(data, [
-      {expanded: false, hidden: false, originalIndex: 0, visualIndex: 2},
-      {expanded: false, hidden: true, originalIndex: 1, visualIndex: 0},
-      {expanded: true, hidden: false, originalIndex: 2, visualIndex: 1},
+      {expanded: false, hidden: false, originalIndex: 0, visualIndex: 2, trackName: 'Group 1'},
+      {expanded: false, hidden: true, originalIndex: 1, visualIndex: 0, trackName: 'Group 2'},
+      {expanded: true, hidden: false, originalIndex: 2, visualIndex: 1, trackName: 'Group 3'},
     ]);
   });
 });

package/front_end/panels/timeline/TrackConfiguration.ts

@@ -26,6 +26,7 @@ export function buildPersistedConfig(groups: readonly PerfUI.FlameChart.Group[],
       hidden: Boolean(group.hidden),
       originalIndex: index,
       visualIndex: newVisualIndex,
+      trackName: group.name,
     };
   });
 }

package/front_end/panels/timeline/UIDevtoolsUtils.ts

@@ -35,63 +35,63 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   frameStart: 'Frame start',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   drawFrame: 'Draw frame',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   layout: 'Layout',
   /**
-   *@description Text in UIDevtools Utils of the Performance panel
+   * @description Text in UIDevtools Utils of the Performance panel
    */
   rasterizing: 'Rasterizing',
   /**
-   *@description Text in UIDevtools Utils of the Performance panel
+   * @description Text in UIDevtools Utils of the Performance panel
    */
   drawing: 'Drawing',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   painting: 'Painting',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   system: 'System',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   idle: 'Idle',
   /**
-   *@description Category in the Summary view of the Performance panel to indicate time spent to load resources
+   * @description Category in the Summary view of the Performance panel to indicate time spent to load resources
    */
   loading: 'Loading',
   /**
-   *@description Text in Timeline for the Experience title
+   * @description Text in Timeline for the Experience title
    */
   experience: 'Experience',
   /**
-   *@description Category in the Summary view of the Performance panel to indicate time spent in script execution
+   * @description Category in the Summary view of the Performance panel to indicate time spent in script execution
    */
   scripting: 'Scripting',
   /**
-   *@description Category in the Summary view of the Performance panel to indicate time spent in rendering the web page
+   * @description Category in the Summary view of the Performance panel to indicate time spent in rendering the web page
    */
   rendering: 'Rendering',
   /**
-   *@description Event category in the Performance panel for time spent in the GPU
+   * @description Event category in the Performance panel for time spent in the GPU
    */
   gpu: 'GPU',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   async: 'Async',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   messaging: 'Messaging',
 } as const;

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

@@ -17,12 +17,12 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description A context menu item in the Minimap Breadcrumb context menu.
+   * @description A context menu item in the Minimap Breadcrumb context menu.
    * This context menu option activates the breadcrumb that the context menu was opened on.
    */
   activateBreadcrumb: 'Activate breadcrumb',
   /**
-   *@description A context menu item in the Minimap Breadcrumb context menu.
+   * @description A context menu item in the Minimap Breadcrumb context menu.
    * This context menu option removed all the child breadcrumbs and activates
    * the breadcrumb that the context menu was opened on.
    */
@@ -118,15 +118,10 @@ export class BreadcrumbsUI extends HTMLElement {
           </div>
           ${breadcrumb.child !== null ?
             html`
-            <devtools-icon .data=${{
-              iconName: 'chevron-right',
-              color: 'var(--icon-default)',
-              width: '16px',
-              height: '16px',
-            }}>`
+            <devtools-icon name="chevron-right" class="medium">`
             : ''}
       `;
-              // clang-format on
+    // clang-format on
   }
 
   #render(): void {

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

@@ -17,44 +17,44 @@ import * as UI from '../../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   *@description Text in the Performance panel for a forced style and layout calculation of elements
+   * @description Text in the Performance panel for a forced style and layout calculation of elements
    * in a page. See https://developer.mozilla.org/en-US/docs/Glossary/Reflow
    */
   forcedReflow: 'Forced reflow',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
-   *@example {Forced reflow} PH1
+   * @description Text in Timeline UIUtils of the Performance panel
+   * @example {Forced reflow} PH1
    */
   sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck.',
   /**
-   *@description Text in the Performance panel for a function called during a time the browser was
+   * @description Text in the Performance panel for a function called during a time the browser was
    * idle (inactive), which to longer to execute than a predefined deadline.
-   *@example {10ms} PH1
+   * @example {10ms} PH1
    */
   idleCallbackExecutionExtended: 'Idle callback execution extended beyond deadline by {PH1}',
   /**
-   *@description Text in the Performance panel which describes how long a task took.
-   *@example {task} PH1
-   *@example {10ms} PH2
+   * @description Text in the Performance panel which describes how long a task took.
+   * @example {task} PH1
+   * @example {10ms} PH2
    */
   sTookS: '{PH1} took {PH2}.',
   /**
-   *@description Text in the Performance panel for a task that took long. See
+   * @description Text in the Performance panel for a task that took long. See
    * https://developer.mozilla.org/en-US/docs/Glossary/Long_task
    */
   longTask: 'Long task',
   /**
-   *@description Text used to highlight a long interaction and link to web.dev/inp
+   * @description Text used to highlight a long interaction and link to web.dev/inp
    */
   longInteractionINP: 'Long interaction',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel when the
+   * @description Text in Timeline UIUtils of the Performance panel when the
    *             user clicks on a long interaction.
-   *@example {Long interaction} PH1
+   * @example {Long interaction} PH1
    */
   sIsLikelyPoorPageResponsiveness: '{PH1} is indicating poor page responsiveness.',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   websocketProtocol: 'WebSocket protocol',
   /**