Nicholas Ray 3c433a5315 Add sectionObserver and tableOfContents component JS to respond to intersection changes ... This commits sets up the Table of Contents to bold the active section when the section is scrolled. Unfortunately, because our content does not have actual sections but instead has a flat list of headings and paragraphs, we can't use IntersectionObserver in the conventional way as it is optimized to find intersections of elements that are *within* the viewport and the callback will not reliably fire during certain scenarios (e.g. with fast scrolling or when the headings are not currently within the viewport). Furthermore, iterating through a list of elements and calling `getBoundingClientRect()` can be expensive and can also cause significant forced synchronous layouts that block the main thread. The best compromise in terms of performance and function that I've found is to use a combination of a throttled scroll event listener and IntersectionObserver's ability to asyncronously find the boundingClientRect of all elements off the main thread when `.observe` is called which is the approach this patch takes. Although this is an unorthodox way to use IntersectionObserver, performance profiles recorded while holding the "down" arrow and scrolling for 10 seconds with a 6x CPU throttle are comparable between master and this patch: master: https://phabricator.wikimedia.org/F34930737 this patch: https://phabricator.wikimedia.org/F34930738 Bug: T297614 Change-Id: I4077d86a1786cc1f4a7d85b20b7cf402960940e7		2022-01-26 14:11:43 -07:00
..
.eslintrc.json	Separate code from ES6 browsers from ES5 code	2021-10-21 15:55:04 -07:00
AB.js	Prevent A/B test enrollment hook from firing for unsampled	2021-12-13 17:31:17 -07:00
main.js	Add sectionObserver and tableOfContents component JS to respond to intersection changes	2022-01-26 14:11:43 -07:00
scrollObserver.js	[Sticky header refactor] Separate responsibilities	2021-12-03 14:30:10 -07:00
searchToggle.js	Reset scroll position when sticky header search input receives focus to fix Safari bug	2022-01-06 15:30:21 -07:00
sectionObserver.js	Add sectionObserver and tableOfContents component JS to respond to intersection changes	2022-01-26 14:11:43 -07:00
stickyHeader.js	Sticky header: Wait for some repainting to happen after VE teardown	2022-01-14 14:41:36 +00:00
tableOfContents.js	Add sectionObserver and tableOfContents component JS to respond to intersection changes	2022-01-26 14:11:43 -07:00