Finished implementing <loot-plugin-card>.

resources/report/css/style.css

@@ -199,9 +199,6 @@ li.warn{
     color:red;
     margin-left: 1.75em;
 }
-plugin-card > ul {
-    margin-left: 1.75em;
-}
 
 #settings > paper-checkbox, #settings > core-tooltip, #filters > paper-checkbox {
     display: block;
@@ -239,7 +236,6 @@ body.editMode header #headerOverlay {
     cursor: move;
 }
 .highlight {
-    box-shadow: inset 0 0 10px 3px #69aaff;
     outline: 3px solid #69aaff;
 }
 #applySortButton {

resources/report/html/loot-plugin-card.html

@@ -1,3 +1,20 @@
+<!-- Fires the following events:
+
+loot-editor-close
+  detail: boolean
+    True if the editor was closed using the Apply button.
+
+loot-editor-open
+
+loot-filter-conflicts
+  detail: boolean
+    True if the filter has been activated.
+
+loot-copy-metadata
+
+loot-clear-metadata
+-->
+
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
 <link rel="import" href="../bower_components/core-tooltip/core-tooltip.html">
@@ -58,11 +75,9 @@
         :host(.flip) {
             transform: rotateY(180deg);
         }
-
         :host(.flip) #front  {
             display: none;
         }
-
         :host(.flip) #editor  {
             display: block;
         }
@@ -155,10 +170,18 @@
         #editor > div {
             padding: 1em;
         }
+        paper-menu-button paper-item:first-child {
+            padding: 0;
+        }
+        #showOnlyConflicts {
+            height: 48px;
+            line-height: 48px;
+            padding: 0 16px;
+        }
         </style>
         <section id="front">
             <core-toolbar>
-                <core-tooltip class="activeTick" label="Active">
+                <core-tooltip class="activeTick" label="Active Plugin">
                     <core-icon icon="check"></core-icon>
                 </core-tooltip>
                 <content select="h1"></content>
@@ -170,12 +193,12 @@
                 <core-tooltip class="loadsBSA" label="Loads BSA">
                     <core-icon icon="attachment"></core-icon>
                 </core-tooltip>
-                <core-tooltip id="front-hasUserEdits" label="Has User Metadata">
+                <core-tooltip id="hasUserEdits" label="Has User Metadata">
                     <core-icon icon="account-circle"></core-icon>
                 </core-tooltip>
                 <paper-menu-button icon="more-vert" halign="right">
                     <paper-item>
-                        <paper-checkbox id="showOnlyConflicts" label="Show Only Conflicts"></paper-checkbox>
+                        <paper-checkbox id="showOnlyConflicts" label="Show Only Conflicts" flex></paper-checkbox>
                     </paper-item>
                     <paper-item id="editMetadata" icon="create" label="Edit Metadata"></paper-item>
                     <paper-item id="copyMetadata" icon="content-copy" label="Copy Metadata As Text"></paper-item>
@@ -188,7 +211,7 @@
         </section>
         <section id="editor">
             <core-toolbar>
-                <core-tooltip class="activeTick" label="Active">
+                <core-tooltip class="activeTick" label="Active Plugin">
                     <core-icon icon="check"></core-icon>
                 </core-tooltip>
                 <h1></h1>
@@ -297,13 +320,380 @@
     </template>
     <script>
     Polymer({
+        created: function() {
+            var h1 = document.createElement('h1');
+            this.appendChild(h1);
+            var crc = document.createElement('div');
+            crc.className = 'crc';
+            this.appendChild(crc);
+            var version = document.createElement('div');
+            version.className = 'version';
+            this.appendChild(version);
+
+            var tagAdd = document.createElement('div');
+            tagAdd.className = 'tag add';
+            this.appendChild(tagAdd);
+            var tagRemove = document.createElement('div');
+            tagRemove.className = 'tag remove';
+            this.appendChild(tagRemove);
+
+            var messages = document.createElement('ul');
+            this.appendChild(messages);
+        },
+
+        attached: function() {
+            this.shadowRoot.getElementById('fileTabs').firstElementChild.addEventListener('core-select', this.onShowEditorTable, false);
+            this.shadowRoot.getElementById('miscTabs').firstElementChild.addEventListener('core-select', this.onShowEditorTable, false);
+
+            this.shadowRoot.getElementById('accept').addEventListener('click', this.onHideEditor, false);
+            this.shadowRoot.getElementById('cancel').addEventListener('click', this.onHideEditor, false);
+
+            this.shadowRoot.getElementById('showOnlyConflicts').addEventListener('change', this.onShowOnlyConflicts, false);
+            this.shadowRoot.getElementById('editMetadata').addEventListener('click', this.onShowEditor, false);
+            this.shadowRoot.getElementById('copyMetadata').addEventListener('click', this.onCopyMetadata, false);
+            this.shadowRoot.getElementById('clearMetadata').addEventListener('click', this.onClearMetadata, false);
+
+            /* Because of the 3D flip effect used when accessing the editor,
+               plugin menus get hidden underneath later plugin cards unless
+               those cards have a lower z-index than the card the menu is part
+               of. Therefore, set this card's z-index to the negative of its
+               position in the plugin list.
+            */
+            var cards = this.parentElement.getElementsByTagName('loot-plugin-card');
+            for (var i = 0; i < cards.length; ++i) {
+                if (cards[i] == this) {
+                    this.style.zIndex = 10000 - i;
+                }
+            }
+        },
+
+        detached: function() {
+            this.shadowRoot.getElementById('fileTabs').firstElementChild.removeEventListener('core-select', this.onShowEditorTable, false);
+            this.shadowRoot.getElementById('miscTabs').firstElementChild.removeEventListener('core-select', this.onShowEditorTable, false);
+
+            this.shadowRoot.getElementById('accept').removeEventListener('click', this.onHideEditor, false);
+            this.shadowRoot.getElementById('cancel').removeEventListener('click', this.onHideEditor, false);
+
+            this.shadowRoot.getElementById('showOnlyConflicts').removeEventListener('change', this.onShowOnlyConflicts, false);
+            this.shadowRoot.getElementById('editMetadata').removeEventListener('click', this.onShowEditor, false);
+            this.shadowRoot.getElementById('copyMetadata').removeEventListener('click', this.onCopyMetadata, false);
+            this.shadowRoot.getElementById('clearMetadata').addEventListener('click', this.onClearMetadata, false);
+        },
+
         ready: function() {
             var editor = this.shadowRoot.getElementById('editor');
 
             editor.querySelector('h1').textContent = this.querySelector('h1').textContent;
             editor.querySelector('.version').textContent = this.querySelector('.version').textContent;
             editor.querySelector('.crc').textContent = this.querySelector('.crc').textContent;
-        }
+        },
+
+        getName: function() {
+            return this.getElementsByTagName('h1')[0].textContent;
+        },
+
+        onShowEditorTable: function(evt) {
+            var tables = evt.target.parentElement.getElementsByTagName('table');
+            for (var i = 0; i < tables.length; ++i) {
+                if (tables[i].id != evt.target.selected) {
+                    tables[i].classList.toggle('hidden', true);
+                } else {
+                    tables[i].classList.toggle('hidden', false);
+                }
+            }
+        },
+
+        readFromEditor: function(oldData) {
+            /* Need to turn all the editor controls' values into data to
+               process. The control values can be compared with the existing
+               values to determine what's been changed, and masterlist rows in
+               the tables can be ignored because they're immutable. */
+
+            var plugin = {
+                name: this.getElementsByTagName('h1')[0].textContent,
+                userlist: {},
+            };
+
+            if (oldData.id == this.id) {
+
+                /* If either of the priority values have been changed, the
+                   base priority value they're derived from will have
+                   changed, so record both. */
+                if (this.shadowRoot.getElementById('globalPriority').checked != oldData.isGlobalPriority
+                    || this.shadowRoot.getElementById('priorityValue').value != oldData.modPriority) {
+                    plugin.isGlobalPriority = this.shadowRoot.getElementById('globalPriority').checked;
+                    plugin.modPriority = this.shadowRoot.getElementById('priorityValue').value;
+                }
+
+                plugin.userlist.enabled = this.shadowRoot.getElementById('enableEdits').checked;
+
+                var tables = this.shadowRoot.getElementsByTagName('table');
+                for (var j = 0; j < tables.length; ++j) {
+                    var rowsData = tables[j].getRowsData(true);
+                    if (rowsData.length > 0) {
+                        if (tables[j].id == 'loadAfter') {
+                            plugin.userlist.after = rowsData;
+                        } else if (tables[j].id == 'req') {
+                            plugin.userlist.req = rowsData;
+                        } else if (tables[j].id == 'inc') {
+                            plugin.userlist.inc = rowsData;
+                        } else if (tables[j].id == 'message') {
+                            rowsData.forEach(function(data){
+                                data.content = [{
+                                    str: data.content,
+                                    lang: data.language
+                                }]
+                                delete data.language;
+                            });
+                            plugin.userlist.msg = rowsData;
+                        } else if (tables[j].id == 'tags') {
+                            rowsData.forEach(function(data){
+                                data = oldData.convTagObj(data);
+                            });
+                            plugin.userlist.tag = rowsData;
+                        } else if (tables[j].id == 'dirty') {
+                            rowsData.forEach(function(data){
+                                data.crc = parseInt(data.crc, 16);
+                            });
+                            plugin.userlist.dirty = rowsData;
+                        } else if (tables[j].id == 'locations') {
+                            rowsData.forEach(function(data){
+                                /* User metadata can only specify one version, but it should be a list. */
+                                if (data.ver.length > 0) {
+                                    data.ver = [
+                                        data.ver
+                                    ];
+                                } else {
+                                    delete data.ver;
+                                }
+                            });
+                            plugin.userlist.url = rowsData;
+                        }
+                    }
+                }
+            }
+            return plugin;
+        },
+
+        onHideEditor: function(evt) {
+            var card = evt.target.parentElement.parentElement.parentElement.parentNode.host;
+
+            /* First validate table inputs. */
+            var isValid = true;
+            var inputs = evt.target.parentElement.parentElement.getElementsByTagName('input');
+            for (var i = 0; i < inputs.length; ++i) {
+                if (!inputs[i].checkValidity()) {
+                    isValid = false;
+                    console.log(inputs[i]);
+                }
+            }
+
+            if (isValid || evt.target-id != 'accept') {
+                /* Fire the close event, saying whether or not to save data. */
+                card.dispatchEvent(new CustomEvent('loot-editor-close', {
+                    bubbles: true,
+                    detail: (evt.target.id == 'accept'),
+                }));
+                card.classList.toggle('flip');
+            }
+        },
+
+        onTransitionEnd: function(evt) {
+            evt.target.removeEventListener('transitionend', evt.target.onTransitionEnd, false);
+            evt.target.shadowRoot.getElementById('editMetadata').parentElement.shadowRoot.getElementById('dropdown').style.display = 'none';
+        },
+
+        onShowEditor: function(evt) {
+            var card = evt.target.parentElement.parentElement.parentElement.parentNode.host;
+
+            /* Fire an open event, so that the UI can enter edit mode. */
+            card.dispatchEvent(new CustomEvent('loot-editor-open', {
+                bubbles: true,
+            }));
+
+            /* There's a bug where the hiding of the front panel interferes somehow with the
+               menu getting hidden, so do that manually once the transition ends. */
+            card.addEventListener('transitionend', card.onTransitionEnd, false);
+
+            /* Now show editor. */
+            card.classList.toggle('flip');
+        },
+
+        setEditorData: function(data) {
+            this.shadowRoot.getElementById('editor').getElementsByTagName('h1')[0].textContent = data.name;
+            this.shadowRoot.getElementById('editor').getElementsByClassName('version')[0].textContent = data.version;
+            if (data.crc != '0') {
+                this.shadowRoot.getElementById('editor').getElementsByClassName('crc')[0].textContent = data.crc.toString(16).toUpperCase();
+            }
+
+            /* Fill in the editor input values. */
+            if (data.userlist && !data.userlist.enabled) {
+                this.shadowRoot.getElementById('enableEdits').checked = false;
+            } else {
+                this.shadowRoot.getElementById('enableEdits').checked = true;
+            }
+            this.shadowRoot.getElementById('globalPriority').checked = data.isGlobalPriority;
+            this.shadowRoot.getElementById('priorityValue').value = data.modPriority;
+
+            /* Clear any existing editor table data. Don't remove the last row though,
+               that's the "add new row" one. */
+            var tables = this.shadowRoot.getElementsByTagName('table');
+            for (var j = 0; j < tables.length; ++j) {
+                tables[j].clear();
+            }
+
+            /* Fill in editor table data. Masterlist-originated rows should have
+               their contents made read-only, and be unremovable. */
+            var tables = this.shadowRoot.getElementsByTagName('table');
+            for (var j = 0; j < tables.length; ++j) {
+                if (tables[j].id == 'loadAfter') {
+
+                    if (data.masterlist && data.masterlist.after) {
+                        data.masterlist.after.forEach(function(file) {
+                            var row = tables[j].addRow(file);
+                            tables[j].setReadOnly(row);
+                        });
+                    }
+                    if (data.userlist && data.userlist.after) {
+                        data.userlist.after.forEach(function(file) {
+                            tables[j].addRow(file);
+                        });
+                    }
+
+                } else if (tables[j].id == 'req') {
+
+                    if (data.masterlist && data.masterlist.req) {
+                        data.masterlist.req.forEach(function(file) {
+                            var row = tables[j].addRow(file);
+                            tables[j].setReadOnly(row);
+                        });
+                    }
+                    if (data.userlist && data.userlist.req) {
+                        data.userlist.req.forEach(function(file) {
+                            tables[j].addRow(file);
+                        });
+                    }
+
+                } else if (tables[j].id == 'inc') {
+
+                    if (data.masterlist && data.masterlist.inc) {
+                        data.masterlist.inc.forEach(function(file) {
+                            var row = tables[j].addRow(file);
+                            tables[j].setReadOnly(row);
+                        });
+                    }
+                    if (data.userlist && data.userlist.inc) {
+                        data.userlist.inc.forEach(function(file) {
+                            tables[j].addRow(file);
+                        });
+                    }
+
+                } else if (tables[j].id == 'message') {
+
+                    if (data.masterlist && data.masterlist.msg) {
+                        data.masterlist.msg.forEach(function(message) {
+                            var data = {
+                                type: message.type,
+                                content: message.content[0].str,
+                                condition: message.condition,
+                                language: message.content[0].lang
+                            };
+                            var row = tables[j].addRow(data);
+                            tables[j].setReadOnly(row);
+
+                        });
+                    }
+                    if (data.userlist && data.userlist.msg) {
+                        data.userlist.msg.forEach(function(message) {
+                            var data = {
+                                type: message.type,
+                                content: message.content[0].str,
+                                condition: message.condition,
+                                language: message.content[0].lang
+                            };
+                            tables[j].addRow(data);
+                        });
+                    }
+
+                } else if (tables[j].id == 'tags') {
+
+                    if (data.masterlist && data.masterlist.tag) {
+                        data.masterlist.tag.forEach(function(tag) {
+                            var data = data.convTagObj(tag);
+                            var row = tables[j].addRow(data);
+                            tables[j].setReadOnly(row);
+                        }, data);
+                    }
+                    if (data.userlist && data.userlist.tag) {
+                        data.userlist.tag.forEach(function(tag) {
+                            var data = data.convTagObj(tag);
+                            tables[j].addRow(data);
+                        }, data);
+                    }
+
+                } else if (tables[j].id == 'dirty') {
+
+                    if (data.masterlist && data.masterlist.dirty) {
+                        data.masterlist.dirty.forEach(function(info) {
+                            info.crc = info.crc.toString(16).toUpperCase();
+                            var row = tables[j].addRow(info);
+                            tables[j].setReadOnly(row);
+                        });
+                    }
+                    if (data.userlist && data.userlist.dirty) {
+                        data.userlist.dirty.forEach(function(info) {
+                            info.crc = info.crc.toString(16).toUpperCase();
+                            tables[j].addRow(info);
+                        });
+                    }
+
+                } else if (tables[j].id == 'locations') {
+
+                    if (data.masterlist && data.masterlist.url) {
+                        data.masterlist.url.forEach(function(location) {
+                            var temp = location;
+                            if (temp.ver) {
+                                temp.ver = temp.ver[0];
+                            }
+                            var row = tables[j].addRow(temp);
+                            tables[j].setReadOnly(row);
+                        });
+                    }
+                    if (data.userlist && data.userlist.url) {
+                        data.userlist.url.forEach(function(location) {
+                            var temp = location;
+                            if (temp.ver) {
+                                temp.ver = temp.ver[0];
+                            }
+                            tables[j].addRow(temp);
+                        });
+                    }
+                }
+            }
+        },
+
+        deactivateConflictFilter: function() {
+            this.shadowRoot.getElementById('showOnlyConflicts').checked = false;
+        },
+
+        onShowOnlyConflicts: function(evt) {
+            evt.target.dispatchEvent(new CustomEvent('loot-filter-conflicts', {
+                bubbles: true,
+                detail: evt.target.checked,
+            }));
+        },
+
+        onCopyMetadata: function(evt) {
+            evt.target.dispatchEvent(new CustomEvent('loot-copy-metadata', {
+                bubbles: true,
+            }));
+        },
+
+        onClearMetadata: function(evt) {
+            evt.target.dispatchEvent(new CustomEvent('loot-clear-metadata', {
+                bubbles: true,
+            }));
+        },
     });
     </script>
 </polymer-element>

resources/report/js/l10n.js

@@ -51,24 +51,27 @@
 
         translateStaticText: function(l10n) {
             /* Plugin card template. */
-            var pluginCard = pluginCardImportDoc.querySelector('#pluginCard').content;
-            pluginCard.getElementById('activeTick').title = l10n.translate("Active Plugin").fetch();
-            pluginCard.getElementById('dummyPlugin').title = l10n.translate("Dummy Plugin").fetch();
-            pluginCard.getElementById('loadsBSA').title = l10n.translate("Loads BSA").fetch();
-            pluginCard.getElementById('hasUserEdits').title = l10n.translate("Has User Metadata").fetch();
-            pluginCard.getElementById('menuButton').title = l10n.translate("Click to open the plugin menu.").fetch();
+            var pluginCard = document.querySelector('link[rel="import"][href$="loot-plugin-card.html"]').import.querySelector('template').content;
+            pluginCard.getElementById('front').querySelector('.activeTick').label = l10n.translate("Active Plugin").fetch();
+            pluginCard.getElementById('editor').querySelector('.activeTick').label = l10n.translate("Active Plugin").fetch();
+            pluginCard.getElementById('front').querySelector('.dummyPlugin').label = l10n.translate("Dummy Plugin").fetch();
+            pluginCard.getElementById('editor').querySelector('.dummyPlugin').label = l10n.translate("Dummy Plugin").fetch();
+            pluginCard.getElementById('front').querySelector('.loadsBSA').label = l10n.translate("Loads BSA").fetch();
+            pluginCard.getElementById('editor').querySelector('.loadsBSA').label = l10n.translate("Loads BSA").fetch();
+            pluginCard.getElementById('hasUserEdits').label = l10n.translate("Has User Metadata").fetch();
 
-            pluginCard.getElementById('enableEdits').nextElementSibling.textContent = l10n.translate("Enable Edits").fetch();
-            pluginCard.getElementById('globalPriority').nextElementSibling.title = l10n.translate("Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.").fetch();
-            pluginCard.getElementById('globalPriority').nextElementSibling.textContent = l10n.translate("Global Priority").fetch();
+            pluginCard.getElementById('enableEdits').label = l10n.translate("Enable Edits").fetch();
+            pluginCard.getElementById('globalPriority').parentElement.label = l10n.translate("Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.").fetch();
+            pluginCard.getElementById('globalPriority').label = l10n.translate("Global Priority").fetch();
             pluginCard.getElementById('priorityValue').previousElementSibling.textContent = l10n.translate("Priority Value").fetch();
 
-            pluginCard.getElementById('tableTabs').querySelector('[data-for=loadAfter]').textContent = l10n.translate("Load After").fetch();
-            pluginCard.getElementById('tableTabs').querySelector('[data-for=req]').textContent = l10n.translate("Requirements").fetch();
-            pluginCard.getElementById('tableTabs').querySelector('[data-for=inc]').textContent = l10n.translate("Incompatibilities").fetch();
-            pluginCard.getElementById('tableTabs').querySelector('[data-for=message]').textContent = l10n.translate("Messages").fetch();
-            pluginCard.getElementById('tableTabs').querySelector('[data-for=tags]').textContent = l10n.translate("Bash Tags").fetch();
-            pluginCard.getElementById('tableTabs').querySelector('[data-for=dirty]').textContent = l10n.translate("Dirty Info").fetch();
+            pluginCard.getElementById('fileTabs').querySelector('[data-for=loadAfter]').textContent = l10n.translate("Load After").fetch();
+            pluginCard.getElementById('fileTabs').querySelector('[data-for=req]').textContent = l10n.translate("Requirements").fetch();
+            pluginCard.getElementById('fileTabs').querySelector('[data-for=inc]').textContent = l10n.translate("Incompatibilities").fetch();
+            pluginCard.getElementById('miscTabs').querySelector('[data-for=message]').textContent = l10n.translate("Messages").fetch();
+            pluginCard.getElementById('miscTabs').querySelector('[data-for=tags]').textContent = l10n.translate("Bash Tags").fetch();
+            pluginCard.getElementById('miscTabs').querySelector('[data-for=dirty]').textContent = l10n.translate("Dirty Info").fetch();
+            pluginCard.getElementById('miscTabs').querySelector('[data-for=locations]').textContent = l10n.translate("Locations").fetch();
 
             pluginCard.getElementById('loadAfter').querySelector('th:first-child').textContent = l10n.translate("Filename").fetch();
             pluginCard.getElementById('loadAfter').querySelector('th:nth-child(2)').textContent = l10n.translate("Display Name").fetch();
@@ -103,13 +106,17 @@
             pluginCard.getElementById('dirty').querySelector('th:nth-child(5)').textContent = l10n.translate("Cleaning Utility").fetch();
             pluginCard.getElementById('dirty').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
 
+            pluginCard.getElementById('locations').querySelector('th:first-child').textContent = l10n.translate("URL").fetch();
+            pluginCard.getElementById('locations').querySelector('th:nth-child(2)').textContent = l10n.translate("Version").fetch();
+            pluginCard.getElementById('locations').querySelector('td:first-child').textContent = l10n.translate("Add new row...").fetch();
+
             pluginCard.getElementById('accept').textContent = l10n.translate("Apply").fetch();
             pluginCard.getElementById('cancel').textContent = l10n.translate("Cancel").fetch();
 
-            pluginCard.getElementById('showOnlyConflicts').nextSibling.textContent = l10n.translate("Show Only Conflicts").fetch();
-            pluginCard.getElementById('editMetadata').firstChild.nextSibling.textContent = l10n.translate("Edit Metadata").fetch();
-            pluginCard.getElementById('copyMetadata').firstChild.nextSibling.textContent = l10n.translate("Copy Metadata As Text").fetch();
-            pluginCard.getElementById('clearMetadata').firstChild.nextSibling.textContent = l10n.translate("Clear User Metadata").fetch();
+            pluginCard.getElementById('showOnlyConflicts').label = l10n.translate("Show Only Conflicts").fetch();
+            pluginCard.getElementById('editMetadata').label = l10n.translate("Edit Metadata").fetch();
+            pluginCard.getElementById('copyMetadata').label = l10n.translate("Copy Metadata As Text").fetch();
+            pluginCard.getElementById('clearMetadata').label = l10n.translate("Clear User Metadata").fetch();
 
             /* Plugin List Item Template */
             var pluginItem = document.querySelector('link[rel="import"][href$="loot-plugin-item.html"]').import.querySelector('template').content;

resources/report/js/plugin.js

@@ -133,7 +133,7 @@ function Plugin(obj) {
     }
 
     Plugin.prototype.createCard = function() {
-        var card = new PluginCard();
+        var card = document.createElement('loot-plugin-card');
         this.card = card;
 
         card.id = this.id;

resources/report/js/script.js

@@ -466,7 +466,7 @@ function getConflictingPluginsFromFilter() {
     return Promise.resolve([]);
 }
 function applyFilters(evt) {
-    var cards = document.getElementById('main').getElementsByTagName('plugin-card');
+    var cards = document.getElementById('main').getElementsByTagName('loot-plugin-card');
     var entries = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
     var hiddenPluginNo = 0;
     var hiddenMessageNo = 0;
@@ -639,7 +639,7 @@ function sortUIElements(pluginNames) {
     var main = document.getElementById('main');
     var cardsNav = document.getElementById('cardsNav');
     var entries = cardsNav.getElementsByTagName('loot-plugin-item');
-    if (main.getElementsByTagName('plugin-card').length != entries.length) {
+    if (main.getElementsByTagName('loot-plugin-card').length != entries.length) {
         throw Error("Error: Number of plugins in sidebar doesn't match number of plugins in main area!");
     }
     var lastCard;
@@ -658,7 +658,7 @@ function sortUIElements(pluginNames) {
         var move = false;
         if (index == 0) {
             /* Special case. */
-            move = (card != card.parentElement.getElementsByTagName('plugin-card')[0]);
+            move = (card != card.parentElement.getElementsByTagName('loot-plugin-card')[0]);
         } else {
             move = (card.previousElementSibling.getName() != pluginNames[index-1]);
         }
@@ -677,7 +677,7 @@ function sortUIElements(pluginNames) {
             if (lastCard) {
                 main.insertBefore(card, lastCard.nextElementSibling);
             } else {
-                main.insertBefore(card, main.getElementsByTagName('plugin-card')[0]);
+                main.insertBefore(card, main.getElementsByTagName('loot-plugin-card')[0]);
             }
             cardsNav.removeChild(li);
             if (lastLi) {
@@ -752,7 +752,7 @@ function sortPlugins(evt) {
 
                 /* Record the previous order in case the user cancels sorting. */
                 /* Start at 2 to skip summary and general messages. */
-                var cards = document.getElementById('main').getElementsByTagName('plugin-card');
+                var cards = document.getElementById('main').getElementsByTagName('loot-plugin-card');
                 loot.newLoadOrder = loadOrder;
                 loot.lastLoadOrder = [];
                 for (var i = 0; i < cards.length; ++i) {
@@ -1111,6 +1111,139 @@ function handleUnappliedChangesClose() {
         }
     });
 }
+function handleEditorOpen(evt) {
+    /* Set up drag 'n' drop event handlers. */
+    var elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+    for (var i = 0; i < elements.length; ++i) {
+        elements[i].draggable = true;
+        elements[i].addEventListener('dragstart', elements[i].handleDragStart, false);
+    }
+
+    /* Enable priority hover in plugins list and enable header
+       buttons if this is the only editor instance. */
+    var numEditors = 0;
+    if (document.body.hasAttribute('data-editors')) {
+        numEditors = parseInt(document.body.getAttribute('data-editors'), 10);
+    }
+    ++numEditors;
+
+    if (numEditors == 1) {
+        document.body.classList.add('editMode');
+    }
+    document.body.setAttribute('data-editors', numEditors);
+}
+function handleEditorClose(evt) {
+    /* evt.detail is true if the apply button was pressed. */
+    if (evt.detail) {
+        /* Need to record the editor control values and work out what's
+           changed, and update any UI elements necessary. Offload the
+           majority of the work to the C++ side of things. */
+
+        /* Find the plugin object. */
+        var index;
+        for (var i = 0; i < loot.game.plugins.length; ++i) {
+            if (loot.game.plugins[i].id == evt.target.id) {
+                index = i;
+                break;
+            }
+        }
+
+        var request = JSON.stringify({
+            name: 'editorClosed',
+            args: [
+                evt.target.readFromEditor(loot.game.plugins[index])
+            ]
+        });
+        loot.query(request).then(JSON.parse).then(function(result){
+            if (result) {
+                loot.game.plugins[index].modPriority = result.modPriority;
+                loot.game.plugins[index].isGlobalPriority = result.isGlobalPriority;
+                loot.game.plugins[index].messages = result.messages;
+                loot.game.plugins[index].tags = result.tags;
+                loot.game.plugins[index].isDirty = result.isDirty;
+            }
+        }).catch(processCefError);
+    }
+
+    /* Remove drag 'n' drop event handlers. */
+    var elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+    for (var i = 0; i < elements.length; ++i) {
+        elements[i].removeAttribute('draggable');
+        elements[i].removeEventListener('dragstart', elements[i].handleDragStart, false);
+    }
+
+    /* Disable priority hover in plugins list and enable header
+       buttons if this is the only editor instance. */
+    var numEditors = parseInt(document.body.getAttribute('data-editors'), 10);
+    --numEditors;
+
+    if (numEditors == 0) {
+        document.body.classList.remove('editMode');
+    }
+    document.body.setAttribute('data-editors', numEditors);
+}
+function handleConflictsFilter(evt) {
+    /* evt.detail is true if the filter has been activated. */
+    if (evt.detail) {
+        /* Un-highlight any existing filter plugin. */
+        var cards = document.getElementById('main').getElementsByTagName('loot-plugin-card');
+        for (var i = 0; i < cards.length; ++i) {
+            cards[i].classList.toggle('highlight', false);
+            cards[i].deactivateConflictFilter();
+        }
+        evt.target.classList.toggle('highlight', true);
+        document.body.setAttribute('data-conflicts', evt.target.getName());
+    } else {
+        evt.target.classList.toggle('highlight', false);
+        document.body.removeAttribute('data-conflicts');
+    }
+    applyFilters(evt);
+}
+function handleCopyMetadata(evt) {
+    /* evt.detail is the name of the plugin. */
+    var request = JSON.stringify({
+        name: 'copyMetadata',
+        args: [
+            evt.target.getName(),
+        ]
+    });
+
+    loot.query(request).catch(processCefError);
+}
+function handleClearMetadata(evt) {
+    showMessageDialog('Clear Plugin Metadata', 'Are you sure you want to clear all existing user-added metadata from "' + evt.target.getName() + '"?', false, function(result){
+        if (result) {
+            var request = JSON.stringify({
+                name: 'clearPluginMetadata',
+                args: [
+                    evt.target.getName()
+                ]
+            });
+
+            loot.query(request).then(JSON.parse).then(function(result){
+                if (result) {
+                    /* Need to empty the UI-side user metadata. */
+                    for (var i = 0; i < loot.game.plugins.length; ++i) {
+                        if (loot.game.plugins[i].id == evt.target.id) {
+                            loot.game.plugins[i].userlist = undefined;
+
+                            loot.game.plugins[i].modPriority = result.modPriority;
+                            loot.game.plugins[i].isGlobalPriority = result.isGlobalPriority;
+                            loot.game.plugins[i].messages = result.messages;
+                            loot.game.plugins[i].tags = result.tags;
+                            loot.game.plugins[i].isDirty = result.isDirty;
+
+                            /* Also update the card content. */
+                            loot.game.plugins[i].card.setEditorData(loot.game.plugins[i]);
+
+                            break;
+                        }
+                    }
+                }
+            }).catch(processCefError);
+        }
+    });
+}
 function setupEventHandlers() {
     var elements;
     /*Set up filter value and CSS setting storage read/write handlers.*/
@@ -1128,6 +1261,7 @@ function setupEventHandlers() {
     document.getElementById('hideInactivePluginMessages').addEventListener('change', applyFilters, false);
     document.getElementById('hideAllPluginMessages').addEventListener('change', applyFilters, false);
     document.getElementById('hideMessagelessPlugins').addEventListener('change', applyFilters, false);
+    document.body.addEventListener('loot-filter-conflicts', handleConflictsFilter, false);
 
     /* Set up handlers for buttons. */
     document.getElementById('redatePluginsButton').addEventListener('click', redatePlugins, false);
@@ -1164,6 +1298,12 @@ function setupEventHandlers() {
 
     /* Set up handler for closing menus. */
     document.body.addEventListener('click', onBodyClick, false);
+
+    /* Set up handler for opening and closing editors. */
+    document.body.addEventListener('loot-editor-open', handleEditorOpen, false);
+    document.body.addEventListener('loot-editor-close', handleEditorClose, false);
+    document.body.addEventListener('loot-copy-metadata', handleCopyMetadata, false);
+    document.body.addEventListener('loot-clear-metadata', handleClearMetadata, false);
 }
 function initVars() {
     loot.query('getVersion').then(function(result){

resources/report/report.html

@@ -9,12 +9,12 @@
     <script src="bower_components/platform/platform.js"></script>
     <link rel="import" href="bower_components/polymer/polymer.html">
 
-    <link rel="import" href="html/plugin-card.html">
     <link rel="import" href="html/editable-table.html">
     <link rel="import" href="html/loot-dialog.html">
     <link rel="import" href="html/loot-dropdown-menu.html">
     <link rel="import" href="html/loot-message-dialog.html">
     <link rel="import" href="html/loot-plugin-item.html">
+    <link rel="import" href="html/loot-plugin-card.html">
 
     <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
     <link rel="import" href="bower_components/core-icon/core-icon.html">
@@ -156,7 +156,7 @@
                     <!-- Generated message <li> elements go here. -->
                 </ul>
             </section>
-            <!-- Generated plugin #pluginSection elements go here. -->
+            <!-- Generated plugin <loot-plugin-card> elements go here. -->
         </div>
     </core-drawer-panel>