youtube.com: CE polyfill or not?

[martok]

Investigate if we want to polyfill webcomponents & co on youtube.com or not. Current (2022-04-10) state: we do not, and do not need to as youtube supplies their own polyfill in webcomponents-ce-sd.js.

Quote @UCyborg in #11:

YouTube: You're right, window.customElements is actually defined with default user agent Pale Moon spoofs for it, haven't noticed, thought it does non customElements way in that case. Another funny thing, SeaMonkey says by default in its user agent that it's both Firefox 68 and SeaMonkey and then those preview thumbnails work (unlike with UA that just says Firefox 60), video description section has different appearance and customElements is also defined in this case by YouTube. Seems the only case when it isn't defined is with UA of Firefox 65 or newer.

I like the latter combination simply because then it seems to behave like it does on popular browsers. But yes, since the behavior is quirky, no problem, I'll throw that commit out and just use it on my locally installed copy.

PM UA override: Mozilla/5.0 (%OS_SLICE% rv:60.0) Gecko/20100101 Firefox/60.0

Performance measured to scroll-interactive, in seconds:

action           palefill   UA
channel/videos   14         11
video page       20         20
youtube.com      18         18

So currently, their polyfill is a bit faster than ours on one page and the same on all others. Both versions get the same design (flyout thumbnails etc.).

Conclusion: not needed for PM, may be needed for SM.

[martok]

There are currently at least 3 states that the youtube page could be in, probably according to some experiment flags:

• Hover flyout works, dropdown menus work
• Hover flyout works, dropdown menus don't work (initialized offscreen, works after viewport resize)
• No flyout, dropdown menus don't work (initialized offscreen, works after viewport resize)

Unclear if this is a bug on their end or ours, can't reliably reproduce either of them: each cache clear + reload ends up in a different one.

This can currently be "fixed" by a user style which I consider out of scope for this extension.

@-moz-document domain("www.youtube.com") {
  ytd-menu-popup-renderer.style-scope.ytd-popup-container[style*="max-width: 0px"] {
    max-width: unset !important;
    max-height: unset !important;
  }
}

[martok]

Resolved by having native CustomElements.