chrome-devtools-frontend 1.0.1153166 → 1.0.1155899

package/front_end/panels/sources/sources-meta.ts

@@ -14,6 +14,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Sources from './sources.js';
+import type * as SourcesComponents from './components/components.js';
 
 const UIStrings = {
   /**
@@ -412,6 +413,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/sources-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 let loadedSourcesModule: (typeof Sources|undefined);
+let loadedSourcesComponentsModule: (typeof SourcesComponents|undefined);
 
 async function loadSourcesModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
@@ -420,6 +422,13 @@ async function loadSourcesModule(): Promise<typeof Sources> {
   return loadedSourcesModule;
 }
 
+async function loadSourcesComponentsModule(): Promise<typeof SourcesComponents> {
+  if (!loadedSourcesComponentsModule) {
+    loadedSourcesComponentsModule = await import('./components/components.js');
+  }
+  return loadedSourcesComponentsModule;
+}
+
 function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (sourcesModule: typeof Sources) => T[]): T[] {
   if (loadedSourcesModule === undefined) {
     return [];
@@ -532,8 +541,8 @@ UI.ViewManager.registerViewExtension({
   title: i18nLazyString(UIStrings.breakpoints),
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   async loadView() {
-    const Sources = await loadSourcesModule();
-    return Sources.BreakpointsSidebarPane.BreakpointsSidebarPane.instance();
+    const SourcesComponents = await loadSourcesComponentsModule();
+    return SourcesComponents.BreakpointsView.BreakpointsView.instance().wrapper as UI.Widget.Widget;
   },
 });
 
@@ -1858,8 +1867,8 @@ UI.Context.registerListener({
     return [SDK.DebuggerModel.DebuggerPausedDetails];
   },
   async loadListener() {
-    const Sources = await loadSourcesModule();
-    return Sources.BreakpointsSidebarPane.BreakpointsSidebarController.instance();
+    const SourcesComponents = await loadSourcesComponentsModule();
+    return SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
   },
 });
 

package/front_end/panels/sources/sources.ts

@@ -4,7 +4,6 @@
 
 import * as AddSourceMapURLDialog from './AddSourceMapURLDialog.js';
 import * as BreakpointEditDialog from './BreakpointEditDialog.js';
-import * as BreakpointsSidebarPane from './BreakpointsSidebarPane.js';
 import * as CallStackSidebarPane from './CallStackSidebarPane.js';
 import * as CoveragePlugin from './CoveragePlugin.js';
 import * as CSSPlugin from './CSSPlugin.js';
@@ -35,7 +34,6 @@ import * as WatchExpressionsSidebarPane from './WatchExpressionsSidebarPane.js';
 export {
   AddSourceMapURLDialog,
   BreakpointEditDialog,
-  BreakpointsSidebarPane,
   CallStackSidebarPane,
   CoveragePlugin,
   CSSPlugin,

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -145,7 +145,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private currentLevel: number;
 
   // The Performance and the Timeline models are expected to be
-  // deprecrated in favor of using traceEngineData (new RPP engine) only
+  // deprecated in favor of using traceEngineData (new RPP engine) only
   // as part of the work in crbug.com/1386091. For this reason they
   // have the "legacy" prefix on their name.
   private legacyPerformanceModel: PerformanceModel|null;

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -10,6 +10,7 @@ import timelineFlamechartPopoverStyles from './timelineFlamechartPopover.css.js'
 
 import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import type * as TraceEngine from '../../models/trace/trace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -29,8 +30,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartNetworkDataProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.FlameChartDataProvider {
-  private readonly font: string;
-  private readonly style: {
+  readonly #font: string;
+  readonly #style: {
     padding: number,
     height: number,
     collapsible: boolean,
@@ -42,98 +43,107 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     useDecoratorsForOverview: boolean,
     shareHeaderLine: boolean,
   };
-  private group: PerfUI.FlameChart.Group;
-  private minimumBoundaryInternal: number;
-  private maximumBoundary: number;
-  private timeSpan: number;
-  private requests: TimelineModel.TimelineModel.NetworkRequest[];
-  private maxLevel: number;
-  private model?: TimelineModel.TimelineModel.TimelineModelImpl|null;
+  #group: PerfUI.FlameChart.Group;
+  #minimumBoundaryInternal: number;
+  #maximumBoundary: number;
+  #timeSpan: number;
+  #requests: TimelineModel.TimelineModel.NetworkRequest[];
+  #maxLevel: number;
+  #legacyTimelineModel?: TimelineModel.TimelineModel.TimelineModelImpl|null;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private timelineDataInternal?: any;
-  private startTime?: number;
-  private endTime?: number;
-  private lastSelection?: Selection;
-  private priorityToValue?: Map<string, number>;
+  #timelineDataInternal?: any;
+  #startTime?: number;
+  #endTime?: number;
+  #lastSelection?: Selection;
+  #priorityToValue?: Map<string, number>;
+  // Ignored during the migration to new trace data engine.
+  /* eslint-disable-next-line no-unused-private-class-members */
+  #traceEngineData: TraceEngine.TraceModel.PartialTraceParseDataDuringMigration|null;
   constructor() {
-    this.font = `${PerfUI.Font.DEFAULT_FONT_SIZE} ${PerfUI.Font.getFontFamilyForCanvas()}`;
-    this.setModel(null);
-    this.style = {
+    this.#font = `${PerfUI.Font.DEFAULT_FONT_SIZE} ${PerfUI.Font.getFontFamilyForCanvas()}`;
+    this.#style = {
       padding: 4,
       height: 17,
       collapsible: true,
       color: ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary'),
-      font: this.font,
+      font: this.#font,
       backgroundColor: ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'),
       nestingLevel: 0,
       useFirstLineForOverview: false,
       useDecoratorsForOverview: true,
       shareHeaderLine: false,
     };
-    this.group =
-        ({startLevel: 0, name: i18nString(UIStrings.network), expanded: false, style: this.style} as
+    this.#group =
+        ({startLevel: 0, name: i18nString(UIStrings.network), expanded: false, style: this.#style} as
          PerfUI.FlameChart.Group);
-    this.minimumBoundaryInternal = 0;
-    this.maximumBoundary = 0;
-    this.timeSpan = 0;
-    this.requests = [];
-    this.maxLevel = 0;
+    this.#minimumBoundaryInternal = 0;
+    this.#maximumBoundary = 0;
+    this.#timeSpan = 0;
+    this.#requests = [];
+    this.#maxLevel = 0;
+
+    this.#legacyTimelineModel = null;
+    this.#traceEngineData = null;
 
     // In the event of a theme change, these colors must be recalculated.
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
-      this.style.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
-      this.style.backgroundColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
+      this.#style.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+      this.#style.backgroundColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
     });
   }
 
-  setModel(performanceModel: PerformanceModel|null): void {
-    this.model = performanceModel && performanceModel.timelineModel();
-    this.timelineDataInternal = null;
+  setModel(
+      performanceModel: PerformanceModel|null,
+      traceEngineData: TraceEngine.TraceModel.PartialTraceParseDataDuringMigration|null): void {
+    this.#timelineDataInternal = null;
+
+    this.#legacyTimelineModel = performanceModel && performanceModel.timelineModel();
+    this.#traceEngineData = traceEngineData;
   }
 
   isEmpty(): boolean {
     this.timelineData();
-    return !this.requests.length;
+    return !this.#requests.length;
   }
 
   maxStackDepth(): number {
-    return this.maxLevel;
+    return this.#maxLevel;
   }
 
   timelineData(): PerfUI.FlameChart.FlameChartTimelineData {
-    if (this.timelineDataInternal) {
-      return this.timelineDataInternal;
+    if (this.#timelineDataInternal) {
+      return this.#timelineDataInternal;
     }
-    this.requests = [];
-    this.timelineDataInternal = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
-    if (this.model) {
-      this.appendTimelineData();
+    this.#requests = [];
+    this.#timelineDataInternal = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
+    if (this.#legacyTimelineModel) {
+      this.#appendTimelineData();
     }
-    return this.timelineDataInternal;
+    return this.#timelineDataInternal;
   }
 
   minimumBoundary(): number {
-    return this.minimumBoundaryInternal;
+    return this.#minimumBoundaryInternal;
   }
 
   totalTime(): number {
-    return this.timeSpan;
+    return this.#timeSpan;
   }
 
   setWindowTimes(startTime: number, endTime: number): void {
-    this.startTime = startTime;
-    this.endTime = endTime;
-    this.updateTimelineData();
+    this.#startTime = startTime;
+    this.#endTime = endTime;
+    this.#updateTimelineData();
   }
 
   createSelection(index: number): TimelineSelection|null {
     if (index === -1) {
       return null;
     }
-    const request = this.requests[index];
-    this.lastSelection = new Selection(TimelineSelection.fromNetworkRequest(request), index);
-    return this.lastSelection.timelineSelection;
+    const request = this.#requests[index];
+    this.#lastSelection = new Selection(TimelineSelection.fromNetworkRequest(request), index);
+    return this.#lastSelection.timelineSelection;
   }
 
   entryIndexForSelection(selection: TimelineSelection|null): number {
@@ -141,22 +151,22 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
       return -1;
     }
 
-    if (this.lastSelection && this.lastSelection.timelineSelection.object === selection.object) {
-      return this.lastSelection.entryIndex;
+    if (this.#lastSelection && this.#lastSelection.timelineSelection.object === selection.object) {
+      return this.#lastSelection.entryIndex;
     }
 
     if (!TimelineSelection.isNetworkRequestSelection(selection.object)) {
       return -1;
     }
-    const index = this.requests.indexOf(selection.object);
+    const index = this.#requests.indexOf(selection.object);
     if (index !== -1) {
-      this.lastSelection = new Selection(TimelineSelection.fromNetworkRequest(selection.object), index);
+      this.#lastSelection = new Selection(TimelineSelection.fromNetworkRequest(selection.object), index);
     }
     return index;
   }
 
   entryColor(index: number): string {
-    const request = (this.requests[index] as TimelineModel.TimelineModel.NetworkRequest);
+    const request = (this.#requests[index] as TimelineModel.TimelineModel.NetworkRequest);
     const category = TimelineUIUtils.networkRequestCategory(request);
     return TimelineUIUtils.networkCategoryColor(category);
   }
@@ -166,19 +176,19 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
   }
 
   entryTitle(index: number): string|null {
-    const request = (this.requests[index] as TimelineModel.TimelineModel.NetworkRequest);
+    const request = (this.#requests[index] as TimelineModel.TimelineModel.NetworkRequest);
     const parsedURL = new Common.ParsedURL.ParsedURL(request.url || '');
     return parsedURL.isValid ? `${parsedURL.displayName} (${parsedURL.host})` : request.url || null;
   }
 
   entryFont(_index: number): string|null {
-    return this.font;
+    return this.#font;
   }
 
   decorateEntry(
       index: number, context: CanvasRenderingContext2D, text: string|null, barX: number, barY: number, barWidth: number,
       barHeight: number, unclippedBarX: number, timeToPixelRatio: number): boolean {
-    const request = (this.requests[index] as TimelineModel.TimelineModel.NetworkRequest);
+    const request = (this.#requests[index] as TimelineModel.TimelineModel.NetworkRequest);
     if (!request.timing) {
       return false;
     }
@@ -223,7 +233,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     context.stroke();
 
     if (typeof request.priority === 'string') {
-      const color = this.colorForPriority(request.priority);
+      const color = this.#colorForPriority(request.priority);
       if (color) {
         context.fillStyle = color;
         context.fillRect(sendStart + 0.5, barY + 0.5, 3.5, 3.5);
@@ -258,7 +268,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
 
   prepareHighlightedEntryInfo(index: number): Element|null {
     const /** @const */ maxURLChars = 80;
-    const request = (this.requests[index] as TimelineModel.TimelineModel.NetworkRequest);
+    const request = (this.#requests[index] as TimelineModel.TimelineModel.NetworkRequest);
     if (!request.url) {
       return null;
     }
@@ -278,15 +288,15 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
       const div = (contents.createChild('span') as HTMLElement);
       div.textContent =
           PerfUI.NetworkPriorities.uiLabelForNetworkPriority((request.priority as Protocol.Network.ResourcePriority));
-      div.style.color = this.colorForPriority(request.priority) || 'black';
+      div.style.color = this.#colorForPriority(request.priority) || 'black';
     }
     contents.createChild('span').textContent = Platform.StringUtilities.trimMiddle(request.url, maxURLChars);
     return element;
   }
 
-  private colorForPriority(priority: string): string|null {
-    if (!this.priorityToValue) {
-      this.priorityToValue = new Map([
+  #colorForPriority(priority: string): string|null {
+    if (!this.#priorityToValue) {
+      this.#priorityToValue = new Map([
         [Protocol.Network.ResourcePriority.VeryLow, 1],
         [Protocol.Network.ResourcePriority.Low, 2],
         [Protocol.Network.ResourcePriority.Medium, 3],
@@ -294,70 +304,71 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
         [Protocol.Network.ResourcePriority.VeryHigh, 5],
       ]);
     }
-    const value = this.priorityToValue.get(priority);
+    const value = this.#priorityToValue.get(priority);
     return value ? `hsla(214, 80%, 50%, ${value / 5})` : null;
   }
 
-  private appendTimelineData(): void {
-    if (this.model) {
-      this.minimumBoundaryInternal = this.model.minimumRecordTime();
-      this.maximumBoundary = this.model.maximumRecordTime();
-      this.timeSpan = this.model.isEmpty() ? 1000 : this.maximumBoundary - this.minimumBoundaryInternal;
-      this.model.networkRequests().forEach(this.appendEntry.bind(this));
-      this.updateTimelineData();
+  #appendTimelineData(): void {
+    if (this.#legacyTimelineModel) {
+      this.#minimumBoundaryInternal = this.#legacyTimelineModel.minimumRecordTime();
+      this.#maximumBoundary = this.#legacyTimelineModel.maximumRecordTime();
+      this.#timeSpan =
+          this.#legacyTimelineModel.isEmpty() ? 1000 : this.#maximumBoundary - this.#minimumBoundaryInternal;
+      this.#legacyTimelineModel.networkRequests().forEach(this.#appendEntry.bind(this));
+      this.#updateTimelineData();
     }
   }
 
-  private updateTimelineData(): void {
-    if (!this.timelineDataInternal) {
+  #updateTimelineData(): void {
+    if (!this.#timelineDataInternal) {
       return;
     }
     const lastTimeByLevel = [];
     let maxLevel = 0;
-    for (let i = 0; i < this.requests.length; ++i) {
-      const r = this.requests[i];
+    for (let i = 0; i < this.#requests.length; ++i) {
+      const r = this.#requests[i];
       const beginTime = r.beginTime();
-      const startTime = (this.startTime as number);
-      const endTime = (this.endTime as number);
+      const startTime = (this.#startTime as number);
+      const endTime = (this.#endTime as number);
       const visible = beginTime < endTime && r.endTime > startTime;
       if (!visible) {
-        this.timelineDataInternal.entryLevels[i] = -1;
+        this.#timelineDataInternal.entryLevels[i] = -1;
         continue;
       }
       while (lastTimeByLevel.length && lastTimeByLevel[lastTimeByLevel.length - 1] <= beginTime) {
         lastTimeByLevel.pop();
       }
-      this.timelineDataInternal.entryLevels[i] = lastTimeByLevel.length;
+      this.#timelineDataInternal.entryLevels[i] = lastTimeByLevel.length;
       lastTimeByLevel.push(r.endTime);
       maxLevel = Math.max(maxLevel, lastTimeByLevel.length);
     }
-    for (let i = 0; i < this.requests.length; ++i) {
-      if (this.timelineDataInternal.entryLevels[i] === -1) {
-        this.timelineDataInternal.entryLevels[i] = maxLevel;
+    for (let i = 0; i < this.#requests.length; ++i) {
+      if (this.#timelineDataInternal.entryLevels[i] === -1) {
+        this.#timelineDataInternal.entryLevels[i] = maxLevel;
       }
     }
-    this.timelineDataInternal = PerfUI.FlameChart.FlameChartTimelineData.create({
-      entryLevels: this.timelineDataInternal.entryLevels,
-      entryTotalTimes: this.timelineDataInternal.entryTotalTimes,
-      entryStartTimes: this.timelineDataInternal.entryStartTimes,
-      groups: [this.group],
+    this.#timelineDataInternal = PerfUI.FlameChart.FlameChartTimelineData.create({
+      entryLevels: this.#timelineDataInternal.entryLevels,
+      entryTotalTimes: this.#timelineDataInternal.entryTotalTimes,
+      entryStartTimes: this.#timelineDataInternal.entryStartTimes,
+      groups: [this.#group],
     });
-    this.maxLevel = maxLevel;
+    this.#maxLevel = maxLevel;
   }
 
-  private appendEntry(request: TimelineModel.TimelineModel.NetworkRequest): void {
-    this.requests.push(request);
-    this.timelineDataInternal.entryStartTimes.push(request.beginTime());
-    this.timelineDataInternal.entryTotalTimes.push(request.endTime - request.beginTime());
-    this.timelineDataInternal.entryLevels.push(this.requests.length - 1);
+  #appendEntry(request: TimelineModel.TimelineModel.NetworkRequest): void {
+    this.#requests.push(request);
+    this.#timelineDataInternal.entryStartTimes.push(request.beginTime());
+    this.#timelineDataInternal.entryTotalTimes.push(request.endTime - request.beginTime());
+    this.#timelineDataInternal.entryLevels.push(this.#requests.length - 1);
   }
 
   preferredHeight(): number {
-    return this.style.height * (this.group.expanded ? Platform.NumberUtilities.clamp(this.maxLevel + 1, 4, 8.5) : 1);
+    return this.#style.height * (this.#group.expanded ? Platform.NumberUtilities.clamp(this.#maxLevel + 1, 4, 8.5) : 1);
   }
 
   isExpanded(): boolean {
-    return this.group && Boolean(this.group.expanded);
+    return this.#group && Boolean(this.#group.expanded);
   }
 
   formatValue(value: number, precision?: number): string {
@@ -373,10 +384,10 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   navStartTimes(): Map<any, any> {
-    if (!this.model) {
+    if (!this.#legacyTimelineModel) {
       return new Map();
     }
 
-    return this.model.navStartTimes();
+    return this.#legacyTimelineModel.navStartTimes();
   }
 }

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -200,7 +200,7 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.model = model;
     this.#selectedEvents = null;
     this.mainDataProvider.setModel(this.model, newTraceEngineData);
-    this.networkDataProvider.setModel(this.model);
+    this.networkDataProvider.setModel(this.model, newTraceEngineData);
     if (this.model) {
       this.eventListeners = [
         this.model.addEventListener(PerformanceModelEvents.WindowChanged, this.onWindowChanged, this),

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -99,6 +99,11 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
     if (this.pendingSnapshot) {
       snapshotPromise = Promise.resolve({rect: null, snapshot: this.pendingSnapshot});
     } else if (this.event && this.event.name === TimelineModel.TimelineModel.RecordType.Paint) {
+      // When we process events (TimelineModel#processEvent) and find a
+      // snapshot event, we look for the last paint that occurred and link the
+      // snapshot to that paint event. That is why here if the event is a Paint
+      // event, we look to see if it has had a matching picture event set for
+      // it.
       const picture =
           (TimelineModel.TimelineModel.EventOnTimelineData.forEvent(this.event).picture as
            SDK.TracingModel.ObjectSnapshot);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -324,9 +324,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private cpuThrottlingSelect?: UI.Toolbar.ToolbarComboBox;
   private fileSelectorElement?: HTMLInputElement;
   private selection?: TimelineSelection|null;
-  private primaryTargetPromiseCallback = (_target: SDK.Target.Target): void => {};
-  private primaryTargetPromise = new Promise<SDK.Target.Target>(res => {
-    this.primaryTargetPromiseCallback = res;
+  private primaryPageTargetPromiseCallback = (_target: SDK.Target.Target): void => {};
+  private primaryPageTargetPromise = new Promise<SDK.Target.Target>(res => {
+    this.primaryPageTargetPromiseCallback = res;
   });
 
   #traceEngineModel: TraceEngine.TraceModel.Model<typeof TraceEngine.TraceModel.ENABLED_TRACE_HANDLERS>;
@@ -430,7 +430,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         if (target !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
           return;
         }
-        this.primaryTargetPromiseCallback(target);
+        this.primaryPageTargetPromiseCallback(target);
       },
       targetRemoved: (_: SDK.Target.Target) => {},
     });
@@ -870,16 +870,16 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
       const MAX_WAIT_FOR_TARGET_MS = 2000;
       const timeoutPromise = new Promise(res => setTimeout(res, MAX_WAIT_FOR_TARGET_MS));
-      const primaryTarget = await Promise.race([this.primaryTargetPromise, timeoutPromise]);
-      if (!(primaryTarget instanceof SDK.Target.Target)) {
+      const primaryPageTarget = await Promise.race([this.primaryPageTargetPromise, timeoutPromise]);
+      if (!(primaryPageTarget instanceof SDK.Target.Target)) {
         this.recordingFailed(i18nString(UIStrings.couldNotStart));
         return;
       }
 
       if (UIDevtoolsUtils.isUiDevTools()) {
-        this.controller = new UIDevtoolsController(primaryTarget, this);
+        this.controller = new UIDevtoolsController(primaryPageTarget, this);
       } else {
-        this.controller = new TimelineController(primaryTarget, this);
+        this.controller = new TimelineController(primaryPageTarget, this);
       }
       this.setUIControlsEnabled(false);
       this.hideLandingPage();

package/front_end/ui/legacy/UIUtils.ts

@@ -1201,7 +1201,7 @@ export class CheckboxLabel extends HTMLSpanElement {
     element.checkboxElement.checked = Boolean(checked);
     if (title !== undefined) {
       element.textElement.textContent = title;
-      ARIAUtils.setAccessibleName(element.checkboxElement, title);
+      element.checkboxElement.title = title;
       if (subtitle !== undefined) {
         element.textElement.createChild('div', 'dt-checkbox-subtitle').textContent = subtitle;
       }

package/front_end/ui/legacy/components/perf_ui/.eslintrc.js

@@ -0,0 +1,18 @@
+// Copyright 2023 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+const path = require('path');
+const rulesDirPlugin = require('eslint-plugin-rulesdir');
+rulesDirPlugin.RULES_DIR = path.join(__dirname, '..', '..', '..', '..', '..', 'scripts', 'eslint_rules', 'lib');
+
+module.exports = {
+  'rules' : {
+    // Enable tracking of canvas save() and
+    // restore() calls to try and catch bugs. Only
+    // enabled in this folder because it is an
+    // expensive rule to run and we do not need it
+    // for any code that doesn't use Canvas.
+    'rulesdir/canvas_context_tracking' : 2,
+  }
+};

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -1148,7 +1148,11 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const barWidth = overrides?.width || this.#eventBarWidth(timelineData, entryIndex);
     // We purposefully leave a 1px gap off the height so there is a small gap
     // visually between events vertically in the panel.
-    context.rect(barX, barY, barWidth, barHeight - 1);
+    // Similarly, we leave 0.5 pixels off the width so that there is a small
+    // gap between events. Otherwise if a trace has a lot of events it looks
+    // like one solid block and is not very easy to distinguish when events
+    // start and end.
+    context.rect(barX, barY, barWidth - 0.5, barHeight - 1);
   }
 
   #eventBarHeight(timelineData: FlameChartTimelineData, entryIndex: number): number {

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -219,8 +219,11 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
       return;
     }
 
-    this.windowStartTime = event.data.rawStartValue;
-    this.windowEndTime = event.data.rawEndValue;
+    this.windowStartTime =
+        event.data.rawStartValue === this.overviewCalculator.minimumBoundary() ? 0 : event.data.rawStartValue;
+    this.windowEndTime =
+        event.data.rawEndValue === this.overviewCalculator.maximumBoundary() ? Infinity : event.data.rawEndValue;
+
     const windowTimes = {startTime: this.windowStartTime, endTime: this.windowEndTime};
 
     this.dispatchEventToListeners(Events.WindowChanged, windowTimes);

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -234,6 +234,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
       className: options?.className,
       tabStop: options?.tabStop,
       inlineFrameIndex: options?.inlineFrameIndex ?? 0,
+      userMetric: options?.userMetric,
     };
     const {columnNumber, className = ''} = linkifyURLOptions;
     if (sourceURL) {
@@ -265,6 +266,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
         fallbackAnchor && fallbackAnchor.textContent ? fallbackAnchor.textContent : '', className, createLinkOptions);
     linkInfo.enableDecorator = this.useLinkDecorator;
     linkInfo.fallback = fallbackAnchor;
+    linkInfo.userMetric = options?.userMetric;
 
     const pool = this.locationPoolByTarget.get(rawLocation.debuggerModel.target());
     if (!pool) {
@@ -303,6 +305,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
       showColumnNumber: Boolean(options?.showColumnNumber),
       inlineFrameIndex: options?.inlineFrameIndex ?? 0,
       tabStop: options?.tabStop,
+      userMetric: options?.userMetric,
     };
 
     return scriptLink || Linkifier.linkifyURL(sourceURL, linkifyURLOptions);
@@ -543,6 +546,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
     if (columnNumber) {
       linkInfo.columnNumber = columnNumber;
     }
+    linkInfo.userMetric = options?.userMetric;
     return link;
   }
 
@@ -692,6 +696,9 @@ export class Linkifier implements SDK.TargetManager.Observer {
     const actions = Linkifier.linkActions(linkInfo);
     if (actions.length) {
       void actions[0].handler.call(null);
+      if (linkInfo.userMetric) {
+        Host.userMetrics.actionTaken(linkInfo.userMetric);
+      }
       return true;
     }
     return false;
@@ -992,6 +999,7 @@ export interface _LinkInfo {
   inlineFrameIndex: number;
   revealable: Object|null;
   fallback: Element|null;
+  userMetric?: Host.UserMetrics.Action;
 }
 
 export interface LinkifyURLOptions {
@@ -1005,6 +1013,7 @@ export interface LinkifyURLOptions {
   maxLength?: number;
   tabStop?: boolean;
   bypassURLTrimming?: boolean;
+  userMetric?: Host.UserMetrics.Action;
 }
 
 export interface LinkifyOptions {
@@ -1013,6 +1022,7 @@ export interface LinkifyOptions {
   showColumnNumber?: boolean;
   inlineFrameIndex: number;
   tabStop?: boolean;
+  userMetric?: Host.UserMetrics.Action;
 
   /**
    * {@link LinkDisplayOptions.revealBreakpoint}

package/package.json

@@ -60,5 +60,5 @@
     "unittest": "vpython scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1153166"
+  "version": "1.0.1155899"
 }