From 62edbc917fdd514c769688bbf8cca4beff30f294 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 30 Aug 2015 12:49:03 +0100
Subject: [PATCH] Update loot-plugin-editor

Editor data is now set only with setEditorData(), the `data`
member has been removed. All metadata changes need to be
propagated using setEditorData(). Plugin name, version and crc
now exist in the editor's light DOM.
---
 scripts/vulcanize.js                          |   1 +
 src/gui/html/elements/loot-plugin-editor.html | 940 ++++++++----------
 .../elements/test_loot-plugin-editor.html     |  37 +
 3 files changed, 457 insertions(+), 521 deletions(-)
 create mode 100644 src/tests/gui/html/elements/test_loot-plugin-editor.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index 4d2482bb..0856eb6d 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -66,6 +66,7 @@ function vulcanizeTests(releasePath) {
     'test_loot-custom-icons.html',
     'test_loot-dropdown-menu.html',
     'test_loot-message-dialog.html',
+    'test_loot-plugin-editor.html',
     'test_loot-plugin-item.html',
     'test_loot-search-toolbar.html',
   ];
diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index 0ff7eb92..5e5a4d5f 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -7,551 +7,449 @@ loot-editor-close
 -->
 
 <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">
-<link rel="import" href="../../../../bower_components/core-icon/core-icon.html">
-<link rel="import" href="../../../../bower_components/core-icons/core-icons.html">
-<link rel="import" href="../../../../bower_components/core-selector/core-selector.html">
-<link rel="import" href="../../../../bower_components/core-label/core-label.html">
-<link rel="import" href="../../../../bower_components/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="../../../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../../../bower_components/paper-input/paper-input-decorator.html">
-<link rel="import" href="../../../../bower_components/paper-tabs/paper-tabs.html">
+
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../../../bower_components/iron-pages/iron-pages.html">
+
 <link rel="import" href="../../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../../../bower_components/paper-tabs/paper-tabs.html">
 <link rel="import" href="../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../../../../bower_components/paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../../../../bower_components/paper-tooltip/paper-tooltip.html">
 
 <link rel="import" href="editable-table.html">
+<link rel="import" href="loot-custom-icons.html">
 
-<polymer-element name="loot-plugin-editor" attributes="data">
-    <template>
-        <style>
-        /* Material Design for non-button icons. */
-        core-tooltip > core-icon {
-            color: rgba(0, 0, 0, 0.54);
-        }
+<dom-module id="loot-plugin-editor">
+  <template>
+    <style>
+      /* Material Design for non-button icons. */
+      iron-icon {
+        color: var(--loot-secondary-text-color);
+        padding: 8px;
+      }
 
-        /* Icon styling. */
-        :host-context(loot-plugin-card[data-active=false]) #activeTick {
-            visibility: hidden;
-        }
-        :host-context(loot-plugin-card[data-archive=false]) #loadsArchive,
-        :host-context(loot-plugin-card[data-empty=false]) #emptyPlugin,
-        :host-context(loot-plugin-card[data-master=false]) #isMaster {
-            display: none;
-        }
-        #activeTick > core-icon {
-            color: green;
-        }
-        #accept {
-            color: #2196F3;
-        }
-        #cancel {
-            color: red;
-        }
+      /* Icon styling. */
+      [hidden] {
+        display: none;
+      }
+      #activeTick {
+        color: green;
+      }
+      #activeTick[hidden] {
+        display: initial;
+        visibility: hidden;
+      }
+      #accept {
+        color: var(--loot-accent-color);
+      }
+      #cancel {
+        color: red;
+      }
 
-        /* Content styling. */
-        h1, #version, #crc {
-            display: inline-block;
-            font-weight: 400;
-            font-size: 1rem;
-        }
-        h1 {
-            margin: 0;
-            font-size: 1.143rem;
-        }
-        #version {
-            margin-left: 16px;
-            color: #607D8B;
-        }
-        #crc {
-            margin-left: 16px;
-            color: #795548;
-        }
-        :host-context(#main[data-hide-version]) #version,
-        :host-context(#main[data-hide-crc]) #crc {
-            display: none;
-        }
+      /* Content styling. */
+      ::content h1, #version, #crc {
+        display: inline-block;
+        font-weight: 400;
+        font-size: 1rem;
+      }
+      ::content h1 {
+        margin: 0;
+        font-size: 1.143rem;
+      }
+      #version {
+        margin-left: 16px;
+        color: #607D8B;
+      }
+      #crc {
+        margin-left: 16px;
+        color: #795548;
+      }
 
-        /* Editor input styling. */
-        #main > * {
-            height: 48px;
-        }
-        #main > paper-checkbox, #main > core-tooltip {
-            line-height: 48px;
-        }
-        #main > div > div:first-child {
-            margin-right: 16px;
-        }
-        #main paper-input-decorator {
-            position: relative;
-            top: -2px;
-        }
-        core-selector > *:not(.core-selected) {
-            display: none;
-        }
+      /* Editor input styling. */
+      #main > div {
+        height: 48px;
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+      }
+      #main > div > div:first-child {
+        margin-right: 16px;
+        @apply(--layout-flex);
+      }
+      iron-pages > *:not(.iron-selected) {
+        display: none;
+      }
 
-        /* Misc Styling. */
-        core-toolbar.medium-tall {
-            background: #CFD4E9;
-            height: 104px;
-        }
-        core-toolbar > div {
-            position: relative;
-            top: -4px;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-        core-tooltip > core-icon {
-            vertical-align: inherit !important;
-        }
-        core-selector > * {
-            border: 4px solid #CFD4E9;
-            border-top: none;
-            background: white;
-            margin-bottom: 4px;
-        }
-        #main {
-            padding: 16px;
-            overflow: hidden;
-        }
-        core-selector > div > table[is=editable-table] th {
-            padding-top: 8px;
-            padding-bottom: 8px;
-        }
-        </style>
-        <core-toolbar class="medium-tall">
-            <core-tooltip id="activeTick" label="Active Plugin" noarrow>
-                <core-icon icon="check"></core-icon>
-            </core-tooltip>
-            <div flex>
-                <h1>{{data.name}}</h1>
-                <span id="version"></span>
-                <span id="crc"></span>
-            </div>
-            <core-tooltip id="isMaster" label="Master File" noarrow>
-                <core-icon icon="loot-custom-icons:crown"></core-icon>
-            </core-tooltip>
-            <core-tooltip id="emptyPlugin" label="Empty Plugin" noarrow>
-                <core-icon icon="visibility-off"></core-icon>
-            </core-tooltip>
-            <core-tooltip id="loadsArchive" label="Loads Archive" noarrow>
-                <core-icon icon="attachment"></core-icon>
-            </core-tooltip>
-            <core-tooltip label="Apply" noarrow>
-                <paper-icon-button id="accept" icon="check"></paper-icon-button>
-            </core-tooltip>
-            <core-tooltip label="Cancel" noarrow>
-                <paper-icon-button id="cancel" icon="close"</paper-icon-button>
-            </core-tooltip>
-            <paper-tabs id="tableTabs" class="bottom fit" selected="main" valueattr="data-for" scrollable>
-                <paper-tab data-for="main">Main</paper-tab>
-                <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-toolbar>
-        <core-selector selected="main" valueattr="id">
-            <div id="main">
-                <core-label center horizontal layout>
-                    <div flex>Enable Edits</div>
-                    <paper-toggle-button id="enableEdits" for></paper-toggle-button>
-                </core-label>
-                <core-tooltip label="Compare against all other plugins, not just conflicting plugins." noarrow center horizontal layout>
-                    <core-label center horizontal layout flex>
-                        <div flex>Global Priority</div>
-                        <paper-toggle-button id="globalPriority" for></paper-toggle-button>
-                    </core-label>
-                </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" preventInvalidInput>
-                    </paper-input-decorator>
-                </div>
-            </div>
-            <div id="loadAfter">
-                <table is="editable-table" data-template="fileRow">
-                    <thead>
-                        <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- File rows go here. -->
-                    </tbody>
-                </table>
-            </div>
-            <div id="req">
-                <table is="editable-table" data-template="fileRow">
-                    <thead>
-                        <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- File rows go here. -->
-                    </tbody>
-                </table>
-            </div>
-            <div id="inc">
-                <table is="editable-table" data-template="fileRow">
-                    <thead>
-                        <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- File rows go here. -->
-                    </tbody>
-                </table>
-            </div>
-            <div id="message">
-                <table is="editable-table" 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. -->
-                    </tbody>
-                </table>
-            </div>
-            <div id="tags">
-                <table is="editable-table" 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. -->
-                    </tbody>
-                </table>
-            </div>
-            <div id="dirty">
-                <table is="editable-table" 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. -->
-                    </tbody>
-                </table>
-            </div>
-            <div id="locations">
-                <table is="editable-table" data-template="locationRow">
-                    <thead>
-                        <tr><th>URL</th><th>Name</th><th></th></tr>
-                    </thead>
-                    <tbody>
-                        <!-- Location rows go here. -->
-                    </tbody>
-                </table>
-            </div>
-        </core-selector>
-    </template>
-    <script>
-    Polymer({
-        data: undefined,
-
-        observe: {
-            'data.isPriorityGlobal': 'onPriorityChange',
-            'data.priority': 'onPriorityChange',
-            'data.userlist': 'onDataCacheChange',
+      /* Misc Styling. */
+      paper-toolbar.medium-tall {
+        --paper-toolbar-background: #CFD4E9;
+        --paper-toolbar-color: var(--loot-primary-text-color);
+        height: 104px;
+      }
+      iron-pages > * {
+        border: 4px solid #CFD4E9;
+        border-top: none;
+        background: white;
+        margin-bottom: 4px;
+      }
+      #main {
+        padding: 16px;
+        overflow: hidden;
+      }
+      iron-pages > div > table[is=editable-table] th {
+        padding-top: 8px;
+        padding-bottom: 8px;
+      }
+      #title {
+        @apply(--layout-flex);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      #tableTabs {
+        --paper-tabs-selection-bar-color: var(--loot-accent-color);
+      }
+      paper-tab {
+        --paper-tab-ink: var(--loot-accent-color);
+      }
+    </style>
+    <paper-toolbar class="medium-tall">
+      <iron-icon id="activeTick" icon="check"></iron-icon>
+      <paper-tooltip for="activeTick">Active Plugin</paper-tooltip>
+      <div id="title">
+        <content select="h1"></content>
+        <span id="version">
+          <content select=".version"></content>
+        </span>
+        <span id="crc">
+          <content select=".crc"></content>
+        </span>
+      </div>
+      <iron-icon id="isMaster" icon="loot-custom-icons:crown"></iron-icon>
+      <paper-tooltip for="isMaster">Master File</paper-tooltip>
+      <iron-icon id="isEmpty" icon="visibility-off"></iron-icon>
+      <paper-tooltip for="isEmpty">Empty Plugin</paper-tooltip>
+      <iron-icon id="loadsArchive" icon="attachment"></iron-icon>
+      <paper-tooltip for="loadsArchive">Loads Archive</paper-tooltip>
+      <paper-icon-button id="accept" icon="check"></paper-icon-button>
+      <paper-tooltip for="accept">Apply</paper-tooltip>
+      <paper-icon-button id="cancel" icon="close"></paper-icon-button>
+      <paper-tooltip for="cancel">Cancel</paper-tooltip>
+      <paper-tabs id="tableTabs" class="bottom fit" selected="{{selected}}" attr-for-selected="data-for" scrollable>
+        <paper-tab data-for="main">Main</paper-tab>
+        <paper-tab data-for="after">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="url">Locations</paper-tab>
+      </paper-tabs>
+    </paper-toolbar>
+    <iron-pages id="tablePages" selected="{{selected}}" attr-for-selected="id">
+      <div id="main">
+        <div>
+          <div>Enable Edits</div>
+          <paper-toggle-button id="enableEdits"></paper-toggle-button>
+        </div>
+        <div>
+          <div>Global Priority</div>
+          <paper-toggle-button id="isPriorityGlobal"></paper-toggle-button>
+          <paper-tooltip for="isPriorityGlobal">Compare against all other plugins, not just conflicting plugins.</paper-tooltip>
+        </div>
+        <div>
+          <div>Priority Value</div>
+          <paper-input id="priorityValue" type="number" max="999999" min="-999999" step="1" prevent-invalid-input no-label-float></paper-input>
+        </div>
+      </div>
+      <div id="after">
+        <table is="editable-table" data-template="fileRow">
+          <thead>
+            <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+          </thead>
+          <tbody>
+            <!-- File rows go here. -->
+          </tbody>
+        </table>
+      </div>
+      <div id="req">
+        <table is="editable-table" data-template="fileRow">
+          <thead>
+            <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+          </thead>
+          <tbody>
+            <!-- File rows go here. -->
+          </tbody>
+        </table>
+      </div>
+      <div id="inc">
+        <table is="editable-table" data-template="fileRow">
+          <thead>
+            <tr><th>Filename</th><th>Display Name</th><th>Condition</th><th></th></tr>
+          </thead>
+          <tbody>
+            <!-- File rows go here. -->
+          </tbody>
+        </table>
+      </div>
+      <div id="message">
+        <table is="editable-table" 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. -->
+          </tbody>
+        </table>
+      </div>
+      <div id="tags">
+        <table is="editable-table" 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. -->
+          </tbody>
+        </table>
+      </div>
+      <div id="dirty">
+        <table is="editable-table" 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. -->
+          </tbody>
+        </table>
+      </div>
+      <div id="url">
+        <table is="editable-table" data-template="locationRow">
+          <thead>
+            <tr><th>URL</th><th>Name</th><th></th></tr>
+          </thead>
+          <tbody>
+            <!-- Location rows go here. -->
+          </tbody>
+        </table>
+      </div>
+    </iron-pages>
+  </template>
+  <script>
+    'use strict';
+    Polymer({ // eslint-disable-line new-cap, no-undef
+      is: 'loot-plugin-editor',
+      properties: {
+        selected: {
+          type: String,
+          value: 'main',
         },
+      },
 
-        attached: function() {
-            this.shadowRoot.getElementById('tableTabs').addEventListener('core-select', this.onTabSelect, false);
+      attached() {
+        this.$.accept.addEventListener('click', this._onHideEditor);
+        this.$.cancel.addEventListener('click', this._onHideEditor);
+        this.$.tablePages.addEventListener('iron-deselect', this._onTablePageActivate);
+      },
 
-            this.shadowRoot.getElementById('accept').addEventListener('click', this.onHideEditor, false);
-            this.shadowRoot.getElementById('cancel').addEventListener('click', this.onHideEditor, false);
+      detached() {
+        this.$.accept.removeEventListener('click', this._onHideEditor);
+        this.$.cancel.removeEventListener('click', this._onHideEditor);
+        this.$.tablePages.removeEventListener('iron-deselect', this._onTablePageActivate);
+      },
 
-            /* Need to set the table tab height explicitly, so set it to the tallest table. */
-        },
+      _onTablePageActivate() {
+        /* Notify that this editor (may have) changed size. */
+        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+      },
 
-        detached: function() {
-            this.shadowRoot.getElementById('tableTabs').removeEventListener('core-select', this.onTabSelect, false);
+      _rowDataToMessage(rowData) {
+        return {
+          type: rowData.type,
+          content: [{
+            str: rowData.content,
+            lang: rowData.language,
+          }],
+          condition: rowData.condition,
+        };
+      },
 
-            this.shadowRoot.getElementById('accept').removeEventListener('click', this.onHideEditor, false);
-            this.shadowRoot.getElementById('cancel').removeEventListener('click', this.onHideEditor, false);
-        },
+      _rowDataToCrc(rowData) {
+        return {
+          crc: parseInt(rowData.crc, 16),
+          itm: rowData.itm,
+          udr: rowData.udr,
+          nav: rowData.nav,
+          util: rowData.util,
+        };
+      },
 
-        onTabSelect: function(evt) {
-            if (evt.detail.isSelected) {
-                evt.target.parentElement.nextElementSibling.selected = evt.target.selected;
+      readFromEditor(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. */
+
+        const plugin = {
+          name: this.querySelector('h1').textContent,
+          userlist: {},
+        };
+
+        /* 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.$.isPriorityGlobal.checked !== oldData.isPriorityGlobal
+            || this.$.priorityValue.value !== oldData.priority) {
+          plugin.isPriorityGlobal = this.$.isPriorityGlobal.checked;
+          plugin.priority = this.$.priorityValue.value;
+
+          /* Also mark the priority as being explicitly set in the userlist. */
+          plugin.userlist.hasExplicitPriority = true;
+        }
+
+        plugin.userlist.enabled = this.$.enableEdits.checked;
+
+        const tables = this.shadowRoot.querySelectorAll('table');
+        for (let j = 0; j < tables.length; ++j) {
+          const rowsData = tables[j].getRowsData(true);
+          if (rowsData.length > 0) {
+            if (tables[j].parentElement.id === 'after') {
+              plugin.userlist.after = rowsData;
+            } else if (tables[j].parentElement.id === 'req') {
+              plugin.userlist.req = rowsData;
+            } else if (tables[j].parentElement.id === 'inc') {
+              plugin.userlist.inc = rowsData;
+            } else if (tables[j].parentElement.id === 'message') {
+              plugin.userlist.msg = rowsData.map(this._rowDataToMessage);
+            } else if (tables[j].parentElement.id === 'tags') {
+              plugin.userlist.tag = rowsData.map(loot.Plugin.tagFromRowData);
+            } else if (tables[j].parentElement.id === 'dirty') {
+              plugin.userlist.dirty = rowsData.map(this._rowDataToCrc);
+            } else if (tables[j].parentElement.id === 'url') {
+              plugin.userlist.url = rowsData;
             }
-        },
+          }
+        }
 
-        dataChanged: function(oldValue, newValue) {
-            /* Record the current editor data if the editor is open. */
-            if (oldValue && this.data.isEditorOpen) {
-                oldValue.editor = this.readFromEditor(oldValue);
+        return plugin;
+      },
+
+      _onHideEditor(evt) {
+        /* First validate table inputs. */
+        let isValid = true;
+        const inputs = evt.target.parentElement.parentNode.querySelectorAll('paper-input');
+        for (let i = 0; i < inputs.length; ++i) {
+          if (!inputs[i].validate()) {
+            isValid = false;
+          }
+        }
+
+        if (isValid || evt.target.id !== 'accept') {
+          /* Fire the close event, saying whether or not to save data. */
+          evt.target.dispatchEvent(new CustomEvent('loot-editor-close', {
+            detail: evt.target.id === 'accept',
+            bubbles: true,
+          }));
+        }
+      },
+
+      _messageToRowData(message) {
+        return {
+          type: message.type,
+          content: message.content[0].str,
+          condition: message.condition,
+          language: message.content[0].lang,
+        };
+      },
+
+      _dirtyInfoToRowData(dirtyInfo) {
+        return {
+          crc: dirtyInfo.crc.toString(16).toUpperCase(),
+          itm: dirtyInfo.itm,
+          udr: dirtyInfo.udr,
+          nav: dirtyInfo.nav,
+          util: dirtyInfo.util,
+        };
+      },
+
+      setEditorData(newData) {
+        /* newData is a Plugin object reference. */
+
+        /* First update the header icons. */
+        this.$.activeTick.hidden = !newData.isActive;
+        this.$.isMaster.hidden = !newData.isMaster;
+        this.$.isEmpty.hidden = !newData.isEmpty;
+        this.$.loadsArchive.hidden = !newData.loadsArchive;
+
+        /* There may be existing recorded data from a previous instance of the
+           editor, so use that for userlist and priority data if so. */
+        let tempData = {};
+        if (newData.editor) {
+          if (newData.editor.isPriorityGlobal) {
+            tempData.isPriorityGlobal = newData.editor.isPriorityGlobal;
+          }
+          if (newData.editor.priority) {
+            tempData.priority = newData.editor.priority;
+          }
+          tempData.userlist = newData.editor.userlist;
+        } else {
+          tempData = {
+            isPriorityGlobal: newData.isPriorityGlobal,
+            priority: newData.priority,
+            userlist: newData.userlist,
+          };
+        }
+
+        /* Fill in the version and CRC values. */
+        this.shadowRoot.getElementById('version').textContent = newData.getCardContent(loot.filters).version;
+        this.shadowRoot.getElementById('crc').textContent = newData.getCardContent(loot.filters).crc;
+
+        /* Fill in the editor input values. */
+        if (tempData.userlist && !tempData.userlist.enabled) {
+          this.$.enableEdits.checked = false;
+        } else {
+          this.$.enableEdits.checked = true;
+        }
+        this.$.isPriorityGlobal.checked = tempData.isPriorityGlobal;
+        this.$.priorityValue.value = tempData.priority;
+
+        /* Clear then fill in editor table data. Masterlist-originated
+           rows should have their contents made read-only. */
+        const tables = this.shadowRoot.querySelectorAll('table');
+        for (let j = 0; j < tables.length; ++j) {
+          tables[j].clear();
+          if (tables[j].parentElement.id === 'message') {
+            if (newData.masterlist && newData.masterlist.msg) {
+              newData.masterlist.msg.map(this._messageToRowData).forEach(tables[j].addReadOnlyRow, tables[j]);
             }
-
-            if (newValue) {
-                /* Set the new editor data. */
-                this.setEditorData(newValue);
+            if (tempData.userlist && tempData.userlist.msg) {
+              tempData.userlist.msg.map(this._messageToRowData).forEach(tables[j].addRow, tables[j]);
             }
-        },
-
-        onPriorityChange: function(oldValue, newValue) {
-            /* Handle priority change due to masterlist update. */
-            if (this.data) {
-                /* Set the new editor data. */
-                this.setEditorData(this.data);
+          } else if (tables[j].parentElement.id === 'tags') {
+            if (newData.masterlist && newData.masterlist.tag) {
+              newData.masterlist.tag.map(loot.Plugin.tagToRowData).forEach(tables[j].addReadOnlyRow, tables[j]);
             }
-        },
-
-        onDataCacheChange: function(oldValue, newValue) {
-            if (this.data) {
-                /* Set the new editor data. */
-                this.setEditorData(this.data);
+            if (tempData.userlist && tempData.userlist.tag) {
+              tempData.userlist.tag.map(loot.Plugin.tagToRowData).forEach(tables[j].addRow, tables[j]);
             }
-        },
-
-        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.shadowRoot.querySelector('h1').textContent,
-                userlist: {},
-            };
-
-            /* 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.isPriorityGlobal
-                || this.shadowRoot.getElementById('priorityValue').value != oldData.priority) {
-                plugin.isPriorityGlobal = this.shadowRoot.getElementById('globalPriority').checked;
-                plugin.priority = this.shadowRoot.getElementById('priorityValue').value;
-                /* Also mark the priority as being explicitly set in the userlist. */
-                plugin.userlist.hasExplicitPriority = true;
+          } else if (tables[j].parentElement.id === 'dirty') {
+            if (newData.masterlist && newData.masterlist.dirty) {
+              newData.masterlist.dirty.map(this._dirtyInfoToRowData).forEach(tables[j].addReadOnlyRow, tables[j]);
             }
-
-            plugin.userlist.enabled = this.shadowRoot.getElementById('enableEdits').checked;
-
-            var tables = this.shadowRoot.querySelectorAll('table');
-            for (var j = 0; j < tables.length; ++j) {
-                var rowsData = tables[j].getRowsData(true);
-                if (rowsData.length > 0) {
-                    if (tables[j].parentElement.id == 'loadAfter') {
-                        plugin.userlist.after = rowsData;
-                    } else if (tables[j].parentElement.id == 'req') {
-                        plugin.userlist.req = rowsData;
-                    } else if (tables[j].parentElement.id == 'inc') {
-                        plugin.userlist.inc = rowsData;
-                    } else if (tables[j].parentElement.id == 'message') {
-                        rowsData.forEach(function(value, index, arr){
-                            arr[index].content = [{
-                                str: value.content,
-                                lang: value.language
-                            }]
-                            delete arr[index].language;
-                        });
-                        plugin.userlist.msg = rowsData;
-                    } else if (tables[j].parentElement.id == 'tags') {
-                        rowsData.forEach(function(value, index, arr){
-                            arr[index] = loot.Plugin.tagFromRowData(value);
-                        });
-                        plugin.userlist.tag = rowsData;
-                    } else if (tables[j].parentElement.id == 'dirty') {
-                        rowsData.forEach(function(value, index, arr){
-                            arr[index].crc = parseInt(value.crc, 16);
-                        });
-                        plugin.userlist.dirty = rowsData;
-                    } else if (tables[j].parentElement.id == 'locations') {
-                        plugin.userlist.url = rowsData;
-                    }
-                }
+            if (tempData.userlist && tempData.userlist.dirty) {
+              tempData.userlist.dirty.map(this._dirtyInfoToRowData).forEach(tables[j].addReadOnlyRow, tables[j]);
             }
-
-            return plugin;
-        },
-
-        onHideEditor: function(evt) {
-            /* First validate table inputs. */
-            var isValid = true;
-            var inputs = evt.target.parentElement.parentElement.parentNode.querySelectorAll('loot-validated-input');
-            for (var i = 0; i < inputs.length; ++i) {
-                if (!inputs[i].checkValidity()) {
-                    isValid = false;
-                }
+          } else {
+            if (newData.masterlist && newData.masterlist[tables[j].parentElement.id]) {
+              newData.masterlist[tables[j].parentElement.id].forEach(tables[j].addReadOnlyRow, tables[j]);
             }
-
-            if (isValid || evt.target.id != 'accept') {
-                /* Fire the close event, saying whether or not to save data. */
-                evt.target.dispatchEvent(new CustomEvent('loot-editor-close', {
-                    bubbles: true,
-                    detail: (evt.target.id == 'accept'),
-                }));
+            if (tempData.userlist && tempData.userlist[tables[j].parentElement.id]) {
+              tempData.userlist[tables[j].parentElement.id].forEach(tables[j].addRow, tables[j]);
             }
-        },
-
-        setEditorData: function(newData) {
-            /* newData is a Plugin object reference. There may be existing
-               recorded data from a previous instance of the editor, so use
-               that for userlist and priority data if so. */
-            var tempData = {};
-            if (newData.editor) {
-                if (newData.editor.isPriorityGlobal) {
-                    tempData.isPriorityGlobal = newData.editor.isPriorityGlobal;
-                }
-                if (newData.editor.priority) {
-                    tempData.priority = newData.editor.priority;
-                }
-                tempData.userlist = newData.editor.userlist;
-            } else {
-                tempData = {
-                    isPriorityGlobal: newData.isPriorityGlobal,
-                    priority: newData.priority,
-                    userlist: newData.userlist
-                }
-            }
-
-            /* Fill in the version and CRC values. */
-            this.shadowRoot.getElementById('version').textContent = newData.getCardContent(loot.filters).version;
-            this.shadowRoot.getElementById('crc').textContent = newData.getCardContent(loot.filters).crc;
-
-            /* Fill in the editor input values. */
-            if (tempData.userlist && !tempData.userlist.enabled) {
-                this.shadowRoot.getElementById('enableEdits').checked = false;
-            } else {
-                this.shadowRoot.getElementById('enableEdits').checked = true;
-            }
-            this.shadowRoot.getElementById('globalPriority').checked = tempData.isPriorityGlobal;
-            this.shadowRoot.getElementById('priorityValue').value = tempData.priority;
-
-            /* Clear then fill in editor table data. Masterlist-originated
-               rows should have their contents made read-only. */
-            var tables = this.shadowRoot.querySelectorAll('table');
-            for (var j = 0; j < tables.length; ++j) {
-                tables[j].clear();
-                if (tables[j].parentElement.id == 'loadAfter') {
-
-                    if (newData.masterlist && newData.masterlist.after) {
-                        newData.masterlist.after.forEach(function(file) {
-                            var row = tables[j].addRow(file);
-                            tables[j].setReadOnly(row);
-                        });
-                    }
-                    if (tempData.userlist && tempData.userlist.after) {
-                        tempData.userlist.after.forEach(function(file) {
-                            tables[j].addRow(file);
-                        });
-                    }
-
-                } else if (tables[j].parentElement.id == 'req') {
-
-                    if (newData.masterlist && newData.masterlist.req) {
-                        newData.masterlist.req.forEach(function(file) {
-                            var row = tables[j].addRow(file);
-                            tables[j].setReadOnly(row);
-                        });
-                    }
-                    if (tempData.userlist && tempData.userlist.req) {
-                        tempData.userlist.req.forEach(function(file) {
-                            tables[j].addRow(file);
-                        });
-                    }
-
-                } else if (tables[j].parentElement.id == 'inc') {
-
-                    if (newData.masterlist && newData.masterlist.inc) {
-                        newData.masterlist.inc.forEach(function(file) {
-                            var row = tables[j].addRow(file);
-                            tables[j].setReadOnly(row);
-                        });
-                    }
-                    if (tempData.userlist && tempData.userlist.inc) {
-                        tempData.userlist.inc.forEach(function(file) {
-                            tables[j].addRow(file);
-                        });
-                    }
-
-                } else if (tables[j].parentElement.id == 'message') {
-
-                    if (newData.masterlist && newData.masterlist.msg) {
-                        newData.masterlist.msg.forEach(function(message) {
-                            var messageData = {
-                                type: message.type,
-                                content: message.content[0].str,
-                                condition: message.condition,
-                                language: message.content[0].lang
-                            };
-                            var row = tables[j].addRow(messageData);
-                            tables[j].setReadOnly(row);
-
-                        });
-                    }
-                    if (tempData.userlist && tempData.userlist.msg) {
-                        tempData.userlist.msg.forEach(function(message) {
-                            var messageData = {
-                                type: message.type,
-                                content: message.content[0].str,
-                                condition: message.condition,
-                                language: message.content[0].lang
-                            };
-                            tables[j].addRow(messageData);
-                        });
-                    }
-
-                } else if (tables[j].parentElement.id == 'tags') {
-
-                    if (newData.masterlist && newData.masterlist.tag) {
-                        newData.masterlist.tag.forEach(function(tag) {
-                            var tagData = loot.Plugin.tagToRowData(tag);
-                            var row = tables[j].addRow(tagData);
-                            tables[j].setReadOnly(row);
-                        }, newData);
-                    }
-                    if (tempData.userlist && tempData.userlist.tag) {
-                        tempData.userlist.tag.forEach(function(tag) {
-                            var tagData = loot.Plugin.tagToRowData(tag);
-                            tables[j].addRow(tagData);
-                        }, tempData);
-                    }
-
-                } else if (tables[j].parentElement.id == 'dirty') {
-
-                    if (newData.masterlist && newData.masterlist.dirty) {
-                        newData.masterlist.dirty.forEach(function(info) {
-                            info.crc = info.crc.toString(16).toUpperCase();
-                            var row = tables[j].addRow(info);
-                            tables[j].setReadOnly(row);
-                        });
-                    }
-                    if (tempData.userlist && tempData.userlist.dirty) {
-                        tempData.userlist.dirty.forEach(function(info) {
-                            info.crc = info.crc.toString(16).toUpperCase();
-                            tables[j].addRow(info);
-                        });
-                    }
-
-                } else if (tables[j].parentElement.id == 'locations') {
-
-                    if (newData.masterlist && newData.masterlist.url) {
-                        newData.masterlist.url.forEach(function(location) {
-                            var row = tables[j].addRow(location);
-                            tables[j].setReadOnly(row);
-                        });
-                    }
-                    if (tempData.userlist && tempData.userlist.url) {
-                        tempData.userlist.url.forEach(function(location) {
-                            tables[j].addRow(location);
-                        });
-                    }
-                }
-            }
-        },
-
-        updatePolymerElements: function() {
-            /* Set tooltip positions. */
-            var tooltips = this.shadowRoot.querySelectorAll('core-tooltip');
-            for (var i = 0; i < tooltips.length; ++i) {
-                tooltips[i].setPosition();
-            }
-
-            /* Also make sure right arrow is visible if the tabs are scrollable. */
-            this.shadowRoot.getElementById('tableTabs').resizeHandler();
-        },
+          }
+        }
+      },
     });
-    </script>
-</polymer-element>
+  </script>
+</dom-module>
diff --git a/src/tests/gui/html/elements/test_loot-plugin-editor.html b/src/tests/gui/html/elements/test_loot-plugin-editor.html
new file mode 100644
index 00000000..0af28fa6
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-plugin-editor.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-plugin-editor.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-plugin-editor.html">
+
+  <script src="../../../../gui/html/js/plugin.js"></script>
+  <script src="../../../../gui/html/js/translator.js"></script>
+  <script src="../../../../gui/html/js/filters.js"></script>
+</head>
+
+<body>
+  <loot-plugin-editor id="editor">
+    <h1>Skyrim.esm</h1>
+    <span class="version">1.9</span>
+    <span class="crc">ABCDEF01</span>
+  </loot-plugin-editor>
+
+  <script>
+    'use strict';
+    function onEditorToggle() {
+      alert('An editor close button was pressed.');
+    }
+
+    loot.filters = new loot.Filters(new loot.Translator());
+    const plugin = new loot.Plugin({
+      name: 'Skyrim.esm',
+      priority: -999999,
+    });
+
+    document.getElementById('editor').setEditorData(plugin);
+    document.addEventListener('loot-editor-close', onEditorToggle);
+  </script>
+</body>