--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -144,16 +144,18 @@
         <menupopup id="appmenu_webDeveloper_popup">
           <menuitem id="appmenu_devToolbox"
                     observes="devtoolsMenuBroadcaster_DevToolbox"/>
           <menuseparator id="appmenu_devtools_separator"/>
           <menuitem id="appmenu_devToolbar"
                     observes="devtoolsMenuBroadcaster_DevToolbar"/>
           <menuitem id="appmenu_chromeDebugger"
                     observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+          <menuitem id="appmenu_browserConsole"
+                    observes="devtoolsMenuBroadcaster_BrowserConsole"/>
           <menuitem id="appmenu_responsiveUI"
                     observes="devtoolsMenuBroadcaster_ResponsiveUI"/>
           <menuitem id="appmenu_scratchpad"
                     observes="devtoolsMenuBroadcaster_Scratchpad"/>
           <menuitem id="appmenu_pageSource"
                     observes="devtoolsMenuBroadcaster_PageSource"/>
           <menuitem id="appmenu_errorConsole"
                     observes="devtoolsMenuBroadcaster_ErrorConsole"/>

--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -571,16 +571,18 @@
                             observes="devtoolsMenuBroadcaster_DevToolbox"
                             accesskey="&devToolboxMenuItem.accesskey;"/>
                   <menuseparator id="menu_devtools_separator"/>
                   <menuitem id="menu_devToolbar"
                             observes="devtoolsMenuBroadcaster_DevToolbar"
                             accesskey="&devToolbarMenu.accesskey;"/>
                   <menuitem id="menu_chromeDebugger"
                             observes="devtoolsMenuBroadcaster_ChromeDebugger"/>
+                  <menuitem id="menu_browserConsole"
+                            observes="devtoolsMenuBroadcaster_BrowserConsole"/>
                   <menuitem id="menu_responsiveUI"
                             observes="devtoolsMenuBroadcaster_ResponsiveUI"
                             accesskey="&responsiveDesignTool.accesskey;"/>
                   <menuitem id="menu_scratchpad"
                             observes="devtoolsMenuBroadcaster_Scratchpad"
                             accesskey="&scratchpad.accesskey;"/>
                   <menuitem id="menu_pageSource"
                             observes="devtoolsMenuBroadcaster_PageSource"

--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -91,16 +91,17 @@
     <command id="Browser:RestoreLastSession" oncommand="restoreLastSession();" disabled="true"/>
 
     <command id="Tools:Search" oncommand="BrowserSearch.webSearch();"/>
     <command id="Tools:Downloads" oncommand="BrowserDownloadsUI();"/>
     <command id="Tools:DevToolbox" oncommand="gDevToolsBrowser.toggleToolboxCommand(gBrowser);"/>
     <command id="Tools:DevToolbar" oncommand="DeveloperToolbar.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:DevToolbarFocus" oncommand="DeveloperToolbar.focusToggle();" disabled="true"/>
     <command id="Tools:ChromeDebugger" oncommand="DebuggerUI.toggleChromeDebugger();" disabled="true" hidden="true"/>
+    <command id="Tools:BrowserConsole" oncommand="HUDConsoleUI.toggleBrowserConsole();" disabled="true" hidden="true"/>
     <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true" hidden="true"/>
     <command id="Tools:ResponsiveUI" oncommand="ResponsiveUI.toggle();" disabled="true" hidden="true"/>
     <command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
     <command id="Tools:ErrorConsole" oncommand="toJavaScriptConsole()" disabled="true" hidden="true"/>
     <command id="Tools:DevToolsConnect" oncommand="gDevToolsBrowser.openConnectScreen(gBrowser)" disabled="true" hidden="true"/>
     <command id="Tools:Sanitize"
      oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
     <command id="Tools:PrivateBrowsing"
@@ -179,16 +180,19 @@
     <broadcaster id="devtoolsMenuBroadcaster_DevToolbar"
                  label="&devToolbarMenu.label;"
                  type="checkbox" autocheck="false"
                  command="Tools:DevToolbar"
                  key="key_devToolbar"/>
     <broadcaster id="devtoolsMenuBroadcaster_ChromeDebugger"
                  label="&chromeDebuggerMenu.label;"
                  command="Tools:ChromeDebugger"/>
+    <broadcaster id="devtoolsMenuBroadcaster_BrowserConsole"
+                 label="&browserConsoleCmd.label;"
+                 command="Tools:BrowserConsole"/>
     <broadcaster id="devtoolsMenuBroadcaster_Scratchpad"
                  label="&scratchpad.label;"
                  command="Tools:Scratchpad"
                  key="key_scratchpad"/>
     <broadcaster id="devtoolsMenuBroadcaster_ResponsiveUI"
                  label="&responsiveDesignTool.label;"
                  type="checkbox" autocheck="false"
                  command="Tools:ResponsiveUI"

--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1566,29 +1566,37 @@ var gBrowserInit = {
 
       // Show the toolbar if it was previously visible
       if (gPrefService.getBoolPref("devtools.toolbar.visible")) {
         DeveloperToolbar.show(false);
       }
     }
 
     // Enable Chrome Debugger?
-    let enabled = gPrefService.getBoolPref("devtools.chrome.enabled") &&
-                  gPrefService.getBoolPref("devtools.debugger.chrome-enabled") &&
-                  gPrefService.getBoolPref("devtools.debugger.remote-enabled");
-    if (enabled) {
+    let chromeEnabled = gPrefService.getBoolPref("devtools.chrome.enabled");
+    let remoteEnabled = chromeEnabled &&
+                        gPrefService.getBoolPref("devtools.debugger.chrome-enabled") &&
+                        gPrefService.getBoolPref("devtools.debugger.remote-enabled");
+    if (remoteEnabled) {
       let cmd = document.getElementById("Tools:ChromeDebugger");
       cmd.removeAttribute("disabled");
       cmd.removeAttribute("hidden");
     }
 
+    // Enable the Browser Console?
+    if (chromeEnabled) {
+      let cmd = document.getElementById("Tools:BrowserConsole");
+      cmd.removeAttribute("disabled");
+      cmd.removeAttribute("hidden");
+    }
+
     // Enable Error Console?
     // Temporarily enabled. See bug 798925.
     let consoleEnabled = true || gPrefService.getBoolPref("devtools.errorconsole.enabled") ||
-                         gPrefService.getBoolPref("devtools.chrome.enabled");
+                         chromeEnabled;
     if (consoleEnabled) {
       let cmd = document.getElementById("Tools:ErrorConsole");
       cmd.removeAttribute("disabled");
       cmd.removeAttribute("hidden");
     }
 
     // Enable Scratchpad in the UI, if the preference allows this.
     let scratchpadEnabled = gPrefService.getBoolPref(Scratchpad.prefEnabledName);

--- a/browser/devtools/debugger/DebuggerPanel.jsm
+++ b/browser/devtools/debugger/DebuggerPanel.jsm
@@ -81,15 +81,9 @@ DebuggerPanel.prototype = {
 
   getBreakpoint: function() {
     return this._bkp.getBreakpoint.apply(this._bkp, arguments);
   },
 
   getAllBreakpoints: function() {
     return this._bkp.store;
   },
-
-  // Private
-
-  _ensureOnlyOneRunningDebugger: function() {
-    // FIXME
-  },
 };

--- a/browser/devtools/debugger/DebuggerUI.jsm
+++ b/browser/devtools/debugger/DebuggerUI.jsm
@@ -7,17 +7,16 @@
 
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 const DBG_XUL = "chrome://browser/content/debugger.xul";
 const DBG_STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties";
 const CHROME_DEBUGGER_PROFILE_NAME = "-chrome-debugger";
-const TAB_SWITCH_NOTIFICATION = "debugger-tab-switch";
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this,
   "DebuggerServer", "resource://gre/modules/devtools/dbg-server.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this,
   "Services", "resource://gre/modules/Services.jsm");
@@ -78,20 +77,16 @@ DebuggerUI.prototype = {
    * @return DebuggerPane | null
    *         The script debugger instance if it's started, null if stopped.
    */
   toggleDebugger: function DUI_toggleDebugger() {
     let scriptDebugger = this.findDebugger();
     let selectedTab = this.chromeWindow.gBrowser.selectedTab;
 
     if (scriptDebugger) {
-      if (scriptDebugger.ownerTab !== selectedTab) {
-        this.showTabSwitchNotification();
-        return scriptDebugger;
-      }
       scriptDebugger.close();
       return null;
     }
     return new DebuggerPane(this, selectedTab);
   },
 
   /**
    * Starts a remote debugger in a new window, or stops it if already started.
@@ -166,73 +161,16 @@ DebuggerUI.prototype = {
   /**
    * Get the chrome debugger for the current firefox instance.
    *
    * @return ChromeDebuggerProcess | null
    *         The chrome debugger instance if it exists, null otherwise.
    */
   getChromeDebugger: function DUI_getChromeDebugger() {
     return '_chromeDebugger' in this ? this._chromeDebugger : null;
-  },
-
-  /**
-   * Currently, there can only be one debugger per tab.
-   * Show an asynchronous notification which asks the user to switch the
-   * script debugger to the current tab if it's already open in another one.
-   */
-  showTabSwitchNotification: function DUI_showTabSwitchNotification() {
-    let gBrowser = this.chromeWindow.gBrowser;
-    let selectedBrowser = gBrowser.selectedBrowser;
-
-    let nbox = gBrowser.getNotificationBox(selectedBrowser);
-    let notification = nbox.getNotificationWithValue(TAB_SWITCH_NOTIFICATION);
-    if (notification) {
-      nbox.removeNotification(notification);
-      return;
-    }
-    let self = this;
-
-    let buttons = [{
-      id: "debugger.confirmTabSwitch.buttonSwitch",
-      label: L10N.getStr("confirmTabSwitch.buttonSwitch"),
-      accessKey: L10N.getStr("confirmTabSwitch.buttonSwitch.accessKey"),
-      callback: function DUI_notificationButtonSwitch() {
-        let scriptDebugger = self.findDebugger();
-        let targetWindow = scriptDebugger.globalUI.chromeWindow;
-        targetWindow.gBrowser.selectedTab = scriptDebugger.ownerTab;
-        targetWindow.focus();
-      }
-    }, {
-      id: "debugger.confirmTabSwitch.buttonOpen",
-      label: L10N.getStr("confirmTabSwitch.buttonOpen"),
-      accessKey: L10N.getStr("confirmTabSwitch.buttonOpen.accessKey"),
-      callback: function DUI_notificationButtonOpen() {
-        let scriptDebugger = self.findDebugger();
-        let targetWindow = scriptDebugger.globalUI.chromeWindow;
-        scriptDebugger.close();
-
-        targetWindow.addEventListener("Debugger:Shutdown", function onShutdown() {
-          targetWindow.removeEventListener("Debugger:Shutdown", onShutdown, false);
-          Services.tm.currentThread.dispatch({ run: function() {
-            self.toggleDebugger();
-          }}, 0);
-        }, false);
-      }
-    }];
-
-    let message = L10N.getStr("confirmTabSwitch.message");
-    let imageURL = "chrome://browser/skin/Info.png";
-
-    notification = nbox.appendNotification(
-      message, TAB_SWITCH_NOTIFICATION,
-      imageURL, nbox.PRIORITY_WARNING_HIGH, buttons, null);
-
-    // Make sure this is not a transient notification, to avoid the automatic
-    // transient notification removal.
-    notification.persistence = -1;
   }
 };
 
 /**
  * Creates a pane that will host the debugger.
  *
  * @param DebuggerUI aDebuggerUI
  *        The parent instance creating the new debugger.

--- a/browser/devtools/debugger/debugger-controller.js
+++ b/browser/devtools/debugger/debugger-controller.js
@@ -10,27 +10,16 @@ const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 const DBG_STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties";
 const NEW_SOURCE_IGNORED_URLS = ["debugger eval code", "self-hosted"];
 const NEW_SOURCE_DISPLAY_DELAY = 200; // ms
 const FETCH_SOURCE_RESPONSE_DELAY = 50; // ms
 const FRAME_STEP_CLEAR_DELAY = 100; // ms
 const CALL_STACK_PAGE_SIZE = 25; // frames
-const VARIABLES_VIEW_NON_SORTABLE = [
-  "Array",
-  "Int8Array",
-  "Uint8Array",
-  "Int16Array",
-  "Uint16Array",
-  "Int32Array",
-  "Uint32Array",
-  "Float32Array",
-  "Float64Array"
-];
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/devtools/dbg-server.jsm");
 Cu.import("resource://gre/modules/devtools/dbg-client.jsm");
 Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
 Cu.import("resource:///modules/source-editor.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
@@ -262,26 +251,35 @@ let DebuggerController = {
           Cu.reportError("Couldn't attach to thread: " + aResponse.error);
           return;
         }
         this.activeThread = aThreadClient;
 
         this.ThreadState.connect();
         this.StackFrames.connect();
         this.SourceScripts.connect();
-        aThreadClient.resume();
+        aThreadClient.resume(this._ensureResumptionOrder);
 
         if (aCallback) {
           aCallback();
         }
       });
     });
   },
 
   /**
+   * Warn if resuming execution produced a wrongOrder error.
+   */
+  _ensureResumptionOrder: function DC__ensureResumptionOrder(aResponse) {
+    if (aResponse.error == "wrongOrder") {
+      DebuggerView.Toolbar.showResumeWarning(aResponse.lastPausedUrl);
+    }
+  },
+
+  /**
    * Sets up a chrome debugging session.
    *
    * @param DebuggerClient aClient
    *        The debugger client.
    * @param object aChromeDebugger
    *        The remote protocol grip of the chrome debugger.
    * @param function aCallback
    *        A function to invoke once the client attached to the active thread.
@@ -298,17 +296,17 @@ let DebuggerController = {
         Cu.reportError("Couldn't attach to thread: " + aResponse.error);
         return;
       }
       this.activeThread = aThreadClient;
 
       this.ThreadState.connect();
       this.StackFrames.connect();
       this.SourceScripts.connect();
-      aThreadClient.resume();
+      aThreadClient.resume(this._ensureResumptionOrder);
 
       if (aCallback) {
         aCallback();
       }
     });
   },
 
   /**
@@ -523,17 +521,17 @@ StackFrames.prototype = {
       }
     }
     // Got our evaluation of the current breakpoint's conditional expression.
     if (this._isConditionalBreakpointEvaluation) {
       this._isConditionalBreakpointEvaluation = false;
       // If the breakpoint's conditional expression evaluation is falsy,
       // automatically resume execution.
       if (VariablesView.isFalsy({ value: this.currentEvaluation.return })) {
-        this.activeThread.resume();
+        this.activeThread.resume(DebuggerController._ensureResumptionOrder);
         return;
       }
     }
 
 
     // Watch expressions are evaluated in the context of the topmost frame,
     // and the results and displayed in the variables view.
     if (this.currentWatchExpressions) {
@@ -888,17 +886,17 @@ StackFrames.prototype = {
     if (aVar._fetched) {
       return;
     }
     aVar._fetched = true;
     let grip = aVar._sourceGrip;
 
     this.activeThread.pauseGrip(grip).getPrototypeAndProperties(function(aResponse) {
       let { ownProperties, prototype } = aResponse;
-      let sortable = VARIABLES_VIEW_NON_SORTABLE.indexOf(grip.class) == -1;
+      let sortable = VariablesView.NON_SORTABLE_CLASSES.indexOf(grip.class) == -1;
 
       // Add all the variable properties.
       if (ownProperties) {
         aVar.addProperties(ownProperties, {
           // Not all variables need to force sorted properties.
           sorted: sortable,
           // Expansion handlers must be set after the properties are added.
           callback: this._addVarExpander

--- a/browser/devtools/debugger/debugger-toolbar.js
+++ b/browser/devtools/debugger/debugger-toolbar.js
@@ -22,16 +22,17 @@ function ToolbarView() {
 ToolbarView.prototype = {
   /**
    * Initialization function, called when the debugger is started.
    */
   initialize: function DVT_initialize() {
     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._chromeGlobals = document.getElementById("chrome-globals");
 
     let resumeKey = LayoutHelpers.prettyKey(document.getElementById("resumeKey"), true);
     let stepOverKey = LayoutHelpers.prettyKey(document.getElementById("stepOverKey"), true);
@@ -85,16 +86,29 @@ ToolbarView.prototype = {
     // If we're attached, do the opposite.
     else if (aState == "attached") {
       this._resumeButton.removeAttribute("checked");
       this._resumeButton.setAttribute("tooltiptext", this._pauseTooltip);
     }
   },
 
   /**
+   * 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 DVT_showResumeWarning(aPausedUrl) {
+    let label = L10N.getFormatStr("resumptionOrderPanelTitle", [aPausedUrl]);
+    document.getElementById("resumption-panel-desc").textContent = label;
+    this._resumeOrderPanel.openPopup(this._resumeButton);
+  },
+
+  /**
    * Sets the chrome globals container hidden or visible. It's hidden by default.
    *
    * @param boolean aVisibleFlag
    *        Specifies the intended visibility.
    */
   toggleChromeGlobalsContainer: function DVT_toggleChromeGlobalsContainer(aVisibleFlag) {
     this._chromeGlobals.setAttribute("hidden", !aVisibleFlag);
   },
@@ -110,17 +124,18 @@ ToolbarView.prototype = {
     });
   },
 
   /**
    * Listener handling the pause/resume button click event.
    */
   _onResumePressed: function DVT__onResumePressed() {
     if (DebuggerController.activeThread.paused) {
-      DebuggerController.activeThread.resume();
+      let warn = DebuggerController._ensureResumptionOrder;
+      DebuggerController.activeThread.resume(warn);
     } else {
       DebuggerController.activeThread.interrupt();
     }
   },
 
   /**
    * Listener handling the step over button click event.
    */
@@ -144,16 +159,17 @@ ToolbarView.prototype = {
    */
   _onStepOutPressed: function DVT__onStepOutPressed() {
     if (DebuggerController.activeThread.paused) {
       DebuggerController.activeThread.stepOut();
     }
   },
 
   _instrumentsPaneToggleButton: null,
+  _resumeOrderPanel: null,
   _resumeButton: null,
   _stepOverButton: null,
   _stepInButton: null,
   _stepOutButton: null,
   _chromeGlobals: null,
   _resumeTooltip: "",
   _pauseTooltip: "",
   _stepOverTooltip: "",

--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -335,9 +335,19 @@
          noautofocus="true">
     <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"
+         noautofocus="true"
+         position="before_start">
+    <hbox align="start">
+      <image class="alert-icon"/>
+      <label id="resumption-panel-desc" class="description"/>
+    </hbox>
+  </panel>
+
 </window>

--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@@ -12,18 +12,16 @@ include $(DEPTH)/config/autoconf.mk
 
 MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_aaa_run_first_leaktest.js \
 	browser_dbg_clean-exit.js \
 	browser_dbg_cmd.js \
 	$(browser_dbg_cmd_break.js disabled until bug 722727 is fixed) \
 	browser_dbg_createChrome.js \
 	$(browser_dbg_createRemote.js disabled for intermittent failures, bug 753225) \
-	$(browser_dbg_debugger-tab-switch.js disabled until issues 106, 40 are fixed) \
-	$(browser_dbg_debugger-tab-switch-window.js disabled until issues 106, 40 are fixed) \
 	browser_dbg_debuggerstatement.js \
 	browser_dbg_listtabs.js \
 	browser_dbg_tabactor-01.js \
 	browser_dbg_tabactor-02.js \
 	browser_dbg_globalactor-01.js \
 	browser_dbg_nav-01.js \
 	browser_dbg_propertyview-01.js \
 	browser_dbg_propertyview-02.js \

deleted file mode 100644
--- a/browser/devtools/debugger/test/browser_dbg_debugger-tab-switch-window.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/*
- * Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/
- */
-
-let gInitialTab, gTab1, gTab2, gTab3, gTab4;
-let gInitialWindow, gSecondWindow;
-let gPane1, gPane2;
-let gNbox;
-
-/**
- * Tests that a debugger instance can't be opened in multiple windows at once,
- * and that on such an attempt a notification is shown, which can either switch
- * to the old debugger instance, or close the old instance to open a new one.
- */
-
-function test() {
-  gInitialWindow = window;
-  gInitialTab = window.gBrowser.selectedTab;
-  gNbox = gInitialWindow.gBrowser.getNotificationBox(gInitialWindow.gBrowser.selectedBrowser);
-
-  testTab1_initialWindow(function() {
-    testTab2_secondWindow(function() {
-      testTab3_secondWindow(function() {
-        testTab4_secondWindow(function() {
-          lastTest(function() {
-            cleanup(function() {
-              finish();
-            });
-          });
-        });
-      });
-    });
-  });
-}
-
-function testTab1_initialWindow(callback) {
-  gTab1 = addTab(TAB1_URL, function() {
-    gInitialWindow.gBrowser.selectedTab = gTab1;
-    gNbox = gInitialWindow.gBrowser.getNotificationBox(gInitialWindow.gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification.");
-    ok(!gInitialWindow.DebuggerUI.getDebugger(),
-      "Shouldn't have a debugger pane for this tab yet.");
-
-    info("Toggling a debugger (1).");
-
-    gPane1 = gInitialWindow.DebuggerUI.toggleDebugger();
-    ok(gPane1, "toggleDebugger() should return a pane.");
-    is(gPane1.ownerTab, gTab1, "Incorrect tab owner.");
-
-    is(gInitialWindow.DebuggerUI.getDebugger(), gPane1,
-      "getDebugger() should return the same pane as toggleDebugger().");
-
-    wait_for_connect_and_resume(function dbgLoaded() {
-      info("First debugger has finished loading correctly.");
-      executeSoon(function() {
-        callback();
-      });
-    }, gInitialWindow);
-  }, gInitialWindow);
-}
-
-function testTab2_secondWindow(callback) {
-  gSecondWindow = addWindow();
-
-  gTab2 = addTab(TAB1_URL, function() {
-    gSecondWindow.gBrowser.selectedTab = gTab2;
-    gNbox = gSecondWindow.gBrowser.getNotificationBox(gSecondWindow.gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification yet.");
-    ok(gSecondWindow.DebuggerUI.findDebugger(),
-      "Should already have a debugger pane for another tab.");
-
-    gNbox.addEventListener("AlertActive", function active() {
-      gNbox.removeEventListener("AlertActive", active, true);
-      executeSoon(function() {
-        ok(gPane2, "toggleDebugger() should always return a pane.");
-        is(gPane2.ownerTab, gTab1, "Incorrect tab owner.");
-
-        is(gSecondWindow.DebuggerUI.findDebugger(), gPane1,
-          "findDebugger() should return the same pane as the first call to toggleDebugger().");
-        is(gSecondWindow.DebuggerUI.findDebugger(), gPane2,
-          "findDebugger() should return the same pane as the second call to toggleDebugger().");
-
-        info("Second debugger has not loaded.");
-
-        let notification = gNbox.getNotificationWithValue("debugger-tab-switch");
-        ok(gNbox.currentNotification, "Should have a tab switch notification.");
-        is(gNbox.currentNotification, notification, "Incorrect current notification.");
-
-        info("Notification will be simply closed.");
-        notification.close();
-
-        executeSoon(function() {
-          callback();
-        });
-      });
-    }, true);
-
-    info("Toggling a debugger (2).");
-
-    gPane2 = gSecondWindow.DebuggerUI.toggleDebugger();
-  }, gSecondWindow);
-}
-
-function testTab3_secondWindow(callback) {
-  gTab3 = addTab(TAB1_URL, function() {
-    gSecondWindow.gBrowser.selectedTab = gTab3;
-    gNbox = gSecondWindow.gBrowser.getNotificationBox(gSecondWindow.gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification.");
-    ok(gSecondWindow.DebuggerUI.findDebugger(),
-      "Should already have a debugger pane for another tab.");
-
-    gNbox.addEventListener("AlertActive", function active() {
-      gNbox.removeEventListener("AlertActive", active, true);
-      executeSoon(function() {
-        ok(gPane2, "toggleDebugger() should always return a pane.");
-        is(gPane2.ownerTab, gTab1, "Incorrect tab owner.");
-
-        is(gSecondWindow.DebuggerUI.findDebugger(), gPane1,
-          "findDebugger() should return the same pane as the first call to toggleDebugger().");
-        is(gSecondWindow.DebuggerUI.findDebugger(), gPane2,
-          "findDebugger() should return the same pane as the second call to toggleDebugger().");
-
-        info("Second debugger has not loaded.");
-
-        let notification = gNbox.getNotificationWithValue("debugger-tab-switch");
-        ok(gNbox.currentNotification, "Should have a tab switch notification.");
-        is(gNbox.currentNotification, notification, "Incorrect current notification.");
-
-        gInitialWindow.gBrowser.selectedTab = gInitialTab;
-        gInitialWindow.gBrowser.tabContainer.addEventListener("TabSelect", function tabSelect() {
-          gInitialWindow.gBrowser.tabContainer.removeEventListener("TabSelect", tabSelect, true);
-          executeSoon(function() {
-            callback();
-          });
-        }, true);
-
-        let buttonSwitch = notification.querySelectorAll("button")[0];
-        buttonSwitch.focus();
-        EventUtils.sendKey("SPACE", gSecondWindow);
-        info("The switch button on the notification was pressed.");
-      });
-    }, true);
-
-    info("Toggling a debugger (3).");
-
-    gPane2 = gSecondWindow.DebuggerUI.toggleDebugger();
-  }, gSecondWindow);
-}
-
-function testTab4_secondWindow(callback) {
-  is(gInitialWindow.gBrowser.selectedTab, gTab1,
-    "Should've switched to the first debugged tab.");
-
-  gTab4 = addTab(TAB1_URL, function() {
-    gSecondWindow.gBrowser.selectedTab = gTab4;
-    gNbox = gSecondWindow.gBrowser.getNotificationBox(gSecondWindow.gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification.");
-    ok(gSecondWindow.DebuggerUI.findDebugger(),
-      "Should already have a debugger pane for another tab.");
-
-    gNbox.addEventListener("AlertActive", function active() {
-      gNbox.removeEventListener("AlertActive", active, true);
-      executeSoon(function() {
-        ok(gPane2, "toggleDebugger() should always return a pane.");
-        is(gPane2.ownerTab, gTab1, "Incorrect tab owner.");
-
-        is(gSecondWindow.DebuggerUI.findDebugger(), gPane1,
-          "findDebugger() should return the same pane as the first call to toggleDebugger().");
-        is(gSecondWindow.DebuggerUI.findDebugger(), gPane2,
-          "findDebugger() should return the same pane as the second call to toggleDebugger().");
-
-        info("Second debugger has not loaded.");
-
-        let notification = gNbox.getNotificationWithValue("debugger-tab-switch");
-        ok(gNbox.currentNotification, "Should have a tab switch notification.");
-        is(gNbox.currentNotification, notification, "Incorrect current notification.");
-
-        let buttonOpen = notification.querySelectorAll("button")[1];
-        buttonOpen.focus();
-        EventUtils.sendKey("SPACE", gSecondWindow);
-        info("The open button on the notification was pressed.");
-
-        wait_for_connect_and_resume(function() {
-          callback();
-        }, gSecondWindow);
-      });
-    }, true);
-
-    info("Toggling a debugger (4).");
-
-    gPane2 = gSecondWindow.DebuggerUI.toggleDebugger();
-  }, gSecondWindow);
-}
-
-function lastTest(callback) {
-  is(gInitialWindow.gBrowser.selectedTab, gTab1,
-    "The initial window should continue having selected the first debugged tab.");
-  is(gSecondWindow.gBrowser.selectedTab, gTab4,
-    "Should currently be in the fourth tab.");
-  is(gSecondWindow.DebuggerUI.findDebugger().ownerTab, gTab4,
-    "The debugger should be open for the fourth tab.");
-
-  is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-    "Shouldn't have a tab switch notification.");
-
-  info("Second debugger has loaded.");
-
-  executeSoon(function() {
-    callback();
-  });
-}
-
-function cleanup(callback)
-{
-  gPane1 = null;
-  gPane2 = null;
-  gNbox = null;
-
-  closeDebuggerAndFinish(false, function() {
-    removeTab(gTab1, gInitialWindow);
-    removeTab(gTab2, gSecondWindow);
-    removeTab(gTab3, gSecondWindow);
-    removeTab(gTab4, gSecondWindow);
-    gSecondWindow.close();
-    gTab1 = null;
-    gTab2 = null;
-    gTab3 = null;
-    gTab4 = null;
-    gInitialWindow = null;
-    gSecondWindow = null;
-
-    callback();
-  }, gSecondWindow);
-}

deleted file mode 100644
--- a/browser/devtools/debugger/test/browser_dbg_debugger-tab-switch.js
+++ /dev/null
@@ -1,235 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/*
- * Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/
- */
-
-let gTab1, gTab2, gTab3, gTab4;
-let gPane1, gPane2;
-let gNbox;
-
-/**
- * Tests that a debugger instance can't be opened in multiple tabs at once,
- * and that on such an attempt a notification is shown, which can either switch
- * to the old debugger instance, or close the old instance to open a new one.
- */
-
-function test() {
-  gNbox = gBrowser.getNotificationBox(gBrowser.selectedBrowser);
-
-  testTab1(function() {
-    testTab2(function() {
-      testTab3(function() {
-        testTab4(function() {
-          lastTest(function() {
-            cleanup(function() {
-              finish();
-            });
-          });
-        });
-      });
-    });
-  });
-}
-
-function testTab1(callback) {
-  gTab1 = addTab(TAB1_URL, function() {
-    gBrowser.selectedTab = gTab1;
-    gNbox = gBrowser.getNotificationBox(gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification.");
-    ok(!DebuggerUI.getDebugger(),
-      "Shouldn't have a debugger pane for this tab yet.");
-
-    info("Toggling a debugger (1).");
-
-    gPane1 = DebuggerUI.toggleDebugger();
-    ok(gPane1, "toggleDebugger() should return a pane.");
-    is(gPane1.ownerTab, gTab1, "Incorrect tab owner.");
-
-    is(DebuggerUI.getDebugger(), gPane1,
-      "getDebugger() should return the same pane as toggleDebugger().");
-
-    wait_for_connect_and_resume(function dbgLoaded() {
-      info("First debugger has finished loading correctly.");
-      executeSoon(function() {
-        callback();
-      });
-    });
-  });
-}
-
-function testTab2(callback) {
-  gTab2 = addTab(TAB1_URL, function() {
-    gBrowser.selectedTab = gTab2;
-    gNbox = gBrowser.getNotificationBox(gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification yet.");
-    ok(DebuggerUI.getDebugger(),
-      "Should already have a debugger pane for another tab.");
-
-    gNbox.addEventListener("AlertActive", function active() {
-      gNbox.removeEventListener("AlertActive", active, true);
-      executeSoon(function() {
-        ok(gPane2, "toggleDebugger() should always return a pane.");
-        is(gPane2.ownerTab, gTab1, "Incorrect tab owner.");
-
-        is(DebuggerUI.getDebugger(), gPane1,
-          "getDebugger() should return the same pane as the first call to toggleDebugger().");
-        is(DebuggerUI.getDebugger(), gPane2,
-          "getDebugger() should return the same pane as the second call to toggleDebugger().");
-
-        info("Second debugger has not loaded.");
-
-        let notification = gNbox.getNotificationWithValue("debugger-tab-switch");
-        ok(gNbox.currentNotification, "Should have a tab switch notification.");
-        is(gNbox.currentNotification, notification, "Incorrect current notification.");
-
-        info("Notification will be simply closed.");
-        notification.close();
-
-        executeSoon(function() {
-          callback();
-        });
-      });
-    }, true);
-
-    info("Toggling a debugger (2).");
-
-    gPane2 = DebuggerUI.toggleDebugger();
-  });
-}
-
-function testTab3(callback) {
-  gTab3 = addTab(TAB1_URL, function() {
-    gBrowser.selectedTab = gTab3;
-    gNbox = gBrowser.getNotificationBox(gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification.");
-    ok(DebuggerUI.getDebugger(),
-      "Should already have a debugger pane for another tab.");
-
-    gNbox.addEventListener("AlertActive", function active() {
-      gNbox.removeEventListener("AlertActive", active, true);
-      executeSoon(function() {
-        ok(gPane2, "toggleDebugger() should always return a pane.");
-        is(gPane2.ownerTab, gTab1, "Incorrect tab owner.");
-
-        is(DebuggerUI.getDebugger(), gPane1,
-          "getDebugger() should return the same pane as the first call to toggleDebugger().");
-        is(DebuggerUI.getDebugger(), gPane2,
-          "getDebugger() should return the same pane as the second call to toggleDebugger().");
-
-        info("Second debugger has not loaded.");
-
-        let notification = gNbox.getNotificationWithValue("debugger-tab-switch");
-        ok(gNbox.currentNotification, "Should have a tab switch notification.");
-        is(gNbox.currentNotification, notification, "Incorrect current notification.");
-
-        gBrowser.tabContainer.addEventListener("TabSelect", function tabSelect() {
-          gBrowser.tabContainer.removeEventListener("TabSelect", tabSelect, true);
-          executeSoon(function() {
-            callback();
-          });
-        }, true);
-
-        let buttonSwitch = notification.querySelectorAll("button")[0];
-        buttonSwitch.focus();
-        EventUtils.sendKey("SPACE");
-        info("The switch button on the notification was pressed.");
-      });
-    }, true);
-
-    info("Toggling a debugger (3).");
-
-    gPane2 = DebuggerUI.toggleDebugger();
-  });
-}
-
-function testTab4(callback) {
-  is(gBrowser.selectedTab, gTab1,
-    "Should've switched to the first debugged tab.");
-
-  gTab4 = addTab(TAB1_URL, function() {
-    gBrowser.selectedTab = gTab4;
-    gNbox = gBrowser.getNotificationBox(gBrowser.selectedBrowser);
-
-    is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-      "Shouldn't have a tab switch notification.");
-    ok(DebuggerUI.getDebugger(),
-      "Should already have a debugger pane for another tab.");
-
-    gNbox.addEventListener("AlertActive", function active() {
-      gNbox.removeEventListener("AlertActive", active, true);
-      executeSoon(function() {
-        ok(gPane2, "toggleDebugger() should always return a pane.");
-        is(gPane2.ownerTab, gTab1, "Incorrect tab owner.");
-
-        is(DebuggerUI.getDebugger(), gPane1,
-          "getDebugger() should return the same pane as the first call to toggleDebugger().");
-        is(DebuggerUI.getDebugger(), gPane2,
-          "getDebugger() should return the same pane as the second call to toggleDebugger().");
-
-        info("Second debugger has not loaded.");
-
-        let notification = gNbox.getNotificationWithValue("debugger-tab-switch");
-        ok(gNbox.currentNotification, "Should have a tab switch notification.");
-        is(gNbox.currentNotification, notification, "Incorrect current notification.");
-
-        let buttonOpen = notification.querySelectorAll("button")[1];
-        buttonOpen.focus();
-        EventUtils.sendKey("SPACE");
-        info("The open button on the notification was pressed.");
-
-        wait_for_connect_and_resume(function() {
-          callback();
-        });
-      });
-    }, true);
-
-    info("Toggling a debugger (4).");
-
-    gPane2 = DebuggerUI.toggleDebugger();
-  });
-}
-
-function lastTest(callback) {
-  isnot(gBrowser.selectedTab, gTab1,
-    "Shouldn't have switched to the first debugged tab.");
-  is(gBrowser.selectedTab, gTab4,
-    "Should currently be in the fourth tab.");
-  is(DebuggerUI.getDebugger().ownerTab, gTab4,
-    "The debugger should be open for the fourth tab.");
-
-  is(gNbox.getNotificationWithValue("debugger-tab-switch"), null,
-    "Shouldn't have a tab switch notification.");
-
-  info("Second debugger has loaded.");
-
-  executeSoon(function() {
-    callback();
-  });
-}
-
-function cleanup(callback)
-{
-  gPane1 = null;
-  gPane2 = null;
-  gNbox = null;
-
-  closeDebuggerAndFinish(false, function() {
-    removeTab(gTab1);
-    removeTab(gTab2);
-    removeTab(gTab3);
-    removeTab(gTab4);
-    gTab1 = null;
-    gTab2 = null;
-    gTab3 = null;
-    gTab4 = null;
-
-    callback();
-  });
-}

--- a/browser/devtools/framework/Sidebar.jsm
+++ b/browser/devtools/framework/Sidebar.jsm
@@ -56,24 +56,24 @@ ToolSidebar.prototype = {
     iframe.setAttribute("src", url);
     iframe.tooltip = "aHTMLTooltip";
 
     let tab = this._tabbox.tabs.appendItem();
     tab.setAttribute("label", ""); // Avoid showing "undefined" while the tab is loading
 
     let onIFrameLoaded = function() {
       tab.setAttribute("label", iframe.contentDocument.title);
-      iframe.removeEventListener("DOMContentLoaded", onIFrameLoaded, true);
+      iframe.removeEventListener("load", onIFrameLoaded, true);
       if ("setPanel" in iframe.contentWindow) {
         iframe.contentWindow.setPanel(this._toolPanel, iframe);
       }
       this.emit(id + "-ready");
     }.bind(this);
 
-    iframe.addEventListener("DOMContentLoaded", onIFrameLoaded, true);
+    iframe.addEventListener("load", onIFrameLoaded, true);
 
     let tabpanel = this._panelDoc.createElementNS(XULNS, "tabpanel");
     tabpanel.setAttribute("id", "sidebar-panel-" + id);
     tabpanel.appendChild(iframe);
     this._tabbox.tabpanels.appendChild(tabpanel);
 
     this._tooltip = this._panelDoc.createElementNS(XULNS, "tooltip");
     this._tooltip.id = "aHTMLTooltip";
@@ -86,17 +86,17 @@ ToolSidebar.prototype = {
     this._tabs.set(id, tab);
 
     if (selected) {
       // For some reason I don't understand, if we call this.select in this
       // event loop (after inserting the tab), the tab will never get the
       // the "selected" attribute set to true.
       this._panelDoc.defaultView.setTimeout(function() {
         this.select(id);
-      }.bind(this), 0);
+      }.bind(this), 10);
     }
 
     this.emit("new-tab-registered", id);
   },
 
   /**
    * Select a specific tab.
    */

--- a/browser/devtools/framework/test/browser_toolbox_sidebar.js
+++ b/browser/devtools/framework/test/browser_toolbox_sidebar.js
@@ -17,17 +17,17 @@ function test() {
                   "</hbox>" +
                   "</window>";
 
   const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
   const tab2URL = "data:text/html;charset=utf8,<title>2</title><p>2</p>";
   const tab3URL = "data:text/html;charset=utf8,<title>3</title><p>3</p>";
 
   let panelDoc;
-
+  let tab1Selected = false;
   let registeredTabs = {};
   let readyTabs = {};
 
   let toolDefinition = {
     id: "fakeTool4242",
     killswitch: "devtools.fakeTool4242.enabled",
     url: toolURL,
     label: "FAKE TOOL!!!",
@@ -58,45 +58,52 @@ function test() {
       let tabbox = panel.panelDoc.getElementById("sidebar");
       panel.sidebar = new ToolSidebar(tabbox, panel, true);
 
       panel.sidebar.on("new-tab-registered", function(event, id) {
         registeredTabs[id] = true;
       });
 
       panel.sidebar.once("tab1-ready", function(event) {
+        info(event);
         readyTabs.tab1 = true;
-        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
-          allTabsReady(panel);
-        }
+        allTabsReady(panel);
       });
 
       panel.sidebar.once("tab2-ready", function(event) {
+        info(event);
         readyTabs.tab2 = true;
-        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
-          allTabsReady(panel);
-        }
+        allTabsReady(panel);
       });
 
       panel.sidebar.once("tab3-ready", function(event) {
+        info(event);
         readyTabs.tab3 = true;
-        if (readyTabs.tab1 && readyTabs.tab2 && readyTabs.tab3) {
-          allTabsReady(panel);
-        }
+        allTabsReady(panel);
+      });
+
+      panel.sidebar.once("tab1-selected", function(event) {
+        info(event);
+        tab1Selected = true;
+        allTabsReady(panel);
       });
 
       panel.sidebar.addTab("tab1", tab1URL, true);
       panel.sidebar.addTab("tab2", tab2URL);
       panel.sidebar.addTab("tab3", tab3URL);
 
       panel.sidebar.show();
     }).then(null, console.error);
   });
 
   function allTabsReady(panel) {
+    if (!tab1Selected || !readyTabs.tab1 || !readyTabs.tab2 || !readyTabs.tab3) {
+      return;
+    }
+
     ok(registeredTabs.tab1, "tab1 registered");
     ok(registeredTabs.tab2, "tab2 registered");
     ok(registeredTabs.tab3, "tab3 registered");
     ok(readyTabs.tab1, "tab1 ready");
     ok(readyTabs.tab2, "tab2 ready");
     ok(readyTabs.tab3, "tab3 ready");
 
     let tabs = panel.sidebar._tabbox.querySelectorAll("tab");

--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -1,14 +1,15 @@
 # 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/.
 
 browser.jar:
     content/browser/devtools/widgets.css          (shared/widgets/widgets.css)
+    content/browser/devtools/widgets/VariablesView.xul (shared/widgets/VariablesView.xul)
     content/browser/devtools/markup-view.xhtml    (markupview/markup-view.xhtml)
     content/browser/devtools/markup-view.css      (markupview/markup-view.css)
     content/browser/devtools/netmonitor.xul           (netmonitor/netmonitor.xul)
     content/browser/devtools/netmonitor.css           (netmonitor/netmonitor.css)
     content/browser/devtools/netmonitor-controller.js (netmonitor/netmonitor-controller.js)
     content/browser/devtools/netmonitor-view.js       (netmonitor/netmonitor-view.js)
     content/browser/NetworkPanel.xhtml            (webconsole/NetworkPanel.xhtml)
     content/browser/devtools/webconsole.js        (webconsole/webconsole.js)

--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/browser/devtools/netmonitor/netmonitor-view.js
@@ -487,28 +487,28 @@ create({ constructor: RequestsMenuView, 
       case "status": {
         let node = $(".requests-menu-status", aItem.target);
         node.setAttribute("code", aValue);
         break;
       }
       case "contentSize": {
         let size = (aValue / 1024).toFixed(CONTENT_SIZE_DECIMALS);
         let node = $(".requests-menu-size", aItem.target);
-        node.setAttribute("value", L10N.getFormatStr("networkMenu.size", size));
+        node.setAttribute("value", L10N.getFormatStr("networkMenu.sizeKB", size));
         break;
       }
       case "mimeType": {
         let type = aValue.split(";")[0].split("/")[1] || "?";
         let node = $(".requests-menu-type", aItem.target);
         node.setAttribute("value", CONTENT_MIME_TYPE_ABBREVIATIONS[type] || type);
         break;
       }
       case "totalTime": {
         let node = $(".requests-menu-timings-total", aItem.target);
-        node.setAttribute("value", L10N.getFormatStr("networkMenu.total", aValue));
+        node.setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", aValue));
         break;
       }
     }
   },
 
   /**
    * Creates a waterfall representing timing information in a network request item view.
    *
@@ -853,17 +853,17 @@ create({ constructor: NetworkDetailsView
    *
    * @param string aName
    *        The type of headers to populate (request or response).
    * @param object aResponse
    *        The message received from the server.
    */
   _addHeaders: function NVND__addHeaders(aName, aResponse) {
     let kb = (aResponse.headersSize / 1024).toFixed(HEADERS_SIZE_DECIMALS);
-    let size = L10N.getFormatStr("networkMenu.size", kb);
+    let size = L10N.getFormatStr("networkMenu.sizeKB", kb);
     let headersScope = this._headers.addScope(aName + " (" + size + ")");
     headersScope.expanded = true;
 
     for (let header of aResponse.headers) {
       let headerVar = headersScope.addVar(header.name, { null: true }, true);
       headerVar.setGrip(header.value);
     }
   },
@@ -1078,42 +1078,42 @@ create({ constructor: NetworkDetailsView
 
     let tabboxWidth = $("#details-pane").getAttribute("width");
     let availableWidth = tabboxWidth / 2; // Other nodes also take some space.
     let scale = Math.max(availableWidth / aResponse.totalTime, 0);
 
     $("#timings-summary-blocked .requests-menu-timings-box")
       .setAttribute("width", blocked * scale);
     $("#timings-summary-blocked .requests-menu-timings-total")
-      .setAttribute("value", L10N.getFormatStr("networkMenu.total", blocked));
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", blocked));
 
     $("#timings-summary-dns .requests-menu-timings-box")
       .setAttribute("width", dns * scale);
     $("#timings-summary-dns .requests-menu-timings-total")
-      .setAttribute("value", L10N.getFormatStr("networkMenu.total", dns));
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", dns));
 
     $("#timings-summary-connect .requests-menu-timings-box")
       .setAttribute("width", connect * scale);
     $("#timings-summary-connect .requests-menu-timings-total")
-      .setAttribute("value", L10N.getFormatStr("networkMenu.total", connect));
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", connect));
 
     $("#timings-summary-send .requests-menu-timings-box")
       .setAttribute("width", send * scale);
     $("#timings-summary-send .requests-menu-timings-total")
-      .setAttribute("value", L10N.getFormatStr("networkMenu.total", send));
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", send));
 
     $("#timings-summary-wait .requests-menu-timings-box")
       .setAttribute("width", wait * scale);
     $("#timings-summary-wait .requests-menu-timings-total")
-      .setAttribute("value", L10N.getFormatStr("networkMenu.total", wait));
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", wait));
 
     $("#timings-summary-receive .requests-menu-timings-box")
       .setAttribute("width", receive * scale);
     $("#timings-summary-receive .requests-menu-timings-total")
-      .setAttribute("value", L10N.getFormatStr("networkMenu.total", receive));
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", receive));
 
     $("#timings-summary-dns .requests-menu-timings-box")
       .style.transform = "translateX(" + (scale * blocked) + "px)";
     $("#timings-summary-connect .requests-menu-timings-box")
       .style.transform = "translateX(" + (scale * (blocked + dns)) + "px)";
     $("#timings-summary-send .requests-menu-timings-box")
       .style.transform = "translateX(" + (scale * (blocked + dns + connect)) + "px)";
     $("#timings-summary-wait .requests-menu-timings-box")

--- a/browser/devtools/netmonitor/test/browser_net_content-type.js
+++ b/browser/devtools/netmonitor/test/browser_net_content-type.js
@@ -4,62 +4,62 @@
 /**
  * Tests if different response content types are handled correctly.
  */
 
 function test() {
   initNetMonitor(CONTENT_TYPE_URL).then(([aTab, aDebuggee, aMonitor]) => {
     info("Starting test... ");
 
-    let { document, SourceEditor, NetMonitorView } = aMonitor.panelWin;
+    let { document, L10N, SourceEditor, NetMonitorView } = aMonitor.panelWin;
     let { RequestsMenu } = NetMonitorView;
 
     RequestsMenu.lazyUpdate = false;
 
     waitForNetworkEvents(aMonitor, 6).then(() => {
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
         "GET", CONTENT_TYPE_SJS + "?fmt=xml", {
           status: 200,
           type: "xml",
-          size: "0.04kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.04),
           time: true
         });
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(1),
         "GET", CONTENT_TYPE_SJS + "?fmt=css", {
           status: 200,
           type: "css",
-          size: "0.03kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.03),
           time: true
         });
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(2),
         "GET", CONTENT_TYPE_SJS + "?fmt=js", {
           status: 200,
           type: "js",
-          size: "0.03kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.03),
           time: true
         });
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(3),
         "GET", CONTENT_TYPE_SJS + "?fmt=json", {
           status: 200,
           type: "json",
-          size: "0.03kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.03),
           time: true
         });
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(4),
         "GET", CONTENT_TYPE_SJS + "?fmt=bogus", {
           status: 404,
           type: "html",
-          size: "0.02kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.02),
           time: true
         });
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(5),
         "GET", TEST_IMAGE, {
           status: 200,
           type: "png",
-          size: "0.76kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.76),
           time: true
         });
 
       EventUtils.sendMouseEvent({ type: "mousedown" },
         document.getElementById("details-pane-toggle"));
       EventUtils.sendMouseEvent({ type: "mousedown" },
         document.querySelectorAll("#details-pane tab")[3]);
 

--- a/browser/devtools/netmonitor/test/browser_net_post-data.js
+++ b/browser/devtools/netmonitor/test/browser_net_post-data.js
@@ -15,24 +15,24 @@ function test() {
     RequestsMenu.lazyUpdate = false;
     NetworkDetails._params.lazyEmpty = false;
 
     waitForNetworkEvents(aMonitor, 0, 2).then(() => {
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
         "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=urlencoded", {
           status: 200,
           type: "plain",
-          size: "0.01kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.01),
           time: true
         });
       verifyRequestItemTarget(RequestsMenu.getItemAtIndex(1),
         "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=multipart", {
           status: 200,
           type: "plain",
-          size: "0.01kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.01),
           time: true
         });
 
       EventUtils.sendMouseEvent({ type: "mousedown" },
         document.getElementById("details-pane-toggle"));
       EventUtils.sendMouseEvent({ type: "mousedown" },
         document.querySelectorAll("#details-pane tab")[2]);
 

--- a/browser/devtools/netmonitor/test/browser_net_prefs-and-l10n.js
+++ b/browser/devtools/netmonitor/test/browser_net_prefs-and-l10n.js
@@ -22,18 +22,18 @@ function test() {
 
       let bundleName = "chrome://browser/locale/devtools/netmonitor.properties";
       let stringBundle = Services.strings.createBundle(bundleName);
 
       is(L10N.getStr("netmonitor.label"),
         stringBundle.GetStringFromName("netmonitor.label"),
         "The getStr() method didn't return the expected string.");
 
-      is(L10N.getFormatStr("networkMenu.total", "foo"),
-        stringBundle.formatStringFromName("networkMenu.total", ["foo"], 1),
+      is(L10N.getFormatStr("networkMenu.totalMS", "foo"),
+        stringBundle.formatStringFromName("networkMenu.totalMS", ["foo"], 1),
         "The getFormatStr() method didn't return the expected string.");
     }
 
     function testPrefs() {
       let { Prefs } = aMonitor.panelWin;
 
       is(Prefs.root, "devtools.netmonitor",
         "The preferences object should have a correct root path.");

--- a/browser/devtools/netmonitor/test/browser_net_simple-request-data.js
+++ b/browser/devtools/netmonitor/test/browser_net_simple-request-data.js
@@ -4,17 +4,17 @@
 /**
  * Tests if requests render correct information in the menu UI.
  */
 
 function test() {
   initNetMonitor(SIMPLE_SJS).then(([aTab, aDebuggee, aMonitor]) => {
     info("Starting test... ");
 
-    let { NetMonitorView } = aMonitor.panelWin;
+    let { L10N, NetMonitorView } = aMonitor.panelWin;
     let { RequestsMenu } = NetMonitorView;
 
     RequestsMenu.lazyUpdate = false;
 
     waitForNetworkEvents(aMonitor, 1)
       .then(() => teardown(aMonitor))
       .then(finish);
 
@@ -157,17 +157,17 @@ function test() {
 
       is(requestItem.attachment.contentSize, "12",
         "The contentSize attachment has an incorrect value.");
       is(requestItem.attachment.mimeType, "text/plain; charset=utf-8",
         "The mimeType attachment has an incorrect value.");
 
       verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS, {
         type: "plain",
-        size: "0.01kb"
+        size: L10N.getFormatStr("networkMenu.sizeKB", 0.01),
       });
     });
 
     aMonitor.panelWin.once("NetMonitor:NetworkEventUpdated:ResponseContent", () => {
       let requestItem = RequestsMenu.getItemAtIndex(0);
 
       ok(requestItem.attachment.responseContent,
         "There should be a responseContent attachment available.");
@@ -175,17 +175,17 @@ function test() {
         "The responseContent attachment has an incorrect |content.mimeType| property.");
       is(requestItem.attachment.responseContent.content.text, "Hello world!",
         "The responseContent attachment has an incorrect |content.text| property.");
       is(requestItem.attachment.responseContent.content.size, 12,
         "The responseContent attachment has an incorrect |content.size| property.");
 
       verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS, {
         type: "plain",
-        size: "0.01kb"
+        size: L10N.getFormatStr("networkMenu.sizeKB", 0.01),
       });
     });
 
     aMonitor.panelWin.once("NetMonitor:NetworkEventUpdating:EventTimings", () => {
       let requestItem = RequestsMenu.getItemAtIndex(0);
 
       is(typeof requestItem.attachment.totalTime, "number",
         "The attached totalTime is incorrect.");

--- a/browser/devtools/netmonitor/test/browser_net_simple-request-details.js
+++ b/browser/devtools/netmonitor/test/browser_net_simple-request-details.js
@@ -66,17 +66,17 @@ function test() {
       is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
         "The empty notice should not be displayed in this tabpanel.");
 
       let responseScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
       let requestScope = tabpanel.querySelectorAll(".variables-view-scope")[1];
 
       is(responseScope.querySelector(".name").getAttribute("value"),
         L10N.getStr("responseHeaders") + " (" +
-        L10N.getFormatStr("networkMenu.size", "0.169") + ")",
+        L10N.getFormatStr("networkMenu.sizeKB", "0.169") + ")",
         "The response headers scope doesn't have the correct title.");
 
       ok(requestScope.querySelector(".name").getAttribute("value").contains(
         L10N.getStr("requestHeaders") + " (0."),
         // Can't test for full request headers title because the size may
         // vary across platforms ("User-Agent" header differs).
         "The request headers scope doesn't have the correct title.");
 
@@ -191,35 +191,35 @@ function test() {
 
       let tab = document.querySelectorAll("#details-pane tab")[4];
       let tabpanel = document.querySelectorAll("#details-pane tabpanel")[4];
 
       is(tab.getAttribute("selected"), "true",
         "The timings tab in the network details pane should be selected.");
 
       ok(tabpanel.querySelector("#timings-summary-blocked .requests-menu-timings-total")
-        .getAttribute("value").match(/[0-9]+ms$/),
+        .getAttribute("value").match(/[0-9]+/),
         "The blocked timing info does not appear to be correct.");
 
       ok(tabpanel.querySelector("#timings-summary-dns .requests-menu-timings-total")
-        .getAttribute("value").match(/[0-9]+ms$/),
+        .getAttribute("value").match(/[0-9]+/),
         "The dns timing info does not appear to be correct.");
 
       ok(tabpanel.querySelector("#timings-summary-connect .requests-menu-timings-total")
-        .getAttribute("value").match(/[0-9]+ms$/),
+        .getAttribute("value").match(/[0-9]+/),
         "The connect timing info does not appear to be correct.");
 
       ok(tabpanel.querySelector("#timings-summary-send .requests-menu-timings-total")
-        .getAttribute("value").match(/[0-9]+ms$/),
+        .getAttribute("value").match(/[0-9]+/),
         "The send timing info does not appear to be correct.");
 
       ok(tabpanel.querySelector("#timings-summary-wait .requests-menu-timings-total")
-        .getAttribute("value").match(/[0-9]+ms$/),
+        .getAttribute("value").match(/[0-9]+/),
         "The wait timing info does not appear to be correct.");
 
       ok(tabpanel.querySelector("#timings-summary-receive .requests-menu-timings-total")
-        .getAttribute("value").match(/[0-9]+ms$/),
+        .getAttribute("value").match(/[0-9]+/),
         "The receive timing info does not appear to be correct.");
     }
 
     aDebuggee.location.reload();
   });
 }

--- a/browser/devtools/netmonitor/test/browser_net_status-codes.js
+++ b/browser/devtools/netmonitor/test/browser_net_status-codes.js
@@ -17,45 +17,45 @@ function test() {
 
     waitForNetworkEvents(aMonitor, 5).then(() => {
       let requestItems = [];
 
       verifyRequestItemTarget(requestItems[0] = RequestsMenu.getItemAtIndex(0),
         "GET", STATUS_CODES_SJS + "?sts=100", {
           status: 101,
           type: "plain",
-          size: "0.00kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", "0.00"),
           time: true
         });
       verifyRequestItemTarget(requestItems[1] = RequestsMenu.getItemAtIndex(1),
         "GET", STATUS_CODES_SJS + "?sts=200", {
           status: 202,
           type: "plain",
-          size: "0.02kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.02),
           time: true
         });
       verifyRequestItemTarget(requestItems[2] = RequestsMenu.getItemAtIndex(2),
         "GET", STATUS_CODES_SJS + "?sts=300", {
           status: 303,
           type: "plain",
-          size: "0.00kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", "0.00"),
           time: true
         });
       verifyRequestItemTarget(requestItems[3] = RequestsMenu.getItemAtIndex(3),
         "GET", STATUS_CODES_SJS + "?sts=400", {
           status: 404,
           type: "plain",
-          size: "0.02kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.02),
           time: true
         });
       verifyRequestItemTarget(requestItems[4] = RequestsMenu.getItemAtIndex(4),
         "GET", STATUS_CODES_SJS + "?sts=500", {
           status: 501,
           type: "plain",
-          size: "0.02kb",
+          size: L10N.getFormatStr("networkMenu.sizeKB", 0.02),
           time: true
         });
 
       // Test summaries...
       EventUtils.sendMouseEvent({ type: "mousedown" },
         document.querySelectorAll("#details-pane tab")[0]);
 
       EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[0].target);

--- a/browser/devtools/shared/widgets/VariablesView.jsm
+++ b/browser/devtools/shared/widgets/VariablesView.jsm
@@ -913,16 +913,28 @@ VariablesView.prototype = {
   _boxObject: null,
   _searchboxNode: null,
   _searchboxContainer: null,
   _searchboxPlaceholder: "",
   _emptyTextNode: null,
   _emptyTextValue: ""
 };
 
+VariablesView.NON_SORTABLE_CLASSES = [
+  "Array",
+  "Int8Array",
+  "Uint8Array",
+  "Int16Array",
+  "Uint16Array",
+  "Int32Array",
+  "Uint32Array",
+  "Float32Array",
+  "Float64Array"
+];
+
 /**
  * Generates the string evaluated when performing simple value changes.
  *
  * @param Variable | Property aItem
  *        The current variable or property.
  * @param string aCurrentString
  *        The trimmed user inputted string.
  * @return string
@@ -978,17 +990,18 @@ VariablesView.getterOrSetterEvalMacro = 
     case "undefined":
       let mirrorType = type == "get" ? "set" : "get";
       let mirrorLookup = type == "get" ? "__lookupSetter__" : "__lookupGetter__";
 
       // If the parent object will end up without any getter or setter,
       // morph it into a plain value.
       if ((type == "set" && propertyObject.getter.type == "undefined") ||
           (type == "get" && propertyObject.setter.type == "undefined")) {
-        return VariablesView.overrideValueEvalMacro(propertyObject, "undefined");
+        // Make sure the right getter/setter to value override macro is applied to the target object.
+        return propertyObject.evaluationMacro(propertyObject, "undefined");
       }
 
       // Construct and return the getter/setter removal evaluation string.
       // e.g: Object.defineProperty(foo, "bar", {
       //   get: foo.__lookupGetter__("bar"),
       //   set: undefined,
       //   enumerable: true,
       //   configurable: true
@@ -1036,17 +1049,20 @@ VariablesView.getterOrSetterEvalMacro = 
 /**
  * Function invoked when a getter or setter is deleted.
  *
  * @param Property aItem
  *        The current getter or setter property.
  */
 VariablesView.getterOrSetterDeleteCallback = function(aItem) {
   aItem._disable();
-  aItem.ownerView.eval(VariablesView.getterOrSetterEvalMacro(aItem, ""));
+
+  // Make sure the right getter/setter to value override macro is applied to the target object.
+  aItem.ownerView.eval(aItem.evaluationMacro(aItem, ""));
+
   return true; // Don't hide the element.
 };
 
 /**
  * A Scope is an object holding Variable instances.
  * Iterable via "for (let [name, variable] in instance) { }".
  *
  * @param VariablesView aView
@@ -1412,16 +1428,23 @@ Scope.prototype = {
       if (!item._isExpanded) {
         return false;
       }
     }
     return true;
   },
 
   /**
+   * Focus this scope.
+   */
+  focus: function S_focus() {
+    this._variablesView._focusItem(this);
+  },
+
+  /**
    * Adds an event listener for a certain event on this scope's title.
    * @param string aName
    * @param function aCallback
    * @param boolean aCapture
    */
   addEventListener: function S_addEventListener(aName, aCallback, aCapture) {
     this._title.addEventListener(aName, aCallback, aCapture);
   },
@@ -1444,16 +1467,28 @@ Scope.prototype = {
 
   /**
    * Gets the name associated with this item.
    * @return string
    */
   get name() this._nameString,
 
   /**
+   * Gets the displayed value for this item.
+   * @return string
+   */
+  get displayValue() this._valueString,
+
+  /**
+   * Gets the class names used for the displayed value.
+   * @return string
+   */
+  get displayValueClassName() this._valueClassName,
+
+  /**
    * Gets the element associated with this item.
    * @return nsIDOMNode
    */
   get target() this._target,
 
   /**
    * Initializes this scope's id, view and binds event listeners.
    *
@@ -1520,17 +1555,17 @@ Scope.prototype = {
   /**
    * The click listener for this scope's title.
    */
   _onClick: function S__onClick(e) {
     if (e.target == this._inputNode) {
       return;
     }
     this.toggle();
-    this._variablesView._focusItem(this);
+    this.focus();
   },
 
   /**
    * Lazily appends a node to this scope's enumerable or non-enumerable
    * container. Once a certain number of nodes have been batched, they
    * will be appended.
    *
    * @param boolean aImmediateFlag
@@ -1902,17 +1937,17 @@ ViewHelpers.create({ constructor: Variab
    *        it will be inferred from the value.
    *        e.g. - { someProp0: { value: 42 },
    *                 someProp1: { value: true },
    *                 someProp2: { value: "nasu" },
    *                 someProp3: { value: { type: "undefined" } },
    *                 someProp4: { value: { type: "null" } },
    *                 someProp5: { value: { type: "object", class: "Object" } },
    *                 someProp6: { get: { type: "object", class: "Function" },
-   *                              set: { type: "undefined" } }
+   *                              set: { type: "undefined" } } }
    * @param object aOptions [optional]
    *        Additional options for adding the properties. Supported options:
    *        - sorted: true to sort all the properties before adding them
    *        - callback: function invoked after each property is added
    */
   addProperties: function V_addProperties(aProperties, aOptions = {}) {
     let propertyNames = Object.keys(aProperties);
 
@@ -2185,16 +2220,17 @@ ViewHelpers.create({ constructor: Variab
       if (this.ownerView.eval) {
         this.delete = VariablesView.getterOrSetterDeleteCallback;
         this.evaluationMacro = VariablesView.overrideValueEvalMacro;
       }
       // Deleting getters and setters individually is not allowed if no
       // evaluation method is provided.
       else {
         this.delete = null;
+        this.evaluationMacro = null;
       }
 
       let getter = this.addProperty("get", { value: descriptor.get });
       let setter = this.addProperty("set", { value: descriptor.set });
       getter.evaluationMacro = VariablesView.getterOrSetterEvalMacro;
       setter.evaluationMacro = VariablesView.getterOrSetterEvalMacro;
 
       getter.hideArrow();
@@ -2523,40 +2559,40 @@ ViewHelpers.create({ constructor: Variab
    */
   _onNameInputKeyPress: function V__onNameInputKeyPress(e) {
     e.stopPropagation();
 
     switch(e.keyCode) {
       case e.DOM_VK_RETURN:
       case e.DOM_VK_ENTER:
         this._saveNameInput(e);
-        this._variablesView._focusItem(this);
+        this.focus();
         return;
       case e.DOM_VK_ESCAPE:
         this._deactivateNameInput(e);
-        this._variablesView._focusItem(this);
+        this.focus();
         return;
     }
   },
 
   /**
    * The key press listener for this variable's editable value textbox.
    */
   _onValueInputKeyPress: function V__onValueInputKeyPress(e) {
     e.stopPropagation();
 
     switch(e.keyCode) {
       case e.DOM_VK_RETURN:
       case e.DOM_VK_ENTER:
         this._saveValueInput(e);
-        this._variablesView._focusItem(this);
+        this.focus();
         return;
       case e.DOM_VK_ESCAPE:
         this._deactivateValueInput(e);
-        this._variablesView._focusItem(this);
+        this.focus();
         return;
     }
   },
 
   /**
    * The click listener for the edit button.
    */
   _onEdit: function V__onEdit(e) {

new file mode 100644
--- /dev/null
+++ b/browser/devtools/shared/widgets/VariablesView.xul
@@ -0,0 +1,16 @@
+<?xml version="1.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/. -->
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<?xml-stylesheet href="chrome://browser/content/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+<!DOCTYPE window [
+  <!ENTITY % viewDTD SYSTEM "chrome://browser/locale/devtools/VariablesView.dtd">
+  %viewDTD;
+]>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        title="&PropertiesViewWindowTitle;">
+  <vbox id="variables" flex="1"/>
+</window>

--- a/browser/devtools/styleinspector/test/browser_ruleview_focus.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_focus.js
@@ -14,19 +14,19 @@ function openRuleView()
   var target = TargetFactory.forTab(gBrowser.selectedTab);
   gDevTools.showToolbox(target, "inspector").then(function(toolbox) {
     inspector = toolbox.getCurrentPanel();
     inspector.sidebar.select("ruleview");
 
     // Highlight a node.
     let node = content.document.getElementsByTagName("h1")[0];
     inspector.selection.once("new-node", testFocus);
-    executeSoon(function() {
-      inspector.selection.setNode(doc.body);
-    });
+
+    inspector.sidebar.once("ruleview-ready",
+                           () => inspector.selection.setNode(doc.body));
   });
 }
 
 function testFocus()
 {
   let win = inspector.sidebar.getWindowForTab("ruleview");
   let brace = win.document.querySelectorAll(".ruleview-ruleclose")[0];
 

--- a/browser/devtools/webconsole/HUDService.jsm
+++ b/browser/devtools/webconsole/HUDService.jsm
@@ -5,38 +5,51 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
-const CONSOLEAPI_CLASS_ID = "{b49c18f8-3379-4fc0-8c90-d7772c1a9ff3}";
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
     "resource:///modules/devtools/gDevTools.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
     "resource:///modules/devtools/Target.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Services",
     "resource://gre/modules/Services.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
+  "resource://gre/modules/devtools/dbg-server.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "DebuggerClient",
+  "resource://gre/modules/devtools/dbg-client.jsm");
+
 XPCOMUtils.defineLazyModuleGetter(this, "WebConsoleUtils",
     "resource://gre/modules/devtools/WebConsoleUtils.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "webConsoleDefinition",
+    "resource:///modules/devtools/ToolDefinitions.jsm");
+
 XPCOMUtils.defineLazyModuleGetter(this, "Promise",
     "resource://gre/modules/commonjs/sdk/core/promise.js");
 
+XPCOMUtils.defineLazyModuleGetter(this, "ViewHelpers",
+    "resource:///modules/devtools/ViewHelpers.jsm");
+
 const STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let l10n = new WebConsoleUtils.l10n(STRINGS_URI);
 
+const BROWSER_CONSOLE_WINDOW_FEATURES = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
+
 this.EXPORTED_SYMBOLS = ["HUDService"];
 
 ///////////////////////////////////////////////////////////////////////////
 //// The HUD service
 
 function HUD_SERVICE()
 {
   this.hudReferences = {};
@@ -70,24 +83,49 @@ HUD_SERVICE.prototype =
 
   /**
    * Open a Web Console for the given target.
    *
    * @see devtools/framework/Target.jsm for details about targets.
    *
    * @param object aTarget
    *        The target that the web console will connect to.
-   * @param nsIDOMElement aIframe
-   *        The iframe element into which to place the web console.
+   * @param nsIDOMWindow aIframeWindow
+   *        The window where the web console UI is already loaded.
+   * @param nsIDOMWindow aChromeWindow
+   *        The window of the web console owner.
    * @return object
    *         A Promise object for the opening of the new WebConsole instance.
    */
-  openWebConsole: function HS_openWebConsole(aTarget, aIframe)
+  openWebConsole:
+  function HS_openWebConsole(aTarget, aIframeWindow, aChromeWindow)
   {
-    let hud = new WebConsole(aTarget, aIframe);
+    let hud = new WebConsole(aTarget, aIframeWindow, aChromeWindow);
+    this.hudReferences[hud.hudId] = hud;
+    return hud.init();
+  },
+
+  /**
+   * Open a Browser Console for the given target.
+   *
+   * @see devtools/framework/Target.jsm for details about targets.
+   *
+   * @param object aTarget
+   *        The target that the browser console will connect to.
+   * @param nsIDOMWindow aIframeWindow
+   *        The window where the browser console UI is already loaded.
+   * @param nsIDOMWindow aChromeWindow
+   *        The window of the browser console owner.
+   * @return object
+   *         A Promise object for the opening of the new BrowserConsole instance.
+   */
+  openBrowserConsole:
+  function HS_openBrowserConsole(aTarget, aIframeWindow, aChromeWindow)
+  {
+    let hud = new BrowserConsole(aTarget, aIframeWindow, aChromeWindow);
     this.hudReferences[hud.hudId] = hud;
     return hud.init();
   },
 
   /**
    * Returns the HeadsUpDisplay object associated to a content window.
    *
    * @param nsIDOMWindow aContentWindow
@@ -139,46 +177,50 @@ HUD_SERVICE.prototype =
 };
 
 
 /**
  * A WebConsole instance is an interactive console initialized *per target*
  * that displays console log data as well as provides an interactive terminal to
  * manipulate the target's document content.
  *
- * This object only wraps the iframe that holds the Web Console UI.
+ * This object only wraps the iframe that holds the Web Console UI. This is
+ * meant to be an integration point between the Firefox UI and the Web Console
+ * UI and features.
  *
  * @constructor
  * @param object aTarget
  *        The target that the web console will connect to.
- * @param nsIDOMElement aIframe
- *        iframe into which we should create the WebConsole UI.
+ * @param nsIDOMWindow aIframeWindow
+ *        The window where the web console UI is already loaded.
+ * @param nsIDOMWindow aChromeWindow
+ *        The window of the web console owner.
  */
-function WebConsole(aTarget, aIframe)
+function WebConsole(aTarget, aIframeWindow, aChromeWindow)
 {
-  this.iframe = aIframe;
-  this.iframe.className = "web-console-frame";
-  this.chromeDocument = this.iframe.ownerDocument;
-  this.chromeWindow = this.chromeDocument.defaultView;
+  this.iframeWindow = aIframeWindow;
+  this.chromeWindow = aChromeWindow;
   this.hudId = "hud_" + Date.now();
   this.target = aTarget;
 
   this.browserWindow = this.chromeWindow.top;
+
   let element = this.browserWindow.document.documentElement;
   if (element.getAttribute("windowtype") != "navigator:browser") {
     this.browserWindow = HUDService.currentContext();
   }
 }
 
 WebConsole.prototype = {
+  iframeWindow: null,
   chromeWindow: null,
-  chromeDocument: null,
+  browserWindow: null,
   hudId: null,
   target: null,
-  iframe: null,
+  _browserConsole: false,
   _destroyer: null,
 
   /**
    * Getter for HUDService.lastFinishedRequestCallback.
    *
    * @see HUDService.lastFinishedRequestCallback
    * @type function
    */
@@ -207,47 +249,18 @@ WebConsole.prototype = {
   /**
    * Initialize the Web Console instance.
    *
    * @return object
    *         A Promise for the initialization.
    */
   init: function WC_init()
   {
-    let deferred = Promise.defer();
-
-    let onIframeLoad = function() {
-      this.iframe.removeEventListener("load", onIframeLoad, true);
-      initUI();
-    }.bind(this);
-
-    let initUI = function() {
-      this.iframeWindow = this.iframe.contentWindow.wrappedJSObject;
-      this.ui = new this.iframeWindow.WebConsoleFrame(this);
-      this.ui.init().then(onSuccess, onFailure);
-    }.bind(this);
-
-    let onSuccess = function() {
-      deferred.resolve(this);
-    }.bind(this);
-
-    let onFailure = function(aReason) {
-      deferred.reject(aReason);
-    };
-
-    let win, doc;
-    if ((win = this.iframe.contentWindow) &&
-        (doc = win.document) &&
-        doc.readyState == "complete") {
-      initUI();
-    }
-    else {
-      this.iframe.addEventListener("load", onIframeLoad, true);
-    }
-    return deferred.promise;
+    this.ui = new this.iframeWindow.WebConsoleFrame(this);
+    return this.ui.init().then(() => this);
   },
 
   /**
    * Retrieve the Web Console panel title.
    *
    * @return string
    *         The Web Console panel title.
    */
@@ -355,16 +368,20 @@ WebConsole.prototype = {
    */
   viewSourceInDebugger:
   function WC_viewSourceInDebugger(aSourceURL, aSourceLine)
   {
     let self = this;
     let panelWin = null;
     let debuggerWasOpen = true;
     let toolbox = gDevTools.getToolbox(this.target);
+    if (!toolbox) {
+      self.viewSource(aSourceURL, aSourceLine);
+      return;
+    }
 
     if (!toolbox.getPanel("jsdebugger")) {
       debuggerWasOpen = false;
       let toolboxWin = toolbox.doc.defaultView;
       toolboxWin.addEventListener("Debugger:AfterSourcesAdded",
                                   function afterSourcesAdded() {
         toolboxWin.removeEventListener("Debugger:AfterSourcesAdded",
                                        afterSourcesAdded);
@@ -400,16 +417,50 @@ WebConsole.prototype = {
         return;
       }
       panelWin.removeEventListener("Debugger:SourceShown", onSource, false);
       panelWin.DebuggerView.editor.setCaretPosition(aSourceLine - 1);
     }
   },
 
   /**
+   * Retrieve information about the JavaScript debugger's stackframes list. This
+   * is used to allow the Web Console to evaluate code in the selected
+   * stackframe.
+   *
+   * @return object|null
+   *         An object which holds:
+   *         - frames: the active ThreadClient.cachedFrames array.
+   *         - selected: depth/index of the selected stackframe in the debugger
+   *         UI.
+   *         If the debugger is not open or if it's not paused, then |null| is
+   *         returned.
+   */
+  getDebuggerFrames: function WC_getDebuggerFrames()
+  {
+    let toolbox = gDevTools.getToolbox(this.target);
+    if (!toolbox) {
+      return null;
+    }
+    let panel = toolbox.getPanel("jsdebugger");
+    if (!panel) {
+      return null;
+    }
+    let framesController = panel.panelWin.gStackFrames;
+    let thread = framesController.activeThread;
+    if (thread && thread.paused) {
+      return {
+        frames: thread.cachedFrames,
+        selected: framesController.currentFrame,
+      };
+    }
+    return null;
+  },
+
+  /**
    * Destroy the object. Call this method to avoid memory leaks when the Web
    * Console is closed.
    *
    * @return object
    *         A Promise object that is resolved once the Web Console is closed.
    */
   destroy: function WC_destroy()
   {
@@ -447,21 +498,112 @@ WebConsole.prototype = {
     else {
       onDestroy();
     }
 
     return this._destroyer.promise;
   },
 };
 
+
+/**
+ * A BrowserConsole instance is an interactive console initialized *per target*
+ * that displays console log data as well as provides an interactive terminal to
+ * manipulate the target's document content.
+ *
+ * This object only wraps the iframe that holds the Browser Console UI. This is
+ * meant to be an integration point between the Firefox UI and the Browser Console
+ * UI and features.
+ *
+ * @constructor
+ * @param object aTarget
+ *        The target that the browser console will connect to.
+ * @param nsIDOMWindow aIframeWindow
+ *        The window where the browser console UI is already loaded.
+ * @param nsIDOMWindow aChromeWindow
+ *        The window of the browser console owner.
+ */
+function BrowserConsole()
+{
+  WebConsole.apply(this, arguments);
+}
+
+ViewHelpers.create({ constructor: BrowserConsole, proto: WebConsole.prototype },
+{
+  _browserConsole: true,
+  _bc_init: null,
+  _bc_destroyer: null,
+
+  $init: WebConsole.prototype.init,
+
+  /**
+   * Initialize the Browser Console instance.
+   *
+   * @return object
+   *         A Promise for the initialization.
+   */
+  init: function BC_init()
+  {
+    if (this._bc_init) {
+      return this._bc_init;
+    }
+
+    let window = this.iframeWindow;
+    let onClose = () => {
+      window.removeEventListener("unload", onClose);
+      this.destroy();
+    };
+    window.addEventListener("unload", onClose);
+
+    this._bc_init = this.$init().then((aReason) => {
+      let title = this.ui.rootElement.getAttribute("browserConsoleTitle");
+      this.ui.rootElement.setAttribute("title", title);
+      return aReason;
+    });
+
+    return this._bc_init;
+  },
+
+  $destroy: WebConsole.prototype.destroy,
+
+  /**
+   * Destroy the object.
+   *
+   * @return object
+   *         A Promise object that is resolved once the Browser Console is closed.
+   */
+  destroy: function BC_destroy()
+  {
+    if (this._bc_destroyer) {
+      return this._bc_destroyer.promise;
+    }
+
+    this._bc_destroyer = Promise.defer();
+
+    let chromeWindow = this.chromeWindow;
+    this.$destroy().then(() =>
+      this.target.client.close(() => {
+        HeadsUpDisplayUICommands._browserConsoleID = null;
+        chromeWindow.close();
+        this._bc_destroyer.resolve(null);
+      }));
+
+    return this._bc_destroyer.promise;
+  },
+});
+
+
 //////////////////////////////////////////////////////////////////////////
 // HeadsUpDisplayUICommands
 //////////////////////////////////////////////////////////////////////////
 
 var HeadsUpDisplayUICommands = {
+  _browserConsoleID: null,
+  _browserConsoleDefer: null,
+
   /**
    * Toggle the Web Console for the current tab.
    *
    * @return object
    *         A Promise for either the opening of the toolbox that holds the Web
    *         Console, or a Promise for the closing of the toolbox.
    */
   toggleHUD: function UIC_toggleHUD()
@@ -488,11 +630,88 @@ var HeadsUpDisplayUICommands = {
     if (!tab || !TargetFactory.isKnownTab(tab)) {
       return null;
     }
     let target = TargetFactory.forTab(tab);
     let toolbox = gDevTools.getToolbox(target);
     let panel = toolbox ? toolbox.getPanel("webconsole") : null;
     return panel ? panel.hud : null;
   },
+
+  /**
+   * Toggle the Browser Console.
+   */
+  toggleBrowserConsole: function UIC_toggleBrowserConsole()
+  {
+    if (this._browserConsoleID) {
+      let hud = HUDService.getHudReferenceById(this._browserConsoleID);
+      return hud.destroy();
+    }
+
+    if (this._browserConsoleDefer) {
+      return this._browserConsoleDefer.promise;
+    }
+
+    this._browserConsoleDefer = Promise.defer();
+
+    function connect()
+    {
+      let deferred = Promise.defer();
+
+      if (!DebuggerServer.initialized) {
+        DebuggerServer.init();
+        DebuggerServer.addBrowserActors();
+      }
+
+      let client = new DebuggerClient(DebuggerServer.connectPipe());
+      client.connect(() =>
+        client.listTabs((aResponse) =>
+          deferred.resolve({ form: aResponse, client: client })
+        ));
+
+      return deferred.promise;
+    }
+
+    let target;
+    function getTarget(aConnection)
+    {
+      let options = {
+        form: aConnection.form,
+        client: aConnection.client,
+        chrome: true,
+      };
+
+      return TargetFactory.forRemoteTab(options);
+    }
+
+    function openWindow(aTarget)
+    {
+      target = aTarget;
+
+      let deferred = Promise.defer();
+
+      let win = Services.ww.openWindow(null, webConsoleDefinition.url, "_blank",
+                                       BROWSER_CONSOLE_WINDOW_FEATURES, null);
+      win.addEventListener("load", function onLoad() {
+        win.removeEventListener("load", onLoad);
+        deferred.resolve(win);
+      });
+
+      return deferred.promise;
+    }
+
+    connect().then(getTarget).then(openWindow).then((aWindow) =>
+      HUDService.openBrowserConsole(target, aWindow, aWindow)
+        .then((aBrowserConsole) => {
+          this._browserConsoleID = aBrowserConsole.hudId;
+          this._browserConsoleDefer.resolve(aBrowserConsole);
+          this._browserConsoleDefer = null;
+        }));
+
+    return this._browserConsoleDefer.promise;
+  },
+
+  get browserConsole() {
+    return HUDService.getHudReferenceById(this._browserConsoleID);
+  },
 };
 
 const HUDService = new HUD_SERVICE();

--- a/browser/devtools/webconsole/WebConsolePanel.jsm
+++ b/browser/devtools/webconsole/WebConsolePanel.jsm
@@ -36,36 +36,62 @@ WebConsolePanel.prototype = {
    *
    * @return object
    *         A Promise that is resolved when the Web Console completes opening.
    */
   open: function WCP_open()
   {
     let parentDoc = this._toolbox.doc;
     let iframe = parentDoc.getElementById("toolbox-panel-iframe-webconsole");
-    let promise;
+    iframe.className = "web-console-frame";
+
+    // Make sure the iframe content window is ready.
+    let deferredIframe = Promise.defer();
+    let win, doc;
+    if ((win = iframe.contentWindow) &&
+        (doc = win.document) &&
+        doc.readyState == "complete") {
+      deferredIframe.resolve(null);
+    }
+    else {
+      iframe.addEventListener("load", function onIframeLoad() {
+        iframe.removeEventListener("load", onIframeLoad, true);
+        deferredIframe.resolve(null);
+      }, true);
+    }
 
     // Local debugging needs to make the target remote.
+    let promiseTarget;
     if (!this.target.isRemote) {
-      promise = this.target.makeRemote();
-    } else {
-      promise = Promise.resolve(this.target);
+      promiseTarget = this.target.makeRemote();
+    }
+    else {
+      promiseTarget = Promise.resolve(this.target);
     }
 
-    return promise
-      .then(function(aTarget) {
+    // 1. Wait for the iframe to load.
+    // 2. Wait for the remote target.
+    // 3. Open the Web Console.
+    return deferredIframe.promise
+      .then(() => promiseTarget)
+      .then((aTarget) => {
         this._frameWindow._remoteTarget = aTarget;
-        return HUDService.openWebConsole(this.target, iframe);
-      }.bind(this))
-      .then(function onSuccess(aWebConsole) {
+
+        let webConsoleUIWindow = iframe.contentWindow.wrappedJSObject;
+        let chromeWindow = iframe.ownerDocument.defaultView;
+
+        return HUDService.openWebConsole(this.target, webConsoleUIWindow,
+                                         chromeWindow);
+      })
+      .then((aWebConsole) => {
         this.hud = aWebConsole;
         this._isReady = true;
         this.emit("ready");
         return this;
-      }.bind(this), function onError(aReason) {
+      }, (aReason) => {
         let msg = "WebConsolePanel open failed. " +
                   aReason.error + ": " + aReason.message;
         dump(msg + "\n");
         Cu.reportError(msg);
       });
   },
 
   get target() this._toolbox.target,
@@ -75,15 +101,13 @@ WebConsolePanel.prototype = {
 
   destroy: function WCP_destroy()
   {
     if (this._destroyer) {
       return this._destroyer;
     }
 
     this._destroyer = this.hud.destroy();
-    this._destroyer.then(function() {
-      this.emit("destroyed");
-    }.bind(this));
+    this._destroyer.then(() => this.emit("destroyed"));
 
     return this._destroyer;
   },
 };

--- a/browser/devtools/webconsole/test/Makefile.in
+++ b/browser/devtools/webconsole/test/Makefile.in
@@ -37,17 +37,16 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_copying_multiple_messages_inserts_newlines_in_between.js \
 	browser_webconsole_bug_586388_select_all.js  \
 	browser_webconsole_bug_588967_input_expansion.js \
 	browser_webconsole_log_node_classes.js \
 	browser_webconsole_network_panel.js \
 	browser_webconsole_jsterm.js \
 	browser_webconsole_null_and_undefined_output.js \
 	browser_webconsole_output_order.js \
-	browser_webconsole_property_panel.js \
 	browser_webconsole_property_provider.js \
 	browser_webconsole_bug_587617_output_copy.js \
 	browser_webconsole_bug_585237_line_limit.js \
 	browser_webconsole_bug_582201_duplicate_errors.js \
 	browser_webconsole_bug_580454_timestamp_l10n.js \
 	browser_webconsole_netlogging.js \
 	browser_webconsole_bug_583816_No_input_and_Tab_key_pressed.js \
 	browser_webconsole_bug_594477_clickable_output.js \
@@ -111,20 +110,22 @@ MOCHITEST_BROWSER_FILES = \
 	browser_result_format_as_string.js \
 	browser_webconsole_bug_737873_mixedcontent.js \
 	browser_output_breaks_after_console_dir_uninspectable.js \
 	browser_console_log_inspectable_object.js \
 	browser_bug_638949_copy_link_location.js \
 	browser_output_longstring_expand.js \
 	browser_netpanel_longstring_expand.js \
 	browser_repeated_messages_accuracy.js \
+	browser_webconsole_bug_821877_csp_errors.js \
+	browser_eval_in_debugger_stackframe.js \
+	browser_console_variables_view.js \
+	browser_console_variables_view_while_debugging.js \
+	browser_console.js \
 	head.js \
-	browser_webconsole_bug_821877_csp_errors.js \
-	test-bug-821877-csperrors.html \
-	test-bug-821877-csperrors.html^headers^ \
 	$(NULL)
 
 ifeq ($(OS_ARCH), Darwin)
 MOCHITEST_BROWSER_FILES += \
         browser_webconsole_bug_804845_ctrl_key_nav.js \
         $(NULL)
 endif
 
@@ -212,11 +213,14 @@ MOCHITEST_BROWSER_FILES += \
 	test_bug_770099_bad_policy_uri.html \
 	test_bug_770099_bad_policy_uri.html^headers^ \
 	test-result-format-as-string.html \
 	test-bug-737873-mixedcontent.html \
 	test-repeated-messages.html \
 	test-bug-766001-console-log.js \
 	test-bug-766001-js-console-links.html \
 	test-bug-766001-js-errors.js \
+	test-bug-821877-csperrors.html \
+	test-bug-821877-csperrors.html^headers^ \
+	test-eval-in-stackframe.html \
 	$(NULL)
 
 include $(topsrcdir)/config/rules.mk

--- a/browser/devtools/webconsole/test/browser_bug664688_sandbox_update_after_navigation.js
+++ b/browser/devtools/webconsole/test/browser_bug664688_sandbox_update_after_navigation.js
@@ -47,17 +47,17 @@ function test()
             "jsterm input is also displayed");
 
       is(hud.outputNode.textContent.indexOf("Permission denied"), -1,
          "no permission denied errors");
 
       gBrowser.selectedBrowser.addEventListener("load", onPageLoad2, true);
       content.location = TEST_URI2;
     },
-    failureFn: finishTest,
+    failureFn: finishTestWithError,
   };
 
   function onPageLoad2() {
     gBrowser.selectedBrowser.removeEventListener("load", onPageLoad2, true);
 
     hud.jsterm.clearOutput();
     hud.jsterm.execute("window.location.href");
 
@@ -77,33 +77,33 @@ function test()
       isnot(node.textContent.indexOf("window.location.href"), -1,
             "jsterm input is also displayed");
       is(hud.outputNode.textContent.indexOf("Permission denied"), -1,
          "no permission denied errors");
 
       gBrowser.goBack();
       waitForSuccess(waitForBack);
     },
-    failureFn: finishTest,
+    failureFn: finishTestWithError,
   };
 
   let waitForBack = {
     name: "go back",
     validatorFn: function()
     {
       return content.location.href == TEST_URI1;
     },
     successFn: function()
     {
       hud.jsterm.clearOutput();
       hud.jsterm.execute("window.location.href");
 
       waitForSuccess(waitForLocation3);
     },
-    failureFn: finishTest,
+    failureFn: finishTestWithError,
   };
 
   let waitForLocation3 = {
     name: "window.location.href result is displayed after goBack()",
     validatorFn: function()
     {
       let node = hud.outputNode.getElementsByClassName("webconsole-msg-output")[0];
       return node && node.textContent.indexOf(TEST_URI1) > -1;
@@ -113,11 +113,17 @@ function test()
       let node = hud.outputNode.getElementsByClassName("webconsole-msg-input")[0];
       isnot(node.textContent.indexOf("window.location.href"), -1,
             "jsterm input is also displayed");
       is(hud.outputNode.textContent.indexOf("Permission denied"), -1,
          "no permission denied errors");
 
       executeSoon(finishTest);
     },
-    failureFn: finishTest,
+    failureFn: finishTestWithError,
   };
+
+  function finishTestWithError()
+  {
+    info("output content: " + hud.outputNode.textContent);
+    finishTest();
+  }
 }

new file mode 100644
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_console.js
@@ -0,0 +1,93 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Test the basic features of the Browser Console, bug 587757.
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-eval-in-stackframe.html";
+
+function test()
+{
+  HUDConsoleUI.toggleBrowserConsole().then(consoleOpened);
+}
+
+function consoleOpened(hud)
+{
+  hud.jsterm.clearOutput(true);
+
+  expectUncaughtException();
+  executeSoon(() => {
+    foobarExceptionBug587757();
+  });
+
+  // Add a message from a chrome window.
+  hud.iframeWindow.console.log("bug587757a");
+
+  // Add a message from a content window.
+  content.console.log("bug587757b");
+
+  // Test eval.
+  hud.jsterm.execute("document.location.href");
+
+  // Check for network requests.
+  let xhr = new XMLHttpRequest();
+  xhr.onload = () => info("xhr loaded, status is: " + xhr.status);
+  xhr.open("get", TEST_URI, true);
+  xhr.send();
+
+  let chromeConsole = -1;
+  let contentConsole = -1;
+  let execValue = -1;
+  let exception = -1;
+  let xhrRequest = false;
+
+  let output = hud.outputNode;
+  function performChecks()
+  {
+    let text = output.textContent;
+    chromeConsole = text.indexOf("bug587757a");
+    contentConsole = text.indexOf("bug587757b");
+    execValue = text.indexOf("browser.xul");
+    exception = text.indexOf("foobarExceptionBug587757");
+
+    xhrRequest = false;
+    let urls = output.querySelectorAll(".webconsole-msg-url");
+    for (let url of urls) {
+      if (url.value.indexOf(TEST_URI) > -1) {
+        xhrRequest = true;
+        break;
+      }
+    }
+  }
+
+  function showResults()
+  {
+    isnot(chromeConsole, -1, "chrome window console.log() is displayed");
+    isnot(contentConsole, -1, "content window console.log() is displayed");
+    isnot(execValue, -1, "jsterm eval result is displayed");
+    isnot(exception, -1, "exception is displayed");
+    ok(xhrRequest, "xhr request is displayed");
+  }
+
+  waitForSuccess({
+    name: "messages displayed",
+    validatorFn: () => {
+      performChecks();
+      return chromeConsole > -1 &&
+             contentConsole > -1 &&
+             execValue > -1 &&
+             exception > -1 &&
+             xhrRequest;
+    },
+    successFn: () => {
+      showResults();
+      executeSoon(finishTest);
+    },
+    failureFn: () => {
+      showResults();
+      info("output: " + output.textContent);
+      executeSoon(finishTest);
+    },
+  });
+}

--- a/browser/devtools/webconsole/test/browser_console_log_inspectable_object.js
+++ b/browser/devtools/webconsole/test/browser_console_log_inspectable_object.js
@@ -31,27 +31,28 @@ function performTest(hud)
     },
     successFn: function()
     {
       isnot(hud.outputNode.textContent.indexOf("myObj = {"), -1,
             "myObj = ... is shown");
 
       let clickable = hud.outputNode.querySelector(".hud-clickable");
       ok(clickable, "the console.log() object .hud-clickable was found");
-      isnot(clickable.textContent.indexOf("omgBug676722"), -1,
+      isnot(clickable.textContent.indexOf("Object"), -1,
             "clickable node content is correct");
 
-      document.addEventListener("popupshown", function _onPopupShown(aEvent) {
-        document.removeEventListener("popupshown", _onPopupShown);
+      hud.jsterm.once("variablesview-fetched",
+        (aEvent, aVar) => {
+          ok(aVar, "object inspector opened on click");
 
-        isnot(aEvent.target.label.indexOf("omgBug676722"), -1,
-           "object inspector opened on click");
-
-        executeSoon(finishTest);
-      });
+          findVariableViewProperties(aVar, [{
+            name: "abba",
+            value: "omgBug676722",
+          }], { webconsole: hud }).then(finishTest);
+        });
 
       executeSoon(function() {
         EventUtils.synthesizeMouse(clickable, 2, 2, {}, hud.iframeWindow);
       });
     },
     failureFn: finishTest,
   });
 }

new file mode 100644
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_console_variables_view.js
@@ -0,0 +1,178 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Test that makes sure web console eval happens in the user-selected stackframe
+// from the js debugger.
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-eval-in-stackframe.html";
+
+let gWebConsole, gJSTerm, gVariablesView;
+
+function test()
+{
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, consoleOpened);
+  }, true);
+}
+
+function consoleOpened(hud)
+{
+  gWebConsole = hud;
+  gJSTerm = hud.jsterm;
+  gJSTerm.execute("fooObj", onExecuteFooObj);
+}
+
+function onExecuteFooObj()
+{
+  let msg = gWebConsole.outputNode.querySelector(".webconsole-msg-output");
+  ok(msg, "output message found");
+  isnot(msg.textContent.indexOf("[object Object]"), -1, "message text check");
+
+  gJSTerm.once("variablesview-fetched", onFooObjFetch);
+
+  executeSoon(() =>
+    EventUtils.synthesizeMouse(msg, 2, 2, {}, gWebConsole.iframeWindow)
+  );
+}
+
+function onFooObjFetch(aEvent, aVar)
+{
+  gVariablesView = aVar._variablesView;
+  ok(gVariablesView, "variables view object");
+
+  findVariableViewProperties(aVar, [
+    { name: "testProp", value: "testValue" },
+  ], { webconsole: gWebConsole }).then(onTestPropFound);
+}
+
+function onTestPropFound(aResults)
+{
+  let prop = aResults[0].matchedProp;
+  ok(prop, "matched the |testProp| property in the variables view");
+
+  is(content.wrappedJSObject.fooObj.testProp, aResults[0].value,
+     "|fooObj.testProp| value is correct");
+
+  // Check that property value updates work and that jsterm functions can be
+  // used.
+  updateVariablesViewProperty({
+    property: prop,
+    field: "value",
+    string: "document.title + window.location + $('p')",
+    webconsole: gWebConsole,
+    callback: onFooObjFetchAfterUpdate,
+  });
+}
+
+function onFooObjFetchAfterUpdate(aEvent, aVar)
+{
+  info("onFooObjFetchAfterUpdate");
+  let para = content.document.querySelector("p");
+  let expectedValue = content.document.title + content.location + para;
+
+  findVariableViewProperties(aVar, [
+    { name: "testProp", value: expectedValue },
+  ], { webconsole: gWebConsole }).then(onUpdatedTestPropFound);
+}
+
+function onUpdatedTestPropFound(aResults)
+{
+  let prop = aResults[0].matchedProp;
+  ok(prop, "matched the updated |testProp| property value");
+
+  is(content.wrappedJSObject.fooObj.testProp, aResults[0].value,
+     "|fooObj.testProp| value has been updated");
+
+  // Check that property name updates work.
+  updateVariablesViewProperty({
+    property: prop,
+    field: "name",
+    string: "testUpdatedProp",
+    webconsole: gWebConsole,
+    callback: onFooObjFetchAfterPropRename,
+  });
+}
+
+function onFooObjFetchAfterPropRename(aEvent, aVar)
+{
+  info("onFooObjFetchAfterPropRename");
+
+  let para = content.document.querySelector("p");
+  let expectedValue = content.document.title + content.location + para;
+
+  // Check that the new value is in the variables view.
+  findVariableViewProperties(aVar, [
+    { name: "testUpdatedProp", value: expectedValue },
+  ], { webconsole: gWebConsole }).then(onRenamedTestPropFound);
+}
+
+function onRenamedTestPropFound(aResults)
+{
+  let prop = aResults[0].matchedProp;
+  ok(prop, "matched the renamed |testProp| property");
+
+  ok(!content.wrappedJSObject.fooObj.testProp,
+     "|fooObj.testProp| has been deleted");
+  is(content.wrappedJSObject.fooObj.testUpdatedProp, aResults[0].value,
+     "|fooObj.testUpdatedProp| is correct");
+
+  // Check that property value updates that cause exceptions are reported in
+  // the web console output.
+  updateVariablesViewProperty({
+    property: prop,
+    field: "value",
+    string: "foobarzFailure()",
+    webconsole: gWebConsole,
+    callback: onPropUpdateError,
+  });
+}
+
+function onPropUpdateError(aEvent, aVar)
+{
+  info("onPropUpdateError");
+
+  let para = content.document.querySelector("p");
+  let expectedValue = content.document.title + content.location + para;
+
+  // Make sure the property did not change.
+  findVariableViewProperties(aVar, [
+    { name: "testUpdatedProp", value: expectedValue },
+  ], { webconsole: gWebConsole }).then(onRenamedTestPropFoundAgain);
+}
+
+function onRenamedTestPropFoundAgain(aResults)
+{
+  let prop = aResults[0].matchedProp;
+  ok(prop, "matched the renamed |testProp| property again");
+
+  let outputNode = gWebConsole.outputNode;
+
+  waitForSuccess({
+    name: "exception in property update reported in the web console output",
+    validatorFn: () => outputNode.textContent.indexOf("foobarzFailure") != -1,
+    successFn: testPropDelete.bind(null, prop),
+    failureFn: testPropDelete.bind(null, prop),
+  });
+}
+
+function testPropDelete(aProp)
+{
+  gVariablesView.window.focus();
+  aProp.focus();
+
+  executeSoon(() => {
+    EventUtils.synthesizeKey("VK_DELETE", {}, gVariablesView.window);
+    gWebConsole = gJSTerm = gVariablesView = null;
+  });
+
+  waitForSuccess({
+    name: "property deleted",
+    validatorFn: () => !("testUpdatedProp" in content.wrappedJSObject.fooObj),
+    successFn: finishTest,
+    failureFn: finishTest,
+  });
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_console_variables_view_while_debugging.js
@@ -0,0 +1,132 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Test that makes sure web console eval happens in the user-selected stackframe
+// from the js debugger, when changing the value of a property in the variables
+// view.
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-eval-in-stackframe.html";
+
+let gWebConsole, gJSTerm, gDebuggerWin, gThread, gDebuggerController,
+    gStackframes, gVariablesView;
+
+function test()
+{
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, consoleOpened);
+  }, true);
+}
+
+function consoleOpened(hud)
+{
+  gWebConsole = hud;
+  gJSTerm = hud.jsterm;
+
+  executeSoon(() => {
+    info("openDebugger");
+    openDebugger().then(debuggerOpened);
+  });
+}
+
+function debuggerOpened(aResult)
+{
+  gDebuggerWin = aResult.panelWin;
+  gDebuggerController = gDebuggerWin.DebuggerController;
+  gThread = gDebuggerController.activeThread;
+  gStackframes = gDebuggerController.StackFrames;
+
+  executeSoon(() => {
+    gThread.addOneTimeListener("framesadded", onFramesAdded);
+
+    info("firstCall()");
+    content.wrappedJSObject.firstCall();
+  });
+}
+
+function onFramesAdded()
+{
+  info("onFramesAdded");
+
+  executeSoon(() =>
+    openConsole(null, () =>
+      gJSTerm.execute("fooObj", onExecuteFooObj)
+    )
+  );
+}
+
+
+function onExecuteFooObj()
+{
+  let msg = gWebConsole.outputNode.querySelector(".webconsole-msg-output");
+  ok(msg, "output message found");
+  isnot(msg.textContent.indexOf("[object Object]"), -1, "message text check");
+
+  gJSTerm.once("variablesview-fetched", onFooObjFetch);
+
+  executeSoon(() => EventUtils.synthesizeMouse(msg, 2, 2, {},
+                                               gWebConsole.iframeWindow));
+}
+
+function onFooObjFetch(aEvent, aVar)
+{
+  gVariablesView = aVar._variablesView;
+  ok(gVariablesView, "variables view object");
+
+  findVariableViewProperties(aVar, [
+    { name: "testProp2", value: "testValue2" },
+    { name: "testProp", value: "testValue", dontMatch: true },
+  ], { webconsole: gWebConsole }).then(onTestPropFound);
+}
+
+function onTestPropFound(aResults)
+{
+  let prop = aResults[0].matchedProp;
+  ok(prop, "matched the |testProp2| property in the variables view");
+
+  // Check that property value updates work and that jsterm functions can be
+  // used.
+  updateVariablesViewProperty({
+    property: prop,
+    field: "value",
+    string: "document.title + foo2 + $('p')",
+    webconsole: gWebConsole,
+    callback: onFooObjFetchAfterUpdate,
+  });
+}
+
+function onFooObjFetchAfterUpdate(aEvent, aVar)
+{
+  info("onFooObjFetchAfterUpdate");
+  let para = content.document.querySelector("p");
+  let expectedValue = content.document.title + "foo2SecondCall" + para;
+
+  findVariableViewProperties(aVar, [
+    { name: "testProp2", value: expectedValue },
+  ], { webconsole: gWebConsole }).then(onUpdatedTestPropFound);
+}
+
+function onUpdatedTestPropFound(aResults)
+{
+  let prop = aResults[0].matchedProp;
+  ok(prop, "matched the updated |testProp2| property value");
+
+  // Check that testProp2 was updated.
+  executeSoon(() => gJSTerm.execute("fooObj.testProp2", onExecuteFooObjTestProp2));
+}
+
+function onExecuteFooObjTestProp2()
+{
+  let para = content.document.querySelector("p");
+  let expected = content.document.title + "foo2SecondCall" + para;
+
+  isnot(gWebConsole.outputNode.textContent.indexOf(expected), -1,
+        "fooObj.testProp2 is correct");
+
+  gWebConsole = gJSTerm = gDebuggerWin = gThread = gDebuggerController =
+    gStackframes = gVariablesView = null;
+  executeSoon(finishTest);
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/webconsole/test/browser_eval_in_debugger_stackframe.js
@@ -0,0 +1,150 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Test that makes sure web console eval happens in the user-selected stackframe
+// from the js debugger.
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-eval-in-stackframe.html";
+
+let gWebConsole, gJSTerm, gDebuggerWin, gThread, gDebuggerController, gStackframes;
+
+function test()
+{
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, consoleOpened);
+  }, true);
+}
+
+function consoleOpened(hud)
+{
+  gWebConsole = hud;
+  gJSTerm = hud.jsterm;
+  gJSTerm.execute("foo", onExecuteFoo);
+}
+
+function onExecuteFoo()
+{
+  isnot(gWebConsole.outputNode.textContent.indexOf("globalFooBug783499"), -1,
+        "|foo| value is correct");
+
+  gJSTerm.clearOutput();
+
+  // Test for Bug 690529 - Web Console and Scratchpad should evaluate
+  // expressions in the scope of the content window, not in a sandbox.
+  executeSoon(() => gJSTerm.execute("foo2 = 'newFoo'; window.foo2", onNewFoo2));
+}
+
+function onNewFoo2()
+{
+  is(gWebConsole.outputNode.textContent.indexOf("undefined"), -1,
+     "|undefined| is not displayed after adding |foo2|");
+
+  let msg = gWebConsole.outputNode.querySelector(".webconsole-msg-output");
+  ok(msg, "output result found");
+
+  isnot(msg.textContent.indexOf("newFoo"), -1,
+        "'newFoo' is displayed after adding |foo2|");
+
+  gJSTerm.clearOutput();
+
+  info("openDebugger");
+  executeSoon(() => openDebugger().then(debuggerOpened));
+}
+
+function debuggerOpened(aResult)
+{
+  gDebuggerWin = aResult.panelWin;
+  gDebuggerController = gDebuggerWin.DebuggerController;
+  gThread = gDebuggerController.activeThread;
+  gStackframes = gDebuggerController.StackFrames;
+
+  info("openConsole");
+  executeSoon(() =>
+    openConsole(null, () =>
+      gJSTerm.execute("foo + foo2", onExecuteFooAndFoo2)
+    )
+  );
+}
+
+function onExecuteFooAndFoo2()
+{
+  let expected = "globalFooBug783499newFoo";
+  isnot(gWebConsole.outputNode.textContent.indexOf(expected), -1,
+        "|foo + foo2| is displayed after starting the debugger");
+
+  executeSoon(() => {
+    gJSTerm.clearOutput();
+
+    info("openDebugger");
+    openDebugger().then(() => {
+      gThread.addOneTimeListener("framesadded", onFramesAdded);
+
+      info("firstCall()");
+      content.wrappedJSObject.firstCall();
+    });
+  });
+}
+
+function onFramesAdded()
+{
+  info("onFramesAdded, openConsole() now");
+  executeSoon(() =>
+    openConsole(null, () =>
+      gJSTerm.execute("foo + foo2", onExecuteFooAndFoo2InSecondCall)
+    )
+  );
+}
+
+function onExecuteFooAndFoo2InSecondCall()
+{
+  let expected = "globalFooBug783499foo2SecondCall";
+  isnot(gWebConsole.outputNode.textContent.indexOf(expected), -1,
+        "|foo + foo2| from |secondCall()|");
+
+  executeSoon(() => {
+    gJSTerm.clearOutput();
+
+    info("openDebugger and selectFrame(1)");
+
+    openDebugger().then(() => {
+      gStackframes.selectFrame(1);
+
+      info("openConsole");
+      executeSoon(() =>
+        openConsole(null, () =>
+          gJSTerm.execute("foo + foo2 + foo3", onExecuteFoo23InFirstCall)
+        )
+      );
+    });
+  });
+}
+
+function onExecuteFoo23InFirstCall()
+{
+  let expected = "fooFirstCallnewFoofoo3FirstCall";
+  isnot(gWebConsole.outputNode.textContent.indexOf(expected), -1,
+        "|foo + foo2 + foo3| from |firstCall()|");
+
+  executeSoon(() =>
+    gJSTerm.execute("foo = 'abba'; foo3 = 'bug783499'; foo + foo3",
+                    onExecuteFooAndFoo3ChangesInFirstCall));
+}
+
+function onExecuteFooAndFoo3ChangesInFirstCall()
+{
+  let expected = "abbabug783499";
+  isnot(gWebConsole.outputNode.textContent.indexOf(expected), -1,
+        "|foo + foo3| updated in |firstCall()|");
+
+  is(content.wrappedJSObject.foo, "globalFooBug783499", "|foo| in content window");
+  is(content.wrappedJSObject.foo2, "newFoo", "|foo2| in content window");
+  ok(!content.wrappedJSObject.foo3, "|foo3| was not added to the content window");
+
+  gWebConsole = gJSTerm = gDebuggerWin = gThread = gDebuggerController =
+    gStackframes = null;
+  executeSoon(finishTest);
+}

--- a/browser/devtools/webconsole/test/browser_output_breaks_after_console_dir_uninspectable.js
+++ b/browser/devtools/webconsole/test/browser_output_breaks_after_console_dir_uninspectable.js
@@ -16,23 +16,24 @@ function test()
     openConsole(null, performTest);
   }, true);
 }
 
 function performTest(hud)
 {
   hud.jsterm.clearOutput(true);
 
-  content.console.log("fooBug773466a");
-  content.console.dir(function funBug773466(){});
+  hud.jsterm.execute("console.log('fooBug773466a')");
+  hud.jsterm.execute("myObj = Object.create(null)");
+  hud.jsterm.execute("console.dir(myObj)");
   waitForSuccess({
     name: "eval results are shown",
     validatorFn: function()
     {
-      return hud.outputNode.textContent.indexOf("funBug773466") > -1;
+      return hud.outputNode.querySelector(".webconsole-msg-inspector");
     },
     successFn: function()
     {
       isnot(hud.outputNode.textContent.indexOf("fooBug773466a"), -1,
             "fooBug773466a shows");
       ok(hud.outputNode.querySelector(".webconsole-msg-inspector"),
          "the console.dir() tree shows");
 

--- a/browser/devtools/webconsole/test/browser_result_format_as_string.js
+++ b/browser/devtools/webconsole/test/browser_result_format_as_string.js
@@ -32,18 +32,18 @@ function performTest(hud)
     successFn: function()
     {
       is(hud.outputNode.textContent.indexOf("bug772506_content"), -1,
             "no content element found");
       ok(!hud.outputNode.querySelector("div"), "no div element found");
 
       let msg = hud.outputNode.querySelector(".webconsole-msg-output");
       ok(msg, "eval output node found");
-      isnot(msg.textContent.indexOf("HTMLDivElement"), -1,
-            "HTMLDivElement string found");
+      is(msg.textContent.indexOf("HTMLDivElement"), -1,
+         "HTMLDivElement string not displayed");
       EventUtils.synthesizeMouseAtCenter(msg, {type: "mousemove"});
       ok(!gBrowser._bug772506, "no content variable");
 
       finishTest();
     },
     failureFn: finishTest,
   });
 }

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_594477_clickable_output.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_594477_clickable_output.js
@@ -44,16 +44,18 @@ function tabLoad2(aEvent) {
     },
     failureFn: finishTest,
   });
 }
 
 function networkPanelShown(aEvent) {
   document.removeEventListener(aEvent.type, networkPanelShown, false);
 
+  info("networkPanelShown");
+
   document.addEventListener("popupshown", networkPanelShowFailure, false);
 
   // The network panel should not open for the second time.
   EventUtils.sendMouseEvent({type: "mousedown"}, outputItem);
   EventUtils.sendMouseEvent({type: "click"}, outputItem);
 
   executeSoon(function() {
     aEvent.target.addEventListener("popuphidden", networkPanelHidden, false);
@@ -65,16 +67,18 @@ function networkPanelShowFailure(aEvent)
   document.removeEventListener(aEvent.type, networkPanelShowFailure, false);
 
   ok(false, "the network panel should not show");
 }
 
 function networkPanelHidden(aEvent) {
   this.removeEventListener(aEvent.type, networkPanelHidden, false);
 
+  info("networkPanelHidden");
+
   // The network panel should not show because this is a mouse event that starts
   // in a position and ends in another.
   EventUtils.sendMouseEvent({type: "mousedown", clientX: 3, clientY: 4},
     outputItem);
   EventUtils.sendMouseEvent({type: "click", clientX: 5, clientY: 6},
     outputItem);
 
   // The network panel should not show because this is a middle-click.
@@ -89,83 +93,35 @@ function networkPanelHidden(aEvent) {
   EventUtils.sendMouseEvent({type: "click", button: 2},
     outputItem);
 
   executeSoon(function() {
     document.removeEventListener("popupshown", networkPanelShowFailure, false);
 
     // Done with the network output. Now test the jsterm output and the property
     // panel.
-    HUD.jsterm.setInputValue("document");
-    HUD.jsterm.execute();
+    HUD.jsterm.execute("document", () => {
+      info("jsterm execute 'document' callback");
 
-    waitForSuccess({
-      name: "jsterm output message",
-      validatorFn: function()
-      {
-        return outputNode.querySelector(".webconsole-msg-output .hud-clickable");
-      },
-      successFn: function()
-      {
-        document.addEventListener("popupshown", propertyPanelShown, false);
+      HUD.jsterm.once("variablesview-open", onVariablesViewOpen);
+      let outputItem = outputNode
+                       .querySelector(".webconsole-msg-output .hud-clickable");
+      ok(outputItem, "jsterm output message found");
 
-        // Send the mousedown and click events such that the property panel opens.
-        EventUtils.sendMouseEvent({type: "mousedown"}, outputItem);
-        EventUtils.sendMouseEvent({type: "click"}, outputItem);
-      },
-      failureFn: finishTest,
+      // Send the mousedown and click events such that the property panel opens.
+      EventUtils.sendMouseEvent({type: "mousedown"}, outputItem);
+      EventUtils.sendMouseEvent({type: "click"}, outputItem);
     });
   });
 }
 
-function propertyPanelShown(aEvent) {
-  document.removeEventListener(aEvent.type, propertyPanelShown, false);
-
-  document.addEventListener("popupshown", propertyPanelShowFailure, false);
-
-  // The property panel should not open for the second time.
-  EventUtils.sendMouseEvent({type: "mousedown"}, outputItem);
-  EventUtils.sendMouseEvent({type: "click"}, outputItem);
+function onVariablesViewOpen() {
+  info("onVariablesViewOpen");
 
   executeSoon(function() {
-    aEvent.target.addEventListener("popuphidden", propertyPanelHidden, false);
-    aEvent.target.hidePopup();
-  });
-}
-
-function propertyPanelShowFailure(aEvent) {
-  document.removeEventListener(aEvent.type, propertyPanelShowFailure, false);
-
-  ok(false, "the property panel should not show");
-}
-
-function propertyPanelHidden(aEvent) {
-  this.removeEventListener(aEvent.type, propertyPanelHidden, false);
-
-  // The property panel should not show because this is a mouse event that
-  // starts in a position and ends in another.
-  EventUtils.sendMouseEvent({type: "mousedown", clientX: 3, clientY: 4},
-    outputItem);
-  EventUtils.sendMouseEvent({type: "click", clientX: 5, clientY: 6},
-    outputItem);
-
-  // The property panel should not show because this is a middle-click.
-  EventUtils.sendMouseEvent({type: "mousedown", button: 1},
-    outputItem);
-  EventUtils.sendMouseEvent({type: "click", button: 1},
-    outputItem);
-
-  // The property panel should not show because this is a right-click.
-  EventUtils.sendMouseEvent({type: "mousedown", button: 2},
-    outputItem);
-  EventUtils.sendMouseEvent({type: "click", button: 2},
-    outputItem);
-
-  executeSoon(function() {
-    document.removeEventListener("popupshown", propertyPanelShowFailure, false);
     HUD = outputItem = null;
     executeSoon(finishTest);
   });
 }
 
 function test() {
   addTab(TEST_URI);
   browser.addEventListener("load", function onLoad() {

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_595350_multiple_windows_and_tabs.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_595350_multiple_windows_and_tabs.js
@@ -14,16 +14,18 @@
 
 const TEST_URI = "data:text/html;charset=utf-8,Web Console test for bug 595350";
 
 let win1 = window, win2;
 let openTabs = [];
 let loadedTabCount = 0;
 
 function test() {
+  requestLongerTimeout(2);
+
   // Add two tabs in the main window.
   addTabs(win1);
 
   // Open a new window.
   win2 = OpenBrowserWindow();
   win2.addEventListener("load", onWindowLoad, true);
 }
 
@@ -59,17 +61,17 @@ function openConsoles() {
       ok(hud, "HUD is open for tab " + index);
       let window = hud.target.tab.linkedBrowser.contentWindow;
       window.console.log("message for tab " + index);
       consolesOpen++;
     }.bind(null, i));
   }
 
   waitForSuccess({
-    timeout: 10000,
+    timeout: 15000,
     name: "4 web consoles opened",
     validatorFn: function()
     {
       return consolesOpen == 4;
     },
     successFn: closeConsoles,
     failureFn: closeConsoles,
   });

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_598357_jsterm_output.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_598357_jsterm_output.js
@@ -19,21 +19,21 @@ let tempScope = {};
 Cu.import("resource://gre/modules/devtools/dbg-server.jsm", tempScope);
 
 let longString = (new Array(tempScope.DebuggerServer.LONG_STRING_LENGTH + 4)).join("a");
 let initialString = longString.substring(0,
   tempScope.DebuggerServer.LONG_STRING_INITIAL_LENGTH);
 
 let inputValues = [
   // [showsPropertyPanel?, input value, expected output format,
-  //    print() output, console output, optional console API test]
+  //    print() output, console API output, optional console API test]
 
   // 0
   [false, "'hello \\nfrom \\rthe \\\"string world!'",
-    '"hello \\nfrom \\rthe \\"string world!"',
+    '"hello \nfrom \rthe "string world!"',
     "hello \nfrom \rthe \"string world!"],
 
   // 1
   [false, "'\xFA\u1E47\u0129\xE7\xF6d\xEA \u021B\u0115\u0219\u0165'",
     "\"\xFA\u1E47\u0129\xE7\xF6d\xEA \u021B\u0115\u0219\u0165\"",
     "\xFA\u1E47\u0129\xE7\xF6d\xEA \u021B\u0115\u0219\u0165"],
 
   // 2
@@ -47,58 +47,52 @@ let inputValues = [
 
   // 5
   [false, "42", "42"],
 
   // 6
   [false, "'42'", '"42"', "42"],
 
   // 7
-  [false, "/foobar/", "/foobar/"],
+  [true, "/foobar/", "[object RegExp]", '"/foobar/"', "[object RegExp]"],
 
   // 8
   [false, "null", "null"],
 
   // 9
   [false, "undefined", "undefined"],
 
   // 10
   [false, "true", "true"],
 
   // 11
-  [false, "document.getElementById", "function getElementById() {\n    [native code]\n}",
+  [true, "document.getElementById", "[object Function]",
     "function getElementById() {\n    [native code]\n}",
-    "function getElementById() {\n    [native code]\n}",
-    "document.wrappedJSObject.getElementById"],
+    "[object Function]"],
 
   // 12
-  [false, "(function() { return 42; })", "function () { return 42; }",
-    "function () { return 42; }",
-    "(function () { return 42; })"],
+  [true, "(function() { return 42; })", "[object Function]",
+    "function () { return 42; }", "[object Function]"],
 
   // 13
-  [false, "new Date(" + dateNow + ")", (new Date(dateNow)).toString()],
+  [true, "new Date(" + dateNow + ")", "[object Date]", (new Date(dateNow)).toString(), "[object Date]"],
 
   // 14
-  [true, "document.body", "[object HTMLBodyElement", "[object HTMLBodyElement",
-    "[object HTMLBodyElement",
-    "document.wrappedJSObject.body"],
+  [true, "document.body", "[object HTMLBodyElement]"],
 
   // 15
-  [true, "window.location", TEST_URI],
+  [true, "window.location", "[object Location]", TEST_URI, "[object Location]"],
 
   // 16
-  [true, "[1,2,3,'a','b','c','4','5']", '[1, 2, 3, "a", "b", "c", "4", "5"]',
+  [true, "[1,2,3,'a','b','c','4','5']", '[object Array]',
     '1,2,3,a,b,c,4,5',
-    '[1, 2, 3, "a", "b", "c", "4", "5"]'],
+    "[object Array]"],
 
   // 17
-  [true, "({a:'b', c:'d', e:1, f:'2'})", '({a:"b", c:"d", e:1, f:"2"})',
-    "[object Object",
-    '({a:"b", c:"d", e:1, f:"2"})'],
+  [true, "({a:'b', c:'d', e:1, f:'2'})", "[object Object]"],
 
   // 18
   [false, "'" + longString + "'",
     '"' + initialString + "\"[\u2026]", initialString],
 ];
 
 longString = null;
 initialString = null;
@@ -149,20 +143,17 @@ function testGen() {
     inputValues[cpos][4] : printOutput;
 
   let consoleTest = inputValues[cpos][5] || inputValue;
 
   HUD.jsterm.clearOutput();
 
   // Test the console.log() output.
 
-  // Ugly but it does the job.
-  with (content) {
-    eval("content.console.log(" + consoleTest + ")");
-  }
+  HUD.jsterm.execute("console.log(" + consoleTest + ")");
 
   waitForSuccess({
     name: "console.log message for test #" + cpos,
     validatorFn: function()
     {
       return HUD.outputNode.querySelector(".hud-log");
     },
     successFn: subtestNext,
@@ -228,38 +219,38 @@ function testGen() {
     "jsterm output is correct for inputValues[" + cpos + "]");
 
   let messageBody = outputItem.querySelector(".webconsole-msg-body");
   ok(messageBody, "we have the message body for inputValues[" + cpos + "]");
 
   // Test click on output.
   let eventHandlerID = eventHandlers.length + 1;
 
-  let propertyPanelShown = function(aEvent) {
-    let label = aEvent.target.getAttribute("label");
-    if (!label || label.indexOf(inputValue) == -1) {
+  let propertyPanelShown = function(aEvent, aView, aOptions) {
+    if (aOptions.label.indexOf(expectedOutput) == -1) {
       return;
     }
 
-    document.removeEventListener(aEvent.type, propertyPanelShown, false);
+    HUD.jsterm.off("variablesview-open", propertyPanelShown);
+
     eventHandlers[eventHandlerID] = null;
 
     ok(showsPropertyPanel,
       "the property panel shown for inputValues[" + cpos + "]");
 
-    aEvent.target.hidePopup();
+    HUD.jsterm._splitter.state = "collapsed";
 
     popupShown[cpos] = true;
 
     if (showsPropertyPanel) {
-      subtestNext();
+      executeSoon(subtestNext);
     }
   };
 
-  document.addEventListener("popupshown", propertyPanelShown, false);
+  HUD.jsterm.on("variablesview-open", propertyPanelShown);
 
   eventHandlers.push(propertyPanelShown);
 
   // Send the mousedown, mouseup and click events to check if the property
   // panel opens.
   EventUtils.sendMouseEvent({ type: "mousedown" }, messageBody, window);
   EventUtils.sendMouseEvent({ type: "click" }, messageBody, window);
 
@@ -276,27 +267,28 @@ function testEnd() {
   if (testEnded) {
     return;
   }
 
   testEnded = true;
 
   for (let i = 0; i < eventHandlers.length; i++) {
     if (eventHandlers[i]) {
-      document.removeEventListener("popupshown", eventHandlers[i], false);
+      HUD.jsterm.off("variablesview-open", eventHandlers[i]);
     }
   }
 
   for (let i = 0; i < inputValues.length; i++) {
     if (inputValues[i][0] && !popupShown[i]) {
       ok(false, "the property panel failed to show for inputValues[" + i + "]");
     }
   }
 
   HUD = inputValues = testDriver = null;
   executeSoon(finishTest);
 }
 
 function test() {
+  requestLongerTimeout(2);
   addTab(TEST_URI);
   browser.addEventListener("load", tabLoad, true);
 }
 

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_600183_charset.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_600183_charset.js
@@ -8,31 +8,34 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
 const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-bug-600183-charset.html";
 
 function performTest(lastFinishedRequest, aConsole)
 {
   ok(lastFinishedRequest, "charset test page was loaded and logged");
+  HUDService.lastFinishedRequestCallback = null;
 
-  aConsole.webConsoleClient.getResponseContent(lastFinishedRequest.actor,
-    function (aResponse) {
-      ok(!aResponse.contentDiscarded, "response body was not discarded");
-
-      let body = aResponse.content.text;
-      ok(body, "we have the response body");
+  executeSoon(() => {
+    aConsole.webConsoleClient.getResponseContent(lastFinishedRequest.actor,
+      (aResponse) => {
+        ok(!aResponse.contentDiscarded, "response body was not discarded");
 
-      let chars = "\u7684\u95ee\u5019!"; // 的问候!
-      isnot(body.indexOf("<p>" + chars + "</p>"), -1,
-        "found the chinese simplified string");
-      executeSoon(finishTest);
-    });
+        let body = aResponse.content.text;
+        ok(body, "we have the response body");
 
-  HUDService.lastFinishedRequestCallback = null;
+        let chars = "\u7684\u95ee\u5019!"; // 的问候!
+        isnot(body.indexOf("<p>" + chars + "</p>"), -1,
+          "found the chinese simplified string");
+
+        HUDService.lastFinishedRequestCallback = null;
+        executeSoon(finishTest);
+      });
+  });
 }
 
 function test()
 {
   addTab("data:text/html;charset=utf-8,Web Console - bug 600183 test");
 
   browser.addEventListener("load", function onLoad() {
     browser.removeEventListener("load", onLoad, true);

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_601177_log_levels.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_601177_log_levels.js
@@ -30,17 +30,17 @@ function performTest()
             "found exception");
 
   findEntry(HUD, "hud-jswarn", "undefinedPropertyBug601177",
             "found strict warning");
 
   findEntry(HUD, "hud-jswarn", "foobarBug601177strictError",
             "found strict error");
 
-  finishTest();
+  executeSoon(finishTest);
 }
 
 function findEntry(aHUD, aClass, aString, aMessage)
 {
   return testLogEntry(aHUD.outputNode, aString, aMessage, false, false,
                       aClass);
 }
 

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_602572_log_bodies_checkbox.js
@@ -15,28 +15,26 @@ function test()
   // open tab 1
   addTab("data:text/html;charset=utf-8,Web Console test for bug 602572: log bodies checkbox. tab 1");
   tabs.push(tab);
 
   browser.addEventListener("load", function onLoad1(aEvent) {
     browser.removeEventListener(aEvent.type, onLoad1, true);
 
     openConsole(null, function(aHud) {
-      info("iframe1 height " + aHud.iframe.clientHeight);
       info("iframe1 root height " + aHud.ui.rootElement.clientHeight);
 
       // open tab 2
       addTab("data:text/html;charset=utf-8,Web Console test for bug 602572: log bodies checkbox. tab 2");
       tabs.push(tab);
 
       browser.addEventListener("load", function onLoad2(aEvent) {
         browser.removeEventListener(aEvent.type, onLoad2, true);
 
         openConsole(null, function(aHud) {
-          info("iframe2 height " + aHud.iframe.clientHeight);
           info("iframe2 root height " + aHud.ui.rootElement.clientHeight);
           waitForFocus(startTest, aHud.iframeWindow);
         });
       }, true);
     });
   }, true);
 }
 
@@ -110,17 +108,16 @@ function onpopupshown2b(aEvent)
     // Switch to tab 1 and open the Web Console context menu from there.
     gBrowser.selectedTab = tabs[runCount*2];
     waitForFocus(function() {
       // Find the relevant elements in the Web Console of tab 1.
       let win1 = tabs[runCount*2].linkedBrowser.contentWindow;
       let hudId1 = HUDService.getHudIdByWindow(win1);
       huds[0] = HUDService.hudReferences[hudId1];
 
-      info("iframe1 height " + huds[0].iframe.clientHeight);
       info("iframe1 root height " + huds[0].ui.rootElement.clientHeight);
 
       menuitems[0] = huds[0].ui.rootElement.querySelector("#saveBodies");
       menupopups[0] = huds[0].ui.rootElement.querySelector("menupopup");
 
       menupopups[0].addEventListener("popupshown", onpopupshown1, false);
       menupopups[0].openPopup();
     }, tabs[runCount*2].linkedBrowser.contentWindow);

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_611795.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_611795.js
@@ -54,24 +54,28 @@ function testConsoleLogRepeats()
   let outputNode = HUD.outputNode;
 
   jsterm.clearOutput();
 
   jsterm.setInputValue("for (let i = 0; i < 10; ++i) console.log('this is a line of reasonably long text that I will use to verify that the repeated text node is of an appropriate size.');");
   jsterm.execute();
 
   waitForSuccess({
+    timeout: 10000,
     name: "10 repeated console.log messages",
     validatorFn: function()
     {
       let node = outputNode.querySelector(".webconsole-msg-console");
       return node && node.childNodes[3].firstChild.getAttribute("value") == 10;
     },
     successFn: finishTest,
-    failureFn: finishTest,
+    failureFn: function() {
+      info("output content: " + outputNode.textContent);
+      finishTest();
+    },
   });
 }
 
 /**
  * Unit test for bug 611795:
  * Repeated CSS messages get collapsed into one.
  */
 function test()

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_618311_close_panels.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_618311_close_panels.js
@@ -25,86 +25,66 @@ function test() {
     });
   }, true);
 }
 
 function performTest() {
   let hudId = HUDService.getHudIdByWindow(content);
   let HUD = HUDService.hudReferences[hudId];
 
-  HUD.jsterm.execute("document");
-
   let networkMessage = HUD.outputNode.querySelector(".webconsole-msg-network");
   ok(networkMessage, "found network message");
 
   let networkLink = networkMessage.querySelector(".webconsole-msg-link");
   ok(networkLink, "found network message link");
 
   let popupset = document.getElementById("mainPopupSet");
   ok(popupset, "found #mainPopupSet");
 
   let popupsShown = 0;
   let hiddenPopups = 0;
 
   let onpopupshown = function() {
+    document.removeEventListener("popupshown", onpopupshown, false);
     popupsShown++;
-    if (popupsShown == 2) {
-      document.removeEventListener("popupshown", onpopupshown, false);
 
-      executeSoon(function() {
-        let popups = popupset.querySelectorAll("panel[hudId=" + hudId + "]");
-        is(popups.length, 2, "found two popups");
+    executeSoon(function() {
+      let popups = popupset.querySelectorAll("panel[hudId=" + hudId + "]");
+      is(popups.length, 1, "found one popup");
 
-        document.addEventListener("popuphidden", onpopuphidden, false);
+      document.addEventListener("popuphidden", onpopuphidden, false);
 
-        registerCleanupFunction(function() {
-          is(hiddenPopups, 2, "correct number of popups hidden");
-          if (hiddenPopups != 2) {
-            document.removeEventListener("popuphidden", onpopuphidden, false);
-          }
-        });
+      registerCleanupFunction(function() {
+        is(hiddenPopups, 1, "correct number of popups hidden");
+        if (hiddenPopups != 1) {
+          document.removeEventListener("popuphidden", onpopuphidden, false);
+        }
+      });
 
-        executeSoon(closeConsole);
-      });
-    }
+      executeSoon(closeConsole);
+    });
   };
 
   let onpopuphidden = function() {
+    document.removeEventListener("popuphidden", onpopuphidden, false);
     hiddenPopups++;
-    if (hiddenPopups == 2) {
-      document.removeEventListener("popuphidden", onpopuphidden, false);
 
-      executeSoon(function() {
-        let popups = popupset.querySelectorAll("panel[hudId=" + hudId + "]");
-        is(popups.length, 0, "no popups found");
+    executeSoon(function() {
+      let popups = popupset.querySelectorAll("panel[hudId=" + hudId + "]");
+      is(popups.length, 0, "no popups found");
 
-        executeSoon(finishTest);
-      });
-    }
+      executeSoon(finishTest);
+    });
   };
 
   document.addEventListener("popupshown", onpopupshown, false);
 
   registerCleanupFunction(function() {
-    is(popupsShown, 2, "correct number of popups shown");
-    if (popupsShown != 2) {
+    is(popupsShown, 1, "correct number of popups shown");
+    if (popupsShown != 1) {
       document.removeEventListener("popupshown", onpopupshown, false);
     }
   });
 
-  waitForSuccess({
-    name: "jsterm output message",
-    validatorFn: function()
-    {
-      return HUD.outputNode.querySelector(".webconsole-msg-output");
-    },
-    successFn: function()
-    {
-      let jstermMessage = HUD.outputNode.querySelector(".webconsole-msg-output");
-      EventUtils.sendMouseEvent({ type: "mousedown" }, jstermMessage, HUD.iframeWindow);
-      EventUtils.sendMouseEvent({ type: "click" }, jstermMessage, HUD.iframeWindow);
-      EventUtils.sendMouseEvent({ type: "mousedown" }, networkLink, HUD.iframeWindow);
-      EventUtils.sendMouseEvent({ type: "mouseup" }, networkLink, HUD.iframeWindow);
-      EventUtils.sendMouseEvent({ type: "click" }, networkLink, HUD.iframeWindow);
-    },
-    failureFn: finishTest,
-  });
+  EventUtils.sendMouseEvent({ type: "mousedown" }, networkLink, HUD.iframeWindow);
+  EventUtils.sendMouseEvent({ type: "mouseup" }, networkLink, HUD.iframeWindow);
+  EventUtils.sendMouseEvent({ type: "click" }, networkLink, HUD.iframeWindow);
 }

--- a/browser/devtools/webconsole/test/browser_webconsole_bug_632275_getters_document_width.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_632275_getters_document_width.js
@@ -1,59 +1,44 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-bug-632275-getters.html";
 
+let getterValue = null;
+
 function test() {
   addTab(TEST_URI);
   browser.addEventListener("load", function onLoad() {
     browser.removeEventListener("load", onLoad, true);
     openConsole(null, consoleOpened);
   }, true);
 }
 
-function consoleOpened(HUD) {
-  let jsterm = HUD.jsterm;
+function consoleOpened(hud) {
+  let doc = content.wrappedJSObject.document;
+  getterValue = doc.foobar._val;
+  hud.jsterm.execute("console.dir(document)");
 
+  let onOpen = onViewOpened.bind(null, hud);
+  hud.jsterm.once("variablesview-fetched", onOpen);
+}
+
+function onViewOpened(hud, event, view)
+{
   let doc = content.wrappedJSObject.document;
 
-  let panel = jsterm.openPropertyPanel({ data: { object: doc }});
-
-  let view = panel.treeView;
-  let find = function(regex) {
-    for (let i = 0; i < view.rowCount; i++) {
-      if (regex.test(view.getCellText(i))) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  ok(!find(/^(width|height):/), "no document.width/height");
-
-  panel.destroy();
-
-  let getterValue = doc.foobar._val;
+  findVariableViewProperties(view, [
+    { name: /^(width|height)$/, dontMatch: 1 },
+    { name: "foobar._val", value: getterValue },
+    { name: "foobar.val", isGetter: true },
+  ], { webconsole: hud }).then(function() {
+    is(doc.foobar._val, getterValue, "getter did not execute");
+    is(doc.foobar.val, getterValue+1, "getter executed");
+    is(doc.foobar._val, getterValue+1, "getter executed (recheck)");
 
-  panel = jsterm.openPropertyPanel({ data: { object: doc.foobar }});
-  view = panel.treeView;
-
-  is(getterValue, doc.foobar._val, "getter did not execute");
-  is(getterValue+1, doc.foobar.val, "getter executed");
-  is(getterValue+1, doc.foobar._val, "getter executed (recheck)");
-
-  ok(find(/^val: Getter$/),
-     "getter is properly displayed");
-
-  ok(find(new RegExp("^_val: " + getterValue + "$")),
-     "getter _val is properly displayed");
-
-  panel.destroy();
-
-  executeSoon(function() {
-    let textContent = HUD.outputNode.textContent;
+    let textContent = hud.outputNode.textContent;
     is(textContent.indexOf("document.body.client"), -1,
        "no document.width/height warning displayed");
 
     finishTest();
   });
 }