Bug 1289433 - Fix Eye dropper focus to support key shortcuts on it when opening from the inspector. r=jdescottes

devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-clipboard.js

@@ -14,7 +14,7 @@ add_task(function* () {
                .then(getHighlighterHelperFor(HIGHLIGHTER_TYPE));
   helper.prefix = ID;
 
-  let {show, synthesizeKey, finalize} = helper;
+  let {show, finalize} = helper;
 
   info("Show the eyedropper with the copyOnSelect option");
   yield show("html", {copyOnSelect: true});
@@ -24,8 +24,7 @@ add_task(function* () {
 
   yield waitForClipboard(() => {
     info("Activate the eyedropper so the background color is copied");
-    let generateKey = synthesizeKey({key: "VK_RETURN", options: {}});
-    generateKey.next();
+    EventUtils.synthesizeKey("VK_RETURN", {});
   }, "#FF0000");
 
   ok(true, "The clipboard contains the right value");

devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js

@@ -35,7 +35,7 @@ add_task(function* () {
 
 function* respondsToMoveEvents(helper) {
   info("Checking that the eyedropper responds to events from the mouse and keyboard");
-  let {mouse, synthesizeKey} = helper;
+  let {mouse} = helper;
 
   for (let {type, x, y, key, shift, expected} of MOVE_EVENTS_DATA) {
     info(`Simulating a ${type} event to move to ${expected.x} ${expected.y}`);
@@ -43,7 +43,7 @@ function* respondsToMoveEvents(helper) {
       yield mouse.move(x, y);
     } else if (type === "keyboard") {
       let options = shift ? {shiftKey: true} : {};
-      yield synthesizeKey({key, options});
+      yield EventUtils.synthesizeKey(key, options);
     }
     yield checkPosition(expected, helper);
   }
@@ -55,17 +55,17 @@ function* checkPosition({x, y}, {getElementAttribute}) {
      `The eyedropper is at the expected ${x} ${y} position`);
 }
 
-function* respondsToReturnAndEscape({synthesizeKey, isElementHidden, show}) {
+function* respondsToReturnAndEscape({isElementHidden, show}) {
   info("Simulating return to select the color and hide the eyedropper");
 
-  yield synthesizeKey({key: "VK_RETURN", options: {}});
+  yield EventUtils.synthesizeKey("VK_RETURN", {});
   let hidden = yield isElementHidden("root");
   ok(hidden, "The eyedropper has been hidden");
 
   info("Showing the eyedropper again and simulating escape to hide it");
 
   yield show("html");
-  yield synthesizeKey({key: "VK_ESCAPE", options: {}});
+  yield EventUtils.synthesizeKey("VK_ESCAPE", {});
   hidden = yield isElementHidden("root");
   ok(hidden, "The eyedropper has been hidden again");
 }

devtools/client/inspector/test/head.js

@@ -465,10 +465,6 @@ const getHighlighterHelperFor = (type) => Task.async(
         yield testActor.synthesizeMouse(options);
       },
 
-      synthesizeKey: function* (options) {
-        yield testActor.synthesizeKey(options);
-      },
-
       // This object will synthesize any "mouse" prefixed event to the
       // `testActor`, using the name of method called as suffix for the
       // event's name.

devtools/server/actors/highlighters/eye-dropper.js

@@ -158,7 +158,7 @@ EyeDropper.prototype = {
     this.moveTo(DEFAULT_START_POS_X, DEFAULT_START_POS_Y);
 
     // Focus the content so the keyboard can be used.
-    this.win.document.documentElement.focus();
+    this.win.focus();
 
     return true;
   },
@@ -360,14 +360,22 @@ EyeDropper.prototype = {
    * direction depending on the key pressed.
    */
   handleKeyDown(e) {
+    // Bail out early if any unsupported modifier is used, so that we let
+    // keyboard shortcuts through.
+    if (e.metaKey || e.ctrlKey || e.altKey) {
+      return;
+    }
+
     if (e.keyCode === e.DOM_VK_RETURN) {
       this.selectColor();
+      e.preventDefault();
       return;
     }
 
     if (e.keyCode === e.DOM_VK_ESCAPE) {
       this.emit("canceled");
       this.hide();
+      e.preventDefault();
       return;
     }
 
@@ -377,16 +385,14 @@ EyeDropper.prototype = {
 
     if (e.keyCode === e.DOM_VK_LEFT) {
       offsetX = -1;
-    }
-    if (e.keyCode === e.DOM_VK_RIGHT) {
+    } else if (e.keyCode === e.DOM_VK_RIGHT) {
       offsetX = 1;
-    }
-    if (e.keyCode === e.DOM_VK_UP) {
+    } else if (e.keyCode === e.DOM_VK_UP) {
       offsetY = -1;
-    }
-    if (e.keyCode === e.DOM_VK_DOWN) {
+    } else if (e.keyCode === e.DOM_VK_DOWN) {
       offsetY = 1;
     }
+
     if (e.shiftKey) {
       modifier = 10;
     }
@@ -402,12 +408,7 @@ EyeDropper.prototype = {
 
       this.moveTo(this.magnifiedArea.x / this.pageZoom,
                   this.magnifiedArea.y / this.pageZoom);
-    }
 
-    // Prevent all keyboard interaction with the page, except if a modifier is used to let
-    // keyboard shortcuts through.
-    let hasModifier = e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
-    if (!hasModifier) {
       e.preventDefault();
     }
   },