--- a/CLOBBER
+++ b/CLOBBER
@@ -17,9 +17,9 @@
 #
 # Modifying this file will now automatically clobber the buildbot machines \o/
 #
 
 # Are you updating CLOBBER because you think it's needed for your WebIDL
 # changes to stick? As of bug 928195, this shouldn't be necessary! Please
 # don't change CLOBBER for WebIDL changes any more.
 
-Bug 934756 causes the Fennec build to fail unless we clobber.
+Bug 944533 requires clobber to force a Proguard refresh

--- a/browser/base/content/browser-thumbnails.js
+++ b/browser/base/content/browser-thumbnails.js
@@ -1,14 +1,16 @@
 #ifdef 0
 /* 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/. */
 #endif
 
+Cu.import("resource://gre/modules/NewTabUtils.jsm");
+
 /**
  * Keeps thumbnails of open web pages up-to-date.
  */
 let gBrowserThumbnails = {
   /**
    * Pref that controls whether we can store SSL content on disk
    */
   PREF_DISK_CACHE_SSL: "browser.cache.disk_cache_ssl",
@@ -115,16 +117,21 @@ let gBrowserThumbnails = {
       this._clearTimeout(aBrowser);
       this._capture(aBrowser);
     }.bind(this), this._captureDelayMS);
 
     this._timeouts.set(aBrowser, timeout);
   },
 
   _shouldCapture: function Thumbnails_shouldCapture(aBrowser) {
+    // Capture only if it's a top site in about:newtab.
+    if (!NewTabUtils.links.getLinks().some(
+          (link) => link && link.url == aBrowser.currentURI.spec))
+      return false;
+
     // Capture only if it's the currently selected tab.
     if (aBrowser != gBrowser.selectedBrowser)
       return false;
 
     // Don't capture in per-window private browsing mode.
     if (PrivateBrowsingUtils.isWindowPrivate(window))
       return false;
 

--- a/browser/base/content/highlighter.css
+++ b/browser/base/content/highlighter.css
@@ -1,20 +1,16 @@
 /* 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/. */
- 
+
 .highlighter-container {
   pointer-events: none;
 }
 
-.highlighter-controls {
-  position: relative;
-}
-
 .highlighter-outline-container {
   overflow: hidden;
   position: relative;
 }
 
 .highlighter-outline {
   position: absolute;
 }
@@ -29,75 +25,65 @@
   transition-property: opacity, top, left, width, height;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
 
 /*
  * Node Infobar
  */
+.highlighter-nodeinfobar-container {
+  position: relative;
+}
 
-.highlighter-nodeinfobar-container {
+.highlighter-nodeinfobar-positioner {
   position: absolute;
   max-width: 95%;
 }
 
-.highlighter-nodeinfobar-container[hidden] {
+.highlighter-nodeinfobar-positioner[hidden] {
   opacity: 0;
   pointer-events: none;
   display: -moz-box;
 }
 
-.highlighter-nodeinfobar-container:not([disable-transitions]),
-.highlighter-nodeinfobar-container[disable-transitions][force-transitions] {
+.highlighter-nodeinfobar-positioner:not([disable-transitions]),
+.highlighter-nodeinfobar-positioner[disable-transitions][force-transitions] {
   transition-property: transform, opacity, top, left;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
 
 .highlighter-nodeinfobar-text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   direction: ltr;
 }
 
-.highlighter-nodeinfobar-button > .toolbarbutton-text {
-  display: none;
-}
-
-.highlighter-nodeinfobar-container:not([locked]):not(:hover) > .highlighter-nodeinfobar > .highlighter-nodeinfobar-button {
-  visibility: hidden;
-}
-
-.highlighter-nodeinfobar-container[locked] > .highlighter-nodeinfobar,
-.highlighter-nodeinfobar-container:not([locked]):hover > .highlighter-nodeinfobar {
-  pointer-events: auto;
-}
-
 html|*.highlighter-nodeinfobar-id,
 html|*.highlighter-nodeinfobar-classes,
 html|*.highlighter-nodeinfobar-pseudo-classes,
 html|*.highlighter-nodeinfobar-tagname {
   -moz-user-select: text;
   -moz-user-focus: normal;
   cursor: text;
 }
 
 .highlighter-nodeinfobar-arrow {
   display: none;
 }
 
-.highlighter-nodeinfobar-container[position="top"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-bottom {
+.highlighter-nodeinfobar-positioner[position="top"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-bottom {
   display: block;
 }
 
-.highlighter-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-top {
+.highlighter-nodeinfobar-positioner[position="bottom"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-top {
   display: block;
 }
 
-.highlighter-nodeinfobar-container[disabled] {
+.highlighter-nodeinfobar-positioner[disabled] {
   visibility: hidden;
 }
 
 html|*.highlighter-nodeinfobar-tagname {
   text-transform: lowercase;
 }

--- a/browser/components/customizableui/src/CustomizeMode.jsm
+++ b/browser/components/customizableui/src/CustomizeMode.jsm
@@ -1101,16 +1101,20 @@ CustomizeMode.prototype = {
     if (aTargetArea.id == kPaletteId) {
       // Did we drag from outside the palette?
       if (aOriginArea.id !== kPaletteId) {
         if (!CustomizableUI.isWidgetRemovable(aDraggedItemId)) {
           return;
         }
 
         CustomizableUI.removeWidgetFromArea(aDraggedItemId);
+        // Special widgets are removed outright, we can return here:
+        if (CustomizableUI.isSpecialWidget(aDraggedItemId)) {
+          return;
+        }
       }
       draggedItem = draggedItem.parentNode;
 
       // If the target node is the palette itself, just append
       if (aTargetNode == this.visiblePalette) {
         this.visiblePalette.appendChild(draggedItem);
       } else {
         // The items in the palette are wrapped, so we need the target node's parent here:

--- a/browser/components/customizableui/test/browser.ini
+++ b/browser/components/customizableui/test/browser.ini
@@ -54,9 +54,10 @@ skip-if = os == "linux"
 [browser_941083_invalidate_wrapper_cache_createWidget.js]
 [browser_942581_unregisterArea_keeps_placements.js]
 [browser_943683_migration_test.js]
 [browser_944887_destroyWidget_should_destroy_in_palette.js]
 [browser_945739_showInPrivateBrowsing_customize_mode.js]
 [browser_947987_removable_default.js]
 [browser_948985_non_removable_defaultArea.js]
 [browser_952963_areaType_getter_no_area.js]
+[browser_956602_remove_special_widget.js]
 [browser_panel_toggle.js]

new file mode 100644
--- /dev/null
+++ b/browser/components/customizableui/test/browser_956602_remove_special_widget.js
@@ -0,0 +1,31 @@
+/* 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/. */
+
+"use strict";
+
+
+// Adding a separator and then dragging it out of the navbar shouldn't throw
+add_task(function() {
+  try {
+    let navbar = document.getElementById("nav-bar");
+    let separatorSelector = "toolbarseparator[id^=customizableui-special-separator]";
+    ok(!navbar.querySelector(separatorSelector), "Shouldn't be a separator in the navbar");
+    CustomizableUI.addWidgetToArea('separator', 'nav-bar');
+    yield startCustomizing();
+    let separator = navbar.querySelector(separatorSelector);
+    ok(separator, "There should be a separator in the navbar now.");
+    let palette = document.getElementById("customization-palette");
+    simulateItemDrag(separator, palette);
+    ok(!palette.querySelector(separatorSelector), "No separator in the palette.");
+  } catch (ex) {
+    Cu.reportError(ex);
+    ok(false, "Shouldn't throw an exception moving an item to the navbar.");
+  } finally {
+    yield endCustomizing();
+  }
+});
+
+add_task(function asyncCleanup() {
+  resetCustomization();
+});

--- a/browser/components/nsBrowserContentHandler.js
+++ b/browser/components/nsBrowserContentHandler.js
@@ -578,35 +578,16 @@ nsBrowserContentHandler.prototype = {
             willRestoreSession = ss.isAutomaticRestoreEnabled();
 
             overridePage = Services.urlFormatter.formatURLPref("startup.homepage_override_url");
             if (prefb.prefHasUserValue("app.update.postupdate"))
               overridePage = getPostUpdateOverridePage(overridePage);
 
             overridePage = overridePage.replace("%OLD_VERSION%", old_mstone);
             break;
-
-          // Temporary case for Australis whatsnew
-          case OVERRIDE_NEW_BUILD_ID:
-            let locale = "en-US";
-            try {
-              locale = Services.prefs.getCharPref("general.useragent.locale");
-            } catch (e) {}
-
-            let showedAustralisWhatsNew = false;
-            try {
-              showedAustralisWhatsNew = Services.prefs.getBoolPref("browser.showedAustralisWhatsNew");
-            } catch(e) {}
-
-            // Show the Australis whatsnew page for en-US if we haven't yet shown it
-            if (!showedAustralisWhatsNew && locale == "en-US") {
-              Services.prefs.setBoolPref("browser.showedAustralisWhatsNew", true);
-              overridePage = "https://www.mozilla.org/en-US/firefox/29.0a1/whatsnew/";
-            }
-            break;
         }
       }
     } catch (ex) {}
 
     // formatURLPref might return "about:blank" if getting the pref fails
     if (overridePage == "about:blank")
       overridePage = "";
 

--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -82,26 +82,32 @@
         var os =
                Components.classes["@mozilla.org/observer-service;1"]
                          .getService(Components.interfaces.nsIObserverService);
         os.addObserver(this, "browser-search-engine-modified", false);
 
         this._addedObserver = true;
 
         this.searchService.init((function search_init_cb(aStatus) {
+          // Bail out if the binding's been destroyed
+          if (this._destroyed)
+            return;
+
           if (Components.isSuccessCode(aStatus)) {
             // Refresh the display (updating icon, etc)
             this.updateDisplay();
           } else {
             Components.utils.reportError("Cannot initialize search service, bailing out: " + aStatus);
           }
         }).bind(this));
       ]]></constructor>
 
       <destructor><![CDATA[
+        this._destroyed = true;
+
         if (this._addedObserver) {
           var os = Components.classes["@mozilla.org/observer-service;1"]
                              .getService(Components.interfaces.nsIObserverService);
           os.removeObserver(this, "browser-search-engine-modified");
           this._addedObserver = false;
         }
 
         // Make sure to break the cycle from _textbox to us. Otherwise we leak

--- a/browser/devtools/app-manager/content/projects.js
+++ b/browser/devtools/app-manager/content/projects.js
@@ -127,17 +127,17 @@ let UI = {
     let icon;
     if (manifest.icons) {
       let size = Object.keys(manifest.icons).sort(function(a, b) b - a)[0];
       if (size) {
         icon = manifest.icons[size];
       }
     }
     if (!icon)
-      return null;
+      return "chrome://browser/skin/devtools/app-manager/default-app-icon.png";
     if (project.type == "hosted") {
       let manifestURL = Services.io.newURI(project.location, null, null);
       let origin = Services.io.newURI(manifestURL.prePath, null, null);
       return Services.io.newURI(icon, null, origin).spec;
     } else if (project.type == "packaged") {
       let projectFolder = FileUtils.File(project.location);
       let folderURI = Services.io.newFileURI(projectFolder).spec;
       return folderURI + icon.replace(/^\/|\\/, "");

--- a/browser/devtools/debugger/debugger-toolbar.js
+++ b/browser/devtools/debugger/debugger-toolbar.js
@@ -26,21 +26,22 @@ function ToolbarView() {
 ToolbarView.prototype = {
   /**
    * Initialization function, called when the debugger is started.
    */
   initialize: function() {
     dumpn("Initializing the ToolbarView");
 
     this._instrumentsPaneToggleButton = document.getElementById("instruments-pane-toggle");
-    this._resumeOrderPanel = document.getElementById("resumption-order-panel");
     this._resumeButton = document.getElementById("resume");
     this._stepOverButton = document.getElementById("step-over");
     this._stepInButton = document.getElementById("step-in");
     this._stepOutButton = document.getElementById("step-out");
+    this._resumeOrderTooltip = new Tooltip(document);
+    this._resumeOrderTooltip.defaultPosition = TOOLBAR_ORDER_POPUP_POSITION;
 
     let resumeKey = ShortcutUtils.prettifyShortcut(document.getElementById("resumeKey"));
     let stepOverKey = ShortcutUtils.prettifyShortcut(document.getElementById("stepOverKey"));
     let stepInKey = ShortcutUtils.prettifyShortcut(document.getElementById("stepInKey"));
     let stepOutKey = ShortcutUtils.prettifyShortcut(document.getElementById("stepOutKey"));
     this._resumeTooltip = L10N.getFormatStr("resumeButtonTooltip", resumeKey);
     this._pauseTooltip = L10N.getFormatStr("pauseButtonTooltip", resumeKey);
     this._stepOverTooltip = L10N.getFormatStr("stepOverTooltip", stepOverKey);
@@ -75,20 +76,18 @@ ToolbarView.prototype = {
    * Display a warning when trying to resume a debuggee while another is paused.
    * Debuggees must be unpaused in a Last-In-First-Out order.
    *
    * @param string aPausedUrl
    *        The URL of the last paused debuggee.
    */
   showResumeWarning: function(aPausedUrl) {
     let label = L10N.getFormatStr("resumptionOrderPanelTitle", aPausedUrl);
-    let descriptionNode = document.getElementById("resumption-panel-desc");
-    descriptionNode.setAttribute("value", label);
-
-    this._resumeOrderPanel.openPopup(this._resumeButton);
+    this._resumeOrderTooltip.setTextContent([label]);
+    this._resumeOrderTooltip.show(this._resumeButton);
   },
 
   /**
    * Sets the resume button state based on the debugger active thread.
    *
    * @param string aState
    *        Either "paused" or "attached".
    */
@@ -158,21 +157,21 @@ ToolbarView.prototype = {
     if (DebuggerController.activeThread.paused) {
       DebuggerController.StackFrames.currentFrameDepth = -1;
       let warn = DebuggerController._ensureResumptionOrder;
       DebuggerController.activeThread.stepOut(warn);
     }
   },
 
   _instrumentsPaneToggleButton: null,
-  _resumeOrderPanel: null,
   _resumeButton: null,
   _stepOverButton: null,
   _stepInButton: null,
   _stepOutButton: null,
+  _resumeOrderTooltip: null,
   _resumeTooltip: "",
   _pauseTooltip: "",
   _stepOverTooltip: "",
   _stepInTooltip: "",
   _stepOutTooltip: ""
 };
 
 /**

--- a/browser/devtools/debugger/debugger-view.js
+++ b/browser/devtools/debugger/debugger-view.js
@@ -23,16 +23,17 @@ const GLOBAL_SEARCH_ACTION_MAX_DELAY = 1
 const FUNCTION_SEARCH_ACTION_MAX_DELAY = 400; // ms
 const SEARCH_GLOBAL_FLAG = "!";
 const SEARCH_FUNCTION_FLAG = "@";
 const SEARCH_TOKEN_FLAG = "#";
 const SEARCH_LINE_FLAG = ":";
 const SEARCH_VARIABLE_FLAG = "*";
 const EDITOR_VARIABLE_HOVER_DELAY = 350; // ms
 const EDITOR_VARIABLE_POPUP_POSITION = "topcenter bottomleft";
+const TOOLBAR_ORDER_POPUP_POSITION = "topcenter bottomleft";
 
 /**
  * Object defining the debugger view components.
  */
 let DebuggerView = {
   /**
    * Initializes the debugger view.
    *

--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -508,20 +508,9 @@
          consumeoutsideclicks="false">
     <vbox>
       <label id="conditional-breakpoint-panel-description"
              value="&debuggerUI.condBreakPanelTitle;"/>
       <textbox id="conditional-breakpoint-panel-textbox"/>
     </vbox>
   </panel>
 
-  <panel id="resumption-order-panel"
-         type="arrow"
-         position="before_start"
-         noautofocus="true"
-         consumeoutsideclicks="false">
-    <hbox align="start">
-      <image class="alert-icon"/>
-      <label id="resumption-panel-desc" class="description"/>
-    </hbox>
-  </panel>
-
 </window>

--- a/browser/devtools/fontinspector/font-inspector.js
+++ b/browser/devtools/fontinspector/font-inspector.js
@@ -15,22 +15,18 @@ function FontInspector(inspector, window
   this.chromeDoc = window.document;
   this.init();
 }
 
 FontInspector.prototype = {
   init: function FI_init() {
     this.update = this.update.bind(this);
     this.onNewNode = this.onNewNode.bind(this);
-    this.onHighlighterLocked = this.onHighlighterLocked.bind(this);
     this.inspector.selection.on("new-node", this.onNewNode);
     this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
-    if (this.inspector.highlighter) {
-      this.inspector.highlighter.on("locked", this.onHighlighterLocked);
-    }
     this.update();
   },
 
   /**
    * Is the fontinspector visible in the sidebar?
    */
   isActive: function FI_isActive() {
     return this.inspector.sidebar &&
@@ -39,46 +35,34 @@ FontInspector.prototype = {
 
   /**
    * Remove listeners.
    */
   destroy: function FI_destroy() {
     this.chromeDoc = null;
     this.inspector.sidebar.off("layoutview-selected", this.onNewNode);
     this.inspector.selection.off("new-node", this.onNewNode);
-    if (this.inspector.highlighter) {
-      this.inspector.highlighter.off("locked", this.onHighlighterLocked);
-    }
   },
 
   /**
    * Selection 'new-node' event handler.
    */
   onNewNode: function FI_onNewNode() {
     if (this.isActive() &&
         this.inspector.selection.isLocal() &&
         this.inspector.selection.isConnected() &&
-        this.inspector.selection.isElementNode() &&
-        this.inspector.selection.reason != "highlighter") {
+        this.inspector.selection.isElementNode()) {
       this.undim();
       this.update();
     } else {
       this.dim();
     }
   },
 
   /**
-   * Highlighter 'locked' event handler
-   */
-  onHighlighterLocked: function FI_onHighlighterLocked() {
-    this.undim();
-    this.update();
-  },
-
-  /**
    * Hide the font list. No node are selected.
    */
   dim: function FI_dim() {
     this.chromeDoc.body.classList.add("dim");
     this.chromeDoc.querySelector("#all-fonts").innerHTML = "";
   },
 
   /**
@@ -205,17 +189,17 @@ FontInspector.prototype = {
    * Select the <body> to show all the fonts included in the document.
    */
   showAll: function FI_showAll() {
     if (!this.isActive() ||
         !this.inspector.selection.isConnected() ||
         !this.inspector.selection.isElementNode()) {
       return;
     }
-    let node = this.inspector.selection.node;
+    let node = this.inspector.selection.nodeFront;
     let contentDocument = node.ownerDocument;
     let root = contentDocument.documentElement;
     if (contentDocument.body) {
       root = contentDocument.body;
     }
     this.inspector.selection.setNode(root, "fontinspector");
   },
 }

new file mode 100644
--- /dev/null
+++ b/browser/devtools/framework/selection.js
@@ -0,0 +1,296 @@
+/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ft=javascript 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/. */
+
+"use strict";
+
+const {Cu, Ci} = require("chrome");
+let EventEmitter = require("devtools/shared/event-emitter");
+
+/**
+ * API
+ *
+ *   new Selection(walker=null, node=null, track={attributes,detached});
+ *   destroy()
+ *   node (readonly)
+ *   setNode(node, origin="unknown")
+ *
+ * Helpers:
+ *
+ *   window
+ *   document
+ *   isRoot()
+ *   isNode()
+ *   isHTMLNode()
+ *
+ * Check the nature of the node:
+ *
+ *   isElementNode()
+ *   isAttributeNode()
+ *   isTextNode()
+ *   isCDATANode()
+ *   isEntityRefNode()
+ *   isEntityNode()
+ *   isProcessingInstructionNode()
+ *   isCommentNode()
+ *   isDocumentNode()
+ *   isDocumentTypeNode()
+ *   isDocumentFragmentNode()
+ *   isNotationNode()
+ *
+ * Events:
+ *   "new-node" when the inner node changed
+ *   "before-new-node" when the inner node is set to change
+ *   "attribute-changed" when an attribute is changed (only if tracked)
+ *   "detached" when the node (or one of its parents) is removed from the document (only if tracked)
+ *   "reparented" when the node (or one of its parents) is moved under a different node (only if tracked)
+ */
+
+/**
+ * A Selection object. Hold a reference to a node.
+ * Includes some helpers, fire some helpful events.
+ *
+ * @param node Inner node.
+ *    Can be null. Can be (un)set in the future via the "node" property;
+ * @param trackAttribute Tell if events should be fired when the attributes of
+ *    the node change.
+ *
+ */
+function Selection(walker, node=null, track={attributes:true,detached:true}) {
+  EventEmitter.decorate(this);
+
+  this._onMutations = this._onMutations.bind(this);
+  this.track = track;
+  this.setWalker(walker);
+  this.setNode(node);
+}
+
+exports.Selection = Selection;
+
+Selection.prototype = {
+  _walker: null,
+  _node: null,
+
+  _onMutations: function(mutations) {
+    let attributeChange = false;
+    let pseudoChange = false;
+    let detached = false;
+    let parentNode = null;
+
+    for (let m of mutations) {
+      if (!attributeChange && m.type == "attributes") {
+        attributeChange = true;
+      }
+      if (m.type == "childList") {
+        if (!detached && !this.isConnected()) {
+          if (this.isNode()) {
+            parentNode = m.target;
+          }
+          detached = true;
+        }
+      }
+      if (m.type == "pseudoClassLock") {
+        pseudoChange = true;
+      }
+    }
+
+    // Fire our events depending on what changed in the mutations array
+    if (attributeChange) {
+      this.emit("attribute-changed");
+    }
+    if (pseudoChange) {
+      this.emit("pseudoclass");
+    }
+    if (detached) {
+      let rawNode = null;
+      if (parentNode && parentNode.isLocal_toBeDeprecated()) {
+        rawNode = parentNode.rawNode();
+      }
+
+      this.emit("detached", rawNode, null);
+      this.emit("detached-front", parentNode);
+    }
+  },
+
+  destroy: function() {
+    this.setNode(null);
+    this.setWalker(null);
+  },
+
+  setWalker: function(walker) {
+    if (this._walker) {
+      this._walker.off("mutations", this._onMutations);
+    }
+    this._walker = walker;
+    if (this._walker) {
+      this._walker.on("mutations", this._onMutations);
+    }
+  },
+
+  // Not remote-safe
+  setNode: function(value, reason="unknown") {
+    if (value) {
+      value = this._walker.frontForRawNode(value);
+    }
+    this.setNodeFront(value, reason);
+  },
+
+  // Not remote-safe
+  get node() {
+    return this._node;
+  },
+
+  // Not remote-safe
+  get window() {
+    if (this.isNode()) {
+      return this.node.ownerDocument.defaultView;
+    }
+    return null;
+  },
+
+  // Not remote-safe
+  get document() {
+    if (this.isNode()) {
+      return this.node.ownerDocument;
+    }
+    return null;
+  },
+
+  setNodeFront: function(value, reason="unknown") {
+    this.reason = reason;
+    if (value !== this._nodeFront) {
+      let rawValue = null;
+      if (value && value.isLocal_toBeDeprecated()) {
+        rawValue = value.rawNode();
+      }
+      this.emit("before-new-node", rawValue, reason);
+      this.emit("before-new-node-front", value, reason);
+      let previousNode = this._node;
+      let previousFront = this._nodeFront;
+      this._node = rawValue;
+      this._nodeFront = value;
+      this.emit("new-node", previousNode, this.reason);
+      this.emit("new-node-front", value, this.reason);
+    }
+  },
+
+  get documentFront() {
+    return this._walker.document(this._nodeFront);
+  },
+
+  get nodeFront() {
+    return this._nodeFront;
+  },
+
+  isRoot: function() {
+    return this.isNode() &&
+           this.isConnected() &&
+           this._nodeFront.isDocumentElement;
+  },
+
+  isNode: function() {
+    if (!this._nodeFront) {
+      return false;
+    }
+
+    // As long as tools are still accessing node.rawNode(),
+    // this needs to stay here.
+    if (this._node && Cu.isDeadWrapper(this._node)) {
+      return false;
+    }
+
+    return true;
+  },
+
+  isLocal: function() {
+    return !!this._node;
+  },
+
+  isConnected: function() {
+    let node = this._nodeFront;
+    if (!node || !node.actorID) {
+      return false;
+    }
+
+    // As long as there are still tools going around
+    // accessing node.rawNode, this needs to stay.
+    let rawNode = null;
+    if (node.isLocal_toBeDeprecated()) {
+      rawNode = node.rawNode();
+    }
+    if (rawNode) {
+      try {
+        let doc = this.document;
+        return (doc && doc.defaultView && doc.documentElement.contains(rawNode));
+      } catch (e) {
+        // "can't access dead object" error
+        return false;
+      }
+    }
+
+    while(node) {
+      if (node === this._walker.rootNode) {
+        return true;
+      }
+      node = node.parentNode();
+    };
+    return false;
+  },
+
+  isHTMLNode: function() {
+    let xhtml_ns = "http://www.w3.org/1999/xhtml";
+    return this.isNode() && this.node.namespaceURI == xhtml_ns;
+  },
+
+  // Node type
+
+  isElementNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ELEMENT_NODE;
+  },
+
+  isAttributeNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ATTRIBUTE_NODE;
+  },
+
+  isTextNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.TEXT_NODE;
+  },
+
+  isCDATANode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.CDATA_SECTION_NODE;
+  },
+
+  isEntityRefNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ENTITY_REFERENCE_NODE;
+  },
+
+  isEntityNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ENTITY_NODE;
+  },
+
+  isProcessingInstructionNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.PROCESSING_INSTRUCTION_NODE;
+  },
+
+  isCommentNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.PROCESSING_INSTRUCTION_NODE;
+  },
+
+  isDocumentNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.DOCUMENT_NODE;
+  },
+
+  isDocumentTypeNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.DOCUMENT_TYPE_NODE;
+  },
+
+  isDocumentFragmentNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.DOCUMENT_FRAGMENT_NODE;
+  },
+
+  isNotationNode: function() {
+    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.NOTATION_NODE;
+  },
+};

--- a/browser/devtools/framework/test/browser_keybindings.js
+++ b/browser/devtools/framework/test/browser_keybindings.js
@@ -12,16 +12,17 @@ function test()
   let node;
   let inspector;
   let keysetMap = { };
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
     gBrowser.selectedBrowser.removeEventListener("load", onload, true);
     doc = content.document;
+    node = doc.querySelector("h1");
     waitForFocus(setupKeyBindingsTest, content);
   }, true);
 
   content.location = "data:text/html,<html><head><title>Test for the " +
                      "highlighter keybindings</title></head><body>" +
                      "<h1>Keybindings!</h1></body></html>";
 
   function buildDevtoolsKeysetMap(keyset) {
@@ -58,34 +59,47 @@ function test()
 
     gDevTools.once("toolbox-ready", (e, toolbox) => {
       inspectorShouldBeOpenAndHighlighting(toolbox.getCurrentPanel(), toolbox)
     });
 
     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");
-      keysetMap.inspector.synthesizeKey();
-      is (aInspector.highlighter.locked, true, "Highlighter should be locked");
+    aToolbox.once("picker-started", () => {
+      ok(true, "picker-started event received, highlighter started");
       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();
     });
   }
 
   function webconsoleShouldBeSelected(aToolbox, panel)
   {
       is (aToolbox.currentToolId, "webconsole");
 
       aToolbox.once("jsdebugger-ready", (e, panel) => {

--- a/browser/devtools/framework/toolbox.js
+++ b/browser/devtools/framework/toolbox.js
@@ -41,16 +41,19 @@ loader.lazyGetter(this, "toolboxStrings"
 });
 
 loader.lazyGetter(this, "Requisition", () => {
   let {require} = Cu.import("resource://gre/modules/devtools/Require.jsm", {});
   Cu.import("resource://gre/modules/devtools/gcli.jsm", {});
   return require("gcli/cli").Requisition;
 });
 
+loader.lazyGetter(this, "Selection", () => require("devtools/framework/selection").Selection);
+loader.lazyGetter(this, "InspectorFront", () => require("devtools/server/actors/inspector").InspectorFront);
+
 /**
  * A "Toolbox" is the component that holds all the tools for one specific
  * target. Visually, it's a document that includes the tools tabs and all
  * the iframes where the tool panels will be living in.
  *
  * @param {object} target
  *        The object the toolbox is debugging.
  * @param {string} selectedTool
@@ -179,16 +182,52 @@ Toolbox.prototype = {
   /**
    * Get current zoom level of toolbox
    */
   get zoomValue() {
     return parseFloat(Services.prefs.getCharPref(ZOOM_PREF));
   },
 
   /**
+   * Get the toolbox highlighter front. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   */
+  get highlighter() {
+    if (this.isRemoteHighlightable) {
+      return this._highlighter;
+    } else {
+      return null;
+    }
+  },
+
+  /**
+   * Get the toolbox's inspector front. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   */
+  get inspector() {
+    return this._inspector;
+  },
+
+  /**
+   * Get the toolbox's walker front. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   */
+  get walker() {
+    return this._walker;
+  },
+
+  /**
+   * Get the toolbox's node selection. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   */
+  get selection() {
+    return this._selection;
+  },
+
+  /**
    * Get the toggled state of the split console
    */
   get splitConsole() {
     return this._splitConsole;
   },
 
   /**
    * Open the toolbox
@@ -209,21 +248,24 @@ Toolbox.prototype = {
         this._buildOptions();
         this._buildTabs();
         this._buildButtons();
         this._addKeysToWindow();
         this._addToolSwitchingKeys();
         this._addZoomKeys();
         this._loadInitialZoom();
 
-        this._telemetry.toolOpened("toolbox");
+        // Load the toolbox-level actor fronts and utilities now
+        this._target.makeRemote().then(() => {
+          this._telemetry.toolOpened("toolbox");
 
-        this.selectTool(this._defaultToolId).then(panel => {
-          this.emit("ready");
-          deferred.resolve();
+          this.selectTool(this._defaultToolId).then(panel => {
+            this.emit("ready");
+            deferred.resolve();
+          });
         });
       };
 
       iframe.setAttribute("src", this._URL);
 
       let domHelper = new DOMHelpers(iframe.contentWindow);
       domHelper.onceDOMReady(domReady);
 
@@ -410,17 +452,16 @@ Toolbox.prototype = {
       key.setAttribute("oncommand", "void(0)"); // needed. See bug 371900
       key.addEventListener("command", () => {
         HUDService.toggleBrowserConsole();
       }, true);
       doc.getElementById("toolbox-keyset").appendChild(key);
     }
   },
 
-
   /**
    * Handle any custom key events.  Returns true if there was a custom key binding run
    * @param {string} toolId
    *        Which tool to run the command on (skip if not current)
    */
   fireCustomKey: function(toolId) {
     let toolDefinition = gDevTools.getToolDefinition(toolId);
 
@@ -479,33 +520,52 @@ Toolbox.prototype = {
    */
   _buildTabs: function() {
     for (let definition of gDevTools.getToolDefinitionArray()) {
       this._buildTabForTool(definition);
     }
   },
 
   /**
-   * Add buttons to the UI as specified in the devtools.window.toolbarSpec pref
+   * Add buttons to the UI as specified in the devtools.toolbox.toolbarSpec pref
    */
   _buildButtons: function() {
+    this._buildPickerButton();
+
     if (!this.target.isLocalTab) {
       return;
     }
 
     let spec = CommandUtils.getCommandbarSpec("devtools.toolbox.toolbarSpec");
     let env = CommandUtils.createEnvironment(this.target.tab.ownerDocument,
                                              this.target.window.document);
     let req = new Requisition(env);
     let buttons = CommandUtils.createButtons(spec, this._target, this.doc, req);
     let container = this.doc.getElementById("toolbox-buttons");
     buttons.forEach(container.appendChild.bind(container));
   },
 
   /**
+   * Adding the element picker button is done here unlike the other buttons
+   * since we want it to work for remote targets too
+   */
+  _buildPickerButton: function() {
+    this._pickerButton = this.doc.createElement("toolbarbutton");
+    this._pickerButton.id = "command-button-pick";
+    this._pickerButton.className = "command-button";
+    this._pickerButton.setAttribute("tooltiptext", toolboxStrings("pickButton.tooltip"));
+
+    let container = this.doc.querySelector("#toolbox-buttons");
+    container.appendChild(this._pickerButton);
+
+    this.togglePicker = this.togglePicker.bind(this);
+    this._pickerButton.addEventListener("command", this.togglePicker, false);
+  },
+
+  /**
    * Build a tab for one tool definition and add to the toolbox
    *
    * @param {string} toolDefinition
    *        Tool definition of the tool to build a tab for.
    */
   _buildTabForTool: function(toolDefinition) {
     if (!toolDefinition.isTargetSupported(this._target)) {
       return;
@@ -595,16 +655,22 @@ Toolbox.prototype = {
 
   /**
    * Ensure the tool with the given id is loaded.
    *
    * @param {string} id
    *        The id of the tool to load.
    */
   loadTool: function(id) {
+    if (id === "inspector" && !this._inspector) {
+      return this.initInspector().then(() => {
+        return this.loadTool(id);
+      });
+    }
+
     let deferred = promise.defer();
     let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
 
     if (iframe) {
       let panel = this._toolPanels.get(id);
       if (panel) {
         deferred.resolve(panel);
       } else {
@@ -953,16 +1019,164 @@ Toolbox.prototype = {
       let key = doc.getElementById("key_" + toolId);
       if (key) {
         key.parentNode.removeChild(key);
       }
     }
   },
 
   /**
+   * Initialize the inspector/walker/selection/highlighter fronts.
+   * Returns a promise that resolves when the fronts are initialized
+   */
+  initInspector: function() {
+    let deferred = promise.defer();
+
+    if (!this._inspector) {
+      this._inspector = InspectorFront(this._target.client, this._target.form);
+      this._inspector.getWalker().then(walker => {
+        this._walker = walker;
+        this._selection = new Selection(this._walker);
+        if (this.isRemoteHighlightable) {
+          this._inspector.getHighlighter().then(highlighter => {
+            this._highlighter = highlighter;
+            deferred.resolve();
+          });
+        } else {
+          deferred.resolve();
+        }
+      });
+    } else {
+      deferred.resolve();
+    }
+
+    return deferred.promise;
+  },
+
+  /**
+   * Destroy the inspector/walker/selection fronts
+   * Returns a promise that resolves when the fronts are destroyed
+   */
+  destroyInspector: function() {
+    let deferred = promise.defer();
+
+    if (this._inspector) {
+      this._selection.destroy();
+      this._selection = null;
+      this._walker.release().then(
+        () => {
+          this._inspector.destroy();
+          this._highlighter.destroy();
+        },
+        (e) => {
+          console.error("Walker.release() failed: " + e);
+          this._inspector.destroy();
+          return this._highlighter.destroy();
+        }
+      ).then(() => {
+        this._inspector = null;
+        this._highlighter = null;
+        this._walker = null;
+        deferred.resolve();
+      });
+    } else {
+      deferred.resolve();
+    }
+
+    return deferred.promise;
+  },
+
+  /**
+   * Start/stop the element picker on the debuggee target.
+   */
+  togglePicker: function() {
+    if (this._isPicking) {
+      return this.stopPicker();
+    } else {
+      return this.startPicker();
+    }
+  },
+
+  get isRemoteHighlightable() {
+    return this._target.client.traits.highlightable;
+  },
+
+  /**
+   * Start the element picker on the debuggee target.
+   * This will request the inspector actor to start listening for mouse/touch
+   * events on the target to highlight the hovered/picked element.
+   * Depending on the server-side capabilities, this may fire events when nodes
+   * are hovered.
+   * @return A promise that resolves when the picker has started
+   */
+  startPicker: function() {
+    let deferred = promise.defer();
+
+    let done = () => {
+      this.emit("picker-started");
+      deferred.resolve();
+    };
+
+    this.initInspector().then(() => {
+      this._isPicking = true;
+      this._pickerButton.setAttribute("checked", "true");
+
+      if (this.isRemoteHighlightable) {
+        this.highlighter.pick().then(done);
+
+        this._onPickerNodeHovered = res => {
+          this.emit("picker-node-hovered", res.node);
+        };
+        this.walker.on("picker-node-hovered", this._onPickerNodeHovered);
+
+        this._onPickerNodePicked = res => {
+          this.selection.setNodeFront(res.node, "picker-node-picked");
+          this.stopPicker();
+        };
+        this.walker.on("picker-node-picked", this._onPickerNodePicked);
+      } else {
+        this.walker.pick().then(node => {
+          this.selection.setNodeFront(node, "picker-node-picked");
+          this.stopPicker();
+        });
+        done();
+      }
+    });
+
+    return deferred.promise;
+  },
+
+  /**
+   * Stop the element picker
+   * @return A promise that resolves when the picker has stopped
+   */
+  stopPicker: function() {
+    let deferred = promise.defer();
+
+    let done = () => {
+      this.emit("picker-stopped");
+      deferred.resolve();
+    };
+
+    this.initInspector().then(() => {
+      this._isPicking = false;
+      this._pickerButton.removeAttribute("checked");
+      if (this.isRemoteHighlightable) {
+        this.highlighter.cancelPick().then(done);
+        this.walker.off("picker-node-hovered", this._onPickerNodeHovered);
+        this.walker.off("picker-node-picked", this._onPickerNodePicked);
+      } else {
+        this.walker.cancelPick().then(done);
+      }
+    });
+
+    return deferred.promise;
+  },
+
+  /**
    * Get the toolbox's notification box
    *
    * @return The notification box element.
    */
   getNotificationBox: function() {
     return this.doc.getElementById("toolbox-notificationbox");
   },
 
@@ -999,16 +1213,22 @@ Toolbox.prototype = {
       try {
         outstanding.push(panel.destroy());
       } catch (e) {
         // We don't want to stop here if any panel fail to close.
         console.error(e);
       }
     }
 
+    // Destroying the walker and inspector fronts
+    outstanding.push(this.destroyInspector());
+
+    // Removing buttons
+    this._pickerButton.removeEventListener("command", this.togglePicker, false);
+    this._pickerButton = null;
     let container = this.doc.getElementById("toolbox-buttons");
     while (container.firstChild) {
       container.removeChild(container.firstChild);
     }
 
     outstanding.push(this.destroyHost());
 
     this._telemetry.destroy();

deleted file mode 100644
--- a/browser/devtools/inspector/highlighter.js
+++ /dev/null
@@ -1,877 +0,0 @@
-/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-const {Cu, Cc, Ci} = require("chrome");
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-
-let EventEmitter = require("devtools/shared/event-emitter");
-
-const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
-  // add ":visited" and ":link" after bug 713106 is fixed
-
-exports._forceBasic = {value: false};
-
-exports.Highlighter = function Highlighter(aTarget, aInspector, aToolbox) {
-  if (aTarget.isLocalTab && !exports._forceBasic.value) {
-    return new LocalHighlighter(aTarget, aInspector, aToolbox);
-  } else {
-    return new BasicHighlighter(aTarget, aInspector, aToolbox);
-  }
-}
-
-exports.LocalHighlighter = LocalHighlighter;
-exports.BasicHighlighter = BasicHighlighter;
-
-/**
- * A highlighter mechanism.
- *
- * The highlighter is built dynamically into the browser element.
- * The caller is in charge of destroying the highlighter (ie, the highlighter
- * won't be destroyed if a new tab is selected for example).
- *
- * API:
- *
- *   // Constructor and destructor.
- *   Highlighter(aTab, aInspector)
- *   void destroy();
- *
- *   // Show and hide the highlighter
- *   void show();
- *   void hide();
- *   boolean isHidden();
- *
- *   // Redraw the highlighter if the visible portion of the node has changed.
- *   void invalidateSize(aScroll);
- *
- * Events:
- *
- *   "closed" - Highlighter is closing
- *   "highlighting" - Highlighter is highlighting
- *   "locked" - The selected node has been locked
- *   "unlocked" - The selected ndoe has been unlocked
- *
- * Structure:
- *  <stack class="highlighter-container">
- *    <box class="highlighter-outline-container">
- *      <box class="highlighter-outline" locked="true/false"/>
- *    </box>
- *    <box class="highlighter-controls">
- *      <box class="highlighter-nodeinfobar-container" position="top/bottom" locked="true/false">
- *        <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-top"/>
- *        <hbox class="highlighter-nodeinfobar">
- *          <toolbarbutton class="highlighter-nodeinfobar-inspectbutton highlighter-nodeinfobar-button"/>
- *          <hbox class="highlighter-nodeinfobar-text">tagname#id.class1.class2</hbox>
- *          <toolbarbutton class="highlighter-nodeinfobar-menu highlighter-nodeinfobar-button">…</toolbarbutton>
- *        </hbox>
- *        <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom"/>
- *      </box>
- *    </box>
- *  </stack>
- *
- */
-
-
-/**
- * Constructor.
- *
- * @param aTarget The inspection target.
- * @param aInspector Inspector panel.
- * @param aToolbox The toolbox holding the inspector.
- */
-function LocalHighlighter(aTarget, aInspector, aToolbox)
-{
-  this.target = aTarget;
-  this.tab = aTarget.tab;
-  this.toolbox = aToolbox;
-  this.browser = this.tab.linkedBrowser;
-  this.chromeDoc = this.tab.ownerDocument;
-  this.chromeWin = this.chromeDoc.defaultView;
-  this.inspector = aInspector
-  this.layoutHelpers = new LayoutHelpers(this.browser.contentWindow);
-
-  EventEmitter.decorate(this);
-
-  this._init();
-}
-
-LocalHighlighter.prototype = {
-  get selection() {
-    return this.inspector.selection;
-  },
-
-  _init: function LocalHighlighter__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);
-
-    let stack = this.browser.parentNode;
-    this.win = this.browser.contentWindow;
-    this._highlighting = false;
-
-    this.highlighterContainer = this.chromeDoc.createElement("stack");
-    this.highlighterContainer.className = "highlighter-container";
-
-    this.outline = this.chromeDoc.createElement("box");
-    this.outline.className = "highlighter-outline";
-
-    let outlineContainer = this.chromeDoc.createElement("box");
-    outlineContainer.appendChild(this.outline);
-    outlineContainer.className = "highlighter-outline-container";
-
-    // The controlsBox will host the different interactive
-    // elements of the highlighter (buttons, toolbars, ...).
-    let controlsBox = this.chromeDoc.createElement("box");
-    controlsBox.className = "highlighter-controls";
-    this.highlighterContainer.appendChild(outlineContainer);
-    this.highlighterContainer.appendChild(controlsBox);
-
-    // Insert the highlighter right after the browser
-    stack.insertBefore(this.highlighterContainer, stack.childNodes[1]);
-
-    this.buildInfobar(controlsBox);
-
-    this.transitionDisabler = null;
-    this.pageEventsMuter = null;
-
-    this.selection.on("new-node", this.highlight);
-    this.selection.on("new-node", this.updateInfobar);
-    this.selection.on("pseudoclass", this.updateInfobar);
-    this.selection.on("attribute-changed", this.updateInfobar);
-
-    this.onToolSelected = function(event, id) {
-      if (id != "inspector") {
-        this.chromeWin.clearTimeout(this.pageEventsMuter);
-        this.detachMouseListeners();
-        this.disabled = true;
-        this.hide();
-      } else {
-        if (!this.locked) {
-          this.attachMouseListeners();
-        }
-        this.disabled = false;
-        this.show();
-      }
-    }.bind(this);
-    this.toolbox.on("select", this.onToolSelected);
-
-    this.hidden = true;
-    this.highlight();
-  },
-
-  /**
-   * Destroy the nodes. Remove listeners.
-   */
-  destroy: function LocalHighlighter_destroy()
-  {
-    this.inspectButton.removeEventListener("command", this.unlockAndFocus);
-    this.inspectButton = null;
-
-    this.toolbox.off("select", this.onToolSelected);
-    this.toolbox = null;
-
-    this.selection.off("new-node", this.highlight);
-    this.selection.off("new-node", this.updateInfobar);
-    this.selection.off("pseudoclass", this.updateInfobar);
-    this.selection.off("attribute-changed", this.updateInfobar);
-
-    this.detachMouseListeners();
-    this.detachPageListeners();
-
-    this.chromeWin.clearTimeout(this.transitionDisabler);
-    this.chromeWin.clearTimeout(this.pageEventsMuter);
-    this.boundCloseEventHandler = null;
-    this._contentRect = null;
-    this._highlightRect = null;
-    this._highlighting = false;
-    this.outline = null;
-    this.nodeInfo = null;
-    this.highlighterContainer.parentNode.removeChild(this.highlighterContainer);
-    this.highlighterContainer = null;
-    this.win = null
-    this.browser = null;
-    this.chromeDoc = null;
-    this.chromeWin = null;
-    this.tabbrowser = null;
-
-    this.emit("closed");
-  },
-
-  /**
-   * Show the outline, and select a node.
-   */
-  highlight: function LocalHighlighter_highlight()
-  {
-    if (this.selection.reason != "highlighter") {
-      this.lock();
-    }
-
-    let canHighlightNode = this.selection.isNode() &&
-                          this.selection.isConnected() &&
-                          this.selection.isElementNode();
-
-    if (canHighlightNode) {
-      if (this.selection.reason != "navigateaway") {
-        this.disabled = false;
-      }
-      this.show();
-      this.updateInfobar();
-      this.invalidateSize();
-      if (!this._highlighting &&
-          this.selection.reason != "highlighter") {
-        this.layoutHelpers.scrollIntoViewIfNeeded(this.selection.node);
-      }
-    } else {
-      this.disabled = true;
-      this.hide();
-    }
-  },
-
-  /**
-   * Update the highlighter size and position.
-   */
-  invalidateSize: function LocalHighlighter_invalidateSize()
-  {
-    let canHiglightNode = this.selection.isNode() &&
-                          this.selection.isConnected() &&
-                          this.selection.isElementNode();
-
-    if (!canHiglightNode)
-      return;
-
-    // The highlighter runs locally while the selection runs remotely,
-    // so we can't quite trust the selection's isConnected to protect us
-    // here, do the check manually.
-    if (!this.selection.node ||
-        !this.selection.node.ownerDocument ||
-        !this.selection.node.ownerDocument.defaultView) {
-      return;
-    }
-
-    let clientRect = this.selection.node.getBoundingClientRect();
-    let rect = this.layoutHelpers.getDirtyRect(this.selection.node);
-    this.highlightRectangle(rect);
-
-    this.moveInfobar();
-
-    if (this._highlighting) {
-      this.showOutline();
-      this.emit("highlighting");
-    }
-  },
-
-  /**
-   * Show the highlighter if it has been hidden.
-   */
-  show: function() {
-    if (!this.hidden || this.disabled) return;
-    this.showOutline();
-    this.showInfobar();
-    this.computeZoomFactor();
-    this.attachPageListeners();
-    this.invalidateSize();
-    this.hidden = false;
-  },
-
-  /**
-   * Hide the highlighter, the outline and the infobar.
-   */
-  hide: function() {
-    if (this.hidden) return;
-    this.hideOutline();
-    this.hideInfobar();
-    this.detachPageListeners();
-    this.hidden = true;
-  },
-
-  /**
-   * Is the highlighter visible?
-   *
-   * @return boolean
-   */
-  isHidden: function() {
-    return this.hidden;
-  },
-
-  /**
-   * Lock a node. Stops the inspection.
-   */
-  lock: function() {
-    if (this.locked === true) return;
-    this.outline.setAttribute("locked", "true");
-    this.nodeInfo.container.setAttribute("locked", "true");
-    this.detachMouseListeners();
-    this.locked = true;
-    this.emit("locked");
-  },
-
-  /**
-   * Start inspecting.
-   * Unlock the current node (if any), and select any node being hovered.
-   */
-  unlock: function() {
-    if (this.locked === false) return;
-    this.outline.removeAttribute("locked");
-    this.nodeInfo.container.removeAttribute("locked");
-    this.attachMouseListeners();
-    this.locked = false;
-    if (this.selection.isElementNode() &&
-        this.selection.isConnected()) {
-      this.showOutline();
-    }
-    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.
-   */
-  unlockAndFocus: function LocalHighlighter_unlockAndFocus() {
-    if (this.locked === false) return;
-    this.chromeWin.focus();
-    this.unlock();
-  },
-
-  /**
-   * Hide the infobar
-   */
-   hideInfobar: function LocalHighlighter_hideInfobar() {
-     this.nodeInfo.container.setAttribute("force-transitions", "true");
-     this.nodeInfo.container.setAttribute("hidden", "true");
-   },
-
-  /**
-   * Show the infobar
-   */
-   showInfobar: function LocalHighlighter_showInfobar() {
-     this.nodeInfo.container.removeAttribute("hidden");
-     this.moveInfobar();
-     this.nodeInfo.container.removeAttribute("force-transitions");
-   },
-
-  /**
-   * Hide the outline
-   */
-   hideOutline: function LocalHighlighter_hideOutline() {
-     this.outline.setAttribute("hidden", "true");
-   },
-
-  /**
-   * Show the outline
-   */
-   showOutline: function LocalHighlighter_showOutline() {
-     if (this._highlighting)
-       this.outline.removeAttribute("hidden");
-   },
-
-  /**
-   * Build the node Infobar.
-   *
-   * <box class="highlighter-nodeinfobar-container">
-   *   <box class="highlighter-nodeinfobar-arrow-top"/>
-   *   <hbox class="highlighter-nodeinfobar">
-   *     <toolbarbutton class="highlighter-nodeinfobar-button highlighter-nodeinfobar-inspectbutton"/>
-   *     <hbox class="highlighter-nodeinfobar-text">
-   *       <xhtml:span class="highlighter-nodeinfobar-tagname"/>
-   *       <xhtml:span class="highlighter-nodeinfobar-id"/>
-   *       <xhtml:span class="highlighter-nodeinfobar-classes"/>
-   *       <xhtml:span class="highlighter-nodeinfobar-pseudo-classes"/>
-   *     </hbox>
-   *     <toolbarbutton class="highlighter-nodeinfobar-button highlighter-nodeinfobar-menu"/>
-   *   </hbox>
-   *   <box class="highlighter-nodeinfobar-arrow-bottom"/>
-   * </box>
-   *
-   * @param nsIDOMElement aParent
-   *        The container of the infobar.
-   */
-  buildInfobar: function LocalHighlighter_buildInfobar(aParent)
-  {
-    let container = this.chromeDoc.createElement("box");
-    container.className = "highlighter-nodeinfobar-container";
-    container.setAttribute("position", "top");
-    container.setAttribute("disabled", "true");
-
-    let nodeInfobar = this.chromeDoc.createElement("hbox");
-    nodeInfobar.className = "highlighter-nodeinfobar";
-
-    let arrowBoxTop = this.chromeDoc.createElement("box");
-    arrowBoxTop.className = "highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-top";
-
-    let arrowBoxBottom = this.chromeDoc.createElement("box");
-    arrowBoxBottom.className = "highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom";
-
-    let tagNameLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    tagNameLabel.className = "highlighter-nodeinfobar-tagname";
-
-    let idLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    idLabel.className = "highlighter-nodeinfobar-id";
-
-    let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    classesBox.className = "highlighter-nodeinfobar-classes";
-
-    let pseudoClassesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
-    pseudoClassesBox.className = "highlighter-nodeinfobar-pseudo-classes";
-
-    // Add some content to force a better boundingClientRect down below.
-    pseudoClassesBox.textContent = "&nbsp;";
-
-    // Create buttons
-
-    this.inspectButton = this.chromeDoc.createElement("toolbarbutton");
-    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.toggleLockState);
-
-    let nodemenu = this.chromeDoc.createElement("toolbarbutton");
-    nodemenu.setAttribute("type", "menu");
-    nodemenu.className = "highlighter-nodeinfobar-button highlighter-nodeinfobar-menu"
-    nodemenu.setAttribute("tooltiptext",
-                          this.strings.GetStringFromName("nodeMenu.tooltiptext"));
-
-    nodemenu.onclick = function() {
-      this.inspector.showNodeMenu(nodemenu, "after_start");
-    }.bind(this);
-
-    // <hbox class="highlighter-nodeinfobar-text"/>
-    let texthbox = this.chromeDoc.createElement("hbox");
-    texthbox.className = "highlighter-nodeinfobar-text";
-    texthbox.setAttribute("align", "center");
-    texthbox.setAttribute("flex", "1");
-
-    texthbox.addEventListener("mousedown", function(aEvent) {
-      // On click, show the node:
-      if (this.selection.isElementNode()) {
-        this.layoutHelpers.scrollIntoViewIfNeeded(this.selection.node);
-      }
-    }.bind(this), true);
-
-    texthbox.appendChild(tagNameLabel);
-    texthbox.appendChild(idLabel);
-    texthbox.appendChild(classesBox);
-    texthbox.appendChild(pseudoClassesBox);
-
-    nodeInfobar.appendChild(this.inspectButton);
-    nodeInfobar.appendChild(texthbox);
-    nodeInfobar.appendChild(nodemenu);
-
-    container.appendChild(arrowBoxTop);
-    container.appendChild(nodeInfobar);
-    container.appendChild(arrowBoxBottom);
-
-    aParent.appendChild(container);
-
-    let barHeight = container.getBoundingClientRect().height;
-
-    this.nodeInfo = {
-      tagNameLabel: tagNameLabel,
-      idLabel: idLabel,
-      classesBox: classesBox,
-      pseudoClassesBox: pseudoClassesBox,
-      container: container,
-      barHeight: barHeight,
-    };
-  },
-
-  /**
-   * Highlight a rectangular region.
-   *
-   * @param object aRect
-   *        The rectangle region to highlight.
-   * @returns boolean
-   *          True if the rectangle was highlighted, false otherwise.
-   */
-  highlightRectangle: function LocalHighlighter_highlightRectangle(aRect)
-  {
-    if (!aRect) {
-      this.unhighlight();
-      return;
-    }
-
-    let oldRect = this._contentRect;
-
-    if (oldRect && aRect.top == oldRect.top && aRect.left == oldRect.left &&
-        aRect.width == oldRect.width && aRect.height == oldRect.height) {
-      return; // same rectangle
-    }
-
-    let aRectScaled = this.layoutHelpers.getZoomedRect(this.win, aRect);
-
-    if (aRectScaled.left >= 0 && aRectScaled.top >= 0 &&
-        aRectScaled.width > 0 && aRectScaled.height > 0) {
-
-      this.showOutline();
-
-      // The bottom div and the right div are flexibles (flex=1).
-      // We don't need to resize them.
-      let top = "top:" + aRectScaled.top + "px;";
-      let left = "left:" + aRectScaled.left + "px;";
-      let width = "width:" + aRectScaled.width + "px;";
-      let height = "height:" + aRectScaled.height + "px;";
-      this.outline.setAttribute("style", top + left + width + height);
-
-      this._highlighting = true;
-    } else {
-      this.unhighlight();
-    }
-
-    this._contentRect = aRect; // save orig (non-scaled) rect
-    this._highlightRect = aRectScaled; // and save the scaled rect.
-
-    return;
-  },
-
-  /**
-   * Clear the highlighter surface.
-   */
-  unhighlight: function LocalHighlighter_unhighlight()
-  {
-    this._highlighting = false;
-    this.hideOutline();
-  },
-
-  /**
-   * Update node information (tagName#id.class)
-   */
-  updateInfobar: function LocalHighlighter_updateInfobar()
-  {
-    if (!this.selection.isElementNode()) {
-      this.nodeInfo.tagNameLabel.textContent = "";
-      this.nodeInfo.idLabel.textContent = "";
-      this.nodeInfo.classesBox.textContent = "";
-      this.nodeInfo.pseudoClassesBox.textContent = "";
-      return;
-    }
-
-    let node = this.selection.node;
-
-    // Tag name
-    this.nodeInfo.tagNameLabel.textContent = node.tagName;
-
-    // ID
-    this.nodeInfo.idLabel.textContent = node.id ? "#" + node.id : "";
-
-    // Classes
-    let classes = this.nodeInfo.classesBox;
-
-    classes.textContent = node.classList.length ?
-                            "." + Array.join(node.classList, ".") : "";
-
-    // Pseudo-classes
-    let pseudos = PSEUDO_CLASSES.filter(function(pseudo) {
-      return DOMUtils.hasPseudoClassLock(node, pseudo);
-    }, this);
-
-    let pseudoBox = this.nodeInfo.pseudoClassesBox;
-    pseudoBox.textContent = pseudos.join("");
-  },
-
-  /**
-   * Move the Infobar to the right place in the highlighter.
-   */
-  moveInfobar: function LocalHighlighter_moveInfobar()
-  {
-    if (this._highlightRect) {
-      let winHeight = this.win.innerHeight * this.zoom;
-      let winWidth = this.win.innerWidth * this.zoom;
-
-      let rect = {top: this._highlightRect.top,
-                  left: this._highlightRect.left,
-                  width: this._highlightRect.width,
-                  height: this._highlightRect.height};
-
-      rect.top = Math.max(rect.top, 0);
-      rect.left = Math.max(rect.left, 0);
-      rect.width = Math.max(rect.width, 0);
-      rect.height = Math.max(rect.height, 0);
-
-      rect.top = Math.min(rect.top, winHeight);
-      rect.left = Math.min(rect.left, winWidth);
-
-      this.nodeInfo.container.removeAttribute("disabled");
-      // Can the bar be above the node?
-      if (rect.top < this.nodeInfo.barHeight) {
-        // No. Can we move the toolbar under the node?
-        if (rect.top + rect.height +
-            this.nodeInfo.barHeight > winHeight) {
-          // No. Let's move it inside.
-          this.nodeInfo.container.style.top = rect.top + "px";
-          this.nodeInfo.container.setAttribute("position", "overlap");
-        } else {
-          // Yes. Let's move it under the node.
-          this.nodeInfo.container.style.top = rect.top + rect.height + "px";
-          this.nodeInfo.container.setAttribute("position", "bottom");
-        }
-      } else {
-        // Yes. Let's move it on top of the node.
-        this.nodeInfo.container.style.top =
-          rect.top - this.nodeInfo.barHeight + "px";
-        this.nodeInfo.container.setAttribute("position", "top");
-      }
-
-      let barWidth = this.nodeInfo.container.getBoundingClientRect().width;
-      let left = rect.left + rect.width / 2 - barWidth / 2;
-
-      // Make sure the whole infobar is visible
-      if (left < 0) {
-        left = 0;
-        this.nodeInfo.container.setAttribute("hide-arrow", "true");
-      } else {
-        if (left + barWidth > winWidth) {
-          left = winWidth - barWidth;
-          this.nodeInfo.container.setAttribute("hide-arrow", "true");
-        } else {
-          this.nodeInfo.container.removeAttribute("hide-arrow");
-        }
-      }
-      this.nodeInfo.container.style.left = left + "px";
-    } else {
-      this.nodeInfo.container.style.left = "0";
-      this.nodeInfo.container.style.top = "0";
-      this.nodeInfo.container.setAttribute("position", "top");
-      this.nodeInfo.container.setAttribute("hide-arrow", "true");
-    }
-  },
-
-  /**
-   * Store page zoom factor.
-   */
-  computeZoomFactor: function LocalHighlighter_computeZoomFactor() {
-    this.zoom =
-      this.win.QueryInterface(Ci.nsIInterfaceRequestor)
-      .getInterface(Ci.nsIDOMWindowUtils)
-      .fullZoom;
-  },
-
-  /////////////////////////////////////////////////////////////////////////
-  //// Event Handling
-
-  attachMouseListeners: function LocalHighlighter_attachMouseListeners()
-  {
-    this.browser.addEventListener("mousemove", this, true);
-    this.browser.addEventListener("click", this, true);
-    this.browser.addEventListener("dblclick", this, true);
-    this.browser.addEventListener("mousedown", this, true);
-    this.browser.addEventListener("mouseup", this, true);
-  },
-
-  detachMouseListeners: function LocalHighlighter_detachMouseListeners()
-  {
-    this.browser.removeEventListener("mousemove", this, true);
-    this.browser.removeEventListener("click", this, true);
-    this.browser.removeEventListener("dblclick", this, true);
-    this.browser.removeEventListener("mousedown", this, true);
-    this.browser.removeEventListener("mouseup", this, true);
-  },
-
-  attachPageListeners: function LocalHighlighter_attachPageListeners()
-  {
-    this.browser.addEventListener("resize", this, true);
-    this.browser.addEventListener("scroll", this, true);
-    this.browser.addEventListener("MozAfterPaint", this, true);
-  },
-
-  detachPageListeners: function LocalHighlighter_detachPageListeners()
-  {
-    this.browser.removeEventListener("resize", this, true);
-    this.browser.removeEventListener("scroll", this, true);
-    this.browser.removeEventListener("MozAfterPaint", this, true);
-  },
-
-  /**
-   * Generic event handler.
-   *
-   * @param nsIDOMEvent aEvent
-   *        The DOM event object.
-   */
-  handleEvent: function LocalHighlighter_handleEvent(aEvent)
-  {
-    switch (aEvent.type) {
-      case "click":
-        this.handleClick(aEvent);
-        break;
-      case "mousemove":
-        this.brieflyIgnorePageEvents();
-        this.handleMouseMove(aEvent);
-        break;
-      case "resize":
-        this.computeZoomFactor();
-        break;
-      case "MozAfterPaint":
-      case "scroll":
-        this.brieflyDisableTransitions();
-        this.invalidateSize();
-        break;
-      case "dblclick":
-      case "mousedown":
-      case "mouseup":
-        aEvent.stopPropagation();
-        aEvent.preventDefault();
-        break;
-    }
-  },
-
-  /**
-   * Disable the CSS transitions for a short time to avoid laggy animations
-   * during scrolling or resizing.
-   */
-  brieflyDisableTransitions: function LocalHighlighter_brieflyDisableTransitions()
-  {
-    if (this.transitionDisabler) {
-      this.chromeWin.clearTimeout(this.transitionDisabler);
-    } else {
-      this.outline.setAttribute("disable-transitions", "true");
-      this.nodeInfo.container.setAttribute("disable-transitions", "true");
-    }
-    this.transitionDisabler =
-      this.chromeWin.setTimeout(function() {
-        this.outline.removeAttribute("disable-transitions");
-        this.nodeInfo.container.removeAttribute("disable-transitions");
-        this.transitionDisabler = null;
-      }.bind(this), 500);
-  },
-
-  /**
-   * Don't listen to page events while inspecting with the mouse.
-   */
-  brieflyIgnorePageEvents: function LocalHighlighter_brieflyIgnorePageEvents()
-  {
-    // The goal is to keep smooth animations while inspecting.
-    // CSS Transitions might be interrupted because of a MozAfterPaint
-    // event that would triger an invalidateSize() call.
-    // So we don't listen to events that would trigger an invalidateSize()
-    // call.
-    //
-    // Side effect, zoom levels are not updated during this short period.
-    // It's very unlikely this would happen, but just in case, we call
-    // computeZoomFactor() when reattaching the events.
-    if (this.pageEventsMuter) {
-      this.chromeWin.clearTimeout(this.pageEventsMuter);
-    } else {
-      this.detachPageListeners();
-    }
-    this.pageEventsMuter =
-      this.chromeWin.setTimeout(function() {
-        this.attachPageListeners();
-        // Just in case the zoom level changed while ignoring the paint events
-        this.computeZoomFactor();
-        this.pageEventsMuter = null;
-      }.bind(this), 500);
-  },
-
-  /**
-   * Handle clicks.
-   *
-   * @param nsIDOMEvent aEvent
-   *        The DOM event.
-   */
-  handleClick: function LocalHighlighter_handleClick(aEvent)
-  {
-    // Stop inspection when the user clicks on a node.
-    if (aEvent.button == 0) {
-      this.lock();
-      let node = this.selection.node;
-      this.selection.setNode(node, "highlighter-lock");
-      aEvent.preventDefault();
-      aEvent.stopPropagation();
-    }
-  },
-
-  /**
-   * Handle mousemoves in panel.
-   *
-   * @param nsiDOMEvent aEvent
-   *        The MouseEvent triggering the method.
-   */
-  handleMouseMove: function LocalHighlighter_handleMouseMove(aEvent)
-  {
-    let doc = aEvent.target.ownerDocument;
-
-    // This should never happen, but just in case, we don't let the
-    // highlighter highlight browser nodes.
-    if (doc && doc != this.chromeDoc) {
-      let element = this.layoutHelpers.getElementFromPoint(aEvent.target.ownerDocument,
-        aEvent.clientX, aEvent.clientY);
-      if (element && element != this.selection.node) {
-        this.selection.setNode(element, "highlighter");
-      }
-    }
-  },
-};
-
-// BasicHighlighter. Doesn't implement any fancy features. Just change
-// the outline of the selected node. Works with remote target.
-
-function BasicHighlighter(aTarget, aInspector)
-{
-  this.walker = aInspector.walker;
-  this.selection = aInspector.selection;
-  this.highlight = this.highlight.bind(this);
-  this.selection.on("new-node-front", this.highlight);
-  EventEmitter.decorate(this);
-  this.locked = true;
-}
-
-BasicHighlighter.prototype = {
-  destroy: function() {
-    this.walker.highlight(null);
-    this.selection.off("new-node-front", this.highlight);
-    this.walker = null;
-    this.selection = null;
-  },
-  toggleLockState: function() {
-    this.locked = !this.locked;
-    if (this.locked) {
-      this.walker.cancelPick();
-    } else {
-      this.emit("unlocked");
-      this.walker.pick().then(
-        (node) => this._onPick(node),
-        () => this._onPick(null)
-      );
-    }
-  },
-  highlight: function() {
-    this.walker.highlight(this.selection.nodeFront);
-  },
-  _onPick: function(node) {
-    if (node) {
-      this.selection.setNodeFront(node);
-    }
-    this.locked = true;
-    this.emit("locked");
-  },
-  hide: function() {},
-  show: function() {},
-}
-
-///////////////////////////////////////////////////////////////////////////
-
-XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
-  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils)
-});
-
-XPCOMUtils.defineLazyGetter(LocalHighlighter.prototype, "strings", function () {
-    return Services.strings.createBundle(
-            "chrome://browser/locale/devtools/inspector.properties");
-});

--- a/browser/devtools/inspector/inspector-panel.js
+++ b/browser/devtools/inspector/inspector-panel.js
@@ -8,30 +8,26 @@ const {Cc, Ci, Cu, Cr} = require("chrome
 
 Cu.import("resource://gre/modules/Services.jsm");
 
 let promise = require("sdk/core/promise");
 let EventEmitter = require("devtools/shared/event-emitter");
 let {CssLogic} = require("devtools/styleinspector/css-logic");
 
 loader.lazyGetter(this, "MarkupView", () => require("devtools/markupview/markup-view").MarkupView);
-loader.lazyGetter(this, "Selection", () => require("devtools/inspector/selection").Selection);
 loader.lazyGetter(this, "HTMLBreadcrumbs", () => require("devtools/inspector/breadcrumbs").HTMLBreadcrumbs);
-loader.lazyGetter(this, "Highlighter", () => require("devtools/inspector/highlighter").Highlighter);
 loader.lazyGetter(this, "ToolSidebar", () => require("devtools/framework/sidebar").ToolSidebar);
 loader.lazyGetter(this, "SelectorSearch", () => require("devtools/inspector/selector-search").SelectorSearch);
-loader.lazyGetter(this, "InspectorFront", () => require("devtools/server/actors/inspector").InspectorFront);
 
 const LAYOUT_CHANGE_TIMER = 250;
 
 /**
  * Represents an open instance of the Inspector for a tab.
- * The inspector controls the highlighter, the breadcrumbs,
- * the markup view, and the sidebar (computed view, rule view
- * and layout view).
+ * The inspector controls the breadcrumbs, the markup view, and the sidebar
+ * (computed view, rule view, font view and layout view).
  *
  * Events:
  * - ready
  *      Fired when the inspector panel is opened for the first time and ready to
  *      use
  * - new-root
  *      Fired after a new root (navigation to a new page) event was fired by
  *      the walker, and taken into account by the inspector (after the markup
@@ -72,51 +68,57 @@ function InspectorPanel(iframeWindow, to
 exports.InspectorPanel = InspectorPanel;
 
 InspectorPanel.prototype = {
   /**
    * open is effectively an asynchronous constructor
    */
   open: function InspectorPanel_open() {
     return this.target.makeRemote().then(() => {
-      return this._getWalker();
+      return this._getPageStyle();
     }).then(() => {
       return this._getDefaultNodeForSelection();
     }).then(defaultSelection => {
       return this._deferredOpen(defaultSelection);
     }).then(null, console.error);
   },
 
+  get toolbox() {
+    return this._toolbox;
+  },
+
   get inspector() {
-    if (!this._target.form) {
-      throw new Error("Target.inspector requires an initialized remote actor.");
-    }
-    if (!this._inspector) {
-      this._inspector = InspectorFront(this._target.client, this._target.form);
-    }
-    return this._inspector;
+    return this._toolbox.inspector;
+  },
+
+  get walker() {
+    return this._toolbox.walker;
+  },
+
+  get selection() {
+    return this._toolbox.selection;
+  },
+
+  get isOuterHTMLEditable() {
+    return this._target.client.traits.editOuterHTML;
   },
 
   _deferredOpen: function(defaultSelection) {
     let deferred = promise.defer();
 
-    this.outerHTMLEditable = this._target.client.traits.editOuterHTML;
-
     this.onNewRoot = this.onNewRoot.bind(this);
     this.walker.on("new-root", this.onNewRoot);
 
     this.nodemenu = this.panelDoc.getElementById("inspector-node-popup");
     this.lastNodemenuItem = this.nodemenu.lastChild;
     this._setupNodeMenu = this._setupNodeMenu.bind(this);
     this._resetNodeMenu = this._resetNodeMenu.bind(this);
     this.nodemenu.addEventListener("popupshowing", this._setupNodeMenu, true);
     this.nodemenu.addEventListener("popuphiding", this._resetNodeMenu, true);
 
-    // Create an empty selection
-    this._selection = new Selection(this.walker);
     this.onNewSelection = this.onNewSelection.bind(this);
     this.selection.on("new-node-front", this.onNewSelection);
     this.onBeforeNewSelection = this.onBeforeNewSelection.bind(this);
     this.selection.on("before-new-node-front", this.onBeforeNewSelection);
     this.onDetached = this.onDetached.bind(this);
     this.selection.on("detached-front", this.onDetached);
 
     this.breadcrumbs = new HTMLBreadcrumbs(this);
@@ -149,37 +151,24 @@ InspectorPanel.prototype = {
 
       }.bind(this);
       this.target.on("thread-paused", this.updateDebuggerPausedWarning);
       this.target.on("thread-resumed", this.updateDebuggerPausedWarning);
       this._toolbox.on("select", this.updateDebuggerPausedWarning);
       this.updateDebuggerPausedWarning();
     }
 
-    this.highlighter = new Highlighter(this.target, this, this._toolbox);
-    let button = this.panelDoc.getElementById("inspector-inspect-toolbutton");
-    this.onLockStateChanged = function() {
-      if (this.highlighter.locked) {
-        button.removeAttribute("checked");
-        this._toolbox.raise();
-      } else {
-        button.setAttribute("checked", "true");
-      }
-    }.bind(this);
-    this.highlighter.on("locked", this.onLockStateChanged);
-    this.highlighter.on("unlocked", this.onLockStateChanged);
-
     this._initMarkup();
     this.isReady = false;
 
     this.once("markuploaded", function() {
       this.isReady = true;
 
       // All the components are initialized. Let's select a node.
-      this._selection.setNodeFront(defaultSelection);
+      this.selection.setNodeFront(defaultSelection, "inspector-open");
 
       this.markup.expandNode(this.selection.nodeFront);
 
       this.emit("ready");
       deferred.resolve(this);
     }.bind(this));
 
     this.setupSearchBox();
@@ -190,21 +179,18 @@ InspectorPanel.prototype = {
 
   _onBeforeNavigate: function() {
     this._defaultNode = null;
     this.selection.setNodeFront(null);
     this._destroyMarkup();
     this.isDirty = false;
   },
 
-  _getWalker: function() {
-    return this.inspector.getWalker().then(walker => {
-      this.walker = walker;
-      return this.inspector.getPageStyle();
-    }).then(pageStyle => {
+  _getPageStyle: function() {
+    return this._toolbox.inspector.getPageStyle().then(pageStyle => {
       this.pageStyle = pageStyle;
     });
   },
 
   /**
    * Return a promise that will resolve to the default node for selection.
    */
   _getDefaultNodeForSelection: function() {
@@ -234,23 +220,16 @@ InspectorPanel.prototype = {
         promise.reject(null);
       }
       this._defaultNode = node;
       return node;
     });
   },
 
   /**
-   * Selection object (read only)
-   */
-  get selection() {
-    return this._selection;
-  },
-
-  /**
    * Target getter.
    */
   get target() {
     return this._target;
   },
 
   /**
    * Target setter.
@@ -309,17 +288,16 @@ InspectorPanel.prototype = {
 
     let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
 
     this._setDefaultSidebar = function(event, toolId) {
       Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
     }.bind(this);
 
     this.sidebar.on("select", this._setDefaultSidebar);
-    this.toggleHighlighter = this.toggleHighlighter.bind(this);
 
     this.sidebar.addTab("ruleview",
                         "chrome://browser/content/devtools/cssruleview.xhtml",
                         "ruleview" == defaultTab);
 
     this.sidebar.addTab("computedview",
                         "chrome://browser/content/devtools/computedview.xhtml",
                         "computedview" == defaultTab);
@@ -330,40 +308,35 @@ InspectorPanel.prototype = {
                           "fontinspector" == defaultTab);
     }
 
     this.sidebar.addTab("layoutview",
                         "chrome://browser/content/devtools/layoutview/view.xhtml",
                         "layoutview" == defaultTab);
 
     let ruleViewTab = this.sidebar.getTab("ruleview");
-    ruleViewTab.addEventListener("mouseover", this.toggleHighlighter, false);
-    ruleViewTab.addEventListener("mouseout", this.toggleHighlighter, false);
 
     this.sidebar.show();
   },
 
   /**
    * Reset the inspector on new root mutation.
    */
   onNewRoot: function InspectorPanel_onNewRoot() {
     this._defaultNode = null;
     this.selection.setNodeFront(null);
     this._destroyMarkup();
     this.isDirty = false;
 
     this._getDefaultNodeForSelection().then(defaultNode => {
-      if (this._destroyPromise) {
-        return;
-      }
       this.selection.setNodeFront(defaultNode, "navigateaway");
 
       this._initMarkup();
       this.once("markuploaded", () => {
-        if (this._destroyPromise) {
+        if (!this.markup) {
           return;
         }
         this.markup.expandNode(this.selection.nodeFront);
         this.setupSearchBox();
         this.emit("new-root");
       });
     });
   },
@@ -394,16 +367,20 @@ InspectorPanel.prototype = {
       return null;
     }
   },
 
   /**
    * When a new node is selected.
    */
   onNewSelection: function InspectorPanel_onNewSelection(event, value, reason) {
+    if (reason === "selection-destroy") {
+      return;
+    }
+
     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
@@ -495,89 +472,66 @@ InspectorPanel.prototype = {
     this.breadcrumbs.cutAfter(this.breadcrumbs.indexOf(parentNode));
     this.selection.setNodeFront(parentNode ? parentNode : this._defaultNode, "detached");
   },
 
   /**
    * Destroy the inspector.
    */
   destroy: function InspectorPanel__destroy() {
-    if (this._destroyPromise) {
-      return this._destroyPromise;
+    if (this._panelDestroyer) {
+      return this._panelDestroyer.promise;
     }
-
-    if (this.highlighter) {
-      this.highlighter.off("locked", this.onLockStateChanged);
-      this.highlighter.off("unlocked", this.onLockStateChanged);
-      this.highlighter.destroy();
-    }
-
-    delete this.onLockStateChanged;
+    this._panelDestroyer = promise.defer();
 
     if (this.walker) {
       this.walker.off("new-root", this.onNewRoot);
-      this._destroyPromise = this.walker.release()
-        .then(() => this._inspector.destroy(),
-              (e) => {
-                console.error("Walker.release() failed: " + e);
-                return this._inspector.destroy();
-              })
-        .then(() => {
-          this._inspector = null;
-        }, console.error);
-
-      delete this.walker;
-      delete this.pageStyle;
-    } else {
-      this._destroyPromise = promise.resolve(null);
+      this.pageStyle = null;
     }
 
     this.cancelUpdate();
     this.cancelLayoutChange();
 
     if (this.browser) {
       this.browser.removeEventListener("resize", this.scheduleLayoutChange, true);
       this.browser = null;
     }
 
     this.target.off("will-navigate", this._onBeforeNavigate);
 
     this.target.off("thread-paused", this.updateDebuggerPausedWarning);
     this.target.off("thread-resumed", this.updateDebuggerPausedWarning);
     this._toolbox.off("select", this.updateDebuggerPausedWarning);
 
-    this._toolbox = null;
-
     this.sidebar.off("select", this._setDefaultSidebar);
     this.sidebar.destroy();
     this.sidebar = null;
 
     this.nodemenu.removeEventListener("popupshowing", this._setupNodeMenu, true);
     this.nodemenu.removeEventListener("popuphiding", this._resetNodeMenu, true);
     this.breadcrumbs.destroy();
     this.searchSuggestions.destroy();
-    delete this.searchBox;
+    this.searchBox = null;
     this.selection.off("new-node-front", this.onNewSelection);
     this.selection.off("before-new-node", this.onBeforeNewSelection);
     this.selection.off("before-new-node-front", this.onBeforeNewSelection);
     this.selection.off("detached-front", this.onDetached);
     this._destroyMarkup();
-    this._selection.destroy();
-    this._selection = null;
     this.panelWin.inspector = null;
     this.target = null;
     this.panelDoc = null;
     this.panelWin = null;
     this.breadcrumbs = null;
     this.searchSuggestions = null;
     this.lastNodemenuItem = null;
     this.nodemenu = null;
-    this.highlighter = null;
+    this._toolbox = null;
 
-    return this._destroyPromise;
+    this._panelDestroyer.resolve(null);
+    return this._panelDestroyer.promise;
   },
 
   /**
    * Show the node menu.
    */
   showNodeMenu: function InspectorPanel_showNodeMenu(aButton, aPosition, aExtraItems) {
     if (aExtraItems) {
       for (let item of aExtraItems) {
@@ -628,17 +582,17 @@ InspectorPanel.prototype = {
       copyOuterHTML.removeAttribute("disabled");
     } else {
       unique.setAttribute("disabled", "true");
       copyInnerHTML.setAttribute("disabled", "true");
       copyOuterHTML.setAttribute("disabled", "true");
     }
 
     let editHTML = this.panelDoc.getElementById("node-menu-edithtml");
-    if (this.outerHTMLEditable && selectionIsElement) {
+    if (this.isOuterHTMLEditable && selectionIsElement) {
       editHTML.removeAttribute("disabled");
     } else {
       editHTML.setAttribute("disabled", "true");
     }
   },
 
   _resetNodeMenu: function InspectorPanel_resetNodeMenu() {
     // Remove any extra items
@@ -681,74 +635,58 @@ InspectorPanel.prototype = {
     this.markup = new MarkupView(this, this._markupFrame, controllerWindow);
 
     this.emit("markuploaded");
   },
 
   _destroyMarkup: function InspectorPanel__destroyMarkup() {
     if (this._boundMarkupFrameLoad) {
       this._markupFrame.removeEventListener("load", this._boundMarkupFrameLoad, true);
-      delete this._boundMarkupFrameLoad;
+      this._boundMarkupFrameLoad = null;
     }
 
     if (this.markup) {
       this.markup.destroy();
-      delete this.markup;
+      this.markup = null;
     }
 
     if (this._markupFrame) {
       this._markupFrame.parentNode.removeChild(this._markupFrame);
-      delete this._markupFrame;
+      this._markupFrame = null;
     }
 
     this._markupBox = null;
   },
 
   /**
    * Toggle a pseudo class.
    */
   togglePseudoClass: function InspectorPanel_togglePseudoClass(aPseudo) {
     if (this.selection.isElementNode()) {
       let node = this.selection.nodeFront;
       if (node.hasPseudoClassLock(aPseudo)) {
-        return this.walker.removePseudoClassLock(node, aPseudo, { parents: true });
+        return this.walker.removePseudoClassLock(node, aPseudo, {parents: true});
       }
 
       let hierarchical = aPseudo == ":hover" || aPseudo == ":active";
-      return this.walker.addPseudoClassLock(node, aPseudo, { parents: hierarchical });
+      return this.walker.addPseudoClassLock(node, aPseudo, {parents: hierarchical});
     }
   },
 
   /**
    * Clear any pseudo-class locks applied to the current hierarchy.
    */
   clearPseudoClasses: function InspectorPanel_clearPseudoClasses() {
     if (!this.walker) {
       return;
     }
     return this.walker.clearPseudoClassLocks().then(null, console.error);
   },
 
   /**
-   * Toggle the highlighter when ruleview is hovered.
-   */
-  toggleHighlighter: function InspectorPanel_toggleHighlighter(event)
-  {
-    if (!this.highlighter) {
-      return;
-    }
-    if (event.type == "mouseover") {
-      this.highlighter.hide();
-    }
-    else if (event.type == "mouseout") {
-      this.highlighter.show();
-    }
-  },
-
-  /**
    * Edit the outerHTML of the selected Node.
    */
   editHTML: function InspectorPanel_editHTML()
   {
     if (!this.selection.isNode()) {
       return;
     }
     if (this.markup) {

--- a/browser/devtools/inspector/inspector.xul
+++ b/browser/devtools/inspector/inspector.xul
@@ -70,20 +70,16 @@
     </menupopup>
   </popupset>
 
   <box flex="1" class="devtools-responsive-container theme-body">
     <vbox flex="1">
       <toolbar id="inspector-toolbar"
         class="devtools-toolbar"
         nowindowdrag="true">
-        <toolbarbutton id="inspector-inspect-toolbutton"
-          tooltiptext="&inspector.selectButton.tooltip;"
-          class="devtools-toolbarbutton"
-          oncommand="inspector.highlighter.toggleLockState()"/>
         <arrowscrollbox id="inspector-breadcrumbs"
           class="breadcrumbs-widget-container"
           flex="1" orient="horizontal"
           clicktoscroll="true"/>
         <textbox id="inspector-searchbox"
           type="search"
           timeout="50"
           class="devtools-searchinput"

deleted file mode 100644
--- a/browser/devtools/inspector/selection.js
+++ /dev/null
@@ -1,296 +0,0 @@
-/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ft=javascript 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/. */
-
-"use strict";
-
-const {Cu, Ci} = require("chrome");
-let EventEmitter = require("devtools/shared/event-emitter");
-
-/**
- * API
- *
- *   new Selection(walker=null, node=null, track={attributes,detached});
- *   destroy()
- *   node (readonly)
- *   setNode(node, origin="unknown")
- *
- * Helpers:
- *
- *   window
- *   document
- *   isRoot()
- *   isNode()
- *   isHTMLNode()
- *
- * Check the nature of the node:
- *
- *   isElementNode()
- *   isAttributeNode()
- *   isTextNode()
- *   isCDATANode()
- *   isEntityRefNode()
- *   isEntityNode()
- *   isProcessingInstructionNode()
- *   isCommentNode()
- *   isDocumentNode()
- *   isDocumentTypeNode()
- *   isDocumentFragmentNode()
- *   isNotationNode()
- *
- * Events:
- *   "new-node" when the inner node changed
- *   "before-new-node" when the inner node is set to change
- *   "attribute-changed" when an attribute is changed (only if tracked)
- *   "detached" when the node (or one of its parents) is removed from the document (only if tracked)
- *   "reparented" when the node (or one of its parents) is moved under a different node (only if tracked)
- */
-
-/**
- * A Selection object. Hold a reference to a node.
- * Includes some helpers, fire some helpful events.
- *
- * @param node Inner node.
- *    Can be null. Can be (un)set in the future via the "node" property;
- * @param trackAttribute Tell if events should be fired when the attributes of
- *    the node change.
- *
- */
-function Selection(walker, node=null, track={attributes:true,detached:true}) {
-  EventEmitter.decorate(this);
-
-  this._onMutations = this._onMutations.bind(this);
-  this.track = track;
-  this.setWalker(walker);
-  this.setNode(node);
-}
-
-exports.Selection = Selection;
-
-Selection.prototype = {
-  _walker: null,
-  _node: null,
-
-  _onMutations: function(mutations) {
-    let attributeChange = false;
-    let pseudoChange = false;
-    let detached = false;
-    let parentNode = null;
-
-    for (let m of mutations) {
-      if (!attributeChange && m.type == "attributes") {
-        attributeChange = true;
-      }
-      if (m.type == "childList") {
-        if (!detached && !this.isConnected()) {
-          if (this.isNode()) {
-            parentNode = m.target;
-          }
-          detached = true;
-        }
-      }
-      if (m.type == "pseudoClassLock") {
-        pseudoChange = true;
-      }
-    }
-
-    // Fire our events depending on what changed in the mutations array
-    if (attributeChange) {
-      this.emit("attribute-changed");
-    }
-    if (pseudoChange) {
-      this.emit("pseudoclass");
-    }
-    if (detached) {
-      let rawNode = null;
-      if (parentNode && parentNode.isLocal_toBeDeprecated()) {
-        rawNode = parentNode.rawNode();
-      }
-
-      this.emit("detached", rawNode, null);
-      this.emit("detached-front", parentNode);
-    }
-  },
-
-  destroy: function() {
-    this.setNode(null);
-    this.setWalker(null);
-  },
-
-  setWalker: function(walker) {
-    if (this._walker) {
-      this._walker.off("mutations", this._onMutations);
-    }
-    this._walker = walker;
-    if (this._walker) {
-      this._walker.on("mutations", this._onMutations);
-    }
-  },
-
-  // Not remote-safe
-  setNode: function(value, reason="unknown") {
-    if (value) {
-      value = this._walker.frontForRawNode(value);
-    }
-    this.setNodeFront(value, reason);
-  },
-
-  // Not remote-safe
-  get node() {
-    return this._node;
-  },
-
-  // Not remote-safe
-  get window() {
-    if (this.isNode()) {
-      return this.node.ownerDocument.defaultView;
-    }
-    return null;
-  },
-
-  // Not remote-safe
-  get document() {
-    if (this.isNode()) {
-      return this.node.ownerDocument;
-    }
-    return null;
-  },
-
-  setNodeFront: function(value, reason="unknown") {
-    this.reason = reason;
-    if (value !== this._nodeFront) {
-      let rawValue = null;
-      if (value && value.isLocal_toBeDeprecated()) {
-        rawValue = value.rawNode();
-      }
-      this.emit("before-new-node", rawValue, reason);
-      this.emit("before-new-node-front", value, reason);
-      let previousNode = this._node;
-      let previousFront = this._nodeFront;
-      this._node = rawValue;
-      this._nodeFront = value;
-      this.emit("new-node", previousNode, this.reason);
-      this.emit("new-node-front", value, this.reason);
-    }
-  },
-
-  get documentFront() {
-    return this._walker.document(this._nodeFront);
-  },
-
-  get nodeFront() {
-    return this._nodeFront;
-  },
-
-  isRoot: function() {
-    return this.isNode() &&
-           this.isConnected() &&
-           this._nodeFront.isDocumentElement;
-  },
-
-  isNode: function() {
-    if (!this._nodeFront) {
-      return false;
-    }
-
-    // As long as tools are still accessing node.rawNode(),
-    // this needs to stay here.
-    if (this._node && Cu.isDeadWrapper(this._node)) {
-      return false;
-    }
-
-    return true;
-  },
-
-  isLocal: function() {
-    return !!this._node;
-  },
-
-  isConnected: function() {
-    let node = this._nodeFront;
-    if (!node || !node.actorID) {
-      return false;
-    }
-
-    // As long as there are still tools going around
-    // accessing node.rawNode, this needs to stay.
-    let rawNode = null;
-    if (node.isLocal_toBeDeprecated()) {
-      rawNode = node.rawNode();
-    }
-    if (rawNode) {
-      try {
-        let doc = this.document;
-        return (doc && doc.defaultView && doc.documentElement.contains(rawNode));
-      } catch (e) {
-        // "can't access dead object" error
-        return false;
-      }
-    }
-
-    while(node) {
-      if (node === this._walker.rootNode) {
-        return true;
-      }
-      node = node.parentNode();
-    };
-    return false;
-  },
-
-  isHTMLNode: function() {
-    let xhtml_ns = "http://www.w3.org/1999/xhtml";
-    return this.isNode() && this.node.namespaceURI == xhtml_ns;
-  },
-
-  // Node type
-
-  isElementNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ELEMENT_NODE;
-  },
-
-  isAttributeNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ATTRIBUTE_NODE;
-  },
-
-  isTextNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.TEXT_NODE;
-  },
-
-  isCDATANode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.CDATA_SECTION_NODE;
-  },
-
-  isEntityRefNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ENTITY_REFERENCE_NODE;
-  },
-
-  isEntityNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.ENTITY_NODE;
-  },
-
-  isProcessingInstructionNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.PROCESSING_INSTRUCTION_NODE;
-  },
-
-  isCommentNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.PROCESSING_INSTRUCTION_NODE;
-  },
-
-  isDocumentNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.DOCUMENT_NODE;
-  },
-
-  isDocumentTypeNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.DOCUMENT_TYPE_NODE;
-  },
-
-  isDocumentFragmentNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.DOCUMENT_FRAGMENT_NODE;
-  },
-
-  isNotationNode: function() {
-    return this.isNode() && this.nodeFront.nodeType == Ci.nsIDOMNode.NOTATION_NODE;
-  },
-};

--- a/browser/devtools/inspector/test/browser.ini
+++ b/browser/devtools/inspector/test/browser.ini
@@ -19,24 +19,22 @@ support-files =
 [browser_inspector_bug_672902_keyboard_shortcuts.js]
 [browser_inspector_bug_674871.js]
 [browser_inspector_bug_699308_iframe_navigation.js]
 [browser_inspector_bug_817558_delete_node.js]
 [browser_inspector_bug_831693_combinator_suggestions.js]
 [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]
 [browser_inspector_invalidate.js]
 [browser_inspector_menu.js]
 [browser_inspector_navigation.js]
 [browser_inspector_pseudoClass_menu.js]
 [browser_inspector_pseudoclass_lock.js]

--- a/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
@@ -1,93 +1,84 @@
 /* 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, 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();
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
     gBrowser.selectedBrowser.removeEventListener("load", onload, true);
     doc = content.document;
     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();
   }
 }
-
-

--- a/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
+++ b/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
@@ -52,17 +52,20 @@ function test()
 
   function nodeSelected()
   {
     performTest();
     cursor++;
 
     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);
     }
   }
 
   function performTest()
   {

--- a/browser/devtools/inspector/test/browser_inspector_bug_665880.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_665880.js
@@ -1,52 +1,45 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-
-function test()
-{
+function test() {
   waitForExplicitFinish();
   ignoreAllUncaughtExceptions();
 
   let doc;
   let objectNode;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function() {
     gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
     doc = content.document;
     waitForFocus(setupObjectInspectionTest, content);
   }, true);
 
   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() {
       gDevTools.closeToolbox(target);
       finishUp();
     });
   }
 
-
   function finishUp() {
     doc = objectNode = null;
     gBrowser.removeCurrentTab();
     finish();
   }
 }

--- a/browser/devtools/inspector/test/browser_inspector_bug_674871.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_674871.js
@@ -2,16 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 function test()
 {
   waitForExplicitFinish();
 
   let doc;
   let iframeNode, iframeBodyNode;
+  let inspector;
 
   let iframeSrc = "<style>" +
                   "body {" +
                   "margin:0;" +
                   "height:100%;" +
                   "background-color:red" +
                   "}" +
                   "</style>" +
@@ -40,62 +41,68 @@ function test()
   content.location = "data:text/html," + docSrc;
 
   function setupTest()
   {
     iframeNode = doc.querySelector("iframe");
     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);
+    });
+  }
 
-    is(inspector.selection.node, iframeNode, "selection matches node");
+  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");
+    }
+
     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);
   }
-
 }
-

--- a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
@@ -3,58 +3,76 @@
 
 function test() {
   let iframe;
   let iframeLoads = 0;
   let checksAfterLoads = false;
   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()";
+      });
     });
   }
 
   function onIframeLoad() {
     if (++iframeLoads != 2) {
       executeSoon(function() {
         iframe.contentWindow.location = "javascript:location.reload()";
       });
       return;
     }
 
     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;
 
     finishTest();
   }
 
   function finishTest() {
     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();
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
     gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
     waitForFocus(startTest, content);

deleted file mode 100644
--- 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>";
-}

--- 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
@@ -28,16 +28,23 @@ function test() {
   // open devtools panel
   deferred.promise
     .then(function () gDevTools.showToolbox(target, null, Toolbox.HostType.BOTTOM))
     .then(function (aToolbox) { toolbox = aToolbox; })
 
   // 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();
       target.once("navigate", function () deferred.resolve());
       browser.loadURI(URL_2);
       return deferred.promise;
     })
 

--- 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
@@ -134,13 +134,10 @@ function test() {
     // Right node selected?
     is(inspector.selection.nodeFront, getNodeFront(node),
       "The right node is selected");
 
     // breadcrumbs updated?
     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");
   }
 }

--- 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
@@ -29,17 +29,16 @@ function test() {
   deferred.promise.then(() => {
     return gDevTools.showToolbox(target, null, Toolbox.HostType.BOTTOM);
   }).then(aToolbox => {
     toolbox = aToolbox;
   }).then(() => {
     // 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");
 
       assertMarkupViewIsLoaded();
     });
   }).then(() => {
     // navigate to URL_2

--- a/browser/devtools/inspector/test/browser_inspector_changes.js
+++ b/browser/devtools/inspector/test/browser_inspector_changes.js
@@ -27,44 +27,47 @@ function test() {
       }
     }
     return null;
   }
 
   function runInspectorTests(aInspector)
   {
     inspector = aInspector;
-    inspector.sidebar.once("computedview-ready", function() {
+    inspector.sidebar.once("computedview-ready", () => {
       info("Computed View ready");
       inspector.sidebar.select("computedview");
 
       testDiv = doc.getElementById("testdiv");
 
       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);
     });
   }
 
   function computedStylePanelTests()
   {
     let computedview = inspector.sidebar.getWindowForTab("computedview").computedview;
     ok(computedview, "Style Panel has a cssHtmlTree");
 
     let fontSize = getComputedPropertyValue("font-size");
     is(fontSize, "10px", "Style inspector should be showing the correct font size.");
 
     testDiv.style.cssText = "font-size: 15px; color: red;";
 
     // 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);
+      });
     });
   }
 
   function computedStylePanelAfterChange()
   {
     let fontSize = getComputedPropertyValue("font-size");
     is(fontSize, "15px", "Style inspector should be showing the new font size.");
 
@@ -74,22 +77,21 @@ function test() {
     computedStylePanelNotActive();
   }
 
   function computedStylePanelNotActive()
   {
     // 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()
   {
     let fontSize = getComputedPropertyValue("font-size");
     is(fontSize, "20px", "Style inspector should be showing the new font size.");
 
     let color = getComputedPropertyValue("color");
@@ -105,23 +107,21 @@ function test() {
   {
     inspector.sidebar.select("ruleview");
     let ruleview = inspector.sidebar.getWindowForTab("ruleview").ruleview;
     ok(ruleview, "Style Panel has a ruleview");
 
     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()
   {
     let propView = getInspectorRuleProp("text-align");
     is(propView.value, "right", "Style inspector should be showing the new text align.");
 
     let propView = getInspectorRuleProp("color");

--- a/browser/devtools/inspector/test/browser_inspector_destroyselection.js
+++ b/browser/devtools/inspector/test/browser_inspector_destroyselection.js
@@ -1,15 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 function test()
 {
   waitForExplicitFinish();
-  //ignoreAllUncaughtExceptions();
 
   let node, iframe, inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
     gBrowser.selectedBrowser.removeEventListener("load", onload, true);
     waitForFocus(setupTest, content);
   }, true);
@@ -23,27 +22,31 @@ function test()
     openInspector(runTests);
   }
 
   function runTests(aInspector)
   {
     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();
   }
 }
 

--- a/browser/devtools/inspector/test/browser_inspector_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter.js
@@ -1,22 +1,21 @@
 /* -*- 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/. */
 
 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");
   let p3 = doc.createElement("p");
   doc.title = "Inspector Highlighter Meatballs";
   h1.textContent = "Inspector Tree Selection Test";
   p1.textContent = "This is some example text";
   p2.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
@@ -43,135 +42,90 @@ function createDocument()
   div.appendChild(p1);
   div.appendChild(p2);
   div2.appendChild(p3);
   div3.appendChild(p4);
   doc.body.appendChild(div);
   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();
+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();
+  });
 
-  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);
-  });
+  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");
-
-
-  div = doc.querySelector("div#checkOutThisWickedSpread");
+function testOutlineDimensions() {
+  let h1Dims = h1.getBoundingClientRect();
+  let h1Width = h1Dims.width;
+  let h1Height = h1Dims.height;
 
-  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
                              .QueryInterface(Ci.nsIMarkupDocumentViewer);
   contentViewer.fullZoom = 2;
 
   // We wait at least 500ms to make sure the highlighter is not "mutting" the
   // 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 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);
 
-    // simulate the zoomed dimensions of the div element
-    let divDims = div.getBoundingClientRect();
-    let divWidth = divDims.width * zoom;
-    let divHeight = divDims.height * zoom;
-
-    // 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() {
     gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
     doc = content.document;
     waitForFocus(createDocument, content);
   }, true);
 
   content.location = "data:text/html,basic tests for inspector";
 }
-