Bug 1519537 - layout flex inspector - change min/max color in diagram and info chart. r=mtigley
authorThomas <tgerard79@yahoo.fr>
Wed, 12 Jun 2019 19:53:34 +0000
changeset 478535 bdafcae04e4351703ffb023acbc5695fc10c820f
parent 478534 ac23e28181bb10d0de67d8a960456ff5d8307346
child 478536 6206d686e569c29a22135102ec10c61ce01b5327
push id87750
push usermtigley@mozilla.com
push dateWed, 12 Jun 2019 19:56:54 +0000
treeherderautoland@bdafcae04e43 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1519537
milestone69.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 1519537 - layout flex inspector - change min/max color in diagram and info chart. r=mtigley In the layout panel of the inspector, in the flex part, change color of min and max properties. Change the min/max labels, and lock icon color of the flex outline box to the same color too. Differential Revision: https://phabricator.services.mozilla.com/D33835
devtools/client/themes/layout.css
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -2,23 +2,25 @@
  * 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;
+  --flex-min-max-properties-color: var(--purple-60);
 }
 
 :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;
+  --flex-min-max-properties-color: var(--theme-highlight-purple);
 }
 
 .layout-container {
   height: 100%;
   width: 100%;
   overflow-y: auto;
   overflow-x: auto;
   min-width: 200px;
@@ -312,17 +314,17 @@ html[dir="rtl"] .flex-item-list .devtool
 }
 
 .flex-outline-final.clamped::after {
   content: "";
   background-image: url(chrome://devtools/skin/images/lock.svg);
   background-size: 16px;
   background-repeat: no-repeat;
   background-position: center 1px;
-  fill: currentColor;
+  fill: var(--flex-min-max-properties-color);
   -moz-context-properties: fill;
   width: 20px;
   height: 20px;
   position: absolute;
   right: -10px;
   top: 6px;
   /* Making sure the icon is visible against any background by creating a plain background
      around its shape, using a drop-shadow filter. */
@@ -454,16 +456,21 @@ html[dir="rtl"] .flex-item-list .devtool
 }
 
 .flex-outline.shrinking .flex-outline-point.final {
   grid-column-end: final-end;
   grid-column-start: unset;
   justify-self: end;
 }
 
+.flex-outline-point.min,
+.flex-outline-point.max {
+  color: var(--flex-min-max-properties-color);
+}
+
 .flex-outline-point.min {
   grid-column: min;
   place-self: end;
   left: -4px;
 }
 
 .flex-outline.shrinking .flex-outline-point.min {
   place-self: end start;
@@ -579,26 +586,29 @@ html[dir="rtl"] .flex-item-list .devtool
 .flex-item-sizing .name {
   font-weight: 600;
   grid-column: 1;
   display: grid;
   grid-template-columns: max-content max-content;
   gap: .5em;
 }
 
-.flex-item-sizing .flexibility .name,
-.flex-item-sizing .max .name,
-.flex-item-sizing .min .name {
+.flex-item-sizing .flexibility .name {
   color: var(--theme-highlight-red);
 }
 
 .flex-item-sizing .base .name {
   color: var(--theme-highlight-blue);
 }
 
+.flex-item-sizing .min .name,
+.flex-item-sizing .max .name {
+  color: var(--flex-min-max-properties-color);
+}
+
 .flex-item-sizing .value {
   text-align: end;
   font-weight: 600;
   direction: ltr;
 }
 
 .flex-item-sizing .value .unit {
   color: var(--theme-comment);