Bug 1541278 - Markup View's background flash effect: use yellow from Box Model shift-hover highlight. r=mtigley

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

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

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

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

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

@@ -376,7 +376,6 @@ MarkupContainer.prototype = {
 
       line.appendChild(closingTag.cloneNode(true));
 
-      flashElementOff(line);
       this.closeTagLine = line;
     }
     this.elt.appendChild(this.closeTagLine);
@@ -654,13 +653,19 @@ MarkupContainer.prototype = {
    */
   flashMutation: function() {
     if (!this.selected) {
-      flashElementOn(this.tagState, { foregroundElt: this.editor.elt });
+      flashElementOn(this.tagState, {
+        foregroundElt: this.editor.elt,
+        backgroundClass: "theme-bg-yellow-contrast",
+      });
       if (this._flashMutationTimer) {
         clearTimeout(this._flashMutationTimer);
         this._flashMutationTimer = null;
       }
       this._flashMutationTimer = setTimeout(() => {
-        flashElementOff(this.tagState, { foregroundElt: this.editor.elt });
+        flashElementOff(this.tagState, {
+          foregroundElt: this.editor.elt,
+          backgroundClass: "theme-bg-yellow-contrast",
+        });
       }, this.markup.CONTAINER_FLASHING_DURATION);
     }
   },

devtools/client/themes/dark-theme.css

@@ -33,6 +33,10 @@ body {
   background: var(--theme-contrast-background);
 }
 
+.theme-bg-yellow-contrast {
+  background: var(--theme-bg-yellow);
+}
+
 .theme-link,
 .cm-s-mozilla .cm-link,
 .CodeMirror-Tern-type {

devtools/client/themes/light-theme.css

@@ -33,6 +33,10 @@ body {
   background: var(--theme-contrast-background);
 }
 
+.theme-bg-yellow-contrast {
+  background: var(--theme-bg-yellow);
+}
+
 .theme-link,
 .cm-s-mozilla .cm-link,
 .CodeMirror-Tern-type {

devtools/client/themes/markup.css

@@ -9,6 +9,7 @@
   --markup-pseudoclass-disk-color: var(--yellow-60);
   --markup-hidden-tag-color: var(--grey-50);
   --markup-outline: var(--theme-splitter-color);
+  --markup-text-color-contrast: black;
 }
 
 .theme-dark:root {
@@ -17,6 +18,7 @@
   --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);
 }
 
 * {
@@ -289,7 +291,14 @@ ul.children + .tag-line::before {
 }
 
 .flash-out {
-  transition: background .5s;
+  animation: flash-out 1s ease-out;
+}
+
+@keyframes flash-out {
+  from {
+    background: var(--theme-bg-yellow);
+    color: var(--markup-text-color-contrast);
+  }
 }
 
 .editor {
@@ -404,6 +413,14 @@ ul.children + .tag-line::before {
   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);
+}
+
 /* Applicable to the DOCTYPE */
 .doctype {
   font-style: italic;

devtools/client/themes/variables.css

@@ -103,6 +103,9 @@
   --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;
 }
 
 /*
@@ -204,6 +207,9 @@
   --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;
 }
 
 :root {