WIP: popup UI

_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)"

popup.html

@@ -39,12 +39,45 @@
             <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"/>
           </svg>
         </a>
-        <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
+        <!-- <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
           <svg class="svg-icon remove" viewBox="0 0 14 16">
             <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
           </svg>
+        </a> -->
+        <a href="##" class="menu-button">
+          <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"/>
+          </svg>
         </a>
       </div>
+      <div class="menu">
+        <label class="menu-item exclude-by-domain button">
+          <div class="menu-icon">
+            <div class="checkbox-container">
+              <input type="checkbox" class="checker">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </div>
+          </div>
+          <span i18n-text="excludeStyleByDomainLabel"></span>
+        </label>
+        <label class="menu-item exclude-by-url button">
+          <div class="menu-icon">
+            <div class="checkbox-container">
+              <input type="checkbox" class="checker">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </div>
+          </div>
+          <span i18n-text="excludeStyleByUrlLabel"></span>
+        </label>
+        <button class="menu-item delete">
+          <div class="menu-icon">
+            <svg class="svg-icon remove" viewBox="0 0 14 16">
+              <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
+            </svg>
+          </div>
+          <span i18n-text="deleteStyleLabel"></span>
+        </button>
+      </div>
     </div>
   </template>
 

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;

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;