mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-13 05:15:45 +00:00
Backed out changeset aea0e7fadf7d (bug 1502002)for ES lint failure on components/FlexItemSizingOutline.js "CLOSED TREE"
This commit is contained in:
parent
7bf4a87483
commit
d5fc6f3d47
@ -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)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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]
|
||||
|
@ -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");
|
||||
});
|
@ -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>
|
||||
|
@ -111,7 +111,6 @@ const FlexboxActor = ActorClassWithSpec(flexboxSpec, {
|
||||
mainMaxSize: item.mainMaxSize,
|
||||
mainMinSize: item.mainMinSize,
|
||||
lineGrowthState: line.growthState,
|
||||
clampState: item.clampState,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user