From c5bcdd8f758a1005441520b084b245fbb076352b Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Tue, 5 Dec 2017 04:02:38 +0800
Subject: [PATCH] Add: use config-dialog/onoffswitch/colorpicker/msgbox in
 popup

---
 popup.html      | 10 ++++++++++
 popup/popup.css |  9 +++++++++
 popup/popup.js  |  8 ++++++++
 3 files changed, 27 insertions(+)

diff --git a/popup.html b/popup.html
index b3c96790..028ff81d 100644
--- a/popup.html
+++ b/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>
diff --git a/popup/popup.css b/popup/popup.css
index d058ecc2..0513e333 100644
--- a/popup/popup.css
+++ b/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;
 }
diff --git a/popup/popup.js b/popup/popup.js
index 6b90bfb9..ddb32df1 100644
--- a/popup/popup.js
+++ b/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);