Bug 1503180 - Part 3 - Move the clamping reasons to the min and max sections; r=mtigley

Depends on D11047

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

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

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

@@ -119,7 +119,6 @@ class FlexItemSizingProperties extends PureComponent {
       mainBaseSize,
       mainFinalSize,
       lineGrowthState,
-      clampState,
     } = flexItemSizing;
 
     // Don't display anything if all interesting sizes are 0.
@@ -138,7 +137,6 @@ class FlexItemSizingProperties extends PureComponent {
     const computedFlexGrow = computedStyle.flexGrow;
     const definedFlexShrink = properties["flex-shrink"];
     const computedFlexShrink = computedStyle.flexShrink;
-    const wasClamped = clampState !== "unclamped";
 
     const reasons = [];
 
@@ -158,35 +156,15 @@ class FlexItemSizingProperties extends PureComponent {
 
     let property = null;
 
-    if (grew) {
-      // If the item grew.
-      if (definedFlexGrow) {
-        // It's normally because it was set to grow (flex-grow is non 0).
-        property = this.renderCssProperty("flex-grow", definedFlexGrow);
-      }
-
-      if (wasClamped && clampState === "clamped_to_max") {
-        // It may have wanted to grow more than it did, because it was later max-clamped.
-        reasons.push(getStr("flexbox.itemSizing.growthAttemptButMaxClamped"));
-      } else if (wasClamped && clampState === "clamped_to_min") {
-        // Or it may have wanted to grow less, but was later min-clamped to a larger size.
-        reasons.push(getStr("flexbox.itemSizing.growthAttemptButMinClamped"));
-      }
-    } else if (shrank) {
-      // If the item shrank.
-      if (definedFlexShrink && computedFlexShrink) {
-        // It's either because flex-shrink is non 0.
-        property = this.renderCssProperty("flex-shrink", definedFlexShrink);
-      } else if (computedFlexShrink) {
-        // Or also because it's default value is 1 anyway.
-        property = this.renderCssProperty("flex-shrink", computedFlexShrink, true);
-      }
-
-      if (wasClamped) {
-        // It might have wanted to shrink more (to accomodate all items) but couldn't
-        // because it was later min-clamped.
-        reasons.push(getStr("flexbox.itemSizing.shrinkAttemptWhenClamped"));
-      }
+    if (grew && definedFlexGrow && computedFlexGrow) {
+      // If the item grew it's normally because it was set to grow (flex-grow is non 0).
+      property = this.renderCssProperty("flex-grow", definedFlexGrow);
+    } else if (shrank && definedFlexShrink && computedFlexShrink) {
+      // If the item shrank it's either because flex-shrink is non 0.
+      property = this.renderCssProperty("flex-shrink", definedFlexShrink);
+    } else if (shrank && computedFlexShrink) {
+      // Or also because it's default value is 1 anyway.
+      property = this.renderCssProperty("flex-shrink", computedFlexShrink, true);
     }
 
     // Don't display the section at all if there's nothing useful to show users.
@@ -207,14 +185,24 @@ class FlexItemSizingProperties extends PureComponent {
     );
   }
 
-  renderMinimumSizeSection({ clampState, mainMinSize }, properties, dimension) {
+  renderMinimumSizeSection(flexItemSizing, properties, dimension) {
+    const { clampState, mainMinSize, mainDeltaSize } = flexItemSizing;
+    const grew = mainDeltaSize > 0;
+    const shrank = mainDeltaSize < 0;
+    const minDimensionValue = properties[`min-${dimension}`];
+
     // We only display the minimum size when the item actually violates that size during
     // layout & is clamped.
     if (clampState !== "clamped_to_min") {
       return null;
     }
 
-    const minDimensionValue = properties[`min-${dimension}`];
+    const reasons = [];
+    if (grew || shrank) {
+      // The item may have wanted to grow less, but was min-clamped to a larger size.
+      // Or the item may have wanted to shrink more but was min-clamped to a larger size.
+      reasons.push(getStr("flexbox.itemSizing.clampedToMin"));
+    }
 
     return (
       dom.li({ className: "section min" },
@@ -222,17 +210,26 @@ class FlexItemSizingProperties extends PureComponent {
           getStr("flexbox.itemSizing.minSizeSectionHeader"),
           this.renderCssProperty(`min-${dimension}`, minDimensionValue)
         ),
-        this.renderSize(mainMinSize)
+        this.renderSize(mainMinSize),
+        this.renderReasons(reasons)
       )
     );
   }
 
-  renderMaximumSizeSection({ clampState, mainMaxSize }, properties, dimension) {
+  renderMaximumSizeSection(flexItemSizing, properties, dimension) {
+    const { clampState, mainMaxSize, mainDeltaSize } = flexItemSizing;
+    const grew = mainDeltaSize > 0;
+    const maxDimensionValue = properties[`max-${dimension}`];
+
     if (clampState !== "clamped_to_max") {
       return null;
     }
 
-    const maxDimensionValue = properties[`max-${dimension}`];
+    const reasons = [];
+    if (grew) {
+      // The item may have wanted to grow more than it did, because it was max-clamped.
+      reasons.push(getStr("flexbox.itemSizing.clampedToMax"));
+    }
 
     return (
       dom.li({ className: "section max" },
@@ -240,7 +237,8 @@ class FlexItemSizingProperties extends PureComponent {
           getStr("flexbox.itemSizing.maxSizeSectionHeader"),
           this.renderCssProperty(`max-${dimension}`, maxDimensionValue)
         ),
-        this.renderSize(mainMaxSize)
+        this.renderSize(mainMaxSize),
+        this.renderReasons(reasons)
       )
     );
   }

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

@@ -27,9 +27,9 @@ add_task(async function() {
   ok(outlineContainer.style.gridTemplateColumns.includes("[final-end max]"),
      "The final and max points are at the same position");
 
-  info("Check that the flexibility sizing section displays the right info");
+  info("Check that the maximum sizing section displays the right info");
   const reasons = [...sizingContainer.querySelectorAll(".reasons li")];
-  const expectedReason = getStr("flexbox.itemSizing.growthAttemptButMaxClamped");
+  const expectedReason = getStr("flexbox.itemSizing.clampedToMax");
   ok(reasons.some(r => r.textContent === expectedReason),
-     "The 'wanted to grow but was clamped' reason was found");
+     "The clampedToMax reason was found");
 });

devtools/client/locales/en-US/layout.properties

@@ -25,13 +25,6 @@ flexbox.noFlexboxeOnThisPage=Select a Flex container or item to continue.
 # properties in the Flexbox panel.
 flexbox.flexContainerProperties=Flex Container Properties
 
-# LOCALIZATION NOTE (flexbox.contentWidth, flexbox.contentHeight, flexbox.finalWidth,
-# flexbox.finalHeight): Labels for the flex item sizing properties in the Flexbox panel.
-flexbox.contentWidth=Content width:
-flexbox.contentHeight=Content height:
-flexbox.finalWidth=Final width:
-flexbox.finalHeight=Final height:
-
 # LOCALIZATION NOTE (flexbox.itemSizing.baseSizeSectionHeader): Header label displayed
 # at the start of the flex item sizing Base Size section.
 flexbox.itemSizing.baseSizeSectionHeader=Base Size
@@ -57,26 +50,21 @@ flexbox.itemSizing.finalSizeSectionHeader=Final Size
 # content size when unconstrained.
 flexbox.itemSizing.itemContentSize=Content Size
 
-# LOCALIZATION NOTE (flexbox.itemSizing.growthAttemptButMaxClamped): Label shown in the
-# flexbox item sizing panel. It tells users that a given item attempted to grow by a
-# certain amount but ended up being clamped to a smaller max size.
+# LOCALIZATION NOTE (flexbox.itemSizing.clampedToMax): Label shown in the flexbox item
+# sizing panel. It tells users that a given item attempted to grow but ended up being
+# clamped to a smaller max size.
 # (Note that clamp is a common word in flexbox terminology. It refers to constraining an
 # item's size to some defined min/max-width/height set on the element, even though there
 # might have been room for it to grow, or reason for it to shrink more).
-flexbox.itemSizing.growthAttemptButMaxClamped=The item wanted to grow more, but it was clamped to its maximum size.
+flexbox.itemSizing.clampedToMax=The item was clamped to its maximum size.
 
-# LOCALIZATION NOTE (flexbox.itemSizing.growthAttemptButMinClamped): Label shown in the
-# flexbox item sizing panel. It tells users that a given item attempted to grow by a
-# certain amount but ended up being clamped to a larger min size.
+# LOCALIZATION NOTE (flexbox.itemSizing.clampedToMin): Label shown in the flexbox item
+# sizing panel. It tells users that a given item attempted to grow but ended up being
+# clamped to a larger min size.
 # (Note that clamp is a common word in flexbox terminology. It refers to constraining an
 # item's size to some defined min/max-width/height set on the element, even though there
 # might have been room for it to grow, or reason for it to shrink more).
-flexbox.itemSizing.growthAttemptButMinClamped=The item wanted to grow less, but it was clamped to its minimum size.
-
-# LOCALIZATION NOTE (flexbox.itemSizing.shrinkAttemptWhenClamped): Label shown in the
-# flexbox item sizing panel. It tells users that a given item attempted to shrink by a
-# certain amount but ended up being clamped by a min size.
-flexbox.itemSizing.shrinkAttemptWhenClamped=The item wanted to shrink, but it was clamped.
+flexbox.itemSizing.clampedToMin=The item was clamped to its minimum size.
 
 # LOCALIZATION NOTE (flexbox.itemSizing.setToGrow): Label shown in the flex item sizing
 # panel. It tells users that a given item was set to grow.