Add: use config-dialog/onoffswitch/colorpicker/msgbox in popup

popup.html

@@ -86,6 +86,16 @@
     </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>

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;
 }

popup/popup.js

@@ -1,3 +1,5 @@
+/* global configDialog */
+
 'use strict';
 
 let installed;
@@ -278,6 +280,7 @@ function createStyleElement({
   $('.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 +350,11 @@ Object.assign(handleEvent, {
     }
   },
 
+  configure(event) {
+    const id = handleEvent.getClickedStyleId(event);
+    getStylesSafe({id}).then(([style]) => style).then(configDialog);
+  },
+
   indicator(event) {
     const entry = handleEvent.getClickedStyleElement(event);
     const info = template.regexpProblemExplanation.cloneNode(true);