Fixed shadow DOM traversal issues.

Also fixed edit mode sidebar hover.

resources/report/css/style.css

@@ -358,10 +358,10 @@ td input {
 #pluginsNav .priority {
     display: none;
 }
-#pluginsNav.editMode plugin-li:hover .priority {
+#pluginsNav.editMode li:hover .priority {
     display: inline;
 }
-#pluginsNav.editMode plugin-li:hover .name {
+#pluginsNav.editMode li:hover .name {
     display: none;
 }
 header.editMode {

resources/report/js/custom.js

@@ -28,7 +28,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
     showEditorTable: {
         value: function(evt) {
             var tableClass = evt.target.getAttribute('data-for');
-            var tables = evt.target.parentElement.getElementsByTagName('table');
+            var tables = evt.target.parentElement.querySelectorAll('table');
             for (var i = 0; i < tables.length; ++i) {
                 if (tables[i].className.indexOf(tableClass) == -1) {
                     hideElement(tables[i]);
@@ -36,7 +36,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
                     showElement(tables[i]);
                 }
             }
-            evt.target.parentElement.getElementsByClassName('selected')[0].classList.toggle('selected');
+            evt.target.parentElement.querySelector('.selected').classList.toggle('selected');
             evt.target.classList.toggle('selected');
         }
     },
@@ -86,16 +86,16 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
         value: function() {
 
             /* Set up table tab event handlers. */
-            var elements = this.shadowRoot.getElementsByClassName('tableTabs')[0].children;
+            var elements = this.shadowRoot.querySelector('#tableTabs').children;
             for (var i = 0; i < elements.length; ++i) {
                 if (elements[i].hasAttribute('data-for')) {
-                    elements[i].addEventListener('click', showEditorTable, false);
+                    elements[i].addEventListener('click', this.showEditorTable, false);
                 }
             }
 
             /* Set up button event handlers. */
-            editor.getElementsByClassName('accept')[0].addEventListener('click', hideEditor, false);
-            editor.getElementsByClassName('cancel')[0].addEventListener('click', hideEditor, false);
+            this.shadowRoot.querySelector('#accept').addEventListener('click', this.hideEditor, false);
+            this.shadowRoot.querySelector('#cancel').addEventListener('click', this.hideEditor, false);
 
             /* Set up drag 'n' drop event handlers. */
             elements = document.getElementById('pluginsNav').children;
@@ -103,7 +103,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
                 elements[i].setAttribute('draggable', true);
                 elements[i].addEventListener('dragstart', handlePluginDragStart, false);
             }
-            elements = this.shadowRoot.getElementsByTagName('editable-table');
+            elements = this.shadowRoot.querySelector('table');
             for (var i = 0; i < elements.length; ++i) {
                 if (elements[i].className.indexOf('loadAfter') != -1 || elements[i].className.indexOf('req') != -1 || elements[i].className.indexOf('inc') != -1) {
                     elements[i].addEventListener('drop', handlePluginDrop, false);

resources/report/js/script.js

@@ -238,7 +238,7 @@ function handlePluginDrop(evt) {
         var data = {
             file: evt.dataTransfer.getData('text/plain')
         };
-        addTableRow(evt.currentTarget.getElementsByTagName('tbody')[0], data);
+        evt.currentTarget.addRow(data);
     }
 
     return false;

resources/report/report.html

@@ -258,9 +258,9 @@
                 </table>
             </div>
             <hr>
-            <div class="buttons">
-                <button class="accept">Apply</button>
-                <button class="cancel">Cancel</button>
+            <div id="buttons">
+                <button id="accept">Apply</button>
+                <button id="cancel">Cancel</button>
             </div>
         </section>
     </template>
@@ -294,10 +294,6 @@
         </a>
     </template>
 
-
-
-
-
     <template id="fileRow">
         <tr>
             <td><input class="file" type="text" readonly required>
@@ -353,6 +349,7 @@
             <td><input class="registry" type="text" readonly>
             <td class="fa fa-trash-o fa-fw">
     </template>
+    
     <noscript>The LOOT Report requires Javascript to be enabled in order to function.</noscript>
     <header>
         <div id="headerOverlay"></div>
@@ -485,8 +482,7 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
             <option value="1">Low</option>
             <option value="2">Medium</option>
             <option value="3">High</option>
-        </select><br>
-        <!-- Need to add an editable multi-column game list here. -->
+        </select>
         <table is="editable-table" id="gameTable" data-template="gameRow">
             <thead>
                 <tr><th>Name<th>Base Game<th>LOOT Folder<th>Master File<th>Masterlist Repository URL<th>Masterlist Repository Branch<th>Install Path<th>Install Path Registry Key<th>