ColorControl.html

<!--Do not submit to Chromium.-->
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="ColorPicker.css">
        <style>
            body {
                background-color: lightblue;
            }
        </style>
    </head>
    <body ondragstart="return false;" ondrop="return false;">
        <script src="ColorPicker.js"></script>
        <script>
            window.global = {};
            window.global.params = {};
            window.global.params.isBorderTransparent = false;

            document.selectedColor = new Color(ColorFormat.RGB, 234, 95, 176);
            //document.selectedColor = new Color("#7EFFC9");
            //document.selectedColor = new Color("rgb(126, 255, 201)");
            document.colorPicker = new ColorPicker(document.selectedColor, ColorFormat.RGB);
            document.body.append(document.colorPicker);
            document.colorPicker.addEventListener("color-change", () => {
                document.selectedColor = document.colorPicker.selectedColor;
            }, false);
            document.colorPicker.addEventListener("eyedropperclick", () => {
                document.eyeDropperClicked = !document.eyeDropperClicked;
            }, false);

            // Stub out some Blink hooks so we don't get script errors when popup tries to
            // call them
            window.pagePopupController = {};
            window.pagePopupController.setValue = (value) => { console.log(`setValue: ${value}`); };
            window.pagePopupController.closePopup = () => { console.log('closePopup'); };
        </script>
    </body>
</html>