Bug 840241 - Changed inspect button to toggle highlighter between locked/unlocked states. r=paul

browser/devtools/inspector/highlighter.js

@@ -95,6 +95,7 @@ Highlighter.prototype = {
 
   _init: function Highlighter__init()
   {
+    this.toggleLockState = this.toggleLockState.bind(this);
     this.unlockAndFocus = this.unlockAndFocus.bind(this);
     this.updateInfobar = this.updateInfobar.bind(this);
     this.highlight = this.highlight.bind(this);
@@ -318,6 +319,19 @@ Highlighter.prototype = {
     this.emit("unlocked");
   },
 
+  /**
+   * Toggle between locked and unlocked
+   */
+  toggleLockState: function() {
+    if (this.locked) {
+      this.startNode = this.selection.node;
+      this.unlockAndFocus();
+    } else {
+      this.selection.setNode(this.startNode);
+      this.lock();
+    }
+  },
+
   /**
    * Focus the browser before unlocking.
    */
@@ -417,7 +431,7 @@ Highlighter.prototype = {
     this.inspectButton.className = "highlighter-nodeinfobar-button highlighter-nodeinfobar-inspectbutton"
     let toolbarInspectButton = this.inspector.panelDoc.getElementById("inspector-inspect-toolbutton");
     this.inspectButton.setAttribute("tooltiptext", toolbarInspectButton.getAttribute("tooltiptext"));
-    this.inspectButton.addEventListener("command", this.unlockAndFocus);
+    this.inspectButton.addEventListener("command", this.toggleLockState);
 
     let nodemenu = this.chromeDoc.createElement("toolbarbutton");
     nodemenu.setAttribute("type", "menu");

browser/devtools/inspector/inspector.xul

@@ -72,7 +72,7 @@
           tooltiptext="&inspector.selectButton.tooltip;"
           class="devtools-toolbarbutton"
           hidden="true"
-          oncommand="inspector.highlighter.unlockAndFocus()"/>
+          oncommand="inspector.highlighter.toggleLockState()"/>
         <arrowscrollbox id="inspector-breadcrumbs"
           class="breadcrumbs-widget-container"
           flex="1" orient="horizontal"

browser/devtools/inspector/test/browser_inspector_highlighter.js

@@ -57,9 +57,30 @@ function setupHighlighterTests()
   ok(h1, "we have the header");
 
   let i = getActiveInspector();
+  i.selection.setNode(div);
   i.highlighter.unlockAndFocus();
   i.highlighter.outline.setAttribute("disable-transitions", "true");
 
+  executeSoon(function() {
+    i.selection.once("new-node", performToggleComparisons);
+    EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
+  });
+}
+
+function performToggleComparisons(evt)
+{
+  let i = getActiveInspector();
+
+  i.highlighter.toggleLockState();
+  ok(i.highlighter.locked, "highlighter locks");
+  is(i.selection.node, div);
+  i.highlighter.toggleLockState();
+  ok(!i.highlighter.locked, "highlighter unlocks");
+
+  i.highlighter.toggleLockState();
+  ok(i.highlighter.locked, "highlighter locks if selection is unchanged");
+  i.highlighter.toggleLockState();
+
   executeSoon(function() {
     i.selection.once("new-node", performTestComparisons);
     EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);