Bug 1262668 - update inspector breadcrumbs background and border color;r=helenvholmes draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 21 Sep 2016 14:52:48 +0200
changeset 418615 66afb4a001b8b6f9c183f9a5992f1e77f3a78b5b
parent 418548 eda310265741fb26bbd91a92017bc6337fcc8de6
child 532389 871168f304ece82a5f90e006379d16ede7bb40c6
push id30727
push userjdescottes@mozilla.com
push dateWed, 28 Sep 2016 19:39:40 +0000
reviewershelenvholmes
bugs1262668
milestone52.0a1
Bug 1262668 - update inspector breadcrumbs background and border color;r=helenvholmes When the inspector is in portrait mode, the breadcrumbs top border can easily be mistaken for the splitter between the markupview and the side panel. This patch reuses the body background for the breadcrumbs background and uses a custom border color for the top border of the breadcrumbs. In the dark theme this color remains the same as the splitter color, because the background change is significant enough. In the light/firebug theme, the color is lighter than the splitter color MozReview-Commit-ID: ASLgmPX0g6J
devtools/client/themes/inspector.css
devtools/client/themes/widgets.css
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -6,16 +6,24 @@
 :root {
   --eyedropper-image: url(images/command-eyedropper.svg);
 }
 
 .theme-firebug {
   --eyedropper-image: url(images/firebug/command-eyedropper.svg);
 }
 
+:root.theme-light {
+  --breadcrumbs-border-color: #f3f3f3;
+}
+
+:root.theme-dark {
+  --breadcrumbs-border-color: #454d5d;
+}
+
 /* Make sure to hide scroll bars for the parent window */
 window {
   overflow: hidden;
 }
 
 /* The main Inspector panel container. */
 .inspector-responsive-container {
   height: 100vh;
@@ -112,16 +120,20 @@ window {
 #inspector-sidebar-toggle-box {
   line-height: initial;
 }
 
 #inspector-breadcrumbs-toolbar {
   padding: 0px;
   border-bottom-width: 0px;
   border-top-width: 1px;
+  border-top-color: var(--breadcrumbs-border-color);
+  /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
+     get mistaken as a splitter */
+  background-color: var(--theme-body-background);
   display: block;
   position: relative;
 }
 
 #inspector-breadcrumbs-toolbar,
 #inspector-breadcrumbs-toolbar * {
   box-sizing: border-box;
 }
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -209,17 +209,17 @@
 
 #breadcrumb-separator-before,
 #breadcrumb-separator-after:after {
   background: var(--theme-selection-background);
 }
 
 #breadcrumb-separator-after,
 #breadcrumb-separator-before:after {
-  background: var(--theme-toolbar-background);
+  background: var(--theme-body-background);
 }
 
 /* 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(images/breadcrumbs-divider@2x.png) no-repeat center right;