chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -34,16 +34,24 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as Root from '../../../../core/root/root.js';
 import type * as TimelineModel from '../../../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../../../components/buttons/buttons.js';
 import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
-import {drawExpansionArrow, drawIcon, drawLegends, horizontalLine} from './CanvasHelper.js';
+import {drawExpansionArrow, drawIcon, horizontalLine} from './CanvasHelper.js';
 import {ChartViewport, type ChartViewportDelegate} from './ChartViewport.js';
 import flameChartStyles from './flameChart.css.legacy.js';
 import {DEFAULT_FONT_SIZE, getFontFamilyForCanvas} from './Font.js';
 import {type Calculator, TimelineGrid} from './TimelineGrid.js';
 
+/**
+ * Set as the `details` value on the fake context menu event we dispatch to
+ * trigger a context menu on an event on a keyboard space key press.
+ {@see onContextMenu} for more details and explanation.
+ */
+const KEYBOARD_FAKED_CONTEXT_MENU_DETAIL = -1;
+
 const UIStrings = {
   /**
    *@description Aria alert used to notify the user when an event has been selected because they tabbed into a group.
@@ -84,6 +92,10 @@ const UIStrings = {
    *@description Text for an action that adds link annotation between entries in the Flame Chart
    */
   linkEntries: 'Link entries',
+  /**
+   *@description Text for an action that removes all annotations associated with an entry
+   */
+  deleteAnnotations: 'Delete annotations',
   /**
    *@description Shown in the context menu when right clicking on a track header to enable the user to enter the track configuration mode.
    */
@@ -147,9 +159,6 @@ const hideIconPath =
 const showIconPath =
     'M10 13.5C10.972 13.5 11.7983 13.1597 12.479 12.479C13.1597 11.7983 13.5 10.972 13.5 10C13.5 9.028 13.1597 8.20167 12.479 7.521C11.7983 6.84033 10.972 6.5 10 6.5C9.028 6.5 8.20167 6.84033 7.521 7.521C6.84033 8.20167 6.5 9.028 6.5 10C6.5 10.972 6.84033 11.7983 7.521 12.479C8.20167 13.1597 9.028 13.5 10 13.5ZM10 12C9.44467 12 8.97233 11.8057 8.583 11.417C8.19433 11.0277 8 10.5553 8 10C8 9.44467 8.19433 8.97233 8.583 8.583C8.97233 8.19433 9.44467 8 10 8C10.5553 8 11.0277 8.19433 11.417 8.583C11.8057 8.97233 12 9.44467 12 10C12 10.5553 11.8057 11.0277 11.417 11.417C11.0277 11.8057 10.5553 12 10 12ZM10 16C8.014 16 6.20833 15.455 4.583 14.365C2.95833 13.2743 1.764 11.8193 1 10C1.764 8.18067 2.95833 6.72567 4.583 5.635C6.20833 4.545 8.014 4 10 4C11.986 4 13.7917 4.545 15.417 5.635C17.0417 6.72567 18.236 8.18067 19 10C18.236 11.8193 17.0417 13.2743 15.417 14.365C13.7917 15.455 11.986 16 10 16ZM10 14.5C11.5553 14.5 12.9927 14.0973 14.312 13.292C15.632 12.486 16.646 11.3887 17.354 10C16.646 8.61133 15.632 7.514 14.312 6.708C12.9927 5.90267 11.5553 5.5 10 5.5C8.44467 5.5 7.00733 5.90267 5.688 6.708C4.368 7.514 3.354 8.61133 2.646 10C3.354 11.3887 4.368 12.486 5.688 13.292C7.00733 14.0973 8.44467 14.5 10 14.5Z';
 
-// The gap between the track header and the legends
-const LEGEND_LEFT_PADDING = 16;
-
 // export for test.
 export const enum HoverType {
   TRACK_CONFIG_UP_BUTTON = 'TRACK_CONFIG_UP_BUTTON',
@@ -162,13 +171,15 @@ export const enum HoverType {
   ERROR = 'ERROR',
 }
 
-export class FlameChartDelegate {
-  windowChanged(_startTime: number, _endTime: number, _animate: boolean): void {
-  }
-  updateRangeSelection(_startTime: number, _endTime: number): void {
-  }
-  updateSelectedGroup(_flameChart: FlameChart, _group: Group|null): void {
-  }
+export interface FlameChartDelegate {
+  windowChanged(_startTime: number, _endTime: number, _animate: boolean): void;
+  updateRangeSelection(_startTime: number, _endTime: number): void;
+  updateSelectedGroup(_flameChart: FlameChart, _group: Group|null): void;
+  /**
+   * Returns the element that the FlameChart has been rendered into. Used to
+   * provide element references for attaching to Visual Element logs.
+   */
+  containingElement?: () => HTMLElement;
 }
 
 interface GroupExpansionState {
@@ -180,7 +191,7 @@ interface GroupHiddenState {
 
 interface PopoverState {
   // Index of the last entry the popover was shown over.
-  entryIndex: number;
+  entryIndex: number|null;
   // Index of the last group the popover was shown over.
   groupIndex: number;
   hiddenEntriesPopover: boolean;
@@ -243,7 +254,7 @@ export interface PositionOverride {
 
 export type DrawOverride =
     (context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number,
-     timeToPosition: (time: number) => number) => PositionOverride;
+     timeToPosition: (time: number) => number, transformColor: (color: string) => string) => PositionOverride;
 
 export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements Calculator, ChartViewportDelegate {
@@ -302,6 +313,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private rawTimelineData?: FlameChartTimelineData|null;
   private forceDecorationCache?: boolean[]|null;
   private entryColorsCache?: string[]|null;
+  private entryIndicesToNotDim?: number[]|null;
+  private colorDimmingCache = new Map<string, string>();
   private totalTime?: number;
   private lastPopoverState: PopoverState;
 
@@ -309,8 +322,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   #font: string;
   #groupTreeRoot?: GroupTreeNode|null;
-  #searchResultEntryIndex: number;
+  #searchResultEntryIndex: number|null = null;
   #searchResultHighlightElements: HTMLElement[] = [];
+  #searchResultEntries: number[]|null = null;
   #inTrackConfigEditMode: boolean = false;
   #linkSelectionAnnotationIsInProgress: boolean = false;
 
@@ -396,7 +410,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.highlightedMarkerIndex = -1;
     this.highlightedEntryIndex = -1;
     this.selectedEntryIndex = -1;
-    this.#searchResultEntryIndex = -1;
+    this.#searchResultEntryIndex = null;
     this.rawTimelineDataLength = 0;
     this.markerPositions = new Map();
     this.customDrawnPositions = new Map();
@@ -482,6 +496,51 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.chartViewport.disableRangeSelection();
   }
 
+  #shouldDimEvent(entryIndex: number): boolean {
+    // If a search is active, that enables a mode where we dim all events that do not match the search results.
+    // Otherwise the events to not dim are defined by the last call to `enableDimming`.
+    const entriesToNotDim = this.#searchResultEntries ?? this.entryIndicesToNotDim;
+    if (!entriesToNotDim) {
+      return false;
+    }
+
+    return !entriesToNotDim.includes(entryIndex);
+  }
+
+  enableDimming(entryIndicesToNotDim: number[]): void {
+    this.entryIndicesToNotDim = entryIndicesToNotDim;
+    this.draw();
+  }
+
+  disableDimming(): void {
+    this.entryIndicesToNotDim = null;
+    this.draw();
+  }
+
+  #transformColor(entryIndex: number, color: string): string {
+    if (this.#shouldDimEvent(entryIndex)) {
+      let dimmed = this.colorDimmingCache.get(color);
+      if (dimmed) {
+        return dimmed;
+      }
+
+      const parsedColor = Common.Color.parse(color);
+      dimmed = parsedColor ? parsedColor.asLegacyColor().grayscale().asString() : 'lightgrey';
+      this.colorDimmingCache.set(color, dimmed);
+      return dimmed;
+    }
+
+    return color;
+  }
+
+  getColorForEntry(entryIndex: number): string {
+    if (!this.entryColorsCache) {
+      return '';
+    }
+
+    return this.#transformColor(entryIndex, this.entryColorsCache[entryIndex]);
+  }
+
   highlightEntry(entryIndex: number): void {
     if (this.highlightedEntryIndex === entryIndex) {
       return;
@@ -495,12 +554,24 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   highlightAllEntries(entries: number[]): void {
-    for (const entry of entries) {
+    // To avoid too many highlights when the search regex matches too many entries,
+    // for example, when user only types in "e" as the search query,
+    // We only highlight the search results when the number of matches is less than or equal to 200.
+    // TODO: current behavior is a bit jank, esp. with dimming treatment always being applied.
+    //       Can we lift this restriction - maybe by adding a stroke in canvas, which should be faster?
+    const MAX_HIGHLIGHTED_SEARCH_ELEMENTS: number = 200;
+    for (const entry of entries.slice(0, MAX_HIGHLIGHTED_SEARCH_ELEMENTS)) {
       const searchElement = this.viewportElement.createChild('div', 'flame-chart-search-element');
       this.#searchResultHighlightElements.push(searchElement);
       searchElement.id = entry.toString();
       this.updateElementPosition(searchElement, entry);
     }
+
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
+      this.#searchResultEntries = entries;
+      // Must redraw for the dimming treatment (#searchResultEntries overrides entryIndicesToNotDim).
+      this.draw();
+    }
   }
 
   removeSearchResultHighlights(): void {
@@ -508,10 +579,13 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       element.remove();
     }
     this.#searchResultHighlightElements = [];
+    this.#searchResultEntries = null;
+    // Must redraw for the dimming treatment (to turn it off / revert back to entryIndicesToNotDim).
+    this.draw();
   }
 
   hideHighlight(): void {
-    if (this.#searchResultEntryIndex === -1) {
+    if (this.#searchResultEntryIndex === null) {
       this.popoverElement.removeChildren();
       this.lastPopoverState = {
         entryIndex: -1,
@@ -656,7 +730,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
    *   3. Inside a track -> update the highlight of hovered event
    */
   private onMouseMove(mouseEvent: MouseEvent): void {
-    this.#searchResultEntryIndex = -1;
+    this.#searchResultEntryIndex = null;
     this.lastMouseOffsetX = mouseEvent.offsetX;
     this.lastMouseOffsetY = mouseEvent.offsetY;
     if (!this.enabled()) {
@@ -777,14 +851,15 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.hideHighlight();
   }
 
-  showPopoverForSearchResult(selectedSearchResult: number): void {
+  showPopoverForSearchResult(selectedSearchResult: number|null): void {
     this.#searchResultEntryIndex = selectedSearchResult;
     this.#updatePopoverForEntry(selectedSearchResult);
   }
 
-  #updatePopoverForEntry(entryIndex: number): void {
+  #updatePopoverForEntry(entryIndex: number|null): void {
     // Just update position if cursor is hovering the same entry.
-    const isMouseOverRevealChildrenArrow = this.isMouseOverRevealChildrenArrow(this.lastMouseOffsetX, entryIndex);
+    const isMouseOverRevealChildrenArrow =
+        entryIndex !== null && this.isMouseOverRevealChildrenArrow(this.lastMouseOffsetX, entryIndex);
     if (entryIndex === this.lastPopoverState.entryIndex &&
         isMouseOverRevealChildrenArrow === this.lastPopoverState.hiddenEntriesPopover) {
       return this.updatePopoverOffset();
@@ -799,7 +874,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const entryInfo = (isMouseOverRevealChildrenArrow && group) ?
         this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo &&
             this.dataProvider.prepareHighlightedHiddenEntriesArrowInfo(entryIndex) :
-        this.dataProvider.prepareHighlightedEntryInfo(entryIndex);
+        entryIndex !== null && this.dataProvider.prepareHighlightedEntryInfo(entryIndex);
     if (entryInfo) {
       this.popoverElement.appendChild(entryInfo);
       this.updatePopoverOffset();
@@ -838,32 +913,58 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     let mouseY = this.lastMouseOffsetY;
 
     // If the popover is being updated from a search, we calculate the coordinates manually
-    if (this.#searchResultEntryIndex !== -1) {
+    if (this.#searchResultEntryIndex !== null) {
       const coordinate = this.entryIndexToCoordinates(this.selectedEntryIndex);
       const {x: canvasViewportOffsetX, y: canvasViewportOffsetY} = this.canvas.getBoundingClientRect();
       mouseX = coordinate?.x ? coordinate.x - canvasViewportOffsetX : mouseX;
       mouseY = coordinate?.y ? coordinate.y - canvasViewportOffsetY : mouseY;
     }
-
+    // The parent dimensions are the maximum the popover can use.
     const parentWidth = this.popoverElement.parentElement ? this.popoverElement.parentElement.clientWidth : 0;
     const parentHeight = this.popoverElement.parentElement ? this.popoverElement.parentElement.clientHeight : 0;
     const infoWidth = this.popoverElement.clientWidth;
     const infoHeight = this.popoverElement.clientHeight;
-    const /** @const */ offsetX = 10;
-    const /** @const */ offsetY = 6;
+
+    // How much offset to use (when placing popover relative to mouseX/mouseY)
+    const offsetX = 10;
+    // Incorporate any network flamechart height into dynamic positioning
+    const offsetY = 6 + this.#tooltipPopoverYAdjustment;
     let x;
     let y;
-    for (let quadrant = 0; quadrant < 4; ++quadrant) {
-      const dx = quadrant & 2 ? -offsetX - infoWidth : offsetX;
-      const dy = quadrant & 1 ? -offsetY - infoHeight : offsetY;
-      x = Platform.NumberUtilities.clamp(mouseX + dx, 0, parentWidth - infoWidth);
-      y = Platform.NumberUtilities.clamp(mouseY + dy, 0, parentHeight - infoHeight);
-      if (x >= mouseX || mouseX >= x + infoWidth || y >= mouseY || mouseY >= y + infoHeight) {
-        break;
+
+    /**
+     * Fancy positioning algorithm. It optimizes for consistent positioning, not obstructing any of the popover, and not positioning atop the mouse cursor.
+     *
+     * Take the mouse cursor position (mouseX/mouseY) and split up the area into four quadrants
+     *     0: bottom-right. 1: top-right. 2: bottom-left. 3: top-left.
+     *
+     * We attempt this in two passes, first is for keeping the whole popover visible, the second is slightly relaxed.
+     *   If we hit the second pass, its because the tooltip size is close to the size of the available (parent*) space.
+     * In each pass, we loop through the quadrants
+     *   If the tooltip can fit (after some adjustments) within a quadrant, we `break` and that x,y is used.
+     */
+    for (let pass = 0; pass < 2; ++pass) {
+      for (let quadrant = 0; quadrant < 4; ++quadrant) {
+        // The bitwise AND operator is used to generate the 4 unique combinations of two booleans. (true+false, true+true, etc)
+        const dx = quadrant & 2 ? -offsetX - infoWidth : offsetX;
+        const dy = quadrant & 1 ? -offsetY - infoHeight : offsetY;
+        // mouseX+dx is ideal, but clamp against the available space (It will be adapted to fit)
+        x = Platform.NumberUtilities.clamp(mouseX + dx, 0, parentWidth - infoWidth);
+        y = Platform.NumberUtilities.clamp(mouseY + dy, 0, parentHeight - infoHeight);
+
+        const popoverFits = pass === 0 ?
+            // Will the whole popover be visible?
+            (x >= mouseX || mouseX >= x + infoWidth) && (y >= mouseY || mouseY >= y + infoHeight) :
+            // Will the popover fit well in 1 dimension? (Though we typically see it fit in both, here. Shrug.)
+            x >= mouseX || mouseX >= x + infoWidth || y >= mouseY || mouseY >= y + infoHeight;
+
+        if (popoverFits) {
+          break;
+        }
       }
     }
     this.popoverElement.style.left = x + 'px';
-    this.popoverElement.style.top = (y || 0) + this.#tooltipPopoverYAdjustment + 'px';
+    this.popoverElement.style.top = y + 'px';
   }
 
   /**
@@ -881,8 +982,15 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
      */
     if (this.highlightedEntryIndex !== -1) {
       this.#selectGroup(groupIndex);
+
       this.dispatchEventToListeners(
           Events.ENTRY_LABEL_ANNOTATION_ADDED, {entryIndex: this.highlightedEntryIndex, withLinkCreationButton: true});
+
+      // Log the double click on the TimelineFlameChartView for VE logs.
+      const flameChartView = this.flameChartDelegate.containingElement?.();
+      if (flameChartView) {
+        VisualLogging.logClick(flameChartView, mouseEvent, {doubleClick: true});
+      }
     }
   }
 
@@ -1263,19 +1371,32 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.#buildEnterEditModeContextMenu(event);
     }
 
-    if (this.highlightedEntryIndex === -1) {
-      // If the user has not selected an individual entry, we do not show any
-      // context menu, so finish here.
+    // The user can create context menus in two ways:
+    // 1. they right click and a contextMenu event is dispatched from the
+    //    browser. This event will be trusted.
+    // 2. they press "space" on the keyboard and we dispatch the event
+    //    ourselves from {@see triggerContextMenuFromKeyPress}.
+    // To enable us to differentiate, we set the detail property
+    // [https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail] to a
+    // specific number (-1) for our faked context menu event. We can do this
+    // because the detail property is never natively set to a negative number.
+    // The reason this is important is because the highlightedEntryIndex is
+    // only updated when the mouse moves, so if the user is navigating +
+    // triggering menus via the keyboard, it will not be updated, and we should
+    // use the selectedEntryIndex.
+    const isFakedFromKeyboardPress = event.detail === KEYBOARD_FAKED_CONTEXT_MENU_DETAIL;
+    const entryIndexToUse = isFakedFromKeyboardPress ? this.selectedEntryIndex : this.highlightedEntryIndex;
+
+    if (entryIndexToUse === -1) {
       return;
     }
 
-    // Update the selected index to match the highlighted index, which
-    // represents the entry under the cursor where the user has right clicked
-    // to trigger a context menu.
-    this.dispatchEventToListeners(Events.ENTRY_INVOKED, this.highlightedEntryIndex);
-    this.setSelectedEntry(this.highlightedEntryIndex);
-    // Update the selected group as well.
-    this.#selectGroup(groupIndex);
+    if (!isFakedFromKeyboardPress) {
+      this.dispatchEventToListeners(Events.ENTRY_INVOKED, entryIndexToUse);
+      this.setSelectedEntry(entryIndexToUse);
+      // Update the selected group as well.
+      this.#selectGroup(groupIndex);
+    }
 
     // Build the context menu for right clicking individual entries.
     // The context menu only applies if the user is hovering over an individual
@@ -1300,6 +1421,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       const labelEntryAnnotationOption = annotationSection.appendItem(i18nString(UIStrings.labelEntry), () => {
         this.dispatchEventToListeners(
             Events.ENTRY_LABEL_ANNOTATION_ADDED, {entryIndex: this.selectedEntryIndex, withLinkCreationButton: false});
+      }, {
+        jslogContext: 'timeline.annotations.create-entry-label',
       });
 
       labelEntryAnnotationOption.setShortcut('Double Click');
@@ -1307,8 +1430,17 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       const linkEntriesAnnotationOption = annotationSection.appendItem(i18nString(UIStrings.linkEntries), () => {
         this.dispatchEventToListeners(
             Events.ENTRIES_LINK_ANNOTATION_CREATED, {entryFromIndex: this.selectedEntryIndex});
+      }, {
+        jslogContext: 'timeline.annotations.create-entries-link',
       });
       linkEntriesAnnotationOption.setShortcut('Double Click');
+
+      annotationSection.appendItem(i18nString(UIStrings.deleteAnnotations), () => {
+        this.dataProvider.deleteAnnotationsForEntry?.(this.selectedEntryIndex);
+      }, {
+        disabled: !this.dataProvider.entryHasAnnotations?.(this.selectedEntryIndex),
+        jslogContext: 'timeline.annotations.delete-entry-annotations',
+      });
     }
 
     void this.contextMenu.show();
@@ -1345,7 +1477,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const x = this.chartViewport.timeToPosition(startTime) + boundingRect.left;
     const y = this.levelToOffset(level) - this.getScrollOffset() + boundingRect.top;
 
-    const event = new MouseEvent('contextmenu', {clientX: x, clientY: y});
+    // Set the `detail` key so in the context menu handler we can differentiate
+    // between a keyboard invoked context menu and a mouse invoked one.
+    const event = new MouseEvent('contextmenu', {clientX: x, clientY: y, detail: KEYBOARD_FAKED_CONTEXT_MENU_DETAIL});
     this.canvas.dispatchEvent(event);
   }
 
@@ -1355,8 +1489,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
 
     if (e.key === ' ' && this.selectedEntryIndex > -1) {
-      this.#triggerContextMenuFromKeyPress();
       // If the user has an event selected, and there is a selected entry, then we open the context menu at this event.
+      this.#triggerContextMenuFromKeyPress();
     }
 
     let eventHandled = this.handleSelectionNavigation(e);
@@ -2124,7 +2258,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.updateElementPosition(this.highlightElement, this.highlightedEntryIndex);
     this.updateElementPosition(this.selectedElement, this.selectedEntryIndex);
 
-    if (this.#searchResultEntryIndex !== -1) {
+    if (this.#searchResultEntryIndex !== null) {
       this.showPopoverForSearchResult(this.#searchResultEntryIndex);
     }
     for (const element of this.#searchResultHighlightElements) {
@@ -2439,7 +2573,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
         lastDrawOffset = barX;
 
         if (this.entryColorsCache) {
-          const color = this.entryColorsCache[entryIndex];
+          const color = this.getColorForEntry(entryIndex);
           let bucket = colorBuckets.get(color);
           if (!bucket) {
             bucket = {indexes: []};
@@ -2576,11 +2710,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
             titleStart, offset + group.style.height / 2, UI.UIUtils.measureTextWidth(context, group.name), 1);
       }
 
-      if (group.legends && group.expanded) {
-        drawLegends(
-            context, HEADER_LEFT_PADDING + this.labelWidthForGroup(context, group) + LEGEND_LEFT_PADDING, offset,
-            group.legends);
-      }
       // The icon and track title will look like this
       // Normal mode:
       // Track title
@@ -2676,7 +2805,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       lastMarkerX = x + width + 1;
       lastMarkerLevel = level;
       this.markerPositions.set(entryIndex, {x, width});
-      context.fillStyle = this.dataProvider.entryColor(entryIndex);
+      context.fillStyle = this.getColorForEntry(entryIndex);
       context.fillRect(x, y, width, h - 1);
       context.fillStyle = 'white';
       context.fillText(title, x + padding, y + h - this.textBaseline);
@@ -2687,7 +2816,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   #drawCustomSymbols(context: CanvasRenderingContext2D, timelineData: FlameChartTimelineData): void {
-    const {entryStartTimes, entryLevels} = timelineData;
+    const {entryStartTimes, entryTotalTimes, entryLevels} = timelineData;
     this.customDrawnPositions.clear();
     context.save();
 
@@ -2695,12 +2824,19 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const posArray = [];
     for (const [entryIndex, drawOverride] of this.#indexToDrawOverride.entries()) {
       const entryStartTime = entryStartTimes[entryIndex];
+      const entryTotalTime = entryTotalTimes[entryIndex];
       const level = entryLevels[entryIndex];
-      const x = this.timeToPositionClipped(entryStartTime);
+
+      const unclippedXStart = this.chartViewport.timeToPosition(entryStartTime);
+      const unclippedXEnd = this.chartViewport.timeToPosition(entryStartTime + entryTotalTime);
+
+      const x = unclippedXStart;
       const y = this.levelToOffset(level);
       const height = this.levelHeight(level);
-      const width = this.#eventBarWidth(timelineData, entryIndex);
-      const pos = drawOverride(context, x, y, width, height, time => this.timeToPositionClipped(time));
+      const width = unclippedXEnd - unclippedXStart;
+      const pos = drawOverride(
+          context, x, y, width, height, time => this.chartViewport.timeToPosition(time),
+          color => this.#transformColor(entryIndex, color));
       posArray.push({entryIndex, pos});
     }
     // Place in z order so coordinatesToEntryIndex finds the highest z-index match first.
@@ -2921,7 +3057,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
           break;
         }
         lastDrawOffset = barX;
-        const color = this.entryColorsCache ? this.entryColorsCache[entryIndex] : '';
+        const color = this.getColorForEntry(entryIndex);
         const endBarX = this.timeToPositionClipped(entryEndTime);
         if (group.style.useDecoratorsForOverview && this.dataProvider.forceDecoration(entryIndex)) {
           const unclippedBarX = this.chartViewport.timeToPosition(entryStartTime);
@@ -3172,6 +3308,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.rawTimelineData = null;
       this.forceDecorationCache = null;
       this.entryColorsCache = null;
+      this.entryIndicesToNotDim = null;
+      this.colorDimmingCache.clear();
       this.rawTimelineDataLength = 0;
       this.#groupTreeRoot = null;
       this.selectedGroupIndex = -1;
@@ -3653,6 +3791,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const barHeight = this.levelHeight(entryLevel);
     const style = (element as HTMLElement).style;
 
+    // TODO(paulirish): make these changes within a coordinator.write callback.
+    // Currently these (plus the scrollOffset() right above) trigger layout thrashing.
     if (isDecoration) {
       style.top = barY + 'px';
       style.width = barHeight + 'px';
@@ -3779,6 +3919,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.rawTimelineData = null;
     this.rawTimelineDataLength = 0;
     this.#groupTreeRoot = null;
+    this.entryIndicesToNotDim = null;
+    this.colorDimmingCache.clear();
     this.highlightedMarkerIndex = -1;
     this.highlightedEntryIndex = -1;
     this.selectedEntryIndex = -1;
@@ -3994,7 +4136,7 @@ export interface FlameChartDataProvider {
   hasTrackConfigurationMode(): boolean;
 
   // The following functions are optional and are used in Performance panel.
-  eventByIndex?(entryIndex: number): Trace.Types.Events.Event|Trace.Handlers.ModelHandlers.Frames.TimelineFrame|null;
+  eventByIndex?(entryIndex: number): Trace.Types.Events.Event|null;
 
   indexForEvent?(event: Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame): number|null;
 
@@ -4005,11 +4147,17 @@ export interface FlameChartDataProvider {
 
   search?
       (visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-       filter: TimelineModel.TimelineModelFilter.TimelineModelFilter): DataProviderSearchResult[];
+       filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter): DataProviderSearchResult[];
 
   // The following three functions are used for the flame chart entry customization.
   modifyTree?(action: FilterAction, entryIndex: number): void;
 
+  getAIEventNodeTreeFromEntryIndex?(entryIndex: number): Trace.Helpers.TreeHelpers.AINode|null;
+
+  entryHasAnnotations?(entryIndex: number): boolean;
+
+  deleteAnnotationsForEntry?(entryIndex: number): void;
+
   findPossibleContextMenuActions?(node: number): PossibleFilterActions|void;
 
   handleFlameChartTransformKeyboardEvent?(event: KeyboardEvent, entryIndex: number, groupIndex: number): void;
@@ -4105,7 +4253,6 @@ export interface Group {
   style: GroupStyle;
   /** Should be turned on if the track supports user editable stacks. */
   showStackContextMenu?: boolean;
-  legends?: Legend[];
   jslogContext?: string;
   description?: string;
 }
@@ -4128,9 +4275,3 @@ export interface GroupStyle {
   useFirstLineForOverview?: boolean;
   useDecoratorsForOverview?: boolean;
 }
-
-export interface Legend {
-  // The color should be a string parsed as CSS <color> value
-  color: string;
-  category: string;
-}

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

@@ -38,7 +38,6 @@ export interface PieChartData {
 // the correct initial size. This avoids a layout shift when the slices are
 // later populated.
 export class PieChart extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-perf-piechart`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private chartName = '';
   private size = 0;
@@ -125,6 +124,7 @@ export class PieChart extends HTMLElement {
           </div>
         </div>
         ` : ''}
+      </div>
     `;
     // clang-format on
     render(output, this.shadow, {host: this});

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

@@ -4,7 +4,7 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Trace from '../../../../models/trace/trace.js';
 
-import {type Calculator} from './TimelineGrid.js';
+import type {Calculator} from './TimelineGrid.js';
 
 export class TimelineOverviewCalculator implements Calculator {
   #minimumBoundary: Trace.Types.Timing.MilliSeconds = Trace.Types.Timing.MilliSeconds(0);

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

@@ -92,9 +92,9 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   }
 
   enableCreateBreadcrumbsButton(): void {
-    const breacrumbsElement = this.overviewGrid.enableCreateBreadcrumbsButton();
-    breacrumbsElement.addEventListener('mousemove', this.onMouseMove.bind(this), true);
-    breacrumbsElement.addEventListener('mouseleave', this.hideCursor.bind(this), true);
+    const breadcrumbsElement = this.overviewGrid.enableCreateBreadcrumbsButton();
+    breadcrumbsElement.addEventListener('mousemove', this.onMouseMove.bind(this), true);
+    breadcrumbsElement.addEventListener('mouseleave', this.hideCursor.bind(this), true);
   }
 
   private onMouseMove(event: Event): void {

package/front_end/ui/legacy/components/source_frame/BinaryResourceViewFactory.test.ts

@@ -11,10 +11,11 @@ import * as SourceFrame from './source_frame.js';
 
 describeWithEnvironment('BinaryResourceViewFactory', () => {
   it('interprets base64 content correctly', async () => {
-    const base64content = 'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u';
+    const base64content = new TextUtils.ContentData.ContentData(
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u', true, '');
     const factory = new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(
-        base64content, 'http://example.com' as Platform.DevToolsPath.UrlString,
-        Common.ResourceType.resourceTypes.WebSocket);
+        TextUtils.StreamingContentData.StreamingContentData.from(base64content),
+        'http://example.com' as Platform.DevToolsPath.UrlString, Common.ResourceType.resourceTypes.WebSocket);
 
     async function getResourceText(view: SourceFrame.ResourceSourceFrame.ResourceSourceFrame): Promise<string> {
       const contentData =
@@ -25,12 +26,7 @@ describeWithEnvironment('BinaryResourceViewFactory', () => {
     assert.strictEqual(
         await getResourceText(factory.createBase64View()),
         'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u');
-    assert.strictEqual(
-        await getResourceText(factory.createHexView()),
-        `00000000: 7365 6e64 696e 6720 7468 6973 2075 7466  sending this utf
-00000001: 2d38 2073 7472 696e 6720 6173 2061 2062  -8 string as a b
-00000002: 696e 6172 7920 6d65 7373 6167 652e 2e2e  inary message...
-`);
+    assert.instanceOf(factory.createHexView(), SourceFrame.StreamingContentHexView.StreamingContentHexView);
     assert.strictEqual(
         await getResourceText(factory.createUtf8View()), 'sending this utf-8 string as a binary message...');
   });