Bug 1498487 - Flex item outline design changes; r=gl
authorPatrick Brosset <pbrosset@mozilla.com>
Sun, 14 Oct 2018 19:24:38 +0000
changeset 496905 202887e7c361b76d8d3c6f5cb261e71042200ad1
parent 496904 45299a26e20a51f8b616a97024f6204d4210ecd1
child 496906 1feb8b3f06e7f93d1cd67d59011074add931b086
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [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/jar.mn
devtools/client/themes/layout.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -102,17 +102,16 @@ devtools.jar:
     skin/dark-theme.css (themes/dark-theme.css)
     skin/light-theme.css (themes/light-theme.css)
     skin/toolbars.css (themes/toolbars.css)
     skin/toolbox.css (themes/toolbox.css)
     skin/tooltips.css (themes/tooltips.css)
     skin/images/accessibility.svg (themes/images/accessibility.svg)
     skin/images/add.svg (themes/images/add.svg)
     skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg)
-    skin/images/arrowhead-right.svg (themes/images/arrowhead-right.svg)
     skin/images/arrowhead-down.svg (themes/images/arrowhead-down.svg)
     skin/images/arrowhead-up.svg (themes/images/arrowhead-up.svg)
     skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
     skin/images/filters.svg (themes/images/filters.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
     skin/images/aboutdebugging-collapse-icon.svg (themes/images/aboutdebugging-collapse-icon.svg)
     skin/images/aboutdebugging-connect-icon.svg (themes/images/aboutdebugging-connect-icon.svg)
     skin/images/aboutdebugging-firefox-aurora.svg (themes/images/aboutdebugging-firefox-aurora.svg)
--- 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 {