Bug 1150112 - Markers overview should react to theme change, and other marker views now use CSS to automatically use theme change. r=vporof

browser/devtools/performance/test/browser_timeline_blueprint.js

@@ -17,10 +17,8 @@ function spawnTest () {
   for (let [key, value] of Iterator(TIMELINE_BLUEPRINT)) {
     ok("group" in value,
       "Each entry in the timeline blueprint contains a `group` key.");
-    ok("fill" in value,
-      "Each entry in the timeline blueprint contains a `fill` key.");
-    ok("stroke" in value,
-      "Each entry in the timeline blueprint contains a `stroke` key.");
+    ok("colorName" in value,
+      "Each entry in the timeline blueprint contains a `colorName` key.");
     ok("label" in value,
       "Each entry in the timeline blueprint contains a `label` key.");
   }

browser/devtools/performance/views/toolbar.js

@@ -53,14 +53,10 @@ let ToolbarView = {
       menuitem.setAttribute("flex", "1");
       menuitem.setAttribute("label", markerDetails.label);
       menuitem.setAttribute("marker-type", markerName);
+      menuitem.className = markerDetails.colorName;
 
       menuitem.addEventListener("command", this._onHiddenMarkersChanged);
 
-      // Style used by pseudo element ::before in performance.inc.css
-      let bulletStyle = `--bullet-bg: ${markerDetails.fill};`
-      bulletStyle += `--bullet-border: ${markerDetails.stroke}`;
-      menuitem.setAttribute("style", bulletStyle);
-
       $("#performance-filter-menupopup").appendChild(menuitem);
     }
   },

browser/devtools/shared/timeline/global.js

@@ -18,9 +18,11 @@ const L10N = new ViewHelpers.L10N(STRINGS_URI);
  * to marker names, while the values are objects with the following format:
  *   - group: the row index in the timeline overview graph; multiple markers
  *            can be added on the same row. @see <overview.js/buildGraphImage>
- *   - fill: a fill color used when drawing the marker
- *   - stroke: a stroke color used when drawing the marker
  *   - label: the label used in the waterfall to identify the marker
+ *   - colorName: the name of the DevTools color used for this marker. If adding
+ *                a new color, be sure to check that there's an entry for
+ *                `.marker-details-bullet.{COLORNAME}` for the equivilent entry.
+ *                https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
  *
  * Whenever this is changed, browser_timeline_waterfall-styles.js *must* be
  * updated as well.
@@ -28,38 +30,32 @@ const L10N = new ViewHelpers.L10N(STRINGS_URI);
 const TIMELINE_BLUEPRINT = {
   "Styles": {
     group: 0,
-    fill: "hsl(285,50%,68%)",
-    stroke: "hsl(285,50%,48%)",
+    colorName: "highlight-pink",
     label: L10N.getStr("timeline.label.styles2")
   },
   "Reflow": {
     group: 0,
-    fill: "hsl(285,50%,68%)",
-    stroke: "hsl(285,50%,48%)",
+    colorName: "highlight-pink",
     label: L10N.getStr("timeline.label.reflow2")
   },
   "Paint": {
     group: 0,
-    fill: "hsl(104,57%,71%)",
-    stroke: "hsl(104,57%,51%)",
+    colorName: "highlight-green",
     label: L10N.getStr("timeline.label.paint")
   },
   "DOMEvent": {
     group: 1,
-    fill: "hsl(39,82%,69%)",
-    stroke: "hsl(39,82%,49%)",
+    colorName: "highlight-lightorange",
     label: L10N.getStr("timeline.label.domevent")
   },
   "Javascript": {
     group: 1,
-    fill: "hsl(39,82%,69%)",
-    stroke: "hsl(39,82%,49%)",
+    colorName: "highlight-lightorange",
     label: L10N.getStr("timeline.label.javascript2")
   },
   "ConsoleTime": {
     group: 2,
-    fill: "hsl(0,0%,80%)",
-    stroke: "hsl(0,0%,60%)",
+    colorName: "highlight-bluegrey",
     label: L10N.getStr("timeline.label.consoleTime")
   },
 };

browser/devtools/shared/timeline/marker-details.js

@@ -64,9 +64,7 @@ MarkerDetails.prototype = {
     hbox.setAttribute("align", "center");
 
     let bullet = this._document.createElement("hbox");
-    bullet.className = "marker-details-bullet";
-    bullet.style.backgroundColor = blueprint.fill;
-    bullet.style.borderColor = blueprint.stroke;
+    bullet.className = `marker-details-bullet ${blueprint.colorName}`;
 
     let label = this._document.createElement("label");
     label.className = "marker-details-type";

browser/devtools/shared/timeline/markers-overview.js

@@ -169,12 +169,8 @@ MarkersOverview.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
       let top = headerHeight + style.group * groupHeight + groupPadding / 2;
       let height = groupHeight - groupPadding;
 
-      let gradient = ctx.createLinearGradient(0, top, 0, top + height);
-      gradient.addColorStop(OVERVIEW_MARKERS_COLOR_STOPS[0], style.stroke);
-      gradient.addColorStop(OVERVIEW_MARKERS_COLOR_STOPS[1], style.fill);
-      gradient.addColorStop(OVERVIEW_MARKERS_COLOR_STOPS[2], style.fill);
-      gradient.addColorStop(OVERVIEW_MARKERS_COLOR_STOPS[3], style.stroke);
-      ctx.fillStyle = gradient;
+      let color = getColor(style.colorName, this.theme);
+      ctx.fillStyle = color;
       ctx.beginPath();
 
       for (let { start, end } of batch) {
@@ -226,7 +222,7 @@ MarkersOverview.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
    * to see the effects.
    */
   setTheme: function (theme) {
-    theme = theme || "light";
+    this.theme = theme = theme || "light";
     this.backgroundColor = getColor("body-background", theme);
     this.selectionBackgroundColor = setAlpha(getColor("selection-background", theme), 0.25);
     this.selectionStripesColor = setAlpha("#fff", 0.1);

browser/devtools/shared/timeline/waterfall.js

@@ -432,9 +432,7 @@ Waterfall.prototype = {
     sidebar.setAttribute("align", "center");
 
     let bullet = this._document.createElement("hbox");
-    bullet.className = "waterfall-marker-bullet";
-    bullet.style.backgroundColor = blueprint.fill;
-    bullet.style.borderColor = blueprint.stroke;
+    bullet.className = `waterfall-marker-bullet ${blueprint.colorName}`;
     bullet.setAttribute("type", marker.name);
     sidebar.appendChild(bullet);
 
@@ -483,12 +481,8 @@ Waterfall.prototype = {
     let offset = this._isRTL ? this._waterfallWidth : 0;
 
     let bar = this._document.createElement("hbox");
-    bar.className = "waterfall-marker-bar";
-    bar.style.backgroundColor = blueprint.fill;
-    bar.style.borderColor = blueprint.stroke;
+    bar.className = `waterfall-marker-bar ${blueprint.colorName}`;
     bar.style.transform = "translateX(" + (start - offset) + "px)";
-    // Save border color. It will change when marker is selected.
-    bar.setAttribute("borderColor", blueprint.stroke);
     bar.setAttribute("type", marker.name);
     bar.setAttribute("width", Math.max(width, WATERFALL_MARKER_BAR_WIDTH_MIN));
     waterfall.appendChild(bar);

browser/themes/shared/devtools/performance.inc.css

@@ -57,10 +57,7 @@
   width: 8px;
   height: 8px;
   margin: 0 8px;
-  border: 1px solid;
   border-radius: 1px;
-  background-color: var(--bullet-bg);
-  border-color: var(--bullet-border);
 }
 
 /* Recording Notice */
@@ -380,7 +377,6 @@
   height: 8px;
   -moz-margin-start: 8px;
   -moz-margin-end: 6px;
-  border: 1px solid;
   border-radius: 1px;
 }
 
@@ -391,9 +387,8 @@
 
 .waterfall-marker-bar {
   height: 9px;
-  border: 1px solid;
-  border-radius: 1px;
   transform-origin: left center;
+  border-radius: 1px;
 }
 
 .waterfall-marker-container.selected > .waterfall-sidebar,
@@ -402,11 +397,6 @@
   color: var(--theme-selection-color);
 }
 
-.waterfall-marker-container.selected .waterfall-marker-bullet,
-.waterfall-marker-container.selected .waterfall-marker-bar {
-  border-color: initial !important;
-}
-
 .waterfall-marker-location {
    color: -moz-nativehyperlinktext;
 }
@@ -426,10 +416,34 @@
 .marker-details-bullet {
   width: 8px;
   height: 8px;
-  border: 1px solid;
   border-radius: 1px;
 }
 
+#performance-filter-menupopup > menuitem.highlight-pink:before,
+.marker-details-bullet.highlight-pink,
+.waterfall-marker-bar.highlight-pink,
+.waterfall-marker-bullet.highlight-pink {
+  background-color: var(--theme-highlight-pink);
+}
+#performance-filter-menupopup > menuitem.highlight-bluegrey:before,
+.marker-details-bullet.highlight-bluegrey,
+.waterfall-marker-bar.highlight-bluegrey,
+.waterfall-marker-bullet.highlight-bluegrey {
+  background-color: var(--theme-highlight-bluegrey);
+}
+#performance-filter-menupopup > menuitem.highlight-green:before,
+.marker-details-bullet.highlight-green,
+.waterfall-marker-bar.highlight-green,
+.waterfall-marker-bullet.highlight-green {
+  background-color: var(--theme-highlight-green);
+}
+#performance-filter-menupopup > menuitem.highlight-lightorange:before,
+.marker-details-bullet.highlight-lightorange,
+.waterfall-marker-bar.highlight-lightorange,
+.waterfall-marker-bullet.highlight-lightorange {
+  background-color: var(--theme-highlight-lightorange);
+}
+
 #waterfall-details > * {
   padding-top: 3px;
 }