chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/timeline/TimelinePanel.ts

@@ -40,12 +40,13 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
+import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as ShortcutDialog from '../../ui/components/dialogs/dialogs.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -65,6 +66,7 @@ import {AnnotationModifiedEvent, ModificationsManager} from './ModificationsMana
 import * as Overlays from './overlays/overlays.js';
 import {cpuprofileJsonGenerator, traceJsonGenerator} from './SaveFileFormatter.js';
 import {type Client, TimelineController} from './TimelineController.js';
+import type {TimelineFlameChartDataProvider} from './TimelineFlameChartDataProvider.js';
 import {TimelineFlameChartView} from './TimelineFlameChartView.js';
 import {TimelineHistoryManager} from './TimelineHistoryManager.js';
 import {TimelineLandingPage} from './TimelineLandingPage.js';
@@ -316,6 +318,22 @@ const UIStrings = {
    * @description Tooltip text for a button that takes the user back to the default view which shows performance metrics that are live.
    */
   backToLiveMetrics: 'Go back to the live metrics page',
+  /**
+   * @description Description of the Timeline in/out zoom action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineZoomInOut: 'Timeline zoom in/out',
+  /**
+   * @description Description of the Timeline fast in/out zoom action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineFastZoomInOut: 'Timeline fast zoom in/out',
+  /**
+   * @description Description of the Timeline up/down scroll action that appears in the Performance panel shortcuts dialog.
+   */
+  timelineScrollUpDown: 'Timeline up/down',
+  /**
+   * @description Description of the Timeline right/left panning action that appears in the Performance panel shortcuts dialog.
+   */
+  timelinePanLeftRight: 'Timeline right/left',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -368,7 +386,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    * we store the filters by the trace index, so if the user then navigates back
    * to a previous trace we can reinstate the filters from this map.
    */
-  #exclusiveFilterPerTrace: Map<number, TimelineModel.TimelineModelFilter.TimelineModelFilter> = new Map();
+  #exclusiveFilterPerTrace: Map<number, Trace.Extras.TraceFilter.TraceFilter> = new Map();
   /**
    * This widget holds the timeline sidebar which shows Insights & Annotations,
    * and the main UI which shows the timeline
@@ -445,6 +463,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   #pendingAriaMessage: string|null = null;
 
   #eventToRelatedInsights: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
+  #shortcutsDialog: ShortcutDialog.ShortcutDialog.ShortcutDialog = new ShortcutDialog.ShortcutDialog.ShortcutDialog();
+
+  #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
 
   constructor() {
     super('timeline');
@@ -522,6 +543,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     topPaneElement.id = 'timeline-overview-panel';
 
     this.#minimapComponent.show(topPaneElement);
+    this.#minimapComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_MOVE, event => {
+      this.flameChart.addTimestampMarkerOverlay(event.data.timeInMicroSeconds);
+    });
+    this.#minimapComponent.addEventListener(PerfUI.TimelineOverviewPane.Events.OVERVIEW_PANE_MOUSE_LEAVE, async () => {
+      await this.flameChart.removeTimestampMarkerOverlay();
+    });
 
     this.statusPaneContainer = this.timelinePane.element.createChild('div', 'status-pane-container fill');
 
@@ -538,6 +565,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.getMainFlameChart().addEventListener(
         PerfUI.FlameChart.Events.CHART_PLAYABLE_STATE_CHANGED, this.#onChartPlayableStateChangeBound, this);
 
+    this.#onMainEntryHovered = this.#onEntryHovered.bind(this, this.flameChart.getMainDataProvider());
+    this.flameChart.getMainFlameChart().addEventListener(
+        PerfUI.FlameChart.Events.ENTRY_HOVERED, this.#onMainEntryHovered);
+
     this.searchableViewInternal = new UI.SearchableView.SearchableView(this.flameChart, null);
     this.searchableViewInternal.setMinimumSize(0, 100);
     this.searchableViewInternal.element.classList.add('searchable-view');
@@ -551,16 +582,23 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.#splitWidget.enableShowModeSaving();
     this.#splitWidget.show(this.element);
 
+    this.flameChart.overlays().addEventListener(Overlays.Overlays.TimeRangeMouseOverEvent.eventName, event => {
+      const {overlay} = event as Overlays.Overlays.TimeRangeMouseOverEvent;
+      const overlayBounds = overlay && Overlays.Overlays.traceWindowContainingOverlays([overlay]);
+      this.#minimapComponent.highlightBounds(overlayBounds, /* withBracket */ false);
+    });
+
+    this.flameChart.overlays().addEventListener(Overlays.Overlays.TimeRangeMouseOutEvent.eventName, () => {
+      this.#minimapComponent.clearBoundsHighlight();
+    });
+
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightDeactivated.eventName, () => {
       this.#setActiveInsight(null);
     });
 
-    // TODO(crbug.com/372946179): when clicking on an insight chip, this event never fires if the insight tab
-    // is not on the DOM. That only happens when the sidebar tabbed pane component is set to Annotations.
-    // In that case, clicking on the insight chip will do nothing.
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightActivated.eventName, event => {
-      const {name, insightSetKey, overlays, relatedEvents} = event;
-      this.#setActiveInsight({name, insightSetKey, overlays, relatedEvents});
+      const {model, insightSetKey} = event;
+      this.#setActiveInsight({model, insightSetKey});
     });
 
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightProvideOverlays.eventName, event => {
@@ -570,25 +608,12 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
       const overlaysBounds = overlays && Overlays.Overlays.traceWindowContainingOverlays(overlays);
       if (overlaysBounds) {
-        this.#minimapComponent.highlightBounds(overlaysBounds);
+        this.#minimapComponent.highlightBounds(overlaysBounds, /* withBracket */ true);
       } else {
         this.#minimapComponent.clearBoundsHighlight();
       }
     });
 
-    this.#sideBar.element.addEventListener(
-        TimelineInsights.SidebarInsight.InsightProvideRelatedEvents.eventName, event => {
-          const relatedInsight = {
-            insightLabel: event.label,
-            activateInsight: event.activateInsight,
-          };
-          for (const traceEvent of event.events) {
-            const relatedInsights = this.#eventToRelatedInsights.get(traceEvent) ?? [];
-            relatedInsights.push(relatedInsight);
-            this.#eventToRelatedInsights.set(traceEvent, relatedInsights);
-          }
-        });
-
     this.flameChart.element.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
       const fromTraceEvent = selectionFromEvent(event.event);
       this.flameChart.setSelectionAndReveal(fromTraceEvent);
@@ -609,7 +634,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightSetHovered.eventName, event => {
       if (event.bounds) {
-        this.#minimapComponent.highlightBounds(event.bounds);
+        this.#minimapComponent.highlightBounds(event.bounds, /* withBracket */ true);
       } else {
         this.#minimapComponent.clearBoundsHighlight();
       }
@@ -907,6 +932,21 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
   }
 
+  #onEntryHovered(dataProvider: TimelineFlameChartDataProvider, event: Common.EventTarget.EventTargetEvent<number>):
+      void {
+    const entryIndex = event.data;
+    if (entryIndex === -1) {
+      this.#minimapComponent.clearBoundsHighlight();
+      return;
+    }
+    const traceEvent = dataProvider.eventByIndex(entryIndex);
+    if (!traceEvent) {
+      return;
+    }
+    const bounds = Trace.Helpers.Timing.traceWindowFromEvent(traceEvent);
+    this.#minimapComponent.highlightBounds(bounds, /* withBracket */ false);
+  }
+
   private loadFromCpuProfile(profile: Protocol.Profiler.Profile|null): void {
     if (this.state !== State.IDLE || profile === null) {
       return;
@@ -1065,6 +1105,57 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.panelRightToolbar.appendSeparator();
       this.panelRightToolbar.appendToolbarItem(this.showSettingsPaneButton);
     }
+
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION)) {
+      this.#shortcutsDialog.prependElement(this.#getNavigationSetting());
+      const dialogToolbarItem = new UI.Toolbar.ToolbarItem(this.#shortcutsDialog);
+      this.panelRightToolbar.appendToolbarItem(dialogToolbarItem);
+    }
+  }
+
+  #getNavigationSetting(): HTMLElement {
+    const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
+    this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(currentNavSetting === 'classic')};
+
+    const navigationRadioButtons = document.createElement('form');
+    navigationRadioButtons.classList.add('nav-radio-buttons');
+    UI.ARIAUtils.markAsRadioGroup(navigationRadioButtons);
+    const modernNavRadioButton = UI.UIUtils.createRadioLabel(
+        'flamechart-selected-navigation', 'Modern', /* checked */ currentNavSetting === 'modern');
+    // Change EventListener is only triggered when the radio button is selected
+    modernNavRadioButton.radioElement.addEventListener('change', () => {
+      this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ false)};
+      Common.Settings.moduleSetting('flamechart-selected-navigation').set('modern');
+    });
+    const classicNavRadioButton = UI.UIUtils.createRadioLabel(
+        'flamechart-selected-navigation', 'Classic', /* checked */ currentNavSetting === 'classic');
+    classicNavRadioButton.radioElement.addEventListener('change', () => {
+      this.#shortcutsDialog.data = {shortcuts: this.#getShortcutsInfo(/* isNavClassic */ true)};
+      Common.Settings.moduleSetting('flamechart-selected-navigation').set('classic');
+    });
+
+    navigationRadioButtons.appendChild(modernNavRadioButton);
+    navigationRadioButtons.appendChild(classicNavRadioButton);
+
+    return navigationRadioButtons;
+  }
+
+  #getShortcutsInfo(isNavClassic: boolean): ShortcutDialog.ShortcutDialog.Shortcut[] {
+    if (isNavClassic) {
+      return [
+        {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Shift Scroll']},
+        {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Scroll', 'W/S']},
+        {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S']},
+        {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D']},
+      ];
+    }
+
+    return [
+      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: ['Scroll', 'Shift up/down']},
+      {title: i18nString(UIStrings.timelineZoomInOut), bindings: ['Cmd Scroll', 'W/S', '+/-']},
+      {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: ['Shift W/S', 'Shift +/-']},
+      {title: i18nString(UIStrings.timelinePanLeftRight), bindings: ['A/D', 'Shift Scroll', 'Shift left/right']},
+    ];
   }
 
   private createSettingsPane(): void {
@@ -1663,9 +1754,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.runBrickBreakerGame();
   }
 
-  #applyActiveFilters(
-      traceIsGeneric: boolean,
-      exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null = null): void {
+  #applyActiveFilters(traceIsGeneric: boolean, exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null):
+      void {
     if (traceIsGeneric || Root.Runtime.experiments.isEnabled('timeline-show-all-events')) {
       return;
     }
@@ -1844,11 +1934,28 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.#setActiveInsight(null);
 
-    this.#eventToRelatedInsights.clear();
     const traceInsightsSets = this.#traceEngineModel.traceInsights(traceIndex);
     this.flameChart.setInsights(traceInsightsSets, this.#eventToRelatedInsights);
     this.#sideBar.setInsights(traceInsightsSets);
 
+    this.#eventToRelatedInsights.clear();
+    if (traceInsightsSets) {
+      for (const [insightSetKey, insightSet] of traceInsightsSets) {
+        for (const model of Object.values(insightSet.model)) {
+          for (const event of model.relatedEvents ?? []) {
+            const relatedInsights = this.#eventToRelatedInsights.get(event) ?? [];
+            this.#eventToRelatedInsights.set(event, relatedInsights);
+            relatedInsights.push({
+              insightLabel: model.title,
+              activateInsight: () => {
+                this.#setActiveInsight({model, insightSetKey});
+              },
+            });
+          }
+        }
+      }
+    }
+
     this.#showSidebarIfRequired();
   }
 
@@ -2041,6 +2148,20 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.getMainFlameChart().update();
   }
 
+  #deviceModeModel(): EmulationModel.DeviceModeModel.DeviceModeModel|null {
+    // This is wrapped in a try/catch because in some DevTools entry points
+    // (such as worker_app.ts) the Emulation panel is not included and as such
+    // the below code fails; it tries to instantiate the model which requires
+    // reading the value of a setting which has not been registered.
+    // In this case, we fallback to 'ALL'. See crbug.com/361515458 for an
+    // example bug that this resolves.
+    try {
+      return EmulationModel.DeviceModeModel.DeviceModeModel.instance();
+    } catch {
+      return null;
+    }
+  }
+
   /**
    * This is called with we are done loading a trace from a file, or after we
    * have recorded a fresh trace.
@@ -2051,9 +2172,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    * code in there.
    **/
   async loadingComplete(
-      collectedEvents: Trace.Types.Events.Event[],
-      exclusiveFilter: TimelineModel.TimelineModelFilter.TimelineModelFilter|null = null, isCpuProfile: boolean,
-      recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void> {
+      collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null,
+      isCpuProfile: boolean, recordingStartTime: number|null, metadata: Trace.Types.File.MetaData|null): Promise<void> {
     this.#traceEngineModel.resetProcessor();
 
     delete this.loader;
@@ -2082,8 +2202,17 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
-    metadata = metadata ? metadata :
-                          await Trace.Extras.Metadata.forNewRecording(isCpuProfile, recordingStartTime ?? undefined);
+    if (!metadata) {
+      const deviceModeModel = this.#deviceModeModel();
+      let emulatedDeviceTitle;
+      if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Device) {
+        emulatedDeviceTitle = deviceModeModel.device()?.title ?? undefined;
+      } else if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+        emulatedDeviceTitle = 'Responsive';
+      }
+      metadata = await Trace.Extras.Metadata.forNewRecording(
+          isCpuProfile, recordingStartTime ?? undefined, emulatedDeviceTitle);
+    }
 
     try {
       await this.#executeNewTrace(collectedEvents, recordingIsFresh, metadata);
@@ -2116,7 +2245,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         },
         filmStripForPreview: Trace.Extras.FilmStrip.fromParsedTrace(parsedTrace),
         parsedTrace,
-        startTime: recordingStartTime ?? null,
+        metadata,
       });
     } catch (error) {
       // If we errored during the parsing stage, it

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
@@ -35,13 +34,13 @@ describeWithEnvironment('TimelineTreeView', function() {
       eventTreeView.setModelWithEvents(consoleTimings, parsedTrace);
       const tree = eventTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'first console time');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'third console time');
 
-      const bottomNode = firstNode.children().values().next().value as TimelineModel.TimelineProfileTree.Node;
+      const bottomNode = firstNode.children().values().next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(bottomNode.event?.name, 'second console time');
     });
 
@@ -52,10 +51,10 @@ describeWithEnvironment('TimelineTreeView', function() {
       eventTreeView.setModelWithEvents(consoleTimings, parsedTrace);
       const tree = eventTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'mark1');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'mark3');
     });
 
@@ -110,16 +109,16 @@ describeWithEnvironment('TimelineTreeView', function() {
 
       const tree = bottomUpTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'second console time');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'first console time');
 
-      const thirdNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const thirdNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(thirdNode.event?.name, 'third console time');
 
-      const childNode = firstNode.children().values().next().value as TimelineModel.TimelineProfileTree.Node;
+      const childNode = firstNode.children().values().next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(childNode.event?.name, 'first console time');
     });
   });
@@ -136,13 +135,13 @@ describeWithEnvironment('TimelineTreeView', function() {
 
       const tree = callTreeView.buildTree();
       const topNodesIterator = tree.children().values();
-      const firstNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const firstNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(firstNode.event?.name, 'first console time');
 
-      const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
+      const secondNode = topNodesIterator.next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(secondNode.event?.name, 'third console time');
 
-      const childNode = firstNode.children().values().next().value as TimelineModel.TimelineProfileTree.Node;
+      const childNode = firstNode.children().values().next().value as Trace.Extras.TraceTree.Node;
       assert.strictEqual(childNode.event?.name, 'second console time');
     });
   });