Bug 1519315 - Display CodeMirror's gutter in console input when devtools.webconsole.input.editor is true. r=Honza.
authorBryan Kok <bryan.wyern1@gmail.com>
Fri, 28 Jun 2019 16:27:55 +0000
changeset 543397 938ba43a3350c4f81a5ed152b02eb92f9e68c949
parent 543396 af62dfeb5c0eeb6e5bf5a8626f2556f3fa0d7cd2
child 543398 e4d7737182028ca91acef32f3733e61f5dec552f
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1519315
milestone69.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 1519315 - Display CodeMirror's gutter in console input when devtools.webconsole.input.editor is true. r=Honza. Differential Revision: https://phabricator.services.mozilla.com/D33995
devtools/client/webconsole/components/Input/JSTerm.js
devtools/client/webconsole/test/mochitest/browser.ini
devtools/client/webconsole/test/mochitest/browser_jsterm_editor_gutter.js
devtools/client/webconsole/test/mochitest/browser_jsterm_editor_toggle_keyboard_shortcut.js
devtools/client/webconsole/test/mochitest/head.js
--- a/devtools/client/webconsole/components/Input/JSTerm.js
+++ b/devtools/client/webconsole/components/Input/JSTerm.js
@@ -205,17 +205,17 @@ class JSTerm extends Component {
           this.execute();
           return null;
         };
 
         this.editor = new Editor({
           autofocus: true,
           enableCodeFolding: false,
           autoCloseBrackets: false,
-          gutters: [],
+          lineNumbers: this.props.editorMode,
           lineWrapping: true,
           mode: Editor.modes.js,
           styleActiveLine: false,
           tabIndex: "0",
           viewportMargin: Infinity,
           disableSearchAddon: true,
           extraKeys: {
             "Enter": () => {
@@ -453,23 +453,30 @@ class JSTerm extends Component {
   }
 
   /**
    * Do all the imperative work needed after a Redux store update.
    *
    * @param {Object} nextProps: props passed from shouldComponentUpdate.
    */
   imperativeUpdate(nextProps) {
+    if (!nextProps) {
+      return;
+    }
+
     if (
-      nextProps &&
       nextProps.autocompleteData !== this.props.autocompleteData &&
       nextProps.autocompleteData.pendingRequestId === null
     ) {
       this.updateAutocompletionPopup(nextProps.autocompleteData);
     }
+
+    if (this.editor && nextProps.editorMode !== this.props.editorMode) {
+      this.editor.setOption("lineNumbers", nextProps.editorMode);
+    }
   }
 
   /**
    * Getter for the element that holds the messages we display.
    * @type Element
    */
   get outputNode() {
     return this.webConsoleUI.outputNode;
--- a/devtools/client/webconsole/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/test/mochitest/browser.ini
@@ -207,16 +207,17 @@ skip-if = (os == "win" && processor == "
 [browser_jsterm_copy_command.js]
 [browser_jsterm_ctrl_a_select_all.js]
 [browser_jsterm_ctrl_key_nav.js]
 skip-if = os != 'mac' # The tested ctrl+key shortcuts are OSX only
 [browser_jsterm_document_no_xray.js]
 [browser_jsterm_editor.js]
 [browser_jsterm_editor_enter.js]
 [browser_jsterm_editor_execute.js]
+[browser_jsterm_editor_gutter.js]
 [browser_jsterm_editor_toggle_keyboard_shortcut.js]
 [browser_jsterm_editor_toolbar.js]
 [browser_jsterm_error_docs.js]
 [browser_jsterm_error_outside_valid_range.js]
 [browser_jsterm_focus_reload.js]
 [browser_jsterm_helper_clear.js]
 [browser_jsterm_helper_dollar_dollar.js]
 skip-if = (os == "win" && processor == "aarch64") # disabled on aarch64 due to 1535082
new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_editor_gutter.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that CodeMirror's gutter in console input is displayed when
+// 'devtools.webconsole.input.editor' is true.
+// See https://bugzilla.mozilla.org/show_bug.cgi?id=1519315
+
+"use strict";
+
+const TEST_URI = "data:text/html;charset=utf-8,Test JsTerm editor line gutters";
+
+add_task(async function() {
+  await pushPref("devtools.webconsole.input.editor", true);
+
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  info("Check that the line numbers gutter is rendered when in editor layout");
+  ok(getLineNumbersGutterElement(hud),
+    "line numbers gutter is rendered on the input when in editor mode.");
+
+  info("Check that the line numbers gutter is hidden we switch to the inline layout");
+  await toggleLayout(hud);
+  ok(!getLineNumbersGutterElement(hud),
+    "line numbers gutter is hidden on the input when in inline mode.");
+
+  info("Check that the line numbers gutter is rendered again we switch back to editor");
+  await toggleLayout(hud);
+  ok(getLineNumbersGutterElement(hud), "line numbers gutter is rendered again on the " +
+    " input when switching back to editor mode.");
+});
+
+function getLineNumbersGutterElement(hud) {
+  return hud.ui.outputNode.querySelector(".CodeMirror-linenumbers");
+}
--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_editor_toggle_keyboard_shortcut.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_editor_toggle_keyboard_shortcut.js
@@ -43,19 +43,8 @@ async function performTest() {
   is(isEditorModeEnabled(hud), false, "Editor was disabled");
 
   info("Enable the editor mode again");
   await toggleLayout(hud);
   is(isEditorModeEnabled(hud), true, "Editor mode was enabled again");
 
   Services.prefs.clearUserPref(EDITOR_PREF);
 }
-
-function toggleLayout(hud) {
-  const isMacOS = Services.appinfo.OS === "Darwin";
-
-  const enabled = isEditorModeEnabled(hud);
-
-  EventUtils.synthesizeKey("b", {
-    [isMacOS ? "metaKey" : "ctrlKey"]: true,
-  });
-  return waitFor(() => isEditorModeEnabled(hud) === !enabled);
-}
--- a/devtools/client/webconsole/test/mochitest/head.js
+++ b/devtools/client/webconsole/test/mochitest/head.js
@@ -1397,8 +1397,25 @@ function reloadPage() {
   * @param {WebConsole} hud
   * @returns {Boolean}
   */
 function isEditorModeEnabled(hud) {
   const {outputNode} = hud.ui;
   const appNode = outputNode.querySelector(".webconsole-app");
   return appNode.classList.contains("jsterm-editor");
 }
+
+/**
+ * Toggle the layout between in-line and editor.
+ *
+ * @param {WebConsole} hud
+ * @returns {Promise} A promise that resolves once the layout change was rendered.
+ */
+function toggleLayout(hud) {
+  const isMacOS = Services.appinfo.OS === "Darwin";
+  const enabled = isEditorModeEnabled(hud);
+
+  EventUtils.synthesizeKey("b", {
+    [isMacOS ? "metaKey" : "ctrlKey"]: true,
+  });
+  return waitFor(() => isEditorModeEnabled(hud) === !enabled);
+}
+