Bug 1503180 - Part 2 - Simplify the base size section when it's the content size; r=mtigley
authorPatrick Brosset <pbrosset@mozilla.com>
Tue, 06 Nov 2018 19:50:26 +0000
changeset 444803 7c45e486aaf954d7cb461f887c1e84da3268c54e
parent 444802 70335d3f41881cd85b99a23342fc254b3783638f
child 444804 ef979c11ccc76109b3b21c1169e0ca059dd7d761
push id35003
push userncsoregi@mozilla.com
push dateWed, 07 Nov 2018 16:16:52 +0000
treeherdermozilla-central@4407a6d3e374 [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 2 - Simplify the base size section when it's the content size; r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D11047
devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js
devtools/client/locales/en-US/layout.properties
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -81,40 +81,39 @@ class FlexItemSizingProperties extends P
       )
     );
   }
 
   renderBaseSizeSection({ mainBaseSize, clampState }, properties, dimension) {
     const flexBasisValue = properties["flex-basis"];
     const dimensionValue = properties[dimension];
 
+    let title = getStr("flexbox.itemSizing.baseSizeSectionHeader");
     let property = null;
-    let reason = null;
 
     if (flexBasisValue) {
       // If flex-basis is defined, then that's what is used for the base size.
       property = this.renderCssProperty("flex-basis", flexBasisValue);
     } else if (dimensionValue) {
       // If not and width/height is defined, then that's what defines the base size.
       property = this.renderCssProperty(dimension, dimensionValue);
     } else {
       // Finally, if nothing is set, then the base size is the max-content size.
-      reason = this.renderReasons(
-        [getStr("flexbox.itemSizing.itemBaseSizeFromContent")]);
+      // In this case replace the section's title.
+      title = getStr("flexbox.itemSizing.itemContentSize");
     }
 
     const className = "section base";
     return (
       dom.li({ className: className + (property ? "" : " no-property") },
         dom.span({ className: "name" },
-          getStr("flexbox.itemSizing.baseSizeSectionHeader"),
+          title,
           property
         ),
-        this.renderSize(mainBaseSize),
-        reason
+        this.renderSize(mainBaseSize)
       )
     );
   }
 
   renderFlexibilitySection(flexItemSizing, properties, computedStyle) {
     const {
       mainDeltaSize,
       mainBaseSize,
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js
@@ -25,11 +25,11 @@ add_task(async function() {
 
   const outlineEls = doc.querySelectorAll(".flex-outline-container");
   is(outlineEls.length, 0, "The outline has not been rendered for this item");
 
   info("Also check that the sizing section shows the correct information");
   const allSections = [...flexSizingContainer.querySelectorAll(".section .name")];
 
   is(allSections.length, 2, "There are 2 parts in the sizing section");
-  is(allSections[0].textContent, "Base Size", "The first part is the base size");
+  is(allSections[0].textContent, "Content Size", "The first part is the content size");
   is(allSections[1].textContent, "Final Size", "The second part is the final size");
 });
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -47,25 +47,20 @@ flexbox.itemSizing.minSizeSectionHeader=
 # LOCALIZATION NOTE (flexbox.itemSizing.maxSizeSectionHeader): Header label displayed at
 # the start of the flex item sizing Maximum Size section.
 flexbox.itemSizing.maxSizeSectionHeader=Maximum Size
 
 # LOCALIZATION NOTE (flexbox.itemSizing.finalSizeSectionHeader): Header label displayed at
 # the start of the flex item sizing Final Size section.
 flexbox.itemSizing.finalSizeSectionHeader=Final Size
 
-# LOCALIZATION NOTE (flexbox.itemSizing.itemBaseSizeFromContent): Label shown in the flex
-# item sizing panel. It tells users that a given item’s base size was calculated from its
+# 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.itemBaseSizeFromContent=The item’s content size when unconstrained.
-
-# LOCALIZATION NOTE (flexbox.itemSizing.itemMinSizeFromItemMinContent): Label shown in the
-# flex item sizing panel. It tells users that a given item’s minimum size is coming from
-# its min-content size.
-flexbox.itemSizing.itemMinSizeFromItemMinContent=This is the element’s minimum content size.
+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.
 # (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.