From 87783a64ad80974d14c78e9b31e895772350523d Mon Sep 17 00:00:00 2001 From: Sebastian Hengst Date: Mon, 17 Jul 2017 20:48:25 +0200 Subject: [PATCH] Backed out changeset 227ff88b9848 (bug 1326937) for timing out in browser_ext_devtools_inspectedWindow_eval_bindings.js. r=backout on A CLOSED TREE --- devtools/client/definitions.js | 17 +-- .../framework/toolbox-process-window.js | 1 - devtools/client/jar.mn | 2 - devtools/client/locales/en-US/webConsole.dtd | 1 + .../locales/en-US/webconsole.properties | 3 - devtools/client/webconsole/hudservice.js | 17 +-- devtools/client/webconsole/jsterm.js | 65 ++-------- devtools/client/webconsole/moz.build | 1 - .../new-console-output-wrapper.js | 24 ---- .../browser_webconsole_console_dir.js | 4 +- .../browser_webconsole_console_group.js | 2 +- .../browser_webconsole_console_table.js | 4 +- .../mochitest/browser_webconsole_filters.js | 4 +- .../browser_webconsole_filters_persist.js | 2 +- .../browser_webconsole_input_focus.js | 1 - ...owser_webconsole_keyboard_accessibility.js | 2 +- .../new-console-output/test/mochitest/head.js | 2 +- devtools/client/webconsole/new-webconsole.js | 50 +------- .../test/browser_console_open_or_focus.js | 4 +- .../webconsole/webconsole-connection-proxy.js | 69 ++++------- devtools/client/webconsole/webconsole.js | 117 +++++++++++++++--- devtools/client/webconsole/webconsole.xhtml | 32 ----- devtools/client/webconsole/webconsole.xul | 1 + 23 files changed, 159 insertions(+), 266 deletions(-) delete mode 100644 devtools/client/webconsole/webconsole.xhtml diff --git a/devtools/client/definitions.js b/devtools/client/definitions.js index f7322f02a583..a77a2f7a4856 100644 --- a/devtools/client/definitions.js +++ b/devtools/client/definitions.js @@ -100,10 +100,9 @@ Tools.webConsole = { accesskey: l10n("webConsoleCmd.accesskey"), modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift", ordinal: 2, - oldWebConsoleURL: "chrome://devtools/content/webconsole/webconsole.xul", - newWebConsoleURL: "chrome://devtools/content/webconsole/webconsole.xhtml", icon: "chrome://devtools/skin/images/tool-webconsole.svg", invertIconForDarkTheme: true, + url: "chrome://devtools/content/webconsole/webconsole.xul", label: l10n("ToolboxTabWebconsole.label"), menuLabel: l10n("MenuWebconsole.label"), panelLabel: l10n("ToolboxWebConsole.panelLabel"), @@ -133,20 +132,6 @@ Tools.webConsole = { } }; -function switchWebconsole() { - if (Services.prefs.getBoolPref("devtools.webconsole.new-frontend-enabled")) { - Tools.webConsole.url = Tools.webConsole.newWebConsoleURL; - } else { - Tools.webConsole.url = Tools.webConsole.oldWebConsoleURL; - } -} -switchWebconsole(); - -Services.prefs.addObserver( - "devtools.webconsole.new-frontend-enabled", - { observe: switchWebconsole } -); - Tools.jsdebugger = { id: "jsdebugger", key: l10n("debuggerMenu.commandkey"), diff --git a/devtools/client/framework/toolbox-process-window.js b/devtools/client/framework/toolbox-process-window.js index f537b2a4d11e..850e7b229118 100644 --- a/devtools/client/framework/toolbox-process-window.js +++ b/devtools/client/framework/toolbox-process-window.js @@ -66,7 +66,6 @@ function setPrefDefaults() { Services.prefs.setBoolPref("devtools.debugger.source-maps-enabled", false); Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", true); Services.prefs.setBoolPref("devtools.debugger.client-source-maps-enabled", true); - Services.prefs.setBoolPref("devtools.webconsole.new-frontend-enabled", false); } window.addEventListener("load", function () { diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index a30b87998e7d..4f7369242fba 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -10,7 +10,6 @@ devtools.jar: content/netmonitor/src/assets/styles/netmonitor.css (netmonitor/src/assets/styles/netmonitor.css) content/shared/widgets/VariablesView.xul (shared/widgets/VariablesView.xul) content/netmonitor/index.html (netmonitor/index.html) - content/webconsole/webconsole.xhtml (webconsole/webconsole.xhtml) content/webconsole/webconsole.xul (webconsole/webconsole.xul) content/scratchpad/scratchpad.xul (scratchpad/scratchpad.xul) content/scratchpad/scratchpad.js (scratchpad/scratchpad.js) @@ -151,7 +150,6 @@ devtools.jar: skin/images/editor-error.png (themes/images/editor-error.png) skin/images/breakpoint.svg (themes/images/breakpoint.svg) skin/webconsole.css (themes/webconsole.css) - skin/new-webconsole.css (themes/new-webconsole.css) skin/images/webconsole.svg (themes/images/webconsole.svg) skin/images/breadcrumbs-scrollbutton.png (themes/images/breadcrumbs-scrollbutton.png) skin/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png) diff --git a/devtools/client/locales/en-US/webConsole.dtd b/devtools/client/locales/en-US/webConsole.dtd index b42156b9b704..17ae026992c7 100644 --- a/devtools/client/locales/en-US/webConsole.dtd +++ b/devtools/client/locales/en-US/webConsole.dtd @@ -9,6 +9,7 @@ - documentation on web development on the web. --> + diff --git a/devtools/client/locales/en-US/webconsole.properties b/devtools/client/locales/en-US/webconsole.properties index eb53ff03b425..96376e62e244 100644 --- a/devtools/client/locales/en-US/webconsole.properties +++ b/devtools/client/locales/en-US/webconsole.properties @@ -9,9 +9,6 @@ # A good criteria is the language in which you'd find the best # documentation on web development on the web. -# LOCALIZATION NOTE (browserConsole.title): shown as the -# title when opening the browser console popup -browserConsole.title=Browser Console # LOCALIZATION NOTE (timestampFormat): %1$02S = hours (24-hour clock), # %2$02S = minutes, %3$02S = seconds, %4$03S = milliseconds. diff --git a/devtools/client/webconsole/hudservice.js b/devtools/client/webconsole/hudservice.js index eff4f9ccaf62..b36658900842 100644 --- a/devtools/client/webconsole/hudservice.js +++ b/devtools/client/webconsole/hudservice.js @@ -16,7 +16,6 @@ var Services = require("Services"); loader.lazyRequireGetter(this, "Telemetry", "devtools/client/shared/telemetry"); loader.lazyRequireGetter(this, "WebConsoleFrame", "devtools/client/webconsole/webconsole", true); -loader.lazyRequireGetter(this, "NewWebConsoleFrame", "devtools/client/webconsole/new-webconsole", true); loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true); loader.lazyRequireGetter(this, "DebuggerServer", "devtools/server/main", true); loader.lazyRequireGetter(this, "DebuggerClient", "devtools/shared/client/main", true); @@ -211,13 +210,13 @@ HUD_SERVICE.prototype = let deferred = promise.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", + let win = Services.ww.openWindow(null, Tools.webConsole.url, "_blank", BROWSER_CONSOLE_WINDOW_FEATURES, null); win.addEventListener("DOMContentLoaded", function () { - win.document.title = l10n.getStr("browserConsole.title"); + // Set the correct Browser Console title. + let root = win.document.documentElement; + root.setAttribute("title", root.getAttribute("browserConsoleTitle")); + deferred.resolve(win); }, {once: true}); @@ -295,11 +294,7 @@ function WebConsole(aTarget, aIframeWindow, aChromeWindow) this.browserWindow = HUDService.currentContext(); } - if (aIframeWindow.location.href === Tools.webConsole.newWebConsoleURL) { - this.ui = new NewWebConsoleFrame(this); - } else { - this.ui = new WebConsoleFrame(this); - } + this.ui = new WebConsoleFrame(this); } WebConsole.prototype = { diff --git a/devtools/client/webconsole/jsterm.js b/devtools/client/webconsole/jsterm.js index 0d3cfe6df62d..6a2a70da2832 100644 --- a/devtools/client/webconsole/jsterm.js +++ b/devtools/client/webconsole/jsterm.js @@ -261,10 +261,6 @@ JSTerm.prototype = { this.completeNode = doc.querySelector(".jsterm-complete-node"); this.inputNode = doc.querySelector(".jsterm-input-node"); - // 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"; @@ -586,11 +582,6 @@ JSTerm.prototype = { * opened. The new variables view instance is given to the callbacks. */ openVariablesView: function (options) { - // Bail out if the side bar doesn't exist. - if (!this.hud.document.querySelector("#webconsole-sidebar")) { - return Promise.resolve(null); - } - let onContainerReady = (window) => { let container = window.document.querySelector("#variables"); let view = this._variablesView; @@ -949,23 +940,17 @@ JSTerm.prototype = { */ clearOutput: function (clearStorage) { let hud = this.hud; - - if (hud.NEW_CONSOLE_OUTPUT_ENABLED) { - hud.newConsoleOutput.dispatchMessagesClear(); - } else { - let outputNode = hud.outputNode; - let node; - while ((node = outputNode.firstChild)) { - hud.removeOutputMessage(node); - } - - hud.groupDepth = 0; - hud._outputQueue.forEach(hud._destroyItem, hud); - hud._outputQueue = []; - hud._repeatNodes = {}; + let outputNode = hud.outputNode; + let node; + while ((node = outputNode.firstChild)) { + hud.removeOutputMessage(node); } + hud.groupDepth = 0; + hud._outputQueue.forEach(hud._destroyItem, hud); + hud._outputQueue = []; this.webConsoleClient.clearNetworkRequests(); + hud._repeatNodes = {}; if (clearStorage) { this.webConsoleClient.clearMessagesCache(); @@ -973,7 +958,9 @@ JSTerm.prototype = { this._sidebarDestroy(); - this.focus(); + if (hud.NEW_CONSOLE_OUTPUT_ENABLED) { + hud.newConsoleOutput.dispatchMessagesClear(); + } this.emit("messages-cleared"); }, @@ -1601,8 +1588,8 @@ JSTerm.prototype = { if (items.length > 1 && !popup.isOpen) { let str = this.getInputValue().substr(0, this.inputNode.selectionStart); let offset = str.length - (str.lastIndexOf("\n") + 1) - lastPart.length; - let x = offset * this._inputCharWidth; - popup.openPopup(inputNode, x + this._chevronWidth); + let x = offset * this.hud._inputCharWidth; + popup.openPopup(inputNode, x + this.hud._chevronWidth); this._autocompletePopupNavigated = false; } else if (items.length < 2 && popup.isOpen) { popup.hidePopup(); @@ -1703,32 +1690,6 @@ JSTerm.prototype = { this.completeNode.value = prefix + suffix; }, - /** - * Calculates the width and height of a single character of the input box. - * This will be used in opening the popup at the correct offset. - * - * @private - */ - _updateCharSize: function () { - let doc = this.hud.document; - let tempLabel = doc.createElementNS(XHTML_NS, "span"); - let style = tempLabel.style; - style.position = "fixed"; - style.padding = "0"; - style.margin = "0"; - style.width = "auto"; - style.color = "transparent"; - WebConsoleUtils.copyTextStyles(this.inputNode, tempLabel); - tempLabel.textContent = "x"; - doc.documentElement.appendChild(tempLabel); - this._inputCharWidth = tempLabel.offsetWidth; - tempLabel.remove(); - // Calculate the width of the chevron placed at the beginning of the input - // box. Remove 4 more pixels to accomodate the padding of the popup. - this._chevronWidth = +doc.defaultView.getComputedStyle(this.inputNode) - .paddingLeft.replace(/[^0-9.]/g, "") - 4; - }, - /** * Destroy the sidebar. * @private diff --git a/devtools/client/webconsole/moz.build b/devtools/client/webconsole/moz.build index 684d08587cf4..56c3cb89dae3 100644 --- a/devtools/client/webconsole/moz.build +++ b/devtools/client/webconsole/moz.build @@ -16,7 +16,6 @@ DevToolsModules( 'console-output.js', 'hudservice.js', 'jsterm.js', - 'new-webconsole.js', 'panel.js', 'utils.js', 'webconsole-connection-proxy.js', diff --git a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js index a47d5f150e2f..82f3aec56755 100644 --- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js +++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js @@ -41,28 +41,6 @@ NewConsoleOutputWrapper.prototype = { this.jsterm.hud[id] = node; }; - // Focus the input line whenever the output area is clicked. - this.parentNode.addEventListener("click", (event) => { - // Do not focus on middle/right-click or 2+ clicks. - if (event.detail !== 1 || event.button !== 0) { - return; - } - - // Do not focus if something is selected - let selection = this.document.defaultView.getSelection(); - if (selection && !selection.isCollapsed) { - return; - } - - // Do not focus if a link was clicked - if (event.target.nodeName.toLowerCase() === "a" || - event.target.parentNode.nodeName.toLowerCase() === "a") { - return; - } - - this.jsterm.focus(); - }); - const serviceContainer = { attachRefToHud, emitNewMessage: (node, messageId) => { @@ -164,8 +142,6 @@ NewConsoleOutputWrapper.prototype = { )); this.body = ReactDOM.render(provider, this.parentNode); - - this.jsterm.focus(); }, dispatchMessageAdd: function (message, waitForResponse) { diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_dir.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_dir.js index bcb9f8461b74..69937459815e 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_dir.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_dir.js @@ -32,7 +32,7 @@ add_task(async function () { }); let dirMessageNode = await waitFor(() => - findConsoleDir(hud.ui.outputNode, 0)); + findConsoleDir(hud.ui.experimentalOutputNode, 0)); let objectInspectors = [...dirMessageNode.querySelectorAll(".tree")]; is(objectInspectors.length, 1, "There is the expected number of object inspectors"); @@ -65,7 +65,7 @@ add_task(async function () { content.wrappedJSObject.console.dir(data); }); - dirMessageNode = await waitFor(() => findConsoleDir(hud.ui.outputNode, 1)); + dirMessageNode = await waitFor(() => findConsoleDir(hud.ui.experimentalOutputNode, 1)); objectInspectors = [...dirMessageNode.querySelectorAll(".tree")]; is(objectInspectors.length, 1, "There is the expected number of object inspectors"); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_group.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_group.js index 0f9d788ba4c6..f07f73683268 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_group.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_group.js @@ -76,7 +76,7 @@ add_task(function* () { testClass(node, "log"); testIndent(node, 0); - let nodes = hud.ui.outputNode.querySelectorAll(".message"); + let nodes = hud.ui.experimentalOutputNode.querySelectorAll(".message"); is(nodes.length, 8, "expected number of messages are displayed"); }); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_table.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_table.js index bbceb6ac0bbc..15925dee0376 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_table.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_table.js @@ -126,12 +126,12 @@ add_task(function* () { let nodes = []; for (let testCase of testCases) { let node = yield waitFor( - () => findConsoleTable(hud.ui.outputNode, testCases.indexOf(testCase)) + () => findConsoleTable(hud.ui.experimentalOutputNode, testCases.indexOf(testCase)) ); nodes.push(node); } - let consoleTableNodes = hud.ui.outputNode.querySelectorAll( + let consoleTableNodes = hud.ui.experimentalOutputNode.querySelectorAll( ".message .new-consoletable"); is(consoleTableNodes.length, testCases.length, diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js index c1ca4e0b0615..8eb5369261ed 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js @@ -13,7 +13,7 @@ const TEST_URI = "http://example.com/browser/devtools/client/webconsole/new-cons add_task(function* () { let hud = yield openNewTabAndConsole(TEST_URI); - const outputNode = hud.ui.outputNode; + const outputNode = hud.ui.experimentalOutputNode; const toolbar = yield waitFor(() => { return outputNode.querySelector(".webconsole-filterbar-primary"); @@ -58,7 +58,7 @@ function filterIsEnabled(button) { function* testFilterPersistence() { let hud = yield openNewTabAndConsole(TEST_URI); - const outputNode = hud.ui.outputNode; + const outputNode = hud.ui.experimentalOutputNode; const filterBar = yield waitFor(() => { return outputNode.querySelector(".webconsole-filterbar-secondary"); }); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters_persist.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters_persist.js index d0ab5c1521dd..90e33c728e26 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters_persist.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters_persist.js @@ -46,7 +46,7 @@ add_task(function* () { }); function* getFilterButtons(hud) { - const outputNode = hud.ui.outputNode; + const outputNode = hud.ui.experimentalOutputNode; info("Wait for console toolbar to appear"); const toolbar = yield waitFor(() => { diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js index d46bbbef09dd..7660df2380ff 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js @@ -32,7 +32,6 @@ add_task(function* () { yield waitForBlurredInput(inputNode); EventUtils.sendMouseEvent({type: "click"}, hud.outputNode); - ok(inputNode.getAttribute("focused"), "input node is focused, second time"); yield waitForBlurredInput(inputNode); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js index 4c6b88d5626d..1038194b989f 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js @@ -27,7 +27,7 @@ add_task(function* () { let currentPosition = outputScroller.scrollTop; const bottom = currentPosition; - hud.jsterm.inputNode.focus(); + EventUtils.sendMouseEvent({type: "click"}, hud.jsterm.inputNode); // Page up. EventUtils.synthesizeKey("VK_PAGE_UP", {}); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/head.js b/devtools/client/webconsole/new-console-output/test/mochitest/head.js index 78786d79fefd..8a6959a5395b 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/head.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/head.js @@ -136,7 +136,7 @@ function findMessage(hud, text, selector = ".message") { * The selector to use in finding the message. */ function findMessages(hud, text, selector = ".message") { - const messages = hud.ui.outputNode.querySelectorAll(selector); + const messages = hud.ui.experimentalOutputNode.querySelectorAll(selector); const elements = Array.prototype.filter.call( messages, (el) => el.textContent.includes(text) diff --git a/devtools/client/webconsole/new-webconsole.js b/devtools/client/webconsole/new-webconsole.js index d2076c33d08a..0a71384abb40 100644 --- a/devtools/client/webconsole/new-webconsole.js +++ b/devtools/client/webconsole/new-webconsole.js @@ -14,10 +14,6 @@ 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 PREF_MESSAGE_TIMESTAMP = "devtools.webconsole.timestampMessages"; @@ -94,23 +90,9 @@ NewWebConsoleFrame.prototype = { this._destroyer = defer(); - Services.prefs.removeObserver(PREF_MESSAGE_TIMESTAMP, this._onToolboxPrefChanged); + Services.prefs.addObserver(PREF_MESSAGE_TIMESTAMP, this._onToolboxPrefChanged); this.React = this.ReactDOM = this.FrameView = null; - if (this.jsterm) { - this.jsterm.off("sidebar-opened", this.resize); - this.jsterm.off("sidebar-closed", this.resize); - this.jsterm.destroy(); - this.jsterm = null; - } - - let toolbox = gDevTools.getToolbox(this.owner.target); - if (toolbox) { - toolbox.off("webconsole-selected", this._onPanelSelected); - } - - this.window = this.owner = this.newConsoleOutput = null; - let onDestroy = () => { this._destroyer.resolve(null); }; @@ -221,36 +203,6 @@ NewWebConsoleFrame.prototype = { // Toggle the timestamp on preference change Services.prefs.addObserver(PREF_MESSAGE_TIMESTAMP, this._onToolboxPrefChanged); this._onToolboxPrefChanged(); - - this._initShortcuts(); - }, - - _initShortcuts: function () { - let shortcuts = new KeyShortcuts({ - window: this.window - }); - - shortcuts.on(l10n.getStr("webconsole.find.key"), - (name, event) => { - this.filterBox.focus(); - event.preventDefault(); - }); - - let clearShortcut; - if (system.constants.platform === "macosx") { - clearShortcut = l10n.getStr("webconsole.clear.keyOSX"); - } else { - clearShortcut = l10n.getStr("webconsole.clear.key"); - } - - shortcuts.on(clearShortcut, () => this.jsterm.clearOutput(true)); - - if (this.isBrowserConsole) { - shortcuts.on(l10n.getStr("webconsole.close.key"), - this.window.close.bind(this.window)); - - ZoomKeys.register(this.window); - } }, /** diff --git a/devtools/client/webconsole/test/browser_console_open_or_focus.js b/devtools/client/webconsole/test/browser_console_open_or_focus.js index ff8d19b5f6a6..d537c9aadb7f 100644 --- a/devtools/client/webconsole/test/browser_console_open_or_focus.js +++ b/devtools/client/webconsole/test/browser_console_open_or_focus.js @@ -28,7 +28,7 @@ add_task(function* () { }); currWindow = Services.wm.getMostRecentWindow(null); - is(currWindow.document.documentURI, Tools.webConsole.oldWebConsoleURL, + is(currWindow.document.documentURI, Tools.webConsole.url, "The Browser Console is open and has focus"); mainWindow.focus(); @@ -36,7 +36,7 @@ add_task(function* () { yield HUDService.openBrowserConsoleOrFocus(); currWindow = Services.wm.getMostRecentWindow(null); - is(currWindow.document.documentURI, Tools.webConsole.oldWebConsoleURL, + is(currWindow.document.documentURI, Tools.webConsole.url, "The Browser Console is open and has focus"); yield HUDService.toggleBrowserConsole(); diff --git a/devtools/client/webconsole/webconsole-connection-proxy.js b/devtools/client/webconsole/webconsole-connection-proxy.js index 62689c7b1adc..263e2b10da35 100644 --- a/devtools/client/webconsole/webconsole-connection-proxy.js +++ b/devtools/client/webconsole/webconsole-connection-proxy.js @@ -287,12 +287,11 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onPageError: function (type, packet) { - if (!this.webConsoleFrame || packet.from != this._consoleActor) { - return; - } - if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { - this.dispatchMessageAdd(packet); - } else { + if (this.webConsoleFrame && packet.from == this._consoleActor) { + if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { + this.dispatchMessageAdd(packet); + return; + } this.webConsoleFrame.handlePageError(packet.pageError); } }, @@ -311,6 +310,7 @@ WebConsoleConnectionProxy.prototype = { if (!this.webConsoleFrame || packet.from != this._consoleActor) { return; } + if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { this.dispatchMessageAdd(packet); } else { @@ -329,13 +329,12 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onConsoleAPICall: function (type, packet) { - if (!this.webConsoleFrame || packet.from != this._consoleActor) { - return; - } - if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { - this.dispatchMessageAdd(packet); - } else { - this.webConsoleFrame.handleConsoleAPICall(packet.message); + if (this.webConsoleFrame && packet.from == this._consoleActor) { + if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { + this.dispatchMessageAdd(packet); + } else { + this.webConsoleFrame.handleConsoleAPICall(packet.message); + } } }, @@ -350,13 +349,12 @@ WebConsoleConnectionProxy.prototype = { * The network request information. */ _onNetworkEvent: function (type, networkInfo) { - if (!this.webConsoleFrame) { - return; - } - if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { - this.dispatchMessageAdd(networkInfo); - } else { - this.webConsoleFrame.handleNetworkEvent(networkInfo); + if (this.webConsoleFrame) { + if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { + this.dispatchMessageAdd(networkInfo); + } else { + this.webConsoleFrame.handleNetworkEvent(networkInfo); + } } }, @@ -371,13 +369,11 @@ WebConsoleConnectionProxy.prototype = { * The update response received from the server. */ _onNetworkEventUpdate: function (type, response) { - if (!this.webConsoleFrame) { - return; - } let { packet, networkInfo } = response; - if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { - this.dispatchMessageUpdate(networkInfo, response); - } else { + if (this.webConsoleFrame) { + if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { + this.dispatchMessageUpdate(networkInfo, response); + } this.webConsoleFrame.handleNetworkEventUpdate(networkInfo, packet); } }, @@ -393,23 +389,13 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onFileActivity: function (type, packet) { - if (!this.webConsoleFrame || packet.from != this._consoleActor) { - return; - } - if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { - // TODO: Implement for new console - } else { + if (this.webConsoleFrame && packet.from == this._consoleActor) { this.webConsoleFrame.handleFileActivity(packet.uri); } }, _onReflowActivity: function (type, packet) { - if (!this.webConsoleFrame || packet.from != this._consoleActor) { - return; - } - if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { - // TODO: Implement for new console - } else { + if (this.webConsoleFrame && packet.from == this._consoleActor) { this.webConsoleFrame.handleReflowActivity(packet); } }, @@ -425,12 +411,7 @@ WebConsoleConnectionProxy.prototype = { * The message received from the server. */ _onServerLogCall: function (type, packet) { - if (!this.webConsoleFrame || packet.from != this._consoleActor) { - return; - } - if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) { - // TODO: Implement for new console - } else { + if (this.webConsoleFrame && packet.from == this._consoleActor) { this.webConsoleFrame.handleConsoleAPICall(packet.message); } }, diff --git a/devtools/client/webconsole/webconsole.js b/devtools/client/webconsole/webconsole.js index 4641a34dfec3..935f80e4a35a 100644 --- a/devtools/client/webconsole/webconsole.js +++ b/devtools/client/webconsole/webconsole.js @@ -491,6 +491,10 @@ WebConsoleFrame.prototype = { }; allReady.then(notifyObservers, notifyObservers); + if (this.NEW_CONSOLE_OUTPUT_ENABLED) { + allReady.then(this.newConsoleOutput.init); + } + return allReady; }, @@ -531,6 +535,10 @@ WebConsoleFrame.prototype = { _initUI: function () { this.document = this.window.document; this.rootElement = this.document.documentElement; + this.NEW_CONSOLE_OUTPUT_ENABLED = !this.isBrowserConsole + && !this.owner.target.chrome + && Services.prefs.getBoolPref(PREF_NEW_FRONTEND_ENABLED); + this.outputNode = this.document.getElementById("output-container"); this.outputWrapper = this.document.getElementById("output-wrapper"); this.completeNode = this.document.querySelector(".jsterm-complete-node"); @@ -540,28 +548,55 @@ WebConsoleFrame.prototype = { // frontend this will be reassigned. this.outputScroller = this.outputWrapper; + // Update the character width and height needed for the popup offset + // calculations. + this._updateCharSize(); + this.jsterm = new JSTerm(this); this.jsterm.init(); let toolbox = gDevTools.getToolbox(this.owner.target); - // Register the controller to handle "select all" properly. - this._commandController = new CommandController(this); - this.window.controllers.insertControllerAt(0, this._commandController); + if (this.NEW_CONSOLE_OUTPUT_ENABLED) { + // @TODO Remove this once JSTerm is handled with React/Redux. + this.window.jsterm = this.jsterm; - this._contextMenuHandler = new ConsoleContextMenu(this); + // Remove context menu for now (see Bug 1307239). + this.outputWrapper.removeAttribute("context"); - this._initDefaultFilterPrefs(); - this.filterBox = this.document.querySelector(".hud-filter-box"); - this._setFilterTextBoxEvents(); - this._initFilterButtons(); + // XXX: We should actually stop output from happening on old output + // panel, but for now let's just hide it. + this.experimentalOutputNode = this.outputNode.cloneNode(); + this.experimentalOutputNode.removeAttribute("tabindex"); + this.outputNode.hidden = true; + this.outputNode.parentNode.appendChild(this.experimentalOutputNode); + // @TODO Once the toolbox has been converted to React, see if passing + // in JSTerm is still necessary. - let clearButton = - this.document.getElementsByClassName("webconsole-clear-console-button")[0]; - clearButton.addEventListener("command", () => { - this.owner._onClearButton(); - this.jsterm.clearOutput(true); - }); + this.newConsoleOutput = new this.window.NewConsoleOutput( + this.experimentalOutputNode, this.jsterm, toolbox, this.owner, this.document); + + let filterToolbar = this.document.querySelector(".hud-console-filter-toolbar"); + filterToolbar.hidden = true; + } else { + // Register the controller to handle "select all" properly. + this._commandController = new CommandController(this); + this.window.controllers.insertControllerAt(0, this._commandController); + + this._contextMenuHandler = new ConsoleContextMenu(this); + + this._initDefaultFilterPrefs(); + this.filterBox = this.document.querySelector(".hud-filter-box"); + this._setFilterTextBoxEvents(); + this._initFilterButtons(); + let clearButton = + this.document.getElementsByClassName("webconsole-clear-console-button")[0]; + clearButton.addEventListener("command", () => { + this.owner._onClearButton(); + this.jsterm.clearOutput(true); + }); + + } this.resize(); this.window.addEventListener("resize", this.resize, true); @@ -593,6 +628,13 @@ WebConsoleFrame.prototype = { return; } + // Do not focus if a search input was clicked on the new frontend + if (this.NEW_CONSOLE_OUTPUT_ENABLED && + event.target.nodeName.toLowerCase() === "input" && + event.target.getAttribute("type").toLowerCase() === "search") { + return; + } + this.jsterm.focus(); }); @@ -613,7 +655,12 @@ WebConsoleFrame.prototype = { * using -moz-box-flex and 100% width. See Bug 1237368. */ resize: function () { - this.outputNode.style.width = this.outputWrapper.clientWidth + "px"; + if (this.NEW_CONSOLE_OUTPUT_ENABLED) { + this.experimentalOutputNode.style.width = + this.outputWrapper.clientWidth + "px"; + } else { + this.outputNode.style.width = this.outputWrapper.clientWidth + "px"; + } }, /** @@ -797,6 +844,32 @@ WebConsoleFrame.prototype = { } }, + /** + * Calculates the width and height of a single character of the input box. + * This will be used in opening the popup at the correct offset. + * + * @private + */ + _updateCharSize: function () { + let doc = this.document; + let tempLabel = doc.createElementNS(XHTML_NS, "span"); + let style = tempLabel.style; + style.position = "fixed"; + style.padding = "0"; + style.margin = "0"; + style.width = "auto"; + style.color = "transparent"; + WebConsoleUtils.copyTextStyles(this.inputNode, tempLabel); + tempLabel.textContent = "x"; + doc.documentElement.appendChild(tempLabel); + this._inputCharWidth = tempLabel.offsetWidth; + tempLabel.remove(); + // Calculate the width of the chevron placed at the beginning of the input + // box. Remove 4 more pixels to accomodate the padding of the popup. + this._chevronWidth = +doc.defaultView.getComputedStyle(this.inputNode) + .paddingLeft.replace(/[^0-9.]/g, "") - 4; + }, + /** * The event handler that is called whenever a user switches a filter on or * off. @@ -1901,8 +1974,14 @@ WebConsoleFrame.prototype = { handleTabNavigated: function (event, packet) { if (event == "will-navigate") { if (this.persistLog) { - let marker = new Messages.NavigationMarker(packet, Date.now()); - this.output.addMessage(marker); + if (this.NEW_CONSOLE_OUTPUT_ENABLED) { + // Add a _type to hit convertCachedPacket. + packet._type = true; + this.newConsoleOutput.dispatchMessageAdd(packet); + } else { + let marker = new Messages.NavigationMarker(packet, Date.now()); + this.output.addMessage(marker); + } } else { this.jsterm.clearOutput(); } @@ -2625,7 +2704,9 @@ WebConsoleFrame.prototype = { */ _onToolboxPrefChanged: function () { let newValue = Services.prefs.getBoolPref(PREF_MESSAGE_TIMESTAMP); - if (newValue) { + if (this.NEW_CONSOLE_OUTPUT_ENABLED) { + this.newConsoleOutput.dispatchTimestampsToggle(newValue); + } else if (newValue) { this.outputNode.classList.remove("hideTimestamps"); } else { this.outputNode.classList.add("hideTimestamps"); diff --git a/devtools/client/webconsole/webconsole.xhtml b/devtools/client/webconsole/webconsole.xhtml deleted file mode 100644 index fe240235c35b..000000000000 --- a/devtools/client/webconsole/webconsole.xhtml +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - -
-
-
- -
- - - - -
- -
-
- - diff --git a/devtools/client/webconsole/webconsole.xul b/devtools/client/webconsole/webconsole.xul index 84b357297ff6..4c1cc20c1e09 100644 --- a/devtools/client/webconsole/webconsole.xul +++ b/devtools/client/webconsole/webconsole.xul @@ -19,6 +19,7 @@ macanimationtype="document" fullscreenbutton="true" title="&window.title;" + browserConsoleTitle="&browserConsole.title;" windowtype="devtools:webconsole" width="900" height="350" persist="screenX screenY width height sizemode">