Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web Inspector: Crash when inspecting CSS Grid without defined columns or rows #13260

Merged
merged 1 commit into from
Apr 28, 2023
Merged

Web Inspector: Crash when inspecting CSS Grid without defined columns or rows #13260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions LayoutTests/inspector/dom/showFlexOverlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
{
let suite = InspectorTest.createAsyncSuite("DOM.showFlexOverlay");

const allEnabledOverlayOptions = {
showOrderNumbers: true,
};

async function getFlexContainerNode() {
let doc = await WI.domManager.requestDocument();
let nodeId = await doc.querySelector(".flex-container");
Expand Down Expand Up @@ -46,12 +50,12 @@
let container = await getFlexContainerNode();

InspectorTest.log("Requesting to show flex overlay for first .flex-container");
await container.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await container.showLayoutOverlay({color: WI.Color.fromString("magenta"), ...allEnabledOverlayOptions});
await checkFlexOverlayCount(1);

// No error should occur if showing flex overlay for a node that already has one.
InspectorTest.log("Requesting to show a different flex overlay for first .flex-container");
await container.showLayoutOverlay({color: WI.Color.fromString("green")});
await container.showLayoutOverlay({color: WI.Color.fromString("green"), ...allEnabledOverlayOptions});
await checkFlexOverlayCount(1);

// No error should occur when hiding the flex overlay.
Expand All @@ -69,11 +73,11 @@
let [first, second] = await getAllFlexContainerNodes();

InspectorTest.log("Requesting to show first flex overlay");
await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await first.showLayoutOverlay({color: WI.Color.fromString("magenta"), ...allEnabledOverlayOptions});
await checkFlexOverlayCount(1);

InspectorTest.log("Requesting to show second flex overlay");
await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await second.showLayoutOverlay({color: WI.Color.fromString("green"), ...allEnabledOverlayOptions});
await checkFlexOverlayCount(2);

// No error should occur when hiding the first flex overlay.
Expand All @@ -96,11 +100,11 @@
let [first, second] = await getAllFlexContainerNodes();

InspectorTest.log("Requesting to show first flex overlay");
await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await first.showLayoutOverlay({color: WI.Color.fromString("magenta"), ...allEnabledOverlayOptions});
await checkFlexOverlayCount(1);

InspectorTest.log("Requesting to show second flex overlay");
await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await second.showLayoutOverlay({color: WI.Color.fromString("green"), ...allEnabledOverlayOptions});
await checkFlexOverlayCount(2);

// No error should occur when hiding all flex overlays.
Expand Down Expand Up @@ -142,7 +146,7 @@

InspectorTest.log("Requesting to show flex overlay for invalid nodeId -1");
await InspectorTest.expectException(async () => {
await DOMAgent.showFlexOverlay(-1, { flexColor: WI.Color.fromString("magenta").toProtocol() });
await DOMAgent.showFlexOverlay(-1, { flexColor: WI.Color.fromString("magenta").toProtocol(), ...allEnabledOverlayOptions });
});

await checkFlexOverlayCount(0);
Expand Down
26 changes: 17 additions & 9 deletions LayoutTests/inspector/dom/showGridOverlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
{
let suite = InspectorTest.createAsyncSuite("DOM.showGridOverlay");

const allEnabledOverlayOptions = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i wonder if we should do this for the flex overlay too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't hurt.

showLineNames: true,
showLineNumbers: true,
showExtendedGridLines: true,
showTrackSizes: true,
showAreaNames: true,
};

async function getGridContainerNode() {
let doc = await WI.domManager.requestDocument();
let nodeId = await doc.querySelector(".grid-container");
Expand Down Expand Up @@ -46,12 +54,12 @@
let container = await getGridContainerNode();

InspectorTest.log("Requesting to show grid overlay for first .grid-container");
await container.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await container.showLayoutOverlay({color: WI.Color.fromString("magenta"), ...allEnabledOverlayOptions});
await checkGridOverlayCount(1);

// No error should occur if showing grid overlay for a node that already has one.
InspectorTest.log("Requesting to show a different grid overlay for first .grid-container");
await container.showLayoutOverlay({color: WI.Color.fromString("green")});
await container.showLayoutOverlay({color: WI.Color.fromString("green"), ...allEnabledOverlayOptions});
await checkGridOverlayCount(1);

// No error should occur when hiding the grid overlay.
Expand All @@ -69,11 +77,11 @@
let [first, second] = await getAllGridContainerNodes();

InspectorTest.log("Requesting to show first grid overlay");
await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await first.showLayoutOverlay({color: WI.Color.fromString("magenta"), ...allEnabledOverlayOptions});
await checkGridOverlayCount(1);

InspectorTest.log("Requesting to show second grid overlay");
await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await second.showLayoutOverlay({color: WI.Color.fromString("green"), ...allEnabledOverlayOptions});
await checkGridOverlayCount(2);

// No error should occur when hiding the grid overlay.
Expand All @@ -96,11 +104,11 @@
let [first, second] = await getAllGridContainerNodes();

InspectorTest.log("Requesting to show grid overlay");
await first.showLayoutOverlay({color: WI.Color.fromString("magenta")});
await first.showLayoutOverlay({color: WI.Color.fromString("magenta"), ...allEnabledOverlayOptions});
await checkGridOverlayCount(1);

InspectorTest.log("Requesting to show a different grid overlay");
await second.showLayoutOverlay({color: WI.Color.fromString("green")});
await second.showLayoutOverlay({color: WI.Color.fromString("green"), ...allEnabledOverlayOptions});
await checkGridOverlayCount(2);

// No error should occur when hiding the grid overlay.
Expand Down Expand Up @@ -142,7 +150,7 @@

InspectorTest.log("Requesting to show grid overlay for invalid nodeId -1");
await InspectorTest.expectException(async () => {
await DOMAgent.showGridOverlay(-1, { gridColor: WI.Color.fromString("magenta").toProtocol() });
await DOMAgent.showGridOverlay(-1, { gridColor: WI.Color.fromString("magenta").toProtocol(), ...allEnabledOverlayOptions });
});

await checkGridOverlayCount(0);
Expand All @@ -161,8 +169,8 @@
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px 100px 100px;
grid-template-rows: repeat(2, 10px) repeat(auto-fit, 50px);
grid-auto-columns: minmax(100px, auto);
grid-template-rows: 100px repeat(2, 10px) repeat(auto-fit, 50px);
background-color: white;
color: gray;
}
Expand Down
2 changes: 1 addition & 1 deletion Source/WebCore/inspector/InspectorOverlay.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1441,7 +1441,7 @@ static Vector<String> authoredGridTrackSizes(Node* node, GridTrackSizingDirectio
}
}

auto* cssValueList = dynamicDowncast<CSSValueList>(*cssValue);
auto* cssValueList = dynamicDowncast<CSSValueList>(cssValue.get());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need to .get()? or can we just dynamicDowncast<CSSValueList>(cssValue)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we need the .get() here, otherwise we try to downcast the RefPtr itself to CSSValueList, which doesn't compile 😅

if (!cssValueList)
return { };

Expand Down