Bug 1550559 - Convert findbar XUL textbox to HTML input. r=bgrins
☠☠ backed out by b64e1b70da6c ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 15 May 2019 18:02:10 +0000
changeset 532799 30ee2053caf27c743cb02d8355da879ec8310465
parent 532798 23e99af8279d9e9dff4e8e2f748c162d92ccde74
child 532800 ceb51645406eff2eb84c90a41a71375b3454c92b
push id11272
push userapavel@mozilla.com
push dateThu, 16 May 2019 15:28:22 +0000
treeherdermozilla-beta@2265bfc5920d [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
toolkit/content/tests/browser/browser_bug1198465.js
toolkit/content/tests/browser/browser_findbar.js
toolkit/content/widgets/findbar.js
toolkit/themes/osx/global/findBar.css
toolkit/themes/shared/findBar.inc.css
--- 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/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/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);