Add indicator of what a "region" is when I'm hovering over it.

[flukeout]

The copy asks me to select a region, but I'm not sure what region means and get no indication of "regions" when I move my mouse around. Can we add an outline around a region so I can pick what I want with more certainty, it's a bit of a gamble right now.

[ianb]

Thinking this through, this is going to be harder than I initially thought.

When we determine the rectangle given a click we briefly remove the darkening overlay and do a DOM operation to determine what's at that location. Then we put it back, and you are none the wiser. But we can't do that every time the mouse moves.

I think it would work fine if we had pointer-events: none (though I'm not sure how that affects eventFromPoint). But that means you can accidentally interact with the page during selection. Maybe we could catch all the events (with useCapture), but it potentially opens up a lot of fiddly interactions.

[flukeout]

Oh yeah that does sound tricky! Here's a wacky idea:

• Parse the page when the screenshot tool is first enabled
• Based on that, build a little JSON map of each element's x, y, height, width
  • Or at least like, 2 children deep from the base elements
  • Or maybe only elements with a minimum size
• Now as you move the mouse around, get the mouse x,y
• Add the viewports scroll position to the mouse's y position
• Figure out what element is underneath it based on the JSON map

[ianb]

That's a good idea! We actually do some of those calculations in selector-snapping.js so we just need to extend that. If the page changes it'll be inaccurate, but that can be tolerated.

[ianb]

This feature was released in the v1 release which went out on October 26th.