Make markers darker

src/components/shared/thread/SampleGraph.tsx

@@ -9,7 +9,8 @@ import { timeCode } from 'firefox-profiler/utils/time-code';
 import { getSampleIndexClosestToCenteredTime } from 'firefox-profiler/profile-logic/profile-data';
 import { bisectionRight } from 'firefox-profiler/utils/bisect';
 import { withSize } from 'firefox-profiler/components/shared/WithSize';
-import { BLUE_40, BLUE_50, BLUE_70, BLUE_80 } from 'photon-colors';
+import { BLUE_40, BLUE_50, BLUE_70 } from 'photon-colors';
+import { BLUE_65 } from 'firefox-profiler/utils/colors';
 import {
   Tooltip,
   MOUSE_OFFSET,
@@ -217,9 +218,9 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
 
     // Draw the samples in multiple passes, separated by color. This reduces the calls
     // to ctx.fillStyle, which saves on time that's spent parsing color strings.
-    const lighterBlue = lightDark('#c5e1fe', BLUE_80);
-    drawSamples(regularSamples, lightDark(BLUE_40, BLUE_70));
-    drawSamples(highlightedSamples, lightDark(BLUE_70, BLUE_50));
+    const lighterBlue = lightDark('#c5e1fe', '#15336c');
+    drawSamples(regularSamples, lightDark(BLUE_40, BLUE_50));
+    drawSamples(highlightedSamples, lightDark(BLUE_70, BLUE_65));
     drawSamples(idleSamples, lighterBlue);
   }
 

src/components/timeline/Markers.tsx

@@ -167,12 +167,12 @@ class TimelineMarkersCanvas extends React.PureComponent<CanvasProps> {
           1 / devicePixelRatio
         );
       }
-      if (markerStyle.borderLeft !== null) {
-        ctx.fillStyle = markerStyle.borderLeft;
+      if (markerStyle.hasBorderLeft()) {
+        ctx.fillStyle = markerStyle.getBorderLeft();
         ctx.fillRect(pos, markerStyle.top, 1, markerStyle.height);
       }
-      if (markerStyle.borderRight !== null) {
-        ctx.fillStyle = markerStyle.borderRight;
+      if (markerStyle.hasBorderRight()) {
+        ctx.fillStyle = markerStyle.getBorderRight();
         ctx.fillRect(
           pos + itemWidth - 1,
           markerStyle.top,

src/profile-logic/marker-styles.ts

@@ -14,8 +14,12 @@ type MarkerStyle = {
   readonly _background: string | [string, string];
   readonly getBackground: () => string;
   readonly squareCorners: boolean;
-  readonly borderLeft: null | string;
-  readonly borderRight: null | string;
+  readonly _borderLeft: null | string | [string, string];
+  readonly hasBorderLeft: () => boolean;
+  readonly getBorderLeft: () => string;
+  readonly _borderRight: null | string | [string, string];
+  readonly hasBorderRight: () => boolean;
+  readonly getBorderRight: () => string;
 };
 
 const defaultStyle: MarkerStyle = {
@@ -26,8 +30,20 @@ const defaultStyle: MarkerStyle = {
     return maybeLightDark(this._background);
   },
   squareCorners: false,
-  borderLeft: null,
-  borderRight: null,
+  _borderLeft: null,
+  hasBorderLeft: function () {
+    return this._borderLeft !== null;
+  },
+  getBorderLeft: function () {
+    return maybeLightDark(this._borderLeft as string | [string, string]);
+  },
+  _borderRight: null,
+  hasBorderRight: function () {
+    return this._borderRight !== null;
+  },
+  getBorderRight: function () {
+    return maybeLightDark(this._borderRight as string | [string, string]);
+  },
 };
 
 const gcStyle = {
@@ -85,7 +101,7 @@ const markerStyles: { readonly [styleName: string]: MarkerStyle } = {
   },
   Styles: {
     ...defaultStyle,
-    _background: [colors.TEAL_50, colors.TEAL_60],
+    _background: [colors.TEAL_50, colors.TEAL_70],
     top: 7,
   },
   FireScrollEvent: {
@@ -154,18 +170,18 @@ const markerStyles: { readonly [styleName: string]: MarkerStyle } = {
   },
   Jank: {
     ...defaultStyle,
-    _background: ['hsl(347, 100%, 60%)', 'hsl(347, 75%, 50%)'],
-    borderLeft: colors.RED_50,
-    borderRight: colors.RED_50,
+    _background: ['hsl(347, 100%, 60%)', 'hsl(347, 75%, 40%)'],
+    _borderLeft: [colors.RED_50, colors.RED_70],
+    _borderRight: [colors.RED_50, colors.RED_70],
     squareCorners: true,
   },
   // BHR markers are displayed in the timeline only if jank markers are
   // unavailable. Let's style them like Jank markers.
   'BHR-detected hang': {
     ...defaultStyle,
-    _background: ['hsl(347, 100%, 60%)', 'hsl(347, 75%, 50%)'],
-    borderLeft: colors.RED_50,
-    borderRight: colors.RED_50,
+    _background: ['hsl(347, 100%, 60%)', 'hsl(347, 75%, 40%)'],
+    _borderLeft: [colors.RED_50, colors.RED_70],
+    _borderRight: [colors.RED_50, colors.RED_70],
     squareCorners: true,
   },
   // Memory:

src/utils/colors.ts

@@ -102,6 +102,7 @@ const DEFAULT_STYLE: ColorStyles = {
 };
 
 // Colors based on photon colors.
+export const BLUE_65 = '#004fc4';
 export const PURPLE_55 = '#8a00eb';
 export const YELLOW_65 = '#be9b00';