Bug 1251247 - Simplify the SplitView widget styling. r=vporof
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 29 Feb 2016 17:18:14 +0100
changeset 324256 f9751df48f4e34e6abcff047628b7a5aaec66498
parent 324255 557f7ef0273a32917355cc0f42956efbe4465f20
child 324257 6af962bff65de440a88387256ce311c5e5e2e440
push id1128
push userjlund@mozilla.com
push dateWed, 01 Jun 2016 01:31:59 +0000
treeherdermozilla-release@fe0d30de989d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1251247
milestone47.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1251247 - Simplify the SplitView widget styling. r=vporof MozReview-Commit-ID: wjTTWzJsZt
devtools/client/themes/splitview.css
--- a/devtools/client/themes/splitview.css
+++ b/devtools/client/themes/splitview.css
@@ -1,119 +1,74 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
 .theme-dark {
-  --smw-margin: #000;
-  --smw-item-top-border: rgba(0,0,0,0.2);
-  --smw-item-bottom-border: rgba(128,128,128,0.15);
+  --sidemenu-selected-arrow: url(images/itemArrow-dark-ltr.svg);
+  --sidemenu-selected-arrow-rtl: url(images/itemArrow-dark-rtl.svg);
 }
 .theme-light {
-  --smw-margin: #aaa;
-  --smw-item-top-border: rgba(128,128,128,0.15);
-  --smw-item-bottom-border: transparent;
+  --sidemenu-selected-arrow: url(images/itemArrow-ltr.svg);
+  --sidemenu-selected-arrow-rtl: url(images/itemArrow-rtl.svg);
 }
 
 .splitview-nav-container .devtools-throbber {
   display: none;
   text-align: center;
 }
 
 .loading .splitview-nav-container .devtools-throbber {
   display: block;
 }
 
-.theme-dark .splitview-nav-container {
-  background-color: var(--theme-toolbar-background);
-}
-
 .splitview-nav {
-  -moz-appearance: none;
-  list-style-image: none;
   list-style: none;
   padding: 0;
   margin: 0;
-  box-shadow: inset -1px 0 0 var(--smw-margin);
-}
-
-.splitview-nav:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 var(--smw-margin);
+  background-color: var(--theme-sidebar-background);
 }
 
 .splitview-nav > li {
-  /* To compensate for the top and bottom borders */
-  margin-top: -1px;
-  margin-bottom: -1px;
-  -moz-padding-end: 8px;
+  padding-inline-end: 8px;
   -moz-box-align: center;
   outline: 0;
   vertical-align: bottom;
-}
-
-.splitview-nav > li {
-  border-top: 1px solid var(--smw-item-top-border);
-  border-bottom: 1px solid var(--smw-item-bottom-border);
-}
-
-.splitview-nav > li:last-of-type {
-  box-shadow: inset 0 -1px 0 var(--smw-item-top-border);
+  border-bottom: 1px solid rgba(128,128,128,0.15);
 }
 
 .placeholder {
   -moz-box-flex: 1;
   text-align: center;
 }
 
 .splitview-nav > li.splitview-active {
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center right, center right, top left;
-  background-size: auto, 1px, auto;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  background-image: var(--sidemenu-selected-arrow);
+  background-repeat: no-repeat;
+  background-position: center right;
 }
 
 .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center left, center left, top right;
-}
-
-.theme-dark .splitview-nav > li.splitview-active {
-  background-image: url(images/itemArrow-dark-ltr.svg),
-                    linear-gradient(var(--smw-margin), var(--smw-margin)),
-                    linear-gradient(#1d4f73, #1d4f73);
-}
-
-.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
-  background-image: url(images/itemArrow-dark-rtl.svg),
-                    linear-gradient(var(--smw-margin), var(--smw-margin)),
-                    linear-gradient(#1d4f73, #1d4f73);
-}
-
-.theme-light .splitview-nav > li.splitview-active {
-  background-image: url(images/itemArrow-ltr.svg),
-                    linear-gradient(var(--smw-margin), var(--smw-margin)),
-                    linear-gradient(#4c9ed9, #4c9ed9);
-}
-
-.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
-  background-image: url(images/itemArrow-rtl.svg),
-                    linear-gradient(var(--smw-margin), var(--smw-margin)),
-                    linear-gradient(#4c9ed9, #4c9ed9);
+  background-image: var(--sidemenu-selected-arrow-rtl);
+  background-position: center left;
 }
 
 /* Toolbars */
 
 .splitview-main > .devtools-toolbar {
   background-origin: border-box;
   background-clip: border-box;
 }
 
 .splitview-main > toolbar,
 .loading .splitview-nav-container {
-  -moz-border-end: 1px solid var(--smw-margin);
+  border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
 .splitview-main > .devtools-toolbarbutton {
   font-size: 11px;
   padding: 0 8px;
   width: auto;
   min-width: 48px;
   min-height: 0;