Bug 1393395 - synchronize network monitor tick marker colors with font colors;r=ntim
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 25 Aug 2017 00:07:50 +0200
changeset 377633 34ee6e678b19ea368a8a5cab6c3f03cd5ce0ca7c
parent 377632 82febb01ec1d779da429a6b6c1f67d89ea943b58
child 377634 217f398fd59d59f919a694ab6ee55cd6ac8f91db
push id32412
push userarchaeopteryx@coole-files.de
push dateWed, 30 Aug 2017 08:45:09 +0000
treeherdermozilla-central@ae9e6b6d3132 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1393395
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1393395 - synchronize network monitor tick marker colors with font colors;r=ntim MozReview-Commit-ID: KgzoXMj14Dt
devtools/client/netmonitor/src/components/request-list-header.js
devtools/client/netmonitor/src/constants.js
devtools/client/netmonitor/src/waterfall-background.js
--- a/devtools/client/netmonitor/src/components/request-list-header.js
+++ b/devtools/client/netmonitor/src/components/request-list-header.js
@@ -5,16 +5,18 @@
 "use strict";
 
 const {
   createClass,
   PropTypes,
   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");
 const { getFormattedTime } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const WaterfallBackground = require("../waterfall-background");
 const RequestListHeaderContextMenu = require("../request-list-header-context-menu");
 
@@ -45,36 +47,46 @@ const RequestListHeader = createClass({
       resetColumns,
       toggleColumn,
     });
   },
 
   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) {
     evt.preventDefault();
     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) {
       // Measure its width and update the 'waterfallWidth' property in the store.
       // The 'waterfallWidth' will be further updated on every window resize.
       setTimeout(() => {
         this.props.resizeWaterfall(waterfallHeader.getBoundingClientRect().width);
       }, 500);
--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@@ -226,21 +226,23 @@ const FILTER_FLAGS = [
 const REQUESTS_WATERFALL = {
   BACKGROUND_TICKS_MULTIPLE: 5, // ms
   BACKGROUND_TICKS_SCALES: 3,
   BACKGROUND_TICKS_SPACING_MIN: 10, // px
   BACKGROUND_TICKS_COLOR_RGB: [128, 136, 144],
   // 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
 };
 
 const general = {
   ACTIVITY_TYPE,
   EVENTS,
   FILTER_SEARCH_DELAY: 200,
--- a/devtools/client/netmonitor/src/waterfall-background.js
+++ b/devtools/client/netmonitor/src/waterfall-background.js
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "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 = [
   "firstRequestStartedMillis",
   "scale",
   "timingMarkers",
   "waterfallWidth",
 ];
@@ -104,29 +106,47 @@ WaterfallBackground.prototype = {
       if (timestamp === -1) {
         return;
       }
 
       let delta = Math.floor((timestamp - state.firstRequestStartedMillis) * state.scale);
       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);
     this.ctx.putImageData(imageData, 0, 0);
 
     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);
   }
 };
 
 /**
  * Returns true if this is document is in RTL mode.
  * @return boolean