Bug 1550559 - Convert findbar XUL textbox to HTML input. r=bgrins
☠☠ backed out by 658cbfa3e071 ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 15 May 2019 15:40:23 +0000
changeset 473969 c8057f34f28123f2ad4b3aa14e8cbc621159a03a
parent 473968 8887ea101536a4c3eb09cb5fbf2b04ff9dc9fc8e
child 473970 658cbfa3e071b3133cfd924e3aa3d0f904ea0b42
push id113119
push userdvarga@mozilla.com
push dateWed, 15 May 2019 21:35:00 +0000
treeherdermozilla-inbound@0e8d68920793 [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/widgets/findbar.js
toolkit/themes/osx/global/findBar.css
toolkit/themes/shared/findBar.inc.css
--- 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" />
--- 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);