Bug 879578 - Re-select last selected node when page is reloaded; r=paul

Done at inspector-panel level, this module is not reloaded and is
therefore used now to record the last node (unique css selector)
that has been selected as well as the URL of the page where it has
been selected.
On page reload, an attempt is made to re-select it, otherwise, the
logic implemented previously is executed.

browser/devtools/inspector/inspector-panel.js

@@ -163,10 +163,17 @@ InspectorPanel.prototype = {
       return this._defaultNode;
     }
     let walker = this.walker;
+    let rootNode = null;
 
-    // if available set body node as default selected node
-    // else set documentElement
-    return walker.getRootNode().then(rootNode => {
+    // If available, set either the previously selected node or the body
+    // as default selected, else set documentElement
+    return walker.getRootNode().then(aRootNode => {
+      rootNode = aRootNode;
+      return walker.querySelector(aRootNode, this.selectionCssSelector);
+    }).then(front => {
+      if (front) {
+        return front;
+      }
       return walker.querySelector(rootNode, "body");
     }).then(front => {
       if (front) {
@@ -179,7 +186,7 @@ InspectorPanel.prototype = {
       }
       this._defaultNode = node;
       return node;
-    })
+    });
   },
 
   /**
@@ -288,8 +295,7 @@ InspectorPanel.prototype = {
   /**
    * Reset the inspector on navigate away.
    */
-  onNavigatedAway: function InspectorPanel_onNavigatedAway(event, payload) {
-    let newWindow = payload._navPayload || payload;
+  onNavigatedAway: function InspectorPanel_onNavigatedAway() {
     this._defaultNode = null;
     this.selection.setNodeFront(null);
     this._destroyMarkup();
@@ -309,21 +315,57 @@ InspectorPanel.prototype = {
     });
   },
 
+  _selectionCssSelector: null,
+
+  /**
+   * Set the currently selected node unique css selector.
+   * Will store the current target url along with it to allow pre-selection at
+   * reload
+   */
+  set selectionCssSelector(cssSelector) {
+    this._selectionCssSelector = {
+      selector: cssSelector,
+      url: this._target.url
+    };
+  },
+
+  /**
+   * Get the current selection unique css selector if any, that is, if a node
+   * is actually selected and that node has been selected while on the same url
+   */
+  get selectionCssSelector() {
+    if (this._selectionCssSelector &&
+        this._selectionCssSelector.url === this._target.url) {
+      return this._selectionCssSelector.selector;
+    } else {
+      return null;
+    }
+  },
+
   /**
    * When a new node is selected.
    */
-  onNewSelection: function InspectorPanel_onNewSelection() {
+  onNewSelection: function InspectorPanel_onNewSelection(event, value, reason) {
     this.cancelLayoutChange();
 
     // Wait for all the known tools to finish updating and then let the
     // client know.
     let selection = this.selection.nodeFront;
+
+    // On any new selection made by the user, store the unique css selector
+    // of the selected node so it can be restored after reload of the same page
+    if (reason !== "navigateaway" &&
+        this.selection.node &&
+        this.selection.isElementNode()) {
+      this.selectionCssSelector = CssLogic.findCssSelector(this.selection.node);
+    }
+
     let selfUpdate = this.updating("inspector-panel");
     Services.tm.mainThread.dispatch(() => {
       try {
         selfUpdate(selection);
       } catch(ex) {
-        console.error(ex)
+        console.error(ex);
       }
     }, Ci.nsIThread.DISPATCH_NORMAL);
   },
@@ -360,7 +402,7 @@ InspectorPanel.prototype = {
           self._updateProgress = null;
           self.emit("inspector-updated");
         },
-      }
+      };
     }
 
     let progress = this._updateProgress;
@@ -713,9 +755,8 @@ InspectorPanel.prototype = {
       this.panelWin.clearTimeout(this._timer);
       delete this._timer;
     }
-  },
-
-}
+  }
+};
 
 /////////////////////////////////////////////////////////////////////////
 //// Initializers

browser/devtools/inspector/test/Makefile.in

@@ -38,5 +38,8 @@ MOCHITEST_BROWSER_FILES := \
 		browser_inspector_bug_835722_infobar_reappears.js \
 		browser_inspector_bug_840156_destroy_after_navigation.js \
 		browser_inspector_reload.js \
+		browser_inspector_select_last_selected.js \
+		browser_inspector_select_last_selected.html \
+		browser_inspector_select_last_selected2.html \
 		head.js \
 		$(NULL)

browser/devtools/inspector/test/browser_inspector_select_last_selected.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<div id="id1"></div>
+<div id="id2"></div>
+<div id="id3">
+	<ul class="aList">
+		<li class="item"></li>
+		<li class="item"></li>
+		<li class="item"></li>
+		<li class="item">
+			<span id="id4"></span>
+		</li>
+	</ul>
+</div>

browser/devtools/inspector/test/browser_inspector_select_last_selected.js

@@ -0,0 +1,103 @@
+/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* 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/. */
+
+function test() {
+  let inspector, toolbox;
+  let page1 = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_select_last_selected.html";
+  let page2 = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_select_last_selected2.html";
+
+  waitForExplicitFinish();
+
+  // Create a tab, load test HTML, wait for load and start the tests
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    waitForFocus(function() {
+      openInspector((aInspector, aToolbox) => {
+        inspector = aInspector;
+        toolbox = aToolbox;
+        startTests();
+      });
+    }, content);
+  }, true);
+  content.location = page1;
+
+  function startTests() {
+    testSameNodeSelectedOnPageReload();
+  }
+
+  function endTests() {
+    toolbox.destroy();
+    toolbox = inspector = page1 = page2 = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  }
+
+  function testReSelectingAnElement(id, callback) {
+    let div = content.document.getElementById(id);
+    inspector.selection.setNode(div);
+    inspector.once("inspector-updated", () => {
+      is(inspector.selection.node, div);
+      inspector.once("markuploaded", () => {
+        is(inspector.selection.node.id, id, "Node re-selected after reload");
+        callback();
+      });
+      content.location.reload();
+    });
+  }
+
+  // Test that nodes selected on the test page remain selected after reload
+  function testSameNodeSelectedOnPageReload()
+  {
+    // Select a few nodes and check they are re-selected after reload of the same
+    // page
+    testReSelectingAnElement("id1", () => {
+      testReSelectingAnElement("id2", () => {
+        testReSelectingAnElement("id3", () => {
+          testReSelectingAnElement("id4", testBodySelectedOnNavigate);
+        });
+      });
+    });
+  }
+
+  // Test that since the previously selected node doesn't exist on the new page
+  // the body is selected
+  function testBodySelectedOnNavigate() {
+    // Last node selected was id4, go to a different page and check body is
+    // selected
+    inspector.once("markuploaded", () => {
+      is(
+        inspector.selection.node.tagName.toLowerCase(),
+        "body",
+        "Node not found, selecting body"
+      );
+      testSameNodeSelectedOnNavigateAwayAndBack();
+    });
+    content.location = page2;
+  }
+
+  // Test that the node selected on page 1 gets selected again after a navigation
+  // is made to another page and back again
+  function testSameNodeSelectedOnNavigateAwayAndBack() {
+    // On page2, select id5
+    let id = "id5";
+    let div = content.document.getElementById(id);
+    inspector.selection.setNode(div);
+    inspector.once("inspector-updated", () => {
+      is(inspector.selection.node.id, id);
+      // go to page1 but do not select anything
+      inspector.once("markuploaded", () => {
+        // go back to page2 and check id5 is still the current selection
+        inspector.once("markuploaded", () => {
+          is(inspector.selection.node.id, id, "Node re-selected after navigation");
+          endTests();
+        });
+        content.location = page2;
+      });
+      content.location = page1;
+    });
+  }
+}

browser/devtools/inspector/test/browser_inspector_select_last_selected2.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<div id="id5"></div>