search

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.46k stars 286 forks source link

First step at fixed label and handle support #441

Closed Kilian closed 4 years ago

Kilian commented 4 years ago

This ended up needing changes in quite a bunch more files than anticipated, and might need other things to update as well but I don't quite have the overview for that.

My feeling is that visbug-label would benefit from the same API as visbug-handle/visbug-hover, where label.position is given el and boundingClientRect is calculated in the web component (and isFixed is determined there too).

Nowlabel needs other plugins to deal with boundingClientRect, while handle just calculates it itself.

argyleink commented 4 years ago

hosted playground https://kilian-labels.glitch.me

Kilian commented 4 years ago

Does label.element.css need both position supplied?

I followed the way the other custom properties were defined in that file but I'm happy with using a fallback there too like I did in another file.

argyleink commented 4 years ago

hm, what should we do with position sticky elements?

Kilian commented 4 years ago

I don't know. Unless we make the labels children of the elements I can't think of a way that doesn't involve adding listeners to everything that's position sticky and getting their position on each scroll.

argyleink commented 4 years ago

i dont have any good answers either. this PR is pending squash and merge until I can do a local build and verify across a few test sites. tests and staging look good tho!