Bug 1503180 - Part 3 - Move the clamping reasons to the min and max sections; r=mtigley
authorPatrick Brosset <pbrosset@mozilla.com>
Tue, 06 Nov 2018 20:01:05 +0000
changeset 444792 ef979c11ccc76109b3b21c1169e0ca059dd7d761
parent 444791 7c45e486aaf954d7cb461f887c1e84da3268c54e
child 444793 d55c49b76be1212284803b7fdc430c2500591401
push id72499
push userpbrosset@mozilla.com
push dateWed, 07 Nov 2018 07:17:23 +0000
treeherderautoland@ef979c11ccc7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1503180
milestone65.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 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
devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js
devtools/client/locales/en-US/layout.properties
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -114,17 +114,16 @@ class FlexItemSizingProperties extends P
   }
 
   renderFlexibilitySection(flexItemSizing, properties, computedStyle) {
     const {
       mainDeltaSize,
       mainBaseSize,
       mainFinalSize,
       lineGrowthState,
-      clampState,
     } = flexItemSizing;
 
     // Don't display anything if all interesting sizes are 0.
     if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
       return null;
     }
 
     // Also don't display anything if the item did not grow or shrink.
@@ -133,17 +132,16 @@ class FlexItemSizingProperties extends P
     if (!grew && !shrank) {
       return null;
     }
 
     const definedFlexGrow = properties["flex-grow"];
     const computedFlexGrow = computedStyle.flexGrow;
     const definedFlexShrink = properties["flex-shrink"];
     const computedFlexShrink = computedStyle.flexShrink;
-    const wasClamped = clampState !== "unclamped";
 
     const reasons = [];
 
     // Tell users whether the item was set to grow or shrink.
     if (computedFlexGrow && lineGrowthState === "growing") {
       reasons.push(getStr("flexbox.itemSizing.setToGrow"));
     }
     if (computedFlexShrink && lineGrowthState === "shrinking") {
@@ -153,45 +151,25 @@ class FlexItemSizingProperties extends P
       reasons.push(getStr("flexbox.itemSizing.notSetToGrow"));
     }
     if (!computedFlexShrink && !grew && !shrank && lineGrowthState === "shrinking") {
       reasons.push(getStr("flexbox.itemSizing.notSetToShrink"));
     }
 
     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.
     if (!property && !reasons.length) {
       return null;
     }
 
     const className = "section flexibility";
@@ -202,50 +180,70 @@ class FlexItemSizingProperties extends P
           property
         ),
         this.renderSize(mainDeltaSize, true),
         this.renderReasons(reasons)
       )
     );
   }
 
-  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" },
         dom.span({ className: "name" },
           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" },
         dom.span({ className: "name" },
           getStr("flexbox.itemSizing.maxSizeSectionHeader"),
           this.renderCssProperty(`max-${dimension}`, maxDimensionValue)
         ),
-        this.renderSize(mainMaxSize)
+        this.renderSize(mainMaxSize),
+        this.renderReasons(reasons)
       )
     );
   }
 
   renderFinalSizeSection({ mainFinalSize }) {
     return (
       dom.li({ className: "section final no-property" },
         dom.span({ className: "name" },
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js
@@ -22,14 +22,14 @@ add_task(async function() {
   const [outlineContainer, sizingContainer] = await onRendered;
 
   info("Check that the outline contains the max point and that it's equal to final");
   const maxPoint = outlineContainer.querySelector(".flex-outline-point.max");
   ok(maxPoint, "The max point is displayed");
   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");
 });
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -20,23 +20,16 @@ flexbox.flexItemOf=Flex Item of %S
 # LOCALIZATION NOTE (flexbox.noFlexboxeOnThisPage): In the case where there are no CSS
 # flex containers to display.
 flexbox.noFlexboxeOnThisPage=Select a Flex container or item to continue.
 
 # LOCALIZATION NOTE (flexbox.flexContainerProperties): Header for the flex container
 # 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
 
 # LOCALIZATION NOTE (flexbox.itemSizing.flexibilitySectionHeader): Header label displayed
 # at the start of the flex item sizing Flexibility section.
 flexbox.itemSizing.flexibilitySectionHeader=Flexibility
 
@@ -52,36 +45,31 @@ flexbox.itemSizing.maxSizeSectionHeader=
 # the start of the flex item sizing Final Size section.
 flexbox.itemSizing.finalSizeSectionHeader=Final Size
 
 # LOCALIZATION NOTE (flexbox.itemSizing.itemContentSize): Label shown in the flex item
 # sizing panel. It tells users that a given item’s base size was calculated from its
 # 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.
 flexbox.itemSizing.setToGrow=Item was set to grow.
 
 # LOCALIZATION NOTE (flexbox.itemSizing.setToShrink): Label shown in the flexbox item
 # sizing panel. It tells users that a given item was set to shrink.
 flexbox.itemSizing.setToShrink=Item was set to shrink.