mrmrs / pesticide

Kill your css layout bugs

Home Page:http://pesticide.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Results box hides content

winkerVSbecks opened this issue · comments

The results box – div with id pesticide-for-chrome-result – overlays on top of the site content. This makes it impossible to debug things that are in that part of the window.

  • Is there a way to temporarily hide it?
  • Would you be open to a PR which makes the box draggle? That way you can move it around the window if it's obscuring some content of interest.

I'm open to a PR for sure! It's not my repo, but FWIW 👍.

I think the idea of a toggle (with like an X in the upper corner of the div-thingy) sounds nice, but making it draggable is cool too. Another idea I had was to make it switch to the top when you scrolled down within X% of the the bottom of the page, but I'm concerned that it'll be jerky and that introducing an event listener on the scroll event is going to cause weird performance issues. There's no telling what is happening on the page to begin with, so if you inject some RAF-type scenario it could get crazy.

That brings up something else to consider: Keeping this in vanilla JS and not introducing dependencies is probably the best bet to avoiding unforeseen issues. Again, there's no telling what is on the page when you inject this JS.

@mrmrs what do you think? You tweeted you had some ideas...?

@winkerVSbecks @bradleyflood Check the update I just pushed. Always off, hold control to see the banner. I think it's a pretty clean solution.

awesome 👍