Bug 1511455 - Draw the flex item outline's min point at correct position when set to grow. r=gl
authorMicah Tigley <mtigley@mozilla.com>
Wed, 02 Jan 2019 22:11:32 +0000
changeset 509459 00466e6699d7e72f3086a6579265cdaf62802fac
parent 509458 24dc3e24fd89107e21f78cab5d5678624c69fb8e
child 509460 7500e3ad817a91f000d3a249fe9bf42841f4f4b6
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1511455
milestone66.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 1511455 - Draw the flex item outline's min point at correct position when set to grow. r=gl Differential Revision: https://phabricator.services.mozilla.com/D14349
devtools/client/themes/layout.css
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -453,20 +453,22 @@ html[dir="rtl"] .flex-item-list .devtool
   grid-column-end: final-end;
   grid-column-start: unset;
   justify-self: end;
 }
 
 .flex-outline-point.min {
   grid-column: min;
   place-self: end;
+  left: -4px;
 }
 
 .flex-outline.shrinking .flex-outline-point.min {
   place-self: end start;
+  left: -1px;
 }
 
 .flex-outline-point.max {
   grid-column: max;
   align-self: end;
   left: -1px;
 }
 
@@ -508,40 +510,41 @@ html[dir="rtl"] .flex-item-list .devtool
 .flex-outline.vertical-tb .flex-outline-point.max::before,
 .flex-outline.vertical-tb .flex-outline-point.min::before,
 .flex-outline.vertical-bt .flex-outline-point.max::before,
 .flex-outline.vertical-bt .flex-outline-point.min::before {
   text-indent: -12px;
 }
 
 .flex-outline-point.final::before,
-.flex-outline.shrinking .flex-outline-point.min::before,
+.flex-outline-point.min::before,
 .flex-outline-point.max::before,
 .flex-outline.shrinking .flex-outline-point.basis::before,
 .flex-outline.horizontal-rl .flex-outline-point.basis::before,
 .flex-outline.horizontal-rl .flex-outline-point.basisfinal::before,
 .flex-outline.horizontal-rl.shrinking .flex-outline-point.final::before,
 .flex-outline.vertical-bt .flex-outline-point.basis::before,
 .flex-outline.vertical-bt .flex-outline-point.basisfinal::before,
 .flex-outline.vertical-bt.shrinking .flex-outline-point.final::before {
-  border-width: 0 0 0 1px;
+  border-left-width: 1px;
+  border-right-width: 0;
 }
 
 .flex-outline-point.basis::before,
-.flex-outline-point.min::before,
 .flex-outline.shrinking .flex-outline-point.final::before,
 .flex-outline-point.basisfinal::before,
 .flex-outline.horizontal-rl .flex-outline-point.final::before,
 .flex-outline.horizontal-rl .flex-outline-point.min::before,
 .flex-outline.horizontal-rl .flex-outline-point.max::before,
 .flex-outline.vertical-bt.shrinking .flex-outline-point.basis::before,
 .flex-outline.vertical-bt .flex-outline-point.final::before,
 .flex-outline.vertical-bt .flex-outline-point.min::before,
 .flex-outline.vertical-bt .flex-outline-point.max::before {
-  border-width: 0 1px 0 0;
+  border-right-width: 1px;
+  border-left-width: 0;
 }
 
 .flex-outline.horizontal-rl,
 .flex-outline.horizontal-rl .flex-outline-point,
 .flex-outline.horizontal-rl .flex-outline-final.clamped::after {
   transform: rotate(.5turn);
 }