Bug 1557978 - Fix the search icon in the gloda searchbox. r=jorgk DONTBUILD
authorRichard Marti <richard.marti@gmail.com>
Sun, 09 Jun 2019 16:04:22 +0200
changeset 35812 0630127824af061c74cb5792477acf666f8c6cd6
parent 35811 9b9946de7fe3ca48a02056516509255dd1a1308a
child 35813 5fa5def104b3a0f96b553e47f6d0defde3f96cda
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersjorgk
bugs1557978
Bug 1557978 - Fix the search icon in the gloda searchbox. r=jorgk DONTBUILD
mail/base/content/mainMailToolbox.inc.xul
mail/base/content/messenger.xul
mail/components/im/content/chat-messenger.inc.xul
mail/themes/linux/mail/searchBox.css
mail/themes/windows/mail/searchBox.css
--- a/mail/base/content/mainMailToolbox.inc.xul
+++ b/mail/base/content/mainMailToolbox.inc.xul
@@ -319,25 +319,16 @@
                    tooltiptext="&appmenuButton1.tooltip;"/>
 #ifdef MAIN_WINDOW
     <!-- gloda search widget; provides global (message) searching.  -->
     <toolbaritem id="gloda-search" insertafter="button-stop"
                  title="&glodaSearch.title;"
                  align="center"
                  flex="1"
                  class="chromeclass-toolbar-additional">
-        <!-- Mimic the search/clear buttons of the standard search textbox,
-             but adjust for the reality that clear doesn't make much sense
-             since gloda results only show in a tab and the idiom for closing
-             tabs is closing the tab.  Our binding does process escape to
-             clear the box, if people want to clear it that way...
-             -->
-        <hbox>
-          <image class="gloda-search-icon"/>
-        </hbox>
         <textbox id="searchInput"
                  class="searchBox"
                  flex="1"
                  type="glodacomplete"
                  searchbutton="true"
                  autocompletesearch="gloda"
                  autocompletepopup="PopupGlodaAutocomplete"
                  autocompletesearchparam="global"
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -758,19 +758,16 @@
 
     <vbox id="glodaTab" collapsed="true">
       <vbox flex="1" class="chromeTabInstance">
         <vbox class="contentTabToolbox">
           <hbox class="glodaTabToolbar inline-toolbar chromeclass-toolbar" flex="1">
             <spacer flex="1" />
             <spacer flex="1" />
             <hbox flex="1" class="remote-gloda-search-container">
-              <hbox>
-                <image class="gloda-search-icon" />
-              </hbox>
               <textbox class="remote-gloda-search searchBox"
                        flex="1"
                        type="glodacomplete"
                        searchbutton="true"
                        autocompletesearch="gloda"
                        autocompletepopup="PopupGlodaAutocomplete"
                        autocompletesearchparam="global"
                        timeout="200"
--- a/mail/components/im/content/chat-messenger.inc.xul
+++ b/mail/components/im/content/chat-messenger.inc.xul
@@ -53,25 +53,16 @@
                              label="&chatAccountsButton.label;"
                              oncommand="openIMAccountMgr()"/>
 
               <toolbaritem id="gloda-im-search" insertafter="button-stop"
                            title="&amp;glodaSearch.title;"
                            align="center"
                            flex="1"
                            class="chromeclass-toolbar-additional">
-                <!-- Mimic the search/clear buttons of the standard search textbox,
-                     but adjust for the reality that clear doesn't make much sense
-                     since gloda results only show in a tab and the idiom for closing
-                     tabs is closing the tab.  Our binding does process escape to
-                     clear the box, if people want to clear it that way...
-                  -->
-                <hbox>
-                  <image class="gloda-search-icon"/>
-                </hbox>
                 <textbox id="IMSearchInput"
                          class="searchBox"
                          flex="1"
                          type="glodacomplete"
                          searchbutton="true"
                          autocompletesearch="gloda"
                          autocompletepopup="PopupGlodaAutocomplete"
                          autocompletesearchparam="global"
--- a/mail/themes/linux/mail/searchBox.css
+++ b/mail/themes/linux/mail/searchBox.css
@@ -3,39 +3,34 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://messenger/skin/shared/searchBox.css");
 
 .quick-search-textbox {
   padding-top: 1px;
 }
 
-.searchBox > hbox,
-.themeableSearchBox > hbox {
-  -moz-box-ordinal-group: 1;
-}
-
-.searchBox > .textbox-input-box,
-.themeableSearchBox > .textbox-input-box {
-  -moz-box-ordinal-group: 2;
-}
-
-.gloda-search-icon {
-  margin-inline-end: 5px;
-}
-
-.gloda-search-icon,
-.textbox-search-icon[searchbutton],
-textbox:not([searchbutton]) > .textbox-input-box > .textbox-search-sign {
-  list-style-image: url(chrome://messenger/skin/icons/search-glass.svg);
+.remote-gloda-search,
+#searchInput,
+#IMSearchInput {
+  background-image: url(chrome://messenger/skin/icons/search-glass.svg);
+  background-position: calc( 100% - 4px);
+  background-repeat: no-repeat;
+  padding-inline-end: 24px;
   -moz-context-properties: fill;
   fill: currentColor;
   opacity: 0.54;
 }
 
+.remote-gloda-search:-moz-locale-dir(rtl),
+#searchInput:-moz-locale-dir(rtl),
+#IMSearchInput:-moz-locale-dir(rtl) {
+  background-position: 4px;
+}
+
 .remote-gloda-search-container {
   padding-top: 3px;
   padding-bottom: 2px;
 }
 
 .searchBox,
 .themeableSearchBox {
   -moz-appearance: none;
--- a/mail/themes/windows/mail/searchBox.css
+++ b/mail/themes/windows/mail/searchBox.css
@@ -16,44 +16,34 @@
 #searchInput {
   font-style: normal !important;
 }
 
 .quick-search-textbox {
   padding-top: 1px;
 }
 
-.searchBox > hbox,
-.themeableSearchBox > hbox {
-  -moz-box-ordinal-group: 1;
-}
-
-.searchBox > .textbox-input-box,
-.themeableSearchBox > .textbox-input-box {
-  -moz-box-ordinal-group: 2;
-}
-
-.gloda-search-icon {
-  margin-inline-end: 5px;
-}
-
-.gloda-search-icon,
-textbox:not([searchbutton]) > .textbox-input-box > .textbox-search-sign {
-  margin-inline-start: 2px;
-}
-
-.gloda-search-icon,
-.textbox-search-icon[searchbutton],
-textbox:not([searchbutton]) > .textbox-input-box > .textbox-search-sign {
-  list-style-image: url(chrome://messenger/skin/icons/search-glass.svg);
+.remote-gloda-search,
+#searchInput,
+#IMSearchInput {
+  background-image: url(chrome://messenger/skin/icons/search-glass.svg);
+  background-position: calc( 100% - 4px);
+  background-repeat: no-repeat;
+  padding-inline-end: 24px;
   -moz-context-properties: fill;
   fill: currentColor;
   opacity: 0.54;
 }
 
+.remote-gloda-search:-moz-locale-dir(rtl),
+#searchInput:-moz-locale-dir(rtl),
+#IMSearchInput:-moz-locale-dir(rtl) {
+  background-position: 4px;
+}
+
 .remote-gloda-search-container {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
 .searchBox,
 .themeableSearchBox {
   -moz-appearance: none;