Disambiguate voilà frontend via html data attributes

[timkpaine]

References

finos/perspective#2588
finos/perspective#2352
finos/perspective#1773

Code changes

This PR fixes Perspective, and maybe some other plugins. But more importantly: "if one is going to distinguish behavior that is specific to Voila, it can't share classnames with Jupyter." One should be able to differentiate voilà-specific behavior, since there are legimate, often subtle UI/UX differences with Lab/Notebook.

User-facing changes

This adds some very basic html data attributes to the top level html body, namely data-in-voila. I don't think it matters what this string actually is, merely that it is present and unique to voilà. This attribute will allow extensions to differentiate the voilà frontend in what is, imo, a minimally invasive way.

Backwards-incompatible changes

None!

[github-actions]

👈 Launch a Binder on branch timkpaine/voila/tkp/cssselector

[trungleduc]

Hi @timkpaine, IIUC you want to create plugins targeting only Voila? In this case, you can check for app.name ==='Voila' in the activation function.

[timkpaine]

In this case, you can check for app.name ==='Voila' in the activation function.

I would like to tweak visual behavior in voilà, independent from lab/notebook. Since the behavior is visual, it is via css rules. So ideally a pure-css solution would be in place.

[trungleduc]

Thanks @timkpaine