Bug 1508404 - Style flex outline to match new colour scheme. r=gl

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

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

devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js

@@ -7,14 +7,12 @@
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { colorUtils } = require("devtools/shared/css/color");
 
 const Types = require("../types");
 
 class FlexItemSizingOutline extends PureComponent {
   static get propTypes() {
     return {
-      color: PropTypes.string.isRequired,
       flexDirection: PropTypes.string.isRequired,
       flexItem: PropTypes.shape(Types.flexItem).isRequired,
     };
@@ -24,9 +22,6 @@ class FlexItemSizingOutline extends PureComponent {
     return (
       dom.div({
         className: "flex-outline-basis" + (!mainBaseSize ? " zero-basis" : ""),
-        style: {
-          color: colorUtils.setAlpha(this.props.color, 0.4),
-        },
       })
     );
   }
@@ -39,18 +34,13 @@ class FlexItemSizingOutline extends PureComponent {
     return (
       dom.div({
         className: "flex-outline-delta",
-        style: {
-          backgroundColor: colorUtils.setAlpha(this.props.color, 0.1),
-        },
       })
     );
   }
 
   renderFinalOutline(mainFinalSize, mainMaxSize, mainMinSize, isClamped) {
     return (
-      dom.div({
-        className: "flex-outline-final" + (isClamped ? " clamped" : ""),
-      })
+      dom.div({ className: "flex-outline-final" + (isClamped ? " clamped" : "") })
     );
   }
 
@@ -156,7 +146,6 @@ class FlexItemSizingOutline extends PureComponent {
                        (isRow ? " row" : " column") +
                        (mainDeltaSize > 0 ? " growing" : " shrinking"),
             style: {
-              color: this.props.color,
               gridTemplateColumns,
             },
           },

devtools/client/inspector/flexbox/components/Flexbox.js

@@ -63,9 +63,6 @@ class Flexbox extends PureComponent {
   }
 
   renderFlexItemSizing() {
-    const {
-      color,
-    } = this.props.flexbox;
     const {
       flexItems,
       flexItemShown,
@@ -79,7 +76,6 @@ class Flexbox extends PureComponent {
 
     return createElement(Fragment, null,
       FlexItemSizingOutline({
-        color,
         flexDirection: properties["flex-direction"],
         flexItem,
       }),

devtools/client/themes/layout.css

@@ -2,6 +2,20 @@
  * 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 {
+  --flex-basis-outline-border-color: var(--blue-40);
+  --flex-basis-outline-background-color: rgba(69, 161, 255, 0.25);
+  --flex-growing-delta-outline-background-color: rgba(221, 0, 169, 0.13);
+  --flex-shrinking-delta-outline-background-color: #E9E3FF;
+}
+
+:root.theme-dark {
+  --flex-basis-outline-border-color: rgba(10, 132, 255, 0.85);
+  --flex-basis-outline-background-color: rgba(10, 132, 255, 0.3);
+  --flex-growing-delta-outline-background-color: rgba(255, 26, 217, 0.25);
+  --flex-shrinking-delta-outline-background-color: #322952;
+}
+
 .layout-container {
   height: 100%;
   width: 100%;
@@ -312,23 +326,44 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
 }
 
 .flex-outline-basis {
-  border-style: dotted;
-  border-width: 3px;
-  margin: 1px;
+  position: relative;
+  border: 3px dotted var(--flex-basis-outline-border-color);
+  margin: 2px;
   grid-column: basis-start / basis-end;
 }
 
+/* Fills the basis outline with a blue background color that is contained inside the
+   dotted border. This gives the impression the dotted border alternates between
+   white and blue. */
+.flex-outline-basis::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--flex-basis-outline-background-color);
+}
+
 .flex-outline-basis.zero-basis {
   border-width: 0 0 0 3px;
 }
 
 .flex-outline-delta {
   grid-column: delta-start / delta-end;
-  margin: 3px 0;
-  opacity: .5;
   position: relative;
 }
 
+.flex-outline.growing .flex-outline-delta {
+  background-color: var(--flex-growing-delta-outline-background-color);
+  right: 2px;
+}
+
+.flex-outline.shrinking .flex-outline-delta {
+  background-color: var(--flex-shrinking-delta-outline-background-color);
+  margin: 5px 5px 5px 0px;
+}
+
 .flex-outline-delta::before {
   content: "";
   position: absolute;
@@ -336,7 +371,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
   right: 2px;
   top: calc(50% - .5px);
   height: 1px;
-  background: currentColor;
+  background: var(--theme-highlight-red);
 }
 
 .flex-outline-delta::after {
@@ -345,7 +380,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
   width: 5px;
   height: 5px;
   top: 50%;
-  border: 1px solid currentColor;
+  border: 1px solid var(--theme-highlight-red);
 }
 
 .flex-outline.growing .flex-outline-delta:after {
@@ -373,6 +408,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
 .flex-outline-point.basisfinal {
   grid-column-end: basis-end;
   justify-self: end;
+  color: var(--theme-highlight-blue);
 }
 
 .flex-outline.shrinking .flex-outline-point.basis {