same colorpicker in the manager

manage.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="manage/manage.css">
   <link rel="stylesheet" href="msgbox/msgbox.css">
   <link rel="stylesheet" href="options/onoffswitch.css">
+  <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">
 
   <style id="style-overrides"></style>
 
@@ -149,7 +150,7 @@
   <script src="manage/filters.js"></script>
   <script src="manage/updater-ui.js"></script>
   <script src="manage/object-diff.js"></script>
-  <script src="js/color-parser.js"></script>
+  <script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
   <script src="manage/config-dialog.js"></script>
   <script src="manage/manage.js"></script>
 </head>

manage/config-dialog.js

@@ -1,8 +1,9 @@
-/* global colorParser messageBox makeLink */
+/* global messageBox makeLink */
 'use strict';
 
 function configDialog(style) {
   const form = buildConfigForm();
+  const colorpicker = window.colorpicker();
 
   return messageBox({
     title: `${style.name} v${style.usercssData.version}`,
@@ -34,7 +35,7 @@ function configDialog(style) {
       colorpicker.hide();
     }
     if (button === 0 || enter) {
-      return form.getVars();
+    return form.getVars();
     }
   });
 
@@ -46,25 +47,14 @@ function configDialog(style) {
       let appendChild;
       switch (va.type) {
         case 'color':
-          va.inputColor = $element({tag: 'input', type: 'color'});
+          appendChild = [$element({
-          va.inputAlpha = $element({
+            className: 'cm-colorview',
-            tag: 'input',
+            appendChild: va.inputColor = $element({
-            type: 'range',
+              va,
-            min: 0,
+              className: 'color-swatch',
-            max: 1,
+              onclick: onColorClicked,
-            title: chrome.i18n.getMessage('alphaChannel'),
+            })
-            step: 'any'
+          })];
-          });
-          va.inputColor.onchange = va.inputAlpha.oninput = () => {
-            va.dirty = true;
-            const color = colorParser.parse(va.inputColor.value);
-            color.a = Number(va.inputAlpha.value);
-            va.value = colorParser.format(color);
-            va.inputColor.style.opacity = color.a;
-          };
-          appendChild = [
-            $element({appendChild: [va.inputColor, va.inputAlpha]})
-          ];
           break;
 
         case 'checkbox':
@@ -119,15 +109,10 @@ function configDialog(style) {
     function drawValues() {
       for (const key of Object.keys(vars)) {
         const va = vars[key];
-        const value = va.value === null || va.value === undefined ?
+        const useDefault = va.value === null || va.value === undefined;
-          va.default : va.value;
+        const value = useDefault ? va.default : va.value;
-
         if (va.type === 'color') {
-          const color = colorParser.parse(value);
+          va.inputColor.style.backgroundColor = value;
-          va.inputAlpha.value = color.a;
-          va.inputColor.style.opacity = color.a;
-          delete color.a;
-          va.inputColor.value = colorParser.formatHex(color);
         } else if (va.type === 'checkbox') {
           va.input.checked = Number(value);
         } else {
@@ -149,6 +134,30 @@ function configDialog(style) {
       return vars;
     }
 
+    function onColorClicked() {
+      window.removeEventListener('keydown', messageBox.listeners.key, true);
+      const box = $('#message-box-contents');
+      colorpicker.show({
+        color: this.va.value || this.va.default,
+        top: this.getBoundingClientRect().bottom - 5,
+        left: box.getBoundingClientRect().left - 360,
+        hideDelay: 1e6,
+        guessBrightness: box,
+        callback: newColor => {
+          if (newColor) {
+            this.va.dirty = true;
+            this.va.value = newColor;
+            this.style.backgroundColor = newColor;
+          }
+          setTimeout(() => {
+            if (!$('.colorpicker-popup')) {
+              window.addEventListener('keydown', messageBox.listeners.key, true);
+            }
+          });
+        },
+      });
+    }
+
     return {
       elements: labels,
       useDefault,

manage/manage.css

@@ -766,6 +766,29 @@ fieldset select {
   margin-right: 4px;
 }
 
+.cm-colorview::before,
+.color-swatch {
+  width: 60px !important;
+  height: 20px !important;
+}
+
+.cm-colorview::before {
+  margin: 1px !important;
+}
+
+.color-swatch {
+  position: absolute;
+  border: 1px solid gray;
+  margin-top: -22px;
+  cursor: pointer;
+}
+
+.colorpicker-popup {
+  z-index: 2147483647 !important;
+  border: none !important;
+  box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;

vendor-overwrites/colorpicker/colorpicker.js

@@ -1,7 +1,7 @@
 /* global CodeMirror */
 'use strict';
 
-CodeMirror.defineExtension('colorpicker', function () {
+(window.CodeMirror ? window.CodeMirror.prototype : window).colorpicker = function () {
   const cm = this;
   const CSS_PREFIX = 'colorpicker-';
   const HUE_COLORS = [
@@ -188,18 +188,6 @@ CodeMirror.defineExtension('colorpicker', function () {
     if (!initialized) {
       init();
     }
-    $root.style = `
-      display: block;
-      position: fixed;
-      left: -10000px;
-      top: -10000px;
-    `.replace(/;/g, '!important;');
-    $root.classList.add(CSS_PREFIX + 'theme-' +
-      (opt.theme === 'dark' || opt.theme === 'light' ? opt.theme : guessTheme()));
-    document.body.appendChild($root);
-
-    shown = true;
-
     HSV = {};
     currentFormat = '';
     options = PUBLIC_API.options = opt;
@@ -209,8 +197,23 @@ CodeMirror.defineExtension('colorpicker', function () {
     $formatChangeButton.title = opt.tooltipForSwitcher || '';
     opt.hideDelay = Math.max(0, opt.hideDelay) || 2000;
 
+    if (!isNaN(options.left) && !isNaN(options.top)) {
+      $root.style = `
+        display: block;
+        position: fixed;
+      `.replace(/;/g, '!important;');
+      reposition();
+    }
+
+    $root.classList.add(CSS_PREFIX + 'theme-' +
+      (opt.theme === 'dark' || opt.theme === 'light' ?
+        opt.theme :
+        guessTheme()));
+    document.body.appendChild($root);
+
+    shown = true;
+
     registerEvents();
-    reposition();
     setFromColor(opt.color);
     setFromHexLettercaseElement();
   }
@@ -601,9 +604,9 @@ CodeMirror.defineExtension('colorpicker', function () {
       switch (e.which) {
         case 13:
           setFromInputs({});
-          colorpickerCallback();
         // fallthrough to 27
         case 27:
+          colorpickerCallback(e.which === 27 ? '' : undefined);
           e.preventDefault();
           e.stopPropagation();
           hide();
@@ -622,6 +625,10 @@ CodeMirror.defineExtension('colorpicker', function () {
   //region Event utilities
 
   function colorpickerCallback(colorString = currentColorToString()) {
+    // Esc pressed?
+    if (!colorString) {
+      options.callback('');
+    }
     if (
       userActivity &&
       $inputs[currentFormat].every(el => el.checkValidity()) &&
@@ -914,7 +921,8 @@ CodeMirror.defineExtension('colorpicker', function () {
 
   function guessTheme() {
     const realColor = {r: 255, g: 255, b: 255, a: 1};
-    const start = ((cm.display.renderedView || [])[0] || {}).text || cm.display.lineDiv;
+    const start = options.guessBrightness ||
+      ((cm.display.renderedView || [])[0] || {}).text || cm.display.lineDiv;
     for (let el = start; el; el = el.parentElement) {
       const bgColor = getComputedStyle(el).backgroundColor;
       const [r, g, b, a = 255] = bgColor.match(/\d+/g).map(Number);
@@ -953,4 +961,4 @@ CodeMirror.defineExtension('colorpicker', function () {
   }
 
   //endregion
-});
+};

vendor-overwrites/colorpicker/colorview.js

@@ -478,6 +478,9 @@
     }
 
     static popupOnChange(newColor) {
+      if (!newColor) {
+        return;
+      }
       const {cm, line, ch, embedderCallback} = this;
       const to = {line, ch: ch + this.prevColor.length};
       if (cm.getRange(this, to) !== newColor) {