Make initiator arrows more visible

Especially in dark mode

Light mode:

Before: https://screenshot.googleplex.com/4EUh9C7io87Ut6k
After: https://screenshot.googleplex.com/5nvYxHqWzBRJMah

Dark mode:

Before: https://screenshot.googleplex.com/4HNqbEaBKdML8cQ
After: https://screenshot.googleplex.com/68TzNueNpCKhXkk

Bug: 406010014
Change-Id: I8c1be4b800a85ef0f8a1045e246321878975af3d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6421725
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>
Feels: Paul Irish <[email protected]>

Author: and-oli

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

@@ -3173,9 +3173,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     context.save();
     context.scale(ratio, ratio);
     context.translate(0, -top);
-
-    context.fillStyle = '#7f5050';
-    context.strokeStyle = '#7f5050';
+    const arrowColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface-subtle');
+    context.fillStyle = arrowColor;
+    context.strokeStyle = arrowColor;
 
     for (let i = 0; i < td.initiatorsData.length; ++i) {
       const initiatorsData = td.initiatorsData[i];
@@ -3229,16 +3229,18 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       const endY = this.levelToOffset(endLevel) + this.levelHeight(endLevel) / 2;
       const lineLength = endX - startX;
 
-      // Make line an arrow if the line is long enough to fit the arrow head. Otherwise, draw a thinner line without the arrow head.
+      context.lineWidth = 1;
+      context.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      context.shadowOffsetX = 2;
+      context.shadowOffsetY = 2;
+      context.shadowBlur = 3;
       if (lineLength > arrowWidth) {
-        context.lineWidth = 0.5;
+        // Add an arrow to the line if the line is long enough.
         context.beginPath();
         context.moveTo(endX, endY);
         context.lineTo(endX - arrowLineWidth, endY - 3);
         context.lineTo(endX - arrowLineWidth, endY + 3);
         context.fill();
-      } else {
-        context.lineWidth = 0.2;
       }
 
       if (initiatorEndsBeforeInitiatedStart) {

test/interactions/goldens/linux/performance/multiple_initiators.png

@@ -33,7 +33,7 @@ describe('FlameChart', function() {
     await assertElementScreenshotUnchanged(flameChart, 'performance/flame_chart_decorations.png');
   });
 
-  itScreenshot('can add initiators to events', async () => {
+  it('can add initiators to events', async () => {
     await loadComponentDocExample('performance_panel/flamechart.html');
     const flameChart = await getFlameChartContainerWhenReady('#initiators');
     await assertElementScreenshotUnchanged(flameChart, 'performance/multiple_initiators.png');