diff --git a/browser/devtools/framework/test/browser_keybindings.js b/browser/devtools/framework/test/browser_keybindings.js
index b49a8f822a1..c7b444700a6 100644
--- a/browser/devtools/framework/test/browser_keybindings.js
+++ b/browser/devtools/framework/test/browser_keybindings.js
@@ -17,6 +17,7 @@ function test()
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
     gBrowser.selectedBrowser.removeEventListener("load", onload, true);
     doc = content.document;
+    node = doc.querySelector("h1");
     waitForFocus(setupKeyBindingsTest, content);
   }, true);
 
@@ -63,24 +64,37 @@ function test()
     keysetMap.inspector.synthesizeKey();
   }
 
+  function moveMouseOver(aElement, aInspector, cb)
+  {
+    EventUtils.synthesizeMouse(aElement, 2, 2, {type: "mousemove"},
+      aElement.ownerDocument.defaultView);
+    aInspector.toolbox.once("picker-node-hovered", () => {
+      executeSoon(cb);
+    });
+  }
+
+  function isHighlighting()
+  {
+    let outline = gBrowser.selectedBrowser.parentNode
+      .querySelector(".highlighter-container .highlighter-outline");
+    return outline && !outline.hasAttribute("hidden");
+  }
+
   function inspectorShouldBeOpenAndHighlighting(aInspector, aToolbox)
   {
     is (aToolbox.currentToolId, "inspector", "Correct tool has been loaded");
-    is (aInspector.highlighter.locked, true, "Highlighter should be locked");
 
-    aInspector.highlighter.once("unlocked", () => {
-      is (aInspector.highlighter.locked, false, "Highlighter should be unlocked");
+    aToolbox.once("picker-started", () => {
+      ok(true, "picker-started event received, highlighter started");
       keysetMap.inspector.synthesizeKey();
-      is (aInspector.highlighter.locked, true, "Highlighter should be locked");
-      keysetMap.inspector.synthesizeKey();
-      is (aInspector.highlighter.locked, false, "Highlighter should be unlocked");
-      keysetMap.inspector.synthesizeKey();
-      is (aInspector.highlighter.locked, true, "Highlighter should be locked");
 
-      aToolbox.once("webconsole-ready", (e, panel) => {
-        webconsoleShouldBeSelected(aToolbox, panel);
+      aToolbox.once("picker-stopped", () => {
+        ok(true, "picker-stopped event received, highlighter stopped");
+        aToolbox.once("webconsole-ready", (e, panel) => {
+          webconsoleShouldBeSelected(aToolbox, panel);
+        });
+        keysetMap.webconsole.synthesizeKey();
       });
-      keysetMap.webconsole.synthesizeKey();
     });
   }
 
diff --git a/browser/devtools/inspector/test/browser.ini b/browser/devtools/inspector/test/browser.ini
index b87eef39f27..a60802b3d3b 100644
--- a/browser/devtools/inspector/test/browser.ini
+++ b/browser/devtools/inspector/test/browser.ini
@@ -24,14 +24,12 @@ support-files =
 [browser_inspector_bug_831693_input_suggestion.js]
 # [browser_inspector_bug_831693_searchbox_panel_navigation.js]
 # Disabled for too many intermittent failures (bug 851349)
-[browser_inspector_bug_835722_infobar_reappears.js]
 [browser_inspector_bug_840156_destroy_after_navigation.js]
 [browser_inspector_changes.js]
 [browser_inspector_cmd_inspect.js]
 [browser_inspector_dead_node_exception.js]
 [browser_inspector_destroyselection.js]
 [browser_inspector_highlighter.js]
-[browser_inspector_highlighter_autohide.js]
 [browser_inspector_iframeTest.js]
 [browser_inspector_infobar.js]
 [browser_inspector_initialization.js]
diff --git a/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js b/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
index b1c2d3c804c..8ef0a0f8a92 100644
--- a/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
@@ -2,13 +2,12 @@
  * 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, doc;
+  let inspector, doc, toolbox;
   let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
   let {require} = devtools;
   let promise = require("sdk/core/promise");
-  let { Task } = Cu.import("resource://gre/modules/Task.jsm", {});
+  let {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
 
   waitForExplicitFinish();
 
@@ -19,75 +18,67 @@ function test() {
     waitForFocus(setupTest, content);
   }, true);
 
-  content.location = "data:text/html,<h1>foo<h1><h2>bar</h2>";
+  content.location = "data:text/html,<h1>foo</h1><h2>bar</h2>";
 
   function setupTest() {
-    let h = require("devtools/inspector/highlighter");
-    h._forceBasic.value = true;
-    openInspector(runTests);
+    openInspector((aInspector, aToolbox) => {
+      toolbox = aToolbox;
+      inspector = aInspector;
+      inspector.selection.setNode(doc.querySelector("h2"), null);
+      inspector.once("inspector-updated", runTests);
+    });
   }
 
   function runTests(aInspector) {
-    inspector = aInspector;
-
+    getHighlighterOutline().setAttribute("disable-transitions", "true");
     Task.spawn(function() {
-      yield selectH1();
-      yield verifyH1Selected();
-      yield deselect();
-      yield verifyNoNodeSelected();
-
-      yield selectH1();
-      yield verifyH1Selected();
-      yield destroyInspector();
-      yield verifyNoNodeSelected();
+      yield hoverH1InMarkupView();
+      yield assertH1Highlighted();
+      yield mouseLeaveMarkupView();
+      yield assertNoNodeHighlighted();
 
       finishUp();
     }).then(null, Cu.reportError);
   }
 
-  function selectH1() {
+  function hoverH1InMarkupView() {
     let deferred = promise.defer();
-    let h1 = doc.querySelector("h1");
-    inspector.selection.once("new-node-front", () => {
-      executeSoon(deferred.resolve);
-    });
-    inspector.selection.setNode(h1);
+
+    let container = getContainerForRawNode(inspector.markup, doc.querySelector("h1"));
+    EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
+      inspector.markup.doc.defaultView);
+    inspector.markup.once("node-highlight", deferred.resolve);
+
     return deferred.promise;
   }
 
-  function verifyH1Selected() {
-    let h1 = doc.querySelector("h1");
-    let nodes = doc.querySelectorAll(":-moz-devtools-highlighted");
-    is(nodes.length, 1, "only one node selected");
-    is(nodes[0], h1, "h1 selected");
+  function assertH1Highlighted() {
+    ok(isHighlighting(), "The highlighter is shown on a markup container hover");
+    is(getHighlitNode(), doc.querySelector("h1"), "The highlighter highlights the right node");
     return promise.resolve();
   }
 
-  function deselect() {
+  function mouseLeaveMarkupView() {
     let deferred = promise.defer();
-    inspector.selection.once("new-node-front", () => {
-      executeSoon(deferred.resolve);
-    });
-    inspector.selection.setNode(null);
+
+    // Find another element to mouseover over in order to leave the markup-view
+    let btn = toolbox.doc.querySelector(".toolbox-dock-button");
+
+    EventUtils.synthesizeMouse(btn, 2, 2, {type: "mousemove"},
+      toolbox.doc.defaultView);
+    executeSoon(deferred.resolve);
+
     return deferred.promise;
   }
 
-  function destroyInspector() {
-    return inspector.destroy();
-  }
-
-  function verifyNoNodeSelected() {
-    is(doc.querySelectorAll(":-moz-devtools-highlighted").length, 0, "no node selected");
+  function assertNoNodeHighlighted() {
+    ok(!isHighlighting(), "After the mouse left the markup view, the highlighter is hidden");
     return promise.resolve();
   }
 
   function finishUp() {
-    let h = require("devtools/inspector/highlighter");
-    h._forceBasic.value = false;
-    inspector = doc = null;
+    inspector = doc = toolbox = null;
     gBrowser.removeCurrentTab();
     finish();
   }
 }
-
-
diff --git a/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js b/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
index d2b98a7c4d3..d6e35ea9109 100644
--- a/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
+++ b/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
@@ -57,7 +57,10 @@ function test()
 
     if (cursor >= nodes.length) {
       inspector.off("breadcrumbs-updated", nodeSelected);
-      finishUp();
+      // breadcrumbs-updated is an event that is fired before the rest of the
+      // inspector is updated, so there'll be hanging connections if we finish
+      // up before waiting for everything to end.
+      inspector.once("inspector-updated", finishUp);
     } else {
       let node = nodes[cursor].node;
       inspector.selection.setNode(node);
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_665880.js b/browser/devtools/inspector/test/browser_inspector_bug_665880.js
index 58ddcabeeb6..724669f8596 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_665880.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_665880.js
@@ -1,9 +1,7 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-
-function test()
-{
+function test() {
   waitForExplicitFinish();
   ignoreAllUncaughtExceptions();
 
@@ -19,22 +17,18 @@ function test()
 
   content.location = "data:text/html,<object style='padding: 100px'><p>foobar</p></object>";
 
-  function setupObjectInspectionTest()
-  {
+  function setupObjectInspectionTest() {
     objectNode = doc.querySelector("object");
     ok(objectNode, "we have the object node");
     openInspector(runObjectInspectionTest);
   }
 
-  function runObjectInspectionTest(inspector)
-  {
-    inspector.highlighter.once("locked", performTestComparison);
-    inspector.highlighter.unlock();
+  function runObjectInspectionTest(inspector) {
+    inspector.once("inspector-updated", performTestComparison);
     inspector.selection.setNode(objectNode, "");
   }
 
-  function performTestComparison()
-  {
+  function performTestComparison() {
     is(getActiveInspector().selection.node, objectNode, "selection matches node");
     let target = TargetFactory.forTab(gBrowser.selectedTab);
     executeSoon(function() {
@@ -43,7 +37,6 @@ function test()
     });
   }
 
-
   function finishUp() {
     doc = objectNode = null;
     gBrowser.removeCurrentTab();
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_674871.js b/browser/devtools/inspector/test/browser_inspector_bug_674871.js
index b4c0699879e..9337560932c 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_674871.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_674871.js
@@ -7,6 +7,7 @@ function test()
 
   let doc;
   let iframeNode, iframeBodyNode;
+  let inspector;
 
   let iframeSrc = "<style>" +
                   "body {" +
@@ -45,57 +46,63 @@ function test()
     iframeBodyNode = iframeNode.contentDocument.querySelector("body");
     ok(iframeNode, "we have the iframe node");
     ok(iframeBodyNode, "we have the body node");
-    openInspector(runTests);
-  }
-
-  function runTests(inspector)
-  {
-    inspector.highlighter.unlock();
-    executeSoon(function() {
-      inspector.highlighter.once("highlighting", isTheIframeSelected);
-      moveMouseOver(iframeNode, 1, 1);
+    openInspector(aInspector => {
+      inspector = aInspector;
+      // Make sure the highlighter is shown so we can disable transitions
+      inspector.toolbox.highlighter.showBoxModel(getNodeFront(doc.body)).then(() => {
+        getHighlighterOutline().setAttribute("disable-transitions", "true");
+        runTests();
+      });
     });
   }
 
-  function isTheIframeSelected()
+  function runTests()
   {
-    let inspector = getActiveInspector();
+    inspector.toolbox.startPicker().then(() => {
+      moveMouseOver(iframeNode, 1, 1, isTheIframeHighlighted);
+    });
+  }
+
+  function isTheIframeHighlighted()
+  {
+    let outlineRect = getHighlighterOutlineRect();
+    let iframeRect = iframeNode.getBoundingClientRect();
+    for (let dim of ["width", "height", "top", "left"]) {
+      is(Math.floor(outlineRect[dim]), Math.floor(iframeRect[dim]), "Outline dimension is correct");
+    }
 
-    is(inspector.selection.node, iframeNode, "selection matches node");
     iframeNode.style.marginBottom = doc.defaultView.innerHeight + "px";
     doc.defaultView.scrollBy(0, 40);
 
-    executeSoon(function() {
-      inspector.selection.once("new-node", isTheIframeContentSelected);
-      moveMouseOver(iframeNode, 40, 40);
+    moveMouseOver(iframeNode, 40, 40, isTheIframeContentHighlighted);
+  }
+
+  function isTheIframeContentHighlighted()
+  {
+    is(getHighlitNode(), iframeBodyNode, "highlighter shows the right node");
+
+    // 184 == 200 + 11(border) + 13(padding) - 40(scroll)
+    let outlineRect = getHighlighterOutlineRect();
+    is(outlineRect.height, 184, "highlighter height");
+
+    inspector.toolbox.stopPicker().then(() => {
+      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      gDevTools.closeToolbox(target);
+      finishUp();
     });
   }
 
-  function isTheIframeContentSelected()
+  function finishUp()
   {
-    let inspector = getActiveInspector();
-    is(inspector.selection.node, iframeBodyNode, "selection matches node");
-    // 184 == 200 + 11(border) + 13(padding) - 40(scroll)
-    is(inspector.highlighter._highlightRect.height, 184,
-      "highlighter height");
-
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
-    finishUp();
-  }
-
-  function finishUp() {
-    doc = iframeNode = iframeBodyNode = null;
+    doc = inspector = iframeNode = iframeBodyNode = null;
     gBrowser.removeCurrentTab();
     finish();
   }
 
-
-  function moveMouseOver(aElement, x, y)
+  function moveMouseOver(aElement, x, y, cb)
   {
     EventUtils.synthesizeMouse(aElement, x, y, {type: "mousemove"},
                                aElement.ownerDocument.defaultView);
+    inspector.toolbox.once("picker-node-hovered", cb);
   }
-
 }
-
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
index 3f9355dd733..a1f3bd4c203 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
@@ -8,21 +8,37 @@ function test() {
   let inspector;
 
   function startTest() {
-    openInspector(runInspectorTests);
+    openInspector(aInspector => {
+      inspector = aInspector;
+      runInspectorTests();
+    });
   }
 
-  function runInspectorTests(aInspector) {
-    inspector = aInspector;
+  function showHighlighter(cb) {
+    inspector.toolbox.startPicker().then(() => {
+      EventUtils.synthesizeMouse(content.document.body, 1, 1,
+        {type: "mousemove"}, content);
+      inspector.toolbox.once("picker-node-hovered", () => {
+        executeSoon(() => {
+          getHighlighterOutline().setAttribute("disable-transitions", "true");
+          cb();
+        });
+      });
+    });
+  }
 
+  function runInspectorTests() {
     iframe = content.document.querySelector("iframe");
     ok(iframe, "found the iframe element");
 
-    ok(inspector.highlighter._highlighting, "Inspector is highlighting");
+    showHighlighter(() => {
+      ok(isHighlighting(), "Inspector is highlighting");
 
-    iframe.addEventListener("load", onIframeLoad, false);
+      iframe.addEventListener("load", onIframeLoad, false);
 
-    executeSoon(function() {
-      iframe.contentWindow.location = "javascript:location.reload()";
+      executeSoon(function() {
+        iframe.contentWindow.location = "javascript:location.reload()";
+      });
     });
   }
 
@@ -36,7 +52,7 @@ function test() {
 
     iframe.removeEventListener("load", onIframeLoad, false);
 
-    ok(inspector.highlighter._highlighting, "Inspector is highlighting after iframe nav");
+    ok(isHighlighting(), "Inspector is highlighting after iframe nav");
 
     checksAfterLoads = true;
 
@@ -47,9 +63,11 @@ function test() {
     is(iframeLoads, 2, "iframe loads");
     ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
 
-    iframe = null;
-    gBrowser.removeCurrentTab();
-    executeSoon(finish);
+    inspector.toolbox.stopPicker().then(() => {
+      iframe = null;
+      gBrowser.removeCurrentTab();
+      executeSoon(finish);
+    });
   }
 
   waitForExplicitFinish();
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_835722_infobar_reappears.js b/browser/devtools/inspector/test/browser_inspector_bug_835722_infobar_reappears.js
deleted file mode 100644
index 503d4a319c1..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_bug_835722_infobar_reappears.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-function test() {
-  let inspector, utils;
-
-  function startLocationTests() {
-    openInspector(runInspectorTests);
-  }
-
-  function runInspectorTests(aInspector) {
-    inspector = aInspector;
-    utils = inspector.panelWin
-                     .QueryInterface(Ci.nsIInterfaceRequestor)
-                     .getInterface(Ci.nsIDOMWindowUtils);
-    ok(utils, "utils is defined");
-    executeSoon(function() {
-      inspector.selection.once("new-node", onNewSelection);
-      info("selecting the DOCTYPE node");
-      inspector.selection.setNode(content.document.doctype, "test");
-    });
-  }
-
-  function sendMouseEvent(node, type, x, y) {
-    let rect = node.getBoundingClientRect();
-    let left = rect.left + x;
-    let top = rect.top + y;
-    utils.sendMouseEventToWindow(type, left, top, 0, 1, 0, false, 0, 0);
-  }
-
-  function onNewSelection() {
-    is(inspector.highlighter.isHidden(), true,
-       "The infobar should be hidden now on selecting a non element node.");
-    inspector.sidebar.select("ruleview");
-    let ruleView = inspector.sidebar.getTab("ruleview");
-    ruleView.addEventListener("mouseover", function onMouseOver() {
-      ruleView.removeEventListener("mouseover", onMouseOver, false);
-      is(inspector.highlighter.isHidden(), true,
-         "The infobar was hidden so mouseover on the rules view did nothing");
-      executeSoon(mouseOutAndContinue);
-    }, false);
-    sendMouseEvent(ruleView, "mouseover", 10, 10);
-  }
-
-  function mouseOutAndContinue() {
-    let ruleView = inspector.sidebar.getTab("ruleview");
-    info("adding mouseout listener");
-    ruleView.addEventListener("mouseout", function onMouseOut() {
-      info("mouseout happened");
-      ruleView.removeEventListener("mouseout", onMouseOut, false);
-      is(inspector.highlighter.isHidden(), true,
-         "The infobar should not be visible after we mouseout of rules view");
-      switchToWebConsole();
-    }, false);
-    info("Synthesizing mouseout on " + ruleView);
-    sendMouseEvent(inspector._markupBox, "mousemove", 50, 50);
-    info("mouseout synthesized");
-  }
-
-  function switchToWebConsole() {
-    inspector.selection.once("new-node", function() {
-      is(inspector.highlighter.isHidden(), false,
-         "The infobar should be visible after we select a div.");
-      gDevTools.showToolbox(inspector.target, "webconsole").then(function() {
-        is(inspector.highlighter.isHidden(), true,
-           "The infobar should not be visible after we switched to webconsole");
-        reloadAndWait();
-      });
-    });
-    inspector.selection.setNode(content.document.querySelector("div"), "test");
-  }
-
-  function reloadAndWait() {
-    gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
-      gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
-      waitForFocus(testAfterReload, content);
-    }, true);
-    content.location.reload();
-  }
-
-  function testAfterReload() {
-    is(inspector.highlighter.isHidden(), true,
-       "The infobar should not be visible after we reload with webconsole shown");
-    testEnd();
-  }
-
-  function testEnd() {
-    gBrowser.removeCurrentTab();
-    utils = null;
-    executeSoon(finish);
-  }
-
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
-    waitForFocus(startLocationTests, content);
-  }, true);
-
-  content.location = "data:text/html,<!DOCTYPE html><div>Infobar should not " +
-                     "reappear</div><p>init</p>";
-}
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js b/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
index e2803b66a83..562bd2abdf8 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
@@ -33,6 +33,13 @@ function test() {
   // select the inspector
     .then(function () toolbox.selectTool("inspector"))
 
+  // wait until inspector ready
+    .then(function () {
+      let deferred = promise.defer();
+      toolbox.getPanel("inspector").once("inspector-updated", deferred.resolve);
+      return deferred.promise;
+    })
+
   // navigate to URL_2
     .then(function () {
       let deferred = promise.defer();
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_848731_reset_selection_on_delete.js b/browser/devtools/inspector/test/browser_inspector_bug_848731_reset_selection_on_delete.js
index e7c62574e6d..c17d549ddd0 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_848731_reset_selection_on_delete.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_848731_reset_selection_on_delete.js
@@ -139,8 +139,5 @@ function test() {
     let breadcrumbs = inspector.panelDoc.getElementById("inspector-breadcrumbs");
     is(breadcrumbs.querySelector("button[checked=true]").textContent, crumbLabel,
       "The right breadcrumb is selected");
-
-    // Highlighter is shown?
-    ok(!inspector.highlighter.isHidden(), "The highlighter is shown");
   }
 }
diff --git a/browser/devtools/inspector/test/browser_inspector_bug_922125_destroy_on_navigate.js b/browser/devtools/inspector/test/browser_inspector_bug_922125_destroy_on_navigate.js
index 072ad22d7f2..c69eca6655e 100644
--- a/browser/devtools/inspector/test/browser_inspector_bug_922125_destroy_on_navigate.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_922125_destroy_on_navigate.js
@@ -34,7 +34,6 @@ function test() {
     // select the inspector
     return toolbox.selectTool("inspector").then(i => {
       inspector = i;
-
       // Verify we are on page one
       let testNode = content.document.querySelector("#one");
       ok(testNode, "We have the test node on page 1");
diff --git a/browser/devtools/inspector/test/browser_inspector_changes.js b/browser/devtools/inspector/test/browser_inspector_changes.js
index 8b06c25cdc9..e391adcc668 100644
--- a/browser/devtools/inspector/test/browser_inspector_changes.js
+++ b/browser/devtools/inspector/test/browser_inspector_changes.js
@@ -32,7 +32,7 @@ function test() {
   function runInspectorTests(aInspector)
   {
     inspector = aInspector;
-    inspector.sidebar.once("computedview-ready", function() {
+    inspector.sidebar.once("computedview-ready", () => {
       info("Computed View ready");
       inspector.sidebar.select("computedview");
 
@@ -41,8 +41,9 @@ function test() {
       testDiv.style.fontSize = "10px";
 
       // Start up the style inspector panel...
-      inspector.once("computed-view-refreshed", computedStylePanelTests);
-
+      inspector.once("computed-view-refreshed", () => {
+        executeSoon(computedStylePanelTests);
+      });
       inspector.selection.setNode(testDiv);
     });
   }
@@ -59,7 +60,9 @@ function test() {
 
     // Wait until layout-change fires from mutation to skip earlier refresh event
     inspector.once("layout-change", () => {
-      inspector.once("computed-view-refreshed", computedStylePanelAfterChange);
+      inspector.once("computed-view-refreshed", () => {
+        executeSoon(computedStylePanelAfterChange);
+      });
     });
   }
 
@@ -79,12 +82,11 @@ function test() {
     // Tests changes made while the style panel is not active.
     inspector.sidebar.select("ruleview");
 
-    testDiv.style.fontSize = "20px";
-    testDiv.style.color = "blue";
-    testDiv.style.textAlign = "center";
+    testDiv.style.cssText = "font-size: 20px; color: blue; text-align: center";
 
-    inspector.once("computed-view-refreshed", computedStylePanelAfterSwitch);
-    inspector.sidebar.select("computedview");
+    inspector.once("computed-view-refreshed", () => {
+      executeSoon(computedStylePanelAfterSwitch);
+    });
   }
 
   function computedStylePanelAfterSwitch()
@@ -110,13 +112,11 @@ function test() {
     let propView = getInspectorRuleProp("text-align");
     is(propView.value, "center", "Style inspector should be showing the new text align.");
 
-    testDiv.style.textAlign = "right";
-    testDiv.style.color = "lightgoldenrodyellow";
-    testDiv.style.fontSize = "3em";
-    testDiv.style.textTransform = "uppercase";
+    testDiv.style.cssText = "font-size: 3em; color: lightgoldenrodyellow; text-align: right; text-transform: uppercase";
 
-
-    inspector.once("rule-view-refreshed", rulePanelAfterChange);
+    inspector.once("rule-view-refreshed", () => {
+      executeSoon(rulePanelAfterChange);
+    });
   }
 
   function rulePanelAfterChange()
diff --git a/browser/devtools/inspector/test/browser_inspector_destroyselection.js b/browser/devtools/inspector/test/browser_inspector_destroyselection.js
index f0eaabe02d0..5027c09a25b 100644
--- a/browser/devtools/inspector/test/browser_inspector_destroyselection.js
+++ b/browser/devtools/inspector/test/browser_inspector_destroyselection.js
@@ -4,7 +4,6 @@
 function test()
 {
   waitForExplicitFinish();
-  //ignoreAllUncaughtExceptions();
 
   let node, iframe, inspector;
 
@@ -28,20 +27,24 @@ function test()
     inspector = aInspector;
     inspector.selection.setNode(node);
 
-    iframe.parentNode.removeChild(iframe);
-    iframe = null;
+    inspector.once("inspector-updated", () => {
+      iframe.parentNode.removeChild(iframe);
+      iframe = null;
 
-    let tmp = {};
-    Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", tmp);
-    let lh = new tmp.LayoutHelpers(window.content);
-    ok(!lh.isNodeConnected(node), "Node considered as disconnected.");
-    ok(!inspector.selection.isConnected(), "Selection considered as disconnected");
+      let tmp = {};
+      Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", tmp);
+      let lh = new tmp.LayoutHelpers(window.content);
+      ok(!lh.isNodeConnected(node), "Node considered as disconnected.");
+      ok(!inspector.selection.isConnected(), "Selection considered as disconnected");
 
-    finishUp();
+      inspector.once("inspector-updated", () => {
+        finishUp();
+      });
+    });
   }
 
   function finishUp() {
-    node = null;
+    node = inspector = null;
     gBrowser.removeCurrentTab();
     finish();
   }
diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter.js b/browser/devtools/inspector/test/browser_inspector_highlighter.js
index fbc4cca9198..22a7b4fb1eb 100644
--- a/browser/devtools/inspector/test/browser_inspector_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter.js
@@ -6,12 +6,11 @@
 
 let doc;
 let h1;
-let div;
+let inspector;
 
-function createDocument()
-{
+function createDocument() {
   let div = doc.createElement("div");
-  let h1 = doc.createElement("h1");
+  h1 = doc.createElement("h1");
   let p1 = doc.createElement("p");
   let p2 = doc.createElement("p");
   let div2 = doc.createElement("div");
@@ -48,80 +47,38 @@ function createDocument()
   doc.body.appendChild(div2);
   doc.body.appendChild(div3);
 
-  openInspector(setupHighlighterTests);
-}
-
-function setupHighlighterTests()
-{
-  h1 = doc.querySelector("h1");
-  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);
+  openInspector(aInspector => {
+    inspector = aInspector;
+    inspector.selection.setNode(div, null);
+    inspector.once("inspector-updated", () => {
+      getHighlighterOutline().setAttribute("disable-transitions", "true");
+      inspector.toolbox.startPicker().then(testMouseOverH1Highlights);
+    });
   });
 }
 
-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);
+function testMouseOverH1Highlights() {
+  inspector.toolbox.once("picker-node-hovered", () => {
+    ok(isHighlighting(), "Highlighter is shown");
+    is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node");
+    testOutlineDimensions();
   });
+
+  EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
 }
 
-function performTestComparisons(evt)
-{
-  let i = getActiveInspector();
-  i.highlighter.lock();
-  ok(isHighlighting(), "highlighter is highlighting");
-  is(getHighlitNode(), h1, "highlighter matches selection")
-  is(i.selection.node, h1, "selection matches node");
-  is(i.selection.node, getHighlitNode(), "selection matches highlighter");
+function testOutlineDimensions() {
+  let h1Dims = h1.getBoundingClientRect();
+  let h1Width = h1Dims.width;
+  let h1Height = h1Dims.height;
 
-
-  div = doc.querySelector("div#checkOutThisWickedSpread");
-
-  executeSoon(function() {
-    i.selection.once("new-node", finishTestComparisons);
-    i.selection.setNode(div);
-  });
-}
-
-function finishTestComparisons()
-{
-  let i = getActiveInspector();
-
-  // get dimensions of div element
-  let divDims = div.getBoundingClientRect();
-  let divWidth = divDims.width;
-  let divHeight = divDims.height;
-
-  // get dimensions of the outline
-  let outlineDims = i.highlighter.outline.getBoundingClientRect();
+  let outlineDims = getHighlighterOutlineRect();
   let outlineWidth = outlineDims.width;
   let outlineHeight = outlineDims.height;
 
   // Disabled due to bug 716245
-  //is(outlineWidth, divWidth, "outline width matches dimensions of element (no zoom)");
-  //is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
+  is(outlineWidth, h1Width, "outline width matches dimensions of element (no zoom)");
+  is(outlineHeight, h1Height, "outline height matches dimensions of element (no zoom)");
 
   // zoom the page by a factor of 2
   let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
@@ -132,38 +89,36 @@ function finishTestComparisons()
   // resize event
 
   window.setTimeout(function() {
-    // check what zoom factor we're at, should be 2
-    let zoom = i.highlighter.zoom;
-    is(zoom, 2, "zoom is 2?");
-
     // simulate the zoomed dimensions of the div element
-    let divDims = div.getBoundingClientRect();
-    let divWidth = divDims.width * zoom;
-    let divHeight = divDims.height * zoom;
+    let h1Dims = h1.getBoundingClientRect();
+    // There seems to be some very minor differences in the floats, so let's
+    // floor the values
+    let h1Width = Math.floor(h1Dims.width * contentViewer.fullZoom);
+    let h1Height = Math.floor(h1Dims.height * contentViewer.fullZoom);
 
-    // now zoomed, get new dimensions the outline
-    let outlineDims = i.highlighter.outline.getBoundingClientRect();
-    let outlineWidth = outlineDims.width;
-    let outlineHeight = outlineDims.height;
+    let outlineDims = getHighlighterOutlineRect();
+    let outlineWidth = Math.floor(outlineDims.width);
+    let outlineHeight = Math.floor(outlineDims.height);
 
     // Disabled due to bug 716245
-    //is(outlineWidth, divWidth, "outline width matches dimensions of element (no zoom)");
-    //is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
+    is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
+    is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
 
-    doc = h1 = div = null;
     executeSoon(finishUp);
   }, 500);
 }
 
 function finishUp() {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  gDevTools.closeToolbox(target);
-  gBrowser.removeCurrentTab();
-  finish();
+  inspector.toolbox.stopPicker().then(() => {
+    doc = h1 = inspector = null;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
+    gBrowser.removeCurrentTab();
+    finish();
+  });
 }
 
-function test()
-{
+function test() {
   waitForExplicitFinish();
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function() {
@@ -174,4 +129,3 @@ function test()
 
   content.location = "data:text/html,basic tests for inspector";
 }
-
diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js b/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
deleted file mode 100644
index 8dfca604b74..00000000000
--- a/browser/devtools/inspector/test/browser_inspector_highlighter_autohide.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-
-function test()
-{
-  let toolbox;
-  let inspector;
-
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    waitForFocus(startInspector, content);
-  }, true);
-  content.location = "data:text/html,mop"
-
-  function startInspector() {
-    info("Tab loaded");
-    openInspector(function(aInspector) {
-      inspector = aInspector;
-      ok(!inspector.highlighter.hidden, "Highlighter is visible");
-      toolbox = inspector._toolbox;
-      toolbox.once("webconsole-selected", onWebConsoleSelected);
-      toolbox.selectTool("webconsole");
-    });
-  }
-
-  function onWebConsoleSelected() {
-    executeSoon(function() {
-      ok(inspector.highlighter.hidden, "Highlighter is hidden");
-      toolbox.once("inspector-selected", onInspectorSelected);
-      toolbox.selectTool("inspector");
-    });
-  }
-
-  function onInspectorSelected() {
-    executeSoon(function() {
-      ok(!inspector.highlighter.hidden, "Highlighter is visible once inspector reopen");
-      gBrowser.removeCurrentTab();
-      finish();
-    });
-  }
-}
-
diff --git a/browser/devtools/inspector/test/browser_inspector_iframeTest.js b/browser/devtools/inspector/test/browser_inspector_iframeTest.js
index 342028661ce..e4261356fc8 100644
--- a/browser/devtools/inspector/test/browser_inspector_iframeTest.js
+++ b/browser/devtools/inspector/test/browser_inspector_iframeTest.js
@@ -9,9 +9,9 @@ let div1;
 let div2;
 let iframe1;
 let iframe2;
+let inspector;
 
-function createDocument()
-{
+function createDocument() {
   doc.title = "Inspector iframe Tests";
 
   iframe1 = doc.createElement('iframe');
@@ -32,7 +32,11 @@ function createDocument()
       div2.textContent = 'nested div';
       iframe2.contentDocument.body.appendChild(div2);
 
-      openInspector(runIframeTests);
+      // Open the inspector, start the picker mode, and start the tests
+      openInspector(aInspector => {
+        inspector = aInspector;
+        inspector.toolbox.startPicker().then(runTests);
+      });
     }, false);
 
     iframe2.src = 'data:text/html,nested iframe';
@@ -43,58 +47,56 @@ function createDocument()
   doc.body.appendChild(iframe1);
 }
 
-function moveMouseOver(aElement)
-{
+function moveMouseOver(aElement, cb) {
   EventUtils.synthesizeMouse(aElement, 2, 2, {type: "mousemove"},
     aElement.ownerDocument.defaultView);
-}
-
-function runIframeTests()
-{
-  getActiveInspector().highlighter.unlock();
-  getActiveInspector().selection.once("new-node", performTestComparisons1);
-  moveMouseOver(div1)
-}
-
-function performTestComparisons1()
-{
-  let i = getActiveInspector();
-  is(i.selection.node, div1, "selection matches div1 node");
-  is(getHighlitNode(), div1, "highlighter matches selection");
-
-  i.selection.once("new-node", performTestComparisons2);
-  executeSoon(function() {
-    moveMouseOver(div2);
+  inspector.toolbox.once("picker-node-hovered", () => {
+    executeSoon(cb);
   });
 }
 
-function performTestComparisons2()
-{
-  let i = getActiveInspector();
-
-  is(i.selection.node, div2, "selection matches div2 node");
-  is(getHighlitNode(), div2, "highlighter matches selection");
-
-  selectRoot();
+function runTests() {
+  testDiv1Highlighter();
 }
 
-function selectRoot()
-{
+function testDiv1Highlighter() {
+  moveMouseOver(div1, () => {
+    getHighlighterOutline().setAttribute("disable-transitions", "true");
+    is(getHighlitNode(), div1, "highlighter matches selection");
+    testDiv2Highlighter();
+  });
+}
+
+function testDiv2Highlighter() {
+  moveMouseOver(div2, () => {
+    is(getHighlitNode(), div2, "highlighter matches selection");
+    selectRoot();
+  });
+}
+
+function selectRoot() {
   // Select the root document element to clear the breadcrumbs.
-  let i = getActiveInspector();
-  i.selection.setNode(doc.documentElement);
-  i.once("inspector-updated", selectIframe);
+  inspector.selection.setNode(doc.documentElement);
+  inspector.once("inspector-updated", selectIframe);
 }
 
-function selectIframe()
-{
+function selectIframe() {
   // Directly select an element in an iframe (without navigating to it
   // with mousemoves).
-  let i = getActiveInspector();
-  i.selection.setNode(div2);
-  i.once("inspector-updated", () => {
-    let breadcrumbs = i.breadcrumbs;
+  inspector.selection.setNode(div2);
+  inspector.once("inspector-updated", () => {
+    let breadcrumbs = inspector.breadcrumbs;
     is(breadcrumbs.nodeHierarchy.length, 9, "Should have 9 items");
+    finishUp();
+  });
+}
+
+function finishUp() {
+  inspector.toolbox.stopPicker().then(() => {
+    doc = div1 = div2 = iframe1 = iframe2 = inspector = null;
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.closeToolbox(target);
+    gBrowser.removeCurrentTab();
     finish();
   });
 }
@@ -111,11 +113,4 @@ function test() {
   }, true);
 
   content.location = "data:text/html,iframe tests for inspector";
-
-  registerCleanupFunction(function () {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
-    gDevTools.closeToolbox(target);
-    gBrowser.removeCurrentTab();
-  });
 }
-
diff --git a/browser/devtools/inspector/test/browser_inspector_infobar.js b/browser/devtools/inspector/test/browser_inspector_infobar.js
index 1e20539cd1f..2aabae619ae 100644
--- a/browser/devtools/inspector/test/browser_inspector_infobar.js
+++ b/browser/devtools/inspector/test/browser_inspector_infobar.js
@@ -1,8 +1,7 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-function test()
-{
+function test() {
   waitForExplicitFinish();
   ignoreAllUncaughtExceptions();
 
@@ -23,8 +22,7 @@ function test()
 
   content.location = "data:text/html," + encodeURIComponent(html);
 
-  function setupInfobarTest()
-  {
+  function setupInfobarTest() {
     nodes = [
       {node: doc.querySelector("#top"), position: "bottom", tag: "DIV", id: "#top", classes: ".class1.class2"},
       {node: doc.querySelector("#vertical"), position: "overlap", tag: "DIV", id: "#vertical", classes: ""},
@@ -40,18 +38,25 @@ function test()
     openInspector(runTests);
   }
 
-  function runTests(aInspector)
-  {
+  function mouseOverContainerToShowHighlighter(node, cb) {
+    let container = getContainerForRawNode(inspector.markup, node);
+    EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
+      inspector.markup.doc.defaultView);
+    executeSoon(cb);
+  }
+
+  function runTests(aInspector) {
     inspector = aInspector;
-    cursor = 0;
-    executeSoon(function() {
-      inspector.selection.setNode(nodes[0].node, "");
-      nodeSelected();
+    inspector.selection.setNode(content.document.querySelector("body"));
+    inspector.once("inspector-updated", () => {
+      cursor = 0;
+      executeSoon(function() {
+        mouseOverContainerToShowHighlighter(nodes[0].node, nodeSelected);
+      });
     });
   }
 
-  function nodeSelected()
-  {
+  function nodeSelected() {
     executeSoon(function() {
       performTest();
       cursor++;
@@ -59,18 +64,16 @@ function test()
         finishUp();
       } else {
         let node = nodes[cursor].node;
-        inspector.selection.setNode(node, "");
-        nodeSelected();
+        mouseOverContainerToShowHighlighter(node, nodeSelected);
       }
     });
   }
 
-  function performTest()
-  {
+  function performTest() {
     let browser = gBrowser.selectedBrowser;
     let stack = browser.parentNode;
 
-    let container = stack.querySelector(".highlighter-nodeinfobar-container");
+    let container = stack.querySelector(".highlighter-nodeinfobar-positioner");
     is(container.getAttribute("position"), nodes[cursor].position, "node " + cursor + ": position matches.");
 
     let tagNameLabel = stack.querySelector(".highlighter-nodeinfobar-tagname");
@@ -89,4 +92,3 @@ function test()
     finish();
   }
 }
-
diff --git a/browser/devtools/inspector/test/browser_inspector_initialization.js b/browser/devtools/inspector/test/browser_inspector_initialization.js
index ff1a2baf807..6b0c59fceaa 100644
--- a/browser/devtools/inspector/test/browser_inspector_initialization.js
+++ b/browser/devtools/inspector/test/browser_inspector_initialization.js
@@ -35,13 +35,11 @@ function startInspectorTests(toolbox)
   ok(inspector, "Inspector instance is accessible");
   ok(inspector.isReady, "Inspector instance is ready");
   is(inspector.target.tab, gBrowser.selectedTab, "Valid target");
-  ok(inspector.highlighter, "Highlighter is up");
 
   let p = doc.querySelector("p");
 
   inspector.selection.setNode(p);
   inspector.once("inspector-updated", () => {
-    testHighlighter(p);
     testMarkupView(p);
     testBreadcrumbs(p);
 
@@ -50,7 +48,6 @@ function startInspectorTests(toolbox)
 
     inspector.selection.setNode(span);
     inspector.once("inspector-updated", () => {
-      testHighlighter(span);
       testMarkupView(span);
       testBreadcrumbs(span);
 
@@ -65,13 +62,6 @@ function startInspectorTests(toolbox)
   });
 }
 
-
-function testHighlighter(node)
-{
-  ok(isHighlighting(), "Highlighter is highlighting");
-  is(getHighlitNode(), node, "Right node is highlighted");
-}
-
 let callNo = 0;
 function testMarkupView(node)
 {
@@ -112,7 +102,6 @@ function runContextMenuTest()
 }
 
 function testInitialNodeIsSelected() {
-  testHighlighter(salutation);
   testMarkupView(salutation);
   testBreadcrumbs(salutation);
   inspectNodesFromContextTestWhileOpen();
@@ -124,10 +113,9 @@ function inspectNodesFromContextTestWhileOpen()
   getActiveInspector().selection.once("new-node", function() {
     ok(true, "Get selection's 'new-node' selection");
     executeSoon(function() {
-      testHighlighter(closing);
       testMarkupView(closing);
       testBreadcrumbs(closing);
-      finishInspectorTests();
+      getActiveInspector().once("inspector-updated", finishInspectorTests)
     }
   )});
   _clickOnInspectMenuItem(closing);
diff --git a/browser/devtools/inspector/test/browser_inspector_invalidate.js b/browser/devtools/inspector/test/browser_inspector_invalidate.js
index 3fc9a20434e..13e4c4622ed 100644
--- a/browser/devtools/inspector/test/browser_inspector_invalidate.js
+++ b/browser/devtools/inspector/test/browser_inspector_invalidate.js
@@ -2,39 +2,42 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 function test() {
-
   let doc;
   let div;
   let inspector;
 
-  function createDocument()
-  {
+  function createDocument() {
     div = doc.createElement("div");
     div.setAttribute("style", "width: 100px; height: 100px; background:yellow;");
     doc.body.appendChild(div);
 
-    openInspector(runTest);
+    openInspector(aInspector => {
+      inspector = aInspector;
+      inspector.toolbox.highlighter.showBoxModel(getNodeFront(div)).then(runTest);
+    });
   }
 
-  function runTest(inspector)
-  {
-    inspector.selection.setNode(div);
+  function runTest() {
+    let outline = getHighlighterOutline();
+    is(outline.style.width, "100px", "outline has the right width");
 
-    executeSoon(function() {
-      let outline = inspector.highlighter.outline;
-      is(outline.style.width, "100px", "selection has the right width");
-
-      div.style.width = "200px";
-      function pollTest() {
-        if (outline.style.width == "100px") {
-          setTimeout(pollTest, 10);
-          return;
-        }
-        is(outline.style.width, "200px", "selection updated");
-        gBrowser.removeCurrentTab();
-        finish();
+    div.style.width = "200px";
+    function pollTest() {
+      if (outline.style.width == "100px") {
+        setTimeout(pollTest, 10);
+        return;
       }
-      setTimeout(pollTest, 10);
+      is(outline.style.width, "200px", "outline updated");
+      finishUp();
+    }
+    setTimeout(pollTest, 10);
+  }
+
+  function finishUp() {
+    inspector.toolbox.highlighter.hideBoxModel().then(() => {
+      doc = div = inspector = null;
+      gBrowser.removeCurrentTab();
+      finish();
     });
   }
 
diff --git a/browser/devtools/inspector/test/browser_inspector_menu.js b/browser/devtools/inspector/test/browser_inspector_menu.js
index a26387ab335..450866ef9ec 100644
--- a/browser/devtools/inspector/test/browser_inspector_menu.js
+++ b/browser/devtools/inspector/test/browser_inspector_menu.js
@@ -103,7 +103,7 @@ function test() {
     let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
     ok(deleteNode, "the popup menu has a delete menu item");
 
-    inspector.once("markupmutation", deleteTest);
+    inspector.once("inspector-updated", deleteTest);
 
     let commandEvent = document.createEvent("XULCommandEvent");
     commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
@@ -120,12 +120,15 @@ function test() {
 
   function deleteRootNode() {
     inspector.selection.setNode(doc.documentElement);
-    let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
-    let commandEvent = inspector.panelDoc.createEvent("XULCommandEvent");
-    commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
-                                  false, false, null);
-    deleteNode.dispatchEvent(commandEvent);
-    executeSoon(isRootStillAlive);
+
+    inspector.once("inspector-updated", () => {
+      let deleteNode = inspector.panelDoc.getElementById("node-menu-delete");
+      let commandEvent = inspector.panelDoc.createEvent("XULCommandEvent");
+      commandEvent.initCommandEvent("command", true, true, window, 0, false, false,
+                                    false, false, null);
+      deleteNode.dispatchEvent(commandEvent);
+      executeSoon(isRootStillAlive);
+    });
   }
 
   function isRootStillAlive() {
diff --git a/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js b/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
index 0e523ac821c..1d0e0fa3941 100644
--- a/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
+++ b/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
@@ -37,7 +37,7 @@ function test() {
   {
     inspector = aInspector;
     inspector.selection.setNode(div);
-    performTests();
+    inspector.once("inspector-updated", performTests);
   }
 
   function performTests()
diff --git a/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js b/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
index 579daec2ee8..05af6bbcb47 100644
--- a/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
+++ b/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
@@ -67,22 +67,24 @@ function performTests()
   // Wait for the "pseudoclass" event so we know the
   // inspector has been told of the pseudoclass lock change.
   inspector.selection.once("pseudoclass", () => {
-    // Give the rule view time to update.
     inspector.once("rule-view-refreshed", () => {
-      testAdded();
-      // Change the pseudo class and give the rule view time to update.
-      inspector.togglePseudoClass(pseudo);
-      inspector.selection.once("pseudoclass", () => {
-        inspector.once("rule-view-refreshed", () => {
-          testRemoved();
-          testRemovedFromUI();
-
-          // toggle it back on
-          inspector.togglePseudoClass(pseudo);
-          inspector.selection.once("pseudoclass", () => {
-            testNavigate(() => {
-              // close the inspector
-              finishUp();
+      testAdded(() => {
+        // Change the pseudo class and give the rule view time to update.
+        inspector.togglePseudoClass(pseudo);
+        inspector.selection.once("pseudoclass", () => {
+          inspector.once("rule-view-refreshed", () => {
+            testRemoved();
+            testRemovedFromUI(() => {
+              // toggle it back on
+              inspector.togglePseudoClass(pseudo);
+              inspector.selection.once("pseudoclass", () => {
+                inspector.once("rule-view-refreshed", () => {
+                  testNavigate(() => {
+                    // close the inspector
+                    finishUp();
+                  });
+                });
+              });
             });
           });
         });
@@ -98,46 +100,52 @@ function testNavigate(callback)
 
     // make sure it's still on after naving to parent
     is(DOMUtils.hasPseudoClassLock(div, pseudo), true,
-         "pseudo-class lock is still applied after inspecting ancestor");
+      "pseudo-class lock is still applied after inspecting ancestor");
 
     inspector.selection.setNode(div2);
     inspector.selection.once("pseudoclass", () => {
       // make sure it's removed after naving to a non-hierarchy node
       is(DOMUtils.hasPseudoClassLock(div, pseudo), false,
-           "pseudo-class lock is removed after inspecting sibling node");
+        "pseudo-class lock is removed after inspecting sibling node");
 
       // toggle it back on
       inspector.selection.setNode(div);
       inspector.once("inspector-updated", () => {
         inspector.togglePseudoClass(pseudo);
-        inspector.selection.once("pseudoclass", () => {
-          callback();
-        });
+        inspector.once("computed-view-refreshed", callback);
       });
     });
   });
 }
 
-function testAdded()
+function showPickerOn(node, cb)
+{
+  let highlighter = inspector.toolbox.highlighter;
+  highlighter.showBoxModel(getNodeFront(node)).then(cb);
+}
+
+function testAdded(cb)
 {
   // lock is applied to it and ancestors
   let node = div;
   do {
     is(DOMUtils.hasPseudoClassLock(node, pseudo), true,
-       "pseudo-class lock has been applied");
+      "pseudo-class lock has been applied");
     node = node.parentNode;
   } while (node.parentNode)
 
-  // infobar selector contains pseudo-class
-  let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
-  is(pseudoClassesBox.textContent, pseudo, "pseudo-class in infobar selector");
-
   // ruleview contains pseudo-class rule
-  is(ruleview.element.children.length, 3,
-     "rule view is showing 3 rules for pseudo-class locked div");
+  let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
+  is(rules.length, 3, "rule view is showing 3 rules for pseudo-class locked div");
+  is(rules[1]._ruleEditor.rule.selectorText, "div:hover", "rule view is showing " + pseudo + " rule");
 
-  is(ruleview.element.children[1]._ruleEditor.rule.selectorText,
-     "div:hover", "rule view is showing " + pseudo + " rule");
+  // Show the highlighter by starting the pick mode and hovering over the div
+  showPickerOn(div, () => {
+    // infobar selector contains pseudo-class
+    let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");
+    is(pseudoClassesBox.textContent, pseudo, "pseudo-class in infobar selector");
+    cb();
+  });
 }
 
 function testRemoved()
@@ -151,15 +159,17 @@ function testRemoved()
   } while (node.parentNode)
 }
 
-function testRemovedFromUI()
+function testRemovedFromUI(cb)
 {
-  // infobar selector doesn't contain pseudo-class
-  let pseudoClassesBox = getActiveInspector().highlighter.nodeInfo.pseudoClassesBox;
-  is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");
-
   // ruleview no longer contains pseudo-class rule
-  is(ruleview.element.children.length, 2,
-     "rule view is showing 2 rules after removing lock");
+  let rules = ruleview.element.querySelectorAll(".ruleview-rule.theme-separator");
+  is(rules.length, 2, "rule view is showing 2 rules after removing lock");
+
+  showPickerOn(div, () => {
+    let pseudoClassesBox = getHighlighter().querySelector(".highlighter-nodeinfobar-pseudo-classes");
+    is(pseudoClassesBox.textContent, "", "pseudo-class removed from infobar selector");
+    cb();
+  });
 }
 
 function finishUp()
diff --git a/browser/devtools/inspector/test/browser_inspector_reload.js b/browser/devtools/inspector/test/browser_inspector_reload.js
index 8a1e188de50..c7f273b7f55 100644
--- a/browser/devtools/inspector/test/browser_inspector_reload.js
+++ b/browser/devtools/inspector/test/browser_inspector_reload.js
@@ -44,6 +44,7 @@ function test() {
     inspector.once("inspector-updated", () => {
       is(inspector.selection.node, p, "Node re-selected.");
       toolbox.destroy();
+      toolbox = inspector = null;
       gBrowser.removeCurrentTab();
       finish();
     });
diff --git a/browser/devtools/inspector/test/browser_inspector_scrolling.js b/browser/devtools/inspector/test/browser_inspector_scrolling.js
index 7b521eaa6d8..6d81576f06a 100644
--- a/browser/devtools/inspector/test/browser_inspector_scrolling.js
+++ b/browser/devtools/inspector/test/browser_inspector_scrolling.js
@@ -33,9 +33,8 @@ function inspectNode(aInspector)
 {
   inspector = aInspector;
 
-  inspector.highlighter.once("locked", performScrollingTest);
+  inspector.once("inspector-updated", performScrollingTest);
   executeSoon(function() {
-    inspector.highlighter.unlock();
     inspector.selection.setNode(div, "");
   });
 }
diff --git a/browser/devtools/inspector/test/browser_inspector_select_last_selected.js b/browser/devtools/inspector/test/browser_inspector_select_last_selected.js
index 6a3a779bee9..a7fad5851e9 100644
--- a/browser/devtools/inspector/test/browser_inspector_select_last_selected.js
+++ b/browser/devtools/inspector/test/browser_inspector_select_last_selected.js
@@ -30,9 +30,8 @@ function test() {
   }
 
   function endTests() {
-    inspector.destroy().then(() =>
-      toolbox.destroy()
-    ).then(() => {
+    inspector.destroy();
+    toolbox.destroy().then(() => {
       toolbox = inspector = page1 = page2 = null;
       gBrowser.removeCurrentTab();
       finish();
@@ -40,7 +39,7 @@ function test() {
   }
 
   function loadPageAnd(page, callback) {
-    inspector.once("markuploaded", () => {
+    inspector.once("new-root", () => {
       callback();
     });
 
diff --git a/browser/devtools/inspector/test/head.js b/browser/devtools/inspector/test/head.js
index bec99c7563a..030b6c24e99 100644
--- a/browser/devtools/inspector/test/head.js
+++ b/browser/devtools/inspector/test/head.js
@@ -6,11 +6,10 @@ const Cu = Components.utils;
 const Ci = Components.interfaces;
 const Cc = Components.classes;
 
-Services.prefs.setBoolPref("devtools.debugger.log", true);
-SimpleTest.registerCleanupFunction(() => {
-  Services.prefs.clearUserPref("devtools.debugger.log");
-});
-
+// Services.prefs.setBoolPref("devtools.debugger.log", true);
+// SimpleTest.registerCleanupFunction(() => {
+//   Services.prefs.clearUserPref("devtools.debugger.log");
+// });
 
 let tempScope = {};
 Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", tempScope);
@@ -52,40 +51,63 @@ function getNodeFront(node)
   return inspector.walker.frontForRawNode(node);
 }
 
+function getHighlighter()
+{
+  return gBrowser.selectedBrowser.parentNode.querySelector(".highlighter-container");
+}
+
+function getHighlighterOutline()
+{
+  let h = getHighlighter();
+  if (h) {
+    return h.querySelector(".highlighter-outline");
+  }
+}
+
+function getHighlighterOutlineRect() {
+  let helper = new LayoutHelpers(window.content);
+  let outline = getHighlighterOutline();
+
+  if (outline) {
+    let browserOffsetRect = helper.getDirtyRect(gBrowser.selectedBrowser);
+    let outlineRect = helper.getDirtyRect(outline);
+    outlineRect.top -= browserOffsetRect.top;
+    outlineRect.left -= browserOffsetRect.left;
+
+    return outlineRect;
+  }
+}
+
 function isHighlighting()
 {
-  let outline = getActiveInspector().highlighter.outline;
-  return !(outline.getAttribute("hidden") == "true");
+  let outline = getHighlighterOutline();
+  return outline && !outline.hasAttribute("hidden");
 }
 
 function getHighlitNode()
 {
-  let h = getActiveInspector().highlighter;
-  if (!isHighlighting() || !h._contentRect)
-    return null;
+  if (isHighlighting()) {
+    let helper = new LayoutHelpers(window.content);
+    let outlineRect = getHighlighterOutlineRect();
 
-  let a = {
-    x: h._contentRect.left,
-    y: h._contentRect.top
-  };
+    let a = {
+      x: outlineRect.left,
+      y: outlineRect.top
+    };
 
-  let b = {
-    x: a.x + h._contentRect.width,
-    y: a.y + h._contentRect.height
-  };
+    let b = {
+      x: a.x + outlineRect.width,
+      y: a.y + outlineRect.height
+    };
 
-  // Get midpoint of diagonal line.
-  let midpoint = midPoint(a, b);
-
-  let lh = new LayoutHelpers(window.content);
-  return lh.getElementFromPoint(h.win.document, midpoint.x,
-    midpoint.y);
+    let {x, y} = getMidPoint(a, b);
+    return helper.getElementFromPoint(window.content.document, x, y);
+  }
 }
 
-
-function midPoint(aPointA, aPointB)
+function getMidPoint(aPointA, aPointB)
 {
-  let pointC = { };
+  let pointC = {};
   pointC.x = (aPointB.x - aPointA.x) / 2 + aPointA.x;
   pointC.y = (aPointB.y - aPointA.y) / 2 + aPointA.y;
   return pointC;
@@ -189,6 +211,13 @@ function getComputedPropertyValue(aName)
   }
 }
 
+function getContainerForRawNode(markupView, rawNode)
+{
+  let front = markupView.walker.frontForRawNode(rawNode);
+  let container = markupView.getContainer(front);
+  return container;
+}
+
 SimpleTest.registerCleanupFunction(function () {
   let target = TargetFactory.forTab(gBrowser.selectedTab);
   gDevTools.closeToolbox(target);
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_edit.js b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
index b6199a747f6..94a54ab57d0 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_edit.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
@@ -681,9 +681,6 @@ function test() {
         assertAttributes(doc.querySelector("#node18"), {
           id: "node18",
         });
-
-        is(inspector.highlighter.nodeInfo.classesBox.textContent, "",
-           "No classes in the infobar before edit.");
       },
       execute: function(after) {
         inspector.once("markupmutation", function() {
@@ -701,9 +698,6 @@ function test() {
           class: "newclass",
           style: "color:green"
         });
-
-        is(inspector.highlighter.nodeInfo.classesBox.textContent, ".newclass",
-           "Correct classes in the infobar after edit.");
       }
     };
     testAsyncSetup(test, editTagName);
diff --git a/browser/devtools/markupview/test/browser_inspector_markup_mutation_flashing.js b/browser/devtools/markupview/test/browser_inspector_markup_mutation_flashing.js
index c12562bf3f7..4d683f6889f 100644
--- a/browser/devtools/markupview/test/browser_inspector_markup_mutation_flashing.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_mutation_flashing.js
@@ -123,7 +123,7 @@ function test() {
     if(!container) {
       ok(false, "Node not found");
     } else {
-      ok(container.highlighter.classList.contains("theme-bg-contrast"),
+      ok(container.tagState.classList.contains("theme-bg-contrast"),
         "Node is flashing");
     }
   }
diff --git a/browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js b/browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js
index c4a73f21b8b..00e6538f6c9 100644
--- a/browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js
+++ b/browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js
@@ -67,17 +67,18 @@ function testModifyRules()
     rule.editor.addProperty("font-weight", "bold", "");
   }
 
-  reselectElement(doc.querySelector("#target"), () => {
+  executeSoon(() => {
+    reselectElement(doc.querySelector("#target"), () => {
+      for (let rule of ruleView._elementStyle.rules) {
+        let lastRule = rule.textProps[rule.textProps.length - 1];
 
-    for (let rule of ruleView._elementStyle.rules) {
-      let lastRule = rule.textProps[rule.textProps.length - 1];
+        is (lastRule.name, "font-weight", "Last rule name is font-weight");
+        is (lastRule.value, "bold", "Last rule value is bold");
+      }
 
-      is (lastRule.name, "font-weight", "Last rule name is font-weight");
-      is (lastRule.value, "bold", "Last rule value is bold");
-    }
-
-    gBrowser.removeCurrentTab();
-    openXUL();
+      gBrowser.removeCurrentTab();
+      openXUL();
+    });
   });
 }
 
diff --git a/browser/devtools/styleinspector/test/browser_ruleview_override.js b/browser/devtools/styleinspector/test/browser_ruleview_override.js
index d8a00861aa0..6cb695d09a9 100644
--- a/browser/devtools/styleinspector/test/browser_ruleview_override.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_override.js
@@ -20,34 +20,35 @@ function simpleOverride(aInspector, aRuleView)
 
   let styleNode = addStyle(doc, style);
   doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
+  inspector.once("markupmutation", () => {
+    inspector.selection.setNode(doc.getElementById("testid"));
+    inspector.once("inspector-updated", () => {
+      let elementStyle = view._elementStyle;
 
-  inspector.selection.setNode(doc.getElementById("testid"));
-  inspector.once("inspector-updated", () => {
-    let elementStyle = view._elementStyle;
+      let idRule = elementStyle.rules[1];
+      let idProp = idRule.textProps[0];
+      is(idProp.name, "background-color", "First ID prop should be background-color");
+      ok(!idProp.overridden, "ID prop should not be overridden.");
 
-    let idRule = elementStyle.rules[1];
-    let idProp = idRule.textProps[0];
-    is(idProp.name, "background-color", "First ID prop should be background-color");
-    ok(!idProp.overridden, "ID prop should not be overridden.");
+      let classRule = elementStyle.rules[2];
+      let classProp = classRule.textProps[0];
+      is(classProp.name, "background-color", "First class prop should be background-color");
+      ok(classProp.overridden, "Class property should be overridden.");
 
-    let classRule = elementStyle.rules[2];
-    let classProp = classRule.textProps[0];
-    is(classProp.name, "background-color", "First class prop should be background-color");
-    ok(classProp.overridden, "Class property should be overridden.");
+      // Override background-color by changing the element style.
+      let elementRule = elementStyle.rules[0];
+      elementRule.createProperty("background-color", "purple", "");
+      promiseDone(elementRule._applyingModifications.then(() => {
+        let elementProp = elementRule.textProps[0];
+        is(classProp.name, "background-color", "First element prop should now be background-color");
+        ok(!elementProp.overridden, "Element style property should not be overridden");
+        ok(idProp.overridden, "ID property should be overridden");
+        ok(classProp.overridden, "Class property should be overridden");
 
-    // Override background-color by changing the element style.
-    let elementRule = elementStyle.rules[0];
-    elementRule.createProperty("background-color", "purple", "");
-    promiseDone(elementRule._applyingModifications.then(() => {
-      let elementProp = elementRule.textProps[0];
-      is(classProp.name, "background-color", "First element prop should now be background-color");
-      ok(!elementProp.overridden, "Element style property should not be overridden");
-      ok(idProp.overridden, "ID property should be overridden");
-      ok(classProp.overridden, "Class property should be overridden");
-
-      styleNode.parentNode.removeChild(styleNode);
-      partialOverride();
-    }));
+        styleNode.parentNode.removeChild(styleNode);
+        partialOverride();
+      }));
+    });
   });
 }
 
@@ -65,25 +66,26 @@ function partialOverride()
 
   let styleNode = addStyle(doc, style);
   doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
+  inspector.once("markupmutation", () => {
+    inspector.selection.setNode(doc.getElementById("testid"));
+    inspector.once("inspector-updated", () => {
+      let elementStyle = view._elementStyle;
 
-  inspector.selection.setNode(doc.getElementById("testid"));
-  inspector.once("inspector-updated", () => {
-    let elementStyle = view._elementStyle;
-
-    let classRule = elementStyle.rules[2];
-    let classProp = classRule.textProps[0];
-    ok(!classProp.overridden, "Class prop shouldn't be overridden, some props are still being used.");
-    for (let computed of classProp.computed) {
-      if (computed.name.indexOf("margin-left") == 0) {
-        ok(computed.overridden, "margin-left props should be overridden.");
-      } else {
-        ok(!computed.overridden, "Non-margin-left props should not be overridden.");
+      let classRule = elementStyle.rules[2];
+      let classProp = classRule.textProps[0];
+      ok(!classProp.overridden, "Class prop shouldn't be overridden, some props are still being used.");
+      for (let computed of classProp.computed) {
+        if (computed.name.indexOf("margin-left") == 0) {
+          ok(computed.overridden, "margin-left props should be overridden.");
+        } else {
+          ok(!computed.overridden, "Non-margin-left props should not be overridden.");
+        }
       }
-    }
 
-    styleNode.parentNode.removeChild(styleNode);
+      styleNode.parentNode.removeChild(styleNode);
 
-    importantOverride();
+      importantOverride();
+    });
   });
 }
 
@@ -100,29 +102,30 @@ function importantOverride()
     '}';
   let styleNode = addStyle(doc, style);
   doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
+  inspector.once("markupmutation", () => {
+    inspector.selection.setNode(doc.getElementById("testid"));
+    inspector.once("inspector-updated", () => {
+      let elementStyle = view._elementStyle;
 
-  inspector.selection.setNode(doc.getElementById("testid"));
-  inspector.once("inspector-updated", () => {
-    let elementStyle = view._elementStyle;
+      let idRule = elementStyle.rules[1];
+      let idProp = idRule.textProps[0];
+      ok(idProp.overridden, "Not-important rule should be overridden.");
 
-    let idRule = elementStyle.rules[1];
-    let idProp = idRule.textProps[0];
-    ok(idProp.overridden, "Not-important rule should be overridden.");
+      let classRule = elementStyle.rules[2];
+      let classProp = classRule.textProps[0];
+      ok(!classProp.overridden, "Important rule should not be overridden.");
 
-    let classRule = elementStyle.rules[2];
-    let classProp = classRule.textProps[0];
-    ok(!classProp.overridden, "Important rule should not be overridden.");
+      styleNode.parentNode.removeChild(styleNode);
 
-    styleNode.parentNode.removeChild(styleNode);
+      let elementRule = elementStyle.rules[0];
+      let elementProp = elementRule.createProperty("background-color", "purple", "important");
+      promiseDone(elementRule._applyingModifications.then(() => {
+        ok(classProp.overridden, "New important prop should override class property.");
+        ok(!elementProp.overridden, "New important prop should not be overriden.");
 
-    let elementRule = elementStyle.rules[0];
-    let elementProp = elementRule.createProperty("background-color", "purple", "important");
-    promiseDone(elementRule._applyingModifications.then(() => {
-      ok(classProp.overridden, "New important prop should override class property.");
-      ok(!elementProp.overridden, "New important prop should not be overriden.");
-
-      disableOverride();
-    }));
+        disableOverride();
+      }));
+    });
   });
 }
 
@@ -137,23 +140,24 @@ function disableOverride()
     '}';
   let styleNode = addStyle(doc, style);
   doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
+  inspector.once("markupmutation", () => {
+    inspector.selection.setNode(doc.getElementById("testid"));
+    inspector.once("inspector-updated", () => {
+      let elementStyle = view._elementStyle;
 
-  inspector.selection.setNode(doc.getElementById("testid"));
-  inspector.once("inspector-updated", () => {
-    let elementStyle = view._elementStyle;
+      let idRule = elementStyle.rules[1];
+      let idProp = idRule.textProps[0];
+      idProp.setEnabled(false);
+      promiseDone(idRule._applyingModifications.then(() => {
+        let classRule = elementStyle.rules[2];
+        let classProp = classRule.textProps[0];
+        ok(!classProp.overridden, "Class prop should not be overridden after id prop was disabled.");
 
-    let idRule = elementStyle.rules[1];
-    let idProp = idRule.textProps[0];
-    idProp.setEnabled(false);
-    promiseDone(idRule._applyingModifications.then(() => {
-      let classRule = elementStyle.rules[2];
-      let classProp = classRule.textProps[0];
-      ok(!classProp.overridden, "Class prop should not be overridden after id prop was disabled.");
+        styleNode.parentNode.removeChild(styleNode);
 
-      styleNode.parentNode.removeChild(styleNode);
-
-      finishTest();
-    }));
+        finishTest();
+      }));
+    });
   });
 }
 
diff --git a/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js b/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
index af12875de71..14da8fc20fc 100644
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_653531_highlighter_console_helper.js
@@ -5,11 +5,13 @@
 
 // Tests that the $0 console helper works as intended.
 
+let inspector, h1;
+
 function createDocument()
 {
   let doc = content.document;
   let div = doc.createElement("div");
-  let h1 = doc.createElement("h1");
+  h1 = doc.createElement("h1");
   let p1 = doc.createElement("p");
   let p2 = doc.createElement("p");
   let div2 = doc.createElement("div");
@@ -42,39 +44,37 @@ function createDocument()
 
 function setupHighlighterTests()
 {
-  let h1 = content.document.querySelector("h1");
   ok(h1, "we have the header node");
-
   openInspector(runSelectionTests);
 }
 
 function runSelectionTests(aInspector)
 {
-  aInspector.highlighter.unlockAndFocus();
-  aInspector.highlighter.outline.setAttribute("disable-transitions", "true");
-
-  executeSoon(function() {
-    aInspector.selection.once("new-node", performTestComparisons);
-    let h1 = content.document.querySelector("h1");
+  inspector = aInspector;
+  inspector.toolbox.startPicker();
+  inspector.toolbox.once("picker-started", () => {
     EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
+    inspector.toolbox.once("picker-node-hovered", () => {
+      executeSoon(performTestComparisons);
+    });
   });
 }
 
+function getHighlighterOutline()
+{
+  return gBrowser.selectedBrowser.parentNode
+    .querySelector(".highlighter-container .highlighter-outline");
+}
+
 function performTestComparisons()
 {
-  let target = TargetFactory.forTab(gBrowser.selectedTab);
-  let inspector = gDevTools.getToolbox(target).getPanel("inspector");
-  inspector.highlighter.lock();
+  let outline = getHighlighterOutline();
+  ok(outline && !outline.hasAttribute("hidden"), "inspector is highlighting");
 
-  let isHighlighting =
-    !(inspector.highlighter.outline.getAttribute("hidden") == "true");
-
-  ok(isHighlighting, "inspector is highlighting");
-
-  let h1 = content.document.querySelector("h1");
-  is(inspector.selection.node, h1, "selection matches node");
-
-  openConsole(gBrowser.selectedTab, performWebConsoleTests);
+  EventUtils.synthesizeMouseAtCenter(h1, {}, content);
+  inspector.toolbox.once("picker-stopped", () => {
+    openConsole(gBrowser.selectedTab, performWebConsoleTests);
+  });
 }
 
 function performWebConsoleTests(hud)
@@ -98,10 +98,10 @@ function performWebConsoleTests(hud)
   {
     isnot(node.textContent.indexOf("bug653531"), -1,
           "correct output for $0.textContent");
-    let inspector = gDevTools.getToolbox(target).getPanel("inspector");
     is(inspector.selection.node.textContent, "bug653531",
        "node successfully updated");
 
+    inspector = h1 = null;
     gBrowser.removeCurrentTab();
     finishTest();
   }
@@ -110,6 +110,7 @@ function performWebConsoleTests(hud)
 function test()
 {
   waitForExplicitFinish();
+
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
     gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
@@ -118,4 +119,3 @@ function test()
 
   content.location = "data:text/html;charset=utf-8,test for highlighter helper in web console";
 }
-