Fixed filters display.

The filters don't actually work yet.

resources/report/report.html

@@ -85,6 +85,30 @@
             <ol id="pluginsNav">
                 <!-- Generated <li> elements go here, containing # links to each plugin's section in the list. -->
             </ol>
+    <ol id="filters" class="hidden" data-replace="pluginsNav">
+        <input type="checkbox" id="hideVersionNumbers" data-class="version" />
+        <label for="hideVersionNumbers">Hide version numbers</label><br>
+        <input type="checkbox" id="hideCRCs" data-class="crc" />
+        <label for="hideCRCs">Hide CRCs</label><br>
+        <input type="checkbox" id="hideBashTags" data-class="tag" />
+        <label for="hideBashTags">Hide Bash Tags</label><br>
+        <input type="checkbox" id="hideNotes" />
+        <label for="hideNotes">Hide notes</label><br>
+        <input type="checkbox" id="hideDoNotCleanMessages" />
+        <label for="hideDoNotCleanMessages">Hide 'Do not clean' messages</label><br>
+        <input type="checkbox" id="hideInactivePluginMessages" />
+        <label for="hideInactivePluginMessages">Hide inactive plugin messages</label><br>
+        <input type="checkbox" id="hideAllPluginMessages" />
+        <label for="hideAllPluginMessages">Hide all plugin messages</label><br>
+        <input type="checkbox" id="hideMessagelessPlugins" />
+        <label for="hideMessagelessPlugins">Hide messageless plugins</label><br>
+        <div>
+            <span>Hidden plugins</span>: <span id="hiddenPluginNo">0</span> / <span id="totalPluginNo"></span>
+        </div>
+        <div>
+            <span>Hidden messages</span>: <span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo"></span>
+        </div>
+    </ol>
             <li data-action="view-ui" data-target="filters">Filters
         </ol>
     </nav>
@@ -112,23 +136,6 @@
         <!-- Generated plugin #pluginSection elements go here. -->
     </div>
 
-    <div id="filters" class="hidden">
-        <input type="checkbox" id="hideVersionNumbers" data-class="version" /><label id="txtHideVersionNumbers" for="hideVersionNumbers"></label><br>
-        <input type="checkbox" id="hideCRCs" data-class="crc" /><label id="txtHideCRCs" for="hideCRCs"></label><br>
-        <input type="checkbox" id="hideBashTags" data-class="tag" /><label id="txtHideBashTags" for="hideBashTags"></label><br>
-        <input type="checkbox" id="hideNotes" /><label id="txtHideNotes" for="hideNotes"></label><br>
-        <input type="checkbox" id="hideDoNotCleanMessages" /><label id="txtHideDoNotCleanMessages" for="hideDoNotCleanMessages"></label><br>
-        <input type="checkbox" id="hideInactivePluginMessages" /><label id="txtHideInactivePluginMessages" for="hideInactivePluginMessages"></label><br>
-        <input type="checkbox" id="hideAllPluginMessages" /><label id="txtHideAllPluginMessages" for="hideAllPluginMessages"></label><br>
-        <input type="checkbox" id="hideMessagelessPlugins" /><label id="txtHideMessagelessPlugins" for="hideMessagelessPlugins"></label><br>
-        <div>
-            <span id="txtPluginsHidden"></span>: <span id="hiddenPluginNo">0</span> / <span id="filterTotalPluginNo"></span>
-        </div>
-        <div>
-            <span id="txtMessagesHidden"></span>: <span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo"></span>
-        </div>
-    </div>
-
     <div id="about" class="hidden" data-overlay="1">
         <h1>LOOT <span id="LOOTVersion"></span></h1>
         <p>Copyright &copy; 2012&ndash;2014 LOOT Team

resources/report/script.js

@@ -341,32 +341,45 @@ function processURLParams() {
 }
 processURLParams();
 
-var menus = document.getElementsByTagName('header')[0].getElementsByTagName('li');
-var overlay = document.getElementById('overlay');
+/* New JS */
 
-for (var i = 0; i < menus.length; ++i) {
-    menus[i].addEventListener('click', function(evt) {
-        var action = evt.currentTarget.getAttribute('data-action');
-        var target = document.getElementById(evt.currentTarget.getAttribute('data-target'));
-        if (action == 'view-ui') {
-            if (isVisible(target)) {
-                hideElement(target);
-                if (target.getAttribute('data-overlay')) {
-                    overlay.setAttribute('data-dialog', '');
-                    hideElement(overlay);
-                }
+function processButtonClick(evt) {
+    var overlay = document.getElementById('overlay');
+    var action = evt.currentTarget.getAttribute('data-action');
+    var target = document.getElementById(evt.currentTarget.getAttribute('data-target'));
+    if (action == 'view-ui') {
+        if (isVisible(target)) {
+            hideElement(target);
+            if (target.getAttribute('data-overlay')) {
+                overlay.setAttribute('data-dialog', '');
+                hideElement(overlay);
             } else {
-                showElement(target);
-                if (target.getAttribute('data-overlay') == '1') {
-                    overlay.setAttribute('data-dialog', target.id);
-                    showElement(overlay);
+                var replace = target.getAttribute('data-replace');
+                if (replace) {
+                    showElement(document.getElementById(replace));
+                }
+            }
+        } else {
+            showElement(target);
+            if (target.getAttribute('data-overlay') == '1') {
+                overlay.setAttribute('data-dialog', target.id);
+                showElement(overlay);
+            } else {
+                var replace = target.getAttribute('data-replace');
+                if (replace) {
+                    hideElement(document.getElementById(replace));
                 }
             }
         }
-    }, false);
+    }
+}
+function toggleOverlay(evt) {
+    hideElement(evt.target);
+    hideElement(document.getElementById(evt.target.getAttribute('data-dialog')));
+}
 
-    overlay.addEventListener('click', function(evt) {
-        hideElement(overlay);
-        hideElement(document.getElementById(overlay.getAttribute('data-dialog')));
-    }, false);
-}
+var buttons = document.querySelectorAll('[data-action]');
+for (var i = 0; i < buttons.length; ++i) {
+    buttons[i].addEventListener('click', processButtonClick, false);
+}
+overlay.addEventListener('click', toggleOverlay, false);

resources/report/style.css

@@ -104,6 +104,7 @@ nav > ol {
 nav > ol > li:nth-child(3) {
     height: calc(100% - 7em);
     overflow: auto;
+    padding:0;
 }
 #pluginsNav {
     height: 100%;
@@ -124,7 +125,7 @@ nav a {
     padding: 0;
 }
 #pluginsNav li {
-    padding: 0;
+    padding: 0 0.5em;
 }
 
 #main {
@@ -181,6 +182,23 @@ section h1 {
     margin: 0;
     font-weight: normal;
 }
+#filters {
+    margin: 0;
+    padding: 0;
+}
+#filters.hidden {
+    display:none;
+}
+#filters label {
+    display:inline-block;
+    padding:0.2em 0.5em;
+    white-space:nowrap;
+    cursor:pointer;
+}
+#filters div {
+    padding:0.2em 0.5em;
+    font-style:italic;
+}
 
 
 /* Old CSS */
@@ -195,11 +213,6 @@ section h1 {
 .button.current {
     background: #ccc;
 }
-#filtersToggle {
-    position:absolute;
-    right:0;
-    top:0;
-}
 #summary, #plugins {
     padding:1em;
 }
@@ -226,29 +239,6 @@ table:not(:last-child) {
 	text-align:center;
 	margin:1em;
 }
-#filters {
-    background:#e8e8e8;
-    z-index:1;
-    overflow:hidden;
-    position:fixed;
-    right:0;
-    top:32px;
-    display:block;
-    box-shadow:0 0 3px 1px rgba(0,0,0,0.5);
-}
-#filters.hidden {
-    display:none;
-}
-#filters label {
-    display:inline-block;
-    padding:0.2em 0.5em;
-    white-space:nowrap;
-    cursor:pointer;
-}
-#filters div {
-    padding:0.2em 0.5em;
-    font-style:italic;
-}
 input[type='checkbox'] {
     position:relative;
     top:0.15em;