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 340501 5d8fa3122348f9a40cb27206c715362f8c62d4a0
parent 340500 2653658638c3f81663a33e712802a58cca456410
child 340502 21e9bd765a2474f37f72580e9b436aad9788673d
push id10123
push userkwierso@gmail.com
push dateMon, 10 Oct 2016 20:47:47 +0000
treeherdermozilla-aurora@944f5e3f8f87 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershelenvholmes, ritu
bugs1262668
milestone51.0a2
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;
 }
@@ -73,16 +81,20 @@
 #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;