Bug 1557978 - Fix the search icon in the gloda searchbox. r=jorgk DONTBUILD

mail/base/content/mainMailToolbox.inc.xul

@@ -324,15 +324,6 @@
                  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"

mail/base/content/messenger.xul

@@ -763,9 +763,6 @@
             <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"

mail/components/im/content/chat-messenger.inc.xul

@@ -58,15 +58,6 @@
                            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"

mail/themes/linux/mail/searchBox.css

@@ -8,29 +8,24 @@
   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;

mail/themes/windows/mail/searchBox.css

@@ -21,34 +21,24 @@
   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;