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 500610 0927741e9110eebe9d55a73f97fd8bb47f2d6bff
parent 500609 14a6f6ecebc25ee188d852a4b12ed3befba3580a
child 500611 53abc33e3e38ea49862e20af8974bb5f8a17f439
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1497178
milestone64.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 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;
 }