Stop using detail summary as applies to expander

manage.html

@@ -29,7 +29,7 @@
   -->
 
   <template data-id="style">
-    <div class="entry">
+    <div class="entry hide-extra">
       <div class="entry-col entry-filter">
         <label class="checkmate" tabindex="0">
           <input class="entry-filter-toggle" type="checkbox">
@@ -163,9 +163,7 @@
   </template>
 
   <template data-id="extraAppliesTo">
-    <details class="applies-to-extra hidden">
-      <summary class="applies-to-extra-expander">&nbsp;</summary>
-    </details>
+    <a href="#" class="applies-to-extra-expander" tabindex="0">...</a>
   </template>
 
   <script src="js/polyfill.js"></script>

manage/manage-actions.js

@@ -144,6 +144,7 @@ Object.assign(handleEvent, {
     '.header-filter': 'toggleBulkActions',
     '.sortable': 'updateSort',
     '#applies-to-config': 'appliesConfig',
+    '.applies-to-extra-expander': 'toggleExtraAppliesTo'
   },
 
   entryClicked(event) {
@@ -209,6 +210,15 @@ Object.assign(handleEvent, {
     $('.header-filter').classList.toggle('active', !tools.classList.contains('hidden'));
   },
 
+  toggleExtraAppliesTo(event, entry) {
+    event.preventDefault();
+    entry.classList.toggle('hide-extra');
+    if (event.shiftKey) {
+      const state = entry.classList.contains('hide-extra');
+      $$('.entry').forEach(entry => entry.classList.toggle('hide-extra', state));
+    }
+  },
+
   check(event, entry) {
     event.preventDefault();
     checkUpdate(entry, {single: true});
@@ -433,20 +443,8 @@ function switchUI({styleOnly} = {}) {
   const missingFavicons = UI.favicons && !$('.entry-applies-to img[src]');
   if (changed.targets) {
     for (const targets of $$('.entry .targets')) {
-      const items = $$('.target', targets);
-      const extra = $('.applies-to-extra', targets);
-      items.splice(0, UI.targets).forEach(el => {
-        if (!el.parentElement.classList.contains('targets')) {
-          targets.insertBefore(el, extra);
-        }
-      });
-      extra.classList.toggle('hidden', items.length < 1);
-      items.some(el => {
-        if (!el.parentElement.classList.contains('applies-to-extra')) {
-          extra.prepend(el);
-          return false;
-        }
-        return true;
+      $$('.target', targets).forEach((el, indx) => {
+        el.classList.toggle('extra', indx >= UI.targets);
       });
     }
     return;

manage/manage-ui.js

@@ -199,6 +199,7 @@ const UI = {
     const targets = parts.targets.cloneNode(true);
     let container = targets;
     let numTargets = 0;
+    let extraClass = '';
     const displayed = new Set();
     for (const type of UI.TARGET_TYPES) {
       for (const section of style.sections) {
@@ -209,8 +210,7 @@ const UI = {
           displayed.add(targetValue);
           const element = template.appliesToTarget.cloneNode(true);
           if (numTargets === UI.targets) {
-            container = container.appendChild(template.extraAppliesTo.cloneNode(true));
-            container.classList.remove('hidden');
+            extraClass = ' extra';
           }
           element.dataset.type = type;
           element.dataset.index = numTargets;
@@ -218,14 +218,16 @@ const UI = {
             (parts.decorations[type + 'Before'] || '') +
             targetValue +
             (parts.decorations[type + 'After'] || '');
+          element.className += extraClass;
           container.appendChild(element);
           numTargets++;
         }
       }
     }
+    // Include hidden expander in case user changes UI.targets
+    container.appendChild(template.extraAppliesTo.cloneNode(true));
     if (numTargets <= UI.targets) {
-      // Include hidden expander in case user changes UI.targets
-      container.appendChild(template.extraAppliesTo.cloneNode(true));
+      $('.applies-to-extra-expander', container).classList.add('hidden');
     }
     if (numTargets) {
       entryTargets.parentElement.replaceChild(targets, entryTargets);

manage/manage.css

@@ -341,13 +341,19 @@ body.all-styles-hidden-by-filters #installed:after {
 
 .targets .target {
   display: inline-block;
-  padding: 0 2px;
+  padding: 2px;
+  line-height: var(--favicon-size);
 }
 
 .targets .applies-to-extra .target {
   padding: 2px;
 }
 
+.applies-to-extra-expander {
+  text-decoration: none;
+  font-size: 1.5em;
+}
+
 .targets .target img,
 .targets .target svg {
   max-width: var(--favicon-size);
@@ -568,17 +574,17 @@ a svg, .svg-icon.sort {
   filter: grayscale(0);
 }
 
-.targets details.applies-to-extra {
+.targets .applies-to-extra {
   margin-left: 4px;
   margin-top: 5px;
   cursor: pointer;
 }
 
-details.applies-to-extra[open] {
-  position: absolute;
-  background: #eee;
-  z-index: 90;
-  padding: 10px;
+.entry.hide-extra .target.extra {
+  display: none;
+}
+.entry:not(.hide-extra) {
+  height: auto !important;
 }
 
 #faviconsHelp {