Re: [csswg-drafts] [css-view-transitions-2] Script event on new Document for cross-document ViewTransitions (#8805)

The CSS Working Group just discussed `[css-view-transitions-2] Script event on new Document for cross-document ViewTransitions`, and agreed to the following:

* `RESOLVED: Add a single event to carry the cross-document VT object. Work with HTML folks to define exact timing, and whether it's a VT-specific event or generic (always fired)`

<details><summary>The full IRC log of that discussion</summary>
&lt;noamr> https://github.com/w3c/csswg-drafts/issues/8805#issuecomment-1637790887<br>
&lt;fantasai> noamr: This comment summarizes the issue<br>
&lt;fantasai> noamr: Let's say both documents opted into a transition<br>
&lt;fantasai> noamr: We are at the state where the new document is ready to present and activate the transition<br>
&lt;fantasai> noamr: Some transitions need to be in JS<br>
&lt;fantasai> noamr: e.g. animating using WebAnimations API<br>
&lt;fantasai> noamr: Another use case is JS wanting to have access to the ViewTransition object<br>
&lt;fantasai> noamr: to know when it ends, or to be able to call skipTransition()<br>
&lt;fantasai> noamr: This is a problem we're trying to solve<br>
&lt;fantasai> noamr: Currently in the draft spec, we invented a new event "reveal"<br>
&lt;fantasai> noamr: right before the first frame<br>
&lt;fantasai> noamr: Right when the document is unblocked for render<br>
&lt;fantasai> noamr: That event will have an optional ViewTransition object<br>
&lt;fantasai> noamr: You can sign up to its promises, or skip it<br>
&lt;fantasai> noamr: The "reveal" event could be useful to HTML in any case<br>
&lt;fantasai> noamr: page visibility events only fire when the document is fully loaded<br>
&lt;fantasai> noamr: so this is how it's currently presented in the draft spec<br>
&lt;fantasai> noamr: We like it for this purpose, and also because it lets us keep the existing ViewTransition object<br>
&lt;fantasai> noamr: One of the design principles is that same-page and cross-page transitions should be as similar as possible wrt API a<br>
&lt;fantasai> noamr: Another idea was to only send an event for actual view transitions, not for every reveal<br>
&lt;fantasai> noamr: That event would require the ViewTransition object, wouldn't be optional<br>
&lt;fantasai> noamr: Another idea was to fire events for when the VT starts, is ready, and finished<br>
&lt;fantasai> noamr: This is a little more consistent with touch events etc.<br>
&lt;fantasai> noamr: where they have discrete events, rather than register to one event<br>
&lt;fantasai> noamr: In all cases, updateCallbackDone promise would be resolved from the beginning, as it's not relevant<br>
&lt;fantasai> astearns: My question about reveal event, say it might be useful for other than VT. Did you have examples in mind?<br>
&lt;fantasai> noamr: It's a place where you can register for events, e.g. when the first content paints etc.<br>
&lt;fantasai> noamr: and also place where you can do last-minute things that affect presentation<br>
&lt;fantasai> noamr: e.g. if you think not enough of the document is parsed, so you want to hide some elements<br>
&lt;khush> q+<br>
&lt;fantasai> noamr: other use cases have not been explored much, but it felt like this is a new lifecycle point that we should expose rather than only expose the one use case for VT<br>
&lt;astearns> ack khush<br>
&lt;fantasai> khush: Concrete use case from WebPerf, if you're adding new resources that you want to block rendering, this event lets you measure that<br>
&lt;fantasai> khush: Because it fires right before firstRender, it allows customizing your transition<br>
&lt;fantasai> khush: E.g. if you're going from one page to another, but the image hasn't been fetched yet, you might choose to do a different transition<br>
&lt;fantasai> astearns: In addition to testing blocking things, you could use it to test blocking in general. Since if blocking, would affect when this event fires<br>
&lt;fantasai> astearns: Any more comments about the event?<br>
&lt;astearns> ack fantasai<br>
&lt;TabAtkins> fantasai: I don't remember from the spec (even tho i recently read it) - are there events for same-page tranitions?<br>
&lt;TabAtkins> fantasai: or was it just promises?<br>
&lt;TabAtkins> noamr: promises only<br>
&lt;TabAtkins> fantasai: in that case i don't htink we should do the third option (separate events for stages). if we want that we should do it for both<br>
&lt;SebastianZ> q+<br>
&lt;TabAtkins> fantasai: and if we want it for same-document we should also have it for cross-document<br>
&lt;fantasai> noamr: Reason I brought up option 3, if you just want to respond when transition is finished<br>
&lt;fantasai> noamr: you have to add an event listener onto the promise. Jump through hoops<br>
&lt;fantasai> noamr: but it's a trade-off between that and same-document<br>
&lt;fantasai> khush: If you have just one event with the VT object, you have access to everything you need<br>
&lt;fantasai> khush: In same-document, you already have the VT<br>
&lt;fantasai> khush: [something about customizing]<br>
&lt;fantasai> khush: This aspect of reveal event conceptually maps to one of the promises in smae-document case<br>
&lt;fantasai> khush: in that case you have your own callback, which sets up the DOM, and then the first promise resolves<br>
&lt;fantasai> khush: since no callback setting up the DOM in cross-document case, we need some event to do conceptually what's happening<br>
&lt;fantasai> khush: to let you know when that's done<br>
&lt;astearns> ack SebastianZ<br>
&lt;fantasai> SebastianZ: I think we should still do it for both same-document and cross-document transitions<br>
&lt;fantasai> SebastianZ: for consistency<br>
&lt;fantasai> SebastianZ: I would have one event for them and then you could have an attribute on those events to distinguish which kind of transition it actually is<br>
&lt;fantasai> noamr: What's the proposal exactly?<br>
&lt;fantasai> SebastianZ: Maybe start/ready/finished and distinguish by an attribute on the event whether it's cross-origin or same-document<br>
&lt;fantasai> [some clarifications on naming]<br>
&lt;fantasai> SebastianZ: My point was to have one event that is covering all those cases, and distinguish by the attributes of those document<br>
&lt;fantasai> noamr: so also when you have a transition you started yourself?<br>
&lt;fantasai> SebastianZ: for consistency<br>
&lt;fantasai> astearns: If we have this reveal event, and it fires always before first render<br>
&lt;fantasai> astearns: it will fire for every document<br>
&lt;fantasai> astearns: when you have a same-origin transition<br>
&lt;fantasai> astearns: and you have this event firing, does it contain the VT object even though it's not a cross-origin VT<br>
&lt;bramus> fantasai: i think we are getting confused here. There are cross doc and same doc transitions<br>
&lt;bramus> … for same docs we have an existing api and proposal<br>
&lt;bramus> … in same doc case you create a VT by calling a method<br>
&lt;bramus> … you know you created that, because you said so<br>
&lt;bramus> … when doing cross-doc, you need to get the VT object which the UA creates automatically<br>
&lt;bramus> … for that we need an event, or to add it to the doc somehow<br>
&lt;khush> thanks for the excellent summary fantasai!<br>
&lt;bramus> … we are alking about 3 options<br>
&lt;bramus> … events for phases? yes, we should have them for same-doc as cross doc<br>
&lt;bramus> … [missed]<br>
&lt;khush> q+<br>
&lt;astearns> ack fantasai<br>
&lt;astearns> aack khush<br>
&lt;astearns> ack khush<br>
&lt;fantasai> khush: thanks for the summary<br>
&lt;fantasai> khush: My vote is for one event that gives you access to the VT object<br>
&lt;fantasai> khush: if we have multiple events, having it for the same document transitions is awkward<br>
&lt;fantasai> khush: because we will soon have ability to trigger multiple same-document transitions<br>
&lt;fantasai> khush: so if this event is limited to having a cross-document transition<br>
&lt;fantasai> khush: [missed]<br>
&lt;fantasai> khush: seems much easier to wrap your head around<br>
&lt;TabAtkins> fantasai: so i fthe start/ready/finsihed events for samedocumetn doesn't make sense<br>
&lt;TabAtkins> fantasai: then we should def go for one of th eother two options<br>
&lt;TabAtkins> fantasai: either special event that only fires for a VT or the reveal event<br>
&lt;TabAtkins> fantasai: interested in hearing about the perf impls<br>
&lt;TabAtkins> fantasai: and wondering hwo html folks feel about reveal more generally<br>
&lt;fantasai> astearns: Any thoughts on perf?<br>
&lt;fantasai> [silence]<br>
&lt;emilio> q+<br>
&lt;fantasai> astearns: Have you discussed with HTML folks about new event?<br>
&lt;fantasai> noamr: Was discussed in HTML ??<br>
&lt;fantasai> noamr: don't think there's any particular perf implications<br>
&lt;fantasai> noamr: wanted to understand use case better<br>
&lt;fantasai> emilio: isn't the reveal effectively the first request Animation Frame callback?<br>
&lt;fantasai> noamr: it's before that<br>
&lt;fantasai> noamr: rAF happens [missed]<br>
&lt;fantasai> noamr: Reveal happens right when last render-blocking element is unblocked, so when you're about to have your first rAF callback<br>
&lt;fantasai> noamr: but before actual rendering<br>
&lt;fantasai> noamr: if you write polyfill code today, you would check all your render-blocking styles and scripts, and wait until all loaded, and then fire an event<br>
&lt;fantasai> emilio: so point is you cannot insert new render-blocking stuff then, because those are only parser-inserted?<br>
&lt;fantasai> noamr: you have to also listen for HEAD being finished.You can't add more render-blocking at that point<br>
&lt;fantasai> emilio: is there use case for exposing this timing, rather than firing right before first rAF callback?<br>
&lt;fantasai> emilio: presumably point of reveal event is you might want DOM set up in a particular way<br>
&lt;fantasai> emilio: and that's what rAF does<br>
&lt;fantasai> emilio: so it would avoid exposing a new timepoint<br>
&lt;fantasai> emilio: but I don't feel strongly either way<br>
&lt;fantasai> ???: Several reasons to make this appealing<br>
&lt;fantasai> ???: First is providing the VT object -- rAF can't provide that<br>
&lt;astearns> s/???/vmpstr<br>
&lt;emilio> s/???/vmpstr<br>
&lt;fantasai> vmpstr: second is back/forward<br>
&lt;fantasai> vmpstr: ...<br>
&lt;fantasai> [missed something]<br>
&lt;fantasai> khush: can discuss at HTML meeting, if there's more thinking about timing can bring with HTML group<br>
&lt;fantasai> khush: this is useful for perf measurement<br>
&lt;astearns> ack emilio<br>
&lt;fantasai> emilio: yes, it seems like something that HTML folks would have an opinion on<br>
&lt;fantasai> emilio: but seems like using first request animation frame isn't quite doable ecause of the ?? cache<br>
&lt;fantasai> emilio: if we need a new event, as long as it's well-defined when it should fire, seems OK<br>
&lt;fantasai> emilio: just feels a bit weird to expose this extra last render-blocking thing<br>
&lt;fantasai> emilio: especially because a bunch of stylesheets can be loaded async<br>
&lt;fantasai> emilio: authors would observe<br>
&lt;fantasai> emilio: so if you have a stylesheet in the memory cache, right now that effectively doesn't block rendering<br>
&lt;fantasai> emilio: but from PoV of author, it probably should behave like that<br>
&lt;fantasai> emilio: and I think right now what we do is fire load event<br>
&lt;fantasai> emilio: so timing details is worth raising with HTML folks<br>
&lt;fantasai> emilio: but need it to happen before page is presented<br>
&lt;fantasai> emilio: so can't do rAF or synchornously when last stylesheet loads etc.<br>
&lt;astearns> ack fantasai<br>
&lt;emilio> fantasai: it sounds we could resolve we want a single event with the vt object attached<br>
&lt;emilio> ... not sure we want it to be fired only for vt or something more generic<br>
&lt;emilio> ... is that what we're landing<br>
&lt;emilio> khush: also emilio's question about when this is fired<br>
&lt;emilio> fantasai: which might depend on which of those two we land on<br>
&lt;emilio> fantasai: in that case we should resolve on that and then discuss further with the html folks?<br>
&lt;fantasai> astearns: So let's resolve to have a single event to carry the VT object<br>
&lt;fantasai> astearns: and work with HTML folks to define exact timing and whether it's a vT-specific event or generic<br>
&lt;fantasai> astearns: any objections?<br>
&lt;fantasai> RESOLVED: Add a single event to carry the cross-document VT object. Work with HTML folks to define exact timing, and whether it's a VT-specific event or generic (always fired)<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8805#issuecomment-1640688426 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 18 July 2023 17:50:35 UTC