Bug 966199 - There's a bit of redundancy and inconsistency in the breadcrumbs styles, r=bgrins
authorVictor Porof <vporof@mozilla.com>
Fri, 31 Jan 2014 12:05:43 +0200
changeset 182356 67161888665698b5fdf1b1bb0fa73e67a71680bb
parent 182355 60bff07e107416c57d718aa09fe816db2719875c
child 182357 f16778a1eed8798ea4f46533e6e4e8805be2cf6b
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs966199
milestone29.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 966199 - There's a bit of redundancy and inconsistency in the breadcrumbs styles, r=bgrins
browser/themes/shared/devtools/debugger.inc.css
browser/themes/shared/devtools/widgets.inc.css
--- a/browser/themes/shared/devtools/debugger.inc.css
+++ b/browser/themes/shared/devtools/debugger.inc.css
@@ -1,16 +1,15 @@
 /* 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/. */
 
 /* Sources and breakpoints pane */
 
-
 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
   border-color: transparent;
 }
 
 #sources-pane > tabs {
   -moz-border-end: 1px solid;
 }
 
--- a/browser/themes/shared/devtools/widgets.inc.css
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -66,17 +66,16 @@
   background-position: -7px center;
 }
 
 .scrollbutton-up[disabled] > .toolbarbutton-icon,
 .scrollbutton-down[disabled] > .toolbarbutton-icon {
   opacity: 0.5;
 }
 
-
 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
 .scrollbutton-up:-moz-locale-dir(ltr),
 .scrollbutton-down:-moz-locale-dir(rtl) {
   border-right: solid 1px rgba(255, 255, 255, .1);
   border-left: solid 1px transparent;
   box-shadow: 3px 0px 3px -3px #181d20;
 }
 
@@ -111,26 +110,36 @@
 #breadcrumb-separator-before,
 #breadcrumb-separator-after,
 #breadcrumb-separator-normal {
   width: 12px;
   height: 25px;
   overflow: hidden;
 }
 
-#breadcrumb-separator-before,
-#breadcrumb-separator-after:after {
+.theme-dark #breadcrumb-separator-before,
+.theme-dark #breadcrumb-separator-after:after {
   background: #1d4f73; /* Select Highlight Blue */
 }
 
-#breadcrumb-separator-after,
-#breadcrumb-separator-before:after {
+.theme-dark #breadcrumb-separator-after,
+.theme-dark #breadcrumb-separator-before:after {
   background: #343c45; /* Toolbars */
 }
 
+.theme-light #breadcrumb-separator-before,
+.theme-light #breadcrumb-separator-after:after {
+  background: #4c9ed9; /* Select Highlight Blue */
+}
+
+.theme-light #breadcrumb-separator-after,
+.theme-light #breadcrumb-separator-before:after {
+  background: #f0f1f2; /* Toolbars */
+}
+
 /* This chevron arrow cannot be replicated easily in CSS, so we are using
  * a background image for it (still keeping it in a separate element so
  * we can handle RTL support with a CSS transform).
  */
 #breadcrumb-separator-normal {
   background: url(breadcrumbs-divider@2x.png) no-repeat center right;
   background-size: 12px 24px;
 }
@@ -163,19 +172,26 @@
 }
 
 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
   background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
 }
 
 .breadcrumbs-widget-item[checked] {
   background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
+}
+
+.theme-dark .breadcrumbs-widget-item[checked] {
   background-color: #1d4f73; /* Select Highlight Blue */
 }
 
+.theme-light .breadcrumbs-widget-item[checked] {
+  background-color: #4c9ed9; /* Select Highlight Blue */
+}
+
 .breadcrumbs-widget-item:first-child {
   background-image: none;
 }
 
 /* RTL support: move the images that were on the left to the right,
  * and move images that were on the right to the left.
  */
 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
@@ -185,76 +201,63 @@
 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
   background-position: center right;
 }
 
 #breadcrumb-separator-before:-moz-locale-dir(rtl),
 #breadcrumb-separator-after:-moz-locale-dir(rtl),
 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
-  transform:  scaleX(-1);
+  transform: scaleX(-1);
 }
 
 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
   transform: translateX(-5px) rotate(45deg);
 }
 
-.breadcrumbs-widget-item:not([checked]):hover label {
-  color: white;
-}
-
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
   color: #f5f7fa; /* Foreground (Text) - Light */
 }
 
-.theme-dark .breadcrumbs-widget-item-id,
-.theme-dark .breadcrumbs-widget-item-classes,
-.theme-dark .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
+.theme-dark .breadcrumbs-widget-item,
+.theme-dark .breadcrumbs-widget-item-classes {
+  color: #f5f7fa; /* Foreground (Text) - Light */
+}
+
+.theme-light .breadcrumbs-widget-item,
+.theme-light .breadcrumbs-widget-item-classes {
+  color: #18191a; /* Foreground (Text) - Dark */
+}
+
+.theme-dark .breadcrumbs-widget-item-id {
   color: #b6babf; /* Foreground (Text) - Grey */
 }
 
+.theme-light .breadcrumbs-widget-item-id {
+  color: #585959; /* Foreground (Text) - Grey */
+}
+
 .theme-dark .breadcrumbs-widget-item-pseudo-classes {
   color: #d99b28; /* Light Orange */
 }
 
-.theme-light .breadcrumbs-widget-item[checked] {
-  background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
-  background-color: #4c9ed9; /* Select Highlight Blue */
-}
-
-.theme-light .breadcrumbs-widget-item:first-child {
-  background-image: none;
-}
-
-.theme-light #breadcrumb-separator-before,
-.theme-light #breadcrumb-separator-after:after {
-  background: #4c9ed9; /* Select Highlight Blue */
+.theme-light .breadcrumbs-widget-item-pseudo-classes {
+  color: #d97e00; /* Light Orange */
 }
 
-.theme-light #breadcrumb-separator-after,
-.theme-light #breadcrumb-separator-before:after {
-  background: #f0f1f2; /*  Toolbars */
-}
-
-.theme-light .breadcrumbs-widget-item,
-.theme-light .breadcrumbs-widget-item-id,
-.theme-light .breadcrumbs-widget-item-classes {
-  color: #585959; /* Foreground (Text) - Grey */
-}
-
-.theme-light .breadcrumbs-widget-item-pseudo-classes {
-  color: #585959; /* Foreground (Text) - Grey */
+.theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
+  color: white;
 }
 
 .theme-light .breadcrumbs-widget-item:not([checked]):hover label {
-  color: #18191a; /* Foreground (Text) - Dark */
+  color: black;
 }
 
 /* SimpleListWidget */
 
 %filter substitution
 %define slw_selectionGradient linear-gradient(hsl(206,59%,39%), hsl(206,59%,29%))
 %define slw_selectionTextColor #fff