Bug 1355330 - Update synced tabs sidebar styling. r=
MozReview-Commit-ID: FWW4MRhMlWR
--- a/browser/components/syncedtabs/sidebar.xhtml
+++ b/browser/components/syncedtabs/sidebar.xhtml
@@ -90,17 +90,17 @@
</div>
</div>
</template>
<div class="content-container">
<!-- the non-scrollable header -->
<div class="content-header">
<div class="sidebar-search-container tabs-container sync-state">
- <div class="search-box compact">
+ <div class="search-box">
<div class="textbox-input-box">
<input type="text" class="tabsFilter textbox-input" tabindex="1"/>
<div class="textbox-search-icons">
<a class="textbox-search-clear"></a>
<a class="textbox-search-icon"></a>
</div>
</div>
</div>
--- a/browser/themes/linux/syncedtabs/sidebar.css
+++ b/browser/themes/linux/syncedtabs/sidebar.css
@@ -2,17 +2,16 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/syncedtabs/sidebar.inc.css
/* These styles are intended to mimic XUL trees and the XUL search box. */
html {
- border: 1px solid ThreeDShadow;
background-color: -moz-Field;
color: -moz-FieldText;
box-sizing: border-box;
}
.item {
padding-inline-end: 0;
}
@@ -21,26 +20,17 @@ html {
margin: 1px 0 0;
margin-inline-end: 6px;
}
.search-box {
-moz-appearance: textfield;
cursor: text;
- margin: 2px 4px;
- border: 2px solid;
- -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
- -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
- padding: 2px 2px 3px;
- padding-inline-start: 4px;
- background-color: -moz-Field;
- color: -moz-FieldText;
+ margin: 4px;
}
.textbox-search-clear {
background-image: url(moz-icon://stock/gtk-clear?size=menu);
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
--- a/browser/themes/osx/syncedtabs/sidebar.css
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -92,26 +92,22 @@
font-weight: 500;
}
.item.selected:focus > .item-title-container {
color: #fff;
}
}
-.sidebar-search-container {
- border-bottom: 1px solid #bdbdbd;
-}
-
.search-box {
-moz-appearance: searchfield;
padding: 1px;
font-size: 12px;
cursor: text;
- margin: 4px 8px 10px;
+ margin: 4px;
border-width: 3px;
border-style: solid;
border-color: currentcolor;
border-image: none;
-moz-border-top-colors: transparent #888 #000;
-moz-border-right-colors: transparent #FFF #000;
-moz-border-bottom-colors: transparent #FFF #000;
-moz-border-left-colors: transparent #888 #000;
--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@@ -68,17 +68,16 @@ body {
overflow: hidden;
outline: none;
color: -moz-FieldText;
}
.item.selected > .item-title-container {
background-color: -moz-cellhighlight;
color: -moz-cellhighlighttext;
- font-weight: bold;
}
.item.selected:focus > .item-title-container {
background-color: Highlight;
color: HighlightText;
}
.client .item.tab > .item-title-container {
@@ -126,17 +125,17 @@ body {
background-position: center;
}
.item-title-container {
display: flex;
flex-flow: row;
overflow: hidden;
flex-grow: 1;
- padding: 1px 0px 1px 0px;
+ padding: 4px;
}
.item-title {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px;
line-height: 1.3;
--- a/browser/themes/windows/syncedtabs/sidebar.css
+++ b/browser/themes/windows/syncedtabs/sidebar.css
@@ -1,36 +1,32 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/syncedtabs/sidebar.inc.css
/* These styles are intended to mimic XUL trees and the XUL search box. */
-html {
- background-color: #EEF3FA;
-}
-
.item {
padding-inline-end: 0;
}
.item-title {
margin: 1px 0 0;
}
.item-title {
margin-inline-end: 6px;
}
.search-box {
-moz-appearance: textfield;
cursor: text;
- margin: 2px 4px;
+ margin: 4px;
padding: 2px 2px 3px;
padding-inline-start: 4px;
color: -moz-FieldText;
}
.textbox-search-icon {
width: 16px;
height: 16px;
@@ -89,19 +85,19 @@ html {
background-repeat: no-repeat;
background-position: center;
}
.item-twisty-container {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
- padding-top: 5px;
min-width: 9px; /* The image's width is 9 pixels */
height: 9px;
+ margin: auto;
}
.item.client .item-twisty-container {
background-image: url("chrome://global/skin/tree/twisty.svg#open");
}
.item.client.closed .item-twisty-container {
background-image: url("chrome://global/skin/tree/twisty.svg#clsd");