From 68b4a2b2e1c7203fca0be1d0afabf720bb20142a Mon Sep 17 00:00:00 2001 From: Jan Odvarko Date: Mon, 25 Sep 2017 16:34:10 +0200 Subject: [PATCH] Bug 1304328 - Stop using XUL in webconsole/jsterm.js; r=nchevobbe MozReview-Commit-ID: EPLUaothwH5 --HG-- extra : rebase_source : 4c1036b65627473d3c5549aa4caa712ba1803ad6 --- devtools/client/themes/webconsole.css | 104 ++++++++++++------ devtools/client/webconsole/jsterm.js | 6 +- .../new-console-output-wrapper.js | 3 +- .../browser_webconsole_input_focus.js | 19 ++-- ...owser_webconsole_keyboard_accessibility.js | 4 +- .../new-console-output/test/mochitest/head.js | 9 +- devtools/client/webconsole/webconsole.xhtml | 18 +-- 7 files changed, 104 insertions(+), 59 deletions(-) diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css index 1dc9967af286..30b2fbf21a4c 100644 --- a/devtools/client/themes/webconsole.css +++ b/devtools/client/themes/webconsole.css @@ -407,36 +407,6 @@ html #webconsole-notificationbox { border-top: 1px solid var(--theme-splitter-color); } -.theme-light .jsterm-input-container { - /* For light theme use a white background for the input - it looks better - than off-white */ - background-color: #fff; - border-top-color: #e0e0e0; -} - -.theme-firebug .jsterm-input-container { - border-top: 1px solid #ccc; -} - -.jsterm-input-node, -.jsterm-complete-node { - border: none; - padding: 0; - padding-inline-start: 20px; - margin: 0; - -moz-appearance: none; - background-color: transparent; -} - -.jsterm-input-node[focused="true"] { - background-image: var(--theme-command-line-image-focus); - box-shadow: none; -} - -.jsterm-complete-node { - color: var(--theme-comment); -} - .jsterm-input-node { /* Always allow scrolling on input - it auto expands in js by setting height, but don't want it to get bigger than the window. 24px = toolbar height. */ @@ -448,15 +418,83 @@ html #webconsole-notificationbox { color: var(--theme-content-color1); } -:-moz-any(.jsterm-input-node, - .jsterm-complete-node) > .textbox-input-box > .textbox-textarea { +.jsterm-complete-node { + color: var(--theme-comment); +} + +.theme-light .jsterm-input-container { + /* For light theme use a white background for the input - it looks better + than off-white */ + background-color: #fff; + border-top-color: #e0e0e0; +} + +.theme-firebug .jsterm-input-container { + border-top: 1px solid #ccc; +} + +/* styles for the new HTML frontend */ + +html .jsterm-stack-node { + position: relative; +} + +textarea.jsterm-input-node, +textarea.jsterm-complete-node { + width: 100%; + border: none; + margin: 0; + background-color: transparent; + resize: none; + font-size: var(--theme-toolbar-font-size); + line-height: 16px; overflow-x: hidden; - /* Set padding for console input on textbox to make sure it is inlcuded in + /* Set padding for console input on textarea to make sure it is included in + scrollHeight that is used when resizing JSTerminal's input. */ + padding: 4px 0; + padding-inline-start: 20px; +} + +textarea.jsterm-complete-node { + position: absolute; + top: 0; + left: 0; + height: 100%; + pointer-events: none; +} + +textarea.jsterm-input-node:focus { + background-image: var(--theme-command-line-image-focus); + box-shadow: none; +} + + +/* styles for the old frontend, which can be removed in Bug 1381834 */ + +textbox.jsterm-input-node, +textbox.jsterm-complete-node { + border: none; + padding: 0; + padding-inline-start: 20px; + margin: 0; + -moz-appearance: none; + background-color: transparent; +} + +:-moz-any(textbox.jsterm-input-node, + textbox.jsterm-complete-node) > .textbox-input-box > .textbox-textarea { + overflow-x: hidden; + /* Set padding for console input on textbox to make sure it is included in scrollHeight that is used when resizing JSTerminal's input. Note: textbox default style has important already */ padding: 4px 0 !important; } +textbox.jsterm-input-node[focused="true"] { + background-image: var(--theme-command-line-image-focus); + box-shadow: none; +} + .inlined-variables-view .message-body { display: flex; flex-direction: column; diff --git a/devtools/client/webconsole/jsterm.js b/devtools/client/webconsole/jsterm.js index bca48a100e78..7f2d2f68a975 100644 --- a/devtools/client/webconsole/jsterm.js +++ b/devtools/client/webconsole/jsterm.js @@ -1006,7 +1006,11 @@ JSTerm.prototype = { inputNode.style.height = "auto"; // Now resize the input field to fit its contents. - let scrollHeight = inputNode.inputField.scrollHeight; + // TODO: remove `inputNode.inputField.scrollHeight` when the old + // console UI is removed. See bug 1381834 + let scrollHeight = inputNode.inputField ? + inputNode.inputField.scrollHeight : inputNode.scrollHeight; + if (scrollHeight > 0) { inputNode.style.height = scrollHeight + "px"; } 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 6f9622eb57fe..4cd5f2d62732 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 @@ -60,7 +60,8 @@ NewConsoleOutputWrapper.prototype = { } // Do not focus if something other than the output region was clicked - if (!target.closest(".webconsole-output")) { + // (including e.g. the clear messages button in toolbar) + if (!target.closest(".webconsole-output-wrapper")) { return; } 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 a2298774584d..30e9fd7c57ac 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 @@ -18,43 +18,38 @@ add_task(function* () { hud.jsterm.clearOutput(); let inputNode = hud.jsterm.inputNode; - ok(inputNode.getAttribute("focused"), "input node is focused after output is cleared"); + ok(hasFocus(inputNode), "input node is focused after output is cleared"); info("Focus during message logging"); ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () { content.wrappedJSObject.console.log("console message 2"); }); let msg = yield waitFor(() => findMessage(hud, "console message 2")); - ok(inputNode.getAttribute("focused"), "input node is focused, first time"); + ok(hasFocus(inputNode, "input node is focused, first time")); info("Focus after clicking in the output area"); yield waitForBlurredInput(hud); EventUtils.sendMouseEvent({type: "click"}, msg); - ok(inputNode.getAttribute("focused"), "input node is focused, second time"); + ok(hasFocus(inputNode), "input node is focused, second time"); info("Setting a text selection and making sure a click does not re-focus"); yield waitForBlurredInput(hud); let selection = hud.iframeWindow.getSelection(); selection.selectAllChildren(msg.querySelector(".message-body")); EventUtils.sendMouseEvent({type: "click"}, msg); - ok(!inputNode.getAttribute("focused"), - "input node not focused after text is selected"); + ok(!hasFocus(inputNode), "input node not focused after text is selected"); }); function waitForBlurredInput(hud) { let inputNode = hud.jsterm.inputNode; return new Promise(resolve => { let lostFocus = () => { - ok(!inputNode.getAttribute("focused"), "input node is not focused"); + ok(!hasFocus(inputNode), "input node is not focused"); resolve(); }; inputNode.addEventListener("blur", lostFocus, { once: true }); - // Clicking on a DOM Node outside of the webconsole document. The 'blur' event fires - // if we click on something in this document (like the filter box), but the 'focus' - // event won't re-fire on the textbox XBL binding when it's clicked on again. - // Bug 1304328 is tracking removal of XUL for jsterm, we should be able to click on - // the filter textbox instead of the url bar after that. - document.getElementById("urlbar").click(); + // The 'blur' event fires if we focus e.g. the filter box. + inputNode.ownerDocument.querySelector("input.text-filter").focus(); }); } 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 303ad6c880ae..7dfd834a7d86 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 @@ -54,12 +54,12 @@ add_task(function* () { } synthesizeKeyShortcut(clearShortcut); yield waitFor(() => findMessages(hud, "").length == 0); - is(hud.jsterm.inputNode.getAttribute("focused"), "true", "jsterm input is focused"); + ok(hasFocus(hud.jsterm.inputNode), "jsterm input is focused"); // Focus filter info("try ctrl-f to focus filter"); synthesizeKeyShortcut(WCUL10n.getStr("webconsole.find.key")); - ok(!hud.jsterm.inputNode.getAttribute("focused"), "jsterm input is not focused"); + ok(!hasFocus(hud.jsterm.inputNode), "jsterm input is not focused"); is(hud.ui.filterBox, outputScroller.ownerDocument.activeElement, "filter input is focused"); }); 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 bea6d2fd777d..c6c075156f8e 100644 --- a/devtools/client/webconsole/new-console-output/test/mochitest/head.js +++ b/devtools/client/webconsole/new-console-output/test/mochitest/head.js @@ -4,7 +4,7 @@ * http://creativecommons.org/publicdomain/zero/1.0/ */ /* import-globals-from ../../../../framework/test/shared-head.js */ /* exported WCUL10n, openNewTabAndConsole, waitForMessages, waitFor, findMessage, - openContextMenu, hideContextMenu, loadDocument, + openContextMenu, hideContextMenu, loadDocument, hasFocus, waitForNodeMutation, testOpenInDebugger, checkClickOnNode */ "use strict"; @@ -254,3 +254,10 @@ function* checkClickOnNode(hud, toolbox, frameLinkNode) { "expected source url" ); } + +/** + * Returns true if the give node is currently focused. + */ +function hasFocus(node) { + return node.ownerDocument.activeElement == node; +} diff --git a/devtools/client/webconsole/webconsole.xhtml b/devtools/client/webconsole/webconsole.xhtml index f3fc8419a276..5d8d67dacfae 100644 --- a/devtools/client/webconsole/webconsole.xhtml +++ b/devtools/client/webconsole/webconsole.xhtml @@ -3,7 +3,7 @@ - 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/. --> - + @@ -23,17 +23,17 @@
- +
- - - +