chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -18,8 +18,6 @@ import * as Timeline from '../timeline.js';
 import * as Components from './components/components.js';
 import * as Overlays from './overlays.js';
 
-const coordinator = RenderCoordinator.RenderCoordinator.RenderCoordinator.instance();
-
 const FAKE_OVERLAY_ENTRY_QUERIES: Overlays.Overlays.OverlayEntryQueries = {
   isEntryCollapsedByUser() {
     return false;
@@ -153,10 +151,10 @@ describeWithEnvironment('Overlays', () => {
     const event = charts.mainProvider.eventByIndex?.(50);
     assert.isOk(event);
     const yPixel = overlays.yPixelForEventOnChart(event);
-    // The Y offset for the main chart is 233px, but we add 208px on (200px for the
+    // The Y offset for the main chart is 280px, but we add 208px on (200px for the
     // network chart, and 8px for the re-size handle) giving us the expected
     // 441px.
-    assert.strictEqual(yPixel, 441);
+    assert.strictEqual(yPixel, 488);
   });
 
   it('can adjust the y position of a main chart event when the network track is collapsed', async function() {
@@ -198,10 +196,10 @@ describeWithEnvironment('Overlays', () => {
     const event = charts.mainProvider.eventByIndex?.(50);
     assert.isOk(event);
     const yPixel = overlays.yPixelForEventOnChart(event);
-    // The Y offset for the main chart is 233px, but we add 34px on (the height
+    // The Y offset for the main chart is 280px, but we add 34px on (the height
     // of the collapsed network chart, with no resizer bar as it is hidden when
-    // the network track is collapsed). This gives us 233+34 = 267.
-    assert.strictEqual(yPixel, 267);
+    // the network track is collapsed). This gives us 280+34 = 314.
+    assert.strictEqual(yPixel, 314);
   });
 
   it('can calculate the y position of a network chart event', async function() {
@@ -329,7 +327,7 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(overlayDOM);
     });
 
-    it('does not render an ENTRY_OUTLINE if the entry is also the ENTRY_SELECTED entry', async function() {
+    it('renders an ENTRY_OUTLINE even if the entry is also the ENTRY_SELECTED entry', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
@@ -351,9 +349,9 @@ describeWithEnvironment('Overlays', () => {
         entry: event,
       });
       await overlays.update();
-      const outlineNowHidden =
-          container.querySelector<HTMLElement>('.overlay-type-ENTRY_OUTLINE')?.style.display === 'none';
-      assert.isTrue(outlineNowHidden, 'The ENTRY_OUTLINE should be hidden');
+      const outlineStillVisible =
+          container.querySelector<HTMLElement>('.overlay-type-ENTRY_OUTLINE')?.style.display === 'block';
+      assert.isTrue(outlineStillVisible, 'The ENTRY_OUTLINE should be visible');
     });
 
     it('only ever renders a single selected overlay', async function() {
@@ -398,6 +396,26 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(overlayDOM);
     });
 
+    it('toggles overlays container display', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
+      const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
+
+      overlays.toggleAllOverlaysDisplayed(true);
+      await overlays.update();
+
+      assert.strictEqual(container.style.display, 'block');
+
+      overlays.toggleAllOverlaysDisplayed(false);
+      await overlays.update();
+
+      assert.strictEqual(container.style.display, 'none');
+
+      overlays.toggleAllOverlaysDisplayed(true);
+      await overlays.update();
+
+      assert.strictEqual(container.style.display, 'block');
+    });
+
     it('only renders one TIMESTAMP_MARKER as it is a singleton', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
@@ -516,7 +534,7 @@ describeWithEnvironment('Overlays', () => {
       labelBox.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', cancelable: true, bubbles: true}));
 
       // Ensure that the entry overlay has been removed because it was saved empty
-      assert.strictEqual(overlays.overlaysOfType('TIME_RANGE').length, 0);
+      assert.lengthOf(overlays.overlaysOfType('TIME_RANGE'), 0);
     });
 
     it('Inputting `Enter` into time range label field when the label is not empty does not remove the overlay',
@@ -556,7 +574,7 @@ describeWithEnvironment('Overlays', () => {
          labelBox.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', cancelable: true, bubbles: true}));
 
          // Ensure that the entry overlay has not been because it was has a non-empty label
-         assert.strictEqual(overlays.overlaysOfType('TIME_RANGE').length, 1);
+         assert.lengthOf(overlays.overlaysOfType('TIME_RANGE'), 1);
        });
 
     it('Can create multiple Time Range Overlays for Time Range annotations', async function() {
@@ -578,7 +596,7 @@ describeWithEnvironment('Overlays', () => {
       });
       await overlays.update();
 
-      assert.strictEqual(overlays.overlaysOfType('TIME_RANGE').length, 2);
+      assert.lengthOf(overlays.overlaysOfType('TIME_RANGE'), 2);
     });
 
     it('Removes empty label if it is empty when navigated away from (removed focused from)', async function() {
@@ -612,14 +630,14 @@ describeWithEnvironment('Overlays', () => {
       inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
 
       // Ensure that the entry has 1 overlay
-      assert.strictEqual(overlays.overlaysForEntry(event).length, 1);
+      assert.lengthOf(overlays.overlaysForEntry(event), 1);
 
       // Change the content to not editable by changing the element blur like when clicking outside of it.
       // The label is empty since no initial value was passed into it and no characters were entered.
       inputField.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
 
       // Ensure that the entry overlay has been removed because it was saved empty
-      assert.strictEqual(overlays.overlaysForEntry(event).length, 0);
+      assert.lengthOf(overlays.overlaysForEntry(event), 0);
     });
 
     it('Update label overlay when the label changes', async function() {
@@ -726,7 +744,7 @@ describeWithEnvironment('Overlays', () => {
       await overlays.update();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_SELECTED');
       assert.isOk(overlayDOM);
-      assert.strictEqual(window.parseInt(overlayDOM.style.width), 2);
+      assert.strictEqual(window.parseInt(overlayDOM.style.width), 17);
     });
 
     it('renders the duration and label for a time range overlay', async function() {
@@ -740,7 +758,7 @@ describeWithEnvironment('Overlays', () => {
         bounds: parsedTrace.Meta.traceBounds,
       });
       await overlays.update();
-      await coordinator.done();
+      await RenderCoordinator.done();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-TIME_RANGE');
       const component = overlayDOM?.querySelector('devtools-time-range-overlay');
       assert.isOk(component?.shadowRoot);
@@ -911,9 +929,18 @@ describeWithEnvironment('Overlays', () => {
         outlineReason: 'INFO',
       };
       const traceWindow = Overlays.Overlays.traceWindowContainingOverlays([overlay1, overlay2]);
+      if (!traceWindow) {
+        throw new Error('No trace window for overlays');
+      }
+
       assert.strictEqual(traceWindow.min, 0);
       assert.strictEqual(traceWindow.max, 105);
     });
+
+    it('returns null for no overlays', () => {
+      const traceWindow = Overlays.Overlays.traceWindowContainingOverlays([]);
+      assert.isNull(traceWindow);
+    });
   });
 
   describe('jslogcontext for overlays', () => {

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;
@@ -344,6 +371,22 @@ export class AnnotationOverlayActionEvent extends Event {
   }
 }
 
+export class TimeRangeMouseOverEvent extends Event {
+  static readonly eventName = 'timerangemouseoverevent';
+
+  constructor(public overlay: TimeRangeLabel) {
+    super(TimeRangeMouseOverEvent.eventName, {bubbles: true});
+  }
+}
+
+export class TimeRangeMouseOutEvent extends Event {
+  static readonly eventName = 'timerangemouseoutevent';
+
+  constructor() {
+    super(TimeRangeMouseOutEvent.eventName, {bubbles: true});
+  }
+}
+
 interface EntriesLinkVisibleEntries {
   entryFrom: Trace.Types.Events.Event;
   entryTo: Trace.Types.Events.Event|undefined;
@@ -351,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
@@ -441,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`
@@ -627,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) {
@@ -650,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
@@ -727,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 {
@@ -799,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;
       }
@@ -822,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 {
@@ -945,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,
+      };
     }
   }
 
@@ -1418,6 +1506,12 @@ export class Overlays extends EventTarget {
         component.addEventListener(Components.TimeRangeOverlay.TimeRangeRemoveEvent.eventName, () => {
           this.dispatchEvent(new AnnotationOverlayActionEvent(overlay, 'Remove'));
         });
+        component.addEventListener('mouseover', () => {
+          this.dispatchEvent(new TimeRangeMouseOverEvent(overlay));
+        });
+        component.addEventListener('mouseout', () => {
+          this.dispatchEvent(new TimeRangeMouseOutEvent());
+        });
         div.appendChild(component);
         return div;
       }
@@ -1429,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
@@ -1475,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}`);
     }
@@ -1509,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}`);
     }
@@ -1837,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');