right-click to expand all applies-to targets

manage.html

@@ -59,8 +59,10 @@
       </p>
       <p class="style-info" data-type="age"></p>
       <div class="applies-to">
+        <a class="expander" tabindex="0">
+          <svg><use xlink:href="#svg-icon-select-arrow"/></svg>
+        </a>
         <div class="targets"></div>
-        <a class="expander" tabindex="0">...</a>
       </div>
     </div>
   </template>
@@ -361,7 +363,7 @@
   </symbol>
 
   <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
-    <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+    <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
   </symbol>
 
   <symbol id="svg-icon-help" viewBox="0 0 14 16">

manage/events.js

@@ -77,6 +77,13 @@ const Events = {
   },
 
   expandTargets(event, entry) {
+    if (event.type === 'contextmenu') {
+      event.preventDefault();
+      const ex = '.expanded';
+      $$(`.has-more${$(ex, entry) ? ex : `:not(${ex})`} .expander`)
+        .forEach(el => el.click());
+      return;
+    }
     if (!entry._allTargetsRendered) {
       createTargetsElement({entry, expanded: true});
       getFaviconSrc(entry);
@@ -100,10 +107,11 @@ const Events = {
   entryClicked(event) {
     const target = event.target;
     const entry = target.closest('.entry');
-    for (const selector in Events.ENTRY_ROUTES) {
+    const routes = Events['ENTRY_ROUTES' + (event.type === 'contextmenu' ? '_CTX' : '')];
+    for (const selector in routes) {
       for (let el = target; el && el !== entry; el = el.parentElement) {
         if (el.matches(selector)) {
-          return Events.ENTRY_ROUTES[selector].call(el, event, entry);
+          return routes[selector].call(el, event, entry);
         }
       }
     }
@@ -146,6 +154,9 @@ Events.ENTRY_ROUTES = {
   '.applies-to .expander': Events.expandTargets,
   '.configure-usercss': Events.config,
 };
+Events.ENTRY_ROUTES_CTX = {
+  '.applies-to .expander': Events.expandTargets,
+};
 
 /* exported handleBulkChange */
 function handleBulkChange() {

manage/manage.css

@@ -611,16 +611,13 @@ button .svg-icon,
   padding-top: .25rem;
   padding-bottom: .25rem;
 }
-
 .newUI .targets {
   overflow: hidden;
   max-height: calc(var(--num-targets) * 18px);
 }
-
 .newUI .applies-to.expanded .targets {
   max-height: none;
 }
-
 .newUI .target {
   display: block;
   overflow: hidden;
@@ -631,25 +628,23 @@ button .svg-icon,
   padding-right: 1rem;
   line-height: 18px;
 }
-
-.newUI .applies-to .expander {
-  margin: 0;
+.expander {
   cursor: pointer;
-  font-size: 3ex;
-  line-height: .5ex;
-  vertical-align: super;
-  letter-spacing: .1ex;
-  text-decoration: none;
+  position: absolute;
+  right: 4px;
+}
+.expander svg {
+  width: 16px;
+  height: 16px;
+  fill: var(--c50);
+}
+.expanded .expander {
+  transform: rotate(180deg);
+  transform-origin: 8px 8px;
 }
-
 .newUI .applies-to:not(.has-more) .expander {
   display: none;
 }
-
-.newUI .has-favicons .applies-to .expander {
-  margin-left: 20px;
-}
-
 .newUI .target:hover {
   background-color: inherit;
 }

manage/manage.js

@@ -48,6 +48,7 @@ newUI.renderClass();
     prefs.ready,
   ]);
   installed.on('click', Events.entryClicked);
+  installed.on('contextmenu', Events.entryClicked);
   installed.on('mouseover', Events.lazyAddEntryTitle, {passive: true});
   installed.on('mouseout', Events.lazyAddEntryTitle, {passive: true});
   $('#sync-styles').onclick =