Bug 1456680 - Part 1: Store the grid highlighter setting in HighlightersOverlay. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 30 Apr 2018 14:33:48 -0400
changeset 472571 ea070f2a2b313eb1a1442661df6d91b43b39a186
parent 472570 a340a6ab84898033234f8f4bb7c8de2cfbce5aa2
child 472572 81a4e70b322923922a4f45612066fcb5ebc0a081
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1456680
milestone61.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 1456680 - Part 1: Store the grid highlighter setting in HighlightersOverlay. r=pbro Extract loading the grid highlighter setting into HighlightersOverlay. This allows the grid highlighter toggle in the rule view to also show the grid highlighter with the currently set highlight settings if the grid inspector has not been initiated yet.
devtools/client/inspector/grids/grid-inspector.js
devtools/client/inspector/inspector.js
devtools/client/inspector/shared/highlighters-overlay.js
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -86,18 +86,16 @@ class GridInspector {
     try {
       this.layoutInspector = await this.inspector.walker.getLayoutInspector();
     } catch (e) {
       // This call might fail if called asynchrously after the toolbox is finished
       // closing.
       return;
     }
 
-    this.loadHighlighterSettings();
-
     // Create a shared SwatchColorPicker instance to be reused by all GridItem components.
     this.swatchColorPickerTooltip = new SwatchColorPickerTooltip(
       this.inspector.toolbox.doc,
       this.inspector,
       {
         supportsCssColor4ColorFunction: () => false
       }
     );
@@ -256,31 +254,16 @@ class GridInspector {
    * Returns true if the layout panel is visible, and false otherwise.
    */
   isPanelVisible() {
     return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
            this.inspector.toolbox.currentToolId === "inspector" &&
            this.inspector.sidebar.getCurrentTabID() === "layoutview";
   }
 
-  /**
-   * Load the grid highligher display settings into the store from the stored preferences.
-   */
-  loadHighlighterSettings() {
-    let { dispatch } = this.store;
-
-    let showGridAreas = Services.prefs.getBoolPref(SHOW_GRID_AREAS);
-    let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
-    let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
-
-    dispatch(updateShowGridAreas(showGridAreas));
-    dispatch(updateShowGridLineNumbers(showGridLineNumbers));
-    dispatch(updateShowInfiniteLines(showInfinteLines));
-  }
-
   showGridHighlighter(node, settings) {
     this.lastHighlighterColor = settings.color;
     this.lastHighlighterNode = node;
     this.lastHighlighterState = true;
 
     this.highlighters.showGridHighlighter(node, settings);
   }
 
@@ -363,33 +346,33 @@ class GridInspector {
     this.inspector.emit("grid-panel-updated");
   }
   /**
    * Handler for "grid-highlighter-shown" events emitted from the
    * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
    * Required since on and off events need the same reference object.
    *
    * @param  {NodeFront} nodeFront
-   *         The NodeFront of the flex container element for which the flexbox
+   *         The NodeFront of the grid container element for which the grid
    *         highlighter is shown for.
    * @param  {Object} options
    *         The highlighter options used for the highlighter being shown/hidden.
    */
   onHighlighterShown(nodeFront, options) {
     return this.onHighlighterChange(true, nodeFront, options);
   }
 
   /**
    * Handler for "grid-highlighter-hidden" events emitted from the
    * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
    * Required since on and off events need the same reference object.
    *
    * @param  {NodeFront} nodeFront
-   *         The NodeFront of the flex container element for which the flexbox
-   *         highlighter is shown for.
+   *         The NodeFront of the grid container element for which the grid highlighter
+   *         is hidden for.
    * @param  {Object} options
    *         The highlighter options used for the highlighter being shown/hidden.
    */
   onHighlighterHidden(nodeFront, options) {
     return this.onHighlighterChange(false, nodeFront, options);
   }
 
   /**
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -99,25 +99,26 @@ function Inspector(toolbox) {
   EventEmitter.decorate(this);
 
   this._toolbox = toolbox;
   this._target = toolbox.target;
   this.panelDoc = window.document;
   this.panelWin = window;
   this.panelWin.inspector = this;
 
+  this.store = Store();
+
   // Map [panel id => panel instance]
   // Stores all the instances of sidebar panels like rule view, computed view, ...
   this._panels = new Map();
 
   this.highlighters = new HighlightersOverlay(this);
   this.prefsObserver = new PrefObserver("devtools.");
   this.reflowTracker = new ReflowTracker(this._target);
   this.styleChangeTracker = new InspectorStyleChangeTracker(this);
-  this.store = Store();
   this.telemetry = new Telemetry();
 
   // Store the URL of the target page prior to navigation in order to ensure
   // telemetry counts in the Grid Inspector are not double counted on reload.
   this.previousURL = this.target.url;
 
   this.show3PaneToggle = Services.prefs.getBoolPref(SHOW_THREE_PANE_TOGGLE_PREF);
   this.is3PaneModeEnabled = Services.prefs.getBoolPref(THREE_PANE_ENABLED_PREF);
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -7,17 +7,27 @@
 "use strict";
 
 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 {
+  updateShowGridAreas,
+  updateShowGridLineNumbers,
+  updateShowInfiniteLines,
+} = require("devtools/client/inspector/grids/actions/highlighter-settings");
+
 const DEFAULT_GRID_COLOR = "#4B0082";
+const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
+const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
+const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
 
 /**
  * Highlighters overlay is a singleton managing all highlighters in the Inspector.
  */
 class HighlightersOverlay {
   /**
    * @param  {Inspector} inspector
    *         Inspector toolbox panel.
@@ -73,16 +83,18 @@ class HighlightersOverlay {
     this._handleRejection = this._handleRejection.bind(this);
     this.onShapesHighlighterShown = this.onShapesHighlighterShown.bind(this);
     this.onShapesHighlighterHidden = this.onShapesHighlighterHidden.bind(this);
 
     // Add inspector events, not specific to a given view.
     this.inspector.on("markupmutation", this.onMarkupMutation);
     this.inspector.target.on("will-navigate", this.onWillNavigate);
 
+    this.loadGridHighlighterSettings();
+
     EventEmitter.decorate(this);
   }
 
   /**
    * Returns whether `node` is somewhere inside the DOM of the rule view.
    *
    * @param {DOMNode} node
    * @return {Boolean}
@@ -125,16 +137,31 @@ class HighlightersOverlay {
 
     let el = view.element;
     el.removeEventListener("click", this.onClick, true);
     el.removeEventListener("mousemove", this.onMouseMove);
     el.removeEventListener("mouseout", this.onMouseOut);
   }
 
   /**
+   * Load the grid highligher display settings into the store from the stored preferences.
+   */
+  loadGridHighlighterSettings() {
+    const { dispatch } = this.inspector.store;
+
+    const showGridAreas = Services.prefs.getBoolPref(SHOW_GRID_AREAS);
+    const showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
+    const showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
+
+    dispatch(updateShowGridAreas(showGridAreas));
+    dispatch(updateShowGridLineNumbers(showGridLineNumbers));
+    dispatch(updateShowInfiniteLines(showInfinteLines));
+  }
+
+  /**
    * Toggle the shapes highlighter for the given node.
 
    * @param  {NodeFront} node
    *         The NodeFront of the element with a shape to highlight.
    * @param  {Object} options
    *         Object used for passing options to the shapes highlighter.
    * @param {TextProperty} textProperty
    *        TextProperty where to write changes.