Bug 1377003 - [Photon] Update sidebar tree styling on Linux. r=dao draft
authorNihanth Subramanya <nhnt11@gmail.com>
Tue, 18 Jul 2017 19:06:10 +0530
changeset 647482 c2ca1fd95f554d18718decf3df7fa9344af67fc5
parent 647460 6ebc251bd288c268b020815025b05854ccde5c08
child 726509 518436d60ddd0a05225041ba1ce842cce946b2b3
push id74412
push usernhnt11@gmail.com
push dateWed, 16 Aug 2017 10:31:12 +0000
reviewersdao
bugs1377003
milestone57.0a1
Bug 1377003 - [Photon] Update sidebar tree styling on Linux. r=dao MozReview-Commit-ID: 4ZR3bdN3qFX
browser/components/places/content/history-panel.xul
browser/themes/linux/places/places.css
browser/themes/osx/places/places.css
browser/themes/windows/places/places.css
--- a/browser/components/places/content/history-panel.xul
+++ b/browser/components/places/content/history-panel.xul
@@ -39,17 +39,17 @@
   </keyset>
 
   <!-- required to overlay the context menu -->
   <menupopup id="placesContext"/>
 
   <!-- Bookmarks and history tooltip -->
   <tooltip id="bhTooltip"/>
 
-  <hbox id="sidebar-search-container" align="center">
+  <hbox id="sidebar-search-container">
     <textbox id="search-box" flex="1" type="search"
              placeholder="&search.placeholder;"
              aria-controls="historyTree"
              oncommand="searchHistory(this.value);"/>
     <button id="viewButton" style="min-width:0px !important;" type="menu"
             label="&view.label;" accesskey="&view.accesskey;" selectedsort="day"
             persist="selectedsort">
       <menupopup>
--- a/browser/themes/linux/places/places.css
+++ b/browser/themes/linux/places/places.css
@@ -1,15 +1,53 @@
 /* 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/. */
 
 /* Sidebars */
+
+#sidebar-search-container {
+  padding: 4px;
+}
+
+#search-box {
+  margin: 0;
+}
+
+#viewButton {
+  -moz-appearance: none;
+  border-radius: 4px;
+  margin: 1px 0;
+  margin-inline-start: 4px;
+  padding: 2px 4px;
+  color: inherit;
+}
+
+#viewButton:-moz-focusring:not(:hover):not([open]) {
+  outline: 1px dotted -moz-DialogText;
+}
+
+#viewButton:hover {
+  background: hsla(240, 5%, 5%, 0.1);
+}
+
+#viewButton[open] {
+  background: hsla(240, 5%, 5%, 0.15);
+}
+
 .sidebar-placesTree {
   margin: 0;
+  color: inherit;
+  -moz-appearance: none;
+  border: 0;
+  background: transparent;
+}
+
+.sidebar-placesTreechildren::-moz-tree-row {
+  min-height: 24px;
 }
 
 .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
 .sidebar-placesTreechildren::-moz-tree-image(leaf) {
   cursor: pointer;
 }
 
 .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
--- a/browser/themes/osx/places/places.css
+++ b/browser/themes/osx/places/places.css
@@ -119,17 +119,17 @@
 }
 
 #viewButton {
   -moz-appearance: none;
   padding-bottom: 1px;
   padding-inline-start: 5px;
   padding-inline-end: 0px;
   margin: 0;
-  margin-inline-end: 4px;
+  margin-inline-start: 4px;
   min-width: 0px;
   min-height: 0px;
   border: 1px solid #a2a9b1;
   border-radius: 10px;
   background-image: linear-gradient(hsla(0,0%,100%,.75),hsla(0,0%,100%,.1));
   box-shadow: inset 0 0 1px hsla(0,0%,100%,.85),
                     0 1px hsla(0,0%,100%,.35);
 }
@@ -154,17 +154,21 @@
 #viewButton:focus {
   box-shadow: 0 1px 0 hsla(0, 0%, 0%, .15),
               0 0 0 1px hsla(210, 100%, 60%, .45) inset,
               0 0 0 2px hsla(210, 100%, 60%, .45);
   border-color: hsla(210, 100%, 60%, 1);
 }
 
 #sidebar-search-container {
-  margin: 0 4px;
+  padding: 4px;
+}
+
+#search-box {
+  margin: 0;
 }
 
 /* Trees */
 
 %include ../../shared/places/tree-icons.inc.css
 
 treechildren:-moz-tree-image(selected,focus) {
   fill: HighlightText;
--- a/browser/themes/windows/places/places.css
+++ b/browser/themes/windows/places/places.css
@@ -46,17 +46,25 @@
 /* Trees */
 
 %include ../../shared/places/tree-icons.inc.css
 
 /* Browser Sidebars */
 
 /* Default button vert. margins are 1px/2px, and this can cause misalignment */
 #viewButton {
-  margin-top: 2px;
-  margin-bottom: 2px;
+  margin: 0;
+  margin-inline-start: 4px;
 }
 
 #viewButton > .button-box > .button-menu-dropmarker {
   height: auto;
   width: auto;
   margin-inline-end: -3px;
 }
+
+#sidebar-search-container {
+  padding: 4px;
+}
+
+#search-box {
+  margin: 0;
+}