Hide skipped rules by default in the UI (#536)

Author: kmark

server/assets/js/filter.js

@@ -1,9 +1,8 @@
 (function() {
   const hidden = [];
 
-  function toggleFilter(evt) {
-    const enabled = evt.target.checked;
-    if (enabled) {
+  function toggleFilter(target) {
+    if (target.checked) {
       document
         .querySelectorAll('[data-status="skipped"]')
         .forEach(elem => {
@@ -22,8 +21,11 @@
     }
   }
 
-  const toggle = document.getElementById('filter-toggle');
-  if (toggle) {
-    toggle.addEventListener('change', toggleFilter);
-  }
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('filter-toggle');
+    if (toggle) {
+      toggleFilter(toggle);
+      toggle.addEventListener('change', (event) => toggleFilter(event.target));
+    }
+  });
 })();

server/templates/details.html.tmpl

@@ -38,7 +38,7 @@
       </div>
       <div class="p-2 rounded-md bg-white text-dark-gray1 text-sm text-shadow-none">
         <div class="toggle">
-            <input id="filter-toggle" type="checkbox" autocomplete="off" />
+            <input id="filter-toggle" type="checkbox" autocomplete="off" checked/>
             <label for="filter-toggle">Hide skipped rules</label>
         </div>
       </div>