Bug 1498487 - Flex item outline design changes; r=gl
☠☠ backed out by 88e822bc1ea5 ☠ ☠
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 12 Oct 2018 13:45:14 +0000
changeset 499326 5b5ed02f86c785f0b78999f8ca94baf057eaf799
parent 499325 59b46598511704177bebd3e82504908655ebe5f1
child 499327 94ccc53c61a75edd4c218d70ab37b69e25b452df
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1498487
milestone64.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 1498487 - Flex item outline design changes; r=gl - Made the border for the final size thicker - Made the delta area more transparent - Removed the arrow-head pattern for the delta area - Added a thin horizontal arrow instead - Removed the background circle around the lock icon - Added a non-blurry shadow area around it instead The mockup also called for adding a new label for "grow". I did not implement this yet, because this will require more work that can be done in a separate bug. We also need to decide what happens if there isn't enough room to display it. Differential Revision: https://phabricator.services.mozilla.com/D8520
devtools/client/themes/layout.css
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -212,67 +212,96 @@
 
 .flex-outline-final,
 .flex-outline-basis,
 .flex-outline-delta {
   grid-row: 1;
 }
 
 .flex-outline-final {
-  border: 1px solid currentColor;
+  border: 2px solid currentColor;
   position: relative;
   grid-column: final-start / final-end;
 }
 
 .flex-outline-final.clamped::after {
   content: "";
-  background-color: var(--theme-body-background);
   background-image: url(chrome://devtools/skin/images/lock.svg);
   background-size: 16px;
   background-repeat: no-repeat;
   background-position: center 1px;
   fill: currentColor;
   -moz-context-properties: fill;
   width: 20px;
   height: 20px;
   position: absolute;
   right: -10px;
   top: 6px;
-  border-radius: 50%;
+  /* Making sure the icon is visible against any background by creating a plain background
+     around its shape, using a drop-shadow filter. */
+  filter:
+    drop-shadow(1px 0px 0px var(--theme-body-background))
+    drop-shadow(0px 1px 0px var(--theme-body-background))
+    drop-shadow(-1px 0px 0px var(--theme-body-background))
+    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 0;
+  margin: 1px;
   grid-column: basis-start / basis-end;
 }
 
 .flex-outline-basis.zero-basis {
   border-width: 0 0 0 3px;
 }
 
 .flex-outline-delta {
-  background-repeat: round;
-  fill: currentColor;
-  -moz-context-properties: fill;
   grid-column: delta-start / delta-end;
-  margin: 4px;
+  margin: 3px 0;
+  opacity: .5;
+  position: relative;
+}
+
+.flex-outline-delta::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: calc(50% - .5px);
+  height: 1px;
+  background: currentColor;
 }
 
-.flex-outline.growing .flex-outline-delta {
-  background-image: url(chrome://devtools/skin/images/arrowhead-right.svg);
+.flex-outline-delta::after {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  top: 50%;
+  border: 1px solid currentColor;
 }
 
-.flex-outline.shrinking .flex-outline-delta {
-  background-image: url(chrome://devtools/skin/images/arrowhead-left.svg);
+.flex-outline.growing .flex-outline-delta:after {
+  right: 2px;
+  border-width: 1px 1px 0 0;
+  transform-origin: top right;
+  transform: rotate(.125turn);
+}
+
+.flex-outline.shrinking .flex-outline-delta:after {
+  left: 2px;
+  border-width: 1px 0 0 1px;
+  transform-origin: top left;
+  transform: rotate(-.125turn);
 }
 
 .flex-outline-point {
   position: relative;
   -moz-user-select: none;
 }
 
 .flex-outline-point {