VisBug should render in `:top-layer`

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

https://visbug.web.app

Apache License 2.0

5.4k stars 283 forks source link

VisBug should render in `:top-layer` #610

Open FortyGazelle700 opened 9 months ago

FortyGazelle700 commented 9 months ago

When using the new browser dialog element, and call showModal() and trying to visually inspect an element using VisBug, VisBug appears underneath the top layer and get shown behind the modal, making it really hard to inspect modal elements using this extension.

argyleink commented 9 months ago

tooootally.

visbug needs to exist on :top-layer too so it can overlay these new elements that inhabit the top layer.

hchiam commented 7 months ago

i had a quick skim over https://stackoverflow.com/questions/75509725/place-an-element-above-the-top-layer and some of the links there.

HMW put VisBug in the :top-layer?

somehow inject elements into the :top-layer?
put things inside an invisible <dialog>, since <dialog>s can be stacked?

argyleink commented 7 months ago

my current thinking is: project needs to move to / experiment with popover, which will get put into the top layer, can stack on each other, etc. there's a polyfill for it too https://github.com/oddbird/popover-polyfill

argyleink commented 7 months ago

after that, it'd be nice to move to anchor() positioning too, but that spec is less stable and adopting it now would likely be premature.