From 85e7888e4d0b053d80600abe720a964014ab8457 Mon Sep 17 00:00:00 2001 From: Micah Tigley Date: Thu, 29 Nov 2018 20:33:05 +0000 Subject: [PATCH] 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 --- .../components/FlexItemSizingOutline.js | 13 +---- .../inspector/flexbox/components/Flexbox.js | 4 -- devtools/client/themes/layout.css | 50 ++++++++++++++++--- 3 files changed, 44 insertions(+), 23 deletions(-) diff --git a/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js b/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js index 92aa09930e88..c6c540a984cb 100644 --- a/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js +++ b/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, }, }, diff --git a/devtools/client/inspector/flexbox/components/Flexbox.js b/devtools/client/inspector/flexbox/components/Flexbox.js index f71705f80744..ddc590964e64 100644 --- a/devtools/client/inspector/flexbox/components/Flexbox.js +++ b/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, }), diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index 7449169fc176..41dd1519b3bc 100644 --- a/devtools/client/themes/layout.css +++ b/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 {