Bug 1342310 - remember selected grid container on navigate;r=gl

The highlighters-overlay now keep the state of the grid highlighter
in memory. On "navigate", the state is restored.

MozReview-Commit-ID: 7KNhxHs3L5G

--HG--
extra : rebase_source : e6a74f6cf53db2b46ac8dad4e1655e4e88ccd975

devtools/client/inspector/rules/test/browser.ini

@@ -152,6 +152,7 @@ skip-if = os == "mac" # Bug 1245996 : click on scrollbar not working on OSX
 skip-if = (os == "win" && debug) # bug 963492: win.
 [browser_rules_grid-highlighter-on-navigate.js]
 [browser_rules_grid-highlighter-on-reload.js]
+[browser_rules_grid-highlighter-restored-after-reload.js]
 [browser_rules_grid-toggle_01.js]
 [browser_rules_grid-toggle_01b.js]
 [browser_rules_grid-toggle_02.js]

devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js

@@ -0,0 +1,46 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid highlighter is re-displayed after reloading a page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Check that the grid highlighter can be displayed");
+  let {inspector, view} = yield openRuleView();
+  let {highlighters} = view;
+
+  yield selectNode("#grid", inspector);
+  let container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  let gridToggle = container.querySelector(".ruleview-grid");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  gridToggle.click();
+  yield onHighlighterShown;
+
+  ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
+
+  info("Reload the page, expect the highlighter to be displayed once again");
+  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  yield refreshTab(gBrowser.selectedTab);
+  yield onHighlighterShown;
+
+  info("Check that the grid highlighter can be displayed after reloading the page");
+  ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
+});

devtools/client/inspector/shared/highlighters-overlay.js

@@ -31,11 +31,18 @@ function HighlightersOverlay(inspector) {
   this.hoveredHighlighterShown = null;
   // Name of the selector highlighter shown.
   this.selectorHighlighterShown = null;
+  // Saved state to be restore on page navigation.
+  this.state = {
+    // Only the grid highlighter state is saved at the moment.
+    grid: {}
+  };
 
   this.onClick = this.onClick.bind(this);
   this.onMouseMove = this.onMouseMove.bind(this);
   this.onMouseOut = this.onMouseOut.bind(this);
   this.onWillNavigate = this.onWillNavigate.bind(this);
+  this.onNavigate = this.onNavigate.bind(this);
+  this._handleRejection = this._handleRejection.bind(this);
 
   EventEmitter.decorate(this);
 }
@@ -64,6 +71,7 @@ HighlightersOverlay.prototype = {
     el.addEventListener("mouseout", this.onMouseOut);
     el.ownerDocument.defaultView.addEventListener("mouseout", this.onMouseOut);
 
+    this.inspector.target.on("navigate", this.onNavigate);
     this.inspector.target.on("will-navigate", this.onWillNavigate);
   },
 
@@ -85,6 +93,7 @@ HighlightersOverlay.prototype = {
     el.removeEventListener("mousemove", this.onMouseMove);
     el.removeEventListener("mouseout", this.onMouseOut);
 
+    this.inspector.target.off("navigate", this.onNavigate);
     this.inspector.target.off("will-navigate", this.onWillNavigate);
   },
 
@@ -126,10 +135,14 @@ HighlightersOverlay.prototype = {
 
     this._toggleRuleViewGridIcon(node, true);
 
-    // Emit the NodeFront of the grid container element that the grid highlighter was
-    // shown for.
-    this.emit("grid-highlighter-shown", node);
-    this.gridHighlighterShown = node;
+    node.getUniqueSelector().then(selector => {
+      // Save grid highlighter state.
+      this.state.grid = { selector, options };
+      this.gridHighlighterShown = node;
+      // Emit the NodeFront of the grid container element that the grid highlighter was
+      // shown for.
+      this.emit("grid-highlighter-shown", node);
+    }).catch(this._handleRejection);
   }),
 
   /**
@@ -151,6 +164,34 @@ HighlightersOverlay.prototype = {
     // hidden for.
     this.emit("grid-highlighter-hidden", this.gridHighlighterShown);
     this.gridHighlighterShown = null;
+
+    // Erase grid highlighter state.
+    this.state.grid = {};
+  }),
+
+  /**
+   * Restore the saved highlighter states.
+   *
+   * @return {Promise} that resolves when the highlighter state was restored, and the
+   *          expected highlighters are displayed.
+   */
+  restoreState: Task.async(function* () {
+    let { selector, options } = this.state.grid;
+
+    if (!selector) {
+      return;
+    }
+
+    // Wait for the new root to be ready in the inspector.
+    yield this.onInspectorNewRoot;
+
+    let walker = this.inspector.walker;
+    let rootNode = yield walker.getRootNode();
+    let nodeFront = yield walker.querySelector(rootNode, selector);
+
+    if (nodeFront) {
+      yield this.showGridHighlighter(nodeFront, options);
+    }
   }),
 
   /**
@@ -173,6 +214,12 @@ HighlightersOverlay.prototype = {
     });
   },
 
+  _handleRejection: function (error) {
+    if (!this.destroyed) {
+      console.error(error);
+    }
+  },
+
   /**
    * Toggle all the grid icons in the rule view if the current inspector selection is the
    * highlighted node.
@@ -315,6 +362,13 @@ HighlightersOverlay.prototype = {
     this._hideHoveredHighlighter();
   },
 
+  /**
+   * Restore saved highlighter state after navigate.
+   */
+  onNavigate: function () {
+    this.restoreState().catch(this._handleRejection);
+  },
+
   /**
    * Clear saved highlighter shown properties on will-navigate.
    */
@@ -322,6 +376,9 @@ HighlightersOverlay.prototype = {
     this.gridHighlighterShown = null;
     this.hoveredHighlighterShown = null;
     this.selectorHighlighterShown = null;
+
+    // The inspector panel should emit the new-root event when it is ready after navigate.
+    this.onInspectorNewRoot = this.inspector.once("new-root");
   },
 
   /**
@@ -345,6 +402,7 @@ HighlightersOverlay.prototype = {
     this.gridHighlighterShown = null;
     this.hoveredHighlighterShown = null;
     this.selectorHighlighterShown = null;
+    this.destroyed = true;
   }
 };