Removed Shadow DOM from <plugin-li>.

Closes #267.

resources/report/css/style.css

@@ -443,4 +443,27 @@ progress::-webkit-progress-value, .progress .value {
 }
 #progressDialog[open] > .progress > .value {
     -webkit-animation-play-state: running;
+}
+
+:host > span {
+    display: inline-block;
+    width: 1.2em;
+}
+li[is=plugin-li][data-bsa=false] > .loadsBSA,
+li[is=plugin-li][data-dummy=false] > .dummyPlugin,
+li[is=plugin-li][data-edits=false] > .hasUserEdits,
+li[is=plugin-li][data-global-priority=false] > .hasGlobalPriority,
+li[is=plugin-li] > .hasPriority:not([title^=Priority]) {
+    visibility: hidden;
+}
+li[is=plugin-li] > a {
+    text-decoration: none;
+    color: black;
+}
+li[is=plugin-li] > .hasGlobalPriority, li[is=plugin-li] > .hasPriority {
+    display:none;
+}
+body.editMode li[is=plugin-li] > .hasGlobalPriority,
+body.editMode li[is=plugin-li] > .hasPriority {
+    display: inline-block;
 }

resources/report/js/custom.js

@@ -621,7 +621,7 @@ var pluginLIProto = Object.create(HTMLLIElement.prototype, {
     handleDragStart: {
         value: function(evt) {
             evt.dataTransfer.effectAllowed = 'copy';
-            evt.dataTransfer.setData('text/plain', evt.target.textContent);
+            evt.dataTransfer.setData('text/plain', evt.currentTarget.getElementsByTagName('a')[0].textContent);
         }
     },
 
@@ -631,13 +631,13 @@ var pluginLIProto = Object.create(HTMLLIElement.prototype, {
 
             var template = document.getElementById('pluginLI');
             var clone = document.importNode(template.content, true);
-            this.createShadowRoot().appendChild(clone);
+            this.appendChild(clone);
         }
     },
 
     attachedCallback: {
         value: function() {
-            var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
+            var hoverTargets = this.querySelectorAll('[title]');
             for (var i = 0; i < hoverTargets.length; ++i) {
                 hoverTargets[i].addEventListener('mouseenter', showHoverText, false);
                 hoverTargets[i].addEventListener('mouseleave', hideHoverText, false);
@@ -647,7 +647,7 @@ var pluginLIProto = Object.create(HTMLLIElement.prototype, {
 
     detachedCallback: {
         value: function() {
-            var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
+            var hoverTargets = this.querySelectorAll('[title]');
             for (var i = 0; i < hoverTargets.length; ++i) {
                 hoverTargets[i].removeEventListener('mouseenter', showHoverText, false);
                 hoverTargets[i].removeEventListener('mouseleave', hideHoverText, false);

resources/report/js/plugin.js

@@ -162,15 +162,15 @@ function Plugin(obj) {
         var li = new PluginListItem();
         this.li = li;
 
-        li.shadowRoot.getElementsByTagName('a')[0].href = '#' + this.id;
+        li.getElementsByTagName('a')[0].href = '#' + this.id;
 
-        li.textContent = this.name;
+        li.getElementsByTagName('a')[0].textContent = this.name;
 
         li.setAttribute('data-dummy', this.isDummy);
         li.setAttribute('data-bsa', this.loadsBSA);
         li.setAttribute('data-edits', this.userlist != undefined);
         li.setAttribute('data-global-priority', this.isGlobalPriority);
-        li.shadowRoot.getElementsByClassName('hasPriority')[0].title = this.getPriorityString();
+        li.getElementsByClassName('hasPriority')[0].title = this.getPriorityString();
 
         document.getElementById('pluginsNav').appendChild(li);
     }
@@ -181,7 +181,7 @@ function Plugin(obj) {
                 change.object.li.setAttribute('data-edits', change.object[change.name] != undefined);
                 change.object.card.setAttribute('data-edits', change.object[change.name] != undefined);
             } else if (change.name == 'modPriority') {
-                change.object.li.shadowRoot.getElementsByClassName('hasPriority')[0].title = this.getPriorityString();
+                change.object.li.getElementsByClassName('hasPriority')[0].title = this.getPriorityString();
                 change.object.card.shadowRoot.getElementById('priorityValue').value = change.object[change.name];
             } else if (change.name == 'isGlobalPriority') {
                 change.object.li.setAttribute('data-global-priority', change.object[change.name]);

resources/report/report.html

@@ -285,39 +285,12 @@
         </section>
     </template>
     <template id="pluginLI">
-        <style>
-            @import 'css/font-awesome.min.css';
-            :host > span {
-                display: inline-block;
-                width: 1.2em;
-            }
-            :host([data-bsa=false]) .loadsBSA,
-            :host([data-dummy=false]) .dummyPlugin,
-            :host([data-edits=false]) .hasUserEdits,
-            :host([data-global-priority=false]) .hasGlobalPriority,
-            .hasPriority:not([title^=Priority]) {
-                visibility: hidden;
-            }
-            a {
-                text-decoration: none;
-                color: black;
-            }
-            .hasGlobalPriority, .hasPriority {
-                display:none;
-            }
-            :host-context(.editMode) .hasGlobalPriority,
-            :host-context(.editMode) .hasPriority {
-                display: inline-block;
-            }
-        </style>
         <span class="dummyPlugin fa fa-eye-slash" title="Dummy Plugin"></span>
         <span class="loadsBSA fa fa-paperclip" title="Loads BSA"></span>
         <span class="hasUserEdits fa fa-user" title="Has User Metadata"></span>
         <span class="hasGlobalPriority fa fa-globe" title="Priority Is Global"></span>
         <span class="hasPriority fa fa-exclamation"></span>
-        <a href="">
-            <content></content>
-        </a>
+        <a href=""></a>
     </template>
     <template id="pluginMenu">
         <style>