Bug 1568794 - Consolidate bg-yellow and contrast-background devtools theme variables; r=gl
authorFlorens Verschelde <florens@fvsch.com>
Mon, 30 Sep 2019 17:31:42 +0000
changeset 495706 49d28cc0bf9926d4d553dc747b5fd1a73bbdb21b
parent 495705 4be2a981c307898ac2858db37872044a962d922c
child 495707 75d66006c4a1c6679097fca7ab0d778d780a6001
push id114140
push userdvarga@mozilla.com
push dateWed, 02 Oct 2019 18:04:51 +0000
treeherdermozilla-inbound@32eb0ea893f3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1568794
milestone71.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 1568794 - Consolidate bg-yellow and contrast-background devtools theme variables; r=gl Differential Revision: https://phabricator.services.mozilla.com/D47547
devtools/client/inspector/markup/test/browser_markup_mutation_02.js
devtools/client/inspector/markup/views/element-editor.js
devtools/client/inspector/markup/views/markup-container.js
devtools/client/inspector/rules/rules.js
devtools/client/themes/dark-theme.css
devtools/client/themes/light-theme.css
devtools/client/themes/markup.css
devtools/client/themes/variables.css
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
@@ -155,36 +155,36 @@ add_task(async function() {
     }
   }
 });
 
 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"
   );
 
   // Clear the mutation flashing timeout now that we checked the node was
   // 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) {
   const container = getContainerForNodeFront(nodeFront, inspector);
   ok(container, "Markup container for node found");
   ok(
     container.editor.attrElements.get(attribute),
     "Attribute exists on editor"
   );
 
   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");
 }
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -236,22 +236,22 @@ ElementEditor.prototype = {
   },
 
   flashAttribute: function(attrName) {
     if (this.animationTimers[attrName]) {
       clearTimeout(this.animationTimers[attrName]);
     }
 
     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);
   },
 
   /**
    * Returns information about node in the editor.
    *
    * @param  {DOMNode} node
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -658,26 +658,26 @@ MarkupContainer.prototype = {
   /**
    * Temporarily flash the container to attract attention.
    * Used for markup mutations.
    */
   flashMutation: function() {
     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);
         this._flashMutationTimer = null;
       }
       this._flashMutationTimer = setTimeout(() => {
         flashElementOff(this.tagState, {
           foregroundElt: this.editor.elt,
-          backgroundClass: "theme-bg-yellow-contrast",
+          backgroundClass: "theme-bg-contrast",
         });
       }, this.markup.CONTAINER_FLASHING_DURATION);
     }
   },
 
   _hovered: false,
 
   /**
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1731,27 +1731,27 @@ CssRuleView.prototype = {
   /**
    * Temporarily flash the given element.
    *
    * @param  {Element} element
    *         The element.
    */
   _flashElement(element) {
     flashElementOn(element, {
-      backgroundClass: "theme-bg-yellow-contrast",
+      backgroundClass: "theme-bg-contrast",
     });
 
     if (this._flashMutationTimer) {
       clearTimeout(this._removeFlashOutTimer);
       this._flashMutationTimer = null;
     }
 
     this._flashMutationTimer = setTimeout(() => {
       flashElementOff(element, {
-        backgroundClass: "theme-bg-yellow-contrast",
+        backgroundClass: "theme-bg-contrast",
       });
 
       // Emit "scrolled-to-property" for use by tests.
       this.emit("scrolled-to-element");
     }, PROPERTY_FLASHING_DURATION);
   },
 
   /**
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -22,25 +22,20 @@ body {
 }
 
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   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 {
   color: var(--grey-50);
 }
 
 /*
  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
@@ -157,18 +152,22 @@ body {
 .devtools-sidebar-tabs tabs,
 .devtools-sidebar-alltabs,
 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
   color: var(--theme-body-color);
   background-color: var(--theme-toolbar-background);
   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,
 .computed-colorswatch {
   box-shadow: 0 0 0 1px #818181;
 }
 
 /* CodeMirror specific styles.
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -22,25 +22,20 @@ body {
 }
 
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   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 {
   color: var(--theme-comment);
 }
 
 /*
  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
@@ -144,30 +139,34 @@ body {
 .CodeMirror-Tern-completion-bool:before {
   background-color: #bf5656;
 }
 
 .variable-or-property .token-domnode {
   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,
 .devtools-sidebar-alltabs,
 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
   color: var(--theme-body-color);
   background-color: var(--theme-toolbar-background);
   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;
 }
 
 /* CodeMirror specific styles.
  * Best effort to match the existing theme, some of the colors
  * are duplicated here to prevent weirdness in the main theme. */
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -4,26 +4,28 @@
 
 :root {
   --markup-hidden-attr-name-color: var(--grey-43);
   --markup-hidden-attr-value-color: var(--grey-55);
   --markup-hidden-punctuation-color: var(--grey-43);
   --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 {
   --markup-hidden-attr-name-color: #787878;
   --markup-hidden-attr-value-color: #a4a4a4;
   --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);
 }
 
 * {
   padding: 0;
   margin: 0;
 }
 
 :root {
@@ -130,21 +132,21 @@ body.dragging .tag-line {
 .tag-line.drag-target::before {
   content: "";
   position: absolute;
   top: -1px;
   height: 2px;
   /* 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
  * will become misleading, so we push it forward to match the indentation level */
 ul.children + .tag-line::before {
   margin-left: 14px;
 }
 
@@ -432,17 +434,17 @@ ul.children + .tag-line::before {
 .theme-selected ~ .editor .theme-fg-color2,
 .theme-selected ~ .editor .theme-fg-color3 {
   color: var(--theme-selection-color);
 }
 
 /* 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 */
 .doctype {
   font-style: italic;
 }
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -98,17 +98,16 @@
   --grey-90-a15: rgba(12, 12, 13, 0.15);
   --grey-90-a20: rgba(12, 12, 13, 0.2);
   --grey-90-a30: rgba(12, 12, 13, 0.3);
 }
 
 :root.theme-light {
   --theme-body-background: white;
   --theme-sidebar-background: white;
-  --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-color: var(--grey-90);
   --theme-toolbar-selected-color: var(--blue-60);
   --theme-toolbar-highlighted-color: var(--green-60);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
@@ -192,38 +191,38 @@
   --theme-toolbarbutton-hover-background: var(--grey-90-a05);
   --theme-toolbarbutton-checked-background: var(--grey-90-a10);
   --theme-toolbarbutton-checked-color: var(--grey-90);
   --theme-toolbarbutton-checked-hover-background: var(--grey-90-a15);
   --theme-toolbarbutton-checked-hover-color: var(--grey-90);
   --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;
 }
 
 /*
  * For doorhangers elsewhere in Firefox, Mac uses fixed colors rather than
  * system colors.
  */
 :root[platform="mac"].theme-light {
   --theme-popup-color: hsl(0, 0%, 10%);
   --theme-popup-border-color: var(--grey-90-a20);
 }
 
 :root.theme-dark {
   --theme-body-background: #232327;
   --theme-sidebar-background: #18181a;
-  --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
   --theme-toolbar-background: #18181a;
   --theme-toolbar-color: var(--grey-40);
   --theme-toolbar-selected-color: white;
   --theme-toolbar-highlighted-color: var(--green-50);
   --theme-toolbar-background-hover: #232327;
@@ -307,16 +306,17 @@
   --theme-toolbarbutton-hover-background: var(--grey-10-a15);
   --theme-toolbarbutton-checked-background: var(--grey-10-a20);
   --theme-toolbarbutton-checked-color: var(--grey-30);
   --theme-toolbarbutton-checked-hover-background: var(--grey-10-a25);
   --theme-toolbarbutton-checked-hover-color: var(--grey-30);
   --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;
 }