Bug 1411230 - Move synctab sidebar search icon to left. r=dao

MozReview-Commit-ID: 39ctqQlNNOG

--HG--
extra : rebase_source : bdbfe31ddbcf7359984b2d64151ab2f1e9f29449

browser/components/syncedtabs/TabListView.js

@@ -46,7 +46,6 @@ function TabListView(window, props) {
   this.tabsFilter = this._doc.querySelector(".tabsFilter");
   this.clearFilter = this._doc.querySelector(".textbox-search-clear");
   this.searchBox = this._doc.querySelector(".search-box");
-  this.searchIcon = this._doc.querySelector(".textbox-search-icon");
 
   this.container = this._doc.createElement("div");
 
@@ -179,7 +178,6 @@ TabListView.prototype = {
     this.tabsFilter.addEventListener("focus", this.onFilterFocus.bind(this));
     this.tabsFilter.addEventListener("blur", this.onFilterBlur.bind(this));
     this.clearFilter.addEventListener("click", this.onClearFilter.bind(this));
-    this.searchIcon.addEventListener("click", this.onFilterFocus.bind(this));
   },
 
   // These listeners have to be re-created every time since we re-create the list

browser/components/syncedtabs/sidebar.xhtml

@@ -103,7 +103,6 @@
                      tabindex="1"/>
               <div class="textbox-search-icons">
                 <a class="textbox-search-clear"></a>
-                <a class="textbox-search-icon"></a>
               </div>
             </div>
           </div>

browser/themes/linux/syncedtabs/sidebar.css

@@ -35,17 +35,18 @@ html {
   height: 16px;
 }
 
-.textbox-search-icon {
-  width: 16px;
-  height: 16px;
+.search-box > .textbox-input-box > .textbox-input {
   background-image: url(chrome://global/skin/icons/search-textbox.svg);
   background-repeat: no-repeat;
-  background-position: center;
-  display: inline-block;
-  vertical-align: middle;
+  background-size: 12px 12px;
+  background-position: left center;
+  text-indent: 14px;
+}
+
+.search-box > .textbox-input-box > .textbox-input:-moz-locale-dir(rtl) {
+  background-position: right center;
 }
 
-.textbox-search-icon[searchbutton]:not([disabled]) ,
 .textbox-search-clear:not([disabled]) {
   cursor: pointer;
 }

browser/themes/osx/syncedtabs/sidebar.css

@@ -130,10 +130,6 @@
   height: 11px;
 }
 
-.search-box.compact > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
-  display: none;
-}
-
 .search-box[focused="true"] {
   -moz-border-top-colors: -moz-mac-focusring -moz-mac-focusring #000000;
   -moz-border-right-colors: -moz-mac-focusring -moz-mac-focusring #000000;
@@ -147,7 +143,6 @@
     font-size: 11px;
 }
 
-.textbox-search-clear,
-.textbox-search-icon {
+.textbox-search-clear {
   margin-top: 1px;
 }

browser/themes/windows/syncedtabs/sidebar.css

@@ -27,23 +27,16 @@
   color: -moz-FieldText;
 }
 
-.textbox-search-icon {
-  width: 12px;
-  height: 12px;
+.search-box > .textbox-input-box > .textbox-input {
   background-image: url(chrome://global/skin/icons/search-textbox.svg);
   background-repeat: no-repeat;
-  background-position: center;
-  display: inline-block;
-  vertical-align: middle;
-  margin-bottom: 1px;
+  background-size: 12px 12px;
+  background-position: left center;
+  text-indent: 14px;
 }
 
-.textbox-search-icon:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
-.textbox-search-icon[searchbutton]:not([disabled]) {
-  cursor: pointer;
+.search-box > .textbox-input-box > .textbox-input:-moz-locale-dir(rtl) {
+  background-position: right center;
 }
 
 .textbox-search-clear {
@@ -57,10 +50,6 @@
   cursor: default;
 }
 
-.textbox-search-icon:not([disabled]) {
-  cursor: text;
-}
-
 .textbox-search-clear:not([disabled]):hover {
   background-position: -16px 0;
 }