chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/ui/legacy/Infobar.ts

@@ -95,9 +95,13 @@ export class Infobar {
           buttonClass += ' primary-button';
         }
 
+        const buttonVariant = action.buttonVariant ?? Buttons.Button.Variant.OUTLINED;
+
         const button = createTextButton(action.text, actionCallback, {
           className: buttonClass,
           jslogContext: action.jslogContext,
+          variant: buttonVariant,
+          icon: action.icon,
         });
         if (action.highlight && !this.#firstFocusableElement) {
           this.#firstFocusableElement = button;
@@ -246,6 +250,8 @@ export interface InfobarAction {
   highlight: boolean;
   delegate: (() => void)|null;
   dismiss: boolean;
+  buttonVariant?: Buttons.Button.Variant;
+  icon?: string;
   jslogContext?: string;
 }
 

package/front_end/ui/legacy/InspectorView.ts

@@ -32,10 +32,12 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
+import {ActionRegistry} from './ActionRegistry.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import type {Context} from './Context.js';
 import type {ContextMenu} from './ContextMenu.js';
@@ -67,6 +69,10 @@ const UIStrings = {
    *@description The aria label for main tabbed pane that contains Panels
    */
   panels: 'Panels',
+  /**
+   *@description Title of an action that reloads the tab currently being debugged by DevTools
+   */
+  reloadDebuggedTab: 'Reload',
   /**
    *@description Title of an action that reloads the DevTools
    */
@@ -476,6 +482,36 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
+  displayDebuggedTabReloadRequiredWarning(message: string): void {
+    if (!this.reloadRequiredInfobar) {
+      const infobar = new Infobar(
+          InfobarType.INFO, message,
+          [
+            {
+              text: i18nString(UIStrings.reloadDebuggedTab),
+              highlight: true,
+              delegate: () => {
+                reloadDebuggedTab();
+                if (this.reloadRequiredInfobar) {
+                  this.reloadRequiredInfobar.dispose();
+                }
+              },
+              dismiss: false,
+              buttonVariant: Buttons.Button.Variant.PRIMARY,
+              icon: 'refresh',
+              jslogContext: 'main.debug-reload',
+            },
+          ],
+          undefined, undefined, 'reload-required');
+      infobar.setParentView(this);
+      this.attachInfobar(infobar);
+      this.reloadRequiredInfobar = infobar;
+      infobar.setCloseCallback(() => {
+        delete this.reloadRequiredInfobar;
+      });
+    }
+  }
+
   displayReloadRequiredWarning(message: string): void {
     if (!this.reloadRequiredInfobar) {
       const infobar = new Infobar(
@@ -602,6 +638,10 @@ function reloadDevTools(): void {
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.reattach(() => window.location.reload());
 }
 
+function reloadDebuggedTab(): void {
+  void ActionRegistry.instance().getAction('inspector-main.reload').execute();
+}
+
 export class ActionDelegate implements ActionDelegateInterface {
   handleAction(context: Context, actionId: string): boolean {
     switch (actionId) {

package/front_end/ui/legacy/ListWidget.ts

@@ -199,8 +199,10 @@ export class ListWidget<T> extends VBox {
       this.element.focus();
       this.delegate.removeItemRequested(this.items[index], index);
       ARIAUtils.alert(i18nString(UIStrings.removedItem));
-      // focus on the next item in the list, or the last item if we're removing the last item
-      (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      if (this.elements.length >= 1) {
+        // focus on the next item in the list, or the last item if we're removing the last item
+        (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      }
     }
   }
 

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -16,11 +16,11 @@ export class ThrottledWidget extends VBox {
     this.updateWhenVisible = false;
   }
 
-  protected doUpdate(): Promise<void> {
+  protected override doUpdate(): Promise<void> {
     return Promise.resolve();
   }
 
-  update(): void {
+  override update(): void {
     this.updateWhenVisible = !this.isShowing();
     if (this.updateWhenVisible) {
       return;

package/front_end/ui/legacy/Toolbar.ts

@@ -1028,9 +1028,9 @@ export class ToolbarMenuButton extends ToolbarCombobox {
       useSoftMenu: this.useSoftMenu,
       x: this.element.getBoundingClientRect().left,
       y: this.element.getBoundingClientRect().top + this.element.offsetHeight,
-      // Without rAF, pointer events will be un-ignored too early, and a single click causes the
-      // context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
-      onSoftMenuClosed: () => requestAnimationFrame(() => this.element.removeAttribute('aria-expanded')),
+      // Without adding a delay, pointer events will be un-ignored too early, and a single click causes
+      // the context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
+      onSoftMenuClosed: () => setTimeout(() => this.element.removeAttribute('aria-expanded'), 50),
     });
     this.contextMenuHandler(contextMenu);
     this.element.setAttribute('aria-expanded', 'true');

package/front_end/ui/legacy/UIUtils.ts

@@ -1091,12 +1091,15 @@ export function createTextButton(text: string, clickHandler?: ((arg0: Event) =>
   jslogContext?: string,
   variant?: Buttons.Button.Variant,
   title?: string,
+  icon?: string,
 }): Buttons.Button.Button {
   const button = new Buttons.Button.Button();
   if (opts?.className) {
     button.className = opts.className;
   }
+
   button.textContent = text;
+  button.iconName = opts?.icon;
   button.variant = opts?.variant ? opts.variant : Buttons.Button.Variant.OUTLINED;
   if (clickHandler) {
     button.addEventListener('click', clickHandler);
@@ -1213,7 +1216,7 @@ export function setTitle(element: HTMLElement, title: string): void {
   Tooltip.install(element, title);
 }
 
-export class CheckboxLabel extends HTMLSpanElement {
+export class CheckboxLabel extends HTMLElement {
   private readonly shadowRootInternal!: DocumentFragment;
   checkboxElement!: HTMLInputElement;
   textElement!: HTMLElement;
@@ -1234,10 +1237,7 @@ export class CheckboxLabel extends HTMLSpanElement {
 
   static create(title?: string, checked?: boolean, subtitle?: string, jslogContext?: string, small?: boolean):
       CheckboxLabel {
-    if (!CheckboxLabel.constructorInternal) {
-      CheckboxLabel.constructorInternal = registerCustomElement('span', 'dt-checkbox', CheckboxLabel);
-    }
-    const element = (CheckboxLabel.constructorInternal() as CheckboxLabel);
+    const element = document.createElement('dt-checkbox') as CheckboxLabel;
     element.checkboxElement.checked = Boolean(checked);
     if (jslogContext) {
       element.checkboxElement.setAttribute(
@@ -1255,9 +1255,11 @@ export class CheckboxLabel extends HTMLSpanElement {
   }
 
   private static lastId = 0;
-  static constructorInternal: (() => Element)|null = null;
 }
 
+// Skip registerCustomElement flow as it's incompatible with Safari with this specific custom element.
+self.customElements.define('dt-checkbox', CheckboxLabel);
+
 export class DevToolsIconLabel extends HTMLSpanElement {
   readonly #icon: IconButton.Icon.Icon;
 

package/front_end/ui/legacy/Widget.ts

@@ -33,6 +33,7 @@ import '../../core/dom_extension/dom_extension.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as Helpers from '../components/helpers/helpers.js';
+import * as RenderCoordinator from '../components/render_coordinator/render_coordinator.js';
 
 import {Constraints, Size} from './Geometry.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
@@ -109,6 +110,8 @@ function decrementWidgetCounter(parentElement: Element, childElement: Element):
   }
 }
 
+let id = 0;
+
 export class Widget {
   readonly element: HTMLElement;
   contentElement: HTMLElement;
@@ -127,6 +130,7 @@ export class Widget {
   private constraintsInternal?: Constraints;
   private invalidationsRequested?: boolean;
   private externallyManaged?: boolean;
+  #id = `${this.constructor.name}_${id++}`;
   constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
     this.element = element || document.createElement('div');
     this.shadowRoot = this.element.shadowRoot || undefined;
@@ -665,6 +669,34 @@ export class Widget {
     assert(!this.parentWidgetInternal, 'Attempt to mark widget as externally managed after insertion to the DOM');
     this.externallyManaged = true;
   }
+
+  /**
+   * Called by the RenderCoordinator to perform an update.
+   * This is not meant to be called directly. Instead, use update() to schedule an asynchronous update.
+   *
+   * @returns A promise that resolves when the update is complete.
+   */
+  protected doUpdate(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  /**
+   * Schedules an asynchronous update. The update will be deduplicated and executed with the animation frame.
+   */
+  update(): void {
+    void RenderCoordinator.RenderCoordinator.RenderCoordinator.instance().write(this.#id, () => this.doUpdate());
+  }
+
+  /**
+   * Returns a promise that resolves when the pending update is complete.
+   * Returns a resolved promise if there is no pending update.
+`  *
+   * @returns A probleme that resolves when the pending update is complete.
+   */
+  pendingUpdate(): Promise<void> {
+    return RenderCoordinator.RenderCoordinator.RenderCoordinator.instance().findPendingWrite(this.#id) ||
+        Promise.resolve();
+  }
 }
 
 const storedScrollPositions = new WeakMap<Element, {

package/front_end/ui/legacy/components/data_grid/DataGrid.test.ts

@@ -20,13 +20,11 @@ describeWithEnvironment('DataGrid', () => {
     let widget!: DataGrid.DataGrid.DataGridWidget<unknown>;
 
     const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<unknown> = {
-      implParams: {
-        displayName: 'testGrid',
-        columns: [{
-          id: 'test',
-          sortable: false,
-        }],
-      },
+      displayName: 'testGrid',
+      columns: [{
+        id: 'test',
+        sortable: false,
+      }],
       nodes: [new DataGrid.DataGrid.DataGridNode({test: 'testNode'})],
       markAsRoot: true,
     };
@@ -34,6 +32,7 @@ describeWithEnvironment('DataGrid', () => {
     // clang-format off
         render(
             html`
+        <!-- @ts-ignore -->
         <devtools-data-grid-widget
             .options=${dataGridOptions}
             ${widgetRef(DataGrid.DataGrid.DataGridWidget, e => { widget = e; })}
@@ -42,8 +41,6 @@ describeWithEnvironment('DataGrid', () => {
         container, {host: this});
     // clang-format on
 
-    await new Promise(resolve => setTimeout(resolve, 0));
-
     assert.exists(widget);
     // There is a single test row
     assert.strictEqual(widget.dataGrid.rootNode().children.length, 1);

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -1703,7 +1703,7 @@ export class DataGridNode<T> {
     return this.elementInternal as Element;
   }
 
-  protected createElement(): Element {
+  protected createElement(): HTMLElement {
     this.elementInternal = document.createElement('tr');
     this.elementInternal.setAttribute(
         'jslog', `${VisualLogging.tableRow().track({keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}`);
@@ -1736,7 +1736,7 @@ export class DataGridNode<T> {
     return this.elementInternal;
   }
 
-  existingElement(): Element|null {
+  existingElement(): HTMLElement|null {
     return this.elementInternal || null;
   }
 
@@ -2471,61 +2471,62 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
   }
 }
 
-export interface DataGridWidgetOptions<T> {
-  implParams: Parameters;
-  dataGridImpl?: DataGridImpl<T>;
-  markAsRoot?: boolean;
-  nodes: DataGridNode<T>[];
-}
+export type DataGridWidgetOptions<T> = Parameters&{
+  markAsRoot?: boolean,
+  striped?: boolean, nodes: DataGridNode<T>[],
+};
 
 export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
   #options: DataGridWidgetOptions<T>;
+  widget?: DataGridWidget<T>;
 
   constructor() {
     super();
     // default values for options
     this.#options = {
-      implParams: {
-        displayName: 'dataGrid',
-        columns: [],
-      },
+      displayName: 'dataGrid',
+      columns: [],
       nodes: [],
     };
   }
 
   set options(options: DataGridWidgetOptions<T>) {
     this.#options = options;
+    this.#updateGrid();
   }
 
   override createWidget(): DataGridWidget<T> {
-    const {
-      implParams,
-      markAsRoot,
-      nodes,
-    } = this.#options;
+    const dataGridImpl = new DataGridImpl<T>(this.#options);
 
-    if (!this.#options.dataGridImpl) {
-      this.#options.dataGridImpl = new DataGridImpl<T>(implParams);
-    }
+    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
+    dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
+    dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
+    dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
+    dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
+    this.widget = dataGridImpl.asWidget(this);
 
-    this.#options.dataGridImpl.rootNode().removeChildren();
-    for (const node of nodes) {
-      this.#options.dataGridImpl.rootNode().appendChild(node);
+    if (this.#options.markAsRoot) {
+      this.widget.markAsRoot();
     }
 
-    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
-    // use lit templates to bind listeners.
-    this.#options.dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
-    this.#options.dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
-    const widget = this.#options.dataGridImpl.asWidget(this);
+    this.#updateGrid();
+
+    return this.widget;
+  }
 
-    if (markAsRoot) {
-      widget.markAsRoot();
+  #updateGrid(): void {
+    if (this.widget) {
+      this.widget.dataGrid.rootNode().removeChildren();
+      for (const node of this.#options.nodes) {
+        this.widget.dataGrid.rootNode().appendChild(node);
+      }
+
+      if (this.#options.striped) {
+        this.widget.dataGrid.setStriped(true);
+      }
     }
-    return widget;
   }
 
   #selectedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -270,7 +270,7 @@ export class ViewportDataGridNode<T> extends DataGridNode<ViewportDataGridNode<T
     this.isStripedInternal = false;
   }
 
-  override element(): Element {
+  override element(): HTMLElement {
     const existingElement = this.existingElement();
     const element = existingElement || this.createElement();
     if (!existingElement || this.stale) {

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

@@ -221,7 +221,7 @@ export class ChartViewport extends UI.Widget.VBox {
   private onMouseWheel(e: Event): void {
     const wheelEvent = (e as WheelEvent);
     const doZoomInstead = wheelEvent.shiftKey !==
-        (Common.Settings.Settings.instance().moduleSetting('flamechart-mouse-wheel-action').get() === 'zoom');
+        (Common.Settings.Settings.instance().moduleSetting('flamechart-selected-navigation').get() === 'classic');
     const panVertically = !doZoomInstead && (wheelEvent.deltaY || Math.abs(wheelEvent.deltaX) === 53);
     const panHorizontally = doZoomInstead && Math.abs(wheelEvent.deltaX) > Math.abs(wheelEvent.deltaY);
     if (panVertically) {
@@ -471,7 +471,7 @@ export class ChartViewport extends UI.Widget.VBox {
     });
   }
 
-  private update(): void {
+  override update(): void {
     this.updateRangeSelectionOverlay();
     this.delegate.update();
   }

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

@@ -90,7 +90,7 @@ export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return element;
   }
 
-  update(): void {
+  override update(): void {
     const frames = this.#filmStrip?.frames;
     if (!frames || frames.length < 1) {
       return;

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

@@ -264,6 +264,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private chartViewport: ChartViewport;
   private dataProvider: FlameChartDataProvider;
   private candyStripePattern: CanvasPattern|null;
+  private candyStripePatternGray: CanvasPattern|null;
   private contextMenu?: UI.ContextMenu.ContextMenu;
   private viewportElement: HTMLElement;
   private canvas: HTMLCanvasElement;
@@ -281,14 +282,13 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private textPadding: number;
   private highlightedMarkerIndex: number;
   /**
-   * Represents the index of the entry that the user's mouse cursor is over.
-   * Note that this is updated as the user moves their cursor: they do not have
-   * to click for this to be updated.
+   * The index of the entry that's hovered (typically), or focused because of searchResult or other reasons.focused via searchResults, or focused by other means.
+   * Updated as the cursor moves. Meanwhile `selectedEntryIndex` is the entry that's been clicked.
    **/
   private highlightedEntryIndex: number;
   /**
    * Represents the index of the entry that is selected. For an entry to be
-   * selected, it has to be clicked by the user.
+   * selected, it has to be clicked by the user (generally).
    **/
   private selectedEntryIndex: number;
   private rawTimelineDataLength: number;
@@ -365,7 +365,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     this.viewportElement = this.chartViewport.viewportElement;
     this.canvas = (this.viewportElement.createChild('canvas', 'fill') as HTMLCanvasElement);
-    this.candyStripePattern = null;
+    this.candyStripePattern = this.candyStripePatternGray = null;
 
     this.canvas.tabIndex = 0;
     UI.ARIAUtils.setLabel(this.canvas, i18nString(UIStrings.flameChart));
@@ -600,7 +600,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.dispatchEventToListeners(Events.ENTRY_HOVERED, -1);
   }
 
-  private createCandyStripePattern(): CanvasPattern {
+  private createCandyStripePattern(color: string): CanvasPattern {
     // Set the candy stripe pattern to 17px so it repeats well.
     const size = 17;
     const candyStripeCanvas = document.createElement('canvas');
@@ -613,7 +613,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     ctx.rotate(Math.PI * 0.25);
     ctx.translate(-size * 0.5, -size * 0.5);
 
-    ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
+    ctx.fillStyle = color;
     for (let x = -size; x < size * 2; x += 3) {
       ctx.fillRect(x, -size, 1, size * 3);
     }
@@ -804,7 +804,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
         return null;
     }
     const element = document.createElement('div');
-    element.createChild('span', 'timeline-info-title').textContent = iconTooltip;
+    element.createChild('span', 'popoverinfo-title').textContent = iconTooltip;
 
     return element;
   }
@@ -870,12 +870,11 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
     const group = data.groups.at(this.selectedGroupIndex);
     // If the mouse is hovering over the hidden descendants arrow, get an element that shows how many children are hidden, otherwise an element with the event name and length
-    const entryInfo = (isMouseOverRevealChildrenArrow && group) ?
-        this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo &&
-            this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo(entryIndex) :
-        entryIndex !== null && this.dataProvider.prepareHighlightedEntryInfo(entryIndex);
-    if (entryInfo) {
-      this.popoverElement.appendChild(entryInfo);
+    const popoverElement = (isMouseOverRevealChildrenArrow && group) ?
+        this.dataProvider.preparePopoverForCollapsedArrow?.(entryIndex) :
+        entryIndex !== null && this.dataProvider.preparePopoverElement(entryIndex);
+    if (popoverElement) {
+      this.popoverElement.appendChild(popoverElement);
       this.updatePopoverOffset();
     }
     this.lastPopoverState = {
@@ -2311,8 +2310,12 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
               // If the duration of the event is less than the start time to draw the candy stripes, then we have no stripes to draw.
               continue;
             }
-            if (!this.candyStripePattern) {
-              this.candyStripePattern = this.createCandyStripePattern();
+            if (!this.candyStripePattern || !this.candyStripePatternGray) {
+              const red = 'rgba(255, 0, 0, 0.8)';
+              this.candyStripePattern = this.createCandyStripePattern(red);
+              const parsedColor = Common.Color.parse(red);
+              const dimmed = parsedColor?.asLegacyColor().grayscale().asString() ?? 'lightgrey';
+              this.candyStripePatternGray = this.createCandyStripePattern(dimmed);
             }
 
             context.save();
@@ -2330,7 +2333,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
               startX: barXStart,
               width: barXEnd - barXStart,
             });
-            context.fillStyle = this.candyStripePattern;
+            context.fillStyle =
+                this.#shouldDimEvent(entryIndex) ? this.candyStripePatternGray : this.candyStripePattern;
             context.fill();
             context.restore();
             break;
@@ -2359,7 +2363,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
             context.rect(barX, barY, barWidth, barHeight);
             context.clip();
             context.beginPath();
-            context.fillStyle = 'red';
+            context.fillStyle = this.#transformColor(entryIndex, 'red');
             context.moveTo(barX + barWidth - triangleWidth, barY);
             context.lineTo(barX + barWidth, barY);
             context.lineTo(barX + barWidth, barY + triangleHeight);
@@ -2877,13 +2881,14 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       }
       const unclippedBarX = this.chartViewport.timeToPosition(entryStartTime);
       if (this.dataProvider.decorateEntry(
-              entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, timeToPixel)) {
+              entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, timeToPixel,
+              color => this.#transformColor(entryIndex, color))) {
         continue;
       }
       if (!text || !text.length) {
         continue;
       }
-      context.fillStyle = this.dataProvider.textColor(entryIndex);
+      context.fillStyle = this.#transformColor(entryIndex, this.dataProvider.textColor(entryIndex));
       context.fillText(text, barX + textPadding, barY + barHeight - this.textBaseline);
     }
 
@@ -3051,7 +3056,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
           context.fillStyle = color;
           context.fillRect(barX, y, barWidth, groupBarHeight - 1);
           this.dataProvider.decorateEntry(
-              entryIndex, context, '', barX, y, barWidth, groupBarHeight, unclippedBarX, timeToPixel);
+              entryIndex, context, '', barX, y, barWidth, groupBarHeight, unclippedBarX, timeToPixel,
+              color => this.#transformColor(entryIndex, color));
           continue;
         }
         range.append(new Common.SegmentedRange.Segment(barX, endBarX, color));
@@ -3875,7 +3881,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.scheduleUpdate();
   }
 
-  update(): void {
+  override update(): void {
     if (!this.timelineData()) {
       return;
     }
@@ -4093,9 +4099,9 @@ export interface FlameChartDataProvider {
 
   timelineData(rebuild?: boolean): FlameChartTimelineData|null;
 
-  prepareHighlightedEntryInfo(entryIndex: number): Element|null;
+  preparePopoverElement(entryIndex: number): Element|null;
 
-  prepareHighlightedHiddenEntriesArrowInfo?(entryIndex: number): Element|null;
+  preparePopoverForCollapsedArrow?(entryIndex: number): Element|null;
 
   canJumpToEntry(entryIndex: number): boolean;
 
@@ -4107,7 +4113,8 @@ export interface FlameChartDataProvider {
 
   decorateEntry(
       entryIndex: number, context: CanvasRenderingContext2D, text: string|null, barX: number, barY: number,
-      barWidth: number, barHeight: number, unclippedBarX: number, timeToPixelRatio: number): boolean;
+      barWidth: number, barHeight: number, unclippedBarX: number, timeToPixelRatio: number,
+      transformColor?: (color: string) => string): boolean;
 
   forceDecoration(entryIndex: number): boolean;
 

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

@@ -10,15 +10,24 @@ export class TimelineOverviewCalculator implements Calculator {
   #minimumBoundary: Trace.Types.Timing.MilliSeconds = Trace.Types.Timing.MilliSeconds(0);
   #maximumBoundary: Trace.Types.Timing.MilliSeconds = Trace.Types.Timing.MilliSeconds(100);
 
-  private workingArea!: number;
+  #displayWidth: number = 0;
   private navStartTimes?: readonly Trace.Types.Events.NavigationStart[];
 
+  /**
+   * Given a timestamp, returns its x position in the minimap.
+   *
+   * @param time
+   * @returns position in pixel
+   */
   computePosition(time: Trace.Types.Timing.MilliSeconds): number {
-    return (time - this.#minimumBoundary) / this.boundarySpan() * this.workingArea;
+    return (time - this.#minimumBoundary) / this.boundarySpan() * this.#displayWidth;
   }
 
   positionToTime(position: number): Trace.Types.Timing.MilliSeconds {
-    return Trace.Types.Timing.MilliSeconds(position / this.workingArea * this.boundarySpan() + this.#minimumBoundary);
+    if (this.#displayWidth === 0) {
+      return Trace.Types.Timing.MilliSeconds(0);
+    }
+    return Trace.Types.Timing.MilliSeconds(position / this.#displayWidth * this.boundarySpan() + this.#minimumBoundary);
   }
 
   setBounds(minimumBoundary: Trace.Types.Timing.MilliSeconds, maximumBoundary: Trace.Types.Timing.MilliSeconds): void {
@@ -31,7 +40,7 @@ export class TimelineOverviewCalculator implements Calculator {
   }
 
   setDisplayWidth(clientWidth: number): void {
-    this.workingArea = clientWidth;
+    this.#displayWidth = clientWidth;
   }
 
   reset(): void {
@@ -73,6 +82,11 @@ export class TimelineOverviewCalculator implements Calculator {
     return this.#minimumBoundary;
   }
 
+  /**
+   * This function returns the time different between min time and max time of current minimap.
+   *
+   * @returns the time range in milliseconds
+   */
   boundarySpan(): Trace.Types.Timing.MilliSeconds {
     return Trace.Types.Timing.MilliSeconds(this.#maximumBoundary - this.#minimumBoundary);
   }