Add config dialog to popup (#283)

manage.html

@@ -6,6 +6,7 @@
   <title i18n-text="manageTitle"></title>
   <link rel="stylesheet" href="global.css">
   <link rel="stylesheet" href="manage/manage.css">
+  <link rel="stylesheet" href="manage/config-dialog.css">
   <link rel="stylesheet" href="msgbox/msgbox.css">
   <link rel="stylesheet" href="options/onoffswitch.css">
   <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">

manage/config-dialog.css

@@ -0,0 +1,102 @@
+/* config dialog */
+.config-dialog .config-heading {
+  float: right;
+  margin: -1.25rem 0 0 0;
+  font-size: 0.9em;
+}
+
+.config-dialog label {
+  display: flex;
+  padding: .75em 0;
+  align-items: center;
+}
+
+.config-dialog .select-resizer {
+  position: static;
+}
+
+.config-dialog label:first-child {
+  padding-top: 0;
+}
+
+.config-dialog label:last-child {
+  padding-bottom: 0;
+}
+
+.config-dialog label:not(:first-child) {
+  border-top: 1px dotted #ccc;
+}
+
+.config-dialog label > :first-child {
+  margin-right: 8px;
+  flex-grow: 1;
+}
+
+.config-dialog label:not([disabled]) > :first-child {
+  cursor: default;
+}
+
+.config-dialog label:not([disabled]):hover > :first-child {
+  text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
+  cursor: pointer;
+}
+
+.config-dialog input,
+.config-dialog select,
+.config-dialog .onoffswitch {
+  width: var(--onoffswitch-width);
+  margin: 0;
+  height: 2em;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.config-dialog .select-resizer,
+.config-dialog select {
+  width: auto;
+  min-width: var(--onoffswitch-width);
+  max-width: 124px;
+  left: auto;
+  position: relative;
+}
+
+.config-dialog .onoffswitch {
+  height: auto;
+  margin: calc((2em - 12px) / 2) 0;
+}
+
+.config-dialog input[type="text"] {
+  padding-left: 0.25em;
+}
+
+.config-dialog label > :last-child {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.cm-colorview::before,
+.color-swatch {
+  width: var(--onoffswitch-width) !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;
+}

manage/manage.css

@@ -865,109 +865,6 @@ input[id^="manage.newUI"] {
   text-overflow: ellipsis;
 }
 
-/* config dialog */
-.config-dialog .config-heading {
-  float: right;
-  margin: -1.25rem 0 0 0;
-  font-size: 0.9em;
-}
-
-.config-dialog label {
-  display: flex;
-  padding: .75em 0;
-  align-items: center;
-}
-
-.config-dialog .select-resizer {
-  position: static;
-}
-
-.config-dialog label:first-child {
-  padding-top: 0;
-}
-
-.config-dialog label:last-child {
-  padding-bottom: 0;
-}
-
-.config-dialog label:not(:first-child) {
-  border-top: 1px dotted #ccc;
-}
-
-.config-dialog label > :first-child {
-  margin-right: 8px;
-  flex-grow: 1;
-}
-
-.config-dialog label:not([disabled]) > :first-child {
-  cursor: default;
-}
-
-.config-dialog label:not([disabled]):hover > :first-child {
-  text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
-  cursor: pointer;
-}
-
-.config-dialog input,
-.config-dialog select,
-.config-dialog .onoffswitch {
-  width: var(--onoffswitch-width);
-  margin: 0;
-  height: 2em;
-  box-sizing: border-box;
-  vertical-align: middle;
-}
-
-.config-dialog .select-resizer,
-.config-dialog select {
-  width: auto;
-  min-width: var(--onoffswitch-width);
-  max-width: 124px;
-  left: auto;
-  position: relative;
-}
-
-.config-dialog .onoffswitch {
-  height: auto;
-  margin: calc((2em - 12px) / 2) 0;
-}
-
-.config-dialog input[type="text"] {
-  padding-left: 0.25em;
-}
-
-.config-dialog label > :last-child {
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.cm-colorview::before,
-.color-swatch {
-  width: var(--onoffswitch-width) !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;

msgbox/msgbox.css

@@ -132,6 +132,25 @@
   margin: 0 .375rem;
 }
 
+/* popup */
+#message-box.stylus-popup {
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+}
+#message-box.stylus-popup > div {
+  max-width: 90vw;
+  top: auto;
+  right: auto;
+}
+#message-box.calculate-size {
+  white-space: nowrap;
+}
+#message-box.calculate-size > div {
+  max-width: none;
+  max-height: none;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;

msgbox/msgbox.js

@@ -12,6 +12,25 @@ function messageBox({
   bindGlobalListeners();
   createElement();
   document.body.appendChild(messageBox.element);
+  if (location.href.includes('popup.html')) {
+    messageBox.isPopup = true;
+    messageBox.element.classList.add('stylus-popup');
+
+    // calculate size
+    messageBox.element.classList.add('calculate-size');
+    const {offsetWidth, offsetHeight} = messageBox.element.children[0];
+    messageBox.element.classList.remove('calculate-size');
+
+    // for colorpicker
+    const MIN_WIDTH = 350;
+    const MIN_HEIGHT = 250;
+
+    const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH);
+    const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT);
+
+    document.body.style.minWidth = `${width}px`;
+    document.body.style.minHeight = `${height}px`;
+  }
   if (onshow) {
     onshow(messageBox.element);
   }
@@ -96,6 +115,10 @@ function messageBox({
     messageBox.element.remove();
     messageBox.element = null;
     messageBox.resolve = null;
+    if (messageBox.isPopup) {
+      document.body.style.minWidth = '';
+      document.body.style.minHeight = '';
+    }
   }
 }
 

popup.html

@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="global.css">
-  <link rel="stylesheet" href="popup/popup.css">
 
   <style id="firefox-transitions-bug-suppressor">
     /* restrict to FF */
@@ -33,6 +32,11 @@
       <div class="actions">
         <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
         <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
+        <a href="#" class="configure" i18n-title="configureStyle">
+          <svg class="svg-icon config" viewBox="0 0 14 16">
+            <path d="m6.2578 1.1191c-0.4526 0-0.81641 0.36381-0.81641 0.81641v0.69531a5.5932 5.5932 0 0 0-1.1328 0.47266l-0.49414-0.49414c-0.16002-0.16002-0.36907-0.24023-0.57812-0.24023-0.20905 0-0.41811 0.080216-0.57812 0.24023l-1.0488 1.0488c-0.32004 0.32004-0.32004 0.83621 0 1.1562l0.49023 0.49023a5.5932 5.5932 0 0 0-0.4668 1.1348h-0.69726c-0.4526 0-0.81641 0.36576-0.81641 0.81836v1.4844c0 0.4526 0.36381 0.81641 0.81641 0.81641h0.69726a5.5932 5.5932 0 0 0 0.4707 1.1328l-0.49414 0.49414c-0.32004 0.32004-0.32004 0.83426 0 1.1543l1.0488 1.0508c0.32004 0.32003 0.83621 0.32003 1.1562 0l0.49023-0.49024a5.5932 5.5932 0 0 0 1.1367 0.4668v0.69727c0 0.4526 0.36381 0.81641 0.81641 0.81641h1.4844c0.4526 0 0.81641-0.36381 0.81641-0.81641v-0.69727a5.5932 5.5932 0 0 0 1.1328-0.4707l0.49414 0.49414c0.32004 0.32003 0.83622 0.32003 1.1562 0l1.0488-1.0508c0.32004-0.32004 0.32004-0.83426 0-1.1543l-0.49023-0.49023a5.5932 5.5932 0 0 0 0.4668-1.1367h0.69726c0.4526 0 0.81641-0.36381 0.81641-0.81641v-1.4844c0-0.4526-0.36381-0.81836-0.81641-0.81836h-0.69726a5.5932 5.5932 0 0 0-0.4707-1.1309l0.49414-0.49414c0.32004-0.32004 0.32004-0.83621 0-1.1562l-1.0488-1.0488c-0.16002-0.16002-0.36907-0.24023-0.57812-0.24023s-0.41811 0.080216-0.57812 0.24023l-0.49023 0.49023a5.5932 5.5932 0 0 0-1.1367-0.4668v-0.69727c0-0.4526-0.36381-0.81641-0.81641-0.81641zm0.56836 0.7793h0.34766c0.22291 0 0.40234 0.17943 0.40234 0.40234v1.1621a4.5763 4.5763 0 0 1 2.2227 0.92383l0.82422-0.82422c0.15762-0.15762 0.41074-0.15762 0.56836 0l0.24609 0.24609c0.15762 0.15762 0.15762 0.41074 0 0.56836l-0.82226 0.82227a4.5763 4.5763 0 0 1 0.91797 2.2246h1.166c0.22291 0 0.40234 0.17943 0.40234 0.40234v0.34766c0 0.22291-0.17943 0.40234-0.40234 0.40234h-1.1641a4.5763 4.5763 0 0 1-0.92188 2.2227l0.82422 0.82422c0.15762 0.15762 0.15762 0.41074 0 0.56836l-0.24609 0.24609c-0.15762 0.15763-0.41074 0.15763-0.56836 0l-0.82227-0.82226a4.5763 4.5763 0 0 1-2.2246 0.91797v1.166c0 0.22291-0.17943 0.40234-0.40234 0.40234h-0.34766c-0.22291 0-0.40234-0.17943-0.40234-0.40234v-1.1641a4.5763 4.5763 0 0 1-2.2227-0.92188l-0.82422 0.82422c-0.15762 0.15763-0.41074 0.15763-0.56836 0l-0.24609-0.24609c-0.15762-0.15762-0.15762-0.41074 0-0.56836l0.82226-0.82226a4.5763 4.5763 0 0 1-0.91797-2.2246h-1.166c-0.22291 0-0.40234-0.17943-0.40234-0.40234v-0.34766c0-0.22291 0.17943-0.40234 0.40234-0.40234h1.1641a4.5763 4.5763 0 0 1 0.92188-2.2227l-0.82422-0.82422c-0.15762-0.15762-0.15762-0.41074 0-0.56836l0.24609-0.24609c0.15762-0.15762 0.41074-0.15762 0.56836 0l0.82227 0.82227a4.5763 4.5763 0 0 1 2.2246-0.91797v-1.166c0-0.22291 0.17943-0.40234 0.40234-0.40234zm0.17383 2.7109a3.3898 3.3898 0 0 0-3.3906 3.3906 3.3898 3.3898 0 0 0 3.3906 3.3887 3.3898 3.3898 0 0 0 3.3906-3.3887 3.3898 3.3898 0 0 0-3.3906-3.3906zm0 1.1875a2.2034 2.2034 0 0 1 2.2031 2.2031 2.2034 2.2034 0 0 1-2.2031 2.2031 2.2034 2.2034 0 0 1-2.2031-2.2031 2.2034 2.2034 0 0 1 2.2031-2.2031z"/>
+          </svg>
+        </a>
         <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
           <svg class="svg-icon edit" viewBox="0 0 14 16">
             <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
@@ -81,11 +85,23 @@
     </div>
   </template>
 
+  <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">
+  <script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
+
+  <link rel="stylesheet" href="msgbox/msgbox.css">
+  <script src="msgbox/msgbox.js"></script>
+
+  <link rel="stylesheet" href="options/onoffswitch.css">
+  <link rel="stylesheet" href="manage/config-dialog.css">
+  <script src="manage/config-dialog.js"></script>
+
   <script src="js/dom.js"></script>
   <script src="js/messaging.js"></script>
   <script src="js/localization.js"></script>
   <script src="js/prefs.js"></script>
   <script src="content/apply.js"></script>
+
+  <link rel="stylesheet" href="popup/popup.css">
   <script src="popup/popup.js"></script>
   <script src="popup/hotkeys.js"></script>
 </head>

popup/hotkeys.js

@@ -1,18 +1,36 @@
 /* global applyOnMessage installed */
 'use strict';
 
-window.addEventListener('showStyles:done', function _() {
+// eslint-disable-next-line no-var
-  window.removeEventListener('showStyles:done', _);
+var hotkeys = (() => {
+  let togglablesShown;
+  let togglables;
+  let enabled = false;
+  let ready = false;
 
-  let togglablesShown = true;
+  window.addEventListener('showStyles:done', function _() {
-  let togglables = getTogglables();
+    window.removeEventListener('showStyles:done', _);
+    togglablesShown = true;
+    togglables = getTogglables();
+    ready = true;
+    setState(true);
+    initHotkeyInfo();
+  });
 
-  window.addEventListener('keydown', onKeyDown);
+  return {setState};
-  initHotkeyInfo();
+
-  return;
+  function setState(newState = !enabled) {
+    if (!ready) {
+      throw new Error('hotkeys no ready');
+    }
+    if (newState !== enabled) {
+      window[`${newState ? 'add' : 'remove'}EventListener`]('keydown', onKeyDown);
+      enabled = newState;
+    }
+  }
 
   function onKeyDown(event) {
-    if (event.ctrlKey || event.altKey || event.metaKey) {
+    if (event.ctrlKey || event.altKey || event.metaKey || !enabled) {
       return;
     }
     let entry;
@@ -165,4 +183,4 @@ window.addEventListener('showStyles:done', function _() {
       });
     }
   }
-});
+})();

popup/popup.css

@@ -1,3 +1,12 @@
+:root {
+  --header-width: 280px;
+  --checkbox-width: 24px;
+  --name-padding-left: 40px;
+  --name-padding-right: 40px;
+  --actions-width: 75px;
+  --onoffswitch-width: 60px;
+}
+
 html, body {
   height: min-content;
 }
@@ -14,7 +23,7 @@ body {
   color: #000;
 }
 
-body > div:not(#installed) {
+body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   margin-left: 9px;
   margin-right: 9px;
 }
@@ -216,14 +225,15 @@ html[style] .entry:nth-child(10):before {
   content: "0";
 }
 
-.entry .style-edit-link {
+.entry .actions {
-  margin-right: 2px;
+  margin-left: -1px;
+  margin-right: -1px;
 }
 
-.entry .style-edit-link,
+.entry .actions > * {
-.entry .delete {
   display: inline-block;
-  padding: 0 1px 0;
+  padding: 0 1px;
+  margin: 0 1px;
 }
 
 .not-applied .checker,
@@ -331,8 +341,8 @@ body.blocked .actions > .main-controls {
 
 /* Never shown, but can be enabled with a style */
 
-.enable,
+.entry .actions > .enable,
-.disable {
+.entry .actions > .disable {
   display: none;
 }
 

popup/popup.js

@@ -1,3 +1,5 @@
+/* global configDialog hotkeys */
+
 'use strict';
 
 let installed;
@@ -245,6 +247,7 @@ function createStyleElement({
   Object.assign(entry, {
     id: ENTRY_ID_PREFIX_RAW + style.id,
     styleId: style.id,
+    styleIsUsercss: Boolean(style.usercssData),
     className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
     onmousedown: handleEvent.maybeEdit,
   });
@@ -275,9 +278,18 @@ function createStyleElement({
     }
   });
 
+  const config = $('.configure', entry);
+  if (!style.usercssData && style.updateUrl && style.updateUrl.includes('?') && style.url) {
+    config.href = style.url;
+    config.target = '_blank';
+  } else if (!style.usercssData || !Object.keys(style.usercssData.vars || {}).length) {
+    config.style.display = 'none';
+  }
+
   $('.enable', entry).onclick = handleEvent.toggle;
   $('.disable', entry).onclick = handleEvent.toggle;
   $('.delete', entry).onclick = handleEvent.delete;
+  $('.configure', entry).onclick = handleEvent.configure;
 
   invokeOrPostpone(!postponeDetect, detectSloppyRegexps, {entry, style});
 
@@ -347,6 +359,18 @@ Object.assign(handleEvent, {
     }
   },
 
+  configure(event) {
+    const {styleId, styleIsUsercss} = handleEvent.getClickedStyleElement(event);
+    if (styleIsUsercss) {
+      getStylesSafe({id: styleId}).then(([style]) => {
+        hotkeys.setState(false);
+        configDialog(style).then(() => {
+          hotkeys.setState(true);
+        });
+      });
+    }
+  },
+
   indicator(event) {
     const entry = handleEvent.getClickedStyleElement(event);
     const info = template.regexpProblemExplanation.cloneNode(true);

vendor-overwrites/colorpicker/colorpicker.js

@@ -550,10 +550,7 @@
   }
 
   function onMouseUp(event) {
-    if (releaseMouse(event, ['saturation', 'hue', 'opacity']) &&
+    releaseMouse(event, ['saturation', 'hue', 'opacity']);
-        !event.target.closest('.codemirror-colorview, .colorpicker-popup, .CodeMirror')) {
-      hide();
-    }
   }
 
   function onMouseMove(event) {
@@ -604,6 +601,12 @@
     }
   }
 
+  function onMouseDown(event) {
+    if (!event.target.closest('.colorpicker-popup')) {
+      hide();
+    }
+  }
+
   //endregion
   //region Event utilities
 
@@ -660,6 +663,7 @@
 
   function registerEvents() {
     window.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('mousedown', onMouseDown, true);
     window.addEventListener('close-colorpicker-popup', onCloseRequest, true);
     $root.addEventListener('mouseleave', snooze);
     $root.addEventListener('mouseenter', stopSnoozing);
@@ -681,6 +685,7 @@
 
   function unregisterEvents() {
     window.removeEventListener('keydown', onKeyDown, true);
+    window.removeEventListener('mousedown', onMouseDown, true);
     window.removeEventListener('close-colorpicker-popup', hide, true);
     $root.removeEventListener('mouseleave', snooze);
     $root.removeEventListener('mouseenter', stopSnoozing);