Bug 1408790 - The non-selected elements with ids should be lightened to the same color as the non-selected classes r=gl
authorLiam <canada8715@gmail.com>
Sun, 15 Oct 2017 17:45:12 -0600
changeset 390705 ac9d12e5587fe2486a2a8c95ef911768841195e2
parent 390704 35a375648ee0224743657c67edfebf0cbe81b719
child 390706 73352624f35c23e6000cd50d095708d69249f35d
push id32839
push usernbeleuzu@mozilla.com
push dateWed, 08 Nov 2017 10:51:56 +0000
treeherdermozilla-central@f63559d7e6a5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1408790
milestone58.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 1408790 - The non-selected elements with ids should be lightened to the same color as the non-selected classes r=gl MozReview-Commit-ID: AjcnYsxxqAs
devtools/client/themes/breadcrumbs.css
--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -1,13 +1,21 @@
 /* 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/. */
 
+ :root {
+  --breadcrumb-id-class-color: #909090;
+ }
+
+ .theme-dark:root {
+  --breadcrumb-id-class-color: var(--theme-content-color1);
+ }
+
 /* Inspector HTMLBreadcrumbs */
 
 .breadcrumbs-widget-container {
   margin-inline-end: 3px;
   max-height: 24px; /* Set max-height for proper sizing on linux */
   height: 24px; /* Set height to prevent starting small waiting for content */
 }
 
@@ -150,22 +158,19 @@
 .theme-dark .breadcrumbs-widget-item {
   color: var(--theme-selection-color);
 }
 
 .theme-light .breadcrumbs-widget-item {
   color: var(--theme-body-color);
 }
 
-.breadcrumbs-widget-item-id {
-  color: var(--theme-body-color-alt);
-}
-
+.breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item-classes {
-  color: var(--theme-content-color1);
+  color: var(--breadcrumb-id-class-color);
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
   color: var(--theme-highlight-lightorange);
 }
 
 /* Firebug theme support for breadcrumbs widget. */