Web Inspector: CSS Grid Page Overlay support for masonry layout

[rcaliman-apple]

9a3f6dd

Web Inspector: CSS Grid Page Overlay support for masonry layout
https://bugs.webkit.org/show_bug.cgi?id=265381
rdar://118833618

Reviewed by Patrick Angle.

There are no actual rows or columns in the masonry axis of a masonry layout.
But we can borrow the concept to draw the two lines at the start and end of the masonry axis.

There are rows or columns in the grid axis of a masonry layout, just like in a regular grid layout.
Their lines will wrap the masonry layout in the other direction.

* Source/WebCore/inspector/InspectorOverlay.cpp:
(WebCore::InspectorOverlay::buildGridOverlay):

Canonical link: https://commits.webkit.org/271332@main

ce94356

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 gtk
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 tv	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 api-gtk
	✅ 🛠 tv-sim
✅ 🛠 🧪 merge	✅ 🛠 watch
	✅ 🛠 watch-sim

[webkit-early-warning-system]

EWS run on previous version of this PR (hash 46abb52)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 gtk
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 tv	✅ 🧪 mac-AS-debug-wk2	❌ 🧪 api-gtk
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

[patrickangle]

Will the first row/column position always be 0? Or should lastRowPosition actually equal firstRowPosition + masonryContentSize?

[rcaliman-apple]

Good catch! 👍

No, the first row (or column) position isn't always zero because it includes the border, padding and offsets for the grid container itself:

WebKit/Source/WebCore/rendering/RenderGrid.cpp

Line 1492 in f6ce8ab

positions[0] = borderAndPadding + offset.positionOffset;

Fixed in the latest patch.

Screenshot before

Screenshot after

(the gap between the last item and the bottom line is the default margin for a <p> from the browser styles)

[webkit-early-warning-system]

EWS run on current version of this PR (hash ce94356)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
⏳ 🧪 style	⏳ 🛠 ios	🛠 mac	🛠 wpe	⏳ 🛠 wincairo
⏳ 🧪 bindings	⏳ 🛠 ios-sim	⏳ 🛠 mac-AS-debug	🧪 wpe-wk2
🧪 webkitperl	⏳ 🧪 ios-wk2	🧪 api-mac	🧪 api-wpe
⏳ 🧪 webkitpy	⏳ 🧪 ios-wk2-wpt	🧪 mac-wk1	🛠 gtk
⏳ 🛠 🧪 jsc	⏳ 🧪 api-ios	🧪 mac-wk2	🧪 gtk-wk2
⏳ 🛠 🧪 jsc-arm64	⏳ 🛠 tv	⏳ 🧪 mac-AS-debug-wk2	🧪 api-gtk
	⏳ 🛠 tv-sim	🧪 mac-wk2-stress	⏳ 🛠 jsc-armv7
	⏳ 🛠 watch		⏳ 🧪 jsc-armv7-tests
	⏳ 🛠 watch-sim

[webkit-early-warning-system]

EWS run on current version of this PR (hash ce94356)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 gtk
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 tv	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 api-gtk
	✅ 🛠 tv-sim
✅ 🛠 🧪 merge	✅ 🛠 watch
	✅ 🛠 watch-sim

[webkit-commit-queue]

Committed 271332@main (9a3f6dd): https://commits.webkit.org/271332@main

Reviewed commits have been landed. Closing PR #20934 and removing active labels.