Bug 1513500 - Fixed it so getCurrentDisplay also checks if a flex container is actually a flex item. r=pbro

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

--HG--
extra : moz-landing-system : lando

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

@@ -25,6 +25,7 @@ support-files =
 [browser_flexbox_container_element_rep.js]
 [browser_flexbox_container_properties.js]
 [browser_flexbox_empty_state.js]
+[browser_flexbox_grand_parent_flex.js]
 [browser_flexbox_highlighter_color_picker_on_ESC.js]
 [browser_flexbox_highlighter_color_picker_on_RETURN.js]
 [browser_flexbox_highlighter_opened_telemetry.js]

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

@@ -0,0 +1,44 @@
+/* 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 container is not shown as a flex item of its grandparent flex
+// container.
+
+const TEST_URI = `
+<style>
+.flex {
+  display: flex;
+}
+</style>
+<div class="flex">
+  <div>
+    <div id="grandchild" class="flex">
+      This is a flex item of a flex container.
+      Its parent isn't a flex container, but its grandparent is.
+    </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 flex container's grandchild.");
+  const onFlexContainerHeaderRendered = waitForDOM(doc, ".flex-header-container-label");
+  await selectNode("#grandchild", inspector);
+  await onFlexContainerHeaderRendered;
+
+  info("Check that only the Flex Container accordion item is showing.");
+  const flexPanes = doc.querySelectorAll(".flex-accordion");
+  is(flexPanes.length, 1, "There should only be one flex accordion item showing.");
+
+  info("Check that the container header shows Flex Container.");
+  const flexAccordionHeader = flexPanes[0].querySelector("._header .truncate");
+  is(flexAccordionHeader.textContent, "Flex Container",
+    "The flexbox pane shows a flex container accordion item.");
+});

devtools/server/actors/layout.js

@@ -336,11 +336,13 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, {
    *         The node to start iterating at.
    * @param  {String} type
    *         Can be "grid" or "flex", the display type we are searching for.
+   * @param  {Boolean} onlyLookAtContainer
+   *         If true, only look at given node's container and iterate from there.
    * @return {GridActor|FlexboxActor|null}
    *         The GridActor or FlexboxActor of the grid/flex container of the given node.
    *         Otherwise, returns null.
    */
-  getCurrentDisplay(node, type) {
+  getCurrentDisplay(node, type, onlyLookAtContainer) {
     if (isNodeDead(node)) {
       return null;
     }
@@ -361,7 +363,17 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, {
       }
 
       if (flexType && displayType.includes("flex")) {
-        return new FlexboxActor(this, node);
+        if (!onlyLookAtContainer) {
+          return new FlexboxActor(this, node);
+        }
+
+        const container = findFlexOrGridParentContainerForNode(node, type, this.walker);
+
+        if (container) {
+          return new FlexboxActor(this, container);
+        }
+
+        return null;
       } else if (gridType && displayType.includes("grid")) {
         return new GridActor(this, node);
       }
@@ -414,11 +426,7 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, {
    *         null.
    */
   getCurrentFlexbox(node, onlyLookAtParents) {
-    if (onlyLookAtParents) {
-      node = node.rawNode.parentNode;
-    }
-
-    return this.getCurrentDisplay(node, "flex");
+    return this.getCurrentDisplay(node, "flex", onlyLookAtParents);
   },
 
   /**