Bug 1503626 - Only display a flex item's min-width/max-width property if it's specified in the CSS. r=gl
authorMicah Tigley <mtigley@mozilla.com>
Wed, 07 Nov 2018 16:14:47 +0000
changeset 444869 2d05e436d35bbf1e63e03139ead37ae0453275a4
parent 444868 dd297953db7d091539486429198a76b6ca159e42
child 444870 1a0a9f18c9e7c92d576f4be8ef37921044a18732
push id35005
push useraiakab@mozilla.com
push dateWed, 07 Nov 2018 21:49:53 +0000
treeherdermozilla-central@12afa29e9c8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1503626
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 1503626 - Only display a flex item's min-width/max-width property if it's specified in the CSS. r=gl Differential Revision: https://phabricator.services.mozilla.com/D10420
devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
devtools/client/inspector/flexbox/test/browser.ini
devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js
devtools/client/inspector/flexbox/test/doc_flexbox_unauthored_min_dimension.html
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -203,17 +203,19 @@ class FlexItemSizingProperties extends P
       // 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)
+          minDimensionValue.length ?
+           this.renderCssProperty(`min-${dimension}`, minDimensionValue) :
+           null
         ),
         this.renderSize(mainMinSize),
         this.renderReasons(reasons)
       )
     );
   }
 
   renderMaximumSizeSection(flexItemSizing, properties, dimension) {
@@ -230,17 +232,19 @@ class FlexItemSizingProperties extends P
       // 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)
+          maxDimensionValue.length ?
+            this.renderCssProperty(`max-${dimension}`, maxDimensionValue) :
+            null
         ),
         this.renderSize(mainMaxSize),
         this.renderReasons(reasons)
       )
     );
   }
 
   renderFinalSizeSection({ mainFinalSize }) {
--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@@ -1,16 +1,17 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 support-files =
   doc_flexbox_pseudos.html
   doc_flexbox_simple.html
   doc_flexbox_specific_cases.html
   doc_flexbox_text_nodes.html
+  doc_flexbox_unauthored_min_dimension.html
   doc_flexbox_writing_modes.html
   head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/shared-redux-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   !/devtools/client/shared/test/test-actor.js
@@ -19,15 +20,16 @@ support-files =
 [browser_flexbox_highlighter_color_picker_on_ESC.js]
 [browser_flexbox_highlighter_color_picker_on_RETURN.js]
 [browser_flexbox_item_outline_exists.js]
 [browser_flexbox_item_outline_has_correct_layout.js]
 [browser_flexbox_item_outline_hidden_when_useless.js]
 [browser_flexbox_item_outline_rotates_for_column.js]
 [browser_flexbox_pseudo_elements_are_listed.js]
 [browser_flexbox_sizing_flexibility_not_displayed_when_useless.js]
+[browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js]
 [browser_flexbox_sizing_info_exists.js]
 [browser_flexbox_sizing_info_for_different_writing_modes.js]
 [browser_flexbox_sizing_info_for_pseudos.js]
 [browser_flexbox_sizing_info_for_text_nodes.js]
 [browser_flexbox_sizing_info_has_correct_sections.js]
 [browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js]
 [browser_flexbox_text_nodes_are_listed.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js
@@ -0,0 +1,33 @@
+/* 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";
+
+// Test that a flex item's min width/height value is not displayed if it's unspecified in
+// the CSS.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_unauthored_min_dimension.html";
+
+async function checkFlexItemCSSProperty(inspector, doc, selector) {
+  info("Select the container's flex item sizing info.");
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode(selector, inspector);
+  const [flexItemSizingContainer] = await onFlexItemSizingRendered;
+
+  info("Check that the minimum size section does not display minimum dimension text.");
+  const [sectionMinRowItem] = [...flexItemSizingContainer.querySelectorAll(
+    ".section.min")];
+  const minDimension = sectionMinRowItem.querySelector(".css-property-link");
+
+  ok(!minDimension, "Minimum dimension property should not be displayed.");
+}
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  await checkFlexItemCSSProperty(inspector, doc, "#flex-item-with-unauthored-min-width");
+  await checkFlexItemCSSProperty(inspector, doc, "#flex-item-with-unauthored-min-height");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_unauthored_min_dimension.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.flex-container {
+  display: flex;
+  height: 100vh;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.flex-child {
+  height: 100%;
+  width: 100%
+}
+</style>
+<div class="flex-container">
+  <div class="flex-child"></div>
+  <div id="flex-item-with-unauthored-min-width">
+      <h1>AAA</h1>
+  </div>
+</div>
+<div class="flex-container column">
+  <div class="flex-child"></div>
+  <div id="flex-item-with-unauthored-min-height">
+      <h1>BBB</h1>
+  </div>
+</div>