Bug 1126250 - Show one-off buttons when clicking the magnifying glass, r=Mossop.

--HG--
rename : browser/components/search/test/browser_searchbar_keyboard_navigation.js => browser/components/search/test/browser_searchbar_smallpanel_keyboard_navigation.js

browser/base/content/urlbarBindings.xml

@@ -984,7 +984,7 @@
       <stylesheet src="chrome://browser/skin/searchbar.css"/>
     </resources>
     <content ignorekeys="true" level="top" consumeoutsideclicks="never">
-      <xul:hbox xbl:inherits="collapsed=showonlysettings" anonid="searchbar-engine"
+      <xul:hbox anonid="searchbar-engine" xbl:inherits="showonlysettings"
                 class="search-panel-header search-panel-current-engine">
         <xul:image class="searchbar-engine-image" xbl:inherits="src"/>
         <xul:label anonid="searchbar-engine-name" flex="1" crop="end"
@@ -1000,8 +1000,7 @@
       </xul:tree>
       <xul:deck anonid="search-panel-one-offs-header"
                 selectedIndex="0"
-                class="search-panel-header search-panel-current-input"
-                xbl:inherits="hidden=showonlysettings">
+                class="search-panel-header search-panel-current-input">
         <xul:label anonid="searchbar-oneoffheader-search" value="&searchWithHeader.label;"/>
         <xul:hbox anonid="search-panel-searchforwith"
                   class="search-panel-current-input">
@@ -1011,11 +1010,9 @@
         </xul:hbox>
       </xul:deck>
       <xul:description anonid="search-panel-one-offs"
-                       class="search-panel-one-offs"
-                       xbl:inherits="hidden=showonlysettings"/>
+                       class="search-panel-one-offs"/>
       <xul:vbox anonid="add-engines"/>
       <xul:button anonid="search-settings"
-                  xbl:inherits="showonlysettings"
                   oncommand="BrowserUITelemetry.countSearchSettingsEvent('searchbar');openPreferences('paneSearch')"
                   class="search-setting-button search-panel-header"
                   label="&changeSearchSettings.button;"/>

browser/components/search/content/search.xml

@@ -1063,6 +1063,12 @@
           let selectedButton = this.selectedButton;
           let buttons = this.getSelectableButtons(aCycleEngines);
 
+          let suggestionsHidden;
+          if (!aSkipSuggestions && popup.hasAttribute("showonlysettings")) {
+            aSkipSuggestions = true;
+            suggestionsHidden = true;
+          }
+
           // If the last suggestion is selected, DOWN selects the first button.
           if (!aSkipSuggestions && aForward &&
               popup.selectedIndex + 1 == popup.view.rowCount) {
@@ -1083,7 +1089,7 @@
             else
               this.selectedButton = null;
 
-            if (this.selectedButton || aCycleEngines)
+            if (this.selectedButton || aCycleEngines || suggestionsHidden)
               return true;
 
             // Set the selectedIndex to something that will make
@@ -1104,7 +1110,7 @@
               return true;
             }
 
-            if (!aForward && (aCycleEngines ||
+            if (!aForward && (aCycleEngines || suggestionsHidden ||
                               (!aSkipSuggestions && popup.selectedIndex == -1))) {
               // the last button.
               this.selectedButton = buttons[buttons.length - 1];
@@ -1123,15 +1129,6 @@
           if (!popup.popupOpen)
             return;
 
-          if (aEvent.keyCode == KeyEvent.DOM_VK_DOWN &&
-              popup.hasAttribute("showonlysettings")) {
-            // If the suggestion tree is collapsed, don't let the down arrow
-            // key event reach the tree.
-            aEvent.preventDefault();
-            aEvent.stopPropagation();
-            return;
-          }
-
           let list = document.getAnonymousElementByAttribute(popup, "anonid",
                                                              "search-panel-one-offs");
           if (!list) // remove this check when removing the old search UI.

browser/components/search/test/browser.ini

@@ -44,4 +44,5 @@ skip-if = e10s || true # Bug ??????, Bug 1100301 - leaks windows until shutdown
 [browser_searchbar_openpopup.js]
 skip-if = os == "linux" || e10s # Linux has different focus behaviours and e10s seems to have timing issues.
 [browser_searchbar_keyboard_navigation.js]
+[browser_searchbar_smallpanel_keyboard_navigation.js]
 [browser_webapi.js]

browser/components/search/test/browser_searchbar_openpopup.js

@@ -191,6 +191,27 @@ add_task(function* focus_change_closes_popup() {
   textbox.value = "";
 });
 
+// Moving focus away from the search box should close the small popup
+add_task(function* focus_change_closes_small_popup() {
+  gURLBar.focus();
+
+  let promise = promiseEvent(searchPopup, "popupshown");
+  // For some reason sending the mouse event immediately doesn't open the popup.
+  SimpleTest.executeSoon(() => {
+    EventUtils.synthesizeMouseAtCenter(searchIcon, {});
+  });
+  yield promise;
+  is(searchPopup.getAttribute("showonlysettings"), "true", "Should show the small popup");
+
+  is(Services.focus.focusedElement, textbox.inputField, "Should have focused the search bar");
+
+  promise = promiseEvent(searchPopup, "popuphidden");
+  let promise2 = promiseEvent(searchbar, "blur");
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
+  yield promise;
+  yield promise2;
+});
+
 // Pressing escape should close the popup.
 add_task(function* escape_closes_popup() {
   gURLBar.focus();
@@ -442,4 +463,6 @@ add_task(function* dont_rollup_oncaretmove() {
   promise = promiseEvent(searchPopup, "popuphidden");
   EventUtils.synthesizeKey("VK_ESCAPE", {});
   yield promise;
+
+  textbox.value = "";
 });

browser/components/search/test/browser_searchbar_smallpanel_keyboard_navigation.js

@@ -0,0 +1,377 @@
+// Tests that keyboard navigation in the search panel works as designed.
+
+const searchbar = document.getElementById("searchbar");
+const textbox = searchbar._textbox;
+const searchPopup = document.getElementById("PopupSearchAutoComplete");
+const searchIcon = document.getAnonymousElementByAttribute(searchbar, "anonid",
+                                                           "searchbar-search-button");
+
+const kValues = ["foo1", "foo2", "foo3"];
+
+// Get an array of the one-off buttons.
+function getOneOffs() {
+  let oneOffs = [];
+  let oneOff = document.getAnonymousElementByAttribute(searchPopup, "anonid",
+                                                       "search-panel-one-offs");
+  for (oneOff = oneOff.firstChild; oneOff; oneOff = oneOff.nextSibling) {
+    if (oneOff.classList.contains("dummy"))
+      break;
+    oneOffs.push(oneOff);
+  }
+
+  return oneOffs;
+}
+
+function getOpenSearchItems() {
+  let os = [];
+
+  let addEngineList =
+    document.getAnonymousElementByAttribute(searchPopup, "anonid",
+                                            "add-engines");
+  for (let item = addEngineList.firstChild; item; item = item.nextSibling)
+    os.push(item);
+
+  return os;
+}
+
+add_task(function* init() {
+  yield promiseNewEngine("testEngine.xml");
+
+  // First cleanup the form history in case other tests left things there.
+  yield new Promise((resolve, reject) => {
+    info("cleanup the search history");
+    searchbar.FormHistory.update({op: "remove", fieldname: "searchbar-history"},
+                                 {handleCompletion: resolve,
+                                  handleError: reject});
+  });
+
+  yield new Promise((resolve, reject) => {
+    info("adding search history values: " + kValues);
+    let ops = kValues.map(value => { return {op: "add",
+                                             fieldname: "searchbar-history",
+                                             value: value}
+                                   });
+    searchbar.FormHistory.update(ops, {
+      handleCompletion: function() {
+        registerCleanupFunction(() => {
+          info("removing search history values: " + kValues);
+          let ops =
+            kValues.map(value => { return {op: "remove",
+                                           fieldname: "searchbar-history",
+                                           value: value}
+                                 });
+          searchbar.FormHistory.update(ops);
+        });
+        resolve();
+      },
+      handleError: reject
+    });
+  });
+});
+
+
+add_task(function* test_arrows() {
+  let promise = promiseEvent(searchPopup, "popupshown");
+  info("Opening search panel");
+  EventUtils.synthesizeMouseAtCenter(searchIcon, {});
+  yield promise;
+info("textbox.mController.searchString = " + textbox.mController.searchString);
+  is(textbox.mController.searchString, "", "The search string should be empty");
+
+  // Check the initial state of the panel before sending keyboard events.
+  is(searchPopup.getAttribute("showonlysettings"), "true", "Should show the small popup");
+  // Having suggestions populated (but hidden) is important, because if there
+  // are none we can't ensure the keyboard events don't reach them.
+  is(searchPopup.view.rowCount, kValues.length, "There should be 3 suggestions");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+
+  // The tests will be less meaningful if the first, second, last, and
+  // before-last one-off buttons aren't different. We should always have more
+  // than 4 default engines, but it's safer to check this assumption.
+  let oneOffs = getOneOffs();
+  ok(oneOffs.length >= 4, "we have at least 4 one-off buttons displayed")
+
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+
+  // Pressing should select the first one-off.
+  EventUtils.synthesizeKey("VK_DOWN", {});
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  is(textbox.value, "", "the textfield value should be unmodified");
+
+  // now cycle through the one-off items, the first one is already selected.
+  for (let i = 0; i < oneOffs.length; ++i) {
+    is(textbox.selectedButton, oneOffs[i],
+       "the one-off button #" + (i + 1) + " should be selected");
+    EventUtils.synthesizeKey("VK_DOWN", {});
+  }
+
+  is(textbox.selectedButton.getAttribute("anonid"), "search-settings",
+     "the settings item should be selected");
+  EventUtils.synthesizeKey("VK_DOWN", {});
+
+  // We should now be back to the initial situation.
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+
+  info("now test the up arrow key");
+  EventUtils.synthesizeKey("VK_UP", {});
+  is(textbox.selectedButton.getAttribute("anonid"), "search-settings",
+     "the settings item should be selected");
+
+  // cycle through the one-off items, the first one is already selected.
+  for (let i = oneOffs.length; i; --i) {
+    EventUtils.synthesizeKey("VK_UP", {});
+    is(textbox.selectedButton, oneOffs[i - 1],
+       "the one-off button #" + i + " should be selected");
+  }
+
+  // Another press on up should clear the one-off selection.
+  EventUtils.synthesizeKey("VK_UP", {});
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  is(textbox.value, "", "the textfield value should be unmodified");
+});
+
+add_task(function* test_tab() {
+  is(Services.focus.focusedElement, textbox.inputField,
+     "the search bar should be focused"); // from the previous test.
+
+  let oneOffs = getOneOffs();
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+
+  // Pressing tab should select the first one-off without selecting suggestions.
+  // now cycle through the one-off items, the first one is already selected.
+  for (let i = 0; i < oneOffs.length; ++i) {
+    EventUtils.synthesizeKey("VK_TAB", {});
+    is(textbox.selectedButton, oneOffs[i],
+       "the one-off button #" + (i + 1) + " should be selected");
+  }
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  is(textbox.value, "", "the textfield value should be unmodified");
+
+  // One more <tab> selects the settings button.
+  EventUtils.synthesizeKey("VK_TAB", {});
+  is(textbox.selectedButton.getAttribute("anonid"), "search-settings",
+     "the settings item should be selected");
+
+  // Pressing tab again should close the panel...
+  let promise = promiseEvent(searchPopup, "popuphidden");
+  EventUtils.synthesizeKey("VK_TAB", {});
+  yield promise;
+
+  // ... and move the focus out of the searchbox.
+  isnot(Services.focus.focusedElement, textbox.inputField,
+        "the search bar no longer be focused");
+});
+
+add_task(function* test_shift_tab() {
+  // First reopen the panel.
+  let promise = promiseEvent(searchPopup, "popupshown");
+  info("Opening search panel");
+  SimpleTest.executeSoon(() => {
+    EventUtils.synthesizeMouseAtCenter(searchIcon, {});
+  });
+  yield promise;
+
+  let oneOffs = getOneOffs();
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+  is(searchPopup.getAttribute("showonlysettings"), "true", "Should show the small popup");
+
+  // Press up once to select the last button.
+  EventUtils.synthesizeKey("VK_UP", {});
+  is(textbox.selectedButton.getAttribute("anonid"), "search-settings",
+     "the settings item should be selected");
+
+  // Press up again to select the last one-off button.
+  EventUtils.synthesizeKey("VK_UP", {});
+
+  // Pressing shift+tab should cycle through the one-off items.
+  for (let i = oneOffs.length - 1; i >= 0; --i) {
+    is(textbox.selectedButton, oneOffs[i],
+       "the one-off button #" + (i + 1) + " should be selected");
+    if (i)
+      EventUtils.synthesizeKey("VK_TAB", {shiftKey: true});
+  }
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  is(textbox.value, "", "the textfield value should be unmodified");
+
+  // Pressing shift+tab again should close the panel...
+  promise = promiseEvent(searchPopup, "popuphidden");
+  EventUtils.synthesizeKey("VK_TAB", {shiftKey: true});
+  yield promise;
+
+  // ... and move the focus out of the searchbox.
+  isnot(Services.focus.focusedElement, textbox.inputField,
+        "the search bar no longer be focused");
+});
+
+add_task(function* test_alt_down() {
+  // First reopen the panel.
+  let promise = promiseEvent(searchPopup, "popupshown");
+  info("Opening search panel");
+  SimpleTest.executeSoon(() => {
+    EventUtils.synthesizeMouseAtCenter(searchIcon, {});
+  });
+  yield promise;
+
+  // and check it's in a correct initial state.
+  is(searchPopup.getAttribute("showonlysettings"), "true", "Should show the small popup");
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  is(textbox.value, "", "the textfield value should be unmodified");
+
+  // Pressing alt+down should select the first one-off without selecting suggestions
+  // and cycle through the one-off items.
+  let oneOffs = getOneOffs();
+  for (let i = 0; i < oneOffs.length; ++i) {
+    EventUtils.synthesizeKey("VK_DOWN", {altKey: true});
+    is(textbox.selectedButton, oneOffs[i],
+       "the one-off button #" + (i + 1) + " should be selected");
+    is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  }
+
+  // One more alt+down keypress and nothing should be selected.
+  EventUtils.synthesizeKey("VK_DOWN", {altKey: true});
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+
+  // another one and the first one-off should be selected.
+  EventUtils.synthesizeKey("VK_DOWN", {altKey: true});
+  is(textbox.selectedButton, oneOffs[0],
+     "the first one-off button should be selected");
+
+  // Clear the selection with an alt+up keypress
+  EventUtils.synthesizeKey("VK_UP", {altKey: true});
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+});
+
+add_task(function* test_alt_up() {
+  // Check the initial state of the panel
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  is(textbox.value, "", "the textfield value should be unmodified");
+
+  // Pressing alt+up should select the last one-off without selecting suggestions
+  // and cycle up through the one-off items.
+  let oneOffs = getOneOffs();
+  for (let i = oneOffs.length - 1; i >= 0; --i) {
+    EventUtils.synthesizeKey("VK_UP", {altKey: true});
+    is(textbox.selectedButton, oneOffs[i],
+       "the one-off button #" + (i + 1) + " should be selected");
+    is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  }
+
+  // One more alt+down keypress and nothing should be selected.
+  EventUtils.synthesizeKey("VK_UP", {altKey: true});
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+
+  // another one and the last one-off should be selected.
+  EventUtils.synthesizeKey("VK_UP", {altKey: true});
+  is(textbox.selectedButton, oneOffs[oneOffs.length - 1],
+     "the last one-off button should be selected");
+
+  // Cleanup for the next test.
+  EventUtils.synthesizeKey("VK_DOWN", {});
+  is(textbox.selectedButton.getAttribute("anonid"), "search-settings",
+     "the settings item should be selected");
+  EventUtils.synthesizeKey("VK_DOWN", {});
+  ok(!textbox.selectedButton, "no one-off should be selected anymore");
+});
+
+add_task(function* test_tab_and_arrows() {
+  // Check the initial state is as expected.
+  ok(!textbox.selectedButton, "no one-off button should be selected");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  is(textbox.value, "", "the textfield value should be unmodified");
+
+  // After pressing down, the first one-off should be selected.
+  let oneOffs = getOneOffs();
+  EventUtils.synthesizeKey("VK_DOWN", {});
+  is(textbox.selectedButton, oneOffs[0],
+     "the first one-off button should be selected");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+
+  // After pressing tab, the second one-off should be selected.
+  EventUtils.synthesizeKey("VK_TAB", {});
+  is(textbox.selectedButton, oneOffs[1],
+     "the second one-off button should be selected");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+
+  // After pressing up, the first one-off should be selected again.
+  EventUtils.synthesizeKey("VK_UP", {});
+  is(textbox.selectedButton, oneOffs[0],
+     "the first one-off button should be selected");
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+
+  // Finally close the panel.
+  let promise = promiseEvent(searchPopup, "popuphidden");
+  searchPopup.hidePopup();
+  yield promise;
+});
+
+add_task(function* test_open_search() {
+  let tab = gBrowser.addTab();
+  gBrowser.selectedTab = tab;
+
+  let deferred = Promise.defer();
+  let browser = gBrowser.selectedBrowser;
+  browser.addEventListener("load", function onload() {
+    browser.removeEventListener("load", onload, true);
+    deferred.resolve();
+  }, true);
+
+  let rootDir = getRootDirectory(gTestPath);
+  content.location = rootDir + "opensearch.html";
+
+  yield deferred.promise;
+
+  let promise = promiseEvent(searchPopup, "popupshown");
+  info("Opening search panel");
+  EventUtils.synthesizeMouseAtCenter(searchIcon, {});
+  yield promise;
+  is(searchPopup.getAttribute("showonlysettings"), "true", "Should show the small popup");
+
+  let engines = getOpenSearchItems();
+  is(engines.length, 2, "the opensearch.html page exposes 2 engines")
+
+  // Check that there's initially no selection.
+  is(searchPopup.selectedIndex, -1, "no suggestion should be selected");
+  ok(!textbox.selectedButton, "no button should be selected");
+
+  // Pressing up once selects the setting button...
+  EventUtils.synthesizeKey("VK_UP", {});
+  is(textbox.selectedButton.getAttribute("anonid"), "search-settings",
+     "the settings item should be selected");
+
+  // ...and then pressing up selects open search engines.
+  for (let i = engines.length; i; --i) {
+    EventUtils.synthesizeKey("VK_UP", {});
+    let selectedButton = textbox.selectedButton;
+    is(selectedButton, engines[i - 1],
+       "the engine #" + i + " should be selected");
+    ok(selectedButton.classList.contains("addengine-item"),
+       "the button is themed as an engine item");
+  }
+
+  // Pressing up again should select the last one-off button.
+  EventUtils.synthesizeKey("VK_UP", {});
+  is(textbox.selectedButton, getOneOffs().pop(),
+     "the last one-off button should be selected");
+
+  info("now check that the down key navigates open search items as expected");
+  for (let i = 0; i < engines.length; ++i) {
+    EventUtils.synthesizeKey("VK_DOWN", {});
+    is(textbox.selectedButton, engines[i],
+       "the engine #" + (i + 1) + " should be selected");
+  }
+
+  // Pressing down on the last engine item selects the settings button.
+  EventUtils.synthesizeKey("VK_DOWN", {});
+  is(textbox.selectedButton.getAttribute("anonid"), "search-settings",
+     "the settings item should be selected");
+
+  promise = promiseEvent(searchPopup, "popuphidden");
+  searchPopup.hidePopup();
+  yield promise;
+
+  gBrowser.removeCurrentTab();
+});

browser/themes/linux/searchbar.css

@@ -116,10 +116,13 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
 
 .search-panel-current-engine {
   border-top: none !important;
-  border-bottom: 1px solid #ccc;
   -moz-box-align: center;
 }
 
+.search-panel-current-engine:not([showonlysettings]) {
+  border-bottom: 1px solid #ccc;
+}
+
 .search-panel-header {
   font-weight: normal;
   background-color: rgb(245, 245, 245);

browser/themes/osx/searchbar.css

@@ -139,10 +139,13 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
 
 .search-panel-current-engine {
   border-top: none !important;
-  border-bottom: 1px solid #ccc;
   border-radius: 4px 4px 0 0;
 }
 
+.search-panel-current-engine:not([showonlysettings]) {
+  border-bottom: 1px solid #ccc;
+}
+
 .search-panel-header {
   font-size: 10px;
   font-weight: normal;
@@ -287,10 +290,6 @@ searchbar[oneoffui] .searchbar-engine-button {
   min-height: 32px;
 }
 
-.search-setting-button[showonlysettings] {
-  border-radius: 4px;
-}
-
 .search-setting-button[selected] {
   background-color: #d3d3d3;
   border-top-color: #bdbebe;

browser/themes/windows/searchbar.css

@@ -128,10 +128,13 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
 
 .search-panel-current-engine {
   border-top: none !important;
-  border-bottom: 1px solid #ccc;
   -moz-box-align: center;
 }
 
+.search-panel-current-engine:not([showonlysettings]) {
+  border-bottom: 1px solid #ccc;
+}
+
 .search-panel-header {
   font-weight: normal;
   background-color: rgb(245, 245, 245);