Bug 1200686 - Unify pseudo class colors in markup view and rule view. r=fvsch
authorakshitha <akshithashetty84@gmail.com>
Fri, 01 Mar 2019 13:43:31 +0000
changeset 519830 07903d118908485d1b6ae19befd6b424af710a20
parent 519829 c9052ac46602442bf21e3351bf2946b2daa76e82
child 519831 99eceab65655f71b82886e4fbb6fa3e557e075f5
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch
bugs1200686
milestone67.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 1200686 - Unify pseudo class colors in markup view and rule view. r=fvsch Bug 1200686 - Unify pseudo class clors in markup view and rule view. r=fvsch Differential Revision: https://phabricator.services.mozilla.com/D21426
devtools/client/themes/breadcrumbs.css
devtools/client/themes/markup.css
devtools/client/themes/rules.css
devtools/client/themes/variables.css
--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -1,19 +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;
+  --breadcrumb-pseudo-class-text-color: var(--yellow-70) ;
  }
 
  .theme-dark:root {
   --breadcrumb-id-class-color: var(--theme-content-color1);
+  --breadcrumb-pseudo-class-text-color: var(--yellow-50);
  }
 
 /* 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 */
@@ -156,10 +158,10 @@
 }
 
 .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item-classes {
   color: var(--breadcrumb-id-class-color);
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
-  color: var(--theme-highlight-lightorange);
+  color: var(--breadcrumb-pseudo-class-text-color);
 }
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -1,16 +1,17 @@
 /* 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 {
   --markup-hidden-attr-name-color: #BA89B8;
   --markup-hidden-attr-value-color: #5C6D87;
   --markup-hidden-punctuation-color: #909090;
+  --markup-pseudoclass-disk-color: var(--yellow-60);
   --markup-hidden-tag-color: #97A4B3;
   --markup-outline: var(--theme-splitter-color);
 }
 
 .theme-dark:root {
   --markup-hidden-attr-name-color: #B07EB3;
   --markup-hidden-attr-value-color: #9893A3;
   --markup-hidden-punctuation-color: #909090;
@@ -354,17 +355,17 @@ ul.children + .tag-line::before {
   -moz-context-properties: stroke;
   stroke: currentColor;
 }
 
 /* Draw a circle next to nodes that have a pseudo class lock.
    Center vertically with the 1.4em line height on .tag-line */
 .child.pseudoclass-locked::before {
   content: "";
-  background: var(--theme-highlight-lightorange);
+  background: var(--markup-pseudoclass-disk-color);
   border-radius: 50%;
   width: .8em;
   height: .8em;
   margin-top: .3em;
   left: 1px;
   position: absolute;
   z-index: 1;
 }
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -2,22 +2,24 @@
  * 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/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 :root {
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-overridden-item-border-color: var(--theme-content-color3);
   --rule-header-background-color: var(--theme-toolbar-background);
+  --rule-pseudo-class-text-color: var(--yellow-70) ;
 }
 
 :root.theme-dark {
   --rule-highlight-background-color: #521C76;
   --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #222225;
+  --rule-pseudo-class-text-color: var(--yellow-50);
 }
 
 /* Rule View Tabpanel */
 
 #sidebar-panel-ruleview {
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -598,18 +600,17 @@
   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 }
 
 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 }
 
 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
-  font-weight: bold;
-  color: var(--theme-highlight-orange);
+  color: var(--rule-pseudo-class-text-color);
 }
 
 .ruleview-selectorhighlighter {
   display: inline-block;
   vertical-align: top;
   width: 15px;
   height: 15px;
   margin-left: 5px;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -235,16 +235,17 @@
 
   --green-50: #30e60b;
   --green-60: #12bc00;
   --green-70: #058b00;
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
   --yellow-65: #be9b00;
+  --yellow-70: #a47f00;
   --yellow-80: #715100;
 
   --grey-10: #f9f9fa;
   --grey-10-a10: rgba(249, 249, 250, 0.1);
   --grey-10-a15: rgba(249, 249, 250, 0.15);
   --grey-10-a20: rgba(249, 249, 250, 0.2);
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;