Track Responsive-Design carousel resize events - #579
Open
issackjohn wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for webkit-speedometer-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Follow-up to the review feedback on WebKit#453, which asked to track the number of resize events so we can verify consistency across browsers. - Add PageElement.observeResizeEvents() to count distinct content-box width changes delivered by ResizeObserver. The first delivery seeds the baseline and is not counted, and repeated deliveries of the same width are ignored. - Observe the recipe carousel during ReduceWidthIn5Steps and IncreaseWidthIn5Steps, and log the observed count so the numbers can be compared across browsers. - Add unittests covering baseline seeding, distinct width changes, and duplicate-width deliveries.
issackjohn
force-pushed
the
track-carousel-resize-events
branch
from
July 24, 2026 23:38
226cbbf to
6e98693
Compare
Contributor
Author
|
@camillobruni PTAL :) |
| // Resolves on the first delivery so callers can seed a baseline before resizing. | ||
| const ready = new Promise((resolve) => { | ||
| markReady = resolve; | ||
| }); |
Contributor
There was a problem hiding this comment.
Is there a specific use-case you had in mind for detaching observer setup and sarting it?
I think we could just either:
- always await this promise here
- just not await it and assume we that we migth be off by 1? (e.g. just don't count it) and we have to make sure that at the time we stop, we have handlede all events.
| const contentBoxSize = entry.contentBoxSize; | ||
| const inlineSize = Array.isArray(contentBoxSize) ? contentBoxSize[0]?.inlineSize : contentBoxSize?.inlineSize; | ||
| const width = inlineSize ?? entry.contentRect.width; | ||
| // The first delivery seeds the baseline width without counting it as a change. |
Contributor
There was a problem hiding this comment.
nit: I was a bit confused about "delivery" :) I "callback" might be more common?
| }, | ||
| disconnect() { | ||
| observer.disconnect(); | ||
| }, |
Contributor
There was a problem hiding this comment.
Would it make sense to have a single stop() api here that disconnects and returns the count?
I don't tihnk we would want to manually interact with the underlaying observer in any other way.
| if (count) | ||
| console.warn(`IncreaseWidthIn5Steps: recipe-carousel ResizeObserver delivered ${count} coalesced width change(s).`); | ||
| else | ||
| console.warn("IncreaseWidthIn5Steps: recipe-carousel ResizeObserver delivered 0 width changes; expected width changes during iframe resize."); |
Contributor
There was a problem hiding this comment.
nit: maybe add a helper to print this message?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to the review feedback on #453, which asked to track the number of resize events so we can verify consistency across browsers.