Bug 1568794 - Consolidate bg-yellow and contrast-background devtools theme variables; r=gl

Differential Revision: https://phabricator.services.mozilla.com/D47547

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/markup/test/browser_markup_mutation_02.js

@@ -160,7 +160,7 @@ function assertNodeFlashing(nodeFront, inspector) {
   const container = getContainerForNodeFront(nodeFront, inspector);
   ok(container, "Markup container for node found");
   ok(
-    container.tagState.classList.contains("theme-bg-yellow-contrast"),
+    container.tagState.classList.contains("theme-bg-contrast"),
     "Markup container for node is flashing"
   );
 
@@ -168,7 +168,7 @@ function assertNodeFlashing(nodeFront, inspector) {
   // flashing.
   clearTimeout(container._flashMutationTimer);
   container._flashMutationTimer = null;
-  container.tagState.classList.remove("theme-bg-yellow-contrast");
+  container.tagState.classList.remove("theme-bg-contrast");
 }
 
 function assertAttributeFlashing(nodeFront, attribute, inspector) {
@@ -182,9 +182,9 @@ function assertAttributeFlashing(nodeFront, attribute, inspector) {
   const attributeElement = container.editor.getAttributeElement(attribute);
 
   ok(
-    attributeElement.classList.contains("theme-bg-yellow-contrast"),
+    attributeElement.classList.contains("theme-bg-contrast"),
     "Element for " + attribute + " attribute is flashing"
   );
 
-  attributeElement.classList.remove("theme-bg-yellow-contrast");
+  attributeElement.classList.remove("theme-bg-contrast");
 }

devtools/client/inspector/markup/views/element-editor.js

@@ -241,12 +241,12 @@ ElementEditor.prototype = {
     }
 
     flashElementOn(this.getAttributeElement(attrName), {
-      backgroundClass: "theme-bg-yellow-contrast",
+      backgroundClass: "theme-bg-contrast",
     });
 
     this.animationTimers[attrName] = setTimeout(() => {
       flashElementOff(this.getAttributeElement(attrName), {
-        backgroundClass: "theme-bg-yellow-contrast",
+        backgroundClass: "theme-bg-contrast",
       });
     }, this.markup.CONTAINER_FLASHING_DURATION);
   },

devtools/client/inspector/markup/views/markup-container.js

@@ -663,7 +663,7 @@ MarkupContainer.prototype = {
     if (!this.selected) {
       flashElementOn(this.tagState, {
         foregroundElt: this.editor.elt,
-        backgroundClass: "theme-bg-yellow-contrast",
+        backgroundClass: "theme-bg-contrast",
       });
       if (this._flashMutationTimer) {
         clearTimeout(this._flashMutationTimer);
@@ -672,7 +672,7 @@ MarkupContainer.prototype = {
       this._flashMutationTimer = setTimeout(() => {
         flashElementOff(this.tagState, {
           foregroundElt: this.editor.elt,
-          backgroundClass: "theme-bg-yellow-contrast",
+          backgroundClass: "theme-bg-contrast",
         });
       }, this.markup.CONTAINER_FLASHING_DURATION);
     }

devtools/client/inspector/rules/rules.js

@@ -1736,7 +1736,7 @@ CssRuleView.prototype = {
    */
   _flashElement(element) {
     flashElementOn(element, {
-      backgroundClass: "theme-bg-yellow-contrast",
+      backgroundClass: "theme-bg-contrast",
     });
 
     if (this._flashMutationTimer) {
@@ -1746,7 +1746,7 @@ CssRuleView.prototype = {
 
     this._flashMutationTimer = setTimeout(() => {
       flashElementOff(element, {
-        backgroundClass: "theme-bg-yellow-contrast",
+        backgroundClass: "theme-bg-contrast",
       });
 
       // Emit "scrolled-to-property" for use by tests.

devtools/client/themes/dark-theme.css

@@ -27,15 +27,10 @@ body {
   color: var(--theme-selection-color);
 }
 
-.theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
   background: var(--theme-contrast-background);
 }
 
-.theme-bg-yellow-contrast {
-  background: var(--theme-bg-yellow);
-}
-
 .theme-link,
 .cm-s-mozilla .cm-link,
 .CodeMirror-Tern-type {
@@ -162,8 +157,12 @@ body {
   border-color: var(--theme-splitter-color);
 }
 
-.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
-  color: black;
+.theme-bg-contrast {
+  background: var(--theme-contrast-background);
+}
+
+.theme-fg-contrast {
+  color: var(--theme-contrast-color);
 }
 
 .ruleview-swatch,

devtools/client/themes/light-theme.css

@@ -27,15 +27,10 @@ body {
   color: var(--theme-selection-color);
 }
 
-.theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
   background: var(--theme-contrast-background);
 }
 
-.theme-bg-yellow-contrast {
-  background: var(--theme-bg-yellow);
-}
-
 .theme-link,
 .cm-s-mozilla .cm-link,
 .CodeMirror-Tern-type {
@@ -149,10 +144,6 @@ body {
   font-weight: bold;
 }
 
-.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
-  color: black;
-}
-
 .theme-toolbar,
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs,
@@ -163,6 +154,14 @@ body {
   border-color: var(--theme-splitter-color);
 }
 
+.theme-bg-contrast {
+  background: var(--theme-contrast-background);
+}
+
+.theme-fg-contrast {
+  color: var(--theme-contrast-color);
+}
+
 .ruleview-swatch,
 .computed-colorswatch {
   box-shadow: 0 0 0 1px #c4c4c4;

devtools/client/themes/markup.css

@@ -9,7 +9,8 @@
   --markup-pseudoclass-disk-color: #e9c600;
   --markup-hidden-tag-color: var(--grey-50);
   --markup-outline: var(--theme-splitter-color);
-  --markup-text-color-contrast: black;
+  --markup-drag-line: var(--grey-40);
+  --markup-drop-line: var(--blue-55);
 }
 
 .theme-dark:root {
@@ -18,7 +19,8 @@
   --markup-hidden-punctuation-color: #787878;
   --markup-hidden-tag-color: var(--grey-45);
   --markup-outline: var(--theme-selection-background);
-  --markup-text-color-contrast: var(--theme-selection-color);
+  --markup-drag-line: var(--grey-55);
+  --markup-drop-line: var(--blue-50);
 }
 
 * {
@@ -135,11 +137,11 @@ body.dragging .tag-line {
   /* Offset these by 1000px to make sure they cover the full width of the view */
   width: calc(100% + 1000px);
   left: -1000px;
-  background-color: var(--theme-body-color);
+  background-color: var(--markup-drag-line);
 }
 
 .tag-line.drop-target::before {
-  background-color: var(--theme-contrast-background);
+  background-color: var(--markup-drop-line);
 }
 
 /* In case the indicator is put on the closing .tag-line, the indentation level
@@ -437,9 +439,9 @@ ul.children + .tag-line::before {
 /* Selected nodes being flashed in the tree should have dark selected text. Here we target
    nodes with theme-selected text colors and apply a dark, accessible text color for when
    the yellow flashing background is applied. */
-.theme-selected.theme-bg-yellow-contrast ~ .editor,
-.theme-selected ~ .editor [class*="theme-fg-color"].theme-fg-contrast {
-  color: var(--markup-text-color-contrast);
+.theme-selected.theme-bg-contrast ~ .editor,
+.theme-selected ~ .editor .theme-fg-contrast {
+  color: var(--theme-contrast-color);
 }
 
 /* Applicable to the DOCTYPE */

devtools/client/themes/variables.css

@@ -103,7 +103,6 @@
 :root.theme-light {
   --theme-body-background: white;
   --theme-sidebar-background: white;
-  --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
@@ -197,13 +196,14 @@
   --theme-toolbarbutton-active-background: var(--grey-90-a20);
   --theme-toolbarbutton-active-color: var(--grey-90);
 
-  /* Element Flash background color */
-  --theme-bg-yellow: #fff697;
-
   /* Warning colors */
   --theme-warning-background: hsl(54, 100%, 92%);
   --theme-warning-border: rgba(215, 182, 0, 0.28); /* Yellow 60 + opacity */
   --theme-warning-color: var(--yellow-80);
+
+  /* Flashing colors used to highlight updates */
+  --theme-contrast-background: #fff697;
+  --theme-contrast-color: black;
 }
 
 /*
@@ -218,7 +218,6 @@
 :root.theme-dark {
   --theme-body-background: #232327;
   --theme-sidebar-background: #18181a;
-  --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
@@ -312,11 +311,12 @@
   --theme-toolbarbutton-active-background: var(--grey-10-a30);
   --theme-toolbarbutton-active-color: var(--grey-30);
 
-  /* Element Flash background color */
-  --theme-bg-yellow: #605913;
-
   /* Warning colors */
   --theme-warning-background: hsl(42, 37%, 19%);
   --theme-warning-border: hsl(60, 30%, 26%);
   --theme-warning-color: hsl(43, 94%, 81%);
+
+  /* Flashing colors used to highlight updates */
+  --theme-contrast-background: #605913; /* slightly desaturated Yellow 80 */
+  --theme-contrast-color: white;
 }