Added plugin icons to sidebar.

Added a data flag to test user edits detection UI.

resources/report/css/style.css

@@ -145,7 +145,10 @@ nav a {
     padding: 0 0.5em;
     white-space:nowrap;
 }
-
+#pluginsNav li span {
+    display: inline-block;
+    width: 1.2em;
+}
 #main {
     overflow: auto;
     flex-shrink: 10;

resources/report/js/script.js

@@ -336,10 +336,25 @@ function processURLParams() {
                 content = document.getElementById('pluginNav').content;
                 clone = document.importNode(content, true);
                 pluginsNav.appendChild(clone);
-                pluginsNav.lastElementChild.children[0].textContent = data.plugins[i].name;
-                pluginsNav.lastElementChild.children[0].href = '#' + data.plugins[i].name.replace(/\s+/g, '');
+                clone = pluginsNav.lastElementChild;
 
+                clone.children[3].textContent = data.plugins[i].name;
+                clone.children[3].href = '#' + data.plugins[i].name.replace(/\s+/g, '');
 
+                if (data.plugins[i].isDummy) {
+                    clone.getElementsByClassName('dummyPlugin')[0].className += ' fa fa-file-o';
+                }
+
+                if (data.plugins[i].loadsBSA) {
+                    clone.getElementsByClassName('loadsBSA')[0].className += ' fa fa-folder-open';
+                }
+
+                if (data.plugins[i].hasUserEdits) {
+                    /* This won't actually be handled anything like this in the real data implementation. */
+                    clone.getElementsByClassName('hasUserEdits')[0].className += ' fa fa-user';
+                }
+
+                /* Now add plugin 'card'. */
                 content = document.getElementById('pluginSection').content;
                 clone = document.importNode(content, true);
                 pluginsList.appendChild(clone);
@@ -368,6 +383,11 @@ function processURLParams() {
                     showElement(section.getElementsByClassName('loadsBSA')[0]);
                 }
 
+                if (data.plugins[i].hasUserEdits) {
+                    /* This won't actually be handled anything like this in the real data implementation. */
+                    showElement(section.getElementsByClassName('hasUserEdits')[0]);
+                }
+
                 if (data.plugins[i].version) {
                     section.children[2].textContent = data.plugins[i].version;
                 } else {

resources/report/report.html

@@ -21,7 +21,11 @@
             <td>Install Path Registry Key
     </template>
     <template id="pluginNav">
-        <li><a href=""></a>
+        <li>
+            <span class="dummyPlugin " title="Dummy Plugin"></span>
+            <span class="loadsBSA" title="Loads BSA"></span>
+            <span class="hasUserEdits"  title="Has User Metadata"></span>
+            <a href=""></a>
     </template>
     <template id="pluginSection">
         <section>
@@ -35,7 +39,7 @@
             </ul>
             <ol class="buttons">
                 <li class="dummyPlugin fa fa-file-o hidden" title="Dummy Plugin">
-                <li class="loadsBSA fa fa-archive hidden" title="Loads BSA">
+                <li class="loadsBSA fa fa-folder-open hidden" title="Loads BSA">
                 <li class="hasUserEdits fa fa-user hidden" title="Has User Metadata">
                 <li class=" fa fa-ellipsis-v fa-lg pluginMenu" data-action="show-menu">
                 <li class="hidden">

resources/report/testdata.js

@@ -14,6 +14,7 @@ var data = {
             "name": "Update.esm",
             "loadsBSA": true,
             "isActive": true,
+            "hasUserEdits": true,
             "crc": "E5B67BDA",
             "tagsAdd": ["Delev",
             "Relev"], "messages": [{"type": "warn",