Flyout: convert current flyout to web component

[humitos]

As the first step, we want to copy the current flyout code and and convert it into a web component. It should work in the exact same way as the one generated by the current JS code and HTML returned by the endpoint.

It has to be floating at the bottom right for the first iteration.

This will allow us to start slowly migrating new projects to use the new flyout, and expose the other addons.

Front conversations

[humitos]

There is an initial implementation for this at #66. However, it changes the design and we don't want that for this initial iteration.

[humitos]

Take into account these PRs when working on this issue (cc @zanderle):

• Flyout: Use raw SVG instead of FontAwesome webfont readthedocs.org#9297
• Make flyout menu scrollable readthedocs.org#7375

[zanderle]

Do we want to replicate the styles exactly? This is what we have so far:

It's basically the same (the layout and the functionality) apart from the colors (which can be changed using css variables).

[mgeier]

It would be great if you could keep the CSS class names and the HTML structure the same, because several Sphinx themes customize the RTD flyout.
Some examples that I know of:

https://insipid-sphinx-theme.readthedocs.io/en/0.4.2/
https://pip.pypa.io/
https://executablebooks.org/

If you plan on changing the HTML structure fundamentally, it would be great if you could use a completely new set of CSS classes, because otherwise differentiating between the old and new versions would be very hard.

If you need testing, I'm volunteering for testing it with the insipid theme.

[humitos]

@mgeier We are re-designing the flyout completely using web components in an isolated way. It will be contained on a shadow DOM without the ability to customize it with regular CSS classes or Javascript modifications. Instead, we will be exposing a supported API to perform customization in a controlled way. See

• User API: communicate with the library #13
• Let theme authors decide the version of the data supported #61
• Customization patterns #51
• Trigger a CustomEvent on config load #60

If you need testing, I'm volunteering for testing it with the insipid theme.

Thanks, we will definitely need help for this. We are not there just yet, tho. The first implementation won't allow customization at all because we want to start testing it in a controlled way initially while we slowly roll it out. Once we are happy with the implementation, we will implement and expose the issues I liked in the previous paragraph. While working on those issues, talking to theme authors and users will be incredibly helpful for us so we can design and pattern that works for everybody.