Bug 1355330 - Update synced tabs sidebar styling. r= draft
authorNihanth Subramanya <nhnt11@gmail.com>
Mon, 21 Aug 2017 17:25:14 +0530
changeset 656145 d61cc422708aa1d380b9274d4c55a78da7467de2
parent 654592 1b4c59eef820b46eb0037aca68f83a15088db45f
child 729027 ed10d9575af5db0e8c33611251468762963b3ab3
push id77085
push usernhnt11@gmail.com
push dateWed, 30 Aug 2017 19:25:57 +0000
bugs1355330
milestone57.0a1
Bug 1355330 - Update synced tabs sidebar styling. r= MozReview-Commit-ID: FWW4MRhMlWR
browser/components/syncedtabs/sidebar.xhtml
browser/themes/linux/syncedtabs/sidebar.css
browser/themes/osx/syncedtabs/sidebar.css
browser/themes/shared/syncedtabs/sidebar.inc.css
browser/themes/windows/syncedtabs/sidebar.css
--- 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");