diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 3c5964f3..59b6436b 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -315,6 +315,12 @@
"message": "Enable",
"description": "Label for the button to enable a style"
},
+ "excludeStyleByDomainLabel": {
+ "message": "Exclude the current domain"
+ },
+ "excludeStyleByUrlLabel": {
+ "message": "Exclude the current URL"
+ },
"exportLabel": {
"message": "Export",
"description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
diff --git a/popup.html b/popup.html
index baf48db3..72317782 100644
--- a/popup.html
+++ b/popup.html
@@ -39,12 +39,45 @@
-
+
+
+
diff --git a/popup/popup.css b/popup/popup.css
index 9eca352a..44f50348 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -286,6 +286,50 @@ html[style*="border"] .entry:nth-child(11):before {
color: darkred;
}
+/* entry menu */
+.entry .menu {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ top: 100%;
+ width: 100%;
+ z-index: 1;
+ box-sizing: border-box;
+ background-color: white;
+}
+.entry .menu-item {
+ display: flex;
+ border: none;
+ align-items: center;
+ padding: 0 0 0 20px;
+ cursor: pointer;
+ height: 25px;
+ background: unset;
+}
+.entry .menu-item:hover,
+.entry .menu-item:active {
+ background-color: hsl(0, 0%, 95%);
+ transition: background-color .25s;
+}
+.entry:not(.menu-active) .menu {
+ display: none;
+}
+.entry .menu-icon {
+ width: 26px;
+}
+.entry .menu-icon > * {
+ display: block;
+ margin: 0 auto;
+}
+
+/* checkbox */
+.checkbox-container {
+ position: relative;
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+}
+
.regexp-problem-indicator {
background-color: #d00;
width: 14px;
diff --git a/popup/popup.js b/popup/popup.js
index ccc3acbc..22cc952d 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -309,6 +309,8 @@ function createStyleElement(style) {
indicator.appendChild(document.createTextNode('!'));
indicator.onclick = handleEvent.indicator;
$('.main-controls', entry).appendChild(indicator);
+
+ $('.menu-button', entry).onclick = handleEvent.toggleMenu;
}
style = Object.assign(entry.styleMeta, style);
@@ -356,6 +358,20 @@ Object.assign(handleEvent, {
.then(sortStylesInPlace);
},
+ toggleMenu(event) {
+ const entry = handleEvent.getClickedStyleElement(event);
+ entry.classList.toggle('menu-active');
+ if (entry.classList.contains('menu-active')) {
+ document.addEventListener('click', function handler(e) {
+ if ($('.menu', entry).contains(e.target)) {
+ return;
+ }
+ entry.classList.toggle('menu-active');
+ document.removeEventListener('click', handler);
+ });
+ }
+ },
+
delete(event) {
const entry = handleEvent.getClickedStyleElement(event);
const id = entry.styleId;