Commit c803ccff authored by Micah Tigley's avatar Micah Tigley
Browse files

Bug 1497179 - Avoid overlapping labels in the flex item outline. r=pbro 

Differential Revision: https://phabricator.services.mozilla.com/D9431

--HG--
extra : moz-landing-system : lando
parent 886605cb

devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js

+13 −4
Original line number Diff line number Diff line
@@ -54,8 +54,8 @@ class FlexItemSizingOutline extends PureComponent { 
    );

  }



  renderPoint(name) {

    return dom.div({ className: `flex-outline-point ${name}`, "data-label": name });

  renderPoint(className, label = className) {

    return dom.div({ className: `flex-outline-point ${className}`, "data-label": label });

  }



  render() {
@@ -138,6 +138,16 @@ class FlexItemSizingOutline extends PureComponent { 
    }

    gridTemplateColumns += "]";



    // Check the final and basis points to see if they are the same and if so, combine

    // them into a single rendered point.

    const renderedBaseAndFinalPoints = [];

    if (mainFinalSize === mainBaseSize) {

      renderedBaseAndFinalPoints.push(this.renderPoint("basisfinal", "basis/final"));

    } else {

      renderedBaseAndFinalPoints.push(this.renderPoint("basis"));

      renderedBaseAndFinalPoints.push(this.renderPoint("final"));

    }



    return (

      dom.div({ className: "flex-outline-container" },

        dom.div(
@@ -150,8 +160,7 @@ class FlexItemSizingOutline extends PureComponent { 
              gridTemplateColumns,

            },

          },

          this.renderPoint("basis"),

          this.renderPoint("final"),

          renderedBaseAndFinalPoints,

          showMin ? this.renderPoint("min") : null,

          showMax ? this.renderPoint("max") : null,

          this.renderBasisOutline(mainBaseSize),

devtools/client/inspector/flexbox/test/browser.ini

+1 −0
Original line number Diff line number Diff line
@@ -22,6 +22,7 @@ support-files = 
[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_renders_basisfinal_points_correctly.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]

devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_exists.js

+0 −6
Original line number Diff line number Diff line
@@ -25,10 +25,4 @@ add_task(async function() { 


  ok(basis, "The basis outline exists");

  ok(final, "The final outline exists");



  const [basisPoint, finalPoint] = [...flexOutlineContainer.querySelectorAll(

    ".flex-outline-point.basis, .flex-outline-point.final")];



  ok(basisPoint, "The basis point exists");

  ok(finalPoint, "The final point exists");

});

devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_renders_basisfinal_points_correctly.js

0 → 100644
+37 −0
Original line number Diff line number Diff line 
/* 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 renders the basis and final points as a single point

// if their sizes are equal. If not, then render as separate points.



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 a flex item whose basis size matches its final size.");

  let onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");

  await selectNode(".item", inspector);

  let [flexOutlineContainer] = await onFlexItemOutlineRendered;



  const [basisFinalPoint] = [...flexOutlineContainer.querySelectorAll(

    ".flex-outline-point.basisfinal")];



  ok(basisFinalPoint, "The basis/final point exists");



  info("Select a flex item whose basis size is different than its final size.");

  onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");

  await selectNode(".shrinking .item", inspector);

  [flexOutlineContainer] = await onFlexItemOutlineRendered;



  const [basis, final] = [...flexOutlineContainer.querySelectorAll(

    ".flex-outline-point.basis, .flex-outline-point.final")];



  ok(basis, "The basis point exists");

  ok(final, "The final point exists");

});

devtools/client/themes/layout.css

+9 −5
Original line number Diff line number Diff line
@@ -304,7 +304,8 @@ 
  grid-row: 1;

}



.flex-outline-point.basis {

.flex-outline-point.basis,

.flex-outline-point.basisfinal {

  grid-column-end: basis-end;

  justify-self: end;

}
@@ -357,7 +358,8 @@ 
}



.flex-outline-point.basis::before,

.flex-outline-point.final::before {

.flex-outline-point.final::before,

.flex-outline-point.basisfinal::before {

  top: -12px;

}
@@ -366,7 +368,7 @@ 
  bottom: -12px;

}



.flex-outline.column .flex-outline-point.min::before,

.flex-outline.column .flex-outline-point.max::before,

.flex-outline.column .flex-outline-point.min::before {

  text-indent: -12px;

}
@@ -374,13 +376,15 @@ 
.flex-outline-point.final::before,

.flex-outline.shrinking .flex-outline-point.min::before,

.flex-outline-point.max::before,

.flex-outline.shrinking .flex-outline-point.basis::before {

.flex-outline.shrinking .flex-outline-point.basis::before,

.flex-outline.column .flex-outline-point.basisfinal::before {

  border-width: 0 0 0 1px;

}



.flex-outline-point.basis::before,

.flex-outline-point.min::before,

.flex-outline.shrinking .flex-outline-point.final::before {

.flex-outline.shrinking .flex-outline-point.final::before,

.flex-outline.row .flex-outline-point.basisfinal::before {

  border-width: 0 1px 0 0;

}