From 28932daff020237fc555acaf7f40b82cada0289f Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Thu, 13 Nov 2014 20:28:01 +0000
Subject: [PATCH] Started to implement <core-list> for plugin cards.

Much is broken: search, editor panels, sidebar links, CRCs, message and
Bash tag content display, and probably others too.
---
 resources/report/css/overrides.css          |   5 +
 resources/report/css/style.css              |   4 +-
 resources/report/html/loot-plugin-card.html | 333 +++++++++-----------
 resources/report/js/plugin.js               |  27 --
 resources/report/js/script.js               |   9 +-
 resources/report/report.html                |  16 +-
 6 files changed, 184 insertions(+), 210 deletions(-)

diff --git a/resources/report/css/overrides.css b/resources/report/css/overrides.css
index 243c2a51..01889702 100644
--- a/resources/report/css/overrides.css
+++ b/resources/report/css/overrides.css
@@ -73,4 +73,9 @@ paper-item.core-selected {
 /* This styles divs like core-menus. */
 html /deep/ paper-dropdown > div {
     margin: 12px;
+}
+
+/* This stops the main core-list having its own scrollbars. */
+#main > core-list {
+    overflow-y: initial !important;
 }
\ No newline at end of file
diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 0fe54075..bb8d8e1f 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -79,7 +79,9 @@ section {
     border-bottom-left-radius: 2px;
     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
 }
-
+#generalMessages {
+    margin-bottom: 0.5em;
+}
 paper-item > core-icon {
     margin-right: 0.5em;
 }
diff --git a/resources/report/html/loot-plugin-card.html b/resources/report/html/loot-plugin-card.html
index 47413e5e..500415e0 100644
--- a/resources/report/html/loot-plugin-card.html
+++ b/resources/report/html/loot-plugin-card.html
@@ -40,10 +40,10 @@ loot-clear-metadata
     <template>
         <style>
         /* Host and front/editor styling. */
-        :host {
+        #wrapper {
             display: block;
             background:white;
-            margin:1em;
+            margin: 0.5em 1em;
             position: relative;
             border-top-left-radius: 2px;
             border-top-right-radius: 2px;
@@ -177,182 +177,163 @@ loot-clear-metadata
             padding: 1em;
         }
         </style>
-        <section id="front">
-            <core-toolbar>
-                <core-tooltip class="activeTick" label="Active Plugin">
-                    <core-icon icon="check"></core-icon>
-                </core-tooltip>
-                <content select="h1"></content>
-                <content select=".version"></content>
-                <span flex><content select=".crc"></content></span>
-                <core-tooltip class="dummyPlugin" label="Dummy Plugin">
-                    <core-icon icon="visibility-off"></core-icon>
-                </core-tooltip>
-                <core-tooltip class="loadsBSA" label="Loads BSA">
-                    <core-icon icon="attachment"></core-icon>
-                </core-tooltip>
-                <core-tooltip id="hasUserEdits" label="Has User Metadata">
-                    <core-icon icon="account-circle"></core-icon>
-                </core-tooltip>
-                <paper-menu-button>
-                    <paper-icon-button icon="more-vert"></paper-icon-button>
-                    <paper-dropdown class="dropdown" halign="right">
-                        <div>
-                            <paper-item>
-                                <paper-checkbox id="showOnlyConflicts" label="Show Only Conflicts" flex></paper-checkbox>
-                            </paper-item>
-                            <paper-item id="editMetadata">
-                                <core-icon icon="create"></core-icon>
-                                Edit Metadata
-                            </paper-item>
-                            <paper-item id="copyMetadata">
-                                <core-icon icon="content-copy"></core-icon>
-                                Copy Metadata As Text
-                            </paper-item>
-                            <paper-item id="clearMetadata">
-                                <core-icon icon="delete"></core-icon>
-                                Clear User Metadata
-                            </paper-item>
-                        </div>
-                    </paper-dropdown>
-                </paper-menu-button>
-            </core-toolbar>
-            <content select=".tag.add"></content>
-            <content select=".tag.remove"></content>
-            <content select="ul"></content>
-        </section>
-        <section id="editor">
-            <core-toolbar>
-                <core-tooltip class="activeTick" label="Active Plugin">
-                    <core-icon icon="check"></core-icon>
-                </core-tooltip>
-                <h1></h1>
-                <span class="version"></span>
-                <span class="crc" flex></span>
-                <core-tooltip class="dummyPlugin" label="Dummy Plugin">
-                    <core-icon icon="visibility-off"></core-icon>
-                </core-tooltip>
-                <core-tooltip class="loadsBSA" label="Loads BSA">
-                    <core-icon icon="attachment"></core-icon>
-                </core-tooltip>
-            </core-toolbar>
-            <div>
-                <paper-checkbox id="enableEdits" label="Enable Edits"></paper-checkbox>
-                <core-tooltip label="Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins." position="right">
-                    <paper-checkbox id="globalPriority" label="Global Priority"></paper-checkbox>
-                </core-tooltip>
-                <div horizontal layout center>
-                    <div>Priority Value</div>
-                    <paper-input-decorator>
-                        <input id="priorityValue" is="core-input" type="number" max="999999" min="-999999" step="1" value="0" preventInvalidInput>
-                    </paper-input-decorator>
+        <div id="wrapper">
+            <section id="front">
+                <core-toolbar>
+                    <core-tooltip class="activeTick" label="Active Plugin">
+                        <core-icon icon="check"></core-icon>
+                    </core-tooltip>
+                    <content select="h1"></content>
+                    <content select=".version"></content>
+                    <span flex><content select=".crc"></content></span>
+                    <core-tooltip class="dummyPlugin" label="Dummy Plugin">
+                        <core-icon icon="visibility-off"></core-icon>
+                    </core-tooltip>
+                    <core-tooltip class="loadsBSA" label="Loads BSA">
+                        <core-icon icon="attachment"></core-icon>
+                    </core-tooltip>
+                    <core-tooltip id="hasUserEdits" label="Has User Metadata">
+                        <core-icon icon="account-circle"></core-icon>
+                    </core-tooltip>
+                    <paper-menu-button>
+                        <paper-icon-button icon="more-vert"></paper-icon-button>
+                        <paper-dropdown class="dropdown" halign="right">
+                            <div>
+                                <paper-item>
+                                    <paper-checkbox id="showOnlyConflicts" label="Show Only Conflicts" flex></paper-checkbox>
+                                </paper-item>
+                                <paper-item id="editMetadata">
+                                    <core-icon icon="create"></core-icon>
+                                    Edit Metadata
+                                </paper-item>
+                                <paper-item id="copyMetadata">
+                                    <core-icon icon="content-copy"></core-icon>
+                                    Copy Metadata As Text
+                                </paper-item>
+                                <paper-item id="clearMetadata">
+                                    <core-icon icon="delete"></core-icon>
+                                    Clear User Metadata
+                                </paper-item>
+                            </div>
+                        </paper-dropdown>
+                    </paper-menu-button>
+                </core-toolbar>
+                <content select=".tag.add"></content>
+                <content select=".tag.remove"></content>
+                <content select="ul"></content>
+            </section>
+            <section id="editor">
+                <core-toolbar>
+                    <core-tooltip class="activeTick" label="Active Plugin">
+                        <core-icon icon="check"></core-icon>
+                    </core-tooltip>
+                    <h1></h1>
+                    <span class="version"></span>
+                    <span class="crc" flex></span>
+                    <core-tooltip class="dummyPlugin" label="Dummy Plugin">
+                        <core-icon icon="visibility-off"></core-icon>
+                    </core-tooltip>
+                    <core-tooltip class="loadsBSA" label="Loads BSA">
+                        <core-icon icon="attachment"></core-icon>
+                    </core-tooltip>
+                </core-toolbar>
+                <div>
+                    <paper-checkbox id="enableEdits" label="Enable Edits"></paper-checkbox>
+                    <core-tooltip label="Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins." position="right">
+                        <paper-checkbox id="globalPriority" label="Global Priority"></paper-checkbox>
+                    </core-tooltip>
+                    <div horizontal layout center>
+                        <div>Priority Value</div>
+                        <paper-input-decorator>
+                            <input id="priorityValue" is="core-input" type="number" max="999999" min="-999999" step="1" value="0" preventInvalidInput>
+                        </paper-input-decorator>
+                    </div>
+                    <div id="tableTabs">
+                        <paper-tabs selected="loadAfter" valueattr="data-for" scrollable>
+                            <paper-tab data-for="loadAfter">Load After</paper-tab>
+                            <paper-tab data-for="req">Requirements</paper-tab>
+                            <paper-tab data-for="inc">Incompatibilities</paper-tab>
+                            <paper-tab data-for="message">Messages</paper-tab>
+                            <paper-tab data-for="tags">Bash Tags</paper-tab>
+                            <paper-tab data-for="dirty">Dirty Info</paper-tab>
+                            <paper-tab data-for="locations">Locations</paper-tab>
+                        </paper-tabs>
+                        <core-animated-pages selected="loadAfter" valueattr="id" transitions="slide-from-right">
+                            <table is="editable-table" id="loadAfter" data-template="fileRow">
+                                <thead>
+                                    <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                                </thead>
+                                <tbody>
+                                    <!-- File rows go here. -->
+                                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                                </tbody>
+                            </table>
+                            <table is="editable-table" id="req" data-template="fileRow">
+                                <thead>
+                                    <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                                </thead>
+                                <tbody>
+                                    <!-- File rows go here. -->
+                                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                                </tbody>
+                            </table>
+                            <table is="editable-table" id="inc" data-template="fileRow">
+                                <thead>
+                                    <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+                                </thead>
+                                <tbody>
+                                    <!-- File rows go here. -->
+                                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                                </tbody>
+                            </table>
+                            <table is="editable-table" id="message" data-template="messageRow">
+                                <thead>
+                                    <tr><th>Type</th><th>Content</th><th>Condition</th><th>Language</th><th></th></tr>
+                                </thead>
+                                <tbody>
+                                    <!-- Message rows go here. -->
+                                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                                </tbody>
+                            </table>
+                            <table is="editable-table" id="tags" data-template="tagRow">
+                                <thead>
+                                    <tr><th>Add/Remove</th><th>Bash Tag</th><th>Condition</th><th></th></tr>
+                                </thead>
+                                <tbody>
+                                    <!-- Bash Tag rows go here. -->
+                                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                                </tbody>
+                            </table>
+                            <table is="editable-table" id="dirty" data-template="dirtyInfoRow">
+                                <thead>
+                                    <tr><th>CRC</th><th>ITM Count</th><th>Deleted References</th><th>Deleted Navmeshes</th><th>Cleaning Utility</th><th></th></tr>
+                                </thead>
+                                <tbody>
+                                    <!-- Dirty info rows go here. -->
+                                    <tr><td colspan="4">Add new row...</td><td></td></tr>
+                                </tbody>
+                            </table>
+                            <table is="editable-table" id="locations" data-template="locationRow">
+                                <thead>
+                                    <tr><th>URL</th><th>Version</th><th></th></tr>
+                                </thead>
+                                <tbody>
+                                    <!-- Location rows go here. -->
+                                    <tr><td colspan="3">Add new row...</td><td></td></tr>
+                                </tbody>
+                            </table>
+                        </core-animated-pages>
+                    </div>
+                    <div id="buttons">
+                        <paper-button id="accept">Apply</paper-button>
+                        <paper-button id="cancel">Cancel</paper-button>
+                    </div>
                 </div>
-                <div id="tableTabs">
-                    <paper-tabs selected="loadAfter" valueattr="data-for" scrollable>
-                        <paper-tab data-for="loadAfter">Load After</paper-tab>
-                        <paper-tab data-for="req">Requirements</paper-tab>
-                        <paper-tab data-for="inc">Incompatibilities</paper-tab>
-                        <paper-tab data-for="message">Messages</paper-tab>
-                        <paper-tab data-for="tags">Bash Tags</paper-tab>
-                        <paper-tab data-for="dirty">Dirty Info</paper-tab>
-                        <paper-tab data-for="locations">Locations</paper-tab>
-                    </paper-tabs>
-                    <core-animated-pages selected="loadAfter" valueattr="id" transitions="slide-from-right">
-                        <table is="editable-table" id="loadAfter" data-template="fileRow">
-                            <thead>
-                                <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                            </thead>
-                            <tbody>
-                                <!-- File rows go here. -->
-                                <tr><td colspan="4">Add new row...</td><td></td></tr>
-                            </tbody>
-                        </table>
-                        <table is="editable-table" id="req" data-template="fileRow">
-                            <thead>
-                                <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                            </thead>
-                            <tbody>
-                                <!-- File rows go here. -->
-                                <tr><td colspan="4">Add new row...</td><td></td></tr>
-                            </tbody>
-                        </table>
-                        <table is="editable-table" id="inc" data-template="fileRow">
-                            <thead>
-                                <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                            </thead>
-                            <tbody>
-                                <!-- File rows go here. -->
-                                <tr><td colspan="4">Add new row...</td><td></td></tr>
-                            </tbody>
-                        </table>
-                        <table is="editable-table" id="message" data-template="messageRow">
-                            <thead>
-                                <tr><th>Type</th><th>Content</th><th>Condition</th><th>Language</th><th></th></tr>
-                            </thead>
-                            <tbody>
-                                <!-- Message rows go here. -->
-                                <tr><td colspan="4">Add new row...</td><td></td></tr>
-                            </tbody>
-                        </table>
-                        <table is="editable-table" id="tags" data-template="tagRow">
-                            <thead>
-                                <tr><th>Add/Remove</th><th>Bash Tag</th><th>Condition</th><th></th></tr>
-                            </thead>
-                            <tbody>
-                                <!-- Bash Tag rows go here. -->
-                                <tr><td colspan="4">Add new row...</td><td></td></tr>
-                            </tbody>
-                        </table>
-                        <table is="editable-table" id="dirty" data-template="dirtyInfoRow">
-                            <thead>
-                                <tr><th>CRC</th><th>ITM Count</th><th>Deleted References</th><th>Deleted Navmeshes</th><th>Cleaning Utility</th><th></th></tr>
-                            </thead>
-                            <tbody>
-                                <!-- Dirty info rows go here. -->
-                                <tr><td colspan="4">Add new row...</td><td></td></tr>
-                            </tbody>
-                        </table>
-                        <table is="editable-table" id="locations" data-template="locationRow">
-                            <thead>
-                                <tr><th>URL</th><th>Version</th><th></th></tr>
-                            </thead>
-                            <tbody>
-                                <!-- Location rows go here. -->
-                                <tr><td colspan="3">Add new row...</td><td></td></tr>
-                            </tbody>
-                        </table>
-                    </core-animated-pages>
-                </div>
-                <div id="buttons">
-                    <paper-button id="accept">Apply</paper-button>
-                    <paper-button id="cancel">Cancel</paper-button>
-                </div>
-            </div>
-        </section>
+            </section>
+        </div>
     </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('tableTabs').firstElementChild.addEventListener('core-select', this.onShowEditorTable, false);
 
@@ -471,7 +452,7 @@ loot-clear-metadata
         },
 
         onHideEditor: function(evt) {
-            var card = evt.target.parentElement.parentElement.parentElement.parentNode.host;
+            var card = evt.target.parentElement.parentElement.parentElement.parentElement.parentNode.host;
 
             /* First validate table inputs. */
             var isValid = true;
@@ -494,7 +475,7 @@ loot-clear-metadata
         },
 
         onShowEditor: function(evt) {
-            var card = evt.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentNode.host;
+            var card = evt.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentNode.host;
 
             /* Fill in editor toolbar. */
             var editor = card.shadowRoot.getElementById('editor');
diff --git a/resources/report/js/plugin.js b/resources/report/js/plugin.js
index bf86fc11..a515aa11 100644
--- a/resources/report/js/plugin.js
+++ b/resources/report/js/plugin.js
@@ -132,32 +132,6 @@ function Plugin(obj) {
         }
     }
 
-    Plugin.prototype.createCard = function() {
-        this.card = document.createElement('loot-plugin-card');
-
-        this.card.id = this.id;
-
-        this.card.setAttribute('data-active', this.isActive);
-        this.card.setAttribute('data-dummy', this.isDummy);
-        this.card.setAttribute('data-bsa', this.loadsBSA);
-        this.card.setAttribute('data-edits', this.userlist != undefined);
-
-        /* Fill in name, version, CRC. */
-        this.card.getElementsByTagName('h1')[0].textContent = this.name;
-        this.card.getElementsByClassName('version')[0].textContent = this.version;
-        if (this.crc != 0) {
-            this.card.getElementsByClassName('crc')[0].textContent = this.crc.toString(16).toUpperCase();
-        }
-
-        /* Fill in Bash Tag suggestions. */
-        this.updateCardTags();
-
-        /* Fill in messages. */
-        this.updateCardMessages();
-
-        document.getElementById('main').appendChild(this.card);
-    }
-
     Plugin.prototype.observer = function(changes) {
         changes.forEach(function(change) {
             if (change.name == 'userlist') {
@@ -220,7 +194,6 @@ function Plugin(obj) {
         });
     }
 
-    this.createCard();
     Object.observe(this, this.observer);
 }
 
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 71af16cf..f946eed6 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -564,10 +564,6 @@ function changeGame(evt) {
 
         /* Clear the UI of all existing game-specific data. Also
            clear the card and li variables for each plugin object. */
-        loot.game.plugins.forEach(function(plugin){
-            plugin.card.parentElement.removeChild(plugin.card);
-            plugin.card = undefined;
-        });
         var globalMessages = document.getElementById('generalMessages').getElementsByTagName('ul')[0];
         while (globalMessages.firstElementChild) {
             globalMessages.removeChild(globalMessages.firstElementChild);
@@ -581,6 +577,7 @@ function changeGame(evt) {
             loot.game.globalMessages = gameInfo.globalMessages;
             loot.game.plugins = gameInfo.plugins;
             document.getElementById('cardsNav').querySelector('core-list').data = loot.game.plugins;
+            document.getElementById('main').querySelector('core-list').data = loot.game.plugins;
         } catch (e) {
             console.log(e);
             console.log('changeGame response: ' + result);
@@ -1345,6 +1342,7 @@ function initVars() {
                     loot.game.globalMessages = game.globalMessages;
                     loot.game.plugins = game.plugins;
                     document.getElementById('cardsNav').querySelector('core-list').data = loot.game.plugins;
+                    document.getElementById('main').querySelector('core-list').data = loot.game.plugins;
 
                     applySavedFilters();
                     closeProgressDialog();
@@ -1443,6 +1441,9 @@ function onFocus(evt) {
 }
 
 window.addEventListener('polymer-ready', function(e) {
+    /* Set the plugin list's scroll target to its parent. */
+    document.getElementById('main').querySelector('core-list').scrollTarget = document.getElementById('main');
+
     require(['bower_components/marked/lib/marked', 'js/l10n', 'js/plugin'], function(markedResponse, l10nResponse) {
         marked = markedResponse;
         l10n = l10nResponse;
diff --git a/resources/report/report.html b/resources/report/report.html
index cf8b4443..ac0060f8 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -118,8 +118,8 @@
                                 <a href="#{{model.id}}">{{model.name}}</a>
                             </loot-plugin-item>
                         </template>
+                        <!-- Generated <loot-plugin-item> elements go here. -->
                     </core-list>
-                    <!-- Generated <loot-plugin-item> elements go here, containing # links to each plugin's section in the list. -->
                 </div>
                 <div id="filters" class="tab-content" flex>
                     <paper-checkbox id="hideVersionNumbers" data-class="version" label="Hide version numbers"></paper-checkbox>
@@ -200,7 +200,19 @@
                     <!-- Generated message <li> elements go here. -->
                 </ul>
             </section>
-            <!-- Generated plugin <loot-plugin-card> elements go here. -->
+            <core-list>
+                <template>
+                    <loot-plugin-card id="{{model.id}}" data-active="{{model.isActive}}" data-dummy="{{model.isDummy}}" data-bsa="{{model.loadsBSA}}" data-edits="{{model.userlist != undefined}}">
+                        <h1>{{model.name}}</h1>
+                        <span class="version">{{model.version}}</span>
+                        <span class="crc"></span>
+                        <span class="tag add"></span>
+                        <span class="tag remove"></span>
+                        <ul></ul>
+                    </loot-plugin-card>
+                </template>
+                <!-- Generated <loot-plugin-card> elements go here. -->
+            </core-list>
         </div>
     </core-drawer-panel>
     <paper-toast id="toast"></paper-toast>