diff --git a/popup.html b/popup.html
index b3c96790..028ff81d 100644
--- a/popup.html
+++ b/popup.html
@@ -86,6 +86,16 @@
+
+
+
+
+
+
+
+
+
+
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);