Bug 1411230 - Move synctab sidebar search icon to left. r?dao
MozReview-Commit-ID: 39ctqQlNNOG
--- 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;
}