chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -281,21 +281,21 @@ describeWithEnvironment('Overlays', () => {
       });
       const currManager = Timeline.ModificationsManager.ModificationsManager.activeManager();
       // The Annotations Overlays are added through the ModificationsManager listener
-      currManager?.addEventListener(Timeline.ModificationsManager.AnnotationModifiedEvent.eventName, event => {
+      currManager?.addEventListener(Timeline.ModificationsManager.AnnotationModifiedEvent.eventName, async event => {
         const {overlay, action} = (event as Timeline.ModificationsManager.AnnotationModifiedEvent);
         if (action === 'Add') {
           overlays.add(overlay);
         }
-        overlays.update();
+        await overlays.update();
       });
 
       // When an annotation overlay is remomved, this event is dispatched to the Modifications Manager.
-      overlays.addEventListener(Overlays.Overlays.AnnotationOverlayActionEvent.eventName, event => {
+      overlays.addEventListener(Overlays.Overlays.AnnotationOverlayActionEvent.eventName, async event => {
         const {overlay, action} = (event as Overlays.Overlays.AnnotationOverlayActionEvent);
         if (action === 'Remove') {
           overlays.remove(overlay);
         }
-        overlays.update();
+        await overlays.update();
       });
 
       overlays.updateChartDimensions('main', {
@@ -327,7 +327,7 @@ describeWithEnvironment('Overlays', () => {
         type: 'ENTRY_SELECTED',
         entry: event,
       });
-      overlays.update();
+      await overlays.update();
 
       // Ensure that the overlay was created.
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_SELECTED');
@@ -344,7 +344,7 @@ describeWithEnvironment('Overlays', () => {
         entry: event,
         outlineReason: 'ERROR',
       });
-      overlays.update();
+      await overlays.update();
 
       const outlineVisible =
           container.querySelector<HTMLElement>('.overlay-type-ENTRY_OUTLINE')?.style.display === 'block';
@@ -355,7 +355,7 @@ describeWithEnvironment('Overlays', () => {
         type: 'ENTRY_SELECTED',
         entry: event,
       });
-      overlays.update();
+      await overlays.update();
       const outlineNowHidden =
           container.querySelector<HTMLElement>('.overlay-type-ENTRY_OUTLINE')?.style.display === 'none';
       assert.isTrue(outlineNowHidden, 'The ENTRY_OUTLINE should be hidden');
@@ -373,12 +373,12 @@ describeWithEnvironment('Overlays', () => {
         type: 'ENTRY_SELECTED',
         entry: event1,
       });
-      overlays.update();
+      await overlays.update();
       overlays.add({
         type: 'ENTRY_SELECTED',
         entry: event2,
       });
-      overlays.update();
+      await overlays.update();
 
       // There should only be one of these
       const entrySelectedOverlays = container.querySelectorAll<HTMLElement>('.overlay-type-ENTRY_SELECTED');
@@ -397,7 +397,7 @@ describeWithEnvironment('Overlays', () => {
         entry: event,
         label: 'entry label',
       });
-      overlays.update();
+      await overlays.update();
 
       // Ensure that the overlay was created.
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
@@ -415,7 +415,7 @@ describeWithEnvironment('Overlays', () => {
         type: 'CURSOR_TIMESTAMP_MARKER',
         timestamp: parsedTrace.Meta.traceBounds.max,
       });
-      overlays.update();
+      await overlays.update();
       assert.lengthOf(container.children, 1);
     });
 
@@ -431,7 +431,7 @@ describeWithEnvironment('Overlays', () => {
         entry: event,
         label: 'entry label',
       });
-      overlays.update();
+      await overlays.update();
 
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
       assert.isOk(overlayDOM);
@@ -441,10 +441,7 @@ describeWithEnvironment('Overlays', () => {
       const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
       assert.isOk(elementsWrapper);
 
-      const labelBox = elementsWrapper.querySelector<HTMLElement>('.label-box');
-      assert.isOk(labelBox);
-
-      const inputField = labelBox.querySelector<HTMLElement>('.input-field');
+      const inputField = elementsWrapper.querySelector<HTMLElement>('.input-field');
       assert.isOk(inputField);
 
       assert.strictEqual(inputField?.innerText, 'entry label');
@@ -463,7 +460,7 @@ describeWithEnvironment('Overlays', () => {
         entry: event,
         label: 'label',
       });
-      overlays.update();
+      await overlays.update();
 
       // Ensure that the overlay was created.
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
@@ -475,9 +472,7 @@ describeWithEnvironment('Overlays', () => {
       const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
       assert.isOk(elementsWrapper);
 
-      const label = elementsWrapper.querySelector<HTMLElement>('.label-box');
-      assert.isOk(label);
-      const inputField = label.querySelector<HTMLElement>('.input-field');
+      const inputField = elementsWrapper.querySelector<HTMLElement>('.input-field');
       assert.isOk(inputField);
 
       // Double click on the label box to make it editable and focus on it
@@ -508,7 +503,7 @@ describeWithEnvironment('Overlays', () => {
         // Make this overlay the entire span of the trace
         bounds: parsedTrace.Meta.traceBounds,
       });
-      overlays.update();
+      await overlays.update();
 
       // Ensure that the overlay was created.
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-TIME_RANGE');
@@ -549,7 +544,7 @@ describeWithEnvironment('Overlays', () => {
            // Make this overlay the entire span of the trace
            bounds: parsedTrace.Meta.traceBounds,
          });
-         overlays.update();
+         await overlays.update();
 
          // Ensure that the overlay was created.
          const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-TIME_RANGE');
@@ -592,7 +587,7 @@ describeWithEnvironment('Overlays', () => {
         label: 'label2',
         bounds: parsedTrace.Meta.traceBounds,
       });
-      overlays.update();
+      await overlays.update();
 
       assert.strictEqual(overlays.overlaysOfType('TIME_RANGE').length, 2);
     });
@@ -609,7 +604,7 @@ describeWithEnvironment('Overlays', () => {
         entry: event as Trace.Types.Events.Event,
         label: '',
       });
-      overlays.update();
+      await overlays.update();
 
       // Ensure that the overlay was created.
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
@@ -621,9 +616,6 @@ describeWithEnvironment('Overlays', () => {
       const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
       assert.isOk(elementsWrapper);
 
-      const label = elementsWrapper.querySelector<HTMLElement>('.label-box');
-      assert.isOk(label);
-
       const inputField = elementsWrapper.querySelector<HTMLElement>('.input-field');
       assert.isOk(inputField);
 
@@ -653,7 +645,7 @@ describeWithEnvironment('Overlays', () => {
         entry: event as Trace.Types.Events.Event,
         label: '',
       });
-      overlays.update();
+      await overlays.update();
 
       // Ensure that the overlay was created.
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
@@ -681,7 +673,7 @@ describeWithEnvironment('Overlays', () => {
         // Make this overlay the entire span of the trace
         bounds: parsedTrace.Meta.traceBounds,
       });
-      overlays.update();
+      await overlays.update();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-TIME_RANGE');
       assert.isOk(overlayDOM);
     });
@@ -696,7 +688,7 @@ describeWithEnvironment('Overlays', () => {
         // Make this overlay the entire span of the trace
         bounds: parsedTrace.Meta.traceBounds,
       });
-      overlays.update();
+      await overlays.update();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-TIME_RANGE');
       assert.isOk(overlayDOM);
     });
@@ -711,7 +703,7 @@ describeWithEnvironment('Overlays', () => {
         // Make this overlay the entire span of the trace
         bounds: parsedTrace.Meta.traceBounds,
       });
-      overlays.update();
+      await overlays.update();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-TIME_RANGE');
       assert.isOk(overlayDOM);
       const firstWidth = window.parseInt(overlayDOM.style.width);
@@ -722,7 +714,7 @@ describeWithEnvironment('Overlays', () => {
           rangeOverlay.bounds.max,
       );
       overlays.updateExisting(rangeOverlay, {bounds: newBounds});
-      overlays.update();
+      await overlays.update();
       const secondWidth = window.parseInt(overlayDOM.style.width);
       // The new time range is smaller so the DOM element should have less width
       assert.isTrue(secondWidth < firstWidth);
@@ -742,7 +734,7 @@ describeWithEnvironment('Overlays', () => {
       const boundsRange = Trace.Types.Timing.MicroSeconds(20_000);
       const boundsMax = Trace.Types.Timing.MicroSeconds(layoutShiftEvent.ts + boundsRange);
       overlays.updateVisibleWindow({min: layoutShiftEvent.ts, max: boundsMax, range: boundsRange});
-      overlays.update();
+      await overlays.update();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_SELECTED');
       assert.isOk(overlayDOM);
       assert.strictEqual(window.parseInt(overlayDOM.style.width), 2);
@@ -758,7 +750,7 @@ describeWithEnvironment('Overlays', () => {
         // Make this overlay the entire span of the trace
         bounds: parsedTrace.Meta.traceBounds,
       });
-      overlays.update();
+      await overlays.update();
       await coordinator.done();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-TIME_RANGE');
       const component = overlayDOM?.querySelector('devtools-time-range-overlay');
@@ -781,11 +773,11 @@ describeWithEnvironment('Overlays', () => {
         type: 'ENTRY_SELECTED',
         entry: event,
       });
-      overlays.update();
+      await overlays.update();
       assert.lengthOf(container.children, 1);
 
       overlays.remove(selectedOverlay);
-      overlays.update();
+      await overlays.update();
       assert.lengthOf(container.children, 0);
     });
 
@@ -800,7 +792,7 @@ describeWithEnvironment('Overlays', () => {
         type: 'ENTRY_SELECTED',
         entry: timelineFrame,
       });
-      overlays.update();
+      await overlays.update();
 
       // Ensure that the overlay was created.
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_SELECTED');
@@ -838,7 +830,7 @@ describeWithEnvironment('Overlays', () => {
         type: 'ENTRY_SELECTED',
         entry: event,
       });
-      overlays.update();
+      await overlays.update();
 
       assert.lengthOf(container.children, 1);
       const removedCount = overlays.removeOverlaysOfType('ENTRY_SELECTED');
@@ -860,16 +852,14 @@ describeWithEnvironment('Overlays', () => {
         entry: event as Trace.Types.Events.Event,
       });
 
-      overlays.update();
+      await overlays.update();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
       assert.isOk(overlayDOM);
       const component = overlayDOM?.querySelector('devtools-entry-label-overlay');
       assert.isOk(component?.shadowRoot);
 
       const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
-      const labelBox = elementsWrapper?.querySelector<HTMLElement>('.label-box') as HTMLSpanElement;
-
-      const inputField = labelBox.querySelector<HTMLElement>('.input-field');
+      const inputField = elementsWrapper?.querySelector<HTMLElement>('.input-field') as HTMLSpanElement;
       assert.isOk(inputField);
       // The label input box should be editable after it is created and before anything else happened
       assert.isTrue(inputField.isContentEditable);
@@ -889,7 +879,7 @@ describeWithEnvironment('Overlays', () => {
         entry: event as Trace.Types.Events.Event,
       });
 
-      overlays.update();
+      await overlays.update();
       const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
       assert.isOk(overlayDOM);
       const component = overlayDOM?.querySelector('devtools-entry-label-overlay');
@@ -897,22 +887,21 @@ describeWithEnvironment('Overlays', () => {
 
       const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
       assert.isOk(elementsWrapper);
-      const labelBox = elementsWrapper.querySelector<HTMLElement>('.label-box') as HTMLSpanElement;
+      const labelBox = elementsWrapper.querySelector<HTMLElement>('.input-field') as HTMLSpanElement;
 
-      const inputField = labelBox.querySelector<HTMLElement>('.input-field');
-      assert.isOk(inputField);
+      assert.isOk(labelBox);
 
       // The label input box should be editable after it is created and before anything else happened
-      assert.isTrue(inputField.isContentEditable);
+      assert.isTrue(labelBox.isContentEditable);
 
       // Make the content to editable by changing the element blur like when clicking outside of it.
       // When that happens, the content should be set to not editable.
-      inputField.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
-      assert.isFalse(inputField.isContentEditable);
+      labelBox.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
+      assert.isFalse(labelBox.isContentEditable);
 
       // Double click on the label to make it editable again
-      inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
-      assert.isTrue(inputField.isContentEditable);
+      labelBox.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
+      assert.isTrue(labelBox.isContentEditable);
     });
   });
 

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

@@ -252,6 +252,7 @@ export interface TimespanBreakdown {
   type: 'TIMESPAN_BREAKDOWN';
   sections: Array<Components.TimespanBreakdownOverlay.EntryBreakdown>;
   entry?: Trace.Types.Events.Event;
+  renderLocation?: 'BOTTOM_OF_TIMELINE'|'BELOW_EVENT'|'ABOVE_EVENT';
 }
 
 export interface CursorTimestampMarker {
@@ -623,7 +624,7 @@ export class Overlays extends EventTarget {
    * existing overlays will have their positions changed to ensure they are
    * rendered in the right place.
    */
-  update(): void {
+  async update(): Promise<void> {
     const timeRangeOverlays: TimeRangeLabel[] = [];
     for (const [overlay, existingElement] of this.#overlaysToElements) {
       const element = existingElement || this.#createElementForNewOverlay(overlay);
@@ -633,11 +634,17 @@ export class Overlays extends EventTarget {
         this.#overlaysContainer.appendChild(element);
       }
 
+      // A chance to update the overlay before we re-position it. If an
+      // overlay's data changed, this is where we can pass that data into the
+      // overlay's component so it has the latest data.
+      this.#updateOverlayBeforePositioning(overlay, element);
+
       // Now we position the overlay on the timeline.
       this.#positionOverlay(overlay, element);
 
-      // And now we give every overlay a chance to react to its new position, if it needs to
-      this.#updateOverlayElementAfterPositioning(overlay, element);
+      // And now we give every overlay a chance to react to its new position,
+      // if it needs to
+      this.#updateOverlayAfterPositioning(overlay, element);
 
       if (overlay.type === 'TIME_RANGE') {
         timeRangeOverlays.push(overlay);
@@ -758,13 +765,12 @@ export class Overlays extends EventTarget {
         // chart, so we figure out the best visible entry pairs to draw
         // between.
         const entriesToConnect = this.#calculateFromAndToForEntriesLink(overlay);
-        if (entriesToConnect === null) {
-          // Unexpected situation: hide the overlay and move on
-          this.#setOverlayElementVisibility(element, false);
-          break;
-        }
-        this.#positionEntriesLinkOverlay(overlay, element, entriesToConnect);
+        const isVisible = entriesToConnect !== null && !annotationsAreHidden;
+        this.#setOverlayElementVisibility(element, isVisible);
 
+        if (isVisible) {
+          this.#positionEntriesLinkOverlay(overlay, element, entriesToConnect);
+        }
         break;
       }
       case 'TIMESPAN_BREAKDOWN': {
@@ -828,13 +834,13 @@ export class Overlays extends EventTarget {
   }
 
   #positionTimespanBreakdownOverlay(overlay: TimespanBreakdown, element: HTMLElement): void {
-    const component = element.querySelector<HTMLElement>('devtools-timespan-breakdown-overlay');
-    const shadow = component?.shadowRoot;
-    const elementSections = shadow?.querySelectorAll<HTMLElement>('.timespan-breakdown-overlay-section');
-
     if (overlay.sections.length === 0) {
       return;
     }
+
+    const component = element.querySelector('devtools-timespan-breakdown-overlay');
+    const elementSections = component?.renderedSections() ?? [];
+
     // Handle horizontal positioning.
     const leftEdgePixel = this.#xPixelForMicroSeconds('main', overlay.sections[0].bounds.min);
     const rightEdgePixel =
@@ -847,7 +853,7 @@ export class Overlays extends EventTarget {
     element.style.left = `${leftEdgePixel}px`;
     element.style.width = `${rangeWidth}px`;
 
-    if (!(elementSections?.length)) {
+    if (elementSections.length === 0) {
       return;
     }
 
@@ -867,30 +873,38 @@ export class Overlays extends EventTarget {
     }
 
     // Handle vertical positioning based on the entry's vertical position.
-    if (overlay.entry) {
+    if (overlay.entry && (overlay.renderLocation === 'BELOW_EVENT' || overlay.renderLocation === 'ABOVE_EVENT')) {
+      // Max height for the overlay box when attached to an entry.
+      const MAX_BOX_HEIGHT = 50;
+      element.style.maxHeight = `${MAX_BOX_HEIGHT}px`;
+
       const y = this.yPixelForEventOnChart(overlay.entry);
       if (y === null) {
         return;
       }
+      const eventHeight = this.pixelHeightForEventOnChart(overlay.entry);
+      if (eventHeight === null) {
+        return;
+      }
 
-      // Max height for the overlay box.
-      const MAX_BOX_HEIGHT = 50;
-      // Some padding so the box hovers just on top.
-      const PADDING = 7;
-
-      // Where the timespan breakdown should sit. Slightly on top of the entry.
-      const bottom = y - PADDING;
+      if (overlay.renderLocation === 'BELOW_EVENT') {
+        const top = y + eventHeight;
+        element.style.top = `${top}px`;
+      } else {
+        // Some padding so the box hovers just on top.
+        const PADDING = 7;
 
-      // Available space between the bottom of the overlay and top of the chart.
-      const minSpace = Math.max(bottom, 0);
-      // Contrain height to available space.
-      const height = Math.min(MAX_BOX_HEIGHT, minSpace);
+        // Where the timespan breakdown should sit. Slightly on top of the entry.
+        const bottom = y - PADDING;
 
-      elementSections[0].style.maxHeight = `${MAX_BOX_HEIGHT}px`;
-      elementSections[0].style.height = `${height}px`;
+        // Available space between the bottom of the overlay and top of the chart.
+        const minSpace = Math.max(bottom, 0);
+        // Contrain height to available space.
+        const height = Math.min(MAX_BOX_HEIGHT, minSpace);
 
-      const top = bottom - height;
-      element.style.top = `${top}px`;
+        const top = bottom - height;
+        element.style.top = `${top}px`;
+      }
     }
   }
 
@@ -1037,7 +1051,7 @@ export class Overlays extends EventTarget {
       }
 
       // The event is off the bottom of the network chart. In this case return the bottom of the network chart.
-      if (y > this.#dimensions.charts.network.heightPixels ?? 0) {
+      if (y > this.#dimensions.charts.network.heightPixels) {
         return this.#dimensions.charts.network.heightPixels;
       }
     }
@@ -1384,6 +1398,7 @@ export class Overlays extends EventTarget {
         const component = new Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay();
         component.sections = overlay.sections;
         component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
+        component.isBelowEntry = overlay.renderLocation === 'BELOW_EVENT';
         div.appendChild(component);
         return div;
       }
@@ -1394,20 +1409,21 @@ export class Overlays extends EventTarget {
   }
 
   /**
-   * Some of the HTML elements for overlays might need updating between each render
-   * (for example, if a time range has changed, we update its duration text)
+   * 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
+   * stale data. This method is used to update an overlay BEFORE it is then
+   * positioned onto the canvas. It is the right place to ensure an overlay has
+   * the latest data it needs.
    */
-  #updateOverlayElementAfterPositioning(overlay: TimelineOverlay, element: HTMLElement): void {
+  #updateOverlayBeforePositioning(overlay: TimelineOverlay, element: HTMLElement): void {
     switch (overlay.type) {
       case 'ENTRY_SELECTED':
-        // Nothing to do here.
         break;
       case 'TIME_RANGE': {
         const component = element.querySelector('devtools-time-range-overlay');
         if (component) {
           component.duration = overlay.showDuration ? overlay.bounds.range : null;
           component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
-          component.updateLabelPositioning();
         }
         break;
       }
@@ -1425,12 +1441,44 @@ export class Overlays extends EventTarget {
         if (component) {
           component.sections = overlay.sections;
           component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
-          component.checkSectionLabelPositioning();
         }
         break;
       }
       case 'CURSOR_TIMESTAMP_MARKER':
-        // No contents within this that need updating.
+        break;
+      case 'CANDY_STRIPED_TIME_RANGE':
+        break;
+      default:
+        Platform.TypeScriptUtilities.assertNever(overlay, `Unexpected overlay ${overlay}`);
+    }
+  }
+  /**
+   * Some overlays have custom logic within them to manage visibility of
+   * labels/etc that can be impacted if the positioning or size of the overlay
+   * has changed. This method can be used to run code after an overlay has
+   * been updated + repositioned on the timeline.
+   */
+  #updateOverlayAfterPositioning(overlay: TimelineOverlay, element: HTMLElement): void {
+    switch (overlay.type) {
+      case 'ENTRY_SELECTED':
+        break;
+      case 'TIME_RANGE': {
+        const component = element.querySelector('devtools-time-range-overlay');
+        component?.updateLabelPositioning();
+        break;
+      }
+      case 'ENTRY_LABEL':
+        break;
+      case 'ENTRY_OUTLINE':
+        break;
+      case 'ENTRIES_LINK':
+        break;
+      case 'TIMESPAN_BREAKDOWN': {
+        const component = element.querySelector('devtools-timespan-breakdown-overlay');
+        component?.checkSectionLabelPositioning();
+        break;
+      }
+      case 'CURSOR_TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1540,7 +1588,7 @@ export class Overlays extends EventTarget {
         return false;
       }
 
-      if (y > this.#dimensions.charts.network.heightPixels ?? 0) {
+      if (y > this.#dimensions.charts.network.heightPixels) {
         // The event is off the bottom of the network chart.
         return false;
       }

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

@@ -1,13 +1,13 @@
-
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import '../../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
@@ -20,18 +20,18 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 import styles from './entriesLinkOverlay.css.js';
 
+const {html} = LitHtml;
+
 export class EntryLinkStartCreating extends Event {
   static readonly eventName = 'entrylinkstartcreating';
 
   constructor() {
-    super(EntryLinkStartCreating.eventName);
+    super(EntryLinkStartCreating.eventName, {bubbles: true, composed: true});
   }
 }
 
 export class EntriesLinkOverlay extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-entries-link-overlay`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.#render.bind(this);
   #coordinateFrom: {x: number, y: number};
   #fromEntryDimentions: {width: number, height: number};
   #coordinateTo: {x: number, y: number};
@@ -84,7 +84,7 @@ export class EntriesLinkOverlay extends HTMLElement {
       return;
     }
     this.#canvasRect = rect;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+    this.#render();
   }
 
   entryFromWrapper(): HTMLElement|null {
@@ -160,6 +160,8 @@ export class EntriesLinkOverlay extends HTMLElement {
     }
 
     if (this.#linkState === Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED) {
+      this.#entryFromConnector.setAttribute('visibility', 'hidden');
+      this.#entryToConnector.setAttribute('visibility', 'hidden');
       return;
     }
 
@@ -234,7 +236,6 @@ export class EntriesLinkOverlay extends HTMLElement {
     }
 
     this.#render();
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   /*
@@ -306,7 +307,7 @@ export class EntriesLinkOverlay extends HTMLElement {
     const arrowColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
     // clang-format off
     LitHtml.render(
-        LitHtml.html`
+        html`
           <svg class="connectorContainer" width="100%" height="100%" role="region" aria-label=${i18nString(UIStrings.diagram)}>
             <defs>
               <linearGradient
@@ -357,11 +358,12 @@ export class EntriesLinkOverlay extends HTMLElement {
           <div class="entry-wrapper from-highlight-wrapper ${this.#fromEntryIsSource ? '' : 'entry-is-not-source'}"></div>
           <div class="entry-wrapper to-highlight-wrapper ${this.#toEntryIsSource ? '' : 'entry-is-not-source'}"></div>
           <div class="create-link-box ${this.#linkState ? 'visible' : 'hidden'}">
-            <${IconButton.Icon.Icon.litTagName}
+            <devtools-icon
               class='create-link-icon'
+              jslog=${VisualLogging.action('timeline.annotations.create-entry-link').track({click: true})}
               @click=${this.#startCreatingConnection}
               name='arrow-right-circle'>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
           </div>
         `,
         this.#shadow, {host: this});