Bug 1508404 - Style flex outline to match new colour scheme. r=gl
authorMicah Tigley <mtigley@mozilla.com>
Thu, 29 Nov 2018 20:33:05 +0000
changeset 508069 88f8e61c7b04acfb705448f02851b0c17ca470db
parent 508068 982d3f5bc88baf588df2ed03c8a7f6f34b3b4a74
child 508070 f1b7c5e6291eaf4e44bef5c1385e09c0c096ae64
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1508404
milestone65.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 1508404 - Style flex outline to match new colour scheme. r=gl Differential Revision: https://phabricator.services.mozilla.com/D13292
devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
devtools/client/inspector/flexbox/components/Flexbox.js
devtools/client/themes/layout.css
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
@@ -2,60 +2,50 @@
  * 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/. */
 
 "use strict";
 
 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,
     };
   }
 
   renderBasisOutline(mainBaseSize) {
     return (
       dom.div({
         className: "flex-outline-basis" + (!mainBaseSize ? " zero-basis" : ""),
-        style: {
-          color: colorUtils.setAlpha(this.props.color, 0.4),
-        },
       })
     );
   }
 
   renderDeltaOutline(mainDeltaSize) {
     if (!mainDeltaSize) {
       return null;
     }
 
     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" : "") })
     );
   }
 
   renderPoint(className, label = className) {
     return dom.div({ className: `flex-outline-point ${className}`, "data-label": label });
   }
 
   render() {
@@ -151,17 +141,16 @@ class FlexItemSizingOutline extends Pure
     return (
       dom.div({ className: "flex-outline-container" },
         dom.div(
           {
             className: "flex-outline" +
                        (isRow ? " row" : " column") +
                        (mainDeltaSize > 0 ? " growing" : " shrinking"),
             style: {
-              color: this.props.color,
               gridTemplateColumns,
             },
           },
           renderedBaseAndFinalPoints,
           showMin ? this.renderPoint("min") : null,
           showMax ? this.renderPoint("max") : null,
           this.renderBasisOutline(mainBaseSize),
           this.renderDeltaOutline(mainDeltaSize),
--- a/devtools/client/inspector/flexbox/components/Flexbox.js
+++ b/devtools/client/inspector/flexbox/components/Flexbox.js
@@ -59,32 +59,28 @@ class Flexbox extends PureComponent {
       onShowBoxModelHighlighterForNode,
       scrollToTop,
       setSelectedNode,
     });
   }
 
   renderFlexItemSizing() {
     const {
-      color,
-    } = this.props.flexbox;
-    const {
       flexItems,
       flexItemShown,
       properties,
     } = this.props.flexContainer;
 
     const flexItem = flexItems.find(item => item.nodeFront.actorID === flexItemShown);
     if (!flexItem) {
       return null;
     }
 
     return createElement(Fragment, null,
       FlexItemSizingOutline({
-        color,
         flexDirection: properties["flex-direction"],
         flexItem,
       }),
       FlexItemSizingProperties({
         flexDirection: properties["flex-direction"],
         flexItem,
       })
     );
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -1,12 +1,26 @@
 /* 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 {
+  --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%;
   overflow-y: auto;
   overflow-x: auto;
   min-width: 200px;
 }
 
@@ -307,50 +321,71 @@ html[dir="rtl"] .flex-item-list .devtool
     drop-shadow(0px -1px 0px var(--theme-body-background));
 }
 
 .flex-outline.column .flex-outline-final.clamped::after {
   transform: rotate(-.25turn);
 }
 
 .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;
   left: 2px;
   right: 2px;
   top: calc(50% - .5px);
   height: 1px;
-  background: currentColor;
+  background: var(--theme-highlight-red);
 }
 
 .flex-outline-delta::after {
   content: "";
   position: absolute;
   width: 5px;
   height: 5px;
   top: 50%;
-  border: 1px solid currentColor;
+  border: 1px solid var(--theme-highlight-red);
 }
 
 .flex-outline.growing .flex-outline-delta:after {
   right: 2px;
   border-width: 1px 1px 0 0;
   transform-origin: top right;
   transform: rotate(.125turn);
 }
@@ -368,16 +403,17 @@ html[dir="rtl"] .flex-item-list .devtool
   grid-row: 1;
   display: grid;
 }
 
 .flex-outline-point.basis,
 .flex-outline-point.basisfinal {
   grid-column-end: basis-end;
   justify-self: end;
+  color: var(--theme-highlight-blue);
 }
 
 .flex-outline.shrinking .flex-outline-point.basis {
   grid-column-start: basis-end;
   justify-self: start;
 }
 
 .flex-outline-point.final {