Bug 1497178 - Hide the flex outline for 0-sized items; r=rcaliman
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 19 Oct 2018 10:01:21 +0000
changeset 490466 0927741e9110eebe9d55a73f97fd8bb47f2d6bff
parent 490465 14a6f6ecebc25ee188d852a4b12ed3befba3580a
child 490467 53abc33e3e38ea49862e20af8974bb5f8a17f439
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersrcaliman
bugs1497178
milestone64.0a1
Bug 1497178 - Hide the flex outline for 0-sized items; r=rcaliman Differential Revision: https://phabricator.services.mozilla.com/D8969
devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
devtools/client/inspector/flexbox/test/browser.ini
devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js
devtools/client/themes/layout.css
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
@@ -73,16 +73,21 @@ class FlexItemSizingOutline extends Pure
     const isRow = this.props.flexDirection.startsWith("row");
     const dimension = isRow ? "width" : "height";
 
     // Calculate the final size. This is base + delta, then clamped by min or max.
     let mainFinalSize = mainBaseSize + mainDeltaSize;
     mainFinalSize = Math.max(mainFinalSize, mainMinSize);
     mainFinalSize = Math.min(mainFinalSize, mainMaxSize);
 
+    // Just don't display anything if there isn't anything useful.
+    if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
+      return null;
+    }
+
     // 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.
     // 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
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -139,16 +139,21 @@ class FlexItemSizingProperties extends P
   renderFlexibilitySection(flexItemSizing, properties) {
     const {
       mainDeltaSize,
       mainBaseSize,
       mainFinalSize,
       lineGrowthState
     } = flexItemSizing;
 
+    // Don't attempt to display anything useful if everything is 0.
+    if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
+      return null;
+    }
+
     const flexGrow = properties["flex-grow"];
     const flexGrow0 = parseFloat(flexGrow) === 0;
     const flexShrink = properties["flex-shrink"];
     const flexShrink0 = parseFloat(flexShrink) === 0;
     const grew = mainDeltaSize > 0;
     const shrank = mainDeltaSize < 0;
     // TODO: replace this with the new clamping state that the API will return once bug
     // 1498273 is fixed.
--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@@ -12,15 +12,16 @@ support-files =
   !/devtools/client/shared/test/telemetry-test-helpers.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
 
 [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_info_exists.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_text_nodes_are_listed.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_hidden_when_useless.js
@@ -0,0 +1,35 @@
+/* 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 the flex item outline is not rendered when it isn't useful.
+// For now, that means when the item's base, delta and final sizes are all 0.
+
+const TEST_URI = `
+  <div style="display:flex">
+    <div></div>
+  </div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the item in the document and wait for the sizing section to appear");
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode("div > div", inspector);
+  const [flexSizingContainer] = await onFlexItemSizingRendered;
+
+  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[1].textContent, "Final Size", "The second part is the final size");
+});
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -113,16 +113,17 @@
  * Header
  */
 
 .flex-header {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 0 3px;
+  border-block-end: 1px solid var(--theme-splitter-color);
 }
 
 .flex-header-button-prev::before {
   background-image: url("chrome://devtools/skin/images/arrowhead-left.svg");
   background-size: 16px;
 }
 
 .flex-header-content {
@@ -137,20 +138,16 @@
   justify-content: center;
   padding: 0;
 }
 
 /**
  * Flex Item List
  */
 
-.flex-header + .flex-item-list {
-  border-block-start: 1px solid var(--theme-splitter-color);
-}
-
 .flex-item-list {
   font-size: 12px;
   margin: 0;
   padding-inline-start: 34px;
   padding-top: 5px;
   padding-bottom: 5px;
   overflow: hidden;
 }
@@ -185,17 +182,16 @@
   width: 85%;
 }
 
 /**
  * Flex Item Sizing Outline
  */
 
 .flex-outline-container {
-  border-block-start: 1px solid var(--theme-splitter-color);
   display: flex;
   justify-content: center;
 }
 
 .flex-outline {
   display: grid;
   margin: 2em 0;
   grid-auto-rows: 35px;
@@ -403,16 +399,23 @@
   margin-block-start: var(--padding);
   padding: var(--padding) 0 0 0;
   border-block-start: 1px solid var(--theme-splitter-color);
   display: grid;
   grid-template-columns: 1fr max-content;
   grid-column-gap: var(--padding);
 }
 
+/* If the outline isn't displayed before the sizing information, then no need for a first
+   top border or padding */
+:not(.flex-outline-container) + .flex-item-sizing > .section:first-child {
+  border: 0;
+  padding-block-start: 0;
+}
+
 .flex-item-sizing .section:first-child {
   margin: 0;
 }
 
 .flex-item-sizing .name {
   font-weight: 600;
   grid-column: 1;
 }