Bug 1262668 - update inspector breadcrumbs background and border color;r=helenvholmes
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 21 Sep 2016 14:52:48 +0200
changeset 315534 c593d6a120714593d0c2bf3bf670182c48e24f50
parent 315533 7b8d79f7786ad56b4c2e71ee45a5fcb308f88722
child 315729 dc21ccd6a304df32cdec43a71f01bdf80288ee98
push id20622
push userjdescottes@mozilla.com
push dateThu, 29 Sep 2016 08:18:09 +0000
treeherderfx-team@c593d6a12071 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
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;