chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -19,6 +19,7 @@ import type * as TimelineComponents from './components/components.js';
 import {CountersGraph} from './CountersGraph.js';
 import {SHOULD_SHOW_EASTER_EGG} from './EasterEgg.js';
 import {ModificationsManager} from './ModificationsManager.js';
+import * as OverlayComponents from './overlays/components/components.js';
 import * as Overlays from './overlays/overlays.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {TimelineDetailsView} from './TimelineDetailsView.js';
@@ -29,10 +30,10 @@ import {
 } from './TimelineFlameChartDataProvider.js';
 import {TimelineFlameChartNetworkDataProvider} from './TimelineFlameChartNetworkDataProvider.js';
 import timelineFlameChartViewStyles from './timelineFlameChartView.css.js';
-import {type TimelineModeViewDelegate} from './TimelinePanel.js';
+import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 import {TimelineSelection} from './TimelineSelection.js';
 import {AggregatedTimelineTreeView} from './TimelineTreeView.js';
-import {type TimelineMarkerStyle} from './TimelineUIUtils.js';
+import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
@@ -96,7 +97,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   private selectedSearchResult?: PerfUI.FlameChart.DataProviderSearchResult;
   private searchRegex?: RegExp;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
-  #traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
+  #traceInsightSets: Trace.Insights.Types.TraceInsightSets|null = null;
+  #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #selectedGroupName: string|null = null;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
   #gameKeyMatches = 0;
@@ -171,7 +173,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.LATEST_DRAW_DIMENSIONS, dimensions => {
       this.#overlays.updateChartDimensions('main', dimensions.data.chart);
       this.#overlays.updateVisibleWindow(dimensions.data.traceWindow);
-      this.#overlays.update();
+      void this.#overlays.update();
     });
 
     this.networkFlameChartGroupExpansionSetting =
@@ -188,7 +190,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.LATEST_DRAW_DIMENSIONS, dimensions => {
       this.#overlays.updateChartDimensions('network', dimensions.data.chart);
       this.#overlays.updateVisibleWindow(dimensions.data.traceWindow);
-      this.#overlays.update();
+      void this.#overlays.update();
 
       // If the height of the network chart has changed, we need to tell the
       // main flame chart because its tooltips are positioned based in part on
@@ -197,11 +199,11 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     });
 
     this.mainFlameChart.addEventListener(PerfUI.FlameChart.Events.MOUSE_MOVE, event => {
-      this.#processFlameChartMouseMoveEvent(event.data);
+      void this.#processFlameChartMouseMoveEvent(event.data);
     });
 
     this.networkFlameChart.addEventListener(PerfUI.FlameChart.Events.MOUSE_MOVE, event => {
-      this.#processFlameChartMouseMoveEvent(event.data);
+      void this.#processFlameChartMouseMoveEvent(event.data);
     });
 
     this.#overlays = new Overlays.Overlays.Overlays({
@@ -243,6 +245,24 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       }
     });
 
+    this.element.addEventListener(OverlayComponents.EntriesLinkOverlay.EntryLinkStartCreating.eventName, () => {
+      /**
+       * When the user creates an entries link, they click on the arrow icon to
+       * begin creating it. At this point the arrow icon gets deleted. This
+       * causes the focus of the page by default to jump to the entire Timeline
+       * Panel. This is a bit aggressive; and problematic as it means we cannot
+       * use <ESC> to cancel the creation of the entry. So instead we focus the
+       * TimelineFlameChartView instead. This means that the user's <ESC> gets
+       * dealt with in its keydown.
+       * If the user goes ahead and creates the entry, they will end up
+       * focused on whichever target entry they pick, so this only matters for
+       * the case where the user hits <ESC> to cancel.
+       */
+      this.focus();
+    });
+
+    this.element.setAttribute('jslog', `${VisualLogging.section('timeline.flame-chart-view')}`);
+
     this.networkPane = new UI.Widget.VBox();
     this.networkPane.setMinimumSize(23, 23);
     this.networkFlameChart.show(this.networkPane.element);
@@ -324,6 +344,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     TraceBounds.TraceBounds.onChange(this.#onTraceBoundsChangeBound);
   }
 
+  containingElement(): HTMLElement {
+    return this.element;
+  }
+
   setOverlays(overlays: Overlays.Overlays.TimelineOverlay[], options: Overlays.Overlays.TimelineOverlaySetOptions):
       void {
     this.bulkRemoveOverlays(this.#currentInsightOverlays);
@@ -436,7 +460,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     }
   }
 
-  #processFlameChartMouseMoveEvent(data: PerfUI.FlameChart.EventTypes['MouseMove']): void {
+  async #processFlameChartMouseMoveEvent(data: PerfUI.FlameChart.EventTypes['MouseMove']): Promise<void> {
     const {mouseEvent, timeInMicroSeconds} = data;
     // If the user is no longer holding shift, remove any existing marker.
     if (!mouseEvent.shiftKey) {
@@ -444,7 +468,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       if (removedCount > 0) {
         // Don't trigger lots of updates on a mouse move if we didn't actually
         // remove any overlays.
-        this.#overlays.update();
+        await this.#overlays.update();
       }
     }
 
@@ -607,10 +631,14 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
     // `CREATION_NOT_STARTED` is only true in the state when both empty label and button to create connection are
     // created at the same time. If any key is typed in that state, it means that the label is in focus and the key
-    // is typed into the label. In that case, delete the connection.
+    // is typed into the label. This tells us that the user chose to create the
+    // label, not the connection. In that case, delete the connection.
     if (this.#linkSelectionAnnotation &&
         this.#linkSelectionAnnotation.state === Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED) {
       this.#clearLinkSelectionAnnotation(true);
+      // We have dealt with the keypress as the user is typing into the label, so do not let it propogate up.
+      // This also ensures that if the user uses "Escape" they don't toggle the DevTools drawer.
+      event.stopPropagation();
     }
 
     /**
@@ -620,6 +648,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     if (event.key === 'Escape' && this.#linkSelectionAnnotation) {
       this.#clearLinkSelectionAnnotation(true);
       event.stopPropagation();
+      event.preventDefault();
     }
 
     const eventHandledByKeyboardTimeRange = this.#handleTimeRangeKeyboardCreation(event);
@@ -697,7 +726,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   }
 
   extensionDataVisibilityChanged(): void {
-    this.#reset();
+    this.reset();
+    this.setupWindowTimes();
     this.mainDataProvider.reset(true);
     this.mainDataProvider.timelineData(true);
     this.refreshMainFlameChart();
@@ -728,9 +758,12 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
           Trace.Types.Timing.MilliSeconds(endTime),
       );
 
-      // If the current time range annotation has a label, the range selection
-      // for it is finished and we need to create a new time range annotations.
-      if (this.#timeRangeSelectionAnnotation && !this.#timeRangeSelectionAnnotation?.label) {
+      // If the current time range annotation exists, the range selection
+      // for it is in progress and we need to update its bounds.
+      //
+      // When the range selection is finished, the current range is set to null.
+      // If the current selection is null, create a new time range annotations.
+      if (this.#timeRangeSelectionAnnotation) {
         this.#timeRangeSelectionAnnotation.bounds = bounds;
         ModificationsManager.activeManager()?.updateAnnotation(this.#timeRangeSelectionAnnotation);
       } else {
@@ -739,6 +772,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
           label: '',
           bounds,
         };
+        // Before creating a new range, make sure to delete the empty ranges.
+        ModificationsManager.activeManager()?.deleteEmptyRangeAnnotations();
         ModificationsManager.activeManager()?.createAnnotation(this.#timeRangeSelectionAnnotation);
       }
     }
@@ -772,19 +807,27 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.#selectedEvents = null;
     this.mainDataProvider.setModel(newParsedTrace, isCpuProfile);
     this.networkDataProvider.setModel(newParsedTrace);
-    this.#reset();
+    this.reset();
+    this.setupWindowTimes();
     this.updateSearchResults(false, false);
     this.refreshMainFlameChart();
     this.#updateFlameCharts();
   }
 
-  setInsights(insights: Trace.Insights.Types.TraceInsightSets|null): void {
-    if (this.#traceInsightsSets !== insights) {
-      this.#traceInsightsSets = insights;
+  setInsights(
+      insights: Trace.Insights.Types.TraceInsightSets|null,
+      eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap): void {
+    if (this.#traceInsightSets === insights) {
+      return;
     }
+
+    this.#traceInsightSets = insights;
+    this.#eventToRelatedInsightsMap = eventToRelatedInsightsMap;
+    // The DetailsView is provided with the InsightSets, so make sure we update it.
+    this.#updateDetailViews();
   }
 
-  #reset(): void {
+  reset(): void {
     if (this.networkDataProvider.isEmpty()) {
       this.mainFlameChart.enableRuler(true);
       this.networkSplitWidget.hideSidebar();
@@ -797,7 +840,10 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.mainFlameChart.reset();
     this.networkFlameChart.reset();
     this.updateSearchResults(false, false);
+  }
 
+  // TODO(paulirish): It's possible this is being called more than necessary. Attempt to clean up the lifecycle.
+  setupWindowTimes(): void {
     const traceBoundsState = TraceBounds.TraceBounds.BoundsManager.instance().state();
     if (!traceBoundsState) {
       throw new Error('TimelineFlameChartView could not set the window bounds.');
@@ -817,7 +863,12 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
   #updateDetailViews(): void {
     this.countersView.setModel(this.#parsedTrace, this.#selectedEvents);
-    void this.detailsView.setModel(this.#parsedTrace, this.#selectedEvents, this.#traceInsightsSets);
+    void this.detailsView.setModel({
+      parsedTrace: this.#parsedTrace,
+      selectedEvents: this.#selectedEvents,
+      traceInsightsSets: this.#traceInsightSets,
+      eventToRelatedInsightsMap: this.#eventToRelatedInsightsMap,
+    });
   }
 
   #updateFlameCharts(): void {
@@ -935,9 +986,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   revealEvent(event: Trace.Types.Events.Event): void {
     const mainIndex = this.mainDataProvider.indexForEvent(event);
     const networkIndex = this.networkDataProvider.indexForEvent(event);
-    if (mainIndex) {
+    if (mainIndex !== null) {
       this.mainFlameChart.revealEntry(mainIndex);
-    } else if (networkIndex) {
+    } else if (networkIndex !== null) {
       this.networkFlameChart.revealEntry(networkIndex);
     }
   }
@@ -946,9 +997,9 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
   revealEventVertically(event: Trace.Types.Events.Event): void {
     const mainIndex = this.mainDataProvider.indexForEvent(event);
     const networkIndex = this.networkDataProvider.indexForEvent(event);
-    if (mainIndex) {
+    if (mainIndex !== null) {
       this.mainFlameChart.revealEntryVertically(mainIndex);
-    } else if (networkIndex) {
+    } else if (networkIndex !== null) {
       this.networkFlameChart.revealEntryVertically(networkIndex);
     }
   }
@@ -1006,12 +1057,12 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     for (const overlay of overlays) {
       this.#overlays.add(overlay);
     }
-    this.#overlays.update();
+    void this.#overlays.update();
   }
 
   addOverlay<T extends Overlays.Overlays.TimelineOverlay>(newOverlay: T): T {
     const overlay = this.#overlays.add(newOverlay);
-    this.#overlays.update();
+    void this.#overlays.update();
     return overlay;
   }
 
@@ -1023,16 +1074,16 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     for (const overlay of overlays) {
       this.#overlays.remove(overlay);
     }
-    this.#overlays.update();
+    void this.#overlays.update();
   }
   removeOverlay(removedOverlay: Overlays.Overlays.TimelineOverlay): void {
     this.#overlays.remove(removedOverlay);
-    this.#overlays.update();
+    void this.#overlays.update();
   }
 
   updateExistingOverlay<T extends Overlays.Overlays.TimelineOverlay>(existingOverlay: T, newData: Partial<T>): void {
     this.#overlays.updateExisting(existingOverlay, newData);
-    this.#overlays.update();
+    void this.#overlays.update();
   }
 
   enterLabelEditMode(overlay: Overlays.Overlays.EntryLabel): void {
@@ -1350,6 +1401,16 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.searchRegex = searchConfig.toSearchRegex().regex;
     this.updateSearchResults(shouldJump, jumpBackwards);
   }
+
+  togglePopover({event, show}: {event: Trace.Types.Events.Event, show: boolean}): void {
+    const entryIndex = this.mainDataProvider.indexForEvent(event);
+    if (show && entryIndex) {
+      this.mainFlameChart.setSelectedEntry(entryIndex);
+      this.mainFlameChart.showPopoverForSearchResult(entryIndex);
+    } else {
+      this.mainFlameChart.hideHighlight();
+    }
+  }
 }
 
 export class Selection {

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -19,7 +19,7 @@ import {
   TimelineEventOverviewResponsiveness,
 } from './TimelineEventOverview.js';
 import timelineHistoryManagerStyles from './timelineHistoryManager.css.js';
-import {type TimelineMiniMap} from './TimelineMiniMap.js';
+import type {TimelineMiniMap} from './TimelineMiniMap.js';
 
 /**
  * The dropdown works by returning an index which is the trace index; but we
@@ -389,6 +389,7 @@ export class TimelineHistoryManager {
     const titleWithSequenceNumber = i18nString(UIStrings.sD, {PH1: domain, PH2: sequenceNumber});
     this.nextNumberByDomain.set(domain, sequenceNumber + 1);
     const timeElement = document.createElement('span');
+    timeElement.classList.add('time');
 
     const preview = document.createElement('div');
     preview.classList.add('preview-item');
@@ -438,6 +439,7 @@ export class TimelineHistoryManager {
     if (!lastFrame) {
       return container;
     }
+    // TODO(paulirish): Adopt Util.ImageCache
     void UI.UIUtils.loadImage(lastFrame.screenshotEvent.args.dataUri).then(img => {
       if (img) {
         container.appendChild(img);

package/front_end/panels/timeline/TimelineLoader.ts

@@ -11,7 +11,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 
-import {type Client} from './TimelineController.js';
+import type {Client} from './TimelineController.js';
 
 const UIStrings = {
   /**

package/front_end/panels/timeline/TimelinePanel.ts

@@ -177,10 +177,6 @@ const UIStrings = {
    *@description Text in Timeline Panel of the Performance panel
    */
   NetworkThrottlingIsEnabled: '- Network throttling is enabled',
-  /**
-   *@description Text in Timeline Panel of the Performance panel
-   */
-  HardwareConcurrencyIsEnabled: '- Hardware concurrency override is enabled',
   /**
    *@description Text in Timeline Panel of the Performance panel
    */
@@ -434,6 +430,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    */
   #pendingAriaMessage: string|null = null;
 
+  #eventToRelatedInsights: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
+
   constructor() {
     super('timeline');
     const adornerContent = document.createElement('span');
@@ -453,12 +451,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.brickBreakerToolbarButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.fixMe), adorner);
     this.brickBreakerToolbarButton.addEventListener(
         UI.Toolbar.ToolbarButton.Events.CLICK, () => this.#onBrickBreakerEasterEggClick());
-    const config = Trace.Types.Configuration.defaults();
-    config.showAllEvents = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
-    config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
-    config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
 
-    this.#traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
+    this.#traceEngineModel = this.#instantiateNewModel();
     this.#listenForProcessingProgress();
 
     this.element.addEventListener('contextmenu', this.contextMenu.bind(this), false);
@@ -524,6 +518,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.flameChart = new TimelineFlameChartView(this);
     this.#onChartPlayableStateChangeBound = this.#onChartPlayableStateChange.bind(this);
+    this.element.addEventListener(
+        'toggle-popover', event => this.flameChart.togglePopover((event as CustomEvent).detail));
 
     this.flameChart.getMainFlameChart().addEventListener(
         PerfUI.FlameChart.Events.CHART_PLAYABLE_STATE_CHANGED, this.#onChartPlayableStateChangeBound, this);
@@ -545,6 +541,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       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} = event;
       this.#setActiveInsight({name, insightSetKey, overlays});
@@ -563,9 +562,26 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       }
     });
 
-    this.#sideBar.contentElement.addEventListener(TimelineInsights.Helpers.EventReferenceClick.eventName, event => {
-      const {metricEvent} = event;
-      this.select(TimelineSelection.fromTraceEvent(metricEvent));
+    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 = TimelineSelection.fromTraceEvent(event.event);
+      this.flameChart.setSelectionAndReveal(fromTraceEvent);
+    });
+
+    this.#sideBar.contentElement.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
+      this.select(TimelineSelection.fromTraceEvent(event.event));
     });
 
     this.#sideBar.element.addEventListener(TimelineComponents.Sidebar.RemoveAnnotation.eventName, event => {
@@ -624,6 +640,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null): void {
+    if (insight && this.#panelSidebarEnabled()) {
+      this.#splitWidget.showBoth();
+    }
     this.#sideBar.setActiveInsight(insight);
     this.flameChart.setActiveInsight(insight);
   }
@@ -642,6 +661,15 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     return timelinePanelInstance;
   }
 
+  #instantiateNewModel(): Trace.TraceModel.Model {
+    const config = Trace.Types.Configuration.defaults();
+    config.showAllEvents = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
+    config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
+    config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
+
+    return Trace.TraceModel.Model.createWithAllHandlers(config);
+  }
+
   static extensionDataVisibilitySetting(): Common.Settings.Setting<boolean> {
     // Calling this multiple times doesn't recreate the setting.
     // Instead, after the second call, the cached setting is returned.
@@ -1019,8 +1047,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this);
     SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
         SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.updateShowSettingsToolbarButton, this);
-    SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
-        SDK.CPUThrottlingManager.Events.HARDWARE_CONCURRENCY_CHANGED, this.updateShowSettingsToolbarButton, this);
     this.disableCaptureJSProfileSetting.addChangeListener(this.updateShowSettingsToolbarButton, this);
     this.captureLayersAndPicturesSetting.addChangeListener(this.updateShowSettingsToolbarButton, this);
     this.captureSelectorStatsSetting.addChangeListener(this.updateShowSettingsToolbarButton, this);
@@ -1055,26 +1081,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.networkThrottlingSelect = this.createNetworkConditionsSelect();
     networkThrottlingToolbar.appendToolbarItem(this.networkThrottlingSelect);
 
-    const hardwareConcurrencyPane = new UI.Widget.VBox();
-    hardwareConcurrencyPane.element.classList.add('flex-auto');
-    hardwareConcurrencyPane.show(this.settingsPane.element);
-
-    const thirdPartyToolbar = new UI.Toolbar.Toolbar('', this.settingsPane.element);
-    thirdPartyToolbar.element.classList.add('flex-auto');
+    const thirdPartyToolbar = new UI.Toolbar.Toolbar('', throttlingPane.element);
     thirdPartyToolbar.makeVertical();
     thirdPartyToolbar.appendToolbarItem(
         this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions)));
 
-    const {toggle, input, reset, warning} =
-        MobileThrottling.ThrottlingManager.throttlingManager().createHardwareConcurrencySelector();
-    const concurrencyThrottlingToolbar = new UI.Toolbar.Toolbar('', hardwareConcurrencyPane.element);
-    concurrencyThrottlingToolbar.registerCSSFiles([timelinePanelStyles]);
-    input.element.classList.add('timeline-concurrency-input');
-    concurrencyThrottlingToolbar.appendToolbarItem(toggle);
-    concurrencyThrottlingToolbar.appendToolbarItem(input);
-    concurrencyThrottlingToolbar.appendToolbarItem(reset);
-    concurrencyThrottlingToolbar.appendToolbarItem(warning);
-
     this.showSettingsPaneSetting.addChangeListener(this.updateSettingsPaneVisibility.bind(this));
     this.updateSettingsPaneVisibility();
   }
@@ -1297,9 +1308,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingRate() !== 1) {
       messages.push(i18nString(UIStrings.CpuThrottlingIsEnabled));
     }
-    if (MobileThrottling.ThrottlingManager.throttlingManager().hardwareConcurrencyOverrideEnabled) {
-      messages.push(i18nString(UIStrings.HardwareConcurrencyIsEnabled));
-    }
     if (SDK.NetworkManager.MultitargetNetworkManager.instance().isThrottling()) {
       messages.push(i18nString(UIStrings.NetworkThrottlingIsEnabled));
     }
@@ -1598,6 +1606,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   private onClearButton(): void {
     this.#historyManager.clear();
+    this.#traceEngineModel = this.#instantiateNewModel();
+    ModificationsManager.reset();
+    this.#uninstallSourceMapsResolver();
+    this.flameChart.getMainDataProvider().reset(true);
+    this.flameChart.reset();
     this.#changeView({mode: 'LANDING_PAGE'});
   }
 
@@ -1793,11 +1806,10 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.#setActiveInsight(null);
 
+    this.#eventToRelatedInsights.clear();
     const traceInsightsSets = this.#traceEngineModel.traceInsights(traceIndex);
-    if (traceInsightsSets) {
-      this.flameChart.setInsights(traceInsightsSets);
-      this.#sideBar.setInsights(traceInsightsSets);
-    }
+    this.flameChart.setInsights(traceInsightsSets, this.#eventToRelatedInsights);
+    this.#sideBar.setInsights(traceInsightsSets);
 
     this.#showSidebarIfRequired();
   }

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -2,17 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/components/linkifier/linkifier.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as DataGrid from '../../ui/components/data_grid/data_grid.js';
-import * as Linkifier from '../../ui/components/linkifier/linkifier.js';
+import type * as Linkifier from '../../ui/components/linkifier/linkifier.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';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Label for selector stats data table
@@ -30,7 +34,7 @@ const UIStrings = {
    *@description Tooltip description '% of slow-path non-matches'
    */
   rejectPercentageExplanation:
-      'The percentage of non-matching nodes (Match Attempts - Match Count) that couldn\'t be quickly ruled out by the bloom filter. Lower is better.',
+      'The percentage of non-matching nodes (Match Attempts - Match Count) that couldn\'t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
   /**
    *@description Column name for count of elements that the engine attempted to match against a style rule
    */
@@ -148,7 +152,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
         {
           id: SelectorTimingsKey.RejectPercentage as Lowercase<string>,
           title: i18nString(UIStrings.rejectPercentage),
-          titleElement: LitHtml.html`<span title=${i18nString(UIStrings.rejectPercentageExplanation)}>${
+          titleElement: html`<span title=${i18nString(UIStrings.rejectPercentageExplanation)}>${
               i18nString(UIStrings.rejectPercentage)}</span>`,
           sortable: true,
           widthWeighting: 1,
@@ -388,7 +392,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
             columnId: SelectorTimingsKey.Elapsed,
             value: elapsedTimeInMs,
             renderer(): LitHtml.TemplateResult {
-              return LitHtml.html`${elapsedTimeInMs.toFixed(3)}`;
+              return html`${elapsedTimeInMs.toFixed(3)}`;
             },
           },
           {columnId: SelectorTimingsKey.MatchAttempts, value: x[SelectorTimingsKey.MatchAttempts]},
@@ -397,7 +401,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
             columnId: SelectorTimingsKey.RejectPercentage,
             value: rejectPercentage,
             renderer(): LitHtml.TemplateResult {
-              return LitHtml.html`${rejectPercentage.toFixed(1)}`;
+              return html`${rejectPercentage.toFixed(1)}`;
             },
           },
           {
@@ -410,25 +414,25 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
             value: x[SelectorTimingsKey.StyleSheetId],
             renderer(): LitHtml.TemplateResult {
               if (locations === null) {
-                return LitHtml.html`<span></span>`;
+                return html`<span></span>`;
               }
               if (locations === undefined) {
-                return LitHtml.html`<span title=${i18nString(UIStrings.unableToLinkViaStyleSheetId, {
+                return html`<span title=${i18nString(UIStrings.unableToLinkViaStyleSheetId, {
                   PH1: x[SelectorTimingsKey.StyleSheetId],
                 })} aria-label=${i18nString(UIStrings.unableToLinkViaStyleSheetId, {
                   PH1: x[SelectorTimingsKey.StyleSheetId],
                 })}>${i18nString(UIStrings.unableToLink)}</span>`;
               }
-              return LitHtml.html`
+              return html`
               ${locations.map((location, itemIndex) => {
                 if (itemIndex !== locations.length - 1) {
                   // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-                  return LitHtml.html`<${Linkifier.Linkifier.Linkifier.litTagName} .data=${
-                      location as Linkifier.Linkifier.LinkifierData}></${Linkifier.Linkifier.Linkifier.litTagName}>
+                  return html`<devtools-linkifier .data=${
+                      location as Linkifier.Linkifier.LinkifierData}></devtools-linkifier>
                     <a>, </a>`;
                 }
-                return LitHtml.html`<${Linkifier.Linkifier.Linkifier.litTagName} .data=${
-                    location as Linkifier.Linkifier.LinkifierData}></${Linkifier.Linkifier.Linkifier.litTagName}>`;
+                return html`<devtools-linkifier .data=${
+                    location as Linkifier.Linkifier.LinkifierData}></devtools-linkifier>`;
               })}
               `;
             },

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

@@ -160,15 +160,15 @@ describeWithEnvironment('TimelineTreeView', function() {
       const tree = callTreeView.buildTree();
       const treeEntries = tree.children().entries();
       const groupEntry = treeEntries.next();
-      const nodeName = groupEntry.value[0];
-      const node = groupEntry.value[1];
+      const nodeName = groupEntry.value![0];
+      const node = groupEntry.value![1];
       assert.strictEqual(nodeName, 'scripting');
       assert.strictEqual(callTreeView.displayInfoForGroupNode(node).color, 'rgb(250 204 21 / 100%)');
 
       assert.isTrue(node.isGroupNode());
       const children = node.children().values();
-      assert.strictEqual(children.next().value.event.name, 'first console time');
-      assert.strictEqual(children.next().value.event.name, 'third console time');
+      assert.strictEqual(children.next().value!.event!.name, 'first console time');
+      assert.strictEqual(children.next().value!.event!.name, 'third console time');
     });
     it('groups events by category in the Bottom up Tree view', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'sync-like-timings.json.gz');
@@ -182,16 +182,16 @@ describeWithEnvironment('TimelineTreeView', function() {
       const tree = callTreeView.buildTree();
       const treeEntries = tree.children().entries();
       const groupEntry = treeEntries.next();
-      const nodeName = groupEntry.value[0];
-      const node = groupEntry.value[1];
+      const nodeName = groupEntry.value![0];
+      const node = groupEntry.value![1];
       assert.strictEqual(nodeName, 'scripting');
       assert.strictEqual(callTreeView.displayInfoForGroupNode(node).color, 'rgb(250 204 21 / 100%)');
 
       assert.isTrue(node.isGroupNode());
       const children = node.children().values();
-      assert.strictEqual(children.next().value.event.name, 'second console time');
-      assert.strictEqual(children.next().value.event.name, 'first console time');
-      assert.strictEqual(children.next().value.event.name, 'third console time');
+      assert.strictEqual(children.next().value!.event!.name, 'second console time');
+      assert.strictEqual(children.next().value!.event!.name, 'first console time');
+      assert.strictEqual(children.next().value!.event!.name, 'third console time');
     });
 
     it('can group entries by domain', async function() {

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -20,7 +20,7 @@ import * as Extensions from './extensions/extensions.js';
 import {Tracker} from './FreshRecording.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {TimelineRegExp} from './TimelineFilters.js';
-import {type TimelineSelection} from './TimelineSelection.js';
+import type {TimelineSelection} from './TimelineSelection.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
 
 const UIStrings = {