Bug 1411230 - Move synctab sidebar search icon to left. r?dao draft
authorDale Harvey <dale@arandomurl.com>
Tue, 14 Nov 2017 14:05:40 +0000
changeset 698431 886088482635c66b225f78214b5100ff016c5750
parent 698430 5b3b0a38b2d1827f4fc9af6f32e9fb939789d6c8
child 740373 513e0d9ecb6788fc598f7cb963e1cee4a513157b
push id89282
push userbmo:dharvey@mozilla.com
push dateWed, 15 Nov 2017 17:58:13 +0000
reviewersdao
bugs1411230
milestone59.0a1
Bug 1411230 - Move synctab sidebar search icon to left. r?dao MozReview-Commit-ID: 39ctqQlNNOG
browser/components/syncedtabs/TabListView.js
browser/components/syncedtabs/sidebar.xhtml
browser/themes/linux/syncedtabs/sidebar.css
browser/themes/osx/syncedtabs/sidebar.css
browser/themes/windows/syncedtabs/sidebar.css
--- a/browser/components/syncedtabs/TabListView.js
+++ b/browser/components/syncedtabs/TabListView.js
@@ -41,17 +41,16 @@ function TabListView(window, props) {
 
   this._tabsContainerTemplate = this._doc.getElementById("tabs-container-template");
   this._clientTemplate = this._doc.getElementById("client-template");
   this._emptyClientTemplate = this._doc.getElementById("empty-client-template");
   this._tabTemplate = this._doc.getElementById("tab-template");
   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");
 
   this._attachFixedListeners();
 
   this._setupContextMenu();
 }
 
@@ -174,17 +173,16 @@ TabListView.prototype = {
   },
 
   // These listeners are attached only once, when we initialize the view
   _attachFixedListeners() {
     this.tabsFilter.addEventListener("input", this.onFilter.bind(this));
     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
   _attachListListeners() {
     this.list.addEventListener("click", this.onClick.bind(this));
     this.list.addEventListener("mouseup", this.onMouseUp.bind(this));
     this.list.addEventListener("keydown", this.onKeyDown.bind(this));
   },
--- a/browser/components/syncedtabs/sidebar.xhtml
+++ b/browser/components/syncedtabs/sidebar.xhtml
@@ -98,17 +98,16 @@
           <div class="search-box">
             <div class="textbox-input-box">
               <input type="text"
                      class="tabsFilter textbox-input"
                      placeholder="&syncedTabs.sidebar.searchPlaceholder;"
                      tabindex="1"/>
               <div class="textbox-search-icons">
                 <a class="textbox-search-clear"></a>
-                <a class="textbox-search-icon"></a>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- the scrollable content area where our templates are inserted -->
       <div id="template-container" class="content-scrollable" tabindex="-1">
       </div>
--- a/browser/themes/linux/syncedtabs/sidebar.css
+++ b/browser/themes/linux/syncedtabs/sidebar.css
@@ -30,27 +30,28 @@ html {
 
 .textbox-search-clear {
   background-image: url(moz-icon://stock/gtk-clear?size=menu);
   background-repeat: no-repeat;
   width: 16px;
   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;
 }
 
-.textbox-search-icon[searchbutton]:not([disabled]) ,
+.search-box > .textbox-input-box > .textbox-input:-moz-locale-dir(rtl) {
+  background-position: right center;
+}
+
 .textbox-search-clear:not([disabled]) {
   cursor: pointer;
 }
 
 .item.client .item-twisty-container {
   -moz-appearance: treetwistyopen;
   margin-top: 3px;
   margin-left: 2px;
--- a/browser/themes/osx/syncedtabs/sidebar.css
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -125,29 +125,24 @@
 .search-box.compact > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
   background-image: url(chrome://global/skin/icons/searchfield-cancel.svg);
   background-repeat: no-repeat;
   background-size: 11px 11px;
   width: 11px;
   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;
   -moz-border-bottom-colors: -moz-mac-focusring -moz-mac-focusring #000000;
   -moz-border-left-colors: -moz-mac-focusring -moz-mac-focusring #000000;
 }
 
 .search-box.compact {
     padding: 0px;
     /* font size is in px because the XUL it was copied from uses px */
     font-size: 11px;
 }
 
-.textbox-search-clear,
-.textbox-search-icon {
+.textbox-search-clear {
   margin-top: 1px;
 }
--- a/browser/themes/windows/syncedtabs/sidebar.css
+++ b/browser/themes/windows/syncedtabs/sidebar.css
@@ -22,50 +22,39 @@
   -moz-appearance: textfield;
   cursor: text;
   margin: 4px;
   padding: 2px 2px 3px;
   padding-inline-start: 4px;
   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 {
   width: 16px;
   height: 16px;
   background-image: url(chrome://global/skin/icons/Search-close.png);
   background-repeat: no-repeat;
 }
 
 .textbox-search-clear:not([disabled]) {
   cursor: default;
 }
 
-.textbox-search-icon:not([disabled]) {
-  cursor: text;
-}
-
 .textbox-search-clear:not([disabled]):hover {
   background-position: -16px 0;
 }
 
 .textbox-search-clear:not([disabled]):hover:active {
   background-position: -32px 0;
 }