Bug 1393395 - synchronize network monitor tick marker colors with font colors;r=ntim

MozReview-Commit-ID: KgzoXMj14Dt

--HG--
extra : rebase_source : ea974c153b1cbfc7577e25be234b1cb2e41b1fed

devtools/client/netmonitor/src/components/request-list-header.js

@@ -10,6 +10,8 @@ const {
   DOM,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { getTheme, addThemeObserver, removeThemeObserver } =
+  require("devtools/client/shared/theme");
 const Actions = require("../actions/index");
 const { HEADERS, REQUESTS_WATERFALL } = require("../constants");
 const { getWaterfallScale } = require("../selectors/index");
@@ -50,19 +52,21 @@ const RequestListHeader = createClass({
   componentDidMount() {
     // Create the object that takes care of drawing the waterfall canvas background
     this.background = new WaterfallBackground(document);
-    this.background.draw(this.props);
+    this.drawBackground();
     this.resizeWaterfall();
     window.addEventListener("resize", this.resizeWaterfall);
+    addThemeObserver(this.drawBackground);
   },
 
   componentDidUpdate() {
-    this.background.draw(this.props);
+    this.drawBackground();
   },
 
   componentWillUnmount() {
     this.background.destroy();
     this.background = null;
     window.removeEventListener("resize", this.resizeWaterfall);
+    removeThemeObserver(this.drawBackground);
   },
 
   onContextMenu(evt) {
@@ -70,6 +74,14 @@ const RequestListHeader = createClass({
     this.contextMenu.open(evt);
   },
 
+  drawBackground() {
+    // The background component is theme dependent, so add the current theme to the props.
+    let props = Object.assign({}, this.props, {
+      theme: getTheme()
+    });
+    this.background.draw(props);
+  },
+
   resizeWaterfall() {
     let waterfallHeader = this.refs.waterfallHeader;
     if (waterfallHeader) {

devtools/client/netmonitor/src/constants.js

@@ -231,11 +231,13 @@ const REQUESTS_WATERFALL = {
   // 8-bit value of the alpha component of the tick color
   BACKGROUND_TICKS_OPACITY_MIN: 32,
   BACKGROUND_TICKS_OPACITY_ADD: 32,
-  // RGBA colors for the timing markers
-  DOMCONTENTLOADED_TICKS_COLOR_RGBA: [0, 0, 255, 128],
+  // Colors for timing markers (theme colors, see variables.css)
+  DOMCONTENTLOADED_TICKS_COLOR: "highlight-blue",
+  LOAD_TICKS_COLOR: "highlight-red",
+  // Opacity for the timing markers
+  TICKS_COLOR_OPACITY: 192,
   HEADER_TICKS_MULTIPLE: 5, // ms
   HEADER_TICKS_SPACING_MIN: 60, // px
-  LOAD_TICKS_COLOR_RGBA: [255, 0, 0, 128],
   // Reserve extra space for rendering waterfall time label
   LABEL_WIDTH: 50, // px
 };

devtools/client/netmonitor/src/waterfall-background.js

@@ -5,6 +5,8 @@
 "use strict";
 
 const { REQUESTS_WATERFALL } = require("./constants");
+const { getColor } = require("devtools/client/shared/theme");
+const { colorUtils } = require("devtools/shared/css/color");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const STATE_KEYS = [
@@ -109,11 +111,12 @@ WaterfallBackground.prototype = {
       drawPixelAt(delta, color);
     }
 
+    let { DOMCONTENTLOADED_TICKS_COLOR, LOAD_TICKS_COLOR } = REQUESTS_WATERFALL;
     drawTimestamp(state.timingMarkers.firstDocumentDOMContentLoadedTimestamp,
-                  REQUESTS_WATERFALL.DOMCONTENTLOADED_TICKS_COLOR_RGBA);
+                  this.getThemeColorAsRgba(DOMCONTENTLOADED_TICKS_COLOR, state.theme));
 
     drawTimestamp(state.timingMarkers.firstDocumentLoadTimestamp,
-                  REQUESTS_WATERFALL.LOAD_TICKS_COLOR_RGBA);
+                  this.getThemeColorAsRgba(LOAD_TICKS_COLOR, state.theme));
 
     // Flush the image data and cache the waterfall background.
     pixelArray.set(view8bit);
@@ -122,6 +125,23 @@ WaterfallBackground.prototype = {
     setImageElement("waterfall-background", this.canvas);
   },
 
+  /**
+   * Retrieve a color defined for the provided theme as a rgba array. The alpha channel is
+   * forced to the waterfall constant TICKS_COLOR_OPACITY.
+   *
+   * @param {String} colorName
+   *        The name of the theme color
+   * @param {String} theme
+   *        The name of the theme
+   * @return {Array} RGBA array for the color.
+   */
+  getThemeColorAsRgba(colorName, theme) {
+    let colorStr = getColor(colorName, theme);
+    let color = new colorUtils.CssColor(colorStr);
+    let { r, g, b } = color.getRGBATuple();
+    return [r, g, b, REQUESTS_WATERFALL.TICKS_COLOR_OPACITY];
+  },
+
   destroy() {
     setImageElement("waterfall-background", null);
   }