Bug 1435084 - Create a pref to enable the new console UI in the browser console;r=nchevobbe
authorBrian Grinstead <bgrinstead@mozilla.com>
Thu, 01 Feb 2018 14:44:00 -0800
changeset 402571 d23fda609203ea1497cf22156a621d5514e5ca8e
parent 402570 48bca44fe6a6e88f941a1a5ab2a41a041346fa21
child 402572 29c8f502f43f2dc05ae715b824104194e39eedf2
push id59164
push userbgrinstead@mozilla.com
push dateTue, 06 Feb 2018 16:19:54 +0000
treeherderautoland@d23fda609203 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1435084
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1435084 - Create a pref to enable the new console UI in the browser console;r=nchevobbe MozReview-Commit-ID: FUgk7Omk4V1
devtools/client/definitions.js
devtools/client/jar.mn
devtools/client/preferences/devtools.js
devtools/client/webconsole/browserconsole.xul
devtools/client/webconsole/hudservice.js
devtools/client/webconsole/jsterm.js
devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
devtools/client/webconsole/new-webconsole.js
--- 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