Bug 1519141 - "Esc" should make the in-content search re-appear. (#4668)

content-src/components/Search/Search.jsx

@@ -29,6 +29,15 @@ export class _Search extends React.PureComponent {
     window.gContentSearchController.search(event);
   }
 
+  doSearchHandoff(text) {
+    this.props.dispatch(ac.OnlyToMain({type: at.HANDOFF_SEARCH_TO_AWESOMEBAR, data: {text}}));
+    this.props.dispatch(ac.UserEvent({event: "SEARCH_HANDOFF"}));
+    if (text) {
+      // We don't hide the in-content search if there is no text (user hit <Enter>)
+      this.props.dispatch({type: at.HIDE_SEARCH});
+    }
+  }
+
   onSearchHandoffClick(event) {
     // When search hand-off is enabled, we render a big button that is styled to
     // look like a search textbox. If the button is clicked with the mouse, we
@@ -39,8 +48,7 @@ export class _Search extends React.PureComponent {
     event.preventDefault();
     const isKeyboardClick = event.clientX === 0 && event.clientY === 0;
     if (isKeyboardClick) {
-      this.props.dispatch(ac.OnlyToMain({type: at.HANDOFF_SEARCH_TO_AWESOMEBAR}));
-      this.props.dispatch(ac.UserEvent({event: "SEARCH_HANDOFF"}));
+      this.doSearchHandoff();
     } else {
       this._searchHandoffButton.focus();
     }
@@ -49,10 +57,7 @@ export class _Search extends React.PureComponent {
   onSearchHandoffKeyDown(event) {
     if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
       // We only care about key strokes that will produce a character.
-      const text = event.key;
-      this.props.dispatch(ac.OnlyToMain({type: at.HANDOFF_SEARCH_TO_AWESOMEBAR, data: {text}}));
-      this.props.dispatch({type: at.HIDE_SEARCH});
-      this.props.dispatch(ac.UserEvent({event: "SEARCH_HANDOFF"}));
+      this.doSearchHandoff(event.key);
     }
   }
 
@@ -64,10 +69,7 @@ export class _Search extends React.PureComponent {
       return;
     }
     event.preventDefault();
-    const text = event.clipboardData.getData("Text");
-    this.props.dispatch(ac.OnlyToMain({type: at.HANDOFF_SEARCH_TO_AWESOMEBAR, data: {text}}));
-    this.props.dispatch({type: at.HIDE_SEARCH});
-    this.props.dispatch(ac.UserEvent({event: "SEARCH_HANDOFF"}));
+    this.doSearchHandoff(event.clipboardData.getData("Text"));
   }
 
   componentWillMount() {

lib/PlacesFeed.jsm

@@ -302,6 +302,13 @@ class PlacesFeed {
       urlBar.removeEventListener("mousedown", onDone);
       urlBar.removeEventListener("blur", onDone);
     };
+    const onKeydown = event => {
+      // If the Esc button is pressed, we are done. Show in-content search and cleanup.
+      if (event.key === "Escape") {
+        onDone();
+      }
+    };
+    urlBar.addEventListener("keydown", onKeydown);
     urlBar.addEventListener("mousedown", onDone);
     urlBar.addEventListener("blur", onDone);
   }

test/unit/content-src/components/Search.test.jsx

@@ -93,6 +93,7 @@ describe("<Search>", () => {
       wrapper.find(".search-handoff-button").simulate("click", {clientX: 0, clientY: 0, preventDefault: () => {}});
       assert.calledTwice(dispatch);
       assert.calledWith(dispatch, {
+        data: {text: undefined},
         meta: {from: "ActivityStream:Content", skipLocal: true, to: "ActivityStream:Main"},
         type: "HANDOFF_SEARCH_TO_AWESOMEBAR",
       });
@@ -111,7 +112,7 @@ describe("<Search>", () => {
         type: "HANDOFF_SEARCH_TO_AWESOMEBAR",
       });
       assert.calledWith(dispatch, {type: "HIDE_SEARCH"});
-      const [action] = dispatch.thirdCall.args;
+      const [action] = dispatch.secondCall.args;
       assert.isUserEventAction(action);
       assert.propertyVal(action.data, "event", "SEARCH_HANDOFF");
     });
@@ -150,7 +151,7 @@ describe("<Search>", () => {
         type: "HANDOFF_SEARCH_TO_AWESOMEBAR",
       });
       assert.calledWith(dispatch, {type: "HIDE_SEARCH"});
-      const [action] = dispatch.thirdCall.args;
+      const [action] = dispatch.secondCall.args;
       assert.isUserEventAction(action);
       assert.propertyVal(action.data, "event", "SEARCH_HANDOFF");
     });

test/unit/lib/PlacesFeed.test.js

@@ -309,7 +309,7 @@ describe("PlacesFeed", () => {
     it("should call handoffSearchToAwesomebar on HANDOFF_SEARCH_TO_AWESOMEBAR", () => {
       const action = {
         type: at.HANDOFF_SEARCH_TO_AWESOMEBAR,
-        data: {hiddenFocus: false},
+        data: {text: "f"},
         meta: {fromTarget: {}},
         _target: {browser: {ownerGlobal: {gURLBar: {focus: () => {}}}}},
       };
@@ -368,6 +368,29 @@ describe("PlacesFeed", () => {
         type: "SHOW_SEARCH",
       });
     });
+    it("should SHOW_SEARCH on ESC keydown", () => {
+      feed.handoffSearchToAwesomebar({
+        _target: {browser: {ownerGlobal: {gURLBar: fakeUrlBar}}},
+        data: {text: "f"},
+        meta: {fromTarget: {}},
+      });
+      assert.calledOnce(fakeUrlBar.search);
+      assert.calledWith(fakeUrlBar.search, "f");
+      assert.notCalled(fakeUrlBar.focus);
+
+      // Now call ESC keydown.
+      listeners.keydown({key: "Escape"});
+      assert.calledOnce(feed.store.dispatch);
+      assert.calledWith(feed.store.dispatch, {
+        meta: {
+          from: "ActivityStream:Main",
+          skipMain: true,
+          to: "ActivityStream:Content",
+          toTarget: {},
+        },
+        type: "SHOW_SEARCH",
+      });
+    });
   });
 
   describe("#observe", () => {