Implement eyedropper using SVG rendered page

[jauyong]

Feature Description

Implement the eyedropper as per design in figma.

• When the user clicks the eyedropper in the color picker, close/minimize the color picker, so the full canvas is visible and enable "eyedropper-mode"
• Replace the current page canvas with a static SVG-rendered version of the page canvas rendered to an HTML canvas
  • Note that this looks like the previously selected element(s) has been deselected (no selection frame visible), but this is only while eye-dropping. The same element(s) remains selected and the design panel remains the same.
• When the user is in "eyedropper-mode", the cursor changes to a custom cursor
  • When over the page canvas the custom cursor is some sort of zoom of the pixel color directly below the cursor 🔍
  • When over anything but the page canvas, the cursor is some sort of "not available" cursor 🛑
  • Review cursors with UX team
• Regardless of where the user clicks, exit "eyedropper-mode", revert the page to the regular display page, restore selection (only visually, selection never actually changed)
  • If the user was over the page canvas when clicking, use the pixel color under the cursor at the time of click to set as the active color for whatever the color picker was opened for originally

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

[swissspidy]

Proof-of-concept: #3007

[barklund]

@swissspidy review?

[swissspidy]

@barklund whoops, looks like I edited the wrong issue. #4081 / #5027 can be reviewed, not this one.

[csossi]

Finding the eyedropper a little cumbersome to use. As I move it around a solid colour, I see flickers of #FFF appearing (if user inadvertently selects, colour selected will be white) and it requires user to be precise in selection. See video

https://share.getcloudapp.com/X6uAXXDG

When the full 6-digit code appears and user selects, everything's working fine - it just ain't pretty