chrome-devtools-frontend 1.0.950850 → 1.0.952284

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -172,12 +172,13 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
 
   private onTypeChanged(): void {
     const type = this.breakpointType;
+    this.isLogpoint = type === BreakpointType.Logpoint;
     if (type === BreakpointType.Breakpoint) {
       this.finishEditing(true, '');
-    } else {
-      this.editor.dispatch({effects: this.placeholderCompartment.reconfigure(this.getPlaceholder())});
-      this.updateTooltip();
+      return;
     }
+    this.editor.dispatch({effects: this.placeholderCompartment.reconfigure(this.getPlaceholder())});
+    this.updateTooltip();
   }
 
   private get breakpointType(): string|null {

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -124,7 +124,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
 
     titleElement.textContent = uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '');
     this.renderSubtitleElement(subtitleElement, fullDisplayName.substring(0, fileNameIndex + 1));
-    /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), fullDisplayName);
+    UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), fullDisplayName);
     const ranges = [];
     for (let i = 0; i < indexes.length; ++i) {
       ranges.push({offset: indexes[i], length: 1});
@@ -151,7 +151,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     first.textContent = text.substring(0, splitPosition);
     const second = element.createChild('div', 'second-part');
     second.textContent = text.substring(splitPosition);
-    /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((element as HTMLElement), text);
+    UI.Tooltip.Tooltip.install((element as HTMLElement), text);
   }
 
   selectItem(itemIndex: number|null, promptValue: string): void {

package/front_end/panels/sources/NavigatorView.ts

@@ -559,7 +559,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       if (target) {
         return this.domainNode(uiSourceCode, project, target, frame, projectOrigin);
       }
-      return /** @type {!NavigatorTreeNode} */ this.rootNode.child(project.id()) as NavigatorTreeNode;
+      return this.rootNode.child(project.id()) as NavigatorTreeNode;
     }
 
     const parentNode =
@@ -982,15 +982,11 @@ const boostOrderForNode = new WeakSet<UI.TreeOutline.TreeElement>();
 export class NavigatorFolderTreeElement extends UI.TreeOutline.TreeElement {
   private readonly nodeType: string;
   private readonly navigatorView: NavigatorView;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private hoverCallback: ((arg0: boolean) => any)|undefined;
+  private hoverCallback: ((arg0: boolean) => void)|undefined;
   node!: NavigatorTreeNode;
   private hovered?: boolean;
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  constructor(navigatorView: NavigatorView, type: string, title: string, hoverCallback?: ((arg0: boolean) => any)) {
+  constructor(navigatorView: NavigatorView, type: string, title: string, hoverCallback?: ((arg0: boolean) => void)) {
     super('', true);
     this.listItemElement.classList.add('navigator-' + type + '-tree-item', 'navigator-folder-tree-item');
     UI.ARIAUtils.setAccessibleName(this.listItemElement, `${title}, ${type}`);
@@ -1392,9 +1388,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     }
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rename(callback?: ((arg0: boolean) => any)): void {
+  rename(callback?: ((arg0: boolean) => void)): void {
     if (!this.treeElement) {
       return;
     }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -284,8 +284,7 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
     }
 
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      const valueNode = /** @type {!Bindings.DebuggerLanguagePlugins.ValueNode} */ obj;
-      return valueNode.inspectableAddress !== undefined;
+      return obj.inspectableAddress !== undefined;
     }
 
     return false;
@@ -307,7 +306,7 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
     let memoryObj: SDK.RemoteObject.RemoteObject = obj;
 
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      const valueNode = /** @type {!Bindings.DebuggerLanguagePlugins.ValueNode} */ obj;
+      const valueNode = obj;
       address = valueNode.inspectableAddress || 0;
       const callFrame = valueNode.callFrame;
       const response = await obj.debuggerModel().agent.invoke_evaluateOnCallFrame({

package/front_end/panels/sources/SourceMapNamesResolver.ts

@@ -390,16 +390,16 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
 
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any
-let _scopeResolvedForTest: (...arg0: any[]) => any = function(): void {};
+let _scopeResolvedForTest: (...arg0: any[]) => void = function(): void {};
 
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any
-export const getScopeResolvedForTest = (): (...arg0: any[]) => any => {
+export const getScopeResolvedForTest = (): (...arg0: any[]) => void => {
   return _scopeResolvedForTest;
 };
 
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any
-export const setScopeResolvedForTest = (scope: (...arg0: any[]) => any): void => {
+export const setScopeResolvedForTest = (scope: (...arg0: any[]) => void): void => {
   _scopeResolvedForTest = scope;
 };

package/front_end/panels/sources/SourcesPanel.ts

@@ -956,9 +956,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
       return;
     }
     const openText = i18nString(UIStrings.openInSourcesPanel);
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const callback: () => any = this.showUILocation.bind(this, uiSourceCode.uiLocation(0, 0));
+    const callback: () => void = this.showUILocation.bind(this, uiSourceCode.uiLocation(0, 0));
     contextMenu.revealSection().appendItem(openText, callback);
   }
 

package/front_end/panels/sources/SourcesView.ts

@@ -596,9 +596,6 @@ export type EventTypes = {
   [Events.EditorSelected]: Workspace.UISourceCode.UISourceCode,
 };
 
-/**
- * @interface
- */
 export interface EditorAction {
   getOrCreateButton(sourcesView: SourcesView): UI.Toolbar.ToolbarButton;
 }

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -60,9 +60,6 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/TabbedEditorContainer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-/**
- * @interface
- */
 export interface TabbedEditorContainerDelegate {
   viewForFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): UI.Widget.Widget;
 
@@ -162,7 +159,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   fileViews(): UI.Widget.Widget[] {
-    return /** @type {!Array.<!UI.Widget.Widget>} */ this.tabbedPane.tabViews() as UI.Widget.Widget[];
+    return this.tabbedPane.tabViews();
   }
 
   leftToolbar(): UI.Toolbar.Toolbar {

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -259,8 +259,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       nestingLevel: 0,
       shareHeaderLine: true,
     };
-    return /** @type {!PerfUI.FlameChart.GroupStyle} */ Object.assign(defaultGroupStyle, extra) as
-        PerfUI.FlameChart.GroupStyle;
+    return Object.assign(defaultGroupStyle, extra);
   }
 
   setModel(performanceModel: PerformanceModel|null): void {
@@ -933,9 +932,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   private entryType(entryIndex: number): EntryType {
-    return this.entryTypeByLevel[/** @type {!PerfUI.FlameChart.TimelineData} */ (
-                                     this.timelineDataInternal as PerfUI.FlameChart.TimelineData)
-                                     .entryLevels[entryIndex]];
+    return this.entryTypeByLevel[(this.timelineDataInternal as PerfUI.FlameChart.TimelineData).entryLevels[entryIndex]];
   }
 
   prepareHighlightedEntryInfo(entryIndex: number): Element|null {

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -101,7 +101,6 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     if (this.timelineDataInternal) {
       return this.timelineDataInternal;
     }
-    /** @type {!Array<!TimelineModel.TimelineModel.NetworkRequest>} */
     this.requests = [];
     this.timelineDataInternal = new PerfUI.FlameChart.TimelineData([], [], [], []);
     if (this.model) {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -46,7 +46,6 @@ class MainSplitWidget extends UI.SplitWidget.SplitWidget {
   }
 
   setWebVitals(webVitals: WebVitalsIntegrator): void {
-    /** @type {!WebVitalsIntegrator} */
     this.webVitals = webVitals;
     this.webVitals.setMinimumSize(0, 120);
   }

package/front_end/panels/timeline/TimelineLoader.ts

@@ -256,9 +256,6 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
 
 export const TransferChunkLengthBytes = 5000000;
 
-/**
- * @interface
- */
 export interface Client {
   loadingStarted(): void;
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -772,7 +772,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   private async getCoverageViewWidget(): Promise<Coverage.CoverageView.CoverageView> {
     const view = (UI.ViewManager.ViewManager.instance().view('coverage') as UI.View.View);
-    return /** @type {!Coverage.CoverageView.CoverageView} */ await view.widget() as Coverage.CoverageView.CoverageView;
+    return await view.widget() as Coverage.CoverageView.CoverageView;
   }
 
   private async startRecording(): Promise<void> {
@@ -1160,8 +1160,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private frameForSelection(selection: TimelineSelection): TimelineModel.TimelineFrameModel.TimelineFrame|null {
     switch (selection.type()) {
       case TimelineSelection.Type.Frame:
-        return /** @type {!TimelineModel.TimelineFrameModel.TimelineFrame} */ selection.object() as
-            TimelineModel.TimelineFrameModel.TimelineFrame;
+        return selection.object() as TimelineModel.TimelineFrameModel.TimelineFrame;
       case TimelineSelection.Type.Range:
         return null;
       case TimelineSelection.Type.TraceEvent:

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1521,7 +1521,7 @@ export class TimelineUIUtils {
       if (!color) {
         throw new Error('Unable to parse color from TimelineUIUtils.categories().scripting.color');
       }
-      return /** @type {string} */ color.setAlpha(0.3).asString(null) as string;
+      return color.setAlpha(0.3).asString(null) as string;
     }
 
     return color;

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

@@ -66,40 +66,40 @@ abstract class WebVitalsLane {
 }
 
 export class WebVitalsEventLane extends WebVitalsLane {
-  private markers: readonly Marker[] = [];
-  private selectedMarker: Marker|null = null;
-  private hoverMarker: Marker|null = null;
-  private labelMetrics: TextMetrics;
-  private label: string;
-  private getMarkerType: GetMarkerTypeCallback;
-  private getMarkerOverlay?: GetMarkerOverlayCallback;
+  #markers: readonly Marker[] = [];
+  #selectedMarker: Marker|null = null;
+  #hoverMarker: Marker|null = null;
+  #labelMetrics: TextMetrics;
+  #label: string;
+  #getMarkerType: GetMarkerTypeCallback;
+  #getMarkerOverlay?: GetMarkerOverlayCallback;
 
   constructor(
       timeline: WebVitalsTimeline, label: string, getMarkerType: GetMarkerTypeCallback,
       getMarkerOverlay?: GetMarkerOverlayCallback) {
     super(timeline);
     this.context = timeline.getContext();
-    this.label = label;
-    this.getMarkerType = getMarkerType;
-    this.getMarkerOverlay = getMarkerOverlay;
-    this.labelMetrics = this.measureLabel(this.label);
+    this.#label = label;
+    this.#getMarkerType = getMarkerType;
+    this.#getMarkerOverlay = getMarkerOverlay;
+    this.#labelMetrics = this.#measureLabel(this.#label);
   }
 
   handlePointerMove(x: number|null): void {
-    const prevHoverMarker = this.hoverMarker;
+    const prevHoverMarker = this.#hoverMarker;
     if (x === null) {
-      this.hoverMarker = null;
+      this.#hoverMarker = null;
     } else {
-      this.hoverMarker = this.markers.find(m => {
+      this.#hoverMarker = this.#markers.find(m => {
         const tX = this.tX(m.timestamp);
         return tX - 5 <= x && x <= tX + m.widthIncludingLabel;
       }) ||
           null;
     }
 
-    if (prevHoverMarker !== this.hoverMarker) {
-      if (this.hoverMarker && this.getMarkerOverlay) {
-        this.timeline.showOverlay(this.getMarkerOverlay(this.hoverMarker));
+    if (prevHoverMarker !== this.#hoverMarker) {
+      if (this.#hoverMarker && this.#getMarkerOverlay) {
+        this.timeline.showOverlay(this.#getMarkerOverlay(this.#hoverMarker));
       } else {
         this.timeline.hideOverlay();
       }
@@ -107,16 +107,16 @@ export class WebVitalsEventLane extends WebVitalsLane {
   }
 
   handleClick(_: number|null): void {
-    this.selectedMarker = this.hoverMarker;
+    this.#selectedMarker = this.#hoverMarker;
   }
 
   setEvents(markers: readonly Event[]): void {
-    this.hoverMarker = null;
-    this.selectedMarker = null;
-    this.markers = markers.map(e => this.getMarker(e));
+    this.#hoverMarker = null;
+    this.#selectedMarker = null;
+    this.#markers = markers.map(e => this.#getMarker(e));
   }
 
-  private measureLabel(label: string): TextMetrics {
+  #measureLabel(label: string): TextMetrics {
     this.context.save();
     this.context.font = '11px ' + Host.Platform.fontFamily();
     const textMetrics = this.context.measureText(label);
@@ -124,7 +124,7 @@ export class WebVitalsEventLane extends WebVitalsLane {
     return textMetrics;
   }
 
-  private measureTimestamp(timestamp: string): TextMetrics {
+  #measureTimestamp(timestamp: string): TextMetrics {
     this.context.save();
     this.context.font = '11px ' + Host.Platform.fontFamily();
     const textMetrics = this.context.measureText(timestamp);
@@ -132,12 +132,12 @@ export class WebVitalsEventLane extends WebVitalsLane {
     return textMetrics;
   }
 
-  private getMarker(event: Event): Marker {
-    const markerType = this.getMarkerType(event);
+  #getMarker(event: Event): Marker {
+    const markerType = this.#getMarkerType(event);
     const timestamp = this.timeline.getTimeSinceLastMainFrameNavigation(event.timestamp);
     const timestampLabel = i18n.TimeUtilities.preciseMillisToString(timestamp, 1);
-    const timestampMetrics = this.measureTimestamp(timestampLabel);
-    const widthIncludingLabel = 10 + 5 + this.labelMetrics.width + 5;
+    const timestampMetrics = this.#measureTimestamp(timestampLabel);
+    const widthIncludingLabel = 10 + 5 + this.#labelMetrics.width + 5;
     const widthIncludingTimestamp = widthIncludingLabel + 5 + timestampMetrics.width;
 
     return {
@@ -150,7 +150,7 @@ export class WebVitalsEventLane extends WebVitalsLane {
     };
   }
 
-  private renderLabel(position: number, label: string, textMetrics: TextMetrics): void {
+  #renderLabel(position: number, label: string, textMetrics: TextMetrics): void {
     this.context.save();
     this.context.font = '11px ' + Host.Platform.fontFamily();
     const height = textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent;
@@ -161,7 +161,7 @@ export class WebVitalsEventLane extends WebVitalsLane {
     this.context.restore();
   }
 
-  private renderTimestamp(position: number, textWidth: number, timestamp: string, textMetrics: TextMetrics): void {
+  #renderTimestamp(position: number, textWidth: number, timestamp: string, textMetrics: TextMetrics): void {
     this.context.save();
     this.context.font = '11px ' + Host.Platform.fontFamily();
     const height = textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent;
@@ -172,7 +172,7 @@ export class WebVitalsEventLane extends WebVitalsLane {
     this.context.restore();
   }
 
-  private renderGoodMarkerSymbol(timestamp: number): void {
+  #renderGoodMarkerSymbol(timestamp: number): void {
     const radius = 5;
 
     this.context.save();
@@ -191,7 +191,7 @@ export class WebVitalsEventLane extends WebVitalsLane {
     this.context.restore();
   }
 
-  private renderMediumMarkerSymbol(timestamp: number): void {
+  #renderMediumMarkerSymbol(timestamp: number): void {
     this.context.save();
     this.context.beginPath();
     this.context.strokeStyle = this.theme.medium;
@@ -208,7 +208,7 @@ export class WebVitalsEventLane extends WebVitalsLane {
     this.context.restore();
   }
 
-  private renderBadMarkerSymbol(timestamp: number): void {
+  #renderBadMarkerSymbol(timestamp: number): void {
     this.context.save();
     this.context.beginPath();
     this.context.strokeStyle = this.theme.bad;
@@ -229,9 +229,9 @@ export class WebVitalsEventLane extends WebVitalsLane {
     this.context.restore();
   }
 
-  private renderMarker(marker: Marker, selected: boolean, hover: boolean, nextMarker: Marker|null): void {
+  #renderMarker(marker: Marker, selected: boolean, hover: boolean, nextMarker: Marker|null): void {
     const timestampLabel = marker.timestampLabel;
-    const labelMetrics = this.labelMetrics;
+    const labelMetrics = this.#labelMetrics;
     const timestampMetrics = marker.timestampMetrics;
 
     const showFrame = selected;
@@ -264,54 +264,55 @@ export class WebVitalsEventLane extends WebVitalsLane {
 
     if (showLabel) {
       if (labelMetrics) {
-        this.renderLabel(marker.timestamp, this.label, labelMetrics);
+        this.#renderLabel(marker.timestamp, this.#label, labelMetrics);
       }
 
       if (showDetails) {
-        this.renderTimestamp(marker.timestamp, labelMetrics ? labelMetrics.width : 0, timestampLabel, timestampMetrics);
+        this.#renderTimestamp(
+            marker.timestamp, labelMetrics ? labelMetrics.width : 0, timestampLabel, timestampMetrics);
       }
     }
 
     if (marker.type === MarkerType.Good) {
-      this.renderGoodMarkerSymbol(marker.timestamp);
+      this.#renderGoodMarkerSymbol(marker.timestamp);
     } else if (marker.type === MarkerType.Medium) {
-      this.renderMediumMarkerSymbol(marker.timestamp);
+      this.#renderMediumMarkerSymbol(marker.timestamp);
     } else {
-      this.renderBadMarkerSymbol(marker.timestamp);
+      this.#renderBadMarkerSymbol(marker.timestamp);
     }
   }
 
   render(): void {
-    for (let i = 0; i < this.markers.length; i++) {
-      const event = this.markers[i];
-      if (event === this.selectedMarker || event === this.hoverMarker) {
+    for (let i = 0; i < this.#markers.length; i++) {
+      const event = this.#markers[i];
+      if (event === this.#selectedMarker || event === this.#hoverMarker) {
         continue;
       }
-      this.renderMarker(event, false, false, i < this.markers.length - 1 ? this.markers[i + 1] : null);
+      this.#renderMarker(event, false, false, i < this.#markers.length - 1 ? this.#markers[i + 1] : null);
     }
 
-    if (this.hoverMarker && this.hoverMarker !== this.selectedMarker) {
-      this.renderMarker(this.hoverMarker, false, true, null);
+    if (this.#hoverMarker && this.#hoverMarker !== this.#selectedMarker) {
+      this.#renderMarker(this.#hoverMarker, false, true, null);
     }
 
-    if (this.selectedMarker) {
-      this.renderMarker(this.selectedMarker, true, false, null);
+    if (this.#selectedMarker) {
+      this.#renderMarker(this.#selectedMarker, true, false, null);
     }
   }
 }
 
 export class WebVitalsTimeboxLane extends WebVitalsLane {
-  private longTaskPattern: CanvasPattern;
-  private boxes: readonly Timebox[] = [];
-  private label: string;
-  private hoverBox: number = -1;
-  private selectedBox: number = -1;
-  private getTimeboxOverlay?: GetTimeboxOverlayCallback;
+  #longTaskPattern: CanvasPattern;
+  #boxes: readonly Timebox[] = [];
+  #label: string;
+  #hoverBox: number = -1;
+  #selectedBox: number = -1;
+  #getTimeboxOverlay?: GetTimeboxOverlayCallback;
 
   constructor(timeline: WebVitalsTimeline, label: string, getTimeboxOverlay?: GetTimeboxOverlayCallback) {
     super(timeline);
 
-    this.label = label;
+    this.#label = label;
     const patternCanvas = document.createElement('canvas');
     const patternContext = patternCanvas.getContext('2d');
 
@@ -332,25 +333,25 @@ export class WebVitalsTimeboxLane extends WebVitalsLane {
     }
     const canvasPattern = this.context.createPattern(patternCanvas, 'repeat');
     assertInstanceOf(canvasPattern, CanvasPattern);
-    this.longTaskPattern = canvasPattern;
-    this.getTimeboxOverlay = getTimeboxOverlay;
+    this.#longTaskPattern = canvasPattern;
+    this.#getTimeboxOverlay = getTimeboxOverlay;
   }
 
   handlePointerMove(x: number|null): void {
-    const prevHoverBox = this.hoverBox;
+    const prevHoverBox = this.#hoverBox;
     if (x === null) {
-      this.hoverBox = -1;
+      this.#hoverBox = -1;
     } else {
-      this.hoverBox = this.boxes.findIndex((box): boolean => {
+      this.#hoverBox = this.#boxes.findIndex((box): boolean => {
         const start = this.tX(box.start);
         const end = this.tX(box.start + box.duration);
         return start <= x && x <= end;
       });
     }
 
-    if (prevHoverBox !== this.hoverBox) {
-      if (this.hoverBox !== -1 && this.getTimeboxOverlay) {
-        this.timeline.showOverlay(this.getTimeboxOverlay(this.boxes[this.hoverBox]));
+    if (prevHoverBox !== this.#hoverBox) {
+      if (this.#hoverBox !== -1 && this.#getTimeboxOverlay) {
+        this.timeline.showOverlay(this.#getTimeboxOverlay(this.#boxes[this.#hoverBox]));
       } else {
         this.timeline.hideOverlay();
       }
@@ -358,16 +359,16 @@ export class WebVitalsTimeboxLane extends WebVitalsLane {
   }
 
   handleClick(_: number|null): void {
-    this.selectedBox = this.hoverBox;
+    this.#selectedBox = this.#hoverBox;
   }
 
   setTimeboxes(boxes: readonly Timebox[]): void {
-    this.selectedBox = -1;
-    this.hoverBox = -1;
-    this.boxes = boxes;
+    this.#selectedBox = -1;
+    this.#hoverBox = -1;
+    this.#boxes = boxes;
   }
 
-  private renderTimebox(box: Timebox, hover: boolean): void {
+  #renderTimebox(box: Timebox, hover: boolean): void {
     const r = 2;
 
     this.context.save();
@@ -408,7 +409,7 @@ export class WebVitalsTimeboxLane extends WebVitalsLane {
 
     // Fill the box with a striped pattern for everything over 50ms.
     this.context.beginPath();
-    this.context.fillStyle = this.longTaskPattern;
+    this.context.fillStyle = this.#longTaskPattern;
     this.context.moveTo(this.tX(box.start + LONG_TASK_THRESHOLD) + r, 2);
     this.context.lineTo(this.tX(box.start + box.duration) - r, 2);
     this.context.quadraticCurveTo(
@@ -442,21 +443,21 @@ export class WebVitalsTimeboxLane extends WebVitalsLane {
   }
 
   render(): void {
-    for (let i = 0; i < this.boxes.length; i++) {
-      if (i === this.hoverBox || i === this.selectedBox) {
+    for (let i = 0; i < this.#boxes.length; i++) {
+      if (i === this.#hoverBox || i === this.#selectedBox) {
         continue;
       }
-      this.renderTimebox(this.boxes[i], false);
+      this.#renderTimebox(this.#boxes[i], false);
     }
 
-    if (this.hoverBox !== -1) {
-      this.renderTimebox(this.boxes[this.hoverBox], true);
+    if (this.#hoverBox !== -1) {
+      this.#renderTimebox(this.#boxes[this.#hoverBox], true);
     }
 
-    if (this.selectedBox !== -1) {
-      this.renderTimebox(this.boxes[this.selectedBox], true);
+    if (this.#selectedBox !== -1) {
+      this.#renderTimebox(this.#boxes[this.#selectedBox], true);
     }
 
-    this.renderLaneLabel(this.label);
+    this.renderLaneLabel(this.#label);
   }
 }