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

@@ -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;

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";
     }

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;
       }
 

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();
   });
 }

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");
 });

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;
+}

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/. -->
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" dir="">
+<html xmlns="http://www.w3.org/1999/xhtml" dir="">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
@@ -23,17 +23,17 @@
     <div id="app-wrapper" class="theme-body">
       <div id="output-container" role="document" aria-live="polite"/>
       <div id="jsterm-wrapper">
-        <xul:notificationbox id="webconsole-notificationbox">
+        <div id="webconsole-notificationbox">
           <div class="jsterm-input-container" style="direction:ltr">
-            <xul:stack class="jsterm-stack-node" flex="1">
-              <xul:textbox class="jsterm-complete-node devtools-monospace"
-                       multiline="true" rows="1" tabindex="-1"/>
-              <xul:textbox class="jsterm-input-node devtools-monospace"
-                       multiline="true" rows="1" tabindex="0"
+            <div class="jsterm-stack-node">
+              <textarea class="jsterm-complete-node devtools-monospace"
+                       tabindex="-1"/>
+              <textarea class="jsterm-input-node devtools-monospace"
+                       rows="1" tabindex="0"
                        aria-autocomplete="list"/>
-            </xul:stack>
+            </div>
           </div>
-        </xul:notificationbox>
+        </div>
       </div>
     </div>
   </body>