Improved <dialog> usage.

The Shadow DOM was interfering with the ability to close the host
<dialog>, so I removed its usage.

Also removed the messageDialog and pluginSection templates as they're
unnecessary now, and moved the Bash Tag stringify code.

resources/report/css/style.css

@@ -175,6 +175,24 @@ dialog {
     top: 3em;
     max-width: 40em;
 }
+dialog > h1 {
+    margin: 0;
+    margin-bottom: 1em;
+    text-align: center;
+    font-weight: normal;
+}
+dialog > span:first-child {
+    font-size: 4em;
+    position: absolute;
+    left: 1em;
+    top: 23px;
+}
+dialog[data-type=warn] > span:first-child  {
+    color: gold;
+}
+dialog > .buttons {
+    text-align: center;
+}
 
 section[data-active] {
     overflow:visible;

resources/report/js/custom.js

@@ -87,16 +87,27 @@ var messageDialogProto = Object.create(HTMLDialogElement.prototype, {
 
         value: function() {
 
-            var template = document.getElementById('messageDialog');
-            var clone = document.importNode(template.content, true);
-
-            this.createShadowRoot().appendChild(clone);
+            var icon = document.createElement('span');
+            icon.className = 'fa fa-exclamation-circle';
+            this.appendChild(icon);
 
             var h1 = document.createElement('h1');
             this.appendChild(h1);
+
             var message = document.createElement('p');
             this.appendChild(message);
 
+            var buttons = document.createElement('div');
+            buttons.className = 'buttons';
+            this.appendChild(buttons);
+
+            var accept = document.createElement('button');
+            accept.className = 'accept';
+            buttons.appendChild(accept);
+
+            var cancel = document.createElement('button');
+            cancel.className = 'cancel';
+            buttons.appendChild(cancel);
         }
 
     }

resources/report/js/script.js

@@ -154,13 +154,22 @@ function togglePlugins(evt) {
 	document.getElementById('hiddenMessageNo').textContent = hiddenMessageNo;
     document.getElementById('hiddenPluginNo').textContent = hiddenPluginNo;
 }
-function hideDialog(evt) {
-    var dialog = document.getElementsByTagName('dialog')[0];
-    dialog.close(evt.target);
+function closeMessageDialog(evt) {
+    if (evt.target.returnValue == 'true') {
+
+    } else {
+
+    }
+    evt.target.removeEventListener('close', closeMessageDialog, false);
+    evt.target.removeEventListener('click', clickMessageButton, false);
+    document.body.removeChild(evt.target);
+}
+function clickMessageButton(evt) {
+    evt.currentTarget.close( evt.target.className == 'accept' );
 }
 function showMessageDialog(title, text) {
 
-    var dialog = document.getElementsByTagName('dialog')[0];
+    var dialog = new MessageDialog();
 
     dialog.id = 'modalDialog';
     dialog.setAttribute('data-type', 'warn');
@@ -168,17 +177,15 @@ function showMessageDialog(title, text) {
     dialog.getElementsByTagName('h1')[0].textContent = title;
     dialog.getElementsByTagName('p')[0].textContent = text;
 
-    dialog.shadowRoot.querySelector('#accept').setAttribute('data-dialog', dialog.id);
-    dialog.shadowRoot.querySelector('#accept').addEventListener('click', hideDialog, false);
-
-    dialog.shadowRoot.querySelector('#cancel').setAttribute('data-dialog', dialog.id);
-    dialog.shadowRoot.querySelector('#cancel').addEventListener('click', hideDialog, false);
+    dialog.addEventListener('close', closeMessageDialog, false);
+    dialog.addEventListener('click', clickMessageButton, false);
 
+    document.body.appendChild(dialog);
     dialog.showModal();
 }
 function showMessageBox(type, title, text) {
 
-    var dialog = document.getElementsByTagName('dialog')[0];
+    var dialog = new MessageDialog();
 
     dialog.id = 'modalDialog';
     dialog.setAttribute('data-type', type);
@@ -192,6 +199,7 @@ function showMessageBox(type, title, text) {
 
     hideElement(dialog.shadowRoot.querySelector('#cancel'));
 
+    document.body.appendChild(dialog);
     dialog.showModal();
 }
 function openLogLocation(evt) {
@@ -519,7 +527,14 @@ function closeSettingsDialog(evt) {
         evt.preventDefault();
         return;
     }
+
+    if (evt.target.returnValue == 'true') {
+
+    } else {
+
+    }
 }
+
 function showSettingsDialog(evt) {
     document.getElementById('settings').showModal();
 }
@@ -724,55 +739,6 @@ function getPriorityString(plugin) {
 
 }
 function getTagsStrings(plugin) {
-    var tagsAdded = [];
-    var tagsRemoved = [];
-
-    if (plugin.masterlist && plugin.masterlist.tag) {
-        for (var i = 0; i < plugin.masterlist.tag.length; ++i) {
-            if (plugin.masterlist.tag[i].name[0] == '-') {
-                tagsRemoved.push(plugin.masterlist.tag[i].name);
-            } else {
-                tagsAdded.push(plugin.masterlist.tag[i].name);
-            }
-        }
-    }
-    /* Now make sure that the same tag doesn't appear in both arrays.
-       Prefer the removed list. */
-    for (var i = 0; i < tagsAdded.length; ++i) {
-        for (var j = 0; j < tagsRemoved.length; ++j) {
-            if (tagsRemoved[j].name.toLowerCase() == tagsAdded[i].name.toLowerCase()) {
-                /* Remove tag from the tagsAdded array. */
-                tagsAdded.splice(i, 1);
-                --i;
-            }
-        }
-    }
-
-    if (plugin.userlist && plugin.userlist.tag) {
-        for (var i = 0; i < plugin.userlist.tag.length; ++i) {
-            if (plugin.userlist.tag[i][0] == '-') {
-                tagsRemoved.push(plugin.userlist.tag[i]);
-            } else {
-                tagsAdded.push(plugin.userlist.tag[i]);
-            }
-        }
-    }
-    /* Now again make sure that the same tag doesn't appear in both arrays.
-       Prefer the removed list. */
-    for (var i = 0; i < tagsAdded.length; ++i) {
-        for (var j = 0; j < tagsRemoved.length; ++j) {
-            if (tagsRemoved[j].name.toLowerCase() == tagsAdded[i].name.toLowerCase()) {
-                /* Remove tag from the tagsAdded array. */
-                tagsAdded.splice(i, 1);
-                --i;
-            }
-        }
-    }
-
-    return {
-      tagsAdded: tagsAdded.join(', '),
-      tagsRemoved: tagsRemoved.join(', ')
-    };
 }
 
 function updateInterfaceWithGameInfo(response) {
@@ -812,9 +778,7 @@ function updateInterfaceWithGameInfo(response) {
     var pluginsList = document.getElementById('main');
     var pluginsNav = document.getElementById('pluginsNav');
     loot.game.plugins.forEach(function(plugin) {
-        var content, clone;
 
-        /* Now add plugin 'card'. */
         if (plugin.isActive) {
             ++activePluginNo;
         }

resources/report/report.html

@@ -97,11 +97,9 @@
         <content select="h1"></content>
         <content select=".version"></content>
         <content select=".crc"></content>
-        <div class="tag add"></div>
-        <div class="tag remove"></div>
-        <ul>
-            <!-- Plugin message <li> elements go here. -->
-        </ul>
+        <content select=".tag.add"></content>
+        <content select=".tag.remove"></content>
+        <content select="ul"></content>
         <ol class="icons">
             <li class="dummyPlugin fa fa-eye-slash" title="Dummy Plugin"></li>
             <li class="loadsBSA fa fa-paperclip" title="Loads BSA"></li>
@@ -144,38 +142,6 @@
             <content select=".priority"></content>
         </a>
     </template>
-    <template id="messageDialog">
-        <style>
-            @import 'css/font-awesome.min.css';
-
-            ::content > h1 {
-                margin: 0;
-                margin-bottom: 1em;
-                text-align: center;
-                font-weight: normal;
-            }
-            :host > span:first-child {
-                font-size: 4em;
-                position: absolute;
-                left: 1em;
-                top: 23px;
-            }
-            :host([data-type=warn]) > span  {
-                color: gold;
-            }
-            .buttons {
-                text-align: center;
-            }
-        </style>
-            <span class="fa fa-exclamation-circle"></span>
-            <content select="h1"></content>
-            <content></content>
-            <div class="buttons">
-                <button id="accept">Yes</button>
-                <button id="cancel">Cancel</button>
-            </div>
-        </div>
-    </template>
 
 
 
@@ -246,31 +212,6 @@
                 <span class="priority"></span>
             </a>
     </template>
-    <template id="pluginSection">
-        <section id="" data-active="">
-            <div class="front">
-                <h1></h1>
-                <div class="crc"></div>
-                <div class="version"></div>
-                <div class="tag add"></div>
-                <div class="tag remove"></div>
-                <ul>
-                    <!-- Plugin message <li> elements go here. -->
-                </ul>
-                <ol class="icons">
-                    <li class="dummyPlugin fa fa-eye-slash hidden" title="Dummy Plugin">
-                    <li class="loadsBSA fa fa-paperclip 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="toggle-menu">
-                        <ol class="menu hidden">
-                            <li class="editMetadata" data-action="show-editor" data-target=""><span class="fa fa-pencil fa-fw"></span> Edit Metadata
-                            <li class="copyMetadata" data-action="copy-metadata" data-target=""><span class="fa fa-copy fa-fw"></span> Copy Metadata As Text
-                            <li class="clearMetadata" data-action="clear-metadata" data-target=""><span class="fa fa-trash-o fa-fw"></span> Clear User Metadata
-                        </ol>
-                </ol>
-            </div>
-        </section>
-    </template>
     <template id="pluginEditor">
         <div class="editor">
             <h1></h1>
@@ -476,7 +417,6 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         </div>
     </dialog>
 
-    <dialog is="message-dialog"></dialog>
     <div id="hoverText" class="hidden"></div>
 
     <script src="js/script.js"></script>