--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -95,16 +95,22 @@ Tools.inspector = {
   }
 };
 Tools.webConsole = {
   id: "webconsole",
   accesskey: l10n("webConsoleCmd.accesskey"),
   ordinal: 2,
   oldWebConsoleURL: "chrome://devtools/content/webconsole/webconsole.xul",
   newWebConsoleURL: "chrome://devtools/content/webconsole/webconsole.html",
+  get browserConsoleURL() {
+    if (Services.prefs.getBoolPref("devtools.browserconsole.new-frontend-enabled")) {
+      return "chrome://devtools/content/webconsole/browserconsole.xul";
+    }
+    return Tools.webConsole.oldWebConsoleURL;
+  },
   icon: "chrome://devtools/skin/images/tool-webconsole.svg",
   label: l10n("ToolboxTabWebconsole.label"),
   menuLabel: l10n("MenuWebconsole.label"),
   panelLabel: l10n("ToolboxWebConsole.panelLabel"),
   get tooltip() {
     return l10n("ToolboxWebconsole.tooltip2",
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") +
     l10n("webconsole.commandkey"));

--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -4,16 +4,17 @@
 
 devtools.jar:
 %   content devtools %content/
     content/shared/vendor/d3.js (shared/vendor/d3.js)
     content/shared/vendor/dagre-d3.js (shared/vendor/dagre-d3.js)
     content/shared/widgets/widgets.css (shared/widgets/widgets.css)
     content/shared/widgets/VariablesView.xul (shared/widgets/VariablesView.xul)
     content/webconsole/webconsole.html (webconsole/webconsole.html)
+    content/webconsole/browserconsole.xul (webconsole/browserconsole.xul)
     content/webconsole/webconsole.xul (webconsole/webconsole.xul)
     content/scratchpad/scratchpad.xul (scratchpad/scratchpad.xul)
     content/scratchpad/scratchpad.js (scratchpad/scratchpad.js)
     content/shared/splitview.css (shared/splitview.css)
     content/shared/theme-switching.js (shared/theme-switching.js)
     content/shared/frame-script-utils.js (shared/frame-script-utils.js)
     content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
     content/storage/storage.xul (storage/storage.xul)

--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -302,16 +302,19 @@ pref("devtools.webconsole.timestampMessa
 
 // Web Console automatic multiline mode: |true| if you want incomplete statements
 // to automatically trigger multiline editing (equivalent to shift + enter).
 pref("devtools.webconsole.autoMultiline", true);
 
 // Enable the new webconsole frontend
 pref("devtools.webconsole.new-frontend-enabled", true);
 
+// Enable the new webconsole frontend in the browser console
+pref("devtools.browserconsole.new-frontend-enabled", false);
+
 // Enable the webconsole sidebar toggle
 pref("devtools.webconsole.sidebarToggle", false);
 
 // Disable the new performance recording panel by default
 pref("devtools.performance.new-panel-enabled", false);
 
 // Enable client-side mapping service for source maps
 pref("devtools.source-map.client-service.enabled", true);

new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/browserconsole.xul
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        id="devtools-webconsole"
+        macanimationtype="document"
+        fullscreenbutton="true"
+        title=""
+        windowtype="devtools:webconsole"
+        width="900" height="350"
+        persist="screenX screenY width height sizemode">
+  <popupset></popupset>
+  <iframe src="webconsole.html" flex="1"></iframe>
+</window>
\ No newline at end of file

--- a/devtools/client/webconsole/hudservice.js
+++ b/devtools/client/webconsole/hudservice.js
@@ -208,30 +208,34 @@ HUD_SERVICE.prototype =
     let target;
     function getTarget(aConnection)
     {
       return TargetFactory.forRemoteTab(aConnection);
     }
     function openWindow(aTarget)
     {
       target = aTarget;
-      let deferred = defer();
-      // Using the old frontend for now in the browser console.  This can be switched to
-      // Tools.webConsole.url to use whatever is preffed on.
-      let url = Tools.webConsole.oldWebConsoleURL;
-      let win = Services.ww.openWindow(null, url, "_blank",
-                                       BROWSER_CONSOLE_WINDOW_FEATURES, null);
-      win.addEventListener("DOMContentLoaded", function () {
+      return new Promise(resolve => {
+        let browserConsoleURL = Tools.webConsole.browserConsoleURL;
+        let win = Services.ww.openWindow(null, browserConsoleURL, "_blank",
+                                         BROWSER_CONSOLE_WINDOW_FEATURES, null);
+        win.addEventListener("DOMContentLoaded", () => {
           win.document.title = l10n.getStr("browserConsole.title");
-        deferred.resolve(win);
-      }, {once: true});
-      return deferred.promise;
+          if (browserConsoleURL === Tools.webConsole.oldWebConsoleURL) {
+            resolve({iframeWindow: win, chromeWindow: win});
+          } else {
+            win.document.querySelector("iframe").addEventListener("DOMContentLoaded", (e) => {
+              resolve({iframeWindow: e.target.defaultView, chromeWindow: win});
+            }, { once: true });
+          }
+        }, {once: true});
+      });
     }
-    connect().then(getTarget).then(openWindow).then((aWindow) => {
-      return this.openBrowserConsole(target, aWindow, aWindow)
+    connect().then(getTarget).then(openWindow).then(({iframeWindow, chromeWindow}) => {
+      return this.openBrowserConsole(target, iframeWindow, chromeWindow)
         .then((aBrowserConsole) => {
           this._browserConsoleDefer.resolve(aBrowserConsole);
           this._browserConsoleDefer = null;
         });
     }, console.error.bind(console));
 
     return this._browserConsoleDefer.promise;
   },

--- a/devtools/client/webconsole/jsterm.js
+++ b/devtools/client/webconsole/jsterm.js
@@ -264,26 +264,29 @@ JSTerm.prototype = {
     // Update the character width and height needed for the popup offset
     // calculations.
     this._updateCharSize();
 
     if (this.hud.isBrowserConsole &&
         !Services.prefs.getBoolPref("devtools.chrome.enabled")) {
       inputContainer.style.display = "none";
     } else {
+      this.inputNode.addEventListener("keypress", this._keyPress);
+      this.inputNode.addEventListener("input", this._inputEventHandler);
+      this.inputNode.addEventListener("keyup", this._inputEventHandler);
+      this.inputNode.addEventListener("focus", this._focusEventHandler);
+    }
+
+    if (!this.hud.isBrowserConsole) {
       let okstring = l10n.getStr("selfxss.okstring");
       let msg = l10n.getFormatStr("selfxss.msg", [okstring]);
       this._onPaste = WebConsoleUtils.pasteHandlerGen(this.inputNode,
           this.getNotificationBox(), msg, okstring);
-      this.inputNode.addEventListener("keypress", this._keyPress);
       this.inputNode.addEventListener("paste", this._onPaste);
       this.inputNode.addEventListener("drop", this._onPaste);
-      this.inputNode.addEventListener("input", this._inputEventHandler);
-      this.inputNode.addEventListener("keyup", this._inputEventHandler);
-      this.inputNode.addEventListener("focus", this._focusEventHandler);
     }
 
     this.hud.window.addEventListener("blur", this._blurEventHandler);
     this.lastInputValue && this.setInputValue(this.lastInputValue);
   },
 
   focus: function () {
     if (!this.inputNode.getAttribute("focused")) {

--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -134,17 +134,17 @@ NewConsoleOutputWrapper.prototype = {
         } : null;
 
         let menu = createContextMenu(this.jsterm, this.parentNode,
           { actor, clipboardText, variableText, message,
             serviceContainer, openSidebar, rootActorId });
 
         // Emit the "menu-open" event for testing.
         menu.once("open", () => this.emit("menu-open"));
-        menu.popup(screenX, screenY, this.toolbox);
+        menu.popup(screenX, screenY, { doc: this.owner.chromeWindow.document });
 
         return menu;
       };
 
       if (this.toolbox) {
         Object.assign(serviceContainer, {
           onViewSourceInDebugger: frame => {
             this.toolbox.viewSourceInDebugger(frame.url, frame.line).then(() =>

--- a/devtools/client/webconsole/new-webconsole.js
+++ b/devtools/client/webconsole/new-webconsole.js
@@ -12,17 +12,17 @@ const promise = require("promise");
 const defer = require("devtools/shared/defer");
 const Services = require("Services");
 const { gDevTools } = require("devtools/client/framework/devtools");
 const { JSTerm } = require("devtools/client/webconsole/jsterm");
 const { WebConsoleConnectionProxy } = require("devtools/client/webconsole/webconsole-connection-proxy");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const system = require("devtools/shared/system");
-const { ZoomKeys } = require("devtools/client/shared/zoom-keys");
+const ZoomKeys = require("devtools/client/shared/zoom-keys");
 
 const PREF_MESSAGE_TIMESTAMP = "devtools.webconsole.timestampMessages";
 const PREF_PERSISTLOG = "devtools.webconsole.persistlog";
 const PREF_SIDEBAR_ENABLED = "devtools.webconsole.sidebarToggle";
 
 // XXX: This file is incomplete (see bug 1326937).
 // It's used when loading the webconsole with devtools-launchpad, but will ultimately be
 // the entry point for the new frontend