Backed out changeset aea0e7fadf7d (bug 1502002)for ES lint failure on components/FlexItemSizingOutline.js "CLOSED TREE"

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

@@ -68,7 +68,6 @@ class FlexItemSizingOutline extends PureComponent {
       mainDeltaSize,
       mainMaxSize,
       mainMinSize,
-      clampState,
     } = flexItemSizing;
 
     const isRow = this.props.flexDirection.startsWith("row");
@@ -84,12 +83,18 @@ class FlexItemSizingOutline extends PureComponent {
       return null;
     }
 
-    // The max size is only interesting to show if it did clamp the item.
-    const showMax = clampState === "clamped_to_max";
+    // The max size is only interesting to show if it did clamp the item
+    // TODO: replace this with the new clamping state that the API will return once bug
+    // 1498273 is fixed.
+    const showMax = mainMaxSize === mainFinalSize;
 
     // The min size is only really interesting if it actually clamped the item.
-    // TODO: We might also want to check if the min-size property is defined.
-    const showMin = clampState === "clamped_to_min";
+    // Just checking that the main size = final size isn't enough because this may be true
+    // if the max content size is the final size. So also check that min-width/height is
+    // set.
+    // TODO: replace this with the new clamping state that the API will return once bug
+    // 1498273 is fixed.
+    const showMin = mainMinSize === mainFinalSize && properties[`min-${dimension}`];
 
     // Sort all of the dimensions in order to come up with a grid track template.
     // Make mainDeltaSize start from the same point as the other ones so we can compare.
@@ -148,7 +153,7 @@ class FlexItemSizingOutline extends PureComponent {
           this.renderBasisOutline(mainBaseSize),
           this.renderDeltaOutline(mainDeltaSize),
           this.renderFinalOutline(mainFinalSize, mainMaxSize, mainMinSize,
-                                  clampState !== "unclamped")
+                                  showMin || showMax)
         )
       )
     );

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

@@ -97,15 +97,20 @@ class FlexItemSizingProperties extends PureComponent {
     );
   }
 
-  renderBaseSizeSection({ mainBaseSize, clampState }, properties, dimension) {
+  renderBaseSizeSection({ mainBaseSize, mainMinSize }, properties, dimension) {
     const flexBasisValue = properties["flex-basis"];
     const dimensionValue = properties[dimension];
     const minDimensionValue = properties[`min-${dimension}`];
+    const hasMinClamping = mainMinSize && mainMinSize === mainBaseSize;
 
     let property = null;
     let reason = null;
 
-    if (flexBasisValue) {
+    if (hasMinClamping && minDimensionValue) {
+      // If min clamping happened, then the base size is going to be that value.
+      // TODO: this isn't going to be necessarily true after bug 1498273 is fixed.
+      property = this.renderCssProperty(`min-${dimension}`, minDimensionValue);
+    } else if (flexBasisValue && !hasMinClamping) {
       // If flex-basis is defined, then that's what is used for the base size.
       property = this.renderCssProperty("flex-basis", flexBasisValue);
     } else if (dimensionValue) {
@@ -138,7 +143,6 @@ class FlexItemSizingProperties extends PureComponent {
       mainBaseSize,
       mainFinalSize,
       lineGrowthState,
-      clampState,
     } = flexItemSizing;
 
     // Don't attempt to display anything useful if everything is 0.
@@ -152,7 +156,9 @@ class FlexItemSizingProperties extends PureComponent {
     const flexShrink0 = parseFloat(flexShrink) === 0;
     const grew = mainDeltaSize > 0;
     const shrank = mainDeltaSize < 0;
-    const wasClamped = clampState !== "unclamped";
+    // TODO: replace this with the new clamping state that the API will return once bug
+    // 1498273 is fixed.
+    const wasClamped = mainDeltaSize + mainBaseSize !== mainFinalSize;
 
     const reasons = [];
 
@@ -256,15 +262,18 @@ class FlexItemSizingProperties extends PureComponent {
     );
   }
 
-  renderMinimumSizeSection({ clampState, mainMinSize }, properties, dimension) {
+  renderMinimumSizeSection({ mainMinSize, mainFinalSize }, properties, dimension) {
     // We only display the minimum size when the item actually violates that size during
     // layout & is clamped.
-    if (clampState !== "clamped_to_min") {
+    // For now, we detect this by checking that the min-size is the same as the final size
+    // and that a min-size is actually defined in CSS.
+    // TODO: replace this with the new clamping state that the API will return once bug
+    // 1498273 is fixed.
+    const minDimensionValue = properties[`min-${dimension}`];
+    if (mainMinSize !== mainFinalSize || !minDimensionValue) {
       return null;
     }
 
-    const minDimensionValue = properties[`min-${dimension}`];
-
     return (
       dom.li({ className: "section min" },
         dom.span({ className: "name" },
@@ -278,8 +287,10 @@ class FlexItemSizingProperties extends PureComponent {
     );
   }
 
-  renderMaximumSizeSection({ clampState, mainMaxSize }, properties, dimension) {
-    if (clampState !== "clamped_to_max") {
+  renderMaximumSizeSection({ mainMaxSize, mainFinalSize }, properties, dimension) {
+    // TODO: replace this with the new clamping state that the API will return once bug
+    // 1498273 is fixed.
+    if (mainMaxSize !== mainFinalSize) {
       return null;
     }
 

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

@@ -27,5 +27,4 @@ support-files =
 [browser_flexbox_sizing_info_for_text_nodes.js]
 [browser_flexbox_sizing_info_has_correct_sections.js]
 [browser_flexbox_sizing_unrelated_to_siblings_when_clamped.js]
-[browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js]
 [browser_flexbox_text_nodes_are_listed.js]

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

@@ -1,34 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
-
-// Test the specific max-clamping scenario where an item wants to grow a certain amount
-// but its max-size prevents it from growing that much.
-
-const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
-
-add_task(async function() {
-  await addTab(TEST_URI);
-  const { inspector, flexboxInspector } = await openLayoutView();
-  const { document: doc } = flexboxInspector;
-
-  info("Select the test item in the document and wait for the sizing info to render");
-  const onRendered = waitForDOM(doc, ".flex-outline, .flex-item-sizing", 2);
-  await selectNode("#want-to-grow-more-than-max div", inspector);
-  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");
-  const reasons = [...sizingContainer.querySelectorAll(".reasons li")];
-  ok(reasons.some(r => r.textContent === getStr("flexbox.itemSizing.growthAttemptWhenClamped")),
-     "The 'wanted to grow but was clamped' reason was found");
-});

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

@@ -14,20 +14,8 @@
 #grow-not-grow div:last-child {
   flex-grow: 1;
 }
-
-#want-to-grow-more-than-max {
-  width: 500px;
-  display: flex;
-}
-#want-to-grow-more-than-max div {
-  flex: 1;
-  max-width: 200px;
-}
 </style>
 <div id="grow-not-grow">
   <div>item 1</div>
   <div>item 2</div>
 </div>
-<div id="want-to-grow-more-than-max">
-  <div>item wants to grow more</div>
-</div>

devtools/server/actors/layout.js

@@ -111,7 +111,6 @@ const FlexboxActor = ActorClassWithSpec(flexboxSpec, {
           mainMaxSize: item.mainMaxSize,
           mainMinSize: item.mainMinSize,
           lineGrowthState: line.growthState,
-          clampState: item.clampState,
         }));
       }
     }