Bug 1120111 - Tests for the highlighter pick mode key listeners; r=pbrosset

browser/devtools/inspector/test/browser.ini

@@ -11,6 +11,7 @@ support-files =
   doc_inspector_highlighter-geometry_01.html
   doc_inspector_highlighter-geometry_02.html
   doc_inspector_highlighter_csstransform.html
+  doc_inspector_highlighter_dom.html
   doc_inspector_highlighter.html
   doc_inspector_highlighter_rect.html
   doc_inspector_highlighter_rect_iframe.html
@@ -51,6 +52,9 @@ skip-if = e10s # GCLI isn't e10s compatible. See bug 1128988.
 [browser_inspector_highlighter-hover_02.js]
 [browser_inspector_highlighter-hover_03.js]
 [browser_inspector_highlighter-iframes.js]
+[browser_inspector_highlighter-keybinding_01.js]
+[browser_inspector_highlighter-keybinding_02.js]
+[browser_inspector_highlighter-keybinding_03.js]
 [browser_inspector_highlighter-options.js]
 [browser_inspector_highlighter-rect_01.js]
 [browser_inspector_highlighter-rect_02.js]

browser/devtools/inspector/test/browser_inspector_highlighter-keybinding_01.js

@@ -0,0 +1,66 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+"use strict";
+
+// Test that the keybindings for Picker work alright
+
+const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_dom.html";
+
+add_task(function*() {
+  let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
+
+  info("Starting element picker");
+  yield toolbox.highlighterUtils.startPicker();
+
+  info("Selecting the simple-div1 DIV");
+  yield moveMouseOver("#simple-div1");
+
+  let highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "simple-div1", "The highlighter shows #simple-div1. OK.");
+
+  // First Child selection
+  info("Testing first-child selection.");
+
+  yield doKeyHover({key: "VK_RIGHT", options: {}});
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "useless-para", "The highlighter shows #useless-para. OK.");
+
+  info("Selecting the useful-para paragraph DIV");
+  yield moveMouseOver("#useful-para");
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "useful-para", "The highlighter shows #useful-para. OK.");
+
+  yield doKeyHover({key: "VK_RIGHT", options: {}});
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "bold", "The highlighter shows #bold. OK.");
+
+  info("Going back up to the simple-div1 DIV");
+  yield doKeyHover({key: "VK_LEFT", options: {}});
+  yield doKeyHover({key: "VK_LEFT", options: {}});
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "simple-div1", "The highlighter shows #simple-div1. OK.");
+
+  info("First child selection test Passed.");
+
+  info("Stopping the picker");
+  yield toolbox.highlighterUtils.stopPicker();
+
+  function doKeyHover(msg) {
+    info("Key pressed. Waiting for element to be highlighted/hovered");
+    executeInContent("Test:SynthesizeKey", msg);
+    return inspector.toolbox.once("picker-node-hovered");
+  }
+
+  function moveMouseOver(selector) {
+    info("Waiting for element " + selector + " to be highlighted");
+    executeInContent("Test:SynthesizeMouse", {
+      options: {type: "mousemove"},
+      center: true,
+      selector: selector
+    }, null, false);
+    return inspector.toolbox.once("picker-node-hovered");
+  }
+
+});

browser/devtools/inspector/test/browser_inspector_highlighter-keybinding_02.js

@@ -0,0 +1,64 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+"use strict";
+
+// Test that the keybindings for Picker work alright
+
+const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_dom.html";
+
+add_task(function*() {
+  let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
+
+  info("Starting element picker");
+  yield toolbox.highlighterUtils.startPicker();
+
+  // Previously chosen child memory
+  info("Testing whether previously chosen child is remembered");
+
+  info("Selecting the ahoy paragraph DIV");
+  yield moveMouseOver("#ahoy");
+
+  let highlightedNode = yield getHighlitNode(toolbox);
+
+  yield doKeyHover({key: "VK_LEFT", options: {}});
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "simple-div2", "The highlighter shows #simple-div2. OK.");
+
+  yield doKeyHover({key: "VK_RIGHT", options: {}});
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "ahoy", "The highlighter shows #ahoy. OK.");
+
+  info("Going back up to the complex-div DIV");
+  yield doKeyHover({key: "VK_LEFT", options: {}});
+  yield doKeyHover({key: "VK_LEFT", options: {}});
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "complex-div", "The highlighter shows #complex-div. OK.");
+
+  yield doKeyHover({key: "VK_RIGHT", options: {}});
+  highlightedNode = yield getHighlitNode(toolbox);
+  is(highlightedNode.id, "simple-div2", "The highlighter shows #simple-div2. OK.");
+
+  info("Previously chosen child is remembered. Passed.");
+
+  info("Stopping the picker");
+  yield toolbox.highlighterUtils.stopPicker();
+
+  function doKeyHover(msg) {
+    info("Key pressed. Waiting for element to be highlighted/hovered");
+    executeInContent("Test:SynthesizeKey", msg);
+    return inspector.toolbox.once("picker-node-hovered");
+  }
+
+  function moveMouseOver(selector) {
+    info("Waiting for element " + selector + " to be highlighted");
+    executeInContent("Test:SynthesizeMouse", {
+      options: {type: "mousemove"},
+      center: true,
+      selector: selector
+    }, null, false);
+    return inspector.toolbox.once("picker-node-hovered");
+  }
+
+});

browser/devtools/inspector/test/browser_inspector_highlighter-keybinding_03.js

@@ -0,0 +1,61 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+"use strict";
+
+// Test that the keybindings for Picker work alright
+
+const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter_dom.html";
+
+add_task(function*() {
+  let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
+
+  info("Starting element picker");
+  yield toolbox.highlighterUtils.startPicker();
+
+  info("Selecting the simple-div1 DIV");
+  yield moveMouseOver("#simple-div2");
+
+  // Testing pick-node shortcut
+  info("Testing enter/return key as pick-node command");
+  yield doKeyPick({key: "VK_RETURN", options: {}});
+  is(inspector.selection.nodeFront.id, "simple-div2", "The #simple-div2 node was selected. Passed.");
+
+  // Testing cancel-picker command
+  info("Starting element picker again");
+  yield toolbox.highlighterUtils.startPicker();
+
+  info("Selecting the simple-div1 DIV");
+  yield moveMouseOver("#simple-div1");
+
+  info("Testing escape key as cancel-picker command");
+  yield doKeyStop({key: "VK_ESCAPE", options: {}});
+  is(inspector.selection.nodeFront.id, "simple-div2", "The simple-div2 DIV is still selected. Passed.");
+
+  function doKeyPick(msg) {
+    info("Key pressed. Waiting for element to be picked");
+    executeInContent("Test:SynthesizeKey", msg);
+    return promise.all([
+      toolbox.selection.once("new-node-front"),
+      inspector.once("inspector-updated")
+    ]);
+  }
+
+  function doKeyStop(msg) {
+    info("Key pressed. Waiting for picker to be canceled");
+    executeInContent("Test:SynthesizeKey", msg);
+    return inspector.toolbox.once("picker-stopped");
+  }
+
+  function moveMouseOver(selector) {
+    info("Waiting for element " + selector + " to be highlighted");
+    executeInContent("Test:SynthesizeMouse", {
+      options: {type: "mousemove"},
+      center: true,
+      selector: selector
+    }, null, false);
+    return inspector.toolbox.once("picker-node-hovered");
+  }
+
+});

browser/devtools/inspector/test/doc_frame_script.js

@@ -240,12 +240,18 @@ addMessageListener("Test:GetAllAdjustedQuads", function(msg) {
  * - {Boolean} center If set to true, x/y will be ignored and
  *             synthesizeMouseAtCenter will be used instead
  * - {Object} options Other event options
+ * - {String} selector An optional selector that will be used to find the node to
+ *            synthesize the event on, if msg.objects doesn't contain the CPOW.
  * The msg.objects part should be the element.
  * @param {Object} data Event detail properties:
  */
 addMessageListener("Test:SynthesizeMouse", function(msg) {
+  let {x, y, center, options, selector} = msg.data;
   let {node} = msg.objects;
-  let {x, y, center, options} = msg.data;
+
+  if (!node && selector) {
+    node = content.document.querySelector(selector);
+  }
 
   if (center) {
     EventUtils.synthesizeMouseAtCenter(node, options, node.ownerDocument.defaultView);
@@ -259,6 +265,20 @@ addMessageListener("Test:SynthesizeMouse", function(msg) {
   sendAsyncMessage("Test:SynthesizeMouse");
 });
 
+/**
+ * Synthesize a key event for an element. This handler doesn't send a message
+ * back. Consumers should listen to specific events on the inspector/highlighter
+ * to know when the event got synthesized.
+ * @param  {Object} msg The msg.data part expects the following properties:
+ * - {String} key
+ * - {Object} options
+ */
+addMessageListener("Test:SynthesizeKey", function(msg) {
+  let {key, options} = msg.data;
+
+  EventUtils.synthesizeKey(key, options, content);
+});
+
 /**
  * Check that an element currently has a pseudo-class lock.
  * @param {Object} msg The msg.data part expects the following properties:

browser/devtools/inspector/test/doc_inspector_highlighter_dom.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<p>Hello World!</p>
+
+<div id="complex-div">
+  <div id="simple-div1">
+    <p id="useless-para">The DOM is very useful! <em>#useless-para</em></p>
+    <p id="useful-para">This example is <b id="bold">really</b> useful. <em>#useful-para</em></p>
+  </div>
+
+  <div id="simple-div2">
+    <p>This is another node. You won't reach this in my test.</p>
+    <p id="ahoy">Ahoy! How you doin' Capn'? <em>#ahoy</em></p>
+  </div>
+</div>
+
+</body>
+</html>