Bug 1504859 - Stop assuming that basis+delta is always positive in the flex minimap; r=gl

Previously, we would always hard-code the basis-start and final-start line names first in
the grid column template used to display the minimap.
Because there may be cases where base+delta is actually negative, we cannot do that anymore.
This fixes that by removing this hard-coding and sorting the entire array of sizes before
generating the grid column template.
The test that I added is only a few lines, but to make it simpler to write, I had to
merge doc_flexbox_simple.html and doc_flexbox_specific_cases.html, which is why you are
seeing several test changed here.
Also, to make sure the test case I added would behave the same across platforms, I used the
Ahem font, which is often use in Layout tests as it only has 1 glyph that's exactly the size
of the font-size.

Differential Revision: https://phabricator.services.mozilla.com/D11175

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js

@@ -89,13 +89,17 @@ class FlexItemSizingOutline extends PureComponent {
     // TODO: We might also want to check if the min-size property is defined.
     const showMin = clampState === "clamped_to_min";
 
-    // Sort all of the dimensions in order to come up with a grid track template.
+    // Create an array of all of the sizes we want to display that we can use to create
-    // Make mainDeltaSize start from the same point as the other ones so we can compare.
+    // a grid track template.
     let sizes = [
+      { name: "basis-start", size: 0 },
       { name: "basis-end", size: mainBaseSize },
+      { name: "final-start", size: 0 },
       { name: "final-end", size: mainFinalSize },
     ];
 
+    // Because mainDeltaSize is just a delta from base, make sure to make it absolute like
+    // the other sizes in the array, so we can later sort all sizes in the same way.
     if (mainDeltaSize > 0) {
       sizes.push({ name: "delta-start", size: mainBaseSize });
       sizes.push({ name: "delta-end", size: mainBaseSize + mainDeltaSize });
@@ -111,9 +115,16 @@ class FlexItemSizingOutline extends PureComponent {
       sizes.push({ name: "min", size: mainMinSize });
     }
 
+    // Sort all of the dimensions so we can create the grid track template correctly.
     sizes = sizes.sort((a, b) => a.size - b.size);
 
-    let gridTemplateColumns = "[final-start basis-start";
+    // In some cases, the delta-start may be negative (when an item wanted to shrink more
+    // than the item's base size). As a negative value would break the grid track template
+    // offset all values so they're all positive.
+    const offsetBy = sizes.reduce((acc, curr) => curr.size < acc ? curr.size : acc, 0);
+    sizes = sizes.map(entry => ({ size: entry.size - offsetBy, name: entry.name }));
+
+    let gridTemplateColumns = "[";
     let accumulatedSize = 0;
     for (const { name, size } of sizes) {
       const breadth = Math.round(size - accumulatedSize);

devtools/client/inspector/flexbox/test/browser.ini

@@ -2,8 +2,8 @@
 tags = devtools
 subsuite = devtools
 support-files =
+  Ahem.ttf
   doc_flexbox_pseudos.html
-  doc_flexbox_simple.html
   doc_flexbox_specific_cases.html
   doc_flexbox_text_nodes.html
   doc_flexbox_unauthored_min_dimension.html

devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_ESC.js

@@ -6,7 +6,7 @@
 // Test that the flexbox highlighter color change in the color picker is reverted when
 // ESCAPE is pressed.
 
-const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
 
 add_task(async function() {
   await addTab(TEST_URI);

devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js

@@ -6,7 +6,7 @@
 // Test that the flexbox highlighter color change in the color picker is committed when
 // RETURN is pressed.
 
-const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
 
 add_task(async function() {
   await addTab(TEST_URI);

devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_exists.js

@@ -6,7 +6,7 @@
 
 // Test that the flex item outline exists when a flex item is selected.
 
-const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
 
 add_task(async function() {
   await addTab(TEST_URI);

devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js

@@ -9,24 +9,28 @@
 // this grid has been correctly generated depending on the item that is currently
 // selected.
 
-const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
 
 const TEST_DATA = [{
   selector: ".shrinking .item",
-  expectedGridTemplate: "[final-start basis-start] 300fr [final-end delta-start] " +
+  expectedGridTemplate: "[basis-start final-start] 300fr [final-end delta-start] " +
                         "200fr [basis-end delta-end]",
 }, {
   selector: ".shrinking.is-clamped .item",
-  expectedGridTemplate: "[final-start basis-start] 300fr [delta-start] " +
+  expectedGridTemplate: "[basis-start final-start] 300fr [delta-start] " +
                         "50fr [final-end min] 150fr [basis-end delta-end]",
 }, {
   selector: ".growing .item",
-  expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
+  expectedGridTemplate: "[basis-start final-start] 200fr [basis-end delta-start] " +
                         "100fr [final-end delta-end]",
 }, {
   selector: ".growing.is-clamped .item",
-  expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
+  expectedGridTemplate: "[basis-start final-start] 200fr [basis-end delta-start] " +
                         "50fr [final-end max] 50fr [delta-end]",
+}, {
+  selector: "#wanted-to-shrink-more-than-basis div:first-child",
+  expectedGridTemplate: "[delta-start] 63fr [basis-start final-start] " +
+                        "60fr [final-end min] 140fr [basis-end delta-end]",
 }];
 
 add_task(async function() {

devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_column.js

@@ -6,7 +6,7 @@
 
 // Test that the flex item outline is rotated for flex items in a column flexbox layout.
 
-const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
 
 add_task(async function() {
   await addTab(TEST_URI);

devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_exists.js

@@ -6,7 +6,7 @@
 
 // Test that the flex item sizing information exists when a flex item is selected.
 
-const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
 
 add_task(async function() {
   await addTab(TEST_URI);

devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js

@@ -8,7 +8,7 @@
 // element is selected. Some items may be clamped, others not, so not all sections are
 // visible at all times.
 
-const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
 
 const TEST_DATA = [{
   selector: ".shrinking .item",

devtools/client/inspector/flexbox/test/doc_flexbox_simple.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<style>
-.container {
-  width: 300px;
-  height: 150px;
-  margin: 10px;
-  display: flex;
-}
-.container.column {
-  height: 300px;
-  width: 150px;
-  flex-direction: column;
-}
-.item {
-  background: #0004;
-}
-.shrinking .item {
-  flex-basis: 500px;
-  flex-shrink: 1;
-}
-.shrinking.is-clamped .item {
-  min-width: 350px;
-}
-.growing .item {
-  flex-basis: 200px;
-  flex-grow: 1;
-}
-.growing.is-clamped .item {
-  max-width: 250px;
-}
-</style>
-<div id="container" class="container">
-  <div class="item">flex item in a row flex container</div>
-</div>
-<div class="container column">
-  <div class="item">flex item in a column flex container</div>
-</div>
-<div class="container shrinking">
-  <div class="item">Shrinking flex item</div>
-</div>
-<div class="container shrinking is-clamped">
-  <div class="item">Shrinking and clamped flex item</div>
-</div>
-<div class="container growing">
-  <div class="item">Growing flex item</div>
-</div>
-<div class="container growing is-clamped">
-  <div class="item">Growing and clamped flex item</div>
-</div>

devtools/client/inspector/flexbox/test/doc_flexbox_specific_cases.html

@@ -1,6 +1,39 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
+@font-face {
+  font-family: Ahem;
+  src: url("Ahem.ttf");
+}
+.container {
+  width: 300px;
+  height: 150px;
+  margin: 10px;
+  display: flex;
+}
+.container.column {
+  height: 300px;
+  width: 150px;
+  flex-direction: column;
+}
+.item {
+  background: #0004;
+}
+.shrinking .item {
+  flex-basis: 500px;
+  flex-shrink: 1;
+}
+.shrinking.is-clamped .item {
+  min-width: 350px;
+}
+.growing .item {
+  flex-basis: 200px;
+  flex-grow: 1;
+}
+.growing.is-clamped .item {
+  max-width: 250px;
+}
+
 #want-to-grow-more-than-max {
   width: 500px;
   display: flex;
@@ -33,7 +66,40 @@
   min-width: 80px;
   background: salmon;
 }
+
+#wanted-to-shrink-more-than-basis {
+  display: flex;
+  width: 5px;
+}
+#wanted-to-shrink-more-than-basis div:first-child {
+  flex: 0 2 200px;
+  /* Using the Ahem test font to make sure the text has the exact same size on all test
+     platforms */
+  font-family: Ahem;
+  font-size: 10px;
+}
+#wanted-to-shrink-more-than-basis div:last-child {
+  flex: 0 1 200px;
+}
 </style>
+<div id="container" class="container">
+  <div class="item">flex item in a row flex container</div>
+</div>
+<div class="container column">
+  <div class="item">flex item in a column flex container</div>
+</div>
+<div class="container shrinking">
+  <div class="item">Shrinking flex item</div>
+</div>
+<div class="container shrinking is-clamped">
+  <div class="item">Shrinking and clamped flex item</div>
+</div>
+<div class="container growing">
+  <div class="item">Growing flex item</div>
+</div>
+<div class="container growing is-clamped">
+  <div class="item">Growing and clamped flex item</div>
+</div>
 <div id="want-to-grow-more-than-max">
   <div>item wants to grow more</div>
 </div>
@@ -44,3 +110,7 @@
  <div></div>
  <div></div>
 </div>
+<div id="wanted-to-shrink-more-than-basis">
+  <div>item wants to shrink more than its basis</div>
+  <div></div>
+</div>