Bug 1521280 - Convert search-textbox to a custom element. r=dao,bgrins

Differential Revision: https://phabricator.services.mozilla.com/D23045

accessible/tests/mochitest/states/test_textbox.xul

@@ -112,9 +112,9 @@
     <textbox id="readonly_textbox" readonly="true"/>
     <textbox id="disabled_textbox" disabled="true"/>
 
-    <textbox id="searchbox" flex="1" type="search" results="historyTree"/>
+    <textbox id="searchbox" flex="1" is="search-textbox" results="historyTree"/>
     <textbox id="searchfield" placeholder="Search all add-ons"
-             type="search" searchbutton="true"/>
+             is="search-textbox" searchbutton="true"/>
   </vbox>
   </hbox>
 </window>

accessible/tests/mochitest/tree/test_txtctrl.xul

@@ -42,7 +42,6 @@
       accTree =
         { SECTION: [
           { ENTRY: [ { TEXT_LEAF: [] } ] },
-          { MENUPOPUP: [] }
         ] };
       testAccessibleTree("txc_search", accTree);
 
@@ -53,14 +52,12 @@
         accTree =
           { SECTION: [
             { ENTRY: [ { TEXT_LEAF: [] } ] },
-            { MENUPOPUP: [] }
           ] };
       } else {
         accTree =
           { SECTION: [
             { ENTRY: [ { TEXT_LEAF: [] } ] },
             { PUSHBUTTON: [] },
-            { MENUPOPUP: [] }
           ] };
       }
 
@@ -156,8 +153,8 @@
 
     <vbox flex="1">
       <textbox id="txc" value="hello"/>
-      <textbox id="txc_search" type="search" value="hello"/>
-      <textbox id="txc_search_searchbutton" searchbutton="true" type="search" value="hello"/>
+      <textbox id="txc_search" is="search-textbox" value="hello"/>
+      <textbox id="txc_search_searchbutton" searchbutton="true" is="search-textbox" value="hello"/>
       <textbox id="txc_number" type="number" value="44"/>
       <textbox id="txc_password" type="password" value="hello"/>
       <textbox id="txc_autocomplete" type="autocomplete" value="hello"/>

browser/base/content/test/forms/browser_selectpopup.js

@@ -640,7 +640,7 @@ async function performSelectSearchTests(win) {
   let selectPopup = win.document.getElementById("ContentSelectDropdown").menupopup;
   await openSelectPopup(selectPopup, false, "select", win);
 
-  let searchElement = selectPopup.querySelector("textbox");
+  let searchElement = selectPopup.querySelector(".contentSelectDropdown-searchbox");
   searchElement.focus();
 
   EventUtils.synthesizeKey("O", {}, win);

browser/base/content/test/forms/browser_selectpopup_searchfocus.js

@@ -28,9 +28,9 @@ add_task(async function test_focus_on_search_shouldnt_close_popup() {
   await BrowserTestUtils.synthesizeMouseAtCenter("#one", { type: "mousedown" }, gBrowser.selectedBrowser);
   await popupShownPromise;
 
-  let searchInput = selectPopup.querySelector("textbox[type='search']");
+  let searchInput = selectPopup.querySelector(".contentSelectDropdown-searchbox");
   searchInput.scrollIntoView();
-  let searchFocused = BrowserTestUtils.waitForEvent(searchInput, "focus");
+  let searchFocused = BrowserTestUtils.waitForEvent(searchInput, "focus", true);
   await EventUtils.synthesizeMouseAtCenter(searchInput, {}, window);
   await searchFocused;
 
@@ -39,4 +39,3 @@ add_task(async function test_focus_on_search_shouldnt_close_popup() {
   await hideSelectPopup(selectPopup, "escape");
   BrowserTestUtils.removeTab(tab);
 });
-

browser/components/places/content/bookmarksSidebar.xul

@@ -37,7 +37,7 @@
 #include bookmarksHistoryTooltip.inc.xul
 
   <hbox id="sidebar-search-container" align="center">
-    <textbox id="search-box" flex="1" type="search"
+    <textbox id="search-box" flex="1" is="search-textbox"
              placeholder="&bookmarksSearch.placeholder;"
              aria-controls="bookmarks-view"
              oncommand="searchBookmarks(this.value);"/>

browser/components/places/content/historySidebar.xul

@@ -45,7 +45,7 @@
 #include bookmarksHistoryTooltip.inc.xul
 
   <hbox id="sidebar-search-container">
-    <textbox id="search-box" flex="1" type="search"
+    <textbox id="search-box" flex="1" is="search-textbox"
              placeholder="&historySearch.placeholder;"
              aria-controls="historyTree"
              oncommand="searchHistory(this.value);"/>

browser/components/places/content/places.xul

@@ -333,7 +333,7 @@
 
       <textbox id="searchFilter"
                flex="1"
-               type="search"
+               is="search-textbox"
                aria-controls="placeContent"
                oncommand="PlacesSearchBox.search(this.value);"
                collection="bookmarks">

browser/components/preferences/in-content/main.xul

@@ -383,7 +383,7 @@
   <label><html:h2 data-l10n-id="applications-header"/></label>
   <description data-l10n-id="applications-description"/>
   <textbox id="filter" flex="1"
-           type="search"
+           is="search-textbox"
            data-l10n-id="applications-filter"
            aria-controls="handlersView"/>
 

browser/components/preferences/in-content/preferences.xul

@@ -173,7 +173,7 @@
             </hbox>
           </hbox>
           <textbox
-            type="search" id="searchInput"
+            is="search-textbox" id="searchInput"
             data-l10n-id="search-input-box"
             data-l10n-attrs="style"
             hidden="true" clickSelectsAll="true"/>

browser/components/preferences/siteDataSettings.xul

@@ -31,7 +31,7 @@
     <separator class="thin"/>
 
     <hbox id="searchBoxContainer">
-      <textbox id="searchBox" type="search" flex="1"
+      <textbox id="searchBox" is="search-textbox" flex="1"
         data-l10n-id="site-data-search-textbox"/>
     </hbox>
     <separator class="thin"/>

browser/components/preferences/sitePermissions.xul

@@ -36,7 +36,7 @@
     <separator class="thin"/>
     <hbox align="start">
       <textbox id="searchBox" flex="1" data-l10n-id="permissions-searchbox"
-               type="search" oncommand="gSitePermissionsManager.buildPermissionsList();"/>
+               is="search-textbox" oncommand="gSitePermissionsManager.buildPermissionsList();"/>
     </hbox>
     <separator class="thin"/>
     <listheader>
@@ -66,7 +66,7 @@
   <checkbox id="permissionsDisableCheckbox"/>
   <description id="permissionsDisableDescription"/>
   <spacer flex="1"/>
-  <hbox id="browserNotificationsPermissionExtensionContent" 
+  <hbox id="browserNotificationsPermissionExtensionContent"
         class="extension-controlled" align="center" hidden="true">
     <description control="disableNotificationsPermissionExtension" flex="1"/>
     <button id="disableNotificationsPermissionExtension"

editor/reftests/xul/emptytextbox-4.xul

@@ -7,6 +7,6 @@
 
   <script type="text/javascript" src="platform.js"/>
 
-  <textbox type="search"/>
-      
+  <textbox is="search-textbox"/>
+
 </window>

layout/reftests/native-theme/searchfield-mirrored-when-rtl-ref.xul

@@ -4,7 +4,7 @@
 <window title="mirrored searchfield"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <hbox>
-    <textbox type="search" width="200" id="searchbox" style="-moz-transform: scaleX(-1);"/>
+    <textbox is="search-textbox" width="200" id="searchbox" style="-moz-transform: scaleX(-1);"/>
     <spacer flex="1"/>
   </hbox>
 </window>

layout/reftests/native-theme/searchfield-mirrored-when-rtl.xul

@@ -4,7 +4,7 @@
 <window title="RTL searchfield"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <hbox>
-    <textbox type="search" width="200" id="searchbox" style="direction: rtl;"/>
+    <textbox is="search-textbox" width="200" id="searchbox" style="direction: rtl;"/>
     <spacer flex="1"/>
   </hbox>
 </window>

toolkit/components/passwordmgr/content/passwordManager.xul

@@ -61,7 +61,7 @@
   <vbox id="savedsignons" class="contentPane" flex="1">
     <!-- filter -->
     <hbox align="center">
-      <textbox id="filter" flex="1" type="search"
+      <textbox id="filter" flex="1" is="search-textbox"
                aria-controls="signonsTree"
                oncommand="FilterPasswords();"
                data-l10n-id="search-filter"/>

toolkit/components/viewconfig/content/config.xul

@@ -70,7 +70,7 @@
   <vbox flex="1">
     <hbox id="filterRow" align="center">
       <label data-l10n-id="config-search-prefs" control="textbox"/>
-      <textbox id="textbox" flex="1" type="search"
+      <textbox id="textbox" flex="1" is="search-textbox"
                aria-controls="configTree"
                oncommand="FilterPrefs();"/>
     </hbox>

toolkit/content/customElements.js

@@ -668,6 +668,7 @@ if (!isDummyDocument) {
   for (let [tag, script] of [
     ["findbar", "chrome://global/content/elements/findbar.js"],
     ["menulist", "chrome://global/content/elements/menulist.js"],
+    ["search-textbox", "chrome://global/content/elements/search-textbox.js"],
     ["stringbundle", "chrome://global/content/elements/stringbundle.js"],
     ["printpreview-toolbar", "chrome://global/content/printPreviewToolbar.js"],
     ["editor", "chrome://global/content/elements/editor.js"],

toolkit/content/editMenuOverlay.js

@@ -60,12 +60,13 @@ window.addEventListener("DOMContentLoaded", () => {
 
 // Support context menus on html textareas in the parent process:
 window.addEventListener("contextmenu", (e) => {
+  const HTML_NS = "http://www.w3.org/1999/xhtml";
   // Note that there's not a risk of e.target being XBL anonymous content for <textbox> (which manages
   // its own context menu), because e.target will be the XBL binding parent in that case.
-  let needsContextMenu = e.target.ownerDocument == document &&
-                         !e.defaultPrevented &&
-                         e.target.localName == "textarea" &&
-                         e.target.namespaceURI == "http://www.w3.org/1999/xhtml";
+  let needsContextMenu = e.target.ownerDocument == document && !e.defaultPrevented && (
+    (e.target.localName == "textarea" && e.target.namespaceURI == HTML_NS)
+    || e.target.closest("textbox[is='search-textbox']")
+  );
 
   if (!needsContextMenu) {
     return;

toolkit/content/jar.mn

@@ -98,6 +98,7 @@ toolkit.jar:
    content/global/elements/marquee.js          (widgets/marquee.js)
    content/global/elements/menulist.js         (widgets/menulist.js)
    content/global/elements/popupnotification.js  (widgets/popupnotification.js)
+   content/global/elements/search-textbox.js     (widgets/search-textbox.js)
    content/global/elements/stringbundle.js     (widgets/stringbundle.js)
    content/global/elements/tabbox.js           (widgets/tabbox.js)
    content/global/elements/text.js             (widgets/text.js)

toolkit/content/tests/chrome/file_edit_contextmenu.xul

@@ -25,4 +25,6 @@
 
 <html:textarea />
 
+<textbox is="search-textbox"/>
+
 </window>

toolkit/content/tests/chrome/test_edit_contextmenu.html

@@ -19,27 +19,37 @@
       await new Promise(r => win.addEventListener("load", r, { once: true}));
       await SimpleTest.promiseFocus(win);
 
-      let textarea = win.document.querySelector("textarea");
-      ok(textarea, "textarea exists");
+      const elements = [
+        win.document.querySelector("textarea"),
+        win.document.querySelector("textbox[is='search-textbox']"),
+      ];
+      for (const element of elements) {
+        await testElement(element, win);
+      }
+      SimpleTest.finish();
+    }
+
+    async function testElement(element, win) {
+      ok(element, "element exists");
 
       info("Synthesizing a key so 'Undo' will be enabled");
-      textarea.focus();
+      element.focus();
       synthesizeKey("x", {}, win);
-      is(textarea.value, "x", "initial value");
+      is(element.value, "x", "initial value");
 
-      textarea.select();
+      element.select();
       synthesizeKey("c", { accelKey: true }, win); // copy to clipboard
       synthesizeKey("KEY_ArrowRight", {}, win); // drop selection to disable cut and copy context menu items
 
       win.document.addEventListener("contextmenu", (e) => {
         info("Calling prevent default on the first contextmenu event");
         e.preventDefault();
       }, { once: true });
-      synthesizeMouseAtCenter(textarea, {type: "contextmenu"}, win);
+      synthesizeMouseAtCenter(element, {type: "contextmenu"}, win);
       ok(!win.document.getElementById("textbox-contextmenu"), "contextmenu with preventDefault() doesn't run");
 
       let popupshown = new Promise(r => win.addEventListener("popupshown", r, { once: true }));
-      synthesizeMouseAtCenter(textarea, {type: "contextmenu"}, win);
+      synthesizeMouseAtCenter(element, {type: "contextmenu"}, win);
       let contextmenu = win.document.getElementById("textbox-contextmenu");
       ok(contextmenu, "context menu exists after right click");
       await popupshown;
@@ -52,11 +62,14 @@
       ok(!contextmenu.querySelector("[command=cmd_selectAll]").hasAttribute("disabled"), "select all enabled");
 
       contextmenu.querySelector("[command=cmd_undo]").click();
-      is(textarea.value, "", "undo worked");
+      is(element.value, "", "undo worked");
 
-      SimpleTest.finish();
+      // Close the context menu to avoid affecting next test
+      let popuphidden = new Promise(r => win.addEventListener("popuphidden", r, { once: true }));
+      contextmenu.hidePopup();
+      await popuphidden;
+      contextmenu.remove();
     }
-
   </script>
 </head>
 <body onload="runTest()">

toolkit/content/tests/chrome/test_textbox_search.xul

@@ -11,7 +11,7 @@
 
   <hbox>
     <textbox id="searchbox"
-             type="search"
+             is="search-textbox"
              oncommand="doSearch(this.value);"
              placeholder="random placeholder"
              timeout="1"/>
@@ -30,9 +30,9 @@ var gLastTest;
 
 function doTests() {
   var textbox = $("searchbox");
-  var icons = document.getAnonymousElementByAttribute(textbox, "anonid", "search-icons");
-  var searchIcon = document.getAnonymousElementByAttribute(textbox, "class", "textbox-search-icon");
-  var clearIcon = document.getAnonymousElementByAttribute(textbox, "class", "textbox-search-clear");
+  var icons = textbox.querySelector(".textbox-search-icons");
+  var searchIcon = icons.querySelector(".textbox-search-icon");
+  var clearIcon = icons.querySelector(".textbox-search-clear");
 
   ok(icons, "icon deck found");
   ok(searchIcon, "search icon found");