Bug 1405343 - Migrate browser_webconsole_input_field_focus_on_panel_select.js to the new frontend; r=bgrins. draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 28 Mar 2018 17:35:32 +0200
changeset 773811 f6187f0bc69952ce40e85ba14f693faf4b1f1245
parent 773730 5bf126434fac78a31256c994b9dbf4b1031b0350
push id104318
push userbmo:nchevobbe@mozilla.com
push dateWed, 28 Mar 2018 15:50:00 +0000
reviewersbgrins
bugs1405343
milestone61.0a1
Bug 1405343 - Migrate browser_webconsole_input_field_focus_on_panel_select.js to the new frontend; r=bgrins. The test needed some changes in new-console.js in order to pass. This patch adds a listener on webconsole-selected to focus the console input. What's funny is that the listener wasn't set, but it was removed in new-webconsole.js destroy function (probably a leftover from the webconsole.js -> new-webconsole.js copy). We also add the openInspector helper function in head.js. MozReview-Commit-ID: 1q6ON6XMkKB
devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_field_focus_on_panel_select.js
devtools/client/webconsole/new-console-output/test/mochitest/head.js
devtools/client/webconsole/new-webconsole.js
--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
@@ -281,17 +281,16 @@ skip-if = true #	Bug 1404382
 [browser_webconsole_highlighter_console_helper.js]
 [browser_webconsole_history_arrow_keys.js]
 [browser_webconsole_hpkp_invalid-headers.js]
 [browser_webconsole_hsts_invalid-headers.js]
 [browser_webconsole_iframe_wrong_hud.js]
 [browser_webconsole_ineffective_iframe_sandbox_warning.js]
 [browser_webconsole_init.js]
 [browser_webconsole_input_field_focus_on_panel_select.js]
-skip-if = true #	Bug 1405343
 [browser_webconsole_input_focus.js]
 [browser_webconsole_insecure_passwords_about_blank_web_console_warning.js]
 [browser_webconsole_insecure_passwords_web_console_warning.js]
 [browser_webconsole_inspect_cross_domain_object.js]
 [browser_webconsole_js_input_expansion.js]
 [browser_webconsole_keyboard_accessibility.js]
 [browser_webconsole_location_debugger_link.js]
 [browser_webconsole_location_scratchpad_link.js]
--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_field_focus_on_panel_select.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_field_focus_on_panel_select.js
@@ -1,37 +1,34 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-// XXX Remove this when the file is migrated to the new frontend.
-/* eslint-disable no-undef */
-
 // Test that the JS input field is focused when the user switches back to the
 // web console from other tools, see bug 891581.
 
 "use strict";
 
-const TEST_URI = "data:text/html;charset=utf8,<p>hello";
+const TEST_URI = "data:text/html;charset=utf8,<p>Test console input focus";
 
 add_task(async function() {
-  await loadTab(TEST_URI);
-  let hud = await openConsole();
-  hud.jsterm.clearOutput();
+  let hud = await openNewTabAndConsole(TEST_URI);
+
+  let inputNode = hud.jsterm.inputNode;
+  const filterInput = hud.ui.outputNode.querySelector(".text-filter");
 
-  is(hud.jsterm.inputNode.hasAttribute("focused"), true,
-     "inputNode should be focused");
+  info("Focus after console is opened");
+  ok(hasFocus(inputNode), "input node is focused after console is opened");
 
-  hud.ui.filterBox.focus();
+  filterInput.focus();
+  ok(hasFocus(filterInput), "filter input should be focused");
 
-  is(hud.ui.filterBox.hasAttribute("focused"), true,
-     "filterBox should be focused");
+  is(hasFocus(inputNode), false, "input node is not focused anymore");
 
-  is(hud.jsterm.inputNode.hasAttribute("focused"), false,
-     "inputNode shouldn't be focused");
+  info("Go to the inspector panel");
+  await openInspector();
 
-  await openInspector();
-  hud = await openConsole();
+  info("Go back to the console");
+  await openConsole();
 
-  is(hud.jsterm.inputNode.hasAttribute("focused"), true,
-     "inputNode should be focused");
+  ok(hasFocus(inputNode), "input node is focused when coming from a different panel");
 });
--- a/devtools/client/webconsole/new-console-output/test/mochitest/head.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/head.js
@@ -430,16 +430,27 @@ async function openDebugger(options = {}
 
   // Do not clear VariableView lazily so it doesn't disturb test ending.
   panel._view.Variables.lazyEmpty = false;
 
   await panel.panelWin.DebuggerController.waitForSourcesLoaded();
   return {target, toolbox, panel};
 }
 
+async function openInspector(options = {}) {
+  if (!options.tab) {
+    options.tab = gBrowser.selectedTab;
+  }
+
+  const target = TargetFactory.forTab(options.tab);
+  const toolbox = await gDevTools.showToolbox(target, "inspector");
+
+  return toolbox.getCurrentPanel();
+}
+
 /**
  * Open the Web Console for the given tab, or the current one if none given.
  *
  * @param nsIDOMElement tab
  *        Optional tab element for which you want open the Web Console.
  *        Defaults to current selected tab.
  * @return Promise
  *         A promise that is resolved with the console hud once the web console is open.
--- a/devtools/client/webconsole/new-webconsole.js
+++ b/devtools/client/webconsole/new-webconsole.js
@@ -44,16 +44,17 @@ const PREF_SIDEBAR_ENABLED = "devtools.w
 function NewWebConsoleFrame(webConsoleOwner) {
   this.owner = webConsoleOwner;
   this.hudId = this.owner.hudId;
   this.isBrowserConsole = this.owner._browserConsole;
   this.NEW_CONSOLE_OUTPUT_ENABLED = true;
   this.window = this.owner.iframeWindow;
 
   this._onToolboxPrefChanged = this._onToolboxPrefChanged.bind(this);
+  this._onPanelSelected = this._onPanelSelected.bind(this);
 
   EventEmitter.decorate(this);
 }
 NewWebConsoleFrame.prototype = {
   /**
    * Getter for the debugger WebConsoleClient.
    * @type object
    */
@@ -223,16 +224,20 @@ NewWebConsoleFrame.prototype = {
     let Wrapper = this.owner.NewConsoleOutputWrapper || this.window.NewConsoleOutput;
     this.newConsoleOutput = new Wrapper(
       this.outputNode, this.jsterm, toolbox, this.owner, this.document);
     // Toggle the timestamp on preference change
     Services.prefs.addObserver(PREF_MESSAGE_TIMESTAMP, this._onToolboxPrefChanged);
     this._onToolboxPrefChanged();
 
     this._initShortcuts();
+
+    if (toolbox) {
+      toolbox.on("webconsole-selected", this._onPanelSelected);
+    }
   },
 
   _initShortcuts: function() {
     let shortcuts = new KeyShortcuts({
       window: this.window
     });
 
     shortcuts.on(l10n.getStr("webconsole.find.key"),
@@ -305,16 +310,25 @@ NewWebConsoleFrame.prototype = {
    * Called when the message timestamp pref changes.
    */
   _onToolboxPrefChanged: function() {
     let newValue = Services.prefs.getBoolPref(PREF_MESSAGE_TIMESTAMP);
     this.newConsoleOutput.dispatchTimestampsToggle(newValue);
   },
 
   /**
+   * Sets the focus to JavaScript input field when the web console tab is
+   * selected or when there is a split console present.
+   * @private
+   */
+  _onPanelSelected: function() {
+    this.jsterm.focus();
+  },
+
+  /**
    * Handler for the tabNavigated notification.
    *
    * @param string event
    *        Event name.
    * @param object packet
    *        Notification packet received from the server.
    */
   handleTabNavigated: async function(packet) {