Bug 1550559 - Convert findbar XUL textbox to HTML input. r=bgrins
☠☠ backed out by 1ad490784e09 ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 16 May 2019 11:30:37 +0000
changeset 535961 2a9a034e1b6a38cba33ba668704cce7ad7a04cd3
parent 535960 7908eb064b0c211e6e40b70f4313b12a1487d741
child 535962 aa58df721b0cb74590eb5fb1cffe081824c03ab1
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1550559
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1550559 - Convert findbar XUL textbox to HTML input. r=bgrins Differential Revision: https://phabricator.services.mozilla.com/D30542
docshell/test/chrome/bug298622_window.xul
toolkit/content/tests/browser/browser_bug1198465.js
toolkit/content/tests/browser/browser_findbar.js
toolkit/content/tests/chrome/bug331215_window.xul
toolkit/content/tests/chrome/bug360437_window.xul
toolkit/content/tests/chrome/bug429723_window.xul
toolkit/content/tests/chrome/findbar_entireword_window.xul
toolkit/content/tests/chrome/findbar_events_window.xul
toolkit/content/tests/chrome/findbar_window.xul
toolkit/content/widgets/findbar.js
toolkit/modules/tests/browser/head.js
toolkit/themes/osx/global/findBar.css
toolkit/themes/shared/findBar.inc.css
--- a/docshell/test/chrome/bug298622_window.xul
+++ b/docshell/test/chrome/bug298622_window.xul
@@ -8,37 +8,37 @@
         onload="setTimeout(nextTest, 0);"
         title="bug 298622 test">
 
   <script type="application/javascript" src= "chrome://mochikit/content/chrome-harness.js" />
   <script type="application/javascript" src= "docshell_helpers.js" />
   <script type="application/javascript"><![CDATA[
     // Global variable that holds a reference to the find bar.
     var gFindBar;
-  
+
     // Define the generator-iterator for the tests.
     var tests = testIterator();
 
     ////
     // Execute the next test in the generator function.
     //
     function nextTest() {
       tests.next();
     }
 
     ////
-    // Generator function for test steps for bug 298622:  
+    // Generator function for test steps for bug 298622:
     // Find should work correctly on a page loaded from the
     // bfcache.
     //
     function* testIterator()
     {
       // Make sure bfcache is on.
       enableBFCache(true);
-      
+
       // Load a test page which contains some text to be found.
       doPageNavigation({
         uri: "data:text/html,<html><head><title>test1</title></head>" +
              "<body>find this!</body></html>",
         onNavComplete: nextTest
       });
       yield undefined;
 
@@ -74,22 +74,22 @@
       isnot(gFindBar._findField.getAttribute("status"), "notfound",
          "Findfield status attribute should not have been 'notfound'" +
          " after Find");
 
       // Make sure the key events above have time to be processed
       // before continuing
       waitForTrue(function() {
         return (
-          TestWindow.getWindow().getSelection().toString().toLowerCase() == 
+          TestWindow.getWindow().getSelection().toString().toLowerCase() ==
           "a generic page");
       }, nextTest, 20);
       yield undefined;
 
-      is(gFindBar._findField.inputField.value, "A generic page",
+      is(gFindBar._findField.value, "A generic page",
         "expected text not present in find input field");
       is(TestWindow.getWindow().getSelection().toString().toLowerCase(),
          "a generic page",
          "find failed on second page loaded");
 
       // Go back to the original page and verify it's loaded from the
       // bfcache.
       doPageNavigation({
@@ -98,48 +98,48 @@
         expectedEvents: [ { type: "pageshow",
                             title: "test1",
                             persisted: true } ],
         onNavComplete: nextTest
       });
       yield undefined;
 
       // Search for some text that's on the original page (but not
-      // the dummy page loaded above), and verify that it can 
+      // the dummy page loaded above), and verify that it can
       // be found.
       gFindBar = document.getElementById("FindToolbar");
       document.getElementById("cmd_find").doCommand();
       ok(!gFindBar.hidden, "failed to open findbar");
       gFindBar._findField.value = "find this";
       gFindBar._find();
       SimpleTest.executeSoon(nextTest);
       yield undefined;
 
       // Make sure Find bar's internal status is not 'notfound'
       isnot(gFindBar._findField.getAttribute("status"), "notfound",
          "Findfield status attribute should not have been 'notfound'" +
          " after Find");
- 
+
       // Make sure the key events above have time to be processed
       // before continuing
       waitForTrue(function() {
         return (
-          TestWindow.getWindow().getSelection().toString().toLowerCase() == 
+          TestWindow.getWindow().getSelection().toString().toLowerCase() ==
           "find this");
       }, nextTest, 20);
       yield undefined;
 
       is(TestWindow.getWindow().getSelection().toString().toLowerCase(),
          "find this",
          "find failed on page loaded from bfcache");
-      
+
       // Tell the framework the test is finished.
       finish();
     }
-    
+
   ]]></script>
 
   <commandset>
     <command id="cmd_find"
      oncommand="document.getElementById('FindToolbar').onFindCommand();"/>
   </commandset>
   <browser type="content" primary="true" flex="1" id="content" src="about:blank"/>
   <findbar id="FindToolbar" browserid="content"/>
--- a/toolkit/content/tests/browser/browser_bug1198465.js
+++ b/toolkit/content/tests/browser/browser_bug1198465.js
@@ -35,32 +35,32 @@ add_task(async function() {
   is(findBar._findField.value, "", "findbar is empty");
 
   // Test 1
   //  Any input in the findbar should erase a previous search.
 
   findBar._findField.value = "xy";
   findBar.startFind();
   is(findBar._findField.value, "xy", "findbar should have xy initial query");
-  is(findBar._findField.mInputField,
+  is(findBar._findField,
     document.activeElement,
     "findbar is now focused");
 
   EventUtils.sendChar("z", window);
   is(findBar._findField.value, "z", "z erases xy");
 
   findBar._findField.value = "";
   ok(!findBar._findField.value, "erase findbar after first test");
 
   // Test 2
   //  Prefilling the findbar should be ignored if a search has been run.
 
   findBar.startFind();
   ok(findBar._startFindDeferred, "prefilled value hasn't been fetched yet");
-  is(findBar._findField.mInputField,
+  is(findBar._findField,
     document.activeElement,
     "findbar is still focused");
 
   EventUtils.sendChar("a", window);
   EventUtils.sendChar("b", window);
   is(findBar._findField.value, "ab", "initial ab typed in the findbar");
 
   // This resolves _startFindDeferred if it's still pending; let's just skip
--- a/toolkit/content/tests/browser/browser_findbar.js
+++ b/toolkit/content/tests/browser/browser_findbar.js
@@ -180,26 +180,26 @@ add_task(async function e10sLostKeys() {
   await gFindBarPromise;
   let findBar = gFindBar;
   let initialValue = findBar._findField.value;
 
   await EventUtils.synthesizeAndWaitKey("f", { accelKey: true }, window, null, () => {
     // We can't afford to wait for the promise to resolve, by then the
     // find bar is visible and focused, so sending characters to the
     // content browser wouldn't work.
-    isnot(document.activeElement, findBar._findField.inputField,
+    isnot(document.activeElement, findBar._findField,
       "findbar is not yet focused");
     EventUtils.synthesizeKey("a");
     EventUtils.synthesizeKey("b");
     EventUtils.synthesizeKey("c");
     is(findBar._findField.value, initialValue, "still has initial find query");
   });
 
   await BrowserTestUtils.waitForCondition(() => findBar._findField.value.length == 3);
-  is(document.activeElement, findBar._findField.inputField,
+  is(document.activeElement, findBar._findField,
     "findbar is now focused");
   is(findBar._findField.value, "abc", "abc fully entered as find query");
 
   BrowserTestUtils.removeTab(tab);
 });
 
 function promiseFindFinished(searchText, highlightOn) {
   return new Promise(async (resolve) => {
--- a/toolkit/content/tests/chrome/bug331215_window.xul
+++ b/toolkit/content/tests/chrome/bug331215_window.xul
@@ -80,17 +80,17 @@
 
         for (let c of aString) {
           let code = c.charCodeAt(0);
           let ev = new KeyboardEvent("keypress", {
             keyCode: code,
             charCode: code,
             bubbles: true
           });
-          gFindBar._findField.inputField.dispatchEvent(ev);
+          gFindBar._findField.dispatchEvent(ev);
         }
       });
     }
   ]]></script>
 
   <commandset>
     <command id="cmd_find" oncommand="document.getElementById('FindToolbar').onFindCommand();"/>
   </commandset>
--- a/toolkit/content/tests/chrome/bug360437_window.xul
+++ b/toolkit/content/tests/chrome/bug360437_window.xul
@@ -60,17 +60,17 @@
 
     async function onDocumentLoaded() {
       gFindBar.onFindCommand();
 
       // Make sure the findfield is correctly focused on open
       var searchStr = "text inside an input element";
       await promiseEnterStringIntoFindField(searchStr);
       is(document.commandDispatcher.focusedElement,
-         gFindBar._findField.inputField, "Find field isn't focused");
+         gFindBar._findField, "Find field isn't focused");
 
       // Make sure "find again" correctly transfers focus to the content element
       // when the find bar is closed.
       gFindBar.close();
       gFindBar.onFindAgainCommand(false);
       await ContentTask.spawn(gBrowser, null, async function() {
         Assert.equal(content.document.activeElement,
          content.document.getElementById("input"), "Input Element isn't focused");
@@ -102,17 +102,17 @@
     }
 
     function promiseEnterStringIntoFindField(str) {
       let promise = promiseFindResult(str);
       for (let i = 0; i < str.length; i++) {
         let event = document.createEvent("KeyboardEvent");
         event.initKeyEvent("keypress", true, true, null, false, false,
                            false, false, 0, str.charCodeAt(i));
-        gFindBar._findField.inputField.dispatchEvent(event);
+        gFindBar._findField.dispatchEvent(event);
       }
       return promise;
     }
   ]]></script>
   <textbox id="textbox"/>
   <browser type="content" primary="true" flex="1" id="content" src="about:blank"/>
   <browser type="content" primary="true" flex="1" id="content-remote" remote="true" src="about:blank"/>
   <findbar id="FindToolbar" browserid="content"/>
--- a/toolkit/content/tests/chrome/bug429723_window.xul
+++ b/toolkit/content/tests/chrome/bug429723_window.xul
@@ -37,17 +37,17 @@
       setTimeout(_delayedOnLoad, 1000);
     }
 
     function enterStringIntoFindField(aString) {
       for (var i=0; i < aString.length; i++) {
         var event = document.createEvent("KeyboardEvent");
         event.initKeyEvent("keypress", true, true, null, false, false,
                            false, false, 0, aString.charCodeAt(i));
-        gFindBar._findField.inputField.dispatchEvent(event);
+        gFindBar._findField.dispatchEvent(event);
       }
     }
 
     function onPageShow() {
       gBrowser.removeEventListener("pageshow", onPageShow, false);
       var findField = gFindBar._findField;
       document.getElementById("cmd_find").doCommand();
 
@@ -63,19 +63,19 @@
       var highlight = gFindBar.getElement("highlight");
       if (!highlight.checked)
         highlight.click();
 
       // Delete search term
       var event = document.createEvent("KeyboardEvent");
       event.initKeyEvent("keypress", true, true, null, false, false,
                          false, false, KeyEvent.DOM_VK_BACK_SPACE, 0);
-      gFindBar._findField.inputField.dispatchEvent(event);
+      gFindBar._findField.dispatchEvent(event);
 
-      var notRed = !findField.hasAttribute("status") || 
+      var notRed = !findField.hasAttribute("status") ||
                    (findField.getAttribute("status") != "notfound");
       ok(notRed, "Find Bar textbox is correct colour");
       finish();
     }
   ]]></script>
 
   <commandset>
     <command id="cmd_find" oncommand="document.getElementById('FindToolbar').onFindCommand();"/>
--- a/toolkit/content/tests/chrome/findbar_entireword_window.xul
+++ b/toolkit/content/tests/chrome/findbar_entireword_window.xul
@@ -147,17 +147,17 @@
     var enterStringIntoFindField = async function(str, waitForResult = true) {
       for (let promise, i = 0; i < str.length; i++) {
         if (waitForResult) {
           promise = promiseFindResult();
         }
         let event = document.createEvent("KeyboardEvent");
         event.initKeyEvent("keypress", true, true, null, false, false,
                            false, false, 0, str.charCodeAt(i));
-        gFindBar._findField.inputField.dispatchEvent(event);
+        gFindBar._findField.dispatchEvent(event);
         if (waitForResult) {
           await promise;
         }
       }
     };
 
     function openFindbar() {
       document.getElementById("cmd_find").doCommand();
@@ -245,17 +245,17 @@
         let document = content.document;
         let event = document.createEvent("KeyboardEvent");
         event.initKeyEvent("keypress", true, true, null, false, false,
                            false, false, 0, "/".charCodeAt(0));
         document.documentElement.dispatchEvent(event);
       });
 
       ok(!gFindBar.hidden, "testQuickfind: failed to open findbar");
-      ok(document.commandDispatcher.focusedElement == gFindBar._findField.inputField,
+      ok(document.commandDispatcher.focusedElement == gFindBar._findField,
         "testQuickfind: find field is not focused");
       ok(!gFindBar.getElement("entire-word-status").hidden,
         "testQuickfind: entire word mode status text should be visible");
 
       await testIterator(tests);
 
       gFindBar.close();
     }
--- a/toolkit/content/tests/chrome/findbar_events_window.xul
+++ b/toolkit/content/tests/chrome/findbar_events_window.xul
@@ -101,17 +101,17 @@
       info("Testing normal find.");
       let query = "t";
       let promise = once(gFindBar, "find");
 
       // Put some text in the find box.
       let event = document.createEvent("KeyboardEvent");
       event.initKeyEvent("keypress", true, true, null, false, false,
                          false, false, 0, query.charCodeAt(0));
-      gFindBar._findField.inputField.dispatchEvent(event);
+      gFindBar._findField.dispatchEvent(event);
 
       let e = await promise;
       ok(e.detail.query === query, "find event query should match '" + query + "'");
       // Since we're preventing the default make sure nothing was selected.
       await checkSelection();
     }
 
     async function testFindAgain() {
--- a/toolkit/content/tests/chrome/findbar_window.xul
+++ b/toolkit/content/tests/chrome/findbar_window.xul
@@ -147,17 +147,17 @@
       if (!gBrowser.hasAttribute("remote"))
         await testFindAgainNotFound();
       await testToggleEntireWord();
     }
 
     async function testFindbarSelection() {
       function checkFindbarState(aTestName, aExpSelection) {
         ok(!gFindBar.hidden, "testFindbarSelection: failed to open findbar: " + aTestName);
-        ok(document.commandDispatcher.focusedElement == gFindBar._findField.inputField,
+        ok(document.commandDispatcher.focusedElement == gFindBar._findField,
            "testFindbarSelection: find field is not focused: " + aTestName);
         if (!gHasFindClipboard) {
           ok(gFindBar._findField.value == aExpSelection,
              "Incorrect selection in testFindbarSelection: "  + aTestName +
              ". Selection: " + gFindBar._findField.value);
         }
 
         // Clear the value, close the findbar.
@@ -196,17 +196,17 @@
       checkFindbarState("button", "");
     }
 
     function testDrop() {
       gFindBar.open();
       // use an dummy image to start the drag so it doesn't get interrupted by a selection
       var img = gBrowser.contentDocument.getElementById("img");
       synthesizeDrop(img, gFindBar._findField, [[ {type: "text/plain", data: "Rabbits" } ]], "copy", window);
-      is(gFindBar._findField.inputField.value, "Rabbits", "drop on findbar");
+      is(gFindBar._findField.value, "Rabbits", "drop on findbar");
       gFindBar.close();
     }
 
     function testQuickFindClose() {
       return new Promise(resolve => {
         var _isClosedCallback = function() {
           ok(gFindBar.hidden,
              "_isClosedCallback: Failed to auto-close quick find bar after " +
@@ -268,17 +268,17 @@
     var enterStringIntoFindField = async function(str, waitForResult = true) {
       for (let promise, i = 0; i < str.length; i++) {
         if (waitForResult) {
           promise = promiseFindResult();
         }
         let event = document.createEvent("KeyboardEvent");
         event.initKeyEvent("keypress", true, true, null, false, false,
                            false, false, 0, str.charCodeAt(i));
-        gFindBar._findField.inputField.dispatchEvent(event);
+        gFindBar._findField.dispatchEvent(event);
         if (waitForResult) {
           await promise;
         }
       }
     };
 
     function promiseExpectRangeCount(rangeCount) {
       return ContentTask.spawn(gBrowser, { rangeCount }, async function(args) {
@@ -291,17 +291,17 @@
       });
     }
 
     // also test match-case
     async function testNormalFind() {
       document.getElementById("cmd_find").doCommand();
 
       ok(!gFindBar.hidden, "testNormalFind: failed to open findbar");
-      ok(document.commandDispatcher.focusedElement == gFindBar._findField.inputField,
+      ok(document.commandDispatcher.focusedElement == gFindBar._findField,
          "testNormalFind: find field is not focused");
 
       let promise;
       let matchCaseCheckbox = gFindBar.getElement("find-case-sensitive");
       if (!matchCaseCheckbox.hidden && matchCaseCheckbox.checked) {
         promise = promiseFindResult();
         matchCaseCheckbox.click();
         await promise;
@@ -335,27 +335,27 @@
 
     function openFindbar() {
       document.getElementById("cmd_find").doCommand();
       return gFindBar._startFindDeferred && gFindBar._startFindDeferred.promise;
     }
 
     async function testNormalFindWithComposition() {
       ok(!gFindBar.hidden, "testNormalFindWithComposition: findbar should be open");
-      ok(document.commandDispatcher.focusedElement == gFindBar._findField.inputField,
+      ok(document.commandDispatcher.focusedElement == gFindBar._findField,
          "testNormalFindWithComposition: find field should be focused");
 
       var matchCaseCheckbox = gFindBar.getElement("find-case-sensitive");
       var clicked = false;
       if (!matchCaseCheckbox.hidden & matchCaseCheckbox.checked) {
         matchCaseCheckbox.click();
         clicked = true;
       }
 
-      gFindBar._findField.inputField.focus();
+      gFindBar._findField.focus();
 
       var searchStr = "text";
 
       synthesizeCompositionChange(
         { "composition":
           { "string": searchStr,
             "clauses":
             [
@@ -428,17 +428,17 @@
         let document = content.document;
         let event = document.createEvent("KeyboardEvent");
         event.initKeyEvent("keypress", true, true, null, false, false,
                            false, false, 0, "'".charCodeAt(0));
         document.documentElement.dispatchEvent(event);
       });
 
       ok(!gFindBar.hidden, "testQuickFindLink: failed to open findbar");
-      ok(document.commandDispatcher.focusedElement == gFindBar._findField.inputField,
+      ok(document.commandDispatcher.focusedElement == gFindBar._findField,
          "testQuickFindLink: find field is not focused");
 
       var searchStr = "Link Test";
       await enterStringIntoFindField(searchStr);
       await ContentTask.spawn(gBrowser, { searchStr }, async function(args) {
         Assert.equal(content.getSelection().toString(), args.searchStr,
           "testQuickFindLink: failed to find sample link");
       });
@@ -547,17 +547,17 @@
         let document = content.document;
         let event = document.createEvent("KeyboardEvent");
         event.initKeyEvent("keypress", true, true, null, false, false,
                            false, false, 0, "/".charCodeAt(0));
         document.documentElement.dispatchEvent(event);
       });
 
       ok(!gFindBar.hidden, "testQuickFindText: failed to open findbar");
-      ok(document.commandDispatcher.focusedElement == gFindBar._findField.inputField,
+      ok(document.commandDispatcher.focusedElement == gFindBar._findField,
         "testQuickFindText: find field is not focused");
 
       await enterStringIntoFindField(SEARCH_TEXT);
       await ContentTask.spawn(gBrowser, { SEARCH_TEXT }, async function(args) {
         Assert.equal(content.getSelection().toString(), args.SEARCH_TEXT,
           "testQuickFindText: failed to find '" + args.SEARCH_TEXT + "'");
       });
       testClipboardSearchString(SEARCH_TEXT);
@@ -574,17 +574,17 @@
                              false, false, 0, "'".charCodeAt(0));
           document.documentElement.dispatchEvent(event);
         });
       } else {
         document.getElementById("cmd_find").doCommand();
       }
 
       ok(!gFindBar.hidden, "testFindCountUI: failed to open findbar");
-      ok(document.commandDispatcher.focusedElement == gFindBar._findField.inputField,
+      ok(document.commandDispatcher.focusedElement == gFindBar._findField,
          "testFindCountUI: find field is not focused");
 
       let promise;
       let matchCase = gFindBar.getElement("find-case-sensitive");
       if (matchCase.checked) {
         promise = promiseFindResult();
         matchCase.click();
         await new Promise(resolve => setTimeout(resolve, ITERATOR_TIMEOUT + 20));
--- a/toolkit/content/widgets/findbar.js
+++ b/toolkit/content/widgets/findbar.js
@@ -24,17 +24,17 @@ class MozFindbar extends XULElement {
           this.close();
         event.preventDefault();
       }
     }, true);
 
     this.content = MozXULElement.parseXULToFragment(`
       <hbox anonid="findbar-container" class="findbar-container" flex="1" align="center">
         <hbox anonid="findbar-textbox-wrapper" align="stretch">
-          <textbox anonid="findbar-textbox" class="findbar-textbox findbar-find-fast" />
+          <html:input anonid="findbar-textbox" class="findbar-textbox findbar-find-fast" />
           <toolbarbutton anonid="find-previous" class="findbar-find-previous tabbable" data-l10n-attrs="tooltiptext" data-l10n-id="findbar-previous" oncommand="onFindAgainCommand(true);" disabled="true" />
           <toolbarbutton anonid="find-next" class="findbar-find-next tabbable" data-l10n-id="findbar-next" oncommand="onFindAgainCommand(false);" disabled="true" />
         </hbox>
         <toolbarbutton anonid="highlight" class="findbar-highlight findbar-button tabbable" data-l10n-id="findbar-highlight-all2" oncommand="toggleHighlight(this.checked);" type="checkbox" />
         <toolbarbutton anonid="find-case-sensitive" class="findbar-case-sensitive findbar-button tabbable" data-l10n-id="findbar-case-sensitive" oncommand="_setCaseSensitivity(this.checked ? 1 : 0);" type="checkbox" />
         <toolbarbutton anonid="find-entire-word" class="findbar-entire-word findbar-button tabbable" data-l10n-id="findbar-entire-word" oncommand="toggleEntireWord(this.checked);" type="checkbox" />
         <label anonid="match-case-status" class="findbar-find-fast" />
         <label anonid="entire-word-status" class="findbar-find-fast" />
@@ -678,17 +678,21 @@ class MozFindbar extends XULElement {
     this._cancelTimers();
     this._updateBrowserWithState();
 
     this._findFailedString = null;
   }
 
   clear() {
     this.browser.finder.removeSelection();
-    this._findField.reset();
+    // Clear value and undo/redo transactions
+    this._findField.value = "";
+    if (this._findField.editor) {
+      this._findField.editor.transactionManager.clear();
+    }
     this.toggleHighlight(false);
     this._updateStatusUI();
     this._enableFindButtons(false);
   }
 
   _dispatchKeypressEvent(aTarget, fakeEvent) {
     if (!aTarget)
       return;
@@ -744,25 +748,25 @@ class MozFindbar extends XULElement {
   /**
    * We get a fake event object through an IPC message when FAYT is being used
    * from within the browser. We then stuff that input in the find bar here.
    */
   _onBrowserKeypress(aFakeEvent) {
     const FAYT_LINKS_KEY = "'";
     const FAYT_TEXT_KEY = "/";
 
-    if (!this.hidden && this._findField.inputField == document.activeElement) {
-      this._dispatchKeypressEvent(this._findField.inputField, aFakeEvent);
+    if (!this.hidden && this._findField == document.activeElement) {
+      this._dispatchKeypressEvent(this._findField, aFakeEvent);
       return;
     }
 
     if (this._findMode != this.FIND_NORMAL && this._quickFindTimeout) {
       this._findField.select();
       this._findField.focus();
-      this._dispatchKeypressEvent(this._findField.inputField, aFakeEvent);
+      this._dispatchKeypressEvent(this._findField, aFakeEvent);
       return;
     }
 
     let key = aFakeEvent.charCode ? String.fromCharCode(aFakeEvent.charCode) : null;
     let manualstartFAYT = (key == FAYT_LINKS_KEY || key == FAYT_TEXT_KEY) &&
                                 this._manualFAYT;
     let autostartFAYT = !manualstartFAYT && this._findAsYouType &&
       key && key != " ";
@@ -776,17 +780,17 @@ class MozFindbar extends XULElement {
       this._findField.value = "";
 
       this.open(mode);
       this._setFindCloseTimeout();
       this._findField.select();
       this._findField.focus();
 
       if (autostartFAYT)
-        this._dispatchKeypressEvent(this._findField.inputField, aFakeEvent);
+        this._dispatchKeypressEvent(this._findField, aFakeEvent);
       else
         this._updateStatusUI(this.nsITypeAheadFind.FIND_FOUND);
     }
   }
 
   /**
    * See MessageListener
    */
@@ -805,17 +809,17 @@ class MozFindbar extends XULElement {
     }
     return undefined;
   }
 
   _updateBrowserWithState() {
     if (this._browser && this._browser.messageManager) {
       this._browser.messageManager.sendAsyncMessage("Findbar:UpdateState", {
         findMode: this._findMode,
-        isOpenAndFocused: !this.hidden && document.activeElement == this._findField.inputField,
+        isOpenAndFocused: !this.hidden && document.activeElement == this._findField,
         hasQuickFindTimeout: !!this._quickFindTimeout,
       });
     }
   }
 
   _enableFindButtons(aEnable) {
     this.getElement("find-next").disabled =
       this.getElement("find-previous").disabled = !aEnable;
--- a/toolkit/modules/tests/browser/head.js
+++ b/toolkit/modules/tests/browser/head.js
@@ -60,17 +60,17 @@ function promiseFindResult(findbar, str 
 }
 
 function promiseEnterStringIntoFindField(findbar, str) {
   let promise = promiseFindResult(findbar, str);
   for (let i = 0; i < str.length; i++) {
     let event = document.createEvent("KeyboardEvent");
     event.initKeyEvent("keypress", true, true, null, false, false,
                        false, false, 0, str.charCodeAt(i));
-    findbar._findField.inputField.dispatchEvent(event);
+    findbar._findField.dispatchEvent(event);
   }
   return promise;
 }
 
 function promiseTestHighlighterOutput(browser, word, expectedResult, extraTest = () => {}) {
   return ContentTask.spawn(browser, { word, expectedResult, extraTest: extraTest.toSource() },
     async function({ word, expectedResult, extraTest }) {
     return new Promise((resolve, reject) => {
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -60,34 +60,34 @@ label.findbar-find-fast:-moz-lwtheme {
 .findbar-find-previous:not(:-moz-lwtheme):not([disabled]):hover:active,
 .findbar-button:not([disabled]):hover:active,
 .findbar-button:not([disabled])[checked="true"] {
   background-image: @roundButtonPressedBackgroundImage@;
   box-shadow: @roundButtonPressedShadow@;
 }
 
 @media (-moz-mac-yosemite-theme: 0) {
-  .findbar-textbox,
+  html|input.findbar-textbox,
   .findbar-find-next {
     border-radius: 10000px;
   }
 }
 
-.findbar-textbox {
+html|input.findbar-textbox {
   border: @roundButtonBorderWidth@ @roundButtonBorderStyle@ var(--lwt-toolbar-field-border-color, @roundButtonBorderColor@);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.8;
   background-image: url("chrome://global/skin/icons/search-textbox.svg");
   background-repeat: no-repeat;
   background-position: 5px center;
   margin: 0;
   padding-inline-start: 19px;
 }
 
-.findbar-textbox[focused="true"] {
+html|input.findbar-textbox:focus {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
-.findbar-textbox:-moz-locale-dir(rtl) {
+html|input.findbar-textbox:-moz-locale-dir(rtl) {
   background-position-x: right 5px;
 }
--- a/toolkit/themes/shared/findBar.inc.css
+++ b/toolkit/themes/shared/findBar.inc.css
@@ -1,13 +1,14 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
 
 findbar {
   border-top: 1px solid ThreeDShadow;
   min-width: 1px;
   transition-property: margin-bottom, opacity, visibility;
   transition-duration: 150ms, 150ms, 0s;
   transition-timing-function: ease-in-out, ease-in-out, linear;
 }
@@ -43,49 +44,49 @@ contrast issues, see bug 1506913 */
 :root[lwtheme-image] findbar {
   --lwt-toolbar-field-background-color: initial;
   --lwt-toolbar-field-color: initial;
   --lwt-toolbar-field-border-color: initial;
   --lwt-toolbar-field-focus: initial;
   --lwt-toolbar-field-focus-color: initial;
 }
 
-.findbar-textbox {
+html|input.findbar-textbox {
   -moz-appearance: none;
   background-color: -moz-Field;
   border: 1px solid var(--lwt-toolbar-field-border-color, ThreeDShadow);
   border-start-start-radius: 2px;
   border-end-start-radius: 2px;
   margin: 0;
   padding: 2px 5px;
   width: 14em;
 }
 
-.findbar-textbox:-moz-lwtheme {
+html|input.findbar-textbox:-moz-lwtheme {
   background-color: var(--lwt-toolbar-field-background-color, -moz-Field);
   color: var(--lwt-toolbar-field-color, -moz-FieldText);
 }
 
-.findbar-textbox[focused="true"] {
+html|input.findbar-textbox:focus {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, -moz-Field));
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, -moz-FieldText));
   border-color: var(--toolbar-field-focus-border-color, Highlight);
 }
 
-.findbar-textbox[status="notfound"] {
+html|input.findbar-textbox[status="notfound"] {
   background-color: rgba(255,0,57,.3);
   color: inherit;
 }
 
-.findbar-textbox[flash="true"] {
+html|input.findbar-textbox[flash="true"] {
   background-color: rgba(255,233,0,.3);
   color: inherit;
 }
 
-.findbar-textbox.minimal {
+html|input.findbar-textbox.minimal {
   border-radius: 2px;
 }
 
 .findbar-find-previous,
 .findbar-find-next {
   margin-inline-start: 0;
   -moz-appearance: none;
   background: rgba(255,255,255,.2);