Bug 1307243 - Part 2: Fix Ctrl-F keyboard shortcut and add test. r=bgrins

MozReview-Commit-ID: 3Z5Vp6UMii4

devtools/client/webconsole/new-console-output/components/filter-bar.js

@@ -26,9 +26,17 @@ const FilterBar = createClass({
 
   propTypes: {
     filter: PropTypes.object.isRequired,
+    serviceContainer: PropTypes.shape({
+      attachRefToHud: PropTypes.func.isRequired,
+    }).isRequired,
     ui: PropTypes.object.isRequired
   },
 
+  componentDidMount() {
+    this.props.serviceContainer.attachRefToHud("filterBox",
+      this.wrapperNode.querySelector(".text-filter"));
+  },
+
   onClickMessagesClear: function () {
     this.props.dispatch(messagesClear());
   },
@@ -63,7 +71,7 @@ const FilterBar = createClass({
         onClick: this.onClickFilterBarToggle
       }),
       dom.input({
-        className: "devtools-plaininput",
+        className: "devtools-plaininput text-filter",
         type: "search",
         value: filter.text,
         placeholder: "Filter output",
@@ -141,8 +149,12 @@ const FilterBar = createClass({
     }
 
     return (
-      dom.div({className: "webconsole-filteringbar-wrapper"},
-        ...children
+      dom.div({
+        className: "webconsole-filteringbar-wrapper",
+        ref: node => {
+          this.wrapperNode = node;
+        }
+      }, ...children
       )
     );
   }

devtools/client/webconsole/new-console-output/new-console-output-wrapper.js

@@ -29,11 +29,13 @@ function NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner) {
 
 NewConsoleOutputWrapper.prototype = {
   init: function () {
+    const attachRefToHud = (id, node) => {
+      this.jsterm.hud[id] = node;
+    };
+
     let childComponent = ConsoleOutput({
       serviceContainer: {
-        attachRefToHud: (id, node) => {
-          this.jsterm.hud[id] = node;
-        },
+        attachRefToHud,
         emitNewMessage: (node) => {
           this.jsterm.hud.emit("new-messages", new Set([{
             node
@@ -53,7 +55,11 @@ NewConsoleOutputWrapper.prototype = {
         sourceMapService: this.toolbox ? this.toolbox._sourceMapService : null,
       }
     });
-    let filterBar = FilterBar({});
+    let filterBar = FilterBar({
+      serviceContainer: {
+        attachRefToHud
+      }
+    });
     let provider = React.createElement(
       Provider,
       { store },

devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js

@@ -18,12 +18,13 @@ const {
 } = require("devtools/client/webconsole/new-console-output/constants");
 
 const { setupStore } = require("devtools/client/webconsole/new-console-output/test/helpers");
+const serviceContainer = require("devtools/client/webconsole/new-console-output/test/fixtures/serviceContainer");
 
 describe("FilterBar component:", () => {
   it("initial render", () => {
     const store = setupStore([]);
 
-    const wrapper = render(Provider({store}, FilterBar({})));
+    const wrapper = render(Provider({store}, FilterBar({ serviceContainer })));
     const toolbar = wrapper.find(
       ".devtools-toolbar.webconsole-filterbar-primary"
     );
@@ -39,7 +40,7 @@ describe("FilterBar component:", () => {
     expect(toolbar.children().eq(1).attr("title")).toBe("Toggle filter bar");
 
     // Text filter
-    expect(toolbar.children().eq(2).attr("class")).toBe("devtools-plaininput");
+    expect(toolbar.children().eq(2).attr("class")).toBe("devtools-plaininput text-filter");
     expect(toolbar.children().eq(2).attr("placeholder")).toBe("Filter output");
     expect(toolbar.children().eq(2).attr("type")).toBe("search");
     expect(toolbar.children().eq(2).attr("value")).toBe("");
@@ -50,7 +51,7 @@ describe("FilterBar component:", () => {
 
     expect(getAllUi(store.getState()).filterBarVisible).toBe(false);
 
-    const wrapper = mount(Provider({store}, FilterBar({})));
+    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
     wrapper.find(".devtools-filter-icon").simulate("click");
 
     expect(getAllUi(store.getState()).filterBarVisible).toBe(true);
@@ -77,7 +78,7 @@ describe("FilterBar component:", () => {
     const store = setupStore([]);
     store.dispatch = sinon.spy();
 
-    const wrapper = mount(Provider({store}, FilterBar({})));
+    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
     wrapper.find(".devtools-clear-icon").simulate("click");
     const call = store.dispatch.getCall(0);
     expect(call.args[0]).toEqual({
@@ -88,7 +89,7 @@ describe("FilterBar component:", () => {
   it("sets filter text when text is typed", () => {
     const store = setupStore([]);
 
-    const wrapper = mount(Provider({store}, FilterBar({})));
+    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
     wrapper.find(".devtools-plaininput").simulate("input", { target: { value: "a" } });
     expect(store.getState().filters.text).toBe("a");
   });

devtools/client/webconsole/new-console-output/test/mochitest/browser.ini

@@ -12,6 +12,7 @@ support-files =
 [browser_webconsole_filters.js]
 [browser_webconsole_init.js]
 [browser_webconsole_input_focus.js]
+[browser_webconsole_keyboard_accessibility.js]
 [browser_webconsole_observer_notifications.js]
 [browser_webconsole_vview_close_on_esc_key.js]
 

devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js

@@ -0,0 +1,71 @@
+/* -*- 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/ */
+
+// Check that basic keyboard shortcuts work in the web console.
+
+"use strict";
+
+const TEST_URI =
+  `data:text/html;charset=utf-8,<p>Test keyboard accessibility</p>
+  <script>
+    for (let i = 1; i <= 100; i++) {
+      console.log("console message " + i);
+    }
+  </script>
+  `;
+
+add_task(function* () {
+  let hud = yield openNewTabAndConsole(TEST_URI);
+  info("Web Console opened");
+
+  const outputWrapper = hud.ui.outputWrapper;
+
+  yield waitFor(() => findMessages(hud, "").length == 100);
+
+  let currentPosition = outputWrapper.scrollTop;
+  const bottom = currentPosition;
+
+  EventUtils.sendMouseEvent({type: "click"}, hud.jsterm.inputNode);
+
+  // Page up.
+  EventUtils.synthesizeKey("VK_PAGE_UP", {});
+  isnot(outputWrapper.scrollTop, currentPosition,
+    "scroll position changed after page up");
+
+  // Page down.
+  currentPosition = outputWrapper.scrollTop;
+  EventUtils.synthesizeKey("VK_PAGE_DOWN", {});
+  ok(outputWrapper.scrollTop > currentPosition,
+     "scroll position now at bottom");
+
+  // Home
+  EventUtils.synthesizeKey("VK_HOME", {});
+  is(outputWrapper.scrollTop, 0, "scroll position now at top");
+
+  // End
+  EventUtils.synthesizeKey("VK_END", {});
+  let scrollTop = outputWrapper.scrollTop;
+  ok(scrollTop > 0 && Math.abs(scrollTop - bottom) <= 5,
+     "scroll position now at bottom");
+
+  // Clear output
+  info("try ctrl-l to clear output");
+  let clearShortcut;
+  if (Services.appinfo.OS === "Darwin") {
+    clearShortcut = WCUL10n.getStr("webconsole.clear.keyOSX");
+  } else {
+    clearShortcut = WCUL10n.getStr("webconsole.clear.key");
+  }
+  synthesizeKeyShortcut(clearShortcut);
+  yield waitFor(() => findMessages(hud, "").length == 0);
+  is(hud.jsterm.inputNode.getAttribute("focused"), "true", "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");
+  is(hud.ui.filterBox, outputWrapper.ownerDocument.activeElement,
+    "filter input is focused");
+});

devtools/client/webconsole/new-console-output/test/mochitest/head.js

@@ -12,6 +12,10 @@ Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js",
   this);
 
+var {Utils: WebConsoleUtils} = require("devtools/client/webconsole/utils");
+const WEBCONSOLE_STRINGS_URI = "devtools/locale/webconsole.properties";
+var WCUL10n = new WebConsoleUtils.L10n(WEBCONSOLE_STRINGS_URI);
+
 Services.prefs.setBoolPref("devtools.webconsole.new-frontend-enabled", true);
 registerCleanupFunction(function* () {
   Services.prefs.clearUserPref("devtools.webconsole.new-frontend-enabled");