support EyeDropper API in color picker

Chrome 95+
https://wicg.github.io/eyedropper-api/

images/eyedropper/README.md

@@ -0,0 +1,3 @@
+Author: DesignContest
+License: https://creativecommons.org/licenses/by/4.0/
+Source: https://iconarchive.com/show/outline-icons-by-designcontest/Eyedropper-icon.html

js/color/color-picker.css

@@ -377,6 +377,15 @@
   color: var(--label-color-hover);
 }
 
+.colorpicker-dropper {
+  position: absolute;
+  right: 7px;
+  bottom: 4px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
 .colorpicker-palette:not(:empty) {
   --swatch-size: 16px;
   margin: 0 var(--margin) var(--margin);

js/color/color-picker.js

@@ -167,6 +167,12 @@
         $('format-change', [
           $formatChangeButton = $('format-change-button', {onclick: setFromFormatElement}, '↔'),
         ]),
+        window.EyeDropper &&
+        $('dropper', {
+          tag: 'img',
+          onclick: () => new window.EyeDropper().open().then(r => setFromColor(r.sRGBHex), () => 0),
+          srcset: '/images/eyedropper/16px.png, /images/eyedropper/32px.png 2x',
+        }),
       ]),
       $palette = $('palette', {
         onclick: onPaletteClicked,