Bug 1510023 - Fetch the flexbox highlighter color from the async storage instead of the Redux store. r=mtigley
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 28 Nov 2018 11:30:11 -0500
changeset 505480 1d2ceb4fa579d7fcce0562026ef446be1a935ea2
parent 505479 6f52d12b5a1e60b8ebb6c9042b51c89a50aafeb2
child 505481 94ef0a404e408ff3cf2b66f3de6aa9605d9a5a25
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1510023
milestone65.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 1510023 - Fetch the flexbox highlighter color from the async storage instead of the Redux store. r=mtigley
devtools/client/inspector/flexbox/flexbox.js
devtools/client/inspector/shared/highlighters-overlay.js
--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -221,18 +221,18 @@ class FlexboxInspector {
     }
 
     // Cache the overlay color for the current host to avoid repeatably parsing the host
     // and fetching the custom color from async storage.
     const customColors = await this.getCustomHostColors();
     const currentUrl = this.inspector.target.url;
     // Get the hostname, if there is no hostname, fall back on protocol
     // ex: `data:` uri, and `about:` pages
-    const hostName = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
-    this._overlayColor = customColors[hostName] ? customColors[hostName] : FLEXBOX_COLOR;
+    const hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
+    this._overlayColor = customColors[hostname] ? customColors[hostname] : FLEXBOX_COLOR;
     return this._overlayColor;
   }
 
   /**
    * Returns true if the layout panel is visible, and false otherwise.
    */
   isPanelVisible() {
     return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -8,17 +8,20 @@
 
 const Services = require("Services");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {
   VIEW_NODE_VALUE_TYPE,
   VIEW_NODE_SHAPE_POINT_TYPE,
 } = require("devtools/client/inspector/shared/node-types");
 
-const DEFAULT_GRID_COLOR = "#4B0082";
+loader.lazyRequireGetter(this, "parseURL", "devtools/client/shared/source-utils", true);
+loader.lazyRequireGetter(this, "asyncStorage", "devtools/shared/async-storage");
+
+const DEFAULT_HIGHLIGHTER_COLOR = "#9400FF";
 
 /**
  * Highlighters overlay is a singleton managing all highlighters in the Inspector.
  */
 class HighlightersOverlay {
   /**
    * @param  {Inspector} inspector
    *         Inspector toolbox panel.
@@ -239,23 +242,44 @@ class HighlightersOverlay {
     if (node == this.shapesHighlighterShown) {
       const options = Object.assign({}, this.state.shapes.options);
       options.hoverPoint = point;
       await this.showShapesHighlighter(node, options);
     }
   }
 
   /**
-   * Create a flexbox highlighter settings object from the Redux store containing any
-   * highlighter options that should be passed into the highlighter.
+   * Returns the flexbox highlighter color for the given node.
    */
-  getFlexboxHighlighterSettings() {
+  async getFlexboxHighlighterColor() {
+    // Attempt to get the flexbox highlighter color from the Redux store.
     const { flexbox } = this.store.getState();
     const color = flexbox.color;
-    return { color };
+
+    if (color) {
+      return color;
+    }
+
+    // If the flexbox inspector has not been initialized, attempt to get the flexbox
+    // highlighter from the async storage.
+    const customHostColors = await asyncStorage.getItem("flexboxInspectorHostColors") ||
+      {};
+
+    // Get the hostname, if there is no hostname, fall back on protocol
+    // ex: `data:` uri, and `about:` pages
+    let hostname;
+    try {
+      hostname = parseURL(this.inspector.target.url).hostname ||
+        parseURL(this.inspector.target.url).protocol;
+    } catch (e) {
+      this._handleRejection(e);
+    }
+
+    return hostname && customHostColors[hostname] ?
+      customHostColors[hostname] : DEFAULT_HIGHLIGHTER_COLOR;
   }
 
   /**
    * Toggle the flexbox highlighter for the given flexbox container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the flexbox container element to highlight.
    * @param. {String} trigger
@@ -285,19 +309,29 @@ class HighlightersOverlay {
    *         "markup" represents the markup view. "rule" represents the rule view.
    */
   async showFlexboxHighlighter(node, options, trigger) {
     const highlighter = await this._getHighlighter("FlexboxHighlighter");
     if (!highlighter) {
       return;
     }
 
-    options = Object.assign({}, options, this.getFlexboxHighlighterSettings(node));
+    const color = await this.getFlexboxHighlighterColor(node);
+    options = Object.assign({}, options, { color });
+
+    let isShown;
 
-    const isShown = await highlighter.show(node, options);
+    try {
+      isShown = await highlighter.show(node, options);
+    } catch (e) {
+      // This call might fail if called asynchrously after the toolbox is finished
+      // closing.
+      this._handleRejection(e);
+    }
+
     if (!isShown) {
       return;
     }
 
     this._toggleRuleViewIcon(node, true, ".ruleview-flex");
 
     this.telemetry.toolOpened("flexbox_highlighter", this.inspector.toolbox.sessionId,
       this);
@@ -379,18 +413,16 @@ class HighlightersOverlay {
    *         Object used for passing options to the flex item highlighter.
    */
   async showFlexItemHighlighter(node, options) {
     const highlighter = await this._getHighlighter("FlexItemHighlighter");
     if (!highlighter) {
       return;
     }
 
-    options = Object.assign({}, options, this.getFlexboxHighlighterSettings());
-
     const isShown = await highlighter.show(node, options);
     if (!isShown) {
       return;
     }
 
     this.flexItemHighlighterShown = node;
   }
 
@@ -413,17 +445,17 @@ class HighlightersOverlay {
    * Create a grid highlighter settings object for the provided nodeFront.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront for which we need highlighter settings.
    */
   getGridHighlighterSettings(nodeFront) {
     const { grids, highlighterSettings } = this.store.getState();
     const grid = grids.find(g => g.nodeFront === nodeFront);
-    const color = grid ? grid.color : DEFAULT_GRID_COLOR;
+    const color = grid ? grid.color : DEFAULT_HIGHLIGHTER_COLOR;
     return Object.assign({}, highlighterSettings, { color });
   }
 
   /**
    * Toggle the grid highlighter for the given grid container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element to highlight.