<zcorpan__> ScribeNick: zcorpan

Virtual scroller

<zcorpan__> [presentation]

<spectranaut> note taking reference: https://docs.google.com/spreadsheets/d/1bor78BuB-bnb_m-5JSWziMirgUivI00197l3QqdGNgU/edit?usp=sharing

<zcorpan__> fergal_daly: behaves mostly as an empty div

<zcorpan__> fergal_daly: contains style and layout at the moment

<drousso> present_

<zcorpan__> fergal_daly: the contents are not in the DOM...

<zcorpan__> fergal_daly: like display: none

<zcorpan__> fergal_daly: WICG/display-locking

<zcorpan__> fergal_daly: activatable

<zcorpan__> fergal_daly: has same perf characteristics

<JakeA> I made the DOM comment before

<zcorpan__> fergal_daly: behave as if it's visible

<zcorpan__> fergal_daly: focus() scrollIntoView(), find in page, can reveal content

<zcorpan__> fergal_daly: deferred cost

<zcorpan__> fergal_daly: tab navigation

<zcorpan__> fergal_daly: anchor navigation, selection

<zcorpan__> fergal_daly: a11y purposes

<zcorpan__> fergal_daly: idea is that you build a scroller using this

<zcorpan__> fergal_daly: previously you would delete DOM objects

<zcorpan__> fergal_daly: instead you can build a scroller where things are invisible activatable

<zcorpan__> fergal_daly: things inside are visible as normal

<zcorpan__> fergal_daly: the browser will activate and scroll into view

<zcorpan__> fergal_daly: make the things around it visible as well

<zcorpan__> smfr: are you relying on intersectionobserver?

<zcorpan__> fergal_daly: yes

<zcorpan__> fergal_daly: debate on when things are activated

<zcorpan__> heycam: type cntr+f

<zcorpan__> fergal_daly: activate the first one

<zcorpan__> fergal_daly: have to figure out what to do with the tick parts

<zcorpan__> Domenic: all the elements above will push down

<zcorpan__> Domenic: accuracy of scrollbars vs performance

<zcorpan__> Domenic: tickmarks will be "pretty good"

<zcorpan__> fergal_daly: yeah, tradeoff

<smaug> mstange

<zcorpan__> mstange: if the user presses the first letter of the find bar, does the entire page need to be styled?

<zcorpan__> fergal_daly: Yes, but you can do it in chunks.

<zcorpan__> cbiesinger: does it require javacsript to activate?

<zcorpan__> fergal_daly: yes

<zcorpan__> fergal_daly: should scrolling activate or not?

<zcorpan__> Chris: I'll go with consensus

<zcorpan__> smfr: find a bunch of things containing A's

<zcorpan__> fergal_daly: first thing will be activated

<zcorpan__> smfr: it's now always going to paint, unless JS makes it invisible again?

<zcorpan__> smfr: ctrl+a can make all things visible?

<zcorpan__> Domenic: only the first thing that is found

<zcorpan__> fergal_daly: it will reveal the one with "a"

<zcorpan__> fergal_daly: it will scroll to that

<zcorpan__> fergal_daly: it should reveal everything around it

<zcorpan__> rniwa: something

<zcorpan__> rniwa: have to do layout in order to find anything at all

<zcorpan__> AmeliaBR: innerText workings

<zcorpan__> rniwa: which requires layout

<zcorpan__> Domenic: in browsers and spec

<zcorpan__> rniwa: that's not how you'd implement it

<zcorpan__> koji: (something)

<zcorpan__> smfr: the UA part of that is UA-dependent how to find stuff

<zcorpan__> Domenic: thjere's nothing in the spec about find

<zcorpan__> Domenic: anchor navigation is specified

<zcorpan__> rniwa: it's observable

<zcorpan__> rniwa: how would you find out what's there

<zcorpan__> rniwa: image doesn't load, use alt text

<zcorpan__> rniwa: sounds like a terrible user experience

<zcorpan__> Domenic: currently user doesn't find anything at all because it's not in th eDOM

<zcorpan__> rniwa: if you choose to implement your website that way

<zcorpan__> fergal_daly: people do

<zcorpan__> fergal_daly: for a largely text site it should just work

<zcorpan__> drousso: if you're dealing with custom elements

<zcorpan__> drousso: have to delay until custom element finishes its upgrade

<zcorpan__> drousso: delaying until script is done

<zcorpan__> fergal_daly: yes

<zcorpan__> fergal_daly: can imagine things in the DOM where things are done nicely first before the user scrolls

<zcorpan__> fergal_daly: take control of sequencing

<zcorpan__> drousso: (something)

<zcorpan__> Chris: if you remove those values from the list of things in the render subtree

<zcorpan__> Chris: elements not defined in the subtree will be run in the next microtask subtask

<zcorpan__> Domenic: spec is not finilized

<zcorpan__> chrishtr: will be kicked off in the usual order

<Zakim> xiaochengh, you wanted to discuss selection activation

<zcorpan__> xiaochengh: interaction , can't activate the subtree

<zcorpan__> fergal_daly: all we can do is better than what we do now

<zcorpan__> fergal_daly: it's not magic

<zcorpan__> fergal_daly: we need to have things formatted and pasted

<zcorpan__> xiaochengh: can we delay that until Cntrl+c

<zcorpan__> chrishtr: we can do it sync when we want, just like ctrl+f

<zcorpan__> AmeliaBR: making it more UA-dependent when this content becomes real instead of virtual

<zcorpan__> AmeliaBR: the UA can decide how to interact with these in a useful way

<Zakim> interested, you wanted to hear the order of events on anchor navigation

<zcorpan__> smaug: breaks microtask model

<zcorpan__> smaug: calls (something) at random times

<zcorpan__> smaug: extra microtask checkpoints

<zcorpan__> Domenic: let's cue a task to do a thing

<zcorpan__> smaug: ok

<zcorpan__> chrishtr: point well taken

<zcorpan__> JakeA: if there's a sudden movement in scroll pos

<zcorpan__> JakeA: anchor is visible but jumping to 500'th

<zcorpan__> fergal_daly: virtual scroller problem

<zcorpan__> fergal_daly: if it's "scroll by this many pixels"

<zcorpan__> fergal_daly: we need an API for author or external user for size hinting or something

<zcorpan__> fergal_daly: absolute size, relative to things you've seen so far...

<zcorpan__> fergal_daly: tradeoff of do you want to render or not

<zcorpan__> JakeA: the invisible ones, or they all come into view at once

<zcorpan__> heycam: in this model of virtual scroller

<zcorpan__> heycam: would be pretty common to style the entire page

<zcorpan__> heycam: when you find in page

<zcorpan__> heycam: a box for those things, potentially very large DOM

<zcorpan__> heycam: large box tree

<zcorpan__> fergal_daly: many things in a row

<zcorpan__> heycam: yea. not be able to avoid styling the entire doc

<zcorpan__> heycam: reflow and frame construction for rthings not displayed

<zcorpan__> heycam: hwo perf gonna be when you still need to do those things

<zcorpan__> fergal_daly: it's a problem, will come to it later

<zcorpan__> Domenic: demos show how fast this makes things

Scroller API

<zcorpan__> fergal_daly: JSON<-> DOM

<zcorpan__> fergal_daly: unusual API but I think it's nice

<zcorpan__> fergal_daly: API is <virtual-scroller>, put yoru content inside, it works

<zcorpan__> fergal_daly: it knows when to hide stuff

<zcorpan__> smfr: you're proposing a new element?

<zcorpan__> fergal_daly: it's a custom element

<zcorpan__> LOL

<zcorpan__> fergal_daly: it's very nice!

<zcorpan__> fergal_daly: you can delete divs,

<zcorpan__> fergal_daly: scrollbars require an API

<zcorpan__> fergal_daly: it's a container that knows when to hide its children

<zcorpan__> fergal_daly: how gonna do it? not machine learning...

<zcorpan__> fergal_daly: observe visible content

<zcorpan__> fergal_daly: tradeoffs, can't have everything

<zcorpan__> fergal_daly: assumes visible order == DOM order

<zcorpan__> fergal_daly: latency issue, no timing guarantees

<zcorpan__> fergal_daly: hasn't been a problem yet

<zcorpan__> fergal_daly: interserction observer looks like. it's observing these elements

<zcorpan__> fergal_daly: also mutation observer

<zcorpan__> fergal_daly: just moving things around, all we need to do is observe things visible, one above, one below

<zcorpan__> fergal_daly: will trigger at least one of the observers and we'll react

<zcorpan__> fergal_daly: if anyone can think of other cases...

<zcorpan__> AmeliaBR: interserction observer uses position after transformations?

<zcorpan__> fergal_daly: yes

<zcorpan__> fergal_daly: don't need to observe the whole world

<zcorpan__> fergal_daly: mutation observer, lets us know when content has changed

<zcorpan__> fergal_daly: slots everything into one big slot

<zcorpan__> fergal_daly: later prototype with 1 slot per child

<zcorpan__> fergal_daly: can baloon the number of slots, but seems to work ok

<zcorpan__> fergal_daly: this would actually scroll. a div, overflow:scroll, virtual-scroller inside

<zcorpan__> fergal_daly: we don't know about scrollbars

Demos

<zcorpan__> fergal_daly: simple infinite scroller

<zcorpan__> (shows demo that scrolls and stuff is fetched on scroll)

<zcorpan__> fergal_daly: can't observe thing being locked, but it is

<zcorpan__> fergal_daly: just replace div with virtual-scroller

<zcorpan__> fergal_daly: another demo. this is more interesting because this is just content

<zcorpan__> fergal_daly: addresss book

<zcorpan__> fergal_daly: sticky position

<zcorpan__> fergal_daly: B pops up as you go

<zcorpan__> fergal_daly: done the same way

<zcorpan__> fergal_daly: all it does is replace virtual-scroller with div

<zcorpan__> fergal_daly: some virtual scroller have ???

<zcorpan__> fergal_daly: do things as you would normally

<zcorpan__> fergal_daly: (demo resizing doing relayout) 60fps

<zcorpan__> fergal_daly: with div, 30fps

<zcorpan__> heycam: how many elements?

<zcorpan__> fergal_daly: 500

<zcorpan__> fergal_daly: wanted to add more

<zcorpan__> JakeA: hwo are you handling fling scrolling?

<zcorpan__> fergal_daly: it does unlock a region above and below

<zcorpan__> fergal_daly: can't do in this demo

<zcorpan__> fergal_daly: it's an issue

<zcorpan__> fergal_daly: fling can jump very far

<zcorpan__> Domenic: it takes a frame or so to catch up

<zcorpan__> JakeA: hit intersection observer... layout trashing?

<zcorpan__> Domenic: happens once a frame

<zcorpan__> Domenic: fling takes half a second. 30 frames

<zcorpan__> chrishtr: how much does JS need to catch up

<zcorpan__> smfr: it depends on how your IO works. you can add margins too

<zcorpan__> fergal_daly: don't have a demo

<zcorpan__> AmeliaBR: intersectionobserver would tell something is onscreen

<zcorpan__> fergal_daly: figuring out what should be onscreen takes JS to figure out

<zcorpan__> fergal_daly: it gets new stuff on screen in the same frame

<zcorpan__> JakeA: fixed height?

<zcorpan__> fergal_daly: it won't be the same stuff that comes on screen. will be different stuff

<zcorpan__> fergal_daly: it'll go down 60% and determine based on placeholder heights

<zcorpan__> JakeA: so for display:none, things are at the top

<zcorpan__> JakeA: JS has to take a guess

<zcorpan__> fergal_daly: yes

<zcorpan__> fergal_daly: can resize font

<zcorpan__> fergal_daly: can restlye things

<zcorpan__> fergal_daly: lower fps with the div

<zcorpan__> fergal_daly: ok so the HTML standard...

<zcorpan__> fergal_daly: it's a pretty heavy doc. 11MB with a lot of stuff

<zcorpan__> fergal_daly: not as bad as it used to be

<zcorpan__> fergal_daly: (showing waterfall of page load)

<zcorpan__> fergal_daly: happily it's a doc with 11000 elements that are siblings

<zcorpan__> fergal_daly: using virtual-scroller is easy

<zcorpan__> fergal_daly: far fewer red frames

<zcorpan__> fergal_daly: doc got better at some point

<zcorpan__> Domenic: cntrl+f works!

<zcorpan__> Domenic: user experience when loading page is much smoother

<zcorpan__> fergal_daly: there was a problem with ctrl+f... took 5 minutes with 100% cpu

<zcorpan__> Domenic: few more days!

<zcorpan__> AmeliaBR: perf issue of HTML spec can have to do with custom element upgrading

<zcorpan__> fergal_daly: 1000 divs is still pretty heavy

<zcorpan__> fergal_daly: more proof of concept than a prototype

<zcorpan__> fergal_daly: loading the HTML standard again, loading into a thing

<zcorpan__> fergal_daly: many many slots

<zcorpan__> fergal_daly: takes a while to load

<zcorpan__> fergal_daly: resizing the HTML standard, 20-30 fps

<zcorpan__> heycam: what content size property?

<zcorpan__> fergal_daly: this is a different implementation. tree impl

<zcorpan__> fergal_daly: tree impl builds a 16 way tree of elements

<zcorpan__> fergal_daly: leaves are slots

<zcorpan__> fergal_daly: leaves are grouped together in 16, in 16, etc

<zcorpan__> fergal_daly: slots and all of their ancestors

<zcorpan__> fergal_daly: no long runs of divs of what is unlocked

<zcorpan__> koji: (missed question)

<zcorpan__> heycam: may be relevant for scrollbar thumb size

<zcorpan__> fergal_daly: sets a fixed content sizes

<zcorpan__> fergal_daly: sums them and makes them bigger

<zcorpan__> fergal_daly: tree one has more complex implementation

<zcorpan__> fergal_daly: 100,000 pagagraphs, works fine

<zcorpan__> fergal_daly: sibling can go down to 2fps

<zcorpan__> Domenic: rendersubtree is very scalable

<zcorpan__> smfr: this is a different virtual-scroller impl, right? yes. so you can nest them? yes

<zcorpan__> AmeliaBR: in initial intro, virtual scrolelr is about content loading. also as you scroll down, removing content

<zcorpan__> AmeliaBR: that side doesn't seem to be part of the proposal

<zcorpan__> AmeliaBR: accumulate

<zcorpan__> fergal_daly: invisible things at the top

<zcorpan__> fergal_daly: small window of visible things

<zcorpan__> fergal_daly: browser CAN discard

<zcorpan__> AmeliaBR: ok, 2 things that are tangled

<zcorpan__> AmeliaBR: custom element

<zcorpan__> AmeliaBR: browser would be able to address things based on user interaction

<zcorpan__> AmeliaBR: removing the attribute

<zcorpan__> AmeliaBR: i don't know how it would know how to put the attribute back on

<zcorpan__> fergal_daly: the browser wouldn't

<zcorpan__> koji: doing subtree?

<zcorpan__> fergal_daly: rendersubtree is more readily standardizable thing

<zcorpan__> Domenic: interest in ??? need primitive first.

<zcorpan__> koji: rendersubtree is what we want to standardize

<zcorpan__> fergal_daly: no proposal to standardize virtual-scroller

<zcorpan__> Majid: (missed)

<zcorpan__> fergal_daly: tab set.. details element

<zcorpan__> fergal_daly: cant' currently recreate the details element, can with this

<zcorpan__> chrishtr: optimizing page load generally

<zcorpan__> chrishtr: do the details element , or not actually close the details element and stil have good perf

<zcorpan__> fergal_daly: google style guides, all collapsed, ctrl+f... need to uncollapse before searching

<zcorpan__> chrishtr: invisible content is still in the DOM, still has layout conceptually

<zcorpan__> chrishtr: if script wanted to it could read that layout without displaying content

<zcorpan__> Majid: accessibility

<zcorpan__> fergal_daly: the content is there

<zcorpan__> AmeliaBR: hope you're coordinating with the aria-virtualcontent proposal

<zcorpan__> smfr: hwo much of the proposal can you remove but keep optimization in the browser

<zcorpan__> smfr: you can remove complexity

<zcorpan__> smfr: is there a reduced version of this?

<zcorpan__> smfr: can we not need this attribute?

<zcorpan__> smfr: containment plus content-size plsu something custom elements

<zcorpan__> Domenic: need an opt-in fo rthe perf tradeoff

<zcorpan__> Domenic: CSSWG wanted to maek it usable for visible content

<zcorpan__> chrishtr: if we had a thing like that...

<zcorpan__> chrishtr: browser could notice that it doesn't need to render

<zcorpan__> chrishtr: remove the size containment

<zcorpan__> chrishtr: it would have to remove the inviisble thing

<zcorpan__> chrishtr: would result in something like this

<zcorpan__> chrishtr: if yo ucan think of another way to do it, would be amazing

<zcorpan__> JakeA: tabs case compelling... not something yo uscroll to

<zcorpan__> smfr: background tab, events

<zcorpan__> rniwa: (missed) not for us

<zcorpan__> chrishtr: it's technically not required

<zcorpan__> fergal_daly: filtering with mutation observer

<zcorpan__> JakeA: do we have other APIs where browser changes attributes?

<zcorpan__> Domenic: details

<zcorpan__> https://docs.google.com/spreadsheets/d/1bor78BuB-bnb_m-5JSWziMirgUivI00197l3QqdGNgU/edit#gid=0

This is scribe.perl Revision: 1.154  of Date: 2018/09/25 16:35:56  
Check for newer version at http://dev.w3.org/cvsweb/~checkout~/2002/scribe/

Guessing input format: Irssi_ISO8601_Log_Text_Format (score 1.00)

Succeeded: s/find bar ???/find bar, does the entire page need to be styled?/
Succeeded: s/X???: something something/fergal_daly: Yes, but you can do it in chunks./
Succeeded: s/(missed)/it depends on how your IO works. you can add margins too/
Succeeded: s/10,000/100,000/
Succeeded: s/(something)/this is a different virtual-scroller impl, right? yes. so you can nest them? yes/
Succeeded: s/hope there's an area for virtual content/hope you're coordinating with the aria-virtualcontent proposal/
Present: AmeliaBR JuanCorona Valerie_Young dauwhe_ drousso marisa mstange rniwa romain_ zcorpan__ smfr mattwoodrow chrishtr kiyoshi
Found ScribeNick: zcorpan
Inferring Scribes: zcorpan

WARNING: 2 scribe lines found (out of 353 total lines.)
Are you sure you specified a correct ScribeNick?


WARNING: No meeting title found!
You should specify the meeting title like this:
<dbooth> Meeting: Weekly Baking Club Meeting


WARNING: No meeting chair found!
You should specify the meeting chair like this:
<dbooth> Chair: dbooth


WARNING: No date found!  Assuming today.  (Hint: Specify
the W3C IRC log URL, and the date will be determined from that.)
Or specify the date like this:
<dbooth> Date: 12 Sep 2002

People with action items: 

WARNING: IRC log location not specified!  (You can ignore this 
warning if you do not want the generated minutes to contain 
a link to the original IRC log.)