Manage: Make filter & backup containers collapsible

js/prefs.js

@@ -24,6 +24,8 @@ var prefs = new function Prefs() {
     'manage.onlyLocal.invert': false,   // display only externally installed styles
     'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
     // UI element state: expanded/collapsed
+    'manage.backup.expanded': true,
+    'manage.filters.expanded': true,
     'manage.options.expanded': true,
     // the new compact layout doesn't look good on Android yet
     'manage.newUI': !navigator.appVersion.includes('Android'),

manage.html

@@ -164,11 +164,8 @@
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
 
-  <fieldset>
+  <details id="filters" data-pref="manage.filters.expanded">
-
+    <summary><h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2></summary>
-    <legend id="filters">
-      <span i18n-text="manageFilters"></span><span id="filters-stats"></span>
-    </legend>
 
     <div class="filter-selection">
       <label>
@@ -237,7 +234,7 @@
            data-filter=":not(.not-matching)"
            data-filter-hide=".not-matching">
 
-  </fieldset>
+  </details>
 
   <p class="nowrap">
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
@@ -254,7 +251,7 @@
     <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
   </p>
 
-  <p>
+  <p id="add-style-wrapper">
     <a href="edit.html">
       <button id="add-style-label" i18n-text="addStyleLabel"></button>
     </a>
@@ -316,14 +313,14 @@
 
   </details>
 
-  <div id="backup">
+  <details id="backup" data-pref="manage.backup.expanded">
-    <h2 id="backup-title" i18n-text="backupButtons"></h2>
+    <summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
     <span id="backup-message" i18n-text="backupMessage"></span>
     <p>
       <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
       <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
     </p>
-  </div>
+  </details>
 
   <p id="manage-text" i18n-html="manageText"></p>
 

manage/filters.js

@@ -76,6 +76,14 @@ onDOMready().then(onBackgroundReady).then(() => {
     }
   });
 
+  // Adjust width after selects are visible
+  prefs.subscribe(['manage.filters.expanded'], () => {
+    const el = $('#filters');
+    if (el.open) {
+      $$('select', el).forEach(select => select.adjustWidth());
+    }
+  });
+
   filterOnChange({forceRefilter: true});
 });
 

manage/manage.css

@@ -79,6 +79,7 @@ select {
 
 #header h1 {
   margin-top: 0;
+  margin-bottom: .3em;
 }
 
 #header a[href^="edit"] {
@@ -259,9 +260,24 @@ select {
 }
 
 /* collapsibles */
+#header details:not(#filters),
+#add-style-wrapper {
+  padding-bottom: .7em;
+}
 
+#add-style-wrapper,
+#options :last-child,
+#backup :last-child {
+  margin-bottom: 0;
+}
+
+#header details:not([open]),
 #header details:not([open]) h2 {
-  margin-bottom: -.25em;
+  padding-bottom: 0;
+}
+
+#header details[open] summary {
+  padding-bottom: .5em;
 }
 
 #header summary {
@@ -269,7 +285,6 @@ select {
   margin-left: -13px;
   cursor: pointer;
   outline: none;
-  margin-bottom: 8px;
 }
 
 #header summary h2 {
@@ -321,6 +336,7 @@ select {
 
 .filter-selection {
   position: relative;
+  left: -9px;
 }
 
 #header label {
@@ -356,6 +372,7 @@ select {
   max-width: 100%;
   padding-left: 4px;
   padding-right: 14px;
+  margin-left: 4px;
 }
 
 .firefox .filter-selection select {
@@ -381,13 +398,13 @@ select {
   left: 16px;
 }
 
-fieldset > label,
+#filters label,
-fieldset > .filter-selection {
+#filters .filter-selection {
   transition: background-color .25s;
 }
 
-fieldset > label:hover,
+#filters label:hover,
-fieldset > .filter-selection:hover {
+#filters .filter-selection:hover {
   background-color: hsla(0, 0%, 50%, .2);
 }
 
@@ -746,26 +763,18 @@ input[id^="manage.newUI"] {
   display: none !important;
 }
 
-fieldset {
+#filters input,
-  border-width: 1px;
+#filters label {
-  border-radius: 6px;
-  margin: 1em 0;
-  min-width: 0;
-  max-width: 250px;
-}
-
-fieldset > input,
-fieldset > label {
   display: flex;
   align-items: center;
 }
 
-#header fieldset > label {
+#filters label {
   padding-left: 20px;
 }
 
-#header fieldset > label input[type="checkbox"]:not(.slider),
+#filters label input[type="checkbox"]:not(.slider),
-#header fieldset > label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{
+#filters label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{
   left: 4px;
 }
 
@@ -773,23 +782,24 @@ fieldset > label {
   border: 1px solid transparent;
 }
 
-#filters.active {
+.active #filters-stats {
   background-color: darkcyan;
   border-color: darkcyan;
   color: white;
+  font-size: 0.7rem;
+  font-weight: normal;
+  padding: 2px 5px;
+  position: relative;
+  top: -2px;
 }
 
 #filters:not(.active) #filters-stats {
   display: none;
 }
 
-#filters-stats::before {
-  content: ": ";
-}
-
 #search {
   width: calc(100% - 4px);
-  margin: 0.25rem 4px 0;
+  margin: 0.25rem 0 0;
   border-radius: 0.25rem;
   padding-left: 0.25rem;
   border-width: 1px;
@@ -1005,8 +1015,7 @@ fieldset > label {
     margin-right: 1em;
   }
 
-  #backup p,
+  #backup p {
-  #header fieldset {
     margin: 0;
   }
 
@@ -1047,12 +1056,6 @@ fieldset > label {
     padding-left: 0;
   }
 
-  fieldset {
-    max-width: none;
-    margin-top: 0;
-    margin-right: 2em;
-  }
-
   #header h1,
   #header h2,
   #header h3,
@@ -1082,21 +1085,10 @@ fieldset > label {
 
   .newUI #header > *:not(h1),
   .newUI #newUIoptions,
-  #newUIoptions > *,
+  #newUIoptions > * {
-  fieldset label {
     display: inline;
   }
 
-  fieldset {
-    border: none;
-    margin: 0;
-    padding: 0 0 1em;
-  }
-
-  fieldset legend {
-    display: none;
-  }
-
   #header label {
     white-space: nowrap;
   }