Bug 1262668 - update inspector breadcrumbs background and border color;r=helenvholmes a=ritu
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 21 Sep 2016 14:52:48 +0200
changeset 348556 d1699ef21941da9667d6c92236710291652b7199
parent 348555 a049f0f0b85370df2cf963019611a3f6742dbbf2
child 348557 372cbe11c92e40200fb25244a9947990ef7093ed
push id6474
push userkwierso@gmail.com
push dateMon, 10 Oct 2016 20:48:46 +0000
treeherdermozilla-beta@b35318b86b33 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershelenvholmes, ritu
bugs1262668
milestone50.0
Bug 1262668 - update inspector breadcrumbs background and border color;r=helenvholmes a=ritu 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;
+}
+
 /* Use flex layout for the Inspector toolbar. For now, it's done
    specifically for the Inspector toolbar since general rule applied
    on .devtools-toolbar breaks breadcrubs and also toolbars in other
    panels (e.g. webconsole, debugger), these are not ready for HTML
    layout yet. */
 #inspector-toolbar.devtools-toolbar {
   display: flex;
 }
@@ -40,16 +48,20 @@
 .theme-firebug #inspector-searchbox {
   line-height: 17px;
 }
 
 #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;