Bug 1550559 - Convert findbar XUL textbox to HTML input. r=bgrins

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

--HG--
extra : moz-landing-system : lando

toolkit/content/tests/browser/browser_bug1198465.js

@@ -40,7 +40,7 @@ add_task(async function() {
   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");
 
@@ -55,7 +55,7 @@ add_task(async function() {
 
   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");
 

toolkit/content/tests/browser/browser_findbar.js

@@ -185,7 +185,7 @@ add_task(async function e10sLostKeys() {
     // 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");
@@ -194,7 +194,7 @@ add_task(async function e10sLostKeys() {
   });
 
   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");
 

toolkit/content/widgets/findbar.js

@@ -29,7 +29,7 @@ class MozFindbar extends XULElement {
     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>
@@ -683,7 +683,11 @@ class MozFindbar extends XULElement {
 
   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);
@@ -749,15 +753,15 @@ class MozFindbar extends XULElement {
     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;
     }
 
@@ -781,7 +785,7 @@ class MozFindbar extends XULElement {
       this._findField.focus();
 
       if (autostartFAYT)
-        this._dispatchKeypressEvent(this._findField.inputField, aFakeEvent);
+        this._dispatchKeypressEvent(this._findField, aFakeEvent);
       else
         this._updateStatusUI(this.nsITypeAheadFind.FIND_FOUND);
     }
@@ -810,7 +814,7 @@ class MozFindbar extends XULElement {
     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,
       });
     }

toolkit/themes/osx/global/findBar.css

@@ -65,13 +65,13 @@ label.findbar-find-fast:-moz-lwtheme {
 }
 
 @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;
@@ -83,11 +83,11 @@ label.findbar-find-fast:-moz-lwtheme {
   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;
 }

toolkit/themes/shared/findBar.inc.css

@@ -3,6 +3,7 @@
  * 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;
@@ -48,7 +49,7 @@ contrast issues, see bug 1506913 */
   --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);
@@ -59,28 +60,28 @@ contrast issues, see bug 1506913 */
   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;
 }