Issue: Sometimes, I need to take a screenshot of a specific element on a web page. After selecting "Take Screenshot" from the context menu (or using Ctrl + Shift + S), the live selection tool automatically highlights hovered elements. However, depending on the HTML structure of a webpage, selecting the desired element can be impossible.
Solution: Add a fourth button, "Expand", to the toolbar that appears after selecting an element, alongside "X", "Copy", and "Download". Clicking this button would expand the selection to the next parent element in the DOM. Optionally, a fifth button, "Shrink", could also be added to revert the selection back to the originally selected element.
Additionally, accessibility keyboard shortcuts could improve this functionality. Currently, the arrow keys allow users to move the crosshair. I suggest adding Page Up/Down as shortcuts to expand/shrink the selection to the next parent/child element while hovering over an element.
Example: I've set up an example page where this issue can be easily reproduced. Try selecting the first box in its entirety—it's simply impossible. In contrast, the second box has additional padding, making it possible to select the entire box.
https://felix-bernhard.com/screenshot-tool/ [↗]
P.S.: I'm aware of the "Screenshot Node" feature in the developer tools. However, the proposed solution would make this feature accessible to all users, not just developers.
... View more