RPP: Improve tooltip display performance

- Dial back the padding introduced in https://crrev.com/c/6397058
- We've had three separate forced reflows when displaying the tracking tooltip.
   1. Reading a mouseEvent.offsetX in Overlays EntryLink when we didn't need to.
   2. Reading a scrollTop of an infrequently scrolled item.
   3. Reading popover dimensions right after we changed its contents
We can't work around the 3rd easily, but this CL removes the first two.

Change-Id: Iff9ce08968d796aa5c12db3b14346f398493f626
Bug: 40278532,406466030
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6423121
Commit-Queue: Jack Franklin <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Auto-Submit: Paul Irish <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: paulirish

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -558,13 +558,12 @@ export class Overlays extends EventTarget {
   // because `overlaysContainer` doesn't have events to enable the interaction with the
   // Flamecharts beneath it.
   #updateMouseCoordinatesProgressEntriesLink(event: Event, chart: EntryChartLocation): void {
-    const mouseEvent = (event as MouseEvent);
-    this.#lastMouseOffsetX = mouseEvent.offsetX;
-    this.#lastMouseOffsetY = mouseEvent.offsetY;
-
     if (this.#entriesLinkInProgress?.state !== Trace.Types.File.EntriesLinkState.PENDING_TO_EVENT) {
       return;
     }
+    const mouseEvent = (event as MouseEvent);
+    this.#lastMouseOffsetX = mouseEvent.offsetX;
+    this.#lastMouseOffsetY = mouseEvent.offsetY;
 
     // The Overlays layer coordinates cover both Network and Main Charts, while the mousemove
     // coordinates are received from the charts individually and start from 0 for each chart.

front_end/panels/timeline/timelineFlameChartView.css

@@ -136,8 +136,8 @@
   contain: content;
   background-color: var(--sys-color-cdt-base-container);
   pointer-events: none;
-  padding: var(--sys-size-4);
-  border-radius: var(--sys-shape-corner-small);
+  padding: var(--sys-size-3) var(--sys-size-4);
+  border-radius: var(--sys-shape-corner-extra-small);
   white-space: nowrap;
   max-width: 80%;
   box-shadow: var(--sys-elevation-level2);

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

@@ -191,7 +191,9 @@ export class ChartViewport extends UI.Widget.VBox {
   }
 
   scrollOffset(): number {
-    return this.vScrollElement.scrollTop;
+    // Return the cached value, rather than the live value (which typically incurs a forced reflow)
+    // In practice, this is true whenever scrollOffset() is called:  `this.scrollTop === this.vScrollElement.scrollTop`
+    return this.scrollTop;
   }
 
   chartHeight(): number {

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

@@ -538,24 +538,6 @@ describeWithEnvironment('FlameChart', () => {
             // For index 0, it is in level 0, so vertically there are only the ruler(17) and the
             // header of Group 0 (17) and beyond it.
             {x: initialXPosition + canvasOffsetX, y: 34 + canvasOffsetY + chartInstance.getScrollOffset()});
-
-        // Emulate two scrolls to force a change in coordinates.
-        // For index 3, it is in level 1, so vertically there are the ruler(17) and the header of Group 0 (17), the
-        // level 0 (17), the padding of Group 1 (4) and the header of Group 1 (17) beyond it.
-        // When select it, it will scroll the level offset(17 + 17 + 17 + 4 + 17 = 72) and its height(17), which means
-        // |chartInstance.getScrollOffset()| returns 89.
-        chartInstance.setSelectedEntry(3);
-        assert.deepEqual(
-            chartInstance.entryIndexToCoordinates(entryIndex),
-            // For index 0, so we need to minus the scroll offset(68) and |chartInstance.getScrollOffset()|, so it is
-            // 34 - 89 - 89 = -144.
-            {x: initialXPosition + canvasOffsetX, y: -144 + canvasOffsetY + chartInstance.getScrollOffset()});
-        chartInstance.setWindowTimes(250, 600);
-        const finalXPosition = chartInstance.computePosition(timelineData.entryStartTimes[entryIndex]);
-        // For this case, there is no vertical scroll, so it is still -144.
-        assert.deepEqual(
-            chartInstance.entryIndexToCoordinates(entryIndex),
-            {x: finalXPosition + canvasOffsetX, y: -144 + canvasOffsetY + chartInstance.getScrollOffset()});
       });
 
       it('returns the correct coordinates after re-order', () => {

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

@@ -902,6 +902,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   updatePopoverContents(popoverElement: Element): void {
     this.popoverElement.removeChildren();
     this.popoverElement.appendChild(popoverElement);
+    // Must update the offset AFTER the new content has been added.
     this.updatePopoverOffset();
     this.lastPopoverState.entryIndex = -1;
   }