⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 288492 in webkit


Ignore:
Timestamp:
Jan 24, 2022, 5:11:15 PM (5 years ago)
Author:
Patrick Angle
Message:

Web Inspector: [Flexbox] Add instrumentation/protocol bits for flex layout containers
​https://bugs.webkit.org/show_bug.cgi?id=235454

Reviewed by Devin Rousso.

Source/JavaScriptCore:

  • inspector/protocol/CSS.json:

Source/WebCore:

Added tests in inspector/css/nodeLayoutContextTypeChanged.html.

Add instrumentation to RenderFlexibleBox to observe elements becoming/ceasing to be flex containers. We only
instrument RenderFlexibleBox created with an Element, not a Document, since all anonymous nodes will have their
document passed, which means we would attempt to track multiple different nodes against the same document,
resulting in unexpected results. Conversely, we only instrument in the destructor for non-anonymous nodes.

  • inspector/agents/InspectorCSSAgent.cpp:

(WebCore::InspectorCSSAgent::layoutContextTypeForRenderer):

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::RenderFlexibleBox):
(WebCore::RenderFlexibleBox::~RenderFlexibleBox):

Source/WebInspectorUI:

  • UserInterface/Models/DOMNode.js:

LayoutTests:

  • inspector/css/nodeLayoutContextTypeChanged-expected.txt:
  • inspector/css/nodeLayoutContextTypeChanged.html:
Location:
trunk
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r288466 r288492  
     12022-01-24  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: [Flexbox] Add instrumentation/protocol bits for flex layout containers
     4        https://bugs.webkit.org/show_bug.cgi?id=235454
     5
     6        Reviewed by Devin Rousso.
     7
     8        * inspector/css/nodeLayoutContextTypeChanged-expected.txt:
     9        * inspector/css/nodeLayoutContextTypeChanged.html:
     10
    1112022-01-24  Eric Carlson  <eric.carlson@apple.com>
    212

  • trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged-expected.txt

    r272670 r288492  
    1111PASS: Layout context should now be `grid`.
    1212
     13-- Running test case: CSS.nodeLayoutContextTypeChanged.FlexToNonFlex
     14PASS: Layout context should be `flex`.
     15PASS: Layout context should now be `null`.
     16
     17-- Running test case: CSS.nodeLayoutContextTypeChanged.NonFlexToFlex
     18PASS: Layout context should be `null`.
     19PASS: Layout context should now be `flex`.
     20
     21-- Running test case: CSS.nodeLayoutContextTypeChanged.GridToFlex
     22PASS: Layout context should now be `grid`.
     23PASS: Layout context should now be `flex`.
     24

  • trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged.html

    r272670 r288492  
    6666    });
    6767
     68    addTestCase({
     69        name: "CSS.nodeLayoutContextTypeChanged.FlexToNonFlex",
     70        description: "Change a flex container to a non-flex container.",
     71        selector: "#flexToNonFlex",
     72        async domNodeHandler(domNode) {
     73            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should be `flex`.");
     74
     75            await Promise.all([
     76                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
     77                changeElementDisplayValue("flexToNonFlex", "block"),
     78            ]);
     79
     80            InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should now be `null`.");
     81        }
     82    });
     83
     84    addTestCase({
     85        name: "CSS.nodeLayoutContextTypeChanged.NonFlexToFlex",
     86        description: "Change a non-flex container to a flex container.",
     87        selector: "#nonFlexToFlex",
     88        async domNodeHandler(domNode) {
     89            InspectorTest.expectEqual(domNode.layoutContextType, null, "Layout context should be `null`.");
     90
     91            await Promise.all([
     92                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
     93                changeElementDisplayValue("nonFlexToFlex", "flex"),
     94            ]);
     95
     96            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should now be `flex`.");
     97        }
     98    });
     99
     100    addTestCase({
     101        name: "CSS.nodeLayoutContextTypeChanged.GridToFlex",
     102        description: "Change a non-flex container to a flex container.",
     103        selector: "#gridToFlex",
     104        async domNodeHandler(domNode) {
     105            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Grid, "Layout context should now be `grid`.");
     106
     107            await Promise.all([
     108                domNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged),
     109                changeElementDisplayValue("gridToFlex", "flex"),
     110            ]);
     111
     112            InspectorTest.expectEqual(domNode.layoutContextType, WI.DOMNode.LayoutContextType.Flex, "Layout context should now be `flex`.");
     113        }
     114    });
     115
    68116    WI.domManager.requestDocument().then((doc) => {
    69117        documentNode = doc;
    … …  
    75123    .grid-container {
    76124        display: grid;
     125    }
     126
     127    .flex-container {
     128        display: flex;
    77129    }
    78130</style>
    … …  
    89141        <div></div>
    90142    </div>
     143
     144    <div id="flexToNonFlex" class="flex-container">
     145        <div></div>
     146        <div></div>
     147    </div>
     148
     149    <div id="nonFlexToFlex">
     150        <div></div>
     151        <div></div>
     152    </div>
     153
     154    <div id="gridToFlex" class="grid-container">
     155        <div></div>
     156        <div></div>
     157    </div>
    91158</body>
    92159</html>

  • trunk/Source/JavaScriptCore/ChangeLog

    r288476 r288492  
     12022-01-24  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: [Flexbox] Add instrumentation/protocol bits for flex layout containers
     4        https://bugs.webkit.org/show_bug.cgi?id=235454
     5
     6        Reviewed by Devin Rousso.
     7
     8        * inspector/protocol/CSS.json:
     9
    1102022-01-24  Mikhail R. Gadelha  <mikhail@igalia.com>
    211

  • trunk/Source/JavaScriptCore/inspector/protocol/CSS.json

    r286558 r288492  
    258258            "id": "LayoutContextType",
    259259            "type": "string",
    260             "enum": ["grid"],
     260            "enum": ["flex", "grid"],
    261261            "description": "The layout context type of a node."
    262262        },

  • trunk/Source/WebCore/ChangeLog

    r288489 r288492  
     12022-01-24  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: [Flexbox] Add instrumentation/protocol bits for flex layout containers
     4        https://bugs.webkit.org/show_bug.cgi?id=235454
     5
     6        Reviewed by Devin Rousso.
     7
     8        Added tests in inspector/css/nodeLayoutContextTypeChanged.html.
     9
     10        Add instrumentation to RenderFlexibleBox to observe elements becoming/ceasing to be flex containers. We only
     11        instrument RenderFlexibleBox created with an Element, not a Document, since all anonymous nodes will have their
     12        document passed, which means we would attempt to track multiple different nodes against the same document,
     13        resulting in unexpected results. Conversely, we only instrument in the destructor for non-anonymous nodes.
     14
     15        * inspector/agents/InspectorCSSAgent.cpp:
     16        (WebCore::InspectorCSSAgent::layoutContextTypeForRenderer):
     17        * rendering/RenderFlexibleBox.cpp:
     18        (WebCore::RenderFlexibleBox::RenderFlexibleBox):
     19        (WebCore::RenderFlexibleBox::~RenderFlexibleBox):
     20
    1212022-01-24  Per Arne Vollan  <pvollan@apple.com>
    222

  • trunk/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp

    r286625 r288492  
    5757#include "NodeList.h"
    5858#include "PseudoElement.h"
     59#include "RenderFlexibleBox.h"
    5960#include "RenderGrid.h"
    6061#include "RenderStyleConstants.h"
    … …  
    939940std::optional<Protocol::CSS::LayoutContextType> InspectorCSSAgent::layoutContextTypeForRenderer(RenderObject* renderer)
    940941{
     942    if (is<RenderFlexibleBox>(renderer))
     943        return Protocol::CSS::LayoutContextType::Flex;
    941944    if (is<RenderGrid>(renderer))
    942945        return Protocol::CSS::LayoutContextType::Grid;

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r288113 r288492  
    3434#include "FlexibleBoxAlgorithm.h"
    3535#include "HitTestResult.h"
     36#include "InspectorInstrumentation.h"
    3637#include "LayoutRepainter.h"
    3738#include "RenderChildIterator.h"
    … …  
    7374{
    7475    setChildrenInline(false); // All of our children must be block-level.
     76
     77    InspectorInstrumentation::nodeLayoutContextChanged(element, this);
    7578}
    7679
    … …  
    8184}
    8285
    83 RenderFlexibleBox::~RenderFlexibleBox() = default;
     86RenderFlexibleBox::~RenderFlexibleBox()
     87{
     88    if (!isAnonymous())
     89        InspectorInstrumentation::nodeLayoutContextChanged(nodeForNonAnonymous(), nullptr);
     90}
    8491
    8592const char* RenderFlexibleBox::renderName() const

  • trunk/Source/WebInspectorUI/ChangeLog

    r288470 r288492  
     12022-01-24  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: [Flexbox] Add instrumentation/protocol bits for flex layout containers
     4        https://bugs.webkit.org/show_bug.cgi?id=235454
     5
     6        Reviewed by Devin Rousso.
     7
     8        * UserInterface/Models/DOMNode.js:
     9
    1102022-01-24  Devin Rousso  <drousso@apple.com>
    211

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js

    r274229 r288492  
    11391139// Corresponds to `CSS.LayoutContextType`.
    11401140WI.DOMNode.LayoutContextType = {
     1141    Flex: "flex",
    11411142    Grid: "grid",
    11421143};
Note: See TracChangeset for help on using the changeset viewer.