chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as Common from '../../../core/common/common.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import {EntryStyles} from '../../timeline/utils/utils.js';
 
 import * as Components from './components/components.js';
 
@@ -79,12 +81,17 @@ export interface TimeRangeLabel {
 /**
  * Given a list of overlays, this method will calculate the smallest possible
  * trace window that will contain all of the overlays.
- * `overlays` is expected to be non-empty.
+ * `overlays` is expected to be non-empty, and this will return `null` if it is empty.
  */
-export function traceWindowContainingOverlays(overlays: TimelineOverlay[]): Trace.Types.Timing.TraceWindowMicroSeconds {
+export function traceWindowContainingOverlays(overlays: TimelineOverlay[]): Trace.Types.Timing.TraceWindowMicroSeconds|
+    null {
   let minTime = Trace.Types.Timing.MicroSeconds(Number.POSITIVE_INFINITY);
   let maxTime = Trace.Types.Timing.MicroSeconds(Number.NEGATIVE_INFINITY);
 
+  if (overlays.length === 0) {
+    return null;
+  }
+
   for (const overlay of overlays) {
     const windowForOverlay = traceWindowForOverlay(overlay);
     if (windowForOverlay.min < minTime) {
@@ -167,6 +174,11 @@ function traceWindowForOverlay(overlay: TimelineOverlay): Trace.Types.Timing.Tra
       overlayMaxBounds.push(overlay.bounds.max);
       break;
     }
+    case 'TIMINGS_MARKER': {
+      const timings = timingsForOverlayEntry(overlay.entries[0]);
+      overlayMinBounds.push(timings.startTime);
+      break;
+    }
     default:
       Platform.TypeScriptUtilities.assertNever(overlay, `Unexpected overlay ${overlay}`);
   }
@@ -220,6 +232,10 @@ export function entriesForOverlay(overlay: TimelineOverlay): readonly OverlayEnt
       entries.push(overlay.entry);
       break;
     }
+    case 'TIMINGS_MARKER': {
+      entries.push(...overlay.entries);
+      break;
+    }
     default:
       Platform.assertNever(overlay, `Unknown overlay type ${JSON.stringify(overlay)}`);
   }
@@ -261,11 +277,22 @@ export interface TimestampMarker {
   timestamp: Trace.Types.Timing.MicroSeconds;
 }
 
+/**
+ * Represents a timings marker. This has a line that runs up the whole canvas.
+ * We can hold an array of entries, in the case we want to hold more than one with the same timestamp.
+ * The adjusted timestamp being the timestamp for the event adjusted by closest navigation.
+ */
+export interface TimingsMarker {
+  type: 'TIMINGS_MARKER';
+  entries: Trace.Types.Events.Event[];
+  adjustedTimestamp: Trace.Types.Timing.MicroSeconds;
+}
+
 /**
  * All supported overlay types.
  */
 export type TimelineOverlay = EntrySelected|EntryOutline|TimeRangeLabel|EntryLabel|EntriesLink|TimespanBreakdown|
-    TimestampMarker|CandyStripedTimeRange;
+    TimestampMarker|CandyStripedTimeRange|TimingsMarker;
 
 export interface TimelineOverlaySetOptions {
   updateTraceWindow: boolean;
@@ -367,6 +394,14 @@ interface EntriesLinkVisibleEntries {
   entryToIsSource: boolean;
 }
 
+export class EventReferenceClick extends Event {
+  static readonly eventName = 'eventreferenceclick';
+
+  constructor(public event: Trace.Types.Events.Event) {
+    super(EventReferenceClick.eventName, {bubbles: true, composed: true});
+  }
+}
+
 /**
  * This class manages all the overlays that get drawn onto the performance
  * timeline. Overlays are DOM and are drawn above the network and main flame
@@ -457,6 +492,17 @@ export class Overlays extends EventTarget {
         'mousemove', event => this.#updateMouseCoordinatesProgressEntriesLink.bind(this)(event, 'network'));
   }
 
+  // Toggle display of the whole OverlaysContainer.
+  // This function is used to hide all overlays when the Flamechart is in the 'reorder tracks' state.
+  // If the tracks are being reordered, they are collapsed and we do not want to display
+  // anything except the tracks reordering interface.
+  //
+  // Do not change individual overlays visibility with 'setOverlayElementVisibility' since we do not
+  // want to overwrite the overlays visibility state that was set before entering the reordering state.
+  toggleAllOverlaysDisplayed(allOverlaysDisplayed: boolean): void {
+    this.#overlaysContainer.style.display = allOverlaysDisplayed ? 'block' : 'none';
+  }
+
   // Mousemove event listener to get mouse coordinates and update them for the entries link that is being created.
   //
   // The 'mousemove' event is attached to `flameChartsContainers` instead of `overlaysContainer`
@@ -643,6 +689,8 @@ export class Overlays extends EventTarget {
    */
   async update(): Promise<void> {
     const timeRangeOverlays: TimeRangeLabel[] = [];
+    const timingsMarkerOverlays: TimingsMarker[] = [];
+
     for (const [overlay, existingElement] of this.#overlaysToElements) {
       const element = existingElement || this.#createElementForNewOverlay(overlay);
       if (!existingElement) {
@@ -666,6 +714,9 @@ export class Overlays extends EventTarget {
       if (overlay.type === 'TIME_RANGE') {
         timeRangeOverlays.push(overlay);
       }
+      if (overlay.type === 'TIMINGS_MARKER') {
+        timingsMarkerOverlays.push(overlay);
+      }
     }
 
     if (timeRangeOverlays.length > 1) {  // If there are 0 or 1 overlays, they can't overlap
@@ -743,11 +794,7 @@ export class Overlays extends EventTarget {
         break;
       }
       case 'ENTRY_OUTLINE': {
-        const selectedOverlay = this.overlaysOfType<EntrySelected>('ENTRY_SELECTED')?.at(0);
-        // Check if this entry has also been selected by the user. If it has,
-        // do not show the outline, but only show the selected outline.
-        const outlinedEntryIsSelected = Boolean(selectedOverlay && selectedOverlay.entry === overlay.entry);
-        if (!outlinedEntryIsSelected && this.entryIsVisibleOnChart(overlay.entry)) {
+        if (this.entryIsVisibleOnChart(overlay.entry)) {
           this.#setOverlayElementVisibility(element, true);
           this.#positionEntryBorderOutlineType(overlay.entry, element);
         } else {
@@ -815,7 +862,7 @@ export class Overlays extends EventTarget {
             Boolean(visibleWindow && Trace.Helpers.Timing.timestampIsInBounds(visibleWindow, overlay.timestamp));
         this.#setOverlayElementVisibility(element, isVisible);
         if (isVisible) {
-          this.#positionTimestampMarker(overlay, element);
+          this.#positionTimingOverlay(overlay, element);
         }
         break;
       }
@@ -838,16 +885,39 @@ export class Overlays extends EventTarget {
         break;
       }
 
+      case 'TIMINGS_MARKER': {
+        const {visibleWindow} = this.#dimensions.trace;
+        // All the entries have the same ts, so can use the first.
+        const isVisible = Boolean(visibleWindow && this.#entryIsHorizontallyVisibleOnChart(overlay.entries[0]));
+        this.#setOverlayElementVisibility(element, isVisible);
+        if (isVisible) {
+          this.#positionTimingOverlay(overlay, element);
+        }
+        break;
+      }
+
       default: {
         Platform.TypeScriptUtilities.assertNever(overlay, `Unknown overlay: ${JSON.stringify(overlay)}`);
       }
     }
   }
 
-  #positionTimestampMarker(overlay: TimestampMarker, element: HTMLElement): void {
-    // Because we are adjusting the x position, we can use either chart here.
-    const x = this.#xPixelForMicroSeconds('main', overlay.timestamp);
-    element.style.left = `${x}px`;
+  #positionTimingOverlay(overlay: TimestampMarker|TimingsMarker, element: HTMLElement): void {
+    let left;
+    switch (overlay.type) {
+      case 'TIMINGS_MARKER': {
+        // All the entries have the same ts, so can use the first.
+        const timings = Trace.Helpers.Timing.eventTimingsMicroSeconds(overlay.entries[0]);
+        left = this.#xPixelForMicroSeconds('main', timings.startTime);
+        break;
+      }
+      case 'TIMESTAMP_MARKER': {
+        // Because we are adjusting the x position, we can use either chart here.
+        left = this.#xPixelForMicroSeconds('main', overlay.timestamp);
+        break;
+      }
+    }
+    element.style.left = `${left}px`;
   }
 
   #positionTimespanBreakdownOverlay(overlay: TimespanBreakdown, element: HTMLElement): void {
@@ -961,77 +1031,79 @@ export class Overlays extends EventTarget {
         return;
       }
 
-      const fromEntryParams = this.#positionEntryBorderOutlineType(entriesToConnect.entryFrom, entryFromWrapper);
-
-      if (!fromEntryParams) {
-        // Something went wrong, we should always have parameters for the 'from' entry
-        return;
-      }
-
-      const {
-        entryHeight: fromEntryHeight,
-        entryWidth: fromEntryWidth,
-        cutOffHeight: fromCutOffHeight = 0,
-        x: fromEntryX,
-        y: fromEntryY,
-      } = fromEntryParams;
-
       const entryFromVisibility = this.entryIsVisibleOnChart(entryFrom) && !fromEntryInCollapsedTrack;
       const entryToVisibility = entryTo ? this.entryIsVisibleOnChart(entryTo) && !toEntryInCollapsedTrack : false;
 
+      // If the entry is not currently visible, draw the arrow to the edge of the screen towards the entry on the Y-axis.
+      let fromEntryX = 0;
+      let fromEntryY = this.#yCoordinateForNotVisibleEntry(entryFrom);
+
+      // If the entry is visible, draw the arrow to the entry.
+      if (entryFromVisibility) {
+        const fromEntryParams = this.#positionEntryBorderOutlineType(entriesToConnect.entryFrom, entryFromWrapper);
+        if (fromEntryParams) {
+          const fromEntryHeight = fromEntryParams?.entryHeight;
+          const fromEntryWidth = fromEntryParams?.entryWidth;
+          const fromCutOffHeight = fromEntryParams?.cutOffHeight;
+          fromEntryX = fromEntryParams?.x;
+          fromEntryY = fromEntryParams?.y;
+
+          component.fromEntryCoordinateAndDimentions =
+              {x: fromEntryX, y: fromEntryY, length: fromEntryWidth, height: fromEntryHeight - fromCutOffHeight};
+        } else {
+          // Something went if the entry is visible and we cannot get its' parameters.
+          return;
+        }
+      }
+
       // If `fromEntry` is not visible and the link creation is not started yet, meaning that
       // only the button to create the link is displayed, delete the whole overlay.
       if (!entryFromVisibility && overlay.state === Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED) {
         this.dispatchEvent(new AnnotationOverlayActionEvent(overlay, 'Remove'));
       }
 
-      // If the 'from' entry is visible, set the entry Y as an arrow start coordinate. Ff not, get the canvas edge coordinate to for the arrow to start from.
-      const yPixelForFromArrow =
-          (entryFromVisibility ? fromEntryY : this.#yCoordinateForNotVisibleEntry(entryFrom)) ?? 0;
-      component.fromEntryIsSource = entryFromIsSource;
-      component.toEntryIsSource = entryToIsSource;
-
-      component.entriesVisibility = {
-        fromEntryVisibility: entryFromVisibility,
-        toEntryVisibility: entryToVisibility,
-      };
-
-      component.fromEntryCoordinateAndDimentions =
-          {x: fromEntryX, y: yPixelForFromArrow, length: fromEntryWidth, height: fromEntryHeight - fromCutOffHeight};
-
       // If entryTo exists, pass the coordinates and dimentions of the entry that the arrow snaps to.
       // If it does not, the event tracking mouse coordinates updates 'to coordinates' so the arrow follows the mouse instead.
       const entryToWrapper = component.entryToWrapper();
 
       if (entryTo && entryToWrapper) {
-        const toEntryParams = this.#positionEntryBorderOutlineType(entryTo, entryToWrapper);
-
-        if (!toEntryParams) {
-          // Something went wrong, we should have those parameters if 'to' entry exists
-          return;
+        let toEntryX = 0;
+        // If the 'to' entry is visible, set the entry Y as an arrow coordinate to point to. If not, get the canvas edge coordate to point the arrow to.
+        let toEntryY = this.#yCoordinateForNotVisibleEntry(entryTo);
+
+        if (entryToVisibility) {
+          const toEntryParams = this.#positionEntryBorderOutlineType(entryTo, entryToWrapper);
+
+          if (toEntryParams) {
+            const toEntryHeight = toEntryParams?.entryHeight;
+            const toEntryWidth = toEntryParams?.entryWidth;
+            const toCutOffHeight = toEntryParams?.cutOffHeight;
+            toEntryX = toEntryParams?.x;
+            toEntryY = toEntryParams?.y;
+
+            component.toEntryCoordinateAndDimentions = {
+              x: toEntryX,
+              y: toEntryY,
+              length: toEntryWidth,
+              height: toEntryHeight - toCutOffHeight,
+            };
+          } else {
+            // Something went if the entry is visible and we cannot get its' parameters.
+            return;
+          }
         }
-        const {
-          entryHeight: toEntryHeight,
-          entryWidth: toEntryWidth,
-          cutOffHeight: toCutOffHeight = 0,
-          x: toEntryX,
-          y: toEntryY,
-        } = toEntryParams;
 
-        // If the 'to' entry is visible, set the entry Y as an arrow coordinate to point to. If not, get the canvas edge coordate to point the arrow to.
-        const yPixelForToArrow =
-            this.entryIsVisibleOnChart(entryTo) ? toEntryY : this.#yCoordinateForNotVisibleEntry(entryTo) ?? 0;
-
-        component.toEntryCoordinateAndDimentions = {
-          x: toEntryX,
-          y: yPixelForToArrow,
-          length: toEntryWidth,
-          height: toEntryHeight - toCutOffHeight,
-        };
       } else if (this.#lastMouseOffsetX && this.#lastMouseOffsetY) {
         // The second coordinate for in progress link gets updated on mousemove
         this.#entriesLinkInProgress = overlay;
       }
+
+      component.fromEntryIsSource = entryFromIsSource;
+      component.toEntryIsSource = entryToIsSource;
+      component.entriesVisibility = {
+        fromEntryVisibility: entryFromVisibility,
+        toEntryVisibility: entryToVisibility,
+      };
     }
   }
 
@@ -1451,12 +1523,67 @@ export class Overlays extends EventTarget {
         div.appendChild(component);
         return div;
       }
+      case 'TIMINGS_MARKER': {
+        const {color} = EntryStyles.markerDetailsForEvent(overlay.entries[0]);
+        const markersComponent = this.#createTimingsMarkerElement(overlay);
+        div.appendChild(markersComponent);
+        div.style.backgroundColor = color;
+        return div;
+      }
       default: {
         return div;
       }
     }
   }
 
+  #clickEvent(event: Trace.Types.Events.Event): void {
+    this.dispatchEvent(new EventReferenceClick(event));
+  }
+
+  #createOverlayPopover(adjustedTimestamp: Trace.Types.Timing.MicroSeconds, name: string): HTMLElement {
+    const popoverElement = document.createElement('div');
+    const popoverContents = popoverElement.createChild('div', 'overlay-popover');
+    popoverContents.createChild('span', 'overlay-popover-time').textContent =
+        i18n.TimeUtilities.formatMicroSecondsTime(adjustedTimestamp);
+    popoverContents.createChild('span', 'overlay-popover-title').textContent = name;
+    return popoverElement;
+  }
+
+  #mouseMoveOverlay(event: MouseEvent, name: string, overlay: TimingsMarker, markers: HTMLElement, marker: HTMLElement):
+      void {
+    const popoverElement = this.#createOverlayPopover(overlay.adjustedTimestamp, name);
+    this.#lastMouseOffsetX = event.offsetX + (markers.offsetLeft || 0) + (marker.offsetLeft || 0);
+    this.#lastMouseOffsetY = event.offsetY + markers.offsetTop || 0;
+    this.#charts.mainChart.updateMouseOffset(this.#lastMouseOffsetX, this.#lastMouseOffsetY);
+    this.#charts.mainChart.updatePopoverContents(popoverElement);
+  }
+
+  #mouseOutOverlay(): void {
+    this.#lastMouseOffsetX = -1;
+    this.#lastMouseOffsetY = -1;
+    this.#charts.mainChart.updateMouseOffset(this.#lastMouseOffsetX, this.#lastMouseOffsetY);
+    this.#charts.mainChart.hideHighlight();
+  }
+
+  #createTimingsMarkerElement(overlay: TimingsMarker): HTMLElement {
+    const markers = document.createElement('div');
+    markers.classList.add('markers');
+    for (const entry of overlay.entries) {
+      const {color, title} = EntryStyles.markerDetailsForEvent(entry);
+      const marker = document.createElement('div');
+      marker.classList.add('marker-title');
+      marker.textContent = title;
+      marker.style.backgroundColor = color;
+      markers.appendChild(marker);
+
+      marker.addEventListener('click', () => this.#clickEvent(entry));
+      // Popover.
+      marker.addEventListener('mousemove', event => this.#mouseMoveOverlay(event, title, overlay, markers, marker));
+      marker.addEventListener('mouseout', () => this.#mouseOutOverlay());
+    }
+    return markers;
+  }
+
   /**
    * Some overlays store data in their components that needs to be updated
    * before we position an overlay. Else, we might position an overlay based on
@@ -1497,6 +1624,8 @@ export class Overlays extends EventTarget {
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
+      case 'TIMINGS_MARKER':
+        break;
       default:
         Platform.TypeScriptUtilities.assertNever(overlay, `Unexpected overlay ${overlay}`);
     }
@@ -1531,6 +1660,8 @@ export class Overlays extends EventTarget {
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
+      case 'TIMINGS_MARKER':
+        break;
       default:
         Platform.TypeScriptUtilities.assertNever(overlay, `Unexpected overlay ${overlay}`);
     }
@@ -1859,6 +1990,9 @@ export function jsLogContext(overlay: TimelineOverlay): string|null {
     case 'CANDY_STRIPED_TIME_RANGE': {
       return 'timeline.overlays.candy-striped-time-range';
     }
+    case 'TIMINGS_MARKER': {
+      return 'timeline.overlays.timings-marker';
+    }
     default:
       Platform.assertNever(overlay, 'Unknown overlay type');
   }

package/front_end/panels/timeline/overlays/components/EntriesLinkOverlay.ts

@@ -120,6 +120,7 @@ export class EntriesLinkOverlay extends HTMLElement {
   set entriesVisibility(entriesVisibility: {fromEntryVisibility: boolean, toEntryVisibility: boolean}) {
     this.#entryFromVisible = entriesVisibility.fromEntryVisibility;
     this.#entryToVisible = entriesVisibility.toEntryVisibility;
+    this.#redrawConnectionArrow();
   }
 
   // The arrow might be pointing either to an entry or an empty space.
@@ -185,13 +186,12 @@ export class EntriesLinkOverlay extends HTMLElement {
     this.#entryFromConnector.setAttribute('visibility', drawFromEntryConnectorCircle ? 'visible' : 'hidden');
     this.#entryToConnector.setAttribute('visibility', drawToEntryConnectorCircle ? 'visible' : 'hidden');
 
-    // If the entry is visible, the entry arrow starts from the end on the X axis and middle of the Y axis.
-    // If not, draw it to the same y point without the entry height offset and the box around the entry.
-    // This way it will be attached to the track edge.
+    // If the entry is visible, the entry arrow starts from the middle of the right edge of the entry (end on the X axis and middle of the Y axis).
+    // If not, draw it to the y coordinate of the entry and the edge of the timeline so it is pointing in the direction of the entry.
+    const halfFromEntryHeight = this.#fromEntryDimentions.height / 2;
     if (this.#entryFromVisible) {
-      const halfEntryHeight = this.#fromEntryDimentions.height / 2;
       const endConnectionPointX = String(this.#coordinateFrom.x + this.#fromEntryDimentions.width);
-      const endConnectionPointY = String(this.#coordinateFrom.y + halfEntryHeight);
+      const endConnectionPointY = String(this.#coordinateFrom.y + halfFromEntryHeight);
 
       this.#connector.setAttribute('x1', endConnectionPointX);
       this.#connector.setAttribute('y1', endConnectionPointY);
@@ -201,11 +201,12 @@ export class EntriesLinkOverlay extends HTMLElement {
       this.#entryFromWrapper.style.visibility = 'visible';
     } else {
       this.#connector.setAttribute('x1', (this.#coordinateFrom.x + this.#fromEntryDimentions.width).toString());
-      this.#connector.setAttribute('y1', this.#coordinateFrom.y.toString());
+      this.#connector.setAttribute('y1', String(this.#coordinateFrom.y + halfFromEntryHeight));
       this.#entryFromWrapper.style.visibility = 'hidden';
     }
 
-    // If the arrow is pointing to the entry, point it to the middle of the entry.
+    // If the arrow is pointing to the entry and that entry is visible, point it to the middle of the entry.
+    // If the entry is not visible, point the arrow to the edge of the screen towards the entry.
     // Otherwise, the arrow is following the mouse so we assign it to the provided coordinates.
     if (this.#toEntryDimentions && this.#entryToVisible) {
       const connectionPointX = String(this.#coordinateTo.x);
@@ -221,7 +222,14 @@ export class EntriesLinkOverlay extends HTMLElement {
     } else {
       this.#entryToWrapper.style.visibility = 'hidden';
       this.#connector.setAttribute('x2', this.#coordinateTo.x.toString());
-      this.#connector.setAttribute('y2', this.#coordinateTo.y.toString());
+      // If `toEntryDimentions` exist, the arrow points to the entry and we need to take its height into account.
+      // Otherwise, it is following the mouse.
+      if (this.#toEntryDimentions) {
+        const halfToEntryHeight = this.#toEntryDimentions.height / 2;
+        this.#connector.setAttribute('y2', String(this.#coordinateTo.y + halfToEntryHeight));
+      } else {
+        this.#connector.setAttribute('y2', (this.#coordinateTo.y).toString());
+      }
     }
 
     this.#connector.setAttribute('stroke-width', '2');

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -150,7 +151,7 @@ export class EntryLabelOverlay extends HTMLElement {
     // We do not want to create multi-line labels.
     // Therefore, if the new key is `Enter` key, treat it
     // as the end of the label input and blur the input field.
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY || event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       // Note that we do not stop the event propagating here; this is on
       // purpose because we need it to bubble up into TimelineFlameChartView's
       // handler. That updates the state and deals with the keydown.

package/front_end/panels/timeline/overlays/components/TimeRangeOverlay.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
@@ -236,7 +237,7 @@ export class TimeRangeOverlay extends HTMLElement {
     // as the end of the label input and blur the input field.
     // If the text field is empty when `Enter` or `Escape` are pressed,
     // dispatch an event to remove the time range.
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY || event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
       // In DevTools, the `Escape` button will by default toggle the console
       // drawer, which we don't want here, so we need to call
       // `stopPropagation()`.

package/front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.test.ts

@@ -10,7 +10,6 @@ import {
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
-const coordinator = RenderCoordinator.RenderCoordinator.RenderCoordinator.instance();
 
 describeWithEnvironment('TimespanBreakdownOverlay', () => {
   it('renders the sections with the labels and time', async () => {
@@ -29,7 +28,7 @@ describeWithEnvironment('TimespanBreakdownOverlay', () => {
       },
     ];
     component.sections = sections;
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isOk(component.shadowRoot);
 
     const sectionElems =

package/front_end/panels/timeline/timeline.ts

@@ -12,7 +12,6 @@ import * as CountersGraph from './CountersGraph.js';
 import * as EntriesFilter from './EntriesFilter.js';
 import * as EventsSerializer from './EventsSerializer.js';
 import * as EventsTimelineTreeView from './EventsTimelineTreeView.js';
-import * as ExtensionDataGatherer from './ExtensionDataGatherer.js';
 import * as ExtensionTrackAppender from './ExtensionTrackAppender.js';
 import * as FreshRecording from './FreshRecording.js';
 import * as GPUTrackAppender from './GPUTrackAppender.js';
@@ -57,7 +56,6 @@ export {
   EntriesFilter,
   EventsSerializer,
   EventsTimelineTreeView,
-  ExtensionDataGatherer,
   ExtensionTrackAppender,
   FreshRecording,
   GPUTrackAppender,

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -6,10 +6,7 @@
 
 .timeline-overlays-container {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   /* Ensure it appears on top of everything */
   z-index: 200;
   pointer-events: none;
@@ -50,8 +47,16 @@
   }
 }
 
+.overlay-type-ENTRY_SELECTED {
+  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
+  z-index: 1;
+}
+
 .overlay-type-ENTRY_OUTLINE {
   background-color: transparent;
+  border-width: 1px;
+  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
+  z-index: 0;
 
   &.outline-reason-ERROR {
     border-color: var(--sys-color-error-bright);
@@ -74,7 +79,7 @@
       transparent var(--red-stripe-width),
       transparent var(--white-stripe-width)
     );
-  border: 2px solid var(--sys-color-error-bright);
+  border: 1px solid var(--sys-color-error-bright);
 
   &.cut-off-bottom {
     border-bottom: none;
@@ -137,3 +142,37 @@
   bottom: 0;
   height: 100px;
 }
+
+.overlay-type-TIMINGS_MARKER {
+  bottom: 0;
+  width: 1px;
+  pointer-events: auto;
+}
+
+.marker-title {
+  display: flex;
+  justify-content: center;
+  width: var(--sys-size-13);
+  font-size: var(--sys-typescale-body4-size);
+  color: var(--sys-color-base);
+
+  &:hover {
+    cursor: default;
+    transition: opacity 0.2s ease;
+  }
+}
+
+.markers {
+  position: fixed;
+  display: flex;
+  bottom: 0;
+  width: 100%;
+}
+
+.overlay-popover span {
+  margin-right: var(--sys-size-3);
+}
+
+.overlay-popover span.overlay-popover-time {
+  color: var(--sys-color-green);
+}

package/front_end/panels/timeline/timelineFlamechartPopover.css

@@ -49,8 +49,8 @@
 }
 
 .layout-shift-viz-rect {
-  outline: 1px solid color-mix(in sRGB, var(--color-background-inverted) 20%, var(--app-color-rendering));
-  background-color: color-mix(in sRGB, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
+  outline: 1px solid color-mix(in srgb, var(--color-background-inverted) 20%, var(--app-color-rendering));
+  background-color: color-mix(in srgb, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
   position: absolute;
   z-index: 100;
 }

package/front_end/panels/timeline/timelinePanel.css

@@ -137,6 +137,7 @@
 
 #memory-graphs-container .timeline-memory-header::after {
   content: "";
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-toolbarResizerVertical);
   background-repeat: no-repeat;
   background-position: right center, center;
@@ -234,7 +235,7 @@
   display: inline-block;
   user-select: text;
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .timeline-details-warning .timeline-details-view-row-value {
@@ -318,6 +319,7 @@
 
   100% {
     opacity: 0%;
+    /* stylelint-disable-next-line custom-property-pattern */
     transform: translateY(var(--to-Y)) translateX(var(--to-X)) rotate(var(--rotation));
   }
 }
@@ -547,8 +549,7 @@
 }
 
 .timeline-details-view-body > div {
-  overflow-y: hidden;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .timeline-details-chip-title > div {

package/front_end/panels/timeline/timelineStatusDialog.css

@@ -20,6 +20,7 @@
   min-height: auto;
   display: flex;
   align-items: baseline;
+  font-variant-numeric: tabular-nums;
 }
 
 .status-dialog-line .label {