From 173fddd130be816f4075c367dd0caa19237b3bca Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 30 Jan 2016 22:37:49 +0000
Subject: [PATCH 01/62] Update Vulcanize version in package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0be3bf03..11c0df10 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "grunt-saucelabs": "^8.6.2",
     "mocha": "^2.3.4",
     "should": "^8.0.1",
-    "vulcanize": "^0.7.11"
+    "vulcanize": "^1.14.5"
   },
   "scripts": {
     "test": "grunt test"

From e448a229535cd3d2ef5f00be202c9317544322bb Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Thu, 27 Aug 2015 17:18:31 +0100
Subject: [PATCH 02/62] Update vulcanize script for Vulcanize 1.x

---
 scripts/vulcanize.js | 40 ++++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index 34b0cd40..b7001cf5 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -5,13 +5,21 @@
 const path = require('path');
 const fs = require('fs');
 const helpers = require('./helpers');
-const vulcanize = require('vulcanize');
+const Vulcanize = require('vulcanize');
 
 let rootPath = '.';
 if (process.argv.length > 2) {
   rootPath = process.argv[2];
 }
 
+const vulcanize = new Vulcanize({
+  inlineScripts: true,
+  inlineCss: true,
+  excludes: [
+    'css/theme.css',
+  ],
+});
+
 function mkdir(dir) {
   try {
     fs.mkdirSync(dir);
@@ -22,29 +30,25 @@ function mkdir(dir) {
   }
 }
 
-function runVulcanize(err) {
-  if (err) {
-    console.error(err);
-    process.exit(1);
-  }
-  vulcanize.processDocument();
+function vulcanizeFile(inputPath, outputPath) {
+  // Make sure output directory exists first.
+  mkdir(path.dirname(outputPath));
+
+  vulcanize.process(inputPath, (err, inlinedHtml) => {
+    if (err) {
+      console.error(err);
+      process.exit(1);
+    }
+
+    fs.writeFileSync(outputPath, inlinedHtml);
+  });
 }
 
 function vulcanizeRelease(releasePath) {
   const inputPath = path.join(rootPath, 'src', 'gui', 'html', 'index.html');
   const outputPath = path.join(releasePath.path, 'resources', 'ui', 'index.html');
 
-  // Make sure output directory exists first.
-  mkdir(path.dirname(outputPath));
-
-  vulcanize.setOptions({
-    inline: true,
-    excludes: {
-      styles: ['css/theme.css'],
-    },
-    output: outputPath,
-    input: inputPath,
-  }, runVulcanize);
+  vulcanizeFile(inputPath, outputPath);
 }
 
 helpers.getAppReleasePaths(rootPath).forEach(vulcanizeRelease);

From 040b66278baf9744fabf62de31a1fc5b78106702 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 30 Jan 2016 22:38:08 +0000
Subject: [PATCH 03/62] Update bower.json for Polymer 1.x

---
 bower.json | 62 +++++++++++++++++++-----------------------------------
 1 file changed, 22 insertions(+), 40 deletions(-)

diff --git a/bower.json b/bower.json
index 060c2965..418c459e 100644
--- a/bower.json
+++ b/bower.json
@@ -7,46 +7,28 @@
     "bower_components"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#~0.5.0",
-    "paper-icon-button": "Polymer/paper-icon-button#~0.5.0",
-    "paper-dropdown-menu": "Polymer/paper-dropdown-menu#~0.5.0",
-    "core-toolbar": "Polymer/core-toolbar#~0.5.0",
-    "core-icons": "Polymer/core-icons#~0.5.0",
-    "core-label": "Polymer/core-label#~0.5.0",
-    "core-tooltip": "Polymer/core-tooltip#~0.5.0",
-    "core-drawer-panel": "Polymer/core-drawer-panel#~0.5.0",
-    "paper-input": "Polymer/paper-input#~0.5.0",
-    "paper-tabs": "Polymer/paper-tabs#~0.5.0",
-    "core-menu": "Polymer/core-menu#~0.5.0",
-    "paper-checkbox": "Polymer/paper-checkbox#~0.5.0",
-    "paper-dialog": "Polymer/paper-dialog#~0.5.0",
-    "paper-menu-button": "Polymer/paper-menu-button#~0.5.0",
+    "polymer": "Polymer/polymer#^1.1.0",
+    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "iron-list": "PolymerElements/iron-list#^1.0.0",
+    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
+    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
+    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^1.0.0",
+    "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
+    "paper-progress": "PolymerElements/paper-progress#^1.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^1.0.0",
+    "paper-toast": "PolymerElements/paper-toast#^1.0.0",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
+    "paper-tooltip": "PolymerElements/paper-tooltip#^1.0.0",
     "Jed": "SlexAxton/Jed#a9d03e1bbca9211a8b29a93a298a7ee9ddb353f0",
-    "marked": "~0.3.2",
-    "paper-progress": "Polymer/paper-progress#~0.5.0",
-    "core-pages": "Polymer/core-pages#~0.5.1",
-    "paper-toast": "Polymer/paper-toast#~0.5.1",
-    "core-list": "WrinklyNinja/core-list#patched-for-loot",
-    "core-dropdown": "WrinklyNinja/core-dropdown#null-dimensions-positions-fix",
-    "jed-gettext-parser": "~1.0.0",
-    "paper-toggle-button": "Polymer/paper-toggle-button#~0.5.4",
-    "core-overlay": "WrinklyNinja/core-overlay#fix-focus-self-as-next"
-  },
-  "resolutions": {
-    "polymer": "^0.5",
-    "core-icons": "^0.5",
-    "core-icon": "^0.5",
-    "core-collapse": "^0.5",
-    "core-focusable": "^0.5",
-    "core-icon-button": "^0.5",
-    "core-resizable": "^0.5",
-    "core-iconset-svg": "^0.5",
-    "core-dropdown": "null-dimensions-positions-fix",
-    "core-transition": "^0.5",
-    "core-overlay": "fix-focus-self-as-next",
-    "webcomponentsjs": "^0.7.18",
-    "core-iconset": "^0.5",
-    "core-selection": "^0.5",
-    "core-meta": "^0.5"
+    "jed-gettext-parser": "^1.0.0",
+    "marked": "^0.3.2"
   }
 }

From f1437fb728007d32a8f59af66e3acc1735f8d031 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 31 Jan 2016 11:20:07 +0000
Subject: [PATCH 04/62] Enable linting of JS in <script> tags

---
 .eslintrc.yml | 3 +++
 package.json  | 1 +
 2 files changed, 4 insertions(+)

diff --git a/.eslintrc.yml b/.eslintrc.yml
index 36db78a8..b0fb30ac 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -26,3 +26,6 @@ rules:
     - props: false
   arrow-body-style: 1
   max-len: 1
+
+plugins:
+  - eslint-plugin-html
diff --git a/package.json b/package.json
index 11c0df10..4a517102 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "bower": "^1.7.1",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "^4.0.0",
+    "eslint-plugin-html": "^1.3.0",
     "fs-extra": "^0.26.2",
     "grunt": "^0.4.5",
     "grunt-cli": "^0.1.13",

From ccb5961dfba9b293ac65afd7784067c3591cfa91 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 31 Jan 2016 09:27:29 +0000
Subject: [PATCH 05/62] Update loot-custom-icons

I've added a file that allows manual testing of only the custom
icons. I'll do the same for LOOT's other custom elements.

Automated testing of them is beyond me for the moment, but at least
the test file means I don't need to wait until everything has been
converted before seeing whether any of it works.
---
 src/gui/html/elements/loot-custom-icons.html  | 29 ++++++++++---------
 src/gui/html/native-shadow-dom.html           |  5 ++++
 .../html/elements/test_loot-custom-icons.html | 16 ++++++++++
 3 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 src/gui/html/native-shadow-dom.html
 create mode 100644 src/tests/gui/html/elements/test_loot-custom-icons.html

diff --git a/src/gui/html/elements/loot-custom-icons.html b/src/gui/html/elements/loot-custom-icons.html
index 88569071..c3eabb4b 100644
--- a/src/gui/html/elements/loot-custom-icons.html
+++ b/src/gui/html/elements/loot-custom-icons.html
@@ -1,15 +1,16 @@
-<link rel="import" href="../../../../bower_components/core-iconset-svg/core-iconset-svg.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 
-<core-iconset-svg id="loot-custom-icons">
-    <svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit style="pointer-events: none; display: block;">
-        <defs>
-            <g id="m-circle">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="m 8,17 0,-9 0.4,0 3.2,5 0.8,0 3.2,-5 0.4,0 0,9" style="stroke: white; stroke-width: 2; fill: none;" />
-            </g>
-            <g id="crown">
-                <path d="m 5,16 -1,-9 5,3 3,-7 3,7 5,-3 -1,9 z m 0,1 0,2 14,0 0,-2 z" />
-            </g>
-        </defs>
-    </svg>
-</core-iconset-svg>
+<iron-iconset-svg name="loot-custom-icons">
+  <svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit style="pointer-events: none; display: block;">
+    <defs>
+      <g id="m-circle">
+        <circle cx="12" cy="12" r="10"/>
+        <path d="m 8,17 0,-9 0.4,0 3.2,5 0.8,0 3.2,-5 0.4,0 0,9" style="stroke: white; stroke-width: 2; fill: none;" />
+      </g>
+      <g id="crown">
+        <path d="m 5,16 -1,-9 5,3 3,-7 3,7 5,-3 -1,9 z m 0,1 0,2 14,0 0,-2 z" />
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
diff --git a/src/gui/html/native-shadow-dom.html b/src/gui/html/native-shadow-dom.html
new file mode 100644
index 00000000..8eca2b43
--- /dev/null
+++ b/src/gui/html/native-shadow-dom.html
@@ -0,0 +1,5 @@
+<script>
+  'use strict';
+  window.Polymer = window.Polymer || {};
+  window.Polymer.dom = 'shadow';
+</script>
diff --git a/src/tests/gui/html/elements/test_loot-custom-icons.html b/src/tests/gui/html/elements/test_loot-custom-icons.html
new file mode 100644
index 00000000..aaa29bda
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-custom-icons.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-custom-icons.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/iron-icon/iron-icon.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-custom-icons.html">
+</head>
+
+<body>
+  <iron-icon icon="loot-custom-icons:crown"></iron-icon>
+  <iron-icon icon="loot-custom-icons:m-circle"></iron-icon>
+</body>

From 544e316be747457a0b966077c7c5bfdb8486aa93 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 31 Jan 2016 09:29:32 +0000
Subject: [PATCH 06/62] Update Vulcanize script for element tests

The Vulcanize script can now build the UI, the element test files, or
both, defaulting to the latter.

The `mkdirp` package is used as it's the simplest way of getting
recursive `mkdir`, ie. `mkdir -p`, to work.
---
 package.json         |  1 +
 scripts/vulcanize.js | 34 +++++++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 4a517102..8be6274c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "grunt-contrib-connect": "^0.11.2",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-saucelabs": "^8.6.2",
+    "mkdirp": "^0.5.1",
     "mocha": "^2.3.4",
     "should": "^8.0.1",
     "vulcanize": "^1.14.5"
diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index b7001cf5..4562bc25 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -6,9 +6,15 @@ const path = require('path');
 const fs = require('fs');
 const helpers = require('./helpers');
 const Vulcanize = require('vulcanize');
+const mkdirp = require('mkdirp');
 
+// Initialise from command line parameters.
 let rootPath = '.';
-if (process.argv.length > 2) {
+let buildType = 'ui';
+if (process.argv.length > 3) {
+  rootPath = process.argv[2];
+  buildType = process.argv[3];
+} else if (process.argv.length > 2) {
   rootPath = process.argv[2];
 }
 
@@ -22,7 +28,7 @@ const vulcanize = new Vulcanize({
 
 function mkdir(dir) {
   try {
-    fs.mkdirSync(dir);
+    mkdirp.sync(dir);
   } catch (e) {
     if (e.code !== 'EEXIST') {
       console.log(e);
@@ -51,4 +57,26 @@ function vulcanizeRelease(releasePath) {
   vulcanizeFile(inputPath, outputPath);
 }
 
-helpers.getAppReleasePaths(rootPath).forEach(vulcanizeRelease);
+function vulcanizeTests(releasePath) {
+  const inputPath = path.join(rootPath, 'src', 'tests', 'gui', 'html', 'elements');
+  const outputPath = path.join(releasePath.path, 'html_tests', 'elements');
+
+  const tests = [
+    'test_loot-custom-icons.html',
+  ];
+
+  tests.forEach((test) => {
+    vulcanizeFile(path.join(inputPath, test), path.join(outputPath, test));
+  });
+}
+
+// Run the appropriate build(s).
+const releasePaths = helpers.getAppReleasePaths(rootPath);
+
+if (buildType === 'ui' || buildType === 'all') {
+  releasePaths.forEach(vulcanizeRelease);
+}
+
+if (buildType === 'tests' || buildType === 'all') {
+  releasePaths.forEach(vulcanizeTests);
+}

From e17113abeeebd0be42be064e410b72a600461864 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Fri, 28 Aug 2015 11:22:37 +0100
Subject: [PATCH 07/62] Update loot-dropdown-menu

---
 bower.json                                    |   1 +
 scripts/vulcanize.js                          |   1 +
 src/gui/html/elements/loot-dropdown-menu.html | 100 +++++++++---------
 .../elements/test_loot-dropdown-menu.html     |  42 ++++++++
 4 files changed, 94 insertions(+), 50 deletions(-)
 create mode 100644 src/tests/gui/html/elements/test_loot-dropdown-menu.html

diff --git a/bower.json b/bower.json
index 418c459e..8ab6a081 100644
--- a/bower.json
+++ b/bower.json
@@ -19,6 +19,7 @@
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "paper-input": "PolymerElements/paper-input#^1.0.0",
     "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
     "paper-menu": "PolymerElements/paper-menu#^1.0.0",
     "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
     "paper-progress": "PolymerElements/paper-progress#^1.0.0",
diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index 4562bc25..c9088725 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -63,6 +63,7 @@ function vulcanizeTests(releasePath) {
 
   const tests = [
     'test_loot-custom-icons.html',
+    'test_loot-dropdown-menu.html',
   ];
 
   tests.forEach((test) => {
diff --git a/src/gui/html/elements/loot-dropdown-menu.html b/src/gui/html/elements/loot-dropdown-menu.html
index 4eaa925e..e59ac5e5 100644
--- a/src/gui/html/elements/loot-dropdown-menu.html
+++ b/src/gui/html/elements/loot-dropdown-menu.html
@@ -8,58 +8,58 @@ it a <select>-like API. This means:
 -->
 
 <link rel="import" href="../../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../../bower_components/paper-dropdown/paper-dropdown.html">
+
 <link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../../../bower_components/core-menu/core-menu.html">
+<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
 
-<polymer-element name="loot-dropdown-menu" attributes="disabled halign value">
-    <template>
-        <style>
-        /* Material Design overrides */
-        paper-dropdown-menu {
-            margin-left: 4px;
-            margin-right: 4px;
-            border-bottom-color: rgba(0, 0, 0, 0.12);
-        }
-        paper-dropdown-menu::shadow #label {
-            color: rgba(0, 0, 0, 0.87);
-        }
-        paper-dropdown-menu[disabled]::shadow #label,
-        paper-dropdown-menu::shadow #arrow {
-            color: rgba(0, 0, 0, 0.26);
-        }
+<dom-module id="loot-dropdown-menu">
+  <template>
+    <style>
+      paper-dropdown-menu {
+        margin-left: 4px;
+        margin-right: 4px;
 
-        /* LOOT-specific overrides */
-        ::content .core-selected {
-            color: #2196F3;
-            background-color: inherit;
-        }
-        :host(.dark) paper-dropdown-menu {
-            border-bottom-color: rgba(255, 255, 255, 0.12);
-        }
-        paper-dropdown-menu[disabled]::shadow #label {
-            transition: color 0.6s;
-        }
-        :host(.dark) paper-dropdown-menu::shadow #label {
-            color: white;
-        }
-        :host(.dark) paper-dropdown-menu[disabled]::shadow #label,
-        :host(.dark) paper-dropdown-menu::shadow #arrow {
-            color: rgba(255, 255, 255, 0.30);
-        }
-        </style>
-        <paper-dropdown-menu disabled?="{{disabled}}">
-            <paper-dropdown class="dropdown" halign="{{halign}}">
-                <core-menu id="menu" class="menu" valueattr="value" selected="{{value}}">
-                    <content></content>
-                </core-menu>
-            </paper-dropdown>
-        </paper-dropdown-menu>
-    </template>
-    <script>
+        --paper-input-container: {
+          transition: opacity 0.6s;
+        };
+        --paper-dropdown-menu-icon: {
+          color: var(--loot-secondary-text-color);
+        };
+      }
+      :host(.dark) paper-dropdown-menu {
+        --paper-input-container-underline: {
+          background-color: var(--loot-dark-theme-divider-color);
+        };
+        --paper-input-container-input-color: white;
+        --paper-dropdown-menu-input: {
+          color: var(--loot-dark-theme-primary-text-color);
+        };
+        --paper-dropdown-menu-icon: {
+          color: var(--loot-dark-theme-secondary-text-color);
+        };
+      }
+    </style>
+    <paper-dropdown-menu disabled$="[[disabled]]" no-label-float>
+      <paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{value}}">
+        <content></content>
+      </paper-listbox>
+    </paper-dropdown-menu>
+  </template>
+  <script>
     Polymer({
-        value: undefined,
-        disabled: false
+      is: 'loot-dropdown-menu',
+      properties: {
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        value: {
+          type: String,
+          notify: true,
+          reflectToAttribute: true,
+        },
+      },
     });
-    </script>
-</polymer-element>
+  </script>
+</dom-module>
diff --git a/src/tests/gui/html/elements/test_loot-dropdown-menu.html b/src/tests/gui/html/elements/test_loot-dropdown-menu.html
new file mode 100644
index 00000000..d004fe1d
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-dropdown-menu.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-dropdown-menu.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/paper-item/paper-item.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-dropdown-menu.html">
+</head>
+
+<body>
+  <div>
+    <span>A dropdown:</span>
+    <loot-dropdown-menu value="say">
+      <paper-item value="say">Note</paper-item>
+      <paper-item value="warn">Warning</paper-item>
+      <paper-item value="error">Error</paper-item>
+    </loot-dropdown-menu>
+
+    <loot-dropdown-menu disabled value="3">
+      <paper-item value="1">1</paper-item>
+      <paper-item value="2">2</paper-item>
+      <paper-item value="3">3</paper-item>
+    </loot-dropdown-menu>
+  </div>
+
+  <div style="background: #424242">
+    <loot-dropdown-menu class="dark" value="2">
+      <paper-item value="1">1</paper-item>
+      <paper-item value="2">2</paper-item>
+      <paper-item value="3">3</paper-item>
+    </loot-dropdown-menu>
+
+    <loot-dropdown-menu class="dark" disabled value="1">
+      <paper-item value="1">1</paper-item>
+      <paper-item value="2">2</paper-item>
+      <paper-item value="3">3</paper-item>
+    </loot-dropdown-menu>
+  </div>
+</body>

From c52c9d2f9790e4290742f78a25a21aee06914a8f Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 31 Jan 2016 11:23:47 +0000
Subject: [PATCH 08/62] Update loot-message-dialog

It now uses paper-dialog directly, as wrapping loot-dialog is
unnecessarily complicated.
---
 scripts/vulcanize.js                          |   1 +
 .../html/elements/loot-message-dialog.html    | 115 ++++++++++--------
 .../elements/test_loot-message-dialog.html    |  34 ++++++
 3 files changed, 100 insertions(+), 50 deletions(-)
 create mode 100644 src/tests/gui/html/elements/test_loot-message-dialog.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index c9088725..fba7e3d2 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -64,6 +64,7 @@ function vulcanizeTests(releasePath) {
   const tests = [
     'test_loot-custom-icons.html',
     'test_loot-dropdown-menu.html',
+    'test_loot-message-dialog.html',
   ];
 
   tests.forEach((test) => {
diff --git a/src/gui/html/elements/loot-message-dialog.html b/src/gui/html/elements/loot-message-dialog.html
index 6cb13536..fb905684 100644
--- a/src/gui/html/elements/loot-message-dialog.html
+++ b/src/gui/html/elements/loot-message-dialog.html
@@ -1,6 +1,6 @@
 <!--
-<loot-message-dialog> is an extension of <loot-dialog> that provides a
-simpler interface for supplying a dialog consisting of a:
+<loot-message-dialog> provides a simple interface for supplying a dialog
+consisting of a:
 
 * title
 * message
@@ -13,67 +13,82 @@ was pressed.
 -->
 
 <link rel="import" href="../../../../bower_components/polymer/polymer.html">
+
 <link rel="import" href="../../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="loot-dialog.html">
+<link rel="import" href="../../../../bower_components/paper-dialog/paper-dialog.html">
 
-<polymer-element name="loot-message-dialog">
-    <template>
+<link rel="import" href="../../../../bower_components/neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="../../../../bower_components/neon-animation/animations/fade-out-animation.html">
+
+<dom-module id="loot-message-dialog">
+  <template>
     <style>
-    #dialog {
+      paper-dialog {
+        margin: 24px 40px;
         max-width: 50%;
-    }
+      }
     </style>
-    <loot-dialog id="dialog">
+    <paper-dialog id="dialog"
+                  entry-animation="fade-in-animation"
+                  exit-animation="fade-out-animation"
+                  modal>
       <content></content>
-      <paper-button id="confirm" affirmative autofocus>OK</paper-button>
-      <paper-button id="dismiss" dismissive>Cancel</paper-button>
-    </loot-dialog>
-    </template>
-    <script>
-    Polymer({
-        closeCallback: undefined,
+      <div class="buttons">
+        <paper-button id="dismiss" dialog-dismiss>Cancel</paper-button>
+        <paper-button id="confirm" dialog-confirm autofocus>OK</paper-button>
+      </div>
+    </paper-dialog>
+  </template>
+  <script>
+    'use strict';
+    Polymer({ // eslint-disable-line new-cap, no-undef
+      is: 'loot-message-dialog',
+      closeCallback: undefined,
 
-        setConfirmText: function(confirmText) {
-          this.shadowRoot.getElementById('confirm').textContent = confirmText;
-        },
+      setConfirmText(confirmText) {
+        this.shadowRoot.getElementById('confirm').textContent = confirmText;
+      },
 
-        setDismissable: function(isDialogDismissable) {
-            this.shadowRoot.getElementById('dismiss').hidden = !isDialogDismissable;
-        },
+      setDismissable(isDialogDismissable) {
+        this.shadowRoot.getElementById('dismiss').hidden = !isDialogDismissable;
+      },
 
-        onButtonClick: function(evt) {
-            if (evt.target.parentElement.parentNode.host.closeCallback) {
-                evt.target.parentElement.parentNode.host.closeCallback(evt.target.id === 'confirm');
-            }
-            evt.target.parentElement.parentNode.host.addEventListener('core-overlay-close-completed', function(evt){
-                evt.target.parentElement.removeChild(evt.target);
-            }, false);
-        },
+      onClose(evt) {
+        if (evt.target.parentNode.host.closeCallback) {
+          evt.target.parentNode.host.closeCallback(evt.target.closingReason.confirmed);
+        }
+        evt.target.parentNode.host.parentElement.removeChild(evt.target.parentNode.host);
+      },
 
-        showModal: function(title, text, closeCallback) {
-            this.heading = title;
-            this.getElementsByClassName('message')[0].textContent = text;
+      showModal(title, text, closeCallback) {
+        this.getElementsByClassName('heading')[0].textContent = title;
+        this.getElementsByClassName('message')[0].textContent = text;
 
-            this.closeCallback = closeCallback;
-            this.shadowRoot.getElementById('dialog').showModal();
-        },
+        this.closeCallback = closeCallback;
+        this.$.dialog.open();
+      },
 
-        created: function() {
-            var p = document.createElement('p');
-            p.className = 'message';
-            this.appendChild(p);
-        },
+      close() {
+        this.$.dialog.close();
+      },
 
-        attached: function() {
-            this.shadowRoot.getElementById('confirm').addEventListener('click', this.onButtonClick, false);
-            this.shadowRoot.getElementById('dismiss').addEventListener('click', this.onButtonClick, false);
-        },
+      created() {
+        const h2 = document.createElement('h2');
+        h2.className = 'heading';
+        this.appendChild(h2);
 
-        detached: function() {
-            this.shadowRoot.getElementById('confirm').removeEventListener('click', this.onButtonClick, false);
-            this.shadowRoot.getElementById('dismiss').removeEventListener('click', this.onButtonClick, false);
-        },
+        const p = document.createElement('p');
+        p.className = 'message';
+        this.appendChild(p);
+      },
 
+      attached() {
+        this.$.dialog.addEventListener('iron-overlay-closed', this.onClose);
+      },
+
+      detached() {
+        this.$.dialog.removeEventListener('iron-overlay-closed', this.onClose);
+      },
     });
-    </script>
-</polymer-element>
+  </script>
+</dom-module>
diff --git a/src/tests/gui/html/elements/test_loot-message-dialog.html b/src/tests/gui/html/elements/test_loot-message-dialog.html
new file mode 100644
index 00000000..9923be27
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-message-dialog.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-message-dialog.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-message-dialog.html">
+</head>
+
+<body>
+  <paper-button id="showMessageBox">Show Message Box</paper-button>
+  <paper-button id="showMessageDialog">Show Message Dialog</paper-button>
+
+  <script>
+    'use strict';
+    document.getElementById('showMessageBox').addEventListener('click', () => {
+      const dialog = document.createElement('loot-message-dialog');
+      dialog.setDismissable(false);
+      dialog.showModal('Message Box', 'This is a message box.');
+      document.body.appendChild(dialog);
+    });
+
+    document.getElementById('showMessageDialog').addEventListener('click', () => {
+      const dialog = document.createElement('loot-message-dialog');
+      dialog.showModal('Message Dialog', 'This is a message dialog.', (result) => {
+        alert(result);
+      });
+      document.body.appendChild(dialog);
+    });
+  </script>
+</body>

From da36b7cd7091a9766639412dff0d092b3c6fb713 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 29 Aug 2015 11:09:58 +0100
Subject: [PATCH 09/62] Update loot-plugin-item

---
 scripts/vulcanize.js                          |   1 +
 src/gui/html/elements/loot-plugin-item.html   | 329 ++++++++----------
 .../html/elements/test_loot-plugin-item.html  |  18 +
 3 files changed, 165 insertions(+), 183 deletions(-)
 create mode 100644 src/tests/gui/html/elements/test_loot-plugin-item.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index fba7e3d2..ba7cfe5b 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -65,6 +65,7 @@ function vulcanizeTests(releasePath) {
     'test_loot-custom-icons.html',
     'test_loot-dropdown-menu.html',
     'test_loot-message-dialog.html',
+    'test_loot-plugin-item.html',
   ];
 
   tests.forEach((test) => {
diff --git a/src/gui/html/elements/loot-plugin-item.html b/src/gui/html/elements/loot-plugin-item.html
index cddea96b..9fef4523 100644
--- a/src/gui/html/elements/loot-plugin-item.html
+++ b/src/gui/html/elements/loot-plugin-item.html
@@ -1,197 +1,160 @@
 <link rel="import" href="../../../../bower_components/polymer/polymer.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/paper-item/paper-item.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/paper-item/paper-item-body.html">
+<link rel="import" href="../../../../bower_components/paper-ripple/paper-ripple.html">
+<link rel="import" href="../../../../bower_components/paper-tooltip/paper-tooltip.html">
 
-<polymer-element name="loot-plugin-item" attributes="priorityText data">
-    <template>
-        <style>
-        :host(:not([data-edits]):not([data-editor-open])) #iconTooltip {
-            pointer-events: none;
-        }
-        :host(:not([data-edits])) #hasUserEditsTooltip,
-        :host([data-editor-open]) #hasUserEditsTooltip,
-        :host(:not([data-editor-open])) #editorIsOpenTooltip {
-            display: none;
-        }
-        :host(:not([data-edits])) #hasUserEdits {
-            visibility: hidden;
-        }
-        #hasUserEdits,
-        #editorIsOpen {
-            display: block;
-            margin-right: 0;
-            backface-visibility: hidden;
-        }
-        paper-item > core-tooltip {
-            margin-left: 16px;
-        }
+<dom-module id="loot-plugin-item">
+  <template>
+    <style>
+      /* Flip effect for user metadata / editor open icons. */
+      #flipper {
+        transform-style: preserve-3d;
+        transition: 0.6s;
+        overflow: visible;
+      }
+      #flipper.flipped {
+        transform: rotateY(180deg);
+      }
+      #hasUserEdits,
+      #editorIsOpen {
+        display: block;
+        margin-right: 0;
+        backface-visibility: hidden;
+      }
+      #hasUserEdits {
+        transform: translateZ(1px);
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      #editorIsOpen {
+        transform: rotateY(180deg) translateZ(-1px);
+      }
 
-        /* Flip effect for user metadata / editor open icons. */
-        #flipper {
-            transform-style: preserve-3d;
-            transition: 0.6s;
-            overflow: visible;
-        }
-        :host([data-editor-open]) #flipper {
-            transform: rotateY(180deg);
-        }
-        #hasUserEdits {
-            transform: translateZ(1px);
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-        #editorIsOpen {
-            transform: rotateY(180deg) translateZ(-1px);
-        }
+      /* paper-item (two-line) */
+      paper-item {
+        position: relative;
+        min-height: 32px;
+        line-height: 32px;
+        font-size: 1rem;
 
-        /* paper-item (two-line) */
-        paper-item.two-line {
-            /* Two-line items should be 72px high according to Material Design.
-               Squeeze the height to fit more items in. */
-            /*height: 72px;*/
-            height: 32px;
-            line-height: 32px;
-            font-size: 1rem;
+        --paper-item-focused-before: {
+          opacity: 0;
         }
-        /* Don't have a margin for this paper-item. */
-        paper-item.two-line:last-child {
-            margin-bottom: 0;
-        }
-        :host-context(body[data-editors]) paper-item.two-line {
-            height: 40px;
-        }
-        #primary,
-        #secondary,
-        #secondary core-icon,
-        paper-item.two-line::shadow .button-content {
-            transition: 0.6s;
-        }
-        paper-item.two-line::shadow .button-content {
-            padding: 0px 16px;
-        }
-        :host-context(body[data-editors]) paper-item.two-line::shadow .button-content {
-            padding: 4.5px 16px;
-        }
-        #text {
-            /* Padding is disabled as otherwise text won't fit in correctly. */
-            /*padding: 4px 0;*/
-            overflow: visible;
-        }
-        :host-context(body[data-editors]) #text {
-            line-height: normal;
-        }
-        #secondary {
-            /* MD spec says 14sp, but that doesn't fit, so use 12sp. */
-            /*font-size: 1rem; */
-            font-size: 0.857rem;
-            color: rgba(0, 0, 0, 0.54);
-            height: 13px;
-            overflow: visible;
-        }
-        #secondary core-icon {
-            margin-right: 0;
-            height: 13px;
-        }
-        #hasUserEditsTooltip,
-        #editorIsOpenTooltip {
-            overflow: visible;
-        }
-
-        /* When not in edit mode, hide secondary text. */
-        #secondary.hidden,
-        :host-context(body:not([data-editors])) #secondary {
-            height: 0;
-            overflow: hidden;
-        }
-
-        core-tooltip.hidden {
-            opacity: 0;
-            pointer-events: none;
-            overflow: hidden;
-        }
-        </style>
-
-        <paper-item class="two-line">
-            <div id="text" flex>
-                <div id="primary"><content></content></div>
-                <div id="secondary" layout horizontal center>
-                    <core-tooltip label="Global Priority" noarrow position="right">
-                        <core-icon icon="star"></core-icon>
-                    </core-tooltip>
-                    <div id="priority"></div>
-                </div>
-            </div>
-            <core-tooltip id="iconTooltip" noarrow position="left">
-                <div tip id="hasUserEditsTooltip">Has User Metadata</div>
-                <div tip id="editorIsOpenTooltip">Editor Is Open</div>
-                <div id="flipper">
-                    <core-icon id="hasUserEdits" icon="account-circle"></core-icon>
-                    <core-icon id="editorIsOpen" icon="create"></core-icon>
-                </div>
-            </core-tooltip>
-        </paper-item>
-    </template>
-    <script>
-    Polymer({
-        data: undefined,
-
-        observe: {
-            'data.userlist': 'onUserlistChange',
-            'data.priority': 'onPriorityChange',
-            'data.isPriorityGlobal': 'onPriorityIsGlobalChange',
-            'data.isEditorOpen': 'onEditorStateChange',
+      }
+      paper-item-body[two-line] {
+        min-height: 32px;
+        height: 32px;
+      }
+      :host-context(body[data-editors]) paper-item-body[two-line] {
+        min-height: 40px;
+      }
+      #primary,
+      #secondary,
+      #secondary iron-icon {
+        transition: 0.6s;
+      }
+      :host-context(body[data-editors]) #primary {
+          line-height: normal;
+      }
+      #priority {
+          font-size: 0.857rem;
+          color: var(--loot-secondary-text-color);
+          height: 13px;
+          overflow: visible;
+      }
+      #globalPriorityIcon {
+          height: 13px;
+      }
+      iron-icon {
+          color: var(--loot-secondary-text-color);
+      }
+      /* When not in edit mode, hide secondary text. */
+      :host-context(body:not([data-editors])) #secondary {
+          height: 0;
+          overflow: hidden;
+      }
+      [hidden],
+      #hasUserEdits[hidden] {
+        display: none;
+      }
+      #globalPriorityIcon[hidden] {
+        visibility: hidden;
+        display: inline-flex;
+      }
+      :host {
+        cursor: pointer;
+      }
+      paper-ripple {
+        color: var(--loot-accent-color);
+      }
+    </style>
+    <paper-item>
+      <paper-ripple></paper-ripple>
+      <paper-item-body two-line>
+        <div id="primary"><content></content></div>
+        <div id="secondary" secondary>
+          <iron-icon id="globalPriorityIcon" icon="star" hidden$="[[!isPriorityGlobal]]"></iron-icon>
+          <paper-tooltip for="globalPriorityIcon" position="right">Global Priority</paper-tooltip>
+          <span id="priority" hidden$="[[!priority]]">[[priority]]</span>
+        </div>
+      </paper-item-body>
+      <paper-tooltip for="editorIsOpen" position="left">Editor Is Open</paper-tooltip>
+      <paper-tooltip for="hasUserEdits" position="left">Has User Metadata</paper-tooltip>
+      <div id="flipper" class$="[[computeFlipperClass(isEditorOpen)]]">
+        <iron-icon id="editorIsOpen" icon="create"></iron-icon>
+        <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
+      </div>
+    </paper-item>
+  </template>
+  <script>
+    'use strict';
+    Polymer({ // eslint-disable-line new-cap, no-undef
+      is: 'loot-plugin-item',
+      properties: {
+        priority: {
+          type: String,
+          value: '',
+          reflectToAttribute: true,
         },
-
-        dataChanged: function(oldValue, newValue) {
-            this.onUserlistChange();
-            this.onPriorityChange();
-            this.onPriorityIsGlobalChange();
-            this.onEditorStateChange();
+        isPriorityGlobal: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
         },
-
-        onUserlistChange: function(oldValue, newValue) {
-            /* The enabled key will always be set on application of edits, even
-               if there were none to apply, so long for more than just that key. */
-            if (this.data && this.data.userlist && Object.keys(this.data.userlist).length > 1) {
-                this.setAttribute('data-edits', 'true');
-            } else {
-                this.removeAttribute('data-edits');
-            }
+        isEditorOpen: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
         },
-
-        onPriorityChange: function(oldValue, newValue) {
-            if (this.data && this.data.priority) {
-                this.shadowRoot.getElementById('priority').textContent = this.data.priority;
-            } else {
-                this.shadowRoot.getElementById('priority').textContent = '';
-            }
-            this.shadowRoot.getElementById('secondary').hidden = !(this.data && this.data.priority);
+        hasUserEdits: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
         },
+      },
 
-        onPriorityIsGlobalChange: function(oldValue, newValue) {
-            this.shadowRoot.getElementById('secondary').hidden = !(this.data && this.data.isPriorityGlobal);
-        },
+      computeFlipperClass(isEditorOpen) {
+        if (isEditorOpen) {
+          return 'flipped';
+        }
+        return '';
+      },
 
-        onEditorStateChange: function(oldValue, newValue) {
-            if (this.data && this.data.isEditorOpen) {
-                this.setAttribute('data-editor-open', true);
-            } else {
-                this.removeAttribute('data-editor-open');
-            }
-        },
+      getName() {
+        return this.textContent.trim();
+      },
 
-        getName: function() {
-            return this.textContent.trim();
-        },
-
-        onDragStart: function(evt) {
-            evt.dataTransfer.effectAllowed = 'copy';
-            evt.dataTransfer.setData('text/plain', evt.currentTarget.getName());
-            evt.dataTransfer.setDragImage(evt.currentTarget, 325, 175);
-        },
+      onDragStart(evt) {
+        evt.dataTransfer.effectAllowed = 'copy';
+        evt.dataTransfer.setData('text/plain', evt.currentTarget.getName());
+        evt.dataTransfer.setDragImage(evt.currentTarget, 325, 175);
+      },
     });
-    </script>
-</polymer-element>
+  </script>
+</dom-module>
diff --git a/src/tests/gui/html/elements/test_loot-plugin-item.html b/src/tests/gui/html/elements/test_loot-plugin-item.html
new file mode 100644
index 00000000..62cef1b6
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-plugin-item.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-plugin-item.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/iron-icon/iron-icon.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-plugin-item.html">
+</head>
+
+<body data-editors="1">
+  <loot-plugin-item priority="10"
+                    is-global-priority
+                    is-editor-open
+                    has-user-edits>Skyrim.esm</loot-plugin-item>
+</body>

From d20f449f9dd64c768d917e92c13e6e55acc47b73 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 31 Jan 2016 13:38:34 +0000
Subject: [PATCH 10/62] Delete loot-dialog element

It's more effort to maintain than just using the paper-dialog element
directly.
---
 src/gui/html/elements/loot-dialog.html | 56 --------------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 src/gui/html/elements/loot-dialog.html

diff --git a/src/gui/html/elements/loot-dialog.html b/src/gui/html/elements/loot-dialog.html
deleted file mode 100644
index b0675b55..00000000
--- a/src/gui/html/elements/loot-dialog.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!--
-<loot-dialog> is an extension of <paper-dialog> that gives it a <dialog>-like API.
-
-Still missing compared to <dialog> are:
-
-1. No `close` or `cancel` events.
-2. No ::backdrop pseudo-element.
-3. No `form[method="dialog"]`.
--->
-
-<link rel="import" href="../../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../../bower_components/paper-dialog/paper-action-dialog.html">
-
-<polymer-element name="loot-dialog" extends="paper-action-dialog" transition="core-transition-center" layered="false">
-    <template>
-    <style>
-    :host {
-        margin: 24px 40px;
-    }
-    :host::shadow #actions {
-        padding: 16px 16px 8px;
-        /* This is and the div CSS would be better done by moving the div before
-           both content elements, this is a hack to do the same without editing
-           the HTML. */
-        justify-content: flex-end;
-    }
-    :host::shadow #actions > div {
-        flex: none;
-    }
-    :host::shadow h1 {
-        font-weight: 500;
-        font-size: 1.429rem;
-    }
-    </style>
-    <shadow></shadow>
-    </template>
-    <script>
-    Polymer({
-        show: function() {
-            this.backdrop = false;
-            this.autoCloseDisabled = false;
-            this.setAttribute(opened, true);
-        },
-        showModal: function() {
-            this.backdrop = true;
-            this.autoCloseDisabled = true;
-            this.open();
-            this.setAttribute('opened', true);
-        },
-        close: function(retVal) {
-            this.setAttribute('returnValue', retVal);
-            this.super();
-        },
-    });
-    </script>
-</polymer-element>

From 224b49aa45aecf106c76c89706142ba1a4c69b5d Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 29 Aug 2015 22:23:09 +0100
Subject: [PATCH 11/62] Updated loot-search (now loot-search-toolbar)

Decoupled it from external code, which can now be run by handling
events.
---
 scripts/vulcanize.js                          |   1 +
 .../html/elements/loot-search-toolbar.html    | 177 ++++++++++++++++++
 src/gui/html/elements/loot-search.html        | 170 -----------------
 .../elements/test_loot-search-toolbar.html    |  81 ++++++++
 4 files changed, 259 insertions(+), 170 deletions(-)
 create mode 100644 src/gui/html/elements/loot-search-toolbar.html
 delete mode 100644 src/gui/html/elements/loot-search.html
 create mode 100644 src/tests/gui/html/elements/test_loot-search-toolbar.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index ba7cfe5b..1ab806b4 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -66,6 +66,7 @@ function vulcanizeTests(releasePath) {
     'test_loot-dropdown-menu.html',
     'test_loot-message-dialog.html',
     'test_loot-plugin-item.html',
+    'test_loot-search-toolbar.html',
   ];
 
   tests.forEach((test) => {
diff --git a/src/gui/html/elements/loot-search-toolbar.html b/src/gui/html/elements/loot-search-toolbar.html
new file mode 100644
index 00000000..e4f73713
--- /dev/null
+++ b/src/gui/html/elements/loot-search-toolbar.html
@@ -0,0 +1,177 @@
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout.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-toolbar/paper-toolbar.html">
+<link rel="import" href="../../../../bower_components/paper-tooltip/paper-tooltip.html">
+
+<!-- events
+
+loot-search-begin: Fired when a search begins.
+loot-search-change-selection: Fired when the selected result changes.
+loot-search-end: Fired when the close button is clicked.
+
+-->
+<dom-module id="loot-search-toolbar">
+  <template>
+    <style>
+      paper-input {
+        @apply(--layout-horizontal);
+        @apply(--layout-flex);
+        --paper-input-container: {
+          @apply(--layout-flex);
+        };
+        --paper-input-container-input-color: var(--loot-dark-theme-text-color);
+        --paper-input-container-label: {
+          color: var(--loot-dark-theme-disabled-color);
+        }
+        --paper-input-container-underline: {
+          background-color: var(--loot-dark-theme-divider-color);
+        };
+      }
+      #count {
+        font-weight: 400;
+        font-size: 0.857rem;
+        color: var(--loot-dark-theme-secondary-color);
+      }
+    </style>
+    <paper-toolbar>
+      <paper-input id="search" label="Search cards" no-label-float></paper-input>
+      <div id="count">
+        <span>[[_computeResultNum(_currentResult)]]</span>
+        /
+        <span><!-- number of results --></span>
+      </div>
+      <paper-icon-button id="prev" icon="expand-less" disabled></paper-icon-button>
+      <paper-icon-button id="next" icon="expand-more" disabled></paper-icon-button>
+      <paper-icon-button id="close" icon="close"></paper-icon-button>
+    </paper-toolbar>
+  </template>
+  <script>
+    'use strict';
+    Polymer({ // eslint-disable-line new-cap, no-undef
+      is: 'loot-search-toolbar',
+      properties: {
+        _currentResult: {
+          type: Number,
+          value: -1,
+          observer: '_currentResultChanged',
+        },
+        results: {
+          type: Array,
+          value: () => { return []; },
+          observer: '_resultsChanged',
+        },
+      },
+
+      _currentResultChanged(newValue) {
+        if (this.results && this.results.length > 0) {
+          if (this.results.length === 1) {
+            this.$.prev.disabled = true;
+            this.$.next.disabled = true;
+          } else if (newValue === 0) {
+            this.$.prev.disabled = true;
+            this.$.next.disabled = false;
+          } else if (newValue === this.results.length - 1) {
+            this.$.prev.disabled = false;
+            this.$.next.disabled = true;
+          } else {
+            this.$.prev.disabled = false;
+            this.$.next.disabled = false;
+          }
+        }
+        if (newValue > -1) {
+          this.dispatchEvent(new CustomEvent('loot-search-change-selection', {
+            detail: { selection: this.results[newValue] },
+            bubbles: true,
+          }));
+        }
+      },
+
+      _resultsChanged(newValue) {
+        this.$.count.lastElementChild.textContent = newValue.length;
+        if (newValue.length > 0) {
+          this._currentResult = 0;
+        }
+      },
+
+      attached() {
+        this.$.search.addEventListener('input', this._onSearch);
+        this.$.search.addEventListener('keyup', this._onEnter);
+        this.$.prev.addEventListener('click', this._onPrev);
+        this.$.next.addEventListener('click', this._onNext);
+        this.$.close.addEventListener('click', this._onClose);
+      },
+
+      detached() {
+        this.$.search.removeEventListener('input', this._onSearch);
+        this.$.search.removeEventListener('keyup', this._onEnter);
+        this.$.prev.removeEventListener('click', this._onPrev);
+        this.$.next.removeEventListener('click', this._onNext);
+        this.$.close.removeEventListener('change', this._onClose);
+      },
+
+      _onEnter(evt) {
+        const host = evt.target.parentElement.parentNode.host;
+        if (evt.keyCode !== 13 || host.results.length === 0) {
+          return;
+        }
+        if (host._currentResult === host.results.length - 1) {
+          host._currentResult = 0;
+        } else {
+          ++host._currentResult;
+        }
+      },
+
+      focusInput() {
+        this.$.search.focus();
+      },
+
+      _resetResults() {
+        this.results = [];
+        this._currentResult = -1;
+        this.$.prev.setAttribute('disabled', '');
+        this.$.next.setAttribute('disabled', '');
+      },
+
+      search() {
+        this.$.search.dispatchEvent(new Event('input'));
+      },
+
+      _onSearch(evt) {
+        evt.target.parentElement.parentNode.host._resetResults();
+
+        const needle = evt.target.value.toLowerCase();
+        evt.target.dispatchEvent(new CustomEvent('loot-search-begin', {
+          detail: { needle },
+          bubbles: true,
+        }));
+      },
+
+      _onPrev(evt) {
+        --evt.target.parentElement.parentNode.host._currentResult;
+      },
+
+      _onNext(evt) {
+        ++evt.target.parentElement.parentNode.host._currentResult;
+      },
+
+      _onClose(evt) {
+        const host = evt.target.parentElement.parentNode.host;
+        host._resetResults();
+        host.$.search.value = '';
+        host.$.count.classList.toggle('hidden', true);
+        evt.target.dispatchEvent(new CustomEvent('loot-search-end', {
+          bubbles: true,
+        }));
+      },
+
+      _computeResultNum(currentResult) {
+        return currentResult + 1;
+      },
+    });
+  </script>
+</dom-module>
diff --git a/src/gui/html/elements/loot-search.html b/src/gui/html/elements/loot-search.html
deleted file mode 100644
index 5a36f840..00000000
--- a/src/gui/html/elements/loot-search.html
+++ /dev/null
@@ -1,170 +0,0 @@
-<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/paper-icon-button/paper-icon-button.html">
-
-<!--
-searchTarget is the ID of the core-list element to search the elements of.
--->
-<polymer-element name="loot-search" attributes="searchTarget">
-    <template>
-        <style>
-        core-toolbar {
-            background: #3F51B5;
-            color: white;
-            height: 56px;
-        }
-        core-toolbar > * {
-            top: -3px;
-        }
-        paper-input {
-            position: relative;
-        }
-        paper-input /deep/ paper-input-decorator::shadow .label-text,
-        paper-input /deep/ input::-webkit-input-placeholder {
-           color: rgba(255, 255, 255, 0.3) !important;
-        }
-        .caption {
-            font-weight: 400;
-            font-size: 0.857rem;
-            color: rgba(255, 255, 255, 0.7);
-        }
-        </style>
-        <core-toolbar>
-            <paper-input id="search" label="Search cards" flex></paper-input>
-            <div id="count" class="caption" hidden>
-                {{currentResult + 1}}/{{numResults}}
-            </div>
-            <paper-icon-button id="prev" icon="expand-less" disabled></paper-icon-button>
-            <paper-icon-button id="next" icon="expand-more" disabled></paper-icon-button>
-            <paper-icon-button id="close" icon="close"></paper-icon-button>
-        </core-toolbar>
-    </template>
-    <script>
-    Polymer({
-        currentResult: -1,
-        results: [],
-        numResults: 0,
-        searchTarget: undefined,
-
-        resultsChanged: function(oldValue, newValue) {
-            this.numResults = newValue.length;
-        },
-
-        currentResultChanged: function(oldValue, newValue) {
-            if (this.results.length > 0) {
-                if (this.results.length == 1) {
-                    this.shadowRoot.getElementById('prev').setAttribute('disabled', '');
-                    this.shadowRoot.getElementById('next').setAttribute('disabled', '');
-                } else if (newValue == 0) {
-                    this.shadowRoot.getElementById('prev').setAttribute('disabled', '');
-                    this.shadowRoot.getElementById('next').removeAttribute('disabled');
-                } else if (newValue == this.results.length - 1) {
-                    this.shadowRoot.getElementById('prev').removeAttribute('disabled');
-                    this.shadowRoot.getElementById('next').setAttribute('disabled', '');
-                } else {
-                    this.shadowRoot.getElementById('prev').removeAttribute('disabled');
-                    this.shadowRoot.getElementById('next').removeAttribute('disabled');
-                }
-            }
-        },
-
-        attached: function() {
-            this.shadowRoot.getElementById('search').addEventListener('input', this.onSearch, false);
-            this.shadowRoot.getElementById('search').addEventListener('keyup', this.onEnter, false);
-            this.shadowRoot.getElementById('prev').addEventListener('click', this.onPrev, false);
-            this.shadowRoot.getElementById('next').addEventListener('click', this.onNext, false);
-            this.shadowRoot.getElementById('close').addEventListener('click', this.onClose, false);
-        },
-
-        detached: function() {
-            this.shadowRoot.getElementById('search').removeEventListener('input', this.onSearch, false);
-            this.shadowRoot.getElementById('search').removeEventListener('keyup', this.onEnter, false);
-            this.shadowRoot.getElementById('prev').removeEventListener('click', this.onPrev, false);
-            this.shadowRoot.getElementById('next').removeEventListener('click', this.onNext, false);
-            this.shadowRoot.getElementById('close').removeEventListener('change', this.onClose, false);
-        },
-
-        resetResults: function() {
-            loot.game.plugins.forEach(function(plugin){
-                plugin.isSearchResult = false;
-            });
-            this.results = [];
-            this.currentResult = -1;
-            this.shadowRoot.getElementById('prev').setAttribute('disabled', '');
-            this.shadowRoot.getElementById('next').setAttribute('disabled', '');
-        },
-
-        onEnter: function(evt) {
-            var host = evt.target.parentElement.parentNode.host;
-            if (evt.keyCode != 13 || host.results.length == 0) {
-                return;
-            }
-
-            if (host.currentResult == host.results.length - 1) {
-                host.currentResult = 0;
-            } else {
-                ++host.currentResult;
-            }
-            document.getElementById(host.searchTarget).scrollToItem(host.results[host.currentResult]);
-        },
-
-        focusInput: function() {
-            this.shadowRoot.getElementById('search').focus();
-        },
-
-        search: function() {
-            this.shadowRoot.getElementById('search').dispatchEvent(new Event('input'));
-        },
-
-        onSearch: function(evt) {
-            var needle = evt.target.value.toLowerCase();
-            var host = evt.target.parentElement.parentNode.host;
-
-            host.resetResults();
-            host.shadowRoot.getElementById('count').hidden = !evt.target.value;
-
-            if (!evt.target.value) {
-                return;
-            }
-
-            var versionHidden = document.getElementById('hideVersionNumbers').checked;
-            var crcHidden = document.getElementById('hideCRCs').checked;
-            var bashTagHidden = document.getElementById('hideBashTags').checked;
-            document.getElementById(host.searchTarget).data.forEach(function(plugin, index){
-                if (plugin.getCardContent(loot.filters).containsText(needle)) {
-                  host.results.push(index);
-                  plugin.isSearchResult = true;
-                  return;
-                }
-            });
-
-            if (host.results.length > 0) {
-                host.currentResult = 0;
-                // For some reason change watcher doesn't run, call it manually.
-                host.currentResultChanged(-1, 0);
-                document.getElementById(host.searchTarget).scrollToItem(host.results[host.currentResult]);
-            }
-        },
-
-        onPrev: function(evt) {
-            var host = evt.target.parentElement.parentNode.host;
-            --host.currentResult;
-            document.getElementById(host.searchTarget).scrollToItem(host.results[host.currentResult]);
-        },
-
-        onNext: function(evt) {
-            var host = evt.target.parentElement.parentNode.host;
-            ++host.currentResult;
-            document.getElementById(host.searchTarget).scrollToItem(host.results[host.currentResult]);
-        },
-
-        onClose: function(evt) {
-            evt.target.parentElement.parentNode.host.resetResults();
-            evt.target.parentElement.parentNode.getElementById('search').value = '';
-            evt.target.parentElement.parentNode.getElementById('count').hidden = true;
-            evt.target.dispatchEvent(new CustomEvent('loot-search-close'));
-        },
-    });
-    </script>
-</polymer-element>
diff --git a/src/tests/gui/html/elements/test_loot-search-toolbar.html b/src/tests/gui/html/elements/test_loot-search-toolbar.html
new file mode 100644
index 00000000..8ab4b078
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-search-toolbar.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-search-toolbar.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/iron-icon/iron-icon.html">
+  <link rel="import" href="../../../../../bower_components/iron-list/iron-list.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-search-toolbar.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-search-toolbar id="searchBar"></loot-search-toolbar>
+
+  <iron-list id="pluginList" style="height: 500px;">
+    <template>
+      <div style="height: 300px;">[[item.name]]</div>
+    </template>
+  </iron-list>
+
+  <script>
+    'use strict';
+    const filters = new loot.Filters(new loot.Translator());
+    const plugins = [
+      new loot.Plugin({
+        name: 'Skyrim.esm',
+      }),
+      new loot.Plugin({
+        name: 'Hearthfires.esm',
+      }),
+      new loot.Plugin({
+        name: 'Dawnguard.esm',
+      }),
+      new loot.Plugin({
+        name: 'Dragonborn.esm',
+      }),
+    ];
+
+    function onSearchEnd() {
+      plugins.forEach((plugin) => {
+        plugin.isSearchResult = false;
+      });
+    }
+
+    function onSearchBegin(evt) {
+      onSearchEnd();
+
+      if (!evt.detail.needle) {
+        return;
+      }
+
+      // Don't push to the target's results property directly, as the
+      // change observer doesn't work correctly unless special Polymer APIs
+      // are used, which I don't want to get into.
+      const results = [];
+      plugins.forEach((plugin, index) => {
+        if (plugin.getCardContent(filters).containsText(evt.detail.needle)) {
+          results.push(index);
+          plugin.isSearchResult = true;
+        }
+      });
+
+      evt.target.results = results;
+    }
+
+    function onSearchChangeSelection(evt) {
+      document.getElementById('pluginList').scrollToIndex(evt.detail.selection);
+    }
+
+    document.addEventListener('loot-search-begin', onSearchBegin);
+    document.addEventListener('loot-search-change-selection', onSearchChangeSelection);
+    document.addEventListener('loot-search-end', onSearchEnd);
+    document.getElementById('pluginList').items = plugins;
+  </script>
+</body>

From d84a4c0081a614b54ef75e59647c65c55fe8583a Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 31 Jan 2016 14:04:36 +0000
Subject: [PATCH 12/62] Delete loot-validated-input element

It's no longer required now that paper-input supports validation.
---
 .../html/elements/loot-validated-input.html   | 21 -------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 src/gui/html/elements/loot-validated-input.html

diff --git a/src/gui/html/elements/loot-validated-input.html b/src/gui/html/elements/loot-validated-input.html
deleted file mode 100644
index ec65c9ea..00000000
--- a/src/gui/html/elements/loot-validated-input.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<link rel="import" href="../../../../bower_components/polymer/polymer.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/core-input/core-input.html">
-
-<polymer-element name="loot-validated-input" attributes="error type required maxlength minlength pattern max min step value disabled">
-    <template>
-        <paper-input-decorator error="{{error}}" isInvalid="{{!$.input.validity.valid}}" disabled?="{{disabled != undefined}}">
-            <input id="input" is="core-input" type="{{type}}" class="{{class}}" required?="{{required != undefined}}" maxlength?="{{maxlength}}" minlength?="{{minlength}}" pattern?="{{pattern}}" max?="{{max}}" min?="{{min}}" step?="{{step}}" value="{{value}}" readonly?="{{disabled != undefined}}">
-        </paper-input-decorator>
-    </template>
-    <script>
-    Polymer({
-        type: 'text',
-
-        checkValidity: function() {
-            return this.shadowRoot.getElementById('input').checkValidity();
-        }
-    });
-    </script>
-</polymer-element>

From a6ae6d0f52c45a522a7a39d81cd6ac317e01ab97 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Fri, 28 Aug 2015 13:11:45 +0100
Subject: [PATCH 13/62] Update editable-table

---
 scripts/vulcanize.js                          |   1 +
 src/gui/html/elements/editable-table.html     | 594 +++++++++---------
 .../html/elements/test_editable-table.html    |  52 ++
 3 files changed, 349 insertions(+), 298 deletions(-)
 create mode 100644 src/tests/gui/html/elements/test_editable-table.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index 1ab806b4..4d2482bb 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -62,6 +62,7 @@ function vulcanizeTests(releasePath) {
   const outputPath = path.join(releasePath.path, 'html_tests', 'elements');
 
   const tests = [
+    'test_editable-table.html',
     'test_loot-custom-icons.html',
     'test_loot-dropdown-menu.html',
     'test_loot-message-dialog.html',
diff --git a/src/gui/html/elements/editable-table.html b/src/gui/html/elements/editable-table.html
index 98c9fbc9..e7efa2c8 100644
--- a/src/gui/html/elements/editable-table.html
+++ b/src/gui/html/elements/editable-table.html
@@ -1,340 +1,338 @@
 <link rel="import" href="../../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../../../../bower_components/iron-icons/iron-icons.html">
+
 <link rel="import" href="../../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../../../bower_components/core-icons/core-icons.html">
-<link rel="import" href="../../../../bower_components/core-tooltip/core-tooltip.html">
+<link rel="import" href="../../../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../../../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../../bower_components/paper-tooltip/paper-tooltip.html">
 
 <link rel="import" href="loot-dropdown-menu.html">
-<link rel="import" href="loot-validated-input.html">
 
 <template id="fileRow">
-    <tr>
-        <td><loot-validated-input error="A filename is required." class="name" required></loot-validated-input></td>
-        <td><paper-input class="display"></paper-input></td>
-        <td><paper-input class="condition"></paper-input></td>
-        <td>
-            <core-tooltip label="Delete Row" noarrow position="left">
-                <paper-icon-button class="delete" icon="delete"></paper-icon-button>
-            </core-tooltip>
-        </td>
-    </tr>
+  <tr>
+    <td><paper-input error-message="A filename is required." class="name" required auto-validate no-label-float></paper-input></td>
+    <td><paper-input class="display" no-label-float></paper-input></td>
+    <td><paper-input class="condition" no-label-float></paper-input></td>
+    <td>
+      <span>
+        <paper-icon-button class="delete" icon="delete"></paper-icon-button>
+        <paper-tooltip position="left">Delete Row</paper-tooltip>
+      </span>
+    </td>
+  </tr>
 </template>
 <template id="messageRow">
-    <tr>
-        <td>
-            <loot-dropdown-menu class="type" value="say">
-                <paper-item value="say" noink>Note</paper-item>
-                <paper-item value="warn" noink>Warning</paper-item>
-                <paper-item value="error" noink>Error</paper-item>
-            </loot-dropdown-menu>
-        </td>
-        <td><loot-validated-input error="A content string is required." class="content" required></loot-validated-input></td>
-        <td><paper-input class="condition"></paper-input></td>
-        <td>
-            <loot-dropdown-menu class="language" halign="right">
-                <!-- Language <option> elements go here. -->
-            </loot-dropdown-menu>
-        </td>
-        <td>
-            <core-tooltip label="Delete Row" noarrow position="left">
-                <paper-icon-button class="delete" icon="delete"></paper-icon-button>
-            </core-tooltip>
-        </td>
-    </tr>
+  <tr>
+    <td>
+      <loot-dropdown-menu class="type" value="say">
+        <paper-item value="say">Note</paper-item>
+        <paper-item value="warn">Warning</paper-item>
+        <paper-item value="error">Error</paper-item>
+      </loot-dropdown-menu>
+    </td>
+      <td><paper-textarea error-message="A content string is required." class="content" required auto-validate></paper-textarea></td>
+      <td><paper-input class="condition" no-label-float></paper-input></td>
+      <td>
+        <loot-dropdown-menu class="language">
+          <!-- Language <option> elements go here. -->
+        </loot-dropdown-menu>
+      </td>
+      <td>
+        <span>
+          <paper-icon-button class="delete" icon="delete"></paper-icon-button>
+          <paper-tooltip position="left">Delete Row</paper-tooltip>
+        </span>
+      </td>
+  </tr>
 </template>
 <template id="tagRow">
-    <tr>
-        <td>
-            <loot-dropdown-menu class="type" value="add">
-                <paper-item value="add" noink>Add</paper-item>
-                <paper-item value="remove" noink>Remove</paper-item>
-            </loot-dropdown-menu>
-        </td>
-        <td><loot-validated-input error="A name is required." class="name" required></loot-validated-input></td>
-        <td><paper-input class="condition"></paper-input></td>
-        <td>
-            <core-tooltip label="Delete Row" noarrow position="left">
-                <paper-icon-button class="delete" icon="delete"></paper-icon-button>
-            </core-tooltip>
-        </td>
-    </tr>
+  <tr>
+    <td>
+      <loot-dropdown-menu class="type" value="add">
+        <paper-item value="add">Add</paper-item>
+        <paper-item value="remove">Remove</paper-item>
+      </loot-dropdown-menu>
+    </td>
+    <td><paper-input error-message="A name is required." class="name" required auto-validate no-label-float></paper-input></td>
+    <td><paper-input class="condition" no-label-float></paper-input></td>
+    <td>
+      <span>
+        <paper-icon-button class="delete" icon="delete"></paper-icon-button>
+        <paper-tooltip position="left">Delete Row</paper-tooltip>
+      </span>
+    </td>
+  </tr>
 </template>
 <template id="dirtyInfoRow">
-    <tr>
-        <td><loot-validated-input error="A CRC is required." class="crc" maxlength="8" minlength="8" pattern="[0-9A-Fa-f]{8}" required></loot-validated-input></td>
-        <td><loot-validated-input error="Values must be integers." class="itm" type="number" min="0" step="1" value="0"></loot-validated-input></td>
-        <td><loot-validated-input error="Values must be integers." class="udr" type="number" min="0" step="1" value="0"></loot-validated-input></td>
-        <td><loot-validated-input error="Values must be integers." class="nav" type="number" min="0" step="1" value="0"></loot-validated-input></td>
-        <td><loot-validated-input error="A utility name is required." class="util" required></loot-validated-input></td>
-        <td>
-            <core-tooltip label="Delete Row" noarrow position="left">
-                <paper-icon-button class="delete" icon="delete"></paper-icon-button>
-            </core-tooltip>
-        </td>
-    </tr>
+  <tr>
+    <td><paper-input error-message="A CRC is required." class="crc" maxlength="8" minlength="8" pattern="[0-9A-Fa-f]{8}" required auto-validate no-label-float></paper-input></td>
+    <td><paper-input error-message="Values must be integers." class="itm" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
+    <td><paper-input error-message="Values must be integers." class="udr" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
+    <td><paper-input error-message="Values must be integers." class="nav" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
+    <td><paper-input error-message="A utility name is required." class="util" required auto-validate no-label-float></paper-input></td>
+    <td>
+      <span>
+        <paper-icon-button class="delete" icon="delete"></paper-icon-button>
+        <paper-tooltip position="left">Delete Row</paper-tooltip>
+      </span>
+    </td>
+  </tr>
 </template>
 <template id="locationRow">
-    <tr>
-        <td><loot-validated-input error="A link is required." class="link" required></loot-validated-input></td>
-        <td><paper-input class="name"></paper-input></td>
-        <td>
-            <core-tooltip label="Delete Row" noarrow position="left">
-                <paper-icon-button class="delete" icon="delete"></paper-icon-button>
-            </core-tooltip>
-        </td>
-    </tr>
+  <tr>
+    <td><paper-input error-message="A link is required." class="link" required auto-validate no-label-float></paper-input></td>
+    <td><paper-input class="name" no-label-float></paper-input></td>
+    <td>
+      <span>
+        <paper-icon-button class="delete" icon="delete"></paper-icon-button>
+        <paper-tooltip position="left">Delete Row</paper-tooltip>
+      </span>
+    </td>
+  </tr>
 </template>
 <template id="gameRow">
-    <tr>
-        <td><loot-validated-input error="A name is required." class="name" required></loot-validated-input></td>
-        <td>
-            <loot-dropdown-menu class="type">
-                <!-- Game <option> elements go here. -->
-            </loot-dropdown-menu>
-        </td>
-        <td><loot-validated-input error="A folder is required." class="folder" required></loot-validated-input></td>
-        <td><paper-input class="master"></paper-input></td>
-        <td><paper-input class="repo"></paper-input></td>
-        <td><paper-input class="branch"></paper-input></td>
-        <td><paper-input class="path"></paper-input></td>
-        <td><paper-input class="registry"></paper-input></td>
-        <td>
-            <core-tooltip label="Delete Row" noarrow position="left">
-                <paper-icon-button class="delete" icon="delete"></paper-icon-button>
-            </core-tooltip>
-        </td>
-    </tr>
+  <tr>
+    <td><paper-input error-message="A name is required." class="name" required auto-validate no-label-float></paper-input></td>
+    <td>
+      <loot-dropdown-menu class="type">
+        <!-- Game <option> elements go here. -->
+      </loot-dropdown-menu>
+    </td>
+    <td><paper-input error-message="A folder is required." class="folder" required auto-validate no-label-float></paper-input></td>
+    <td><paper-input class="master" no-label-float></paper-input></td>
+    <td><paper-input class="repo" no-label-float></paper-input></td>
+    <td><paper-input class="branch" no-label-float></paper-input></td>
+    <td><paper-input class="path" no-label-float></paper-input></td>
+    <td><paper-input class="registry" no-label-float></paper-input></td>
+    <td>
+      <span>
+        <paper-icon-button class="delete" icon="delete"></paper-icon-button>
+        <paper-tooltip position="left">Delete Row</paper-tooltip>
+      </span>
+    </td>
+  </tr>
 </template>
 <template id="newRow">
-    <tr>
-        <td>
-            <core-tooltip label="Add New Row" noarrow position="right">
-                <paper-icon-button icon="add"></paper-icon-button>
-            </core-tooltip>
-        </td>
-        <td></td>
-    </tr>
+  <tr>
+    <td>
+      <span>
+        <paper-icon-button icon="add"></paper-icon-button>
+        <paper-tooltip position="right">Add New Row</paper-tooltip>
+      </span>
+    </td>
+    <td></td>
+  </tr>
 </template>
 
-<style>
+<dom-module id="editable-table">
+  <template>
+    <style>
+      :host {
+          background-color: inherit;
+          border-collapse: collapse;
+          width: 100%;
+      }
+      ::content td,
+      ::content th {
+        vertical-align: top;
+        text-align: left;
+      }
+      ::content td {
+          padding: 0;
+      }
+      ::content th {
+          padding: 0 4px;
+          border-bottom: 1px solid var(--loot-divider-color);
+      }
+      ::content paper-icon-button {
+          color: var(--loot-secondary-text-color);
+      }
+      ::content paper-icon-button[disabled] {
+          color: var(--loot-disabled-text-color);
+      }
+      ::content paper-icon-button[icon=delete]:hover {
+          color: red;
+      }
+      ::content paper-icon-button[icon=add]:hover {
+          color: green;
+      }
+    </style>
+    <content></content>
+  </template>
+  <script>
+    'use strict';
+    Polymer({ // eslint-disable-line new-cap, no-undef
+      is: 'editable-table',
+      extends: 'table',
 
-/* Table styling. */
-html /deep/ table[is=editable-table] {
-    background-color: inherit;
-}
-html /deep/ table[is=editable-table] td {
-    padding: 0;
-}
-html /deep/ table[is=editable-table] th {
-    padding: 0 4px;
-}
-html /deep/ table[is=editable-table] paper-icon-button {
-    color: rgba(0, 0, 0, 0.54);
-}
-html /deep/ table[is=editable-table] paper-icon-button[disabled] {
-    color: rgba(0, 0, 0, 0.26);
-}
-html /deep/ table[is=editable-table] paper-icon-button[icon=delete]:hover {
-    color: red;
-}
-html /deep/ table[is=editable-table] paper-icon-button[icon=add]:hover {
-    color: green;
-}
-</style>
-<script>
-'use strict';
-(function(){
-    /* Create a <editable-table> element type that extends from <table>. */
-    var EditableTableProto = Object.create(HTMLTableElement.prototype, {
+      attached() {
+        /* Add "add new row" row. */
+        const content = document.getElementById('newRow').content;
+        let row = document.importNode(content, true);
+        this.tBodies[0].appendChild(row);
+        row = this.tBodies[0].lastElementChild;
 
-        onDrop: {
-            value: function(evt) {
-                evt.stopPropagation();
+        /* Add new row listener. */
+        row.querySelector('paper-icon-button').addEventListener('click', this.onAddEmptyRow);
 
-                if (evt.currentTarget.tagName == 'TABLE' && evt.currentTarget.getAttribute('data-template') == 'fileRow') {
-                    var data = {
-                        name: evt.dataTransfer.getData('text/plain')
-                    };
-                    evt.currentTarget.addRow(data);
-                }
+        /* Add drag 'n' drop listeners.
+           Drag 'n' drop should only be enabled for file-row tables.
+        */
+        if (this.getAttribute('data-template') === 'fileRow') {
+          this.addEventListener('drop', this.onDrop);
+          this.addEventListener('dragover', this.onDragOver);
+        }
+      },
 
-                return false;
+      detached() {
+        /* Remove deletion listener. */
+        const icons = this.tBodies[0].getElementsByClassName('delete');
+        for (let i = 0; i < icons.length; ++i) {
+          icons[i].removeEventListener('click', this.onRemoveRow);
+        }
+
+        /* Remove new row listener. */
+        this.querySelector('tbody tr:last-child paper-icon-button').removeEventListener('click', this.onAddEmptyRow);
+
+        /* Remove drag 'n' drop listeners. */
+        this.removeEventListener('drop', this.onDrop);
+        this.removeEventListener('dragover', this.onDragOver);
+      },
+
+      onDrop(evt) {
+        evt.stopPropagation();
+
+        if (evt.currentTarget.tagName === 'TABLE'
+            && evt.currentTarget.getAttribute('data-template') === 'fileRow') {
+          evt.currentTarget.addRow({
+            name: evt.dataTransfer.getData('text/plain'),
+          });
+        }
+
+        return false;
+      },
+
+      onDragOver(evt) {
+        evt.preventDefault();
+        evt.dataTransfer.dropEffect = 'copy';
+      },
+
+      getRowsData(writableOnly) {
+        const writableRows = [];
+        const rows = this.tBodies[0].rows;
+
+        for (let i = 0; i < rows.length; ++i) {
+          const trash = rows[i].getElementsByClassName('delete');
+          if (trash.length > 0 && (!writableOnly || !trash[0].disabled)) {
+            const rowData = {};
+
+            const inputs = rows[i].querySelectorAll('paper-input, paper-textarea, loot-dropdown-menu');
+            for (let j = 0; j < inputs.length; ++j) {
+              rowData[inputs[j].className] = inputs[j].value;
             }
-        },
 
-        onDragOver: {
-            value: function(evt) {
-                evt.preventDefault();
-                evt.dataTransfer.dropEffect = 'copy';
+            writableRows.push(rowData);
+          }
+        }
+
+        return writableRows;
+      },
+
+      setReadOnly(row, classMask, readOnly) {
+        readOnly = readOnly || true;
+
+        const trash = row.getElementsByClassName('delete')[0];
+        if (classMask) {
+          if (classMask.indexOf('delete') !== -1) {
+            trash.disabled = readOnly;
+          }
+        } else {
+          trash.disabled = readOnly;
+        }
+
+        const inputs = row.querySelectorAll('paper-input, paper-textarea, loot-dropdown-menu');
+        for (let i = 0; i < inputs.length; ++i) {
+          if (classMask) {
+            for (let j = 0; j < classMask.length; ++j) {
+              if (inputs[i].classList.contains(classMask[j])) {
+                inputs[i].disabled = readOnly;
+                break;
+              }
             }
-        },
+          } else {
+            inputs[i].disabled = readOnly;
+          }
+        }
+      },
 
-        getRowsData: {
-            value: function(writableOnly) {
-                var writableRows = [];
-                var rows = this.tBodies[0].rows;
+      clear() {
+        const rowDeletes = this.tBodies[0].getElementsByClassName('delete');
+        while (rowDeletes.length > 0) {
+          rowDeletes[0].click();
+        }
+      },
 
-                for (var i = 0; i < rows.length; ++i) {
-                    var trash = rows[i].getElementsByClassName('delete');
-                    if (trash.length > 0 && (!writableOnly || !trash[0].disabled)) {
-                        var rowData = {};
+      onRemoveRow(evt) {
+        const tr = evt.target.parentElement.parentElement.parentElement;
+        const tbody = tr.parentElement;
+        const table = tbody.parentElement;
 
-                        var inputs = rows[i].querySelectorAll('paper-input, loot-validated-input, loot-dropdown-menu');
-                        for (var j = 0; j < inputs.length; ++j) {
-                            rowData[inputs[j].className] = inputs[j].value;
-                        }
+        /* Remove deletion listener. */
+        evt.target.removeEventListener('click', table.onRemoveRow);
 
-                        writableRows.push(rowData);
-                    }
-                }
+        /* Now remove row. */
+        tbody.removeChild(tr);
 
-                return writableRows;
-            }
-        },
+        /* Notify that the table size has changed. */
+        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+      },
 
-        setReadOnly: {
-            value: function(row, classMask, readOnly) {
-                if (readOnly == undefined) {
-                    readOnly = true;
-                }
+      onAddEmptyRow(evt) {
+        evt.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement.addRow({});
 
-                var trash = row.getElementsByClassName('delete')[0];
-                if (classMask) {
-                    if (classMask.indexOf('delete') != -1) {
-                        trash.disabled = readOnly;
-                    }
-                } else {
-                    trash.disabled = readOnly;
-                }
+        /* Notify that the table size has changed. */
+        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+      },
 
-                var inputs = row.querySelectorAll('paper-input, loot-validated-input, loot-dropdown-menu');
-                for (var i = 0; i < inputs.length; ++i) {
-                    if (classMask) {
-                        for (var j = 0; j < classMask.length; ++j) {
-                            if (inputs[i].classList.contains(classMask[j])) {
-                                inputs[i].disabled = readOnly;
-                                break;
-                            }
-                        }
-                    } else {
-                        inputs[i].disabled = readOnly;
-                    }
-                }
-            }
-        },
+      addRow(tableData) {
+        const rowTemplateId = this.getAttribute('data-template');
+        const content = document.getElementById(rowTemplateId).content;
+        let row = document.importNode(content, true);
+        this.tBodies[0].insertBefore(row, this.tBodies[0].lastElementChild);
+        row = this.tBodies[0].lastElementChild.previousElementSibling;
 
-        clear: {
-            value: function() {
-                var rowDeletes = this.tBodies[0].getElementsByClassName('delete');
+        /* Data is an object with keys that match element class names. */
+        for (const key in tableData) {
+          const elems = row.getElementsByClassName(key);
+          if (tableData[key] !== undefined && elems.length === 1) {
+            elems[0].value = tableData[key];
+          }
+        }
 
-                while (rowDeletes.length > 0) {
-                    rowDeletes[0].click();
-                }
-            }
-        },
+        /* Add deletion listener. */
+        row.getElementsByClassName('delete')[0].addEventListener('click', this.onRemoveRow);
 
-        onRemoveRow: {
-            value: function(evt) {
-                var tr = evt.target.parentElement.parentElement.parentElement;
-                var tbody = tr.parentElement;
-                var table = tbody.parentElement;
+        /* Notify that the table size has changed. */
+        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
 
-                /* Remove deletion listener. */
-                evt.target.removeEventListener('click', table.onRemoveRow, false);
+        return row;
+      },
 
-                /* Now remove row. */
-                tbody.removeChild(tr);
-            }
-        },
-
-        onAddEmptyRow: {
-            value: function(evt) {
-                /* Create new row. */
-                var table = evt.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement;
-
-                table.addRow({});
-            }
-        },
-
-        addRow: {
-            value: function(tableData) {
-                var rowTemplateId = this.getAttribute('data-template');
-                var content = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-                if (content) {
-                    content = content.import.getElementById(rowTemplateId).content;
-                } else {
-                    content = document.getElementById(rowTemplateId).content;
-                }
-                var row = document.importNode(content, true);
-
-                var tbody = this.tBodies[0];
-                tbody.insertBefore(row, tbody.lastElementChild);
-                row = tbody.lastElementChild.previousElementSibling;
-
-                /* Data is an object with keys that match element class names. */
-                for (var key in tableData) {
-                    var elems = row.getElementsByClassName(key);
-                    if (tableData[key] != undefined && elems.length == 1) {
-                        elems[0].value = tableData[key];
-                    }
-                }
-
-                /* Add deletion listener. */
-                row.getElementsByClassName('delete')[0].addEventListener('click', this.onRemoveRow, false);
-
-                return row;
-            }
-        },
-
-        attachedCallback: {
-            value: function() {
-                /* Add "add new row" row. */
-                var content = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-                if (content) {
-                    content = content.import.getElementById('newRow').content;
-                } else {
-                    content = document.getElementById('newRow').content;
-                }
-                var row = document.importNode(content, true);
-                this.tBodies[0].appendChild(row);
-                row = this.tBodies[0].lastElementChild;
-
-                /* Add new row listener. */
-                row.querySelector('paper-icon-button').addEventListener('click', this.onAddEmptyRow, false);
-
-                /* Add drag 'n' drop listeners.
-                   Drag 'n' drop should only be enabled for file-row tables.
-                */
-                if (this.getAttribute('data-template') == 'fileRow') {
-                    this.addEventListener('drop', this.onDrop, false);
-                    this.addEventListener('dragover', this.onDragOver, false);
-                }
-            }
-        },
-
-        detachedCallback: {
-            value: function() {
-                /* Remove deletion listener. */
-                var icons = this.tBodies[0].getElementsByClassName('delete');
-                for (var i = 0; i < icons.length; ++i) {
-                    icons[i].removeEventListener('click', this.onRemoveRow, false);
-                }
-
-                /* Remove new row listener. */
-                this.querySelector('tbody tr:last-child paper-icon-button').removeEventListener('click', this.onAddEmptyRow, false);
-
-                /* Remove drag 'n' drop listeners. */
-                this.removeEventListener('drop', this.onDrop, false);
-                this.removeEventListener('dragover', this.onDragOver, false);
-            }
-        },
+      addReadOnlyRow(tableData) {
+        this.setReadOnly(this.addRow(tableData));
+      },
 
+      validate() {
+        const inputs = this.querySelectorAll('paper-input, paper-textarea');
+        for (let i = 0; i < inputs.length; ++i) {
+          if (!inputs[i].validate()) {
+            return false;
+          }
+        }
+        return true;
+      },
     });
-
-    document.registerElement('editable-table', {
-        prototype: EditableTableProto,
-        extends: 'table'
-    });
-})();
-</script>
+  </script>
+</dom-module>
diff --git a/src/tests/gui/html/elements/test_editable-table.html b/src/tests/gui/html/elements/test_editable-table.html
new file mode 100644
index 00000000..f5e16662
--- /dev/null
+++ b/src/tests/gui/html/elements/test_editable-table.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_editable-table.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../gui/html/elements/editable-table.html">
+</head>
+
+<body>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+</body>

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 14/62] 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>

From fd12139eca88a0796c5733b946fa526dc633b264 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 30 Aug 2015 21:01:28 +0100
Subject: [PATCH 15/62] Update loot-plugin-card

---
 scripts/vulcanize.js                          |   1 +
 src/gui/html/elements/loot-plugin-card.html   | 782 +++++++++---------
 src/gui/html/js/plugin.js                     |   4 +
 .../html/elements/test_loot-plugin-card.html  |  86 ++
 4 files changed, 481 insertions(+), 392 deletions(-)
 create mode 100644 src/tests/gui/html/elements/test_loot-plugin-card.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index 0856eb6d..b5ccdf89 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-card.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-card.html b/src/gui/html/elements/loot-plugin-card.html
index 01fa3aac..74e7e39f 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -12,408 +12,406 @@ 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">
-<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-label/core-label.html">
-<link rel="import" href="../../../../bower_components/paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../../../bower_components/paper-dropdown/paper-dropdown.html">
-<link rel="import" href="../../../../bower_components/paper-checkbox/paper-checkbox.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/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../../bower_components/paper-item/paper-icon-item.html">
+<link rel="import" href="../../../../bower_components/paper-material/paper-material.html">
+<link rel="import" href="../../../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../../../bower_components/paper-menu-button/paper-menu-button.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="loot-plugin-editor.html">
 <link rel="import" href="loot-custom-icons.html">
 
+<dom-module id="loot-plugin-card">
+  <template>
+    <style>
+      /* Host and front/editor styling. */
+      #wrapper {
+        display: block;
+        background: white;
+        margin: 0 8px 8px 8px;
+        position: relative;
+        transition: 0.6s;
+        transform-style: preserve-3d;
+      }
+      :host(.highlight) #wrapper {
+        outline: 4px solid var(--loot-accent-color);
+      }
+      :host([is-search-result]) #front,
+      :host([is-search-result]) #editor {
+        box-shadow: inset 4px 0 var(--loot-primary-color);
+      }
+      #front {
+        display: block;
+        backface-visibility: hidden;
+      }
+      #editor {
+        transform: rotateY(180deg);
+        display:none;
+        backface-visibility: hidden;
+      }
 
-<polymer-element name="loot-plugin-card" attributes="data">
-    <template>
-        <style>
-        /* Material Design for non-button icons. */
-        core-tooltip > core-icon {
-            color: rgba(0, 0, 0, 0.54);
-        }
+      /* Flip animation styling. */
+      :host(.flip) #wrapper {
+        transform: rotateY(180deg);
+      }
+      :host(.flip) #front  {
+        display: none;
+      }
+      :host(.flip) #editor  {
+        display: block;
+      }
+      :host(.fastflip) #wrapper {
+        transition-duration: 1ms;
+      }
 
-        /* Host and front/editor styling. */
-        #wrapper {
-            display: block;
-            background:white;
-            margin: 0 8px 8px 8px;
-            position: relative;
-            border-radius: 2px;
-            box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
-            position: relative;
-            transition: 0.6s;
-            transform-style: preserve-3d;
-        }
-        :host(.highlight) #wrapper {
-            outline: 4px solid #64B5F6;
-        }
-        :host([data-active=false]) #activeTick {
-            visibility: hidden;
-        }
-        :host([data-archive=false]) #loadsArchive,
-        :host([data-empty=false]) #emptyPlugin,
-        :host([data-master=false]) #isMaster,
-        :host(:not([data-edits])) #hasUserEdits {
-            display: none;
-        }
-        :host(.search-result) #front,
-        :host(.search-result) #editor {
-            box-shadow: inset 4px 0 #3F51B5;
-        }
-        #front {
-            display: block;
-            backface-visibility: hidden;
-        }
-        #editor {
-            transform: rotateY(180deg);
-            display:none;
-            backface-visibility: hidden;
-        }
+      /* Icon styling. */
+      iron-icon {
+        color: var(--loot-secondary-text-color);
+        padding: 8px;
+      }
+      #activeTick {
+        color: green;
+      }
+      :host(:not([is-active])) #activeTick {
+        visibility: hidden;
+      }
 
-        /* Flip animation styling. */
-        :host(.flip) #wrapper {
-            transform: rotateY(180deg);
-        }
-        :host(.flip) #front  {
-            display: none;
-        }
-        :host(.flip) #editor  {
-            display: block;
-        }
-        :host(.fastflip) #wrapper {
-            transition-duration: 1ms;
-        }
+      /* Content styling. */
+      content::content > .tag {
+        display: block;
+        padding: 0 16px 16px;
+      }
+      content::content > ul {
+        display: block;
+        padding: 0 16px 16px 40px;
+        margin: 0;
+      }
+      content::content > h1 {
+        font-size: 1.143rem;
+        display: inline-block;
+        margin: 0;
+        color: inherit;
+      }
+      content::content > .version,
+      content::content > .crc {
+        display: inline-block;
+        margin-left: 16px;
+        font-weight: 400;
+        font-size: 1rem;
+      }
 
-        /* Icon styling. */
-        #activeTick > core-icon {
-            color: green;
-        }
-
-        /* Content styling. */
-        content::content > .tag {
-            display: block;
-            padding: 0 16px 16px;
-        }
-        content::content > ul {
-            display: block;
-            padding: 0 16px 16px 40px;
-            margin: 0;
-        }
-        content::content > h1 {
-            font-size: 1.143rem;
-            display: inline-block;
-            margin: 0;
-            color: inherit;
-        }
-        content::content > .version,
-        content::content > .crc {
-            display: inline-block;
-            margin-left: 16px;
-            font-weight: 400;
-            font-size: 1rem;
-        }
-
-        /* Misc Styling. */
-        core-toolbar {
-            background: inherit;
-            height: 56px;
-        }
-        core-toolbar > div {
-            position: relative;
-            top: -4px;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-        core-tooltip > core-icon {
-            vertical-align: inherit !important;
-        }
-        #content {
-            overflow: hidden;
-        }
-        #conflictsLabel {
-            font-size: 1rem;
-            font-weight: 500;
-            padding: 0 16px;
-            height: 48px;
-            line-height: 48px;
-            cursor: pointer;
-        }
-        #conflictsLabel > core-icon {
-            margin-right: 32px;
-            color: rgba(0, 0, 0, 0.54);
-        }
-        #conflictsLabel [for] {
-            margin-left: 32px;
-        }
-        </style>
-        <div id="wrapper">
-            <section id="front">
-                <core-toolbar>
-                    <core-tooltip id="activeTick" label="Active Plugin" noarrow>
-                        <core-icon icon="check"></core-icon>
-                    </core-tooltip>
-                    <div flex>
-                        <content select="h1"></content>
-                        <content select=".version"></content>
-                        <content select=".crc"></content>
-                    </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 id="hasUserEdits" label="Has User Metadata" noarrow>
-                        <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" opened="{{data.isMenuOpen}}">
-                            <core-menu class="menu">
-                                <core-label id="conflictsLabel" center horizontal layout>
-                                    <core-icon icon="filter-list"></core-icon>
-                                    <div flex>Show Only Conflicts</div>
-                                    <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}" for></paper-toggle-button>
-                                </core-label>
-                                <paper-item id="editMetadata" noink>
-                                    <core-icon icon="create"></core-icon>
-                                    Edit Metadata
-                                </paper-item>
-                                <paper-item id="copyMetadata" noink>
-                                    <core-icon icon="content-copy"></core-icon>
-                                    Copy Metadata
-                                </paper-item>
-                                <paper-item id="clearMetadata" noink>
-                                    <core-icon icon="delete"></core-icon>
-                                    Clear User Metadata
-                                </paper-item>
-                            </core-menu>
-                        </paper-dropdown>
-                    </paper-menu-button>
-                </core-toolbar>
-                <div id="content">
-                    <content select=".tag.add"></content>
-                    <content select=".tag.remove"></content>
-                    <content></content>
-                </div>
-            </section>
-            <loot-plugin-editor id="editor"></loot-plugin-editor>
+      /* Misc Styling. */
+      paper-toolbar {
+        --paper-toolbar-color: var(--loot-primary-text-color);
+        --paper-toolbar-background: inherit;
+      }
+      #content {
+        overflow: hidden;
+      }
+      #title {
+        @apply(--layout-flex);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      #editMetadata,
+      #copyMetadata,
+      #clearMetadata {
+        cursor: pointer;
+      }
+      #showOnlyConflicts {
+        min-height: 48px;
+        padding: 0 16px;
+        font-weight: 500;
+        --paper-toggle-button-label-spacing: 16px;
+        white-space: nowrap;
+      }
+      [hidden] {
+        display: none;
+      }
+    </style>
+    <paper-material id="wrapper" elevation="1">
+      <section id="front">
+        <paper-toolbar>
+          <iron-icon id="activeTick" icon="check"></iron-icon>
+          <paper-tooltip for="activeTick">Active Plugin</paper-tooltip>
+          <div id="title">
+            <content select="h1"></content>
+            <content select=".version"></content>
+            <content select=".crc"></content>
+          </div>
+          <iron-icon id="isMaster" icon="loot-custom-icons:crown" hidden$="[[!isMaster]]"></iron-icon>
+          <paper-tooltip for="isMaster">Master File</paper-tooltip>
+          <iron-icon id="emptyPlugin" icon="visibility-off" hidden$="[[!isEmpty]]"></iron-icon>
+          <paper-tooltip for="emptyPlugin">Empty Plugin</paper-tooltip>
+          <iron-icon id="loadsArchive" icon="attachment" hidden$="[[!loadsArchive]]"></iron-icon>
+          <paper-tooltip for="loadsArchive">Loads Archive</paper-tooltip>
+          <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
+          <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
+          <paper-menu-button id="menu" opened="{{data.isMenuOpen}}" horizontal-align="right">
+            <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
+            <paper-menu class="dropdown-content">
+              <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}">Show Only Conflicts</paper-toggle-button>
+              <paper-icon-item id="editMetadata">
+                <iron-icon icon="create" item-icon></iron-icon>
+                Edit Metadata
+              </paper-icon-item>
+              <paper-icon-item id="copyMetadata">
+                <iron-icon icon="content-copy" item-icon></iron-icon>
+                Copy Metadata
+              </paper-icon-item>
+              <paper-icon-item id="clearMetadata">
+                <iron-icon icon="delete" item-icon></iron-icon>
+                Clear User Metadata
+              </paper-icon-item>
+            </paper-menu>
+          </paper-menu-button>
+        </paper-toolbar>
+        <div id="content">
+          <content select=".tag.add"></content>
+          <content select=".tag.remove"></content>
+          <content></content>
         </div>
-    </template>
-    <script>
-    Polymer({
-        data: undefined,
-
-        observe: {
-            'data.crc': 'onCrcChange',
-            'data.tags': 'onTagsChange',
-            'data.messages': 'onMessagesChange',
-            'data.userlist': 'onUserlistChange',
-            'data.isSearchResult' : 'onSearchResultChange',
-            'data.isMenuOpen': 'onMenuToggle'
-        },
-
-        attached: function() {
-            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);
-
-            this.addEventListener('transitionend', this.onFlipEnd, false);
-        },
-
-        detached: function() {
-            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);
-        },
-
-        dataChanged: function(oldValue, newValue) {
-            if (newValue) {
-                if (newValue.isEditorOpen) {
-                    /* Share the data with the editor. */
-                    this.shadowRoot.getElementById('editor').data = newValue;
-                }
-
-                /* Set the card flip state. */
-                if (this.classList.contains('flip') != newValue.isEditorOpen) {
-                    /* Temporarily speed up the flip effect, as otherwise fast
-                       scrolling lets the user see the end of it. */
-                    this.classList.add('fastflip');
-                    this.classList.toggle('flip');
-                }
-
-                /* Update version and CRC text */
-                this.getElementsByClassName('version')[0].textContent = this.data.getCardContent(loot.filters).version;
-                this.getElementsByClassName('crc')[0].textContent = this.data.getCardContent(loot.filters).crc;
-
-                /* Also initialise the non-simple-string data. */
-                this.onTagsChange();
-                this.onMessagesChange();
-                this.onUserlistChange();
-
-                /* Also set highlight if the conflict filter is active. */
-                this.classList.toggle('highlight', newValue.isConflictFilterChecked);
-
-                /* Set highlight if the plugin is a search result. */
-                this.onSearchResultChange(undefined, newValue.isSearchResult);
-
-                /* Update tooltip positions. */
-                var tooltips = this.shadowRoot.querySelectorAll('core-tooltip');
-                for (var i = 0; i < tooltips.length; ++i) {
-                    tooltips[i].setPosition();
-                }
-            }
-        },
-
-        updateContent: function() {
-          this.getElementsByClassName('version')[0].textContent = this.data.getCardContent(loot.filters).version;
-          this.onCrcChange();
-          this.onTagsChange();
-          this.onMessagesChange();
-        },
-
-        onCrcChange: function(oldValue, newValue) {
-          if (this.data) {
-            this.getElementsByClassName('crc')[0].textContent = this.data.getCardContent(loot.filters).crc;
-          }
-        },
-
-        onTagsChange: function(oldValue, newValue) {
-            if (this.data) {
-                var cardContent = this.data.getCardContent(loot.filters);
-                var tagsAdded = this.getElementsByClassName('tag add')[0];
-                tagsAdded.textContent = cardContent.tags.added;
-                tagsAdded.hidden = cardContent.tags.added.length === 0;
-                var tagsRemoved = this.getElementsByClassName('tag remove')[0];
-                tagsRemoved.textContent = cardContent.tags.removed;
-                tagsRemoved.hidden = cardContent.tags.removed.length === 0;
-            }
-        },
-
-        onMessagesChange: function(oldValue, newValue) {
-            if (this.data) {
-                /* First clear any existing messages. */
-                var messageUL = this.getElementsByTagName('ul')[0];
-                while(messageUL.firstElementChild) {
-                    messageUL.removeChild(messageUL.firstElementChild);
-                }
-                /* Now add new messages. */
-                var cardContent = this.data.getCardContent(loot.filters);
-                cardContent.messages.forEach(function(message) {
-                    var messageLi = document.createElement('li');
-                    messageLi.className = message.type;
-                    // Use the Marked library for Markdown formatting support.
-                    messageLi.innerHTML = marked(message.content);
-                    messageUL.appendChild(messageLi);
-                });
-                messageUL.hidden = cardContent.messages.length === 0;
-            }
-        },
-
-        onUserlistChange: function(oldValue, newValue) {
-            /* The enabled key will always be set on application of edits, even
-            if there were none to apply, so long for more than just that key. */
-            if (this.data && this.data.userlist && Object.keys(this.data.userlist).length > 1) {
-                this.setAttribute('data-edits', 'true');
-            } else {
-                this.removeAttribute('data-edits');
-            }
-        },
-
-        onSearchResultChange: function(oldValue, newValue) {
-            this.classList.toggle('search-result', newValue);
-        },
-
-        onMenuToggle: function(oldValue, newValue) {
-            if (newValue) {
-                this.style.marginBottom = '190px';
-            } else {
-                this.style.marginBottom = '0';
-            }
-        },
-
-        getName: function() {
-            return this.getElementsByTagName('h1')[0].textContent;
-        },
-
-        onFlipEnd: function(evt) {
-            /* Remove fastflip class if present. */
-            this.classList.remove('fastflip');
-
-            /* Re-calculate tooltip positions, since the flip animation tends to mess with them. */
-            this.shadowRoot.getElementById('activeTick').setPosition();
-            this.shadowRoot.getElementById('emptyPlugin').setPosition();
-            this.shadowRoot.getElementById('hasUserEdits').setPosition();
-            this.shadowRoot.getElementById('loadsArchive').setPosition();
-
-            /* Also re-calculate editor tooltip positions. */
-            this.shadowRoot.getElementById('editor').updatePolymerElements();
-
-            /* Remove the edit mode toggle if present. */
-            document.getElementById('cardsNav').removeAttribute('data-editModeToggle');
-        },
-
-        onShowEditor: function(evt) {
-            var card;
-            if (this.tagName == 'LOOT-PLUGIN-CARD') {
-                card = this;
-            } else {
-                card = getMenuItemCard(this);
-            }
-
-            /* If the editor hasn't already been opened, its data is not yet set, so do that now. */
-            if (!card.data.isEditorOpen && !card.data.editor) {
-                card.shadowRoot.getElementById('editor').data = card.data;
-                card.shadowRoot.getElementById('editor').setEditorData(card.data);
-            }
-
-            card.data.isEditorOpen = true;
-
-            /* Fire an open event, so that the UI can enter edit mode. */
-            card.dispatchEvent(new CustomEvent('loot-editor-open', {
-                bubbles: true,
-            }));
-        },
-
-        readFromEditor: function(oldData) {
-            return this.shadowRoot.getElementById('editor').readFromEditor(oldData);
-        },
-
-        onShowOnlyConflicts: function(evt) {
-            getMenuItemCard(this).data.isMenuOpen = false;
-            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,
-            }));
-        },
-    });
-
+      </section>
+      <loot-plugin-editor id="editor">
+        <h1>[[data.name]]</h1>
+        <span class="version"></span>
+        <span class="crc"></span>
+      </loot-plugin-editor>
+    </paper-material>
+  </template>
+  <script>
+    'use strict';
     function getMenuItemCard(element) {
-        while (element.parentElement) {
-            element = element.parentElement;
-        }
-        return element.parentNode.host;
+      while (element.parentElement) {
+        element = element.parentElement;
+      }
+      return element.parentNode.host;
     }
-    </script>
-</polymer-element>
+
+    Polymer({
+      is: 'loot-plugin-card',
+      properties: {
+        data: {
+          notify: true,
+          observer: '_dataChanged',
+        },
+        isActive: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        isMaster: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        isEmpty: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        loadsArchive: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        hasUserEdits: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        isSearchResult: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+      },
+
+      attached() {
+        this.$.showOnlyConflicts.addEventListener('change', this._onShowOnlyConflicts);
+        this.$.editMetadata.addEventListener('click', this.onShowEditor);
+        this.$.editor.addEventListener('loot-editor-close', this._onHideEditor);
+        this.$.copyMetadata.addEventListener('click', this._onCopyMetadata);
+        this.$.clearMetadata.addEventListener('click', this._onClearMetadata);
+
+        this.addEventListener('transitionend', this._onFlipEnd);
+      },
+
+      detached() {
+        this.$.showOnlyConflicts.removeEventListener('change', this._onShowOnlyConflicts);
+        this.$.editMetadata.removeEventListener('click', this.onShowEditor);
+        this.$.editor.removeEventListener('loot-editor-close', this._onHideEditor);
+        this.$.copyMetadata.removeEventListener('click', this._onCopyMetadata);
+        this.$.clearMetadata.removeEventListener('click', this._onClearMetadata);
+
+        this.removeEventListener('transitionend', this._onFlipEnd);
+      },
+
+      _dataChanged(newValue, oldValue) {
+        if (newValue) {
+          if (newValue.isEditorOpen) {
+            /* Record existing data. */
+            if (oldValue) {
+              oldValue.editor = this.readFromEditor(oldValue);
+            }
+            /* Share the data with the editor. */
+            this.$.editor.setEditorData(newValue);
+          }
+
+          /* Set the card flip state. */
+          if (this.classList.contains('flip') !== newValue.isEditorOpen) {
+            /* Temporarily speed up the flip effect, as otherwise fast
+               scrolling lets the user see the end of it. */
+            this.classList.add('fastflip');
+            this.classList.toggle('flip');
+          }
+
+          /* Initialise the card content data. */
+          this.updateContent();
+
+          /* Also set highlight if the conflict filter is active. */
+          this.classList.toggle('highlight', newValue.isConflictFilterChecked);
+
+          /* Set highlight if the plugin is a search result. */
+          this.classList.toggle('search-result', newValue.isSearchResult);
+        }
+      },
+
+      _setTagsContent(tags) {
+        if (tags) {
+          const tagsAdded = this.getElementsByClassName('tag add')[0];
+          tagsAdded.textContent = tags.added;
+          tagsAdded.hidden = tags.added.length === 0;
+
+          const tagsRemoved = this.getElementsByClassName('tag remove')[0];
+          tagsRemoved.textContent = tags.removed;
+          tagsRemoved.hidden = tags.removed.length === 0;
+        }
+      },
+
+      _setMessagesContent(messages) {
+        /* First clear any existing messages. */
+        const messageList = this.getElementsByTagName('ul')[0];
+        while (messageList.firstElementChild) {
+          messageList.removeChild(messageList.firstElementChild);
+        }
+
+        if (messages) {
+          /* Now add new messages. */
+          messages.forEach((message) => {
+            const messageListItem = document.createElement('li');
+            messageListItem.className = message.type;
+            // Use the Marked library for Markdown formatting support.
+            messageListItem.innerHTML = window.marked(message.content);
+            messageList.appendChild(messageListItem);
+          });
+          messageList.hidden = messages.length === 0;
+        }
+      },
+
+      updateContent() {
+        if (this.data) {
+          const cardContent = this.data.getCardContent(loot.filters);
+
+          this.getElementsByClassName('version')[0].textContent = cardContent.version;
+          this.$.editor.getElementsByClassName('version')[0].textContent = cardContent.version;
+
+          this.getElementsByClassName('crc')[0].textContent = cardContent.crc;
+          this.$.editor.getElementsByClassName('crc')[0].textContent = cardContent.crc;
+
+          this._setTagsContent(cardContent.tags);
+          this._setMessagesContent(cardContent.messages);
+
+          /* Update the conflict filter toggle state. */
+          this.$.showOnlyConflicts.checked = this.data.isConflictFilterChecked;
+
+          /* Notify that this card (may have) changed size. */
+          this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+        }
+      },
+
+      getName() {
+        return this.getElementsByTagName('h1')[0].textContent;
+      },
+
+      _onFlipEnd() {
+        /* Remove fastflip class if present. This also fires when the menu is
+           opened or closed, but that isn't an issue. */
+        this.classList.remove('fastflip');
+      },
+
+      onShowEditor() {
+        let card;
+        if (this.tagName === 'LOOT-PLUGIN-CARD') {
+          card = this;
+        } else {
+          card = getMenuItemCard(this);
+        }
+
+        /* If the editor hasn't already been opened, its data is not yet set, so do that now. */
+        if (!card.data.isEditorOpen && !card.data.editor) {
+          card.$.editor.setEditorData(card.data);
+        }
+
+        card.data.isEditorOpen = true;
+
+        card.classList.toggle('flip');
+
+        /* Fire an open event, so that the UI can enter edit mode. */
+        card.dispatchEvent(new CustomEvent('loot-editor-open', {
+          bubbles: true,
+        }));
+
+        /* Notify that this card (may have) changed size. */
+        card.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+      },
+
+      _onHideEditor() {
+        let card;
+        if (this.tagName === 'LOOT-PLUGIN-CARD') {
+          card = this;
+        } else {
+          card = getMenuItemCard(this);
+        }
+
+        /* Now hide editor. */
+        card.classList.toggle('flip');
+        card.data.isEditorOpen = false;
+
+        /* Notify that this card (may have) changed size. */
+        card.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+      },
+
+      readFromEditor(oldData) {
+        return this.$.editor.readFromEditor(oldData);
+      },
+
+      _onShowOnlyConflicts(evt) {
+        evt.target.dispatchEvent(new CustomEvent('loot-filter-conflicts', {
+          detail: evt.currentTarget.checked,
+          bubbles: true,
+        }));
+      },
+
+      _onCopyMetadata(evt) {
+        evt.target.dispatchEvent(new CustomEvent('loot-copy-metadata', {
+          bubbles: true,
+        }));
+      },
+
+      _onClearMetadata(evt) {
+        evt.target.dispatchEvent(new CustomEvent('loot-clear-metadata', {
+          bubbles: true,
+        }));
+      },
+    });
+  </script>
+</dom-module>
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index 72a3f8b5..5a37d8c2 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -303,6 +303,10 @@
       this._isDirty = dirty;
     }
 
+    get hasUserEdits() {
+      return this.userlist && Object.keys(this.userlist).length > 1;
+    }
+
     getCardContent(filters) {
       return new PluginCardContent(this, filters);
     }
diff --git a/src/tests/gui/html/elements/test_loot-plugin-card.html b/src/tests/gui/html/elements/test_loot-plugin-card.html
new file mode 100644
index 00000000..9831c540
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-plugin-card.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-plugin-card.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/iron-list/iron-list.html">
+  <link rel="import" href="../../../../../bower_components/marked-element/marked-element.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-plugin-card.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>
+  <iron-list id="pluginList" as="plugin" style="height: 500px;">
+    <template>
+      <loot-plugin-card id="[[plugin.id]]" data="{{plugin}}" is-active$="[[plugin.isActive]]"
+                                        is-empty$="[[plugin.isEmpty]]"
+                                        loads-archive$="[[plugin.loadsArchive]]"
+                                        has-user-edits$="[[plugin.hasUserEdits]]"
+                                        is-master$="[[plugin.isMaster]]"
+                                        is-search-result$="[[plugin.isSearchResult]]">
+        <h1>[[plugin.name]]</h1>
+        <span class="version"></span>
+        <span class="crc"></span>
+        <span class="tag add"></span>
+        <span class="tag remove"></span>
+        <ul>
+        </ul>
+      </loot-plugin-card>
+    </template>
+  </iron-list>
+
+
+  <script>
+    'use strict';
+    loot.filters = new loot.Filters(new loot.Translator());
+    function onEditorOpen() {
+      alert('Editor opened');
+    }
+    function onEditorClose() {
+      alert('Editor closed');
+    }
+    function onFilterConflicts() {
+      alert('Conflicts filter toggle clicked');
+    }
+    function onCopyMetadata() {
+      alert('Copy metadata button clicked');
+    }
+    function onClearMetadata() {
+      alert('Clear metadata button clicked');
+    }
+
+    const plugins = [
+      new loot.Plugin({
+        name: 'Skyrim.esm',
+        priority: -999999,
+        crc: 0xABCD,
+        version: '1.9',
+        messages: [{
+          type: 'say',
+          content: [{
+            str: 'This is a *test* note.',
+          }],
+        }, {
+          type: 'warn',
+          content: [{
+            str: 'This is a **test** warning.',
+          }],
+        }],
+      }),
+    ];
+
+    document.addEventListener('loot-editor-open', onEditorOpen);
+    document.addEventListener('loot-editor-close', onEditorClose);
+    document.addEventListener('loot-filter-conflicts', onFilterConflicts);
+    document.addEventListener('loot-copy-metadata', onCopyMetadata);
+    document.addEventListener('loot-clear-metadata', onClearMetadata);
+
+    document.getElementById('pluginList').items = plugins;
+  </script>
+</body>

From 635f01edcabeb18999b0c307f641119ad9c47960 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Sep 2015 13:52:27 +0100
Subject: [PATCH 16/62] Update index.html

---
 bower.json              |   1 +
 src/gui/html/index.html | 763 +++++++++++++++++++++++-----------------
 2 files changed, 449 insertions(+), 315 deletions(-)

diff --git a/bower.json b/bower.json
index 8ab6a081..13d1fbcb 100644
--- a/bower.json
+++ b/bower.json
@@ -14,6 +14,7 @@
     "paper-button": "PolymerElements/paper-button#^1.0.0",
     "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
     "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
+    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.0.0",
     "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0",
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index a5f92bbf..3baf1eb7 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -1,329 +1,462 @@
 <!DOCTYPE html>
 <head>
-    <meta charset="utf-8" />
-    <title>LOOT</title>
-    <link rel="stylesheet" href="css/typography.css" />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="stylesheet" href="css/material.css" />
-    <link rel="stylesheet" href="css/overrides.css" />
-    <link rel="stylesheet" href="css/theme.css" />
+  <meta charset="utf-8" />
+  <title>LOOT</title>
+  <link rel="stylesheet" href="css/typography.css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/theme.css" />
 
-    <link rel="import" href="../../../bower_components/polymer/polymer.html">
+  <link rel="import" href="native-shadow-dom.html">
 
-    <link rel="import" href="elements/editable-table.html">
-    <link rel="import" href="elements/loot-dialog.html">
-    <link rel="import" href="elements/loot-dropdown-menu.html">
-    <link rel="import" href="elements/loot-message-dialog.html">
-    <link rel="import" href="elements/loot-plugin-item.html">
-    <link rel="import" href="elements/loot-plugin-card.html">
-    <link rel="import" href="elements/loot-search.html">
+  <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-icon/core-icon.html">
-    <link rel="import" href="../../../bower_components/core-icons/core-icons.html">
-    <link rel="import" href="../../../bower_components/core-tooltip/core-tooltip.html">
-    <link rel="import" href="../../../bower_components/core-drawer-panel/core-drawer-panel.html">
-    <link rel="import" href="../../../bower_components/core-pages/core-pages.html">
-    <link rel="import" href="../../../bower_components/core-list/core-list.html">
-    <link rel="import" href="../../../bower_components/core-label/core-label.html">
+  <link rel="import" href="elements/editable-table.html">
+  <link rel="import" href="elements/loot-dropdown-menu.html">
+  <link rel="import" href="elements/loot-message-dialog.html">
+  <link rel="import" href="elements/loot-plugin-item.html">
+  <link rel="import" href="elements/loot-plugin-card.html">
+  <link rel="import" href="elements/loot-search-toolbar.html">
 
-    <link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
-    <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
-    <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-    <link rel="import" href="../../../bower_components/paper-button/paper-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-checkbox/paper-checkbox.html">
-    <link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
-    <link rel="import" href="../../../bower_components/paper-dialog/paper-dialog-transition.html">
-    <link rel="import" href="../../../bower_components/paper-dropdown/paper-dropdown.html">
-    <link rel="import" href="../../../bower_components/paper-progress/paper-progress.html">
-    <link rel="import" href="../../../bower_components/paper-toast/paper-toast.html">
-    <link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.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-list/iron-list.html">
+  <link rel="import" href="../../../bower_components/iron-pages/iron-pages.html">
+
+  <link rel="import" href="../../../bower_components/neon-animation/animations/fade-in-animation.html">
+  <link rel="import" href="../../../bower_components/neon-animation/animations/fade-out-animation.html">
+
+  <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+  <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../../bower_components/paper-button/paper-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-checkbox/paper-checkbox.html">
+  <link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
+  <link rel="import" href="../../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
+  <link rel="import" href="../../../bower_components/paper-drawer-panel/paper-drawer-panel.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-item/paper-item.html">
+  <link rel="import" href="../../../bower_components/paper-item/paper-icon-item.html">
+  <link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
+  <link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
+  <link rel="import" href="../../../bower_components/paper-progress/paper-progress.html">
+  <link rel="import" href="../../../bower_components/paper-toast/paper-toast.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">
+  <style is="custom-style">
+    div[drawer],
+    div[main] {
+      @apply(--layout-vertical);
+    }
+    #sidebarTabs {
+      @apply(--layout-self-stretch);
+    }
+    #cardsNav,
+    #filtersSpacer,
+    #hiddenPluginsTxt,
+    #hiddenMessagesTxt,
+    #toolbarSpacer,
+    #pluginCardList {
+      @apply(--layout-flex);
+    }
+    #filters,
+    div[drawer] > iron-pages,
+    #main {
+      @apply(--layout-vertical);
+      @apply(--layout-flex);
+    }
+    #hiddenPlugins,
+    #hiddenMessages {
+      @apply(--layout-horizontal);
+      @apply(--layout-center);
+    }
+    #settingsDialog > paper-dialog-scrollable > div {
+      @apply(--layout-horizontal);
+      @apply(--layout-center);
+      @apply(--layout-wrap);
+    }
+    #settingsDialog > paper-dialog-scrollable > div > div {
+      @apply(--layout-horizontal);
+      @apply(--layout-center);
+    }
+
+    /* Paper element styling.
+       Colour variables are from Polymer's paper-styles element. */
+    :root {
+      --loot-primary-color: var(--paper-indigo-500);
+      --loot-accent-color: var(--paper-blue-300);
+      --loot-dark-accent-color: var(--paper-blue-500);
+
+      --loot-primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity));
+      --loot-secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
+      --loot-disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
+      --loot-divider-color: rgba(0, 0, 0, var(--dark-divider-opacity));
+
+      --loot-dark-theme-text-color: white;
+      --loot-dark-theme-secondary-color: rgba(255, 255, 255, var(--light-secondary-opacity));
+      --loot-dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity));
+      --loot-dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity));
+
+      a,
+      #applySortButton {
+        color: var(--loot-dark-accent-color);
+      }
+
+      --paper-button: {
+        font-weight: 500;
+        font-size: 1rem;
+      }
+
+      --paper-icon-button-disabled-text: rgba(255, 255, 255, 0.30);
+      --paper-icon-button-disabled: {
+        transition: color 0.6s;
+      }
+
+      --paper-icon-item: {
+        white-space: nowrap;
+      }
+
+      --paper-input-container-input: {
+        text-overflow: ellipsis;
+      }
+      --paper-input-container-underline: {
+        background-color: var(--loot-divider-color);
+      };
+      --paper-input-container-underline-focus: {
+        background-color: var(--loot-accent-color);
+      };
+
+      paper-menu-button {
+        --paper-icon-item: {
+          font-weight: 500;
+          font-size: 1rem;
+          white-space: nowrap;
+        }
+      }
+
+      --paper-tabs-selection-bar-color: var(--loot-accent-color);
+      --paper-tab-ink: var(--loot-accent-color);
+
+      /* Prevents pop-in for the toggle button when a dropdown containing it is
+         opened. */
+      --paper-toggle-button-unchecked-button: {
+        will-change: initial;
+      }
+
+      --paper-toolbar-background: var(--loot-primary-color);
+      /*--paper-toolbar-color: var(--loot-primary-text-color);*/
+      --paper-toolbar-height: 56px;
+    }
+  </style>
 </head>
 <!-- oncontextmenu attribute disables the right-click menu. -->
-<body oncontextmenu="return false" unresolved fullbleed vertical layout >
-    <core-drawer-panel id="container" drawerWidth="33%">
-        <div drawer vertical layout>
-            <div layout horizontal end>
-                <paper-tabs id="sidebarTabs" selected="cardsNav" valueattr="data-id" flex>
-                    <paper-tab data-id="cardsNav">Plugins</paper-tab>
-                    <paper-tab data-id="filters">Filters</paper-tab>
-                </paper-tabs>
-            </div>
-            <core-pages selected="cardsNav" valueattr="id" flex>
-                <core-list  id="cardsNav" class="tab-content" flex>
-                    <template>
-                        <loot-plugin-item data-id="{{model.id}}" data="{{model}}" data-index="{{index}}">
-                            {{model.name}}
-                        </loot-plugin-item>
-                    </template>
-                    <!-- Generated <loot-plugin-item> elements go here. -->
-                </core-list>
-                <div id="filters" class="tab-content" layout vertical flex>
-                    <paper-checkbox id="hideVersionNumbers" data-class="version" label="Hide version numbers"></paper-checkbox>
-                    <paper-checkbox id="hideCRCs" data-class="crc" label="Hide CRCs"></paper-checkbox>
-                    <paper-checkbox id="hideBashTags" data-class="tag" label="Hide Bash Tags"></paper-checkbox>
-                    <paper-checkbox id="hideNotes" label="Hide notes"></paper-checkbox>
-                    <paper-checkbox id="hideDoNotCleanMessages" label="Hide 'Do not clean' messages"></paper-checkbox>
-                    <paper-checkbox id="hideAllPluginMessages" label="Hide all plugin messages"></paper-checkbox>
-                    <paper-checkbox id="hideInactivePlugins" label="Hide inactive plugins"></paper-checkbox>
-                    <paper-checkbox id="hideMessagelessPlugins" label="Hide messageless plugins"></paper-checkbox>
-                    <core-tooltip label="Press Enter or click outside the input to set the filter." position="bottom" noarrow>
-                        <paper-input id="contentFilter" label="Filter content"></paper-input>
-                    </core-tooltip>
-                    <div flex></div>
-                    <div class="divider"></div>
-                    <div center horizontal layout>
-                        <div id="hiddenPluginsTxt" flex>Hidden plugins:</div>
-                        <div><span id="hiddenPluginNo">0</span> / <span id="filterTotalPluginNo">0</span></div>
-                    </div>
-                    <div center horizontal layout>
-                        <div id="hiddenMessagesTxt" flex>Hidden messages:</div>
-                        <div><span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo">0</span></div>
-                    </div>
-                </div>
-            </core-pages>
+<body oncontextmenu="return false" unresolved>
+  <paper-drawer-panel id="container" drawer-width="33%">
+    <div drawer>
+      <paper-toolbar>
+        <paper-tabs id="sidebarTabs" selected="cardsNav" attr-for-selected="data-id" class="bottom fit">
+          <paper-tab data-id="cardsNav">Plugins</paper-tab>
+          <paper-tab data-id="filters">Filters</paper-tab>
+        </paper-tabs>
+      </paper-toolbar>
+      <iron-pages selected="cardsNav" attr-for-selected="id">
+        <iron-list id="cardsNav">
+          <template>
+            <loot-plugin-item data-id$="[[item.id]]"
+                              data-index$="[[index]]"
+                              priority="[[item.priority]]"
+                              is-priority-global$="[[item.isPriorityGlobal]]"
+                              is-editor-open$="[[item.isEditorOpen]]"
+                              has-user-edits$="[[item.hasUserEdits]]">[[item.name]]</loot-plugin-item>
+          </template>
+          <!-- Generated <loot-plugin-item> elements go here. -->
+        </iron-list>
+        <div id="filters">
+          <paper-checkbox id="hideVersionNumbers" data-class="version">Hide version numbers</paper-checkbox>
+          <paper-checkbox id="hideCRCs" data-class="crc">Hide CRCs</paper-checkbox>
+          <paper-checkbox id="hideBashTags" data-class="tag">Hide Bash Tags</paper-checkbox>
+          <paper-checkbox id="hideNotes">Hide notes</paper-checkbox>
+          <paper-checkbox id="hideDoNotCleanMessages">Hide 'Do not clean' messages</paper-checkbox>
+          <paper-checkbox id="hideAllPluginMessages">Hide all plugin messages</paper-checkbox>
+          <paper-checkbox id="hideInactivePlugins">Hide inactive plugins</paper-checkbox>
+          <paper-checkbox id="hideMessagelessPlugins">Hide messageless plugins</paper-checkbox>
+          <paper-input id="contentFilter" label="Filter content" no-label-float></paper-input>
+          <paper-tooltip for="contentFilter" position="bottom">Press Enter or click outside the input to set the filter.</paper-tooltip>
+          <div id="filtersSpacer"></div>
+          <div class="divider"></div>
+          <div id="hiddenPlugins">
+            <div id="hiddenPluginsTxt">Hidden plugins:</div>
+            <div><span id="hiddenPluginNo">0</span> / <span id="filterTotalPluginNo">0</span></div>
+          </div>
+          <div id="hiddenMessages">
+            <div id="hiddenMessagesTxt">Hidden messages:</div>
+            <div><span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo">0</span></div>
+          </div>
         </div>
-        <div main layout vertical>
-            <core-toolbar id="mainToolbar">
-                <paper-icon-button icon="menu" id="drawerToggle" core-drawer-toggle></paper-icon-button>
-                <core-tooltip label="Jump To General Information" noarrow>
-                    <paper-icon-button id="jumpToGeneralInfo" icon="home"></paper-icon-button>
-                </core-tooltip>
-                <loot-dropdown-menu id="gameMenu" class="title dark">
-                    <!-- Generated game <li> elements go here. -->
-                </loot-dropdown-menu>
-                <span flex></span>
-                <core-tooltip label="Sort Plugins" noarrow>
-                    <paper-icon-button id="sortButton" icon="sort"></paper-icon-button>
-                </core-tooltip>
-                <core-tooltip label="Update Masterlist" noarrow>
-                    <paper-icon-button id="updateMasterlistButton" icon="file-download"></paper-icon-button>
-                </core-tooltip>
-                <paper-button id="applySortButton" hidden>Apply</paper-button>
-                <paper-button id="cancelSortButton" hidden>Cancel</paper-button>
-                <core-tooltip label="Search Cards" noarrow>
-                    <paper-icon-button id="showSearch" icon="search"></paper-icon-button>
-                </core-tooltip>
-                <paper-menu-button>
-                    <paper-icon-button icon="more-vert"></paper-icon-button>
-                    <paper-dropdown class="dropdown" halign="right">
-                        <core-menu class="menu">
-                            <paper-item id="redatePluginsButton" noink>
-                                <core-icon icon="today"></core-icon>
-                                <span>Redate Plugins</span>
-                            </paper-item>
-                            <paper-item id="wipeUserlistButton" noink>
-                                <core-icon icon="delete"></core-icon>
-                                <span>Clear All User Metadata</span>
-                            </paper-item>
-                            <paper-item id="copyLoadOrderButton" noink>
-                                <core-icon icon="receipt"></core-icon>
-                                <span>Copy Load Order</span>
-                            </paper-item>
-                            <paper-item id="copyContentButton" noink>
-                                <core-icon icon="content-copy"></core-icon>
-                                <span>Copy Content</span>
-                            </paper-item>
-                            <paper-item id="refreshContentButton" noink>
-                                <core-icon icon="refresh"></core-icon>
-                                <span>Refresh Content</span>
-                            </paper-item>
-                            <div class="divider"></div>
-                            <paper-item id="settingsButton" noink>
-                                <core-icon icon="settings"></core-icon>
-                                <span>Settings</span>
-                            </paper-item>
-                            <div class="divider"></div>
-                            <paper-item id="helpButton" noink>
-                                <core-icon icon="book"></core-icon>
-                                <span>View Documentation</span>
-                            </paper-item>
-                            <paper-item id="openLogButton" noink>
-                                <core-icon icon="folder"></core-icon>
-                                <span>Open Debug Log Location</span>
-                            </paper-item>
-                            <paper-item id="aboutButton" noink>
-                                <core-icon icon="help"></core-icon>
-                                <span>About</span>
-                            </paper-item>
-                            <div class="divider"></div>
-                            <paper-item id="quitButton" noink>
-                                <core-icon icon="close"></core-icon>
-                                <span>Quit</span>
-                            </paper-item>
-                        </core-menu>
-                    </paper-dropdown>
-                </paper-menu-button>
-            </core-toolbar>
-            <loot-search id="searchBar" searchTarget="pluginCardList"></loot-search>
-            <div id="main" flex layout vertical>
-                <section id="summary">
-                    <h1>General Information</h1>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>Masterlist Revision</td>
-                                <td id="masterlistRevision">N/A</td>
-                            </tr>
-                            <tr>
-                                <td>Masterlist Date</td>
-                                <td id="masterlistDate">N/A</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>Warnings</td>
-                                <td id="totalWarningNo">0</td>
-                            </tr>
-                            <tr>
-                                <td>Errors</td>
-                                <td id="totalErrorNo">0</td>
-                            </tr>
-                            <tr>
-                                <td>Total Messages</td>
-                                <td id="totalMessageNo">0</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>Active Plugins</td>
-                                <td id="activePluginNo">0</td>
-                            </tr>
-                            <tr>
-                                <td>Dirty Plugins</td>
-                                <td id="dirtyPluginNo">0</td>
-                            </tr>
-                            <tr>
-                                <td>Total Plugins</td>
-                                <td id="totalPluginNo">0</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <ul>
-                        <!-- Generated message <li> elements go here. -->
-                    </ul>
-                </section>
-                <core-list id="pluginCardList" flex>
-                    <template>
-                        <loot-plugin-card data="{{model}}" id="{{model.id}}" data-active="{{model.isActive}}" data-empty="{{model.isEmpty}}" data-archive="{{model.loadsArchive}}" data-master="{{model.isMaster}}">
-                            <h1>{{model.name}}</h1>
-                            <span class="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>
-        </div>
-    </core-drawer-panel>
-    <paper-toast id="toast"></paper-toast>
-    <loot-dialog id="progressDialog">
-        <paper-progress indeterminate></paper-progress>
-        <p>Calculating the last digit of &pi;...</p>
-    </loot-dialog>
-
-    <loot-dialog id="about" heading="About LOOT">
-        <p>Version <span id="LOOTVersion"></span> (build <span id="LOOTBuild"></span>)</p>
-        <p>Load order optimisation for Oblivion, Skyrim, Fallout 3, Fallout: New Vegas and Fallout 4.</p>
-        <p><a href="http://loot.github.io">http://loot.github.io</a></p>
-        <p>LOOT is free, but if you want to show your appreciation with some money, donations may be made to WrinklyNinja (LOOT's creator and main developer) using <a href="https://www.paypal.me/OliverHamlet">PayPal</a> or <a href="https://wrinklyninja.github.io/bitcoin/">Bitcoin</a>.</p>
-        <p>Copyright &copy; 2012&ndash;2016 WrinklyNinja</p>
-        <blockquote>
-            LOOT is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or any later version.
-
-            LOOT is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
-
-            You should have received a copy of the GNU General Public License along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
-        </blockquote>
-        <paper-button affirmative autofocus>OK</paper-button>
-    </loot-dialog>
-
-    <loot-dialog id="settingsDialog" heading="Settings" closeSelector="">
-        <div layout horizontal center wrap>
-            <div center horizontal layout>
-                <div>Default Game</div>
-                <loot-dropdown-menu id="defaultGameSelect">
-                    <paper-item value="auto" noink>Autodetect</paper-item>
-                    <!-- Game <option> elements go here. -->
-                </loot-dropdown-menu>
-            </div>
-            <div center horizontal layout>
-                <core-tooltip label="Language changes will be applied after LOOT is restarted." noarrow>
-                    Language
-                </core-tooltip>
-                <loot-dropdown-menu id="languageSelect">
-                    <!-- Language <option> elements go here. -->
-                </loot-dropdown-menu>
-            </div>
-            <core-tooltip label="The output is logged to the LOOTDebugLog.txt file." noarrow>
-                <core-label center horizontal layout>
-                    <div>Enable debug logging</div>
-                    <paper-toggle-button id="enableDebugLogging" for></paper-toggle-button>
-                </core-label>
-            </core-tooltip>
-            <core-label center horizontal layout>
-                <div>Update masterlist before sorting</div>
-                <paper-toggle-button id="updateMasterlist" for></paper-toggle-button>
-            </core-label>
-        </div>
-        <table is="editable-table" id="gameTable" data-template="gameRow">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Base Game</th>
-                    <th>LOOT Folder</th>
-                    <th>Master File</th>
-                    <th>Masterlist Repository URL</th>
-                    <th>Masterlist Repository Branch</th>
-                    <th>Install Path</th>
-                    <th>Install Path Registry Key</th>
-                    <th></th>
-                </tr>
-            </thead>
+      </iron-pages>
+    </div>
+    <div main>
+      <paper-toolbar id="mainToolbar">
+        <paper-icon-button icon="menu" id="drawerToggle" paper-drawer-toggle></paper-icon-button>
+        <paper-icon-button id="jumpToGeneralInfo" icon="home"></paper-icon-button>
+        <paper-tooltip for="jumpToGeneralInfo">Jump To General Information</paper-tooltip>
+        <loot-dropdown-menu id="gameMenu" class="dark">
+          <!-- Generated game <li> elements go here. -->
+        </loot-dropdown-menu>
+        <!-- right-align the rest of the toolbar items. -->
+        <span id="toolbarSpacer"></span>
+        <paper-icon-button id="sortButton" icon="sort"></paper-icon-button>
+        <paper-tooltip for="sortButton">Sort Plugins</paper-tooltip>
+        <paper-icon-button id="updateMasterlistButton" icon="file-download"></paper-icon-button>
+        <paper-tooltip for="updateMasterlistButton">Update Masterlist</paper-tooltip>
+        <paper-button id="applySortButton" hidden>Apply</paper-button>
+        <paper-button id="cancelSortButton" hidden>Cancel</paper-button>
+        <paper-icon-button id="showSearch" icon="search"></paper-icon-button>
+        <paper-tooltip for="showSearch">Search Cards</paper-tooltip>
+        <paper-menu-button horizontal-align="right">
+          <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
+          <paper-menu class="dropdown-content">
+            <paper-icon-item id="redatePluginsButton">
+              <iron-icon icon="today" item-icon></iron-icon>
+              Redate Plugins
+            </paper-icon-item>
+            <paper-icon-item id="wipeUserlistButton">
+              <iron-icon icon="delete" item-icon></iron-icon>
+              Clear All User Metadata
+            </paper-icon-item>
+            <paper-icon-item id="copyLoadOrderButton">
+              <iron-icon icon="receipt" item-icon></iron-icon>
+              Copy Load Order
+            </paper-icon-item>
+            <paper-icon-item id="copyContentButton">
+              <iron-icon icon="content-copy" item-icon></iron-icon>
+              Copy Content
+            </paper-icon-item>
+            <paper-icon-item id="refreshContentButton">
+              <iron-icon icon="refresh" item-icon></iron-icon>
+              Refresh Content
+            </paper-icon-item>
+            <div class="divider"></div>
+            <paper-icon-item id="settingsButton">
+              <iron-icon icon="settings" item-icon></iron-icon>
+              Settings
+            </paper-icon-item>
+            <div class="divider"></div>
+            <paper-icon-item id="helpButton">
+              <iron-icon icon="book" item-icon></iron-icon>
+              View Documentation
+            </paper-icon-item>
+            <paper-icon-item id="openLogButton">
+              <iron-icon icon="folder" item-icon></iron-icon>
+              Open Debug Log Location
+            </paper-icon-item>
+            <paper-icon-item id="aboutButton">
+              <iron-icon icon="help" item-icon></iron-icon>
+              About
+            </paper-icon-item>
+            <div class="divider"></div>
+            <paper-icon-item id="quitButton">
+              <iron-icon icon="close" item-icon></iron-icon>
+              Quit
+            </paper-icon-item>
+          </paper-menu>
+        </paper-menu-button>
+      </paper-toolbar>
+      <loot-search-toolbar id="searchBar"></loot-search-toolbar>
+      <div id="main">
+        <paper-material id="summary">
+          <h1>General Information</h1>
+          <table>
             <tbody>
-                <!-- Game rows go here. -->
+              <tr>
+                <td>Masterlist Revision</td>
+                <td id="masterlistRevision">N/A</td>
+              </tr>
+              <tr>
+                <td>Masterlist Date</td>
+                <td id="masterlistDate">N/A</td>
+              </tr>
             </tbody>
-        </table>
-        <paper-button class="accept" affirmative autofocus>Apply</paper-button>
-        <paper-button class="cancel" dismissive>Cancel</paper-button>
-    </loot-dialog>
+          </table>
+          <table>
+            <tbody>
+              <tr>
+                <td>Warnings</td>
+                <td id="totalWarningNo">0</td>
+              </tr>
+              <tr>
+                <td>Errors</td>
+                <td id="totalErrorNo">0</td>
+              </tr>
+              <tr>
+                <td>Total Messages</td>
+                <td id="totalMessageNo">0</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <tbody>
+              <tr>
+                <td>Active Plugins</td>
+                <td id="activePluginNo">0</td>
+              </tr>
+              <tr>
+                <td>Dirty Plugins</td>
+                <td id="dirtyPluginNo">0</td>
+              </tr>
+              <tr>
+                <td>Total Plugins</td>
+                <td id="totalPluginNo">0</td>
+              </tr>
+            </tbody>
+          </table>
+          <ul>
+            <!-- Generated message <li> elements go here. -->
+          </ul>
+        </paper-material>
+        <iron-list id="pluginCardList" as="plugin">
+          <template>
+            <loot-plugin-card id="[[plugin.id]]"
+                              data="[[plugin]]">
+              <h1>[[plugin.name]]</h1>
+              <span class="version"></span>
+              <span class="crc"></span>
+              <span class="tag add"></span>
+              <span class="tag remove"></span>
+              <ul>
+                <!-- Messages go here. -->
+              </ul>
+            </loot-plugin-card>
+          </template>
+          <!-- Generated <loot-plugin-card> elements go here. -->
+        </iron-list>
+      </div>
+    </div>
+  </paper-drawer-panel>
+  <paper-toast id="toast"></paper-toast>
+  <paper-dialog id="progressDialog"
+                modal
+                entry-animation="fade-in-animation"
+                exit-animation="fade-out-animation">
+    <div><paper-progress indeterminate></paper-progress></div>
+    <p>Calculating the last digit of &pi;...</p>
+  </paper-dialog>
 
-    <loot-dialog id="firstRun" heading="First-Time Tips">
-        <p>This appears to be the first time you have run LOOT v<span id="firstTimeLootVersion"></span>. Here are some tips to help you get started with the interface.</p>
-        <ul>
-            <li>Click <core-icon icon="more-vert"></core-icon> buttons to open menus.</li>
-            <li>As well as messages, LOOT displays plugin <span class="version">version numbers</span>, <span class="crc">CRCs</span> and Bash Tag suggestions for <span class="tag add">addition</span> and <span class="tag remove">removal</span>.</li>
-            <li>CRCs are only displayed after plugins have been loaded, either by conflict filtering, or by sorting.</li>
-            <li>Double-click a plugin in the sidebar to quickly open its metadata editor. Multiple metadata editors can be opened at once.</li>
-            <li>Plugins can be drag and dropped from the sidebar into editors' "load after, "requirements" and "incompatibility" tables.</li>
-            <li>Some features are disabled while there is an editor open, or while there is a sorted load order that has not been applied or discarded.</li>
-            <li>Many interface elements have tooltips. If you don't know what something is, try hovering your mouse over it to find out. Otherwise, LOOT's documentation can be accessed through the main menu.</li>
-        </ul>
+  <paper-dialog id="about"
+                modal
+                entry-animation="fade-in-animation"
+                exit-animation="fade-out-animation">
+    <h2>About LOOT</h2>
+    <paper-dialog-scrollable>
+      <p>Version <span id="LOOTVersion"></span> (build <span id="LOOTBuild"></span>)</p>
+      <p>Load order optimisation for Oblivion, Skyrim, Fallout 3, Fallout: New Vegas and Fallout 4.</p>
+      <p><a href="http://loot.github.io">http://loot.github.io</a></p>
+      <p>LOOT is free, but if you want to show your appreciation with some money, donations may be made to WrinklyNinja (LOOT's creator and main developer) using <a href="https://www.paypal.me/OliverHamlet">PayPal</a> or <a href="https://wrinklyninja.github.io/bitcoin/">Bitcoin</a>.</p>
+      <p>Copyright &copy; 2012&ndash;2015 WrinklyNinja</p>
+      <blockquote>
+        LOOT is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or any later version.
 
-        <p>LOOT is free, but if you want to show your appreciation with some money, donations may be made to WrinklyNinja (LOOT's creator and main developer) using <a href="https://www.paypal.me/OliverHamlet">PayPal</a> or <a href="https://wrinklyninja.github.io/bitcoin/">Bitcoin</a>.</p>
-        <paper-button affirmative autofocus>OK</paper-button>
-    </loot-dialog>
-    <script src="../../../bower_components/marked/lib/marked.js"></script>
-    <script src="../../../bower_components/Jed/jed.js"></script>
-    <script src="../../../bower_components/jed-gettext-parser/jedGettextParser.js"></script>
-    <script src="js/dialog.js"></script>
-    <script src="js/dom.js"></script>
-    <script src="js/events.js"></script>
-    <script src="js/filters.js"></script>
-    <script src="js/game.js"></script>
-    <script src="js/helpers.js"></script>
-    <script src="js/l10n.js"></script>
-    <script src="js/plugin.js"></script>
-    <script src="js/query.js"></script>
-    <script src="js/translator.js"></script>
-    <script src="js/init.js"></script>
+        LOOT is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+        You should have received a copy of the GNU General Public License along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
+      </blockquote>
+    </paper-dialog-scrollable>
+    <div class="buttons">
+      <paper-button dialog-confirm autofocus>OK</paper-button>
+    </div>
+  </paper-dialog>
+
+  <paper-dialog id="settingsDialog"
+                modal
+                entry-animation="fade-in-animation"
+                exit-animation="fade-out-animation">
+    <h2>Settings</h2>
+    <paper-dialog-scrollable>
+      <div>
+        <div>
+          <div>Default Game</div>
+          <loot-dropdown-menu id="defaultGameSelect">
+            <paper-item value="auto">Autodetect</paper-item>
+            <!-- Game <option> elements go here. -->
+          </loot-dropdown-menu>
+        </div>
+        <div>
+          <span id="languageLabel">Language</span>
+          <paper-tooltip for="languageLabel">Language changes will be applied after LOOT is restarted.</paper-tooltip>
+          <loot-dropdown-menu id="languageSelect">
+            <!-- Language <option> elements go here. -->
+          </loot-dropdown-menu>
+        </div>
+        <div>
+          <div>Enable debug logging</div>
+          <paper-toggle-button id="enableDebugLogging"></paper-toggle-button>
+          <paper-tooltip>The output is logged to the LOOTDebugLog.txt file.</paper-tooltip>
+        </div>
+        <div>
+          <div>Update masterlist before sorting</div>
+          <paper-toggle-button id="updateMasterlist"></paper-toggle-button>
+        </div>
+      </div>
+      <table is="editable-table" id="gameTable" data-template="gameRow">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Base Game</th>
+            <th>LOOT Folder</th>
+            <th>Master File</th>
+            <th>Masterlist Repository URL</th>
+            <th>Masterlist Repository Branch</th>
+            <th>Install Path</th>
+            <th>Install Path Registry Key</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Game rows go here. -->
+        </tbody>
+      </table>
+    </paper-dialog-scrollable>
+    <div class="buttons">
+      <paper-button class="cancel" dialog-dismiss>Cancel</paper-button>
+      <paper-button class="accept" dialog-confirm autofocus>Apply</paper-button>
+    </div>
+  </paper-dialog>
+
+  <paper-dialog id="firstRun"
+                modal
+                entry-animation="fade-in-animation"
+                exit-animation="fade-out-animation">
+    <h2>First-Time Tips</h2>
+    <p>This appears to be the first time you have run LOOT v<span id="firstTimeLootVersion"></span>. Here are some tips to help you get started with the interface.</p>
+    <ul>
+      <li>Click <iron-icon icon="more-vert"></iron-icon> buttons to open menus.</li>
+      <li>As well as messages, LOOT displays plugin <span class="version">version numbers</span>, <span class="crc">CRCs</span> and Bash Tag suggestions for <span class="tag add">addition</span> and <span class="tag remove">removal</span>.</li>
+      <li>CRCs are only displayed after plugins have been loaded, either by conflict filtering, or by sorting.</li>
+      <li>Double-click a plugin in the sidebar to quickly open its metadata editor. Multiple metadata editors can be opened at once.</li>
+      <li>Plugins can be drag and dropped from the sidebar into editors' "load after, "requirements" and "incompatibility" tables.</li>
+      <li>Some features are disabled while there is an editor open, or while there is a sorted load order that has not been applied or discarded.</li>
+      <li>Many interface elements have tooltips. If you don't know what something is, try hovering your mouse over it to find out. Otherwise, LOOT's documentation can be accessed through the main menu.</li>
+    </ul>
+    <p>LOOT is free, but if you want to show your appreciation with some money, donations may be made to WrinklyNinja (LOOT's creator and main developer) using <a href="https://www.paypal.me/OliverHamlet">PayPal</a> or <a href="https://wrinklyninja.github.io/bitcoin/">Bitcoin</a>.</p>
+    <div class="buttons">
+      <paper-button dialog-confirm autofocus>OK</paper-button>
+    </div>
+  </paper-dialog>
+  <script src="../../../bower_components/marked/lib/marked.js"></script>
+  <script src="../../../bower_components/Jed/jed.js"></script>
+  <script src="../../../bower_components/jed-gettext-parser/jedGettextParser.js"></script>
+  <script src="js/dialog.js"></script>
+  <script src="js/dom.js"></script>
+  <script src="js/events.js"></script>
+  <script src="js/filters.js"></script>
+  <script src="js/game.js"></script>
+  <script src="js/helpers.js"></script>
+  <script src="js/l10n.js"></script>
+  <script src="js/plugin.js"></script>
+  <script src="js/query.js"></script>
+  <script src="js/translator.js"></script>
+  <script src="js/init.js"></script>
 </body>

From a8edb85f1b9176f834b20cdea77d4eaaecfc7e47 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 18:30:00 +0000
Subject: [PATCH 17/62] Update CSS

---
 src/gui/html/css/material.css   | 110 --------------------------------
 src/gui/html/css/overrides.css  |  92 --------------------------
 src/gui/html/css/style.css      |  89 +++++++++-----------------
 src/gui/html/css/typography.css |  76 +---------------------
 4 files changed, 32 insertions(+), 335 deletions(-)
 delete mode 100644 src/gui/html/css/material.css
 delete mode 100644 src/gui/html/css/overrides.css

diff --git a/src/gui/html/css/material.css b/src/gui/html/css/material.css
deleted file mode 100644
index 9bd464cb..00000000
--- a/src/gui/html/css/material.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/* This file contains the CSS overrides for Polymer elements necessary for them
-   to better match the Material Design spec. */
-
-/* core-tooltip */
-html /deep/ core-tooltip::shadow .core-tooltip {
-   font-size: 0.714rem;
-   font-family: Roboto, sans-serif;
-   font-weight: 500;
-   background-color: rgba(0, 0, 0, 0.9);
-}
-
-/* paper-button */
-html /deep/ paper-button {
-   min-width: 88px;
-   height: 36px;
-   line-height: 36px;
-   margin: 6px 4px;
-}
-html /deep/ paper-button::shadow .button-content {
-   padding: 0 8px;
-}
-html /deep/ paper-button::shadow .button-content ::content a {
-   margin: 0 -8px;
-   padding: 0 8px;
-   -ms-flex: 1 1 auto;
-}
-
-/* paper-icon-button */
-html /deep/ paper-icon-button[disabled] {
-    color: rgba(255, 255, 255, 0.30);
-}
-
-/* paper-item */
-html /deep/ paper-item, html /deep/ core-menu > paper-item {
-   color: rgba(0, 0, 0, 0.87);
-   height: 48px;
-   line-height: 48px;
-}
-html /deep/ paper-item[disabled]  {
-    color: rgba(0, 0, 0, 0.26);
-}
-html /deep/ paper-item core-icon {
-   margin-right: 32px;
-   color: rgba(0, 0, 0, 0.54);
-}
-html /deep/ paper-item[disabled] > core-icon {
-    color: rgba(0, 0, 0, 0.26);
-}
-html /deep/ paper-item::shadow .button-content {
-   padding: 0 16px;
-}
-html /deep/ paper-item::shadow .button-content ::content *:not(core-tooltip) {
-   white-space: nowrap;
-   text-overflow: ellipsis;
-   overflow: hidden;
-}
-html /deep/ paper-item::shadow .button-content ::content a {
-   margin: 0 -16px;
-   padding: 0 16px;
-   -ms-flex: 1 1 auto;
-}
-
-/* paper-input-decorator & input */
-html /deep/ paper-input-decorator {
-   margin: 0 4px;
-}
-html /deep/ paper-input-decorator::shadow .underline .unfocused-underline {
-   background-color: rgba(0, 0, 0, 0.12);
-}
-html /deep/ paper-input-decorator[disabled]::shadow .underline {
-    border-bottom-color: rgba(0, 0, 0, 0.12);
-}
-html /deep/ paper-input-decorator::shadow .label-text,
-html /deep/ input::-webkit-input-placeholder {
-   color: rgba(0, 0, 0, 0.26);
-}
-html /deep/ ::-moz-placeholder {
-   opacity:  1 !important;
-   color: rgba(0, 0, 0, 0.26) !important;
-}
-html /deep/ :-ms-input-placeholder {
-   color: rgba(0, 0, 0, 0.26) !important;
-}
-html /deep/ input {
-   text-overflow: ellipsis;
-}
-
-/* paper-dropdown */
-html /deep/ paper-dropdown > core-menu {
-   margin: 8px 0;
-}
-html /deep/ paper-dropdown .core-selected {
-   background-color: inherit;
-}
-
-/* paper-tabs */
-html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button {
-    vertical-align: middle;
-    color: rgba(0, 0, 0, 0.54);
-}
-
-/* paper-tab */
-html /deep/ paper-tab::shadow .tab-content {
-    line-height: 48px;
-}
-
-/* core-drawer-panel */
-core-drawer-panel::shadow .narrow-layout #drawer {
-   width: calc(100vw - 56px) !important;
-}
diff --git a/src/gui/html/css/overrides.css b/src/gui/html/css/overrides.css
deleted file mode 100644
index aa5a1597..00000000
--- a/src/gui/html/css/overrides.css
+++ /dev/null
@@ -1,92 +0,0 @@
-/* These styles override Polymer's own internal styling for certain elements to
-   suit LOOT's needs. */
-
-/* Transition icon button colour over same time period that plugin cards flip. */
-paper-icon-button[disabled] {
-    transition: color 0.6s;
-}
-/* This override change the positioning of the progress dialog to adapt to content changes. */
-#progressDialog {
-    position: inherit !important;
-    margin: 0 auto;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
-/* This makes checkboxes have the same padding as icons in lists. */
-html /deep/ core-menu paper-checkbox::shadow #checkboxLabel {
-    padding-left: 32px;
-}
-/* Set the sidebar checkboxes to have balanced padding on either side. 32px
-   makes the label just seem too far away. */
-#filters paper-checkbox::shadow #checkboxLabel {
-    padding-left: 16px;
-}
-/* Set the underline colour of focussed paper inputs. */
-html /deep/ paper-input-decorator::shadow .underline .focused-underline {
-    /* line color when the input is focused */
-    background-color: #64B5F6;
-}
-/* Set the tab colours. */
-html /deep/ paper-tabs::shadow #selectionBar {
-    background-color: #64B5F6;
-}
-html /deep/ paper-tab::shadow #ink {
-    color: #64B5F6;
-}
-/* Set the paper tab scroll buttons so they don't cause the cursor to display as
-   as a pointer when they are disabled. */
-html /deep/ paper-tabs::shadow .scroll-button .hidden {
-    pointer-events: none;
-}
-/* Set the drawer z-index so that it doesn't appear below plugin cards. */
-core-drawer-panel::shadow #drawer {
-    /* max-width disabled because the panel doesn't shift over when the max
-    is reached, due to the percentage drawer width, and setting it to a
-    constant 400px is too wide in many window sizes. */
-    /*max-width: 400px;*/
-    z-index: 1;
-}
-/* Align dropdown label text with the descriptive text beside it. */
-#settingsDialog loot-dropdown-menu::shadow paper-dropdown-menu {
-    padding-top: 4px;
-}
-/* Add a transition to the core-tooltip tooltips. */
-html /deep/ core-tooltip::shadow .core-tooltip {
-    opacity: 0;
-    transition: opacity 0.3s, visibility 0s 0.3s;
-}
-html /deep/ core-tooltip:hover:not([disabled])::shadow .core-tooltip {
-    opacity: 1;
-    transition-delay: 0s;
-}
-
-/* The max-height doesn't allow for expansion into newly-created scroll space. */
-#main /deep/ paper-dropdown::shadow #scroller {
-    max-height: none !important;
-}
-
-/* Don't center the "Jump to General Information" or active plugin tooltips, as
-   they can get cut off by the sidebar. */
-#drawerToggle + core-tooltip::shadow #tooltip,
-loot-plugin-card /deep/ #activeTick::shadow #tooltip {
-    left: inherit !important;
-}
-
-/* Style the paper-checkbox background. */
-html /deep/ paper-checkbox::shadow #checkbox.checked {
-    border-color: #3F51B5;
-    background-color: #3F51B5;
-}
-
-/* Style the paper-toggle-button colours. */
-html /deep/ paper-toggle-button::shadow [checked] .toggle-bar {
-    background-color: rgba(63, 81, 181, 0.5);
-}
-html /deep/ paper-toggle-button::shadow [checked] .toggle-button {
-    background-color: #3F51B5;
-}
-html /deep/ paper-toggle-button::shadow [checked] .toggle-ink {
-    color: #3F51B5;
-}
diff --git a/src/gui/html/css/style.css b/src/gui/html/css/style.css
index d2a94c52..a687df0e 100644
--- a/src/gui/html/css/style.css
+++ b/src/gui/html/css/style.css
@@ -23,9 +23,6 @@
 */
 
 /* Misc */
-html /deep/ paper-button[autofocus] {
-    color: #64B5F6;
-}
 a {
     color: #2196F3;
     text-decoration: none;
@@ -38,11 +35,6 @@ tt, code, kbd, samp {
 }
 
 /* App bar */
-core-toolbar, div[drawer] > div:first-child {
-    background: #3F51B5;
-    color: white;
-    height: 56px;
-}
 #mainToolbar,
 #searchBar {
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
@@ -52,13 +44,6 @@ core-toolbar, div[drawer] > div:first-child {
 #mainToolbar.search {
     display: none;
 }
-#gameMenu {
-    margin-top: -0.5em;
-}
-#drawerToggle, #applySortButton, #cancelSortButton {
-    position: relative;
-    top: -3px;
-}
 #applySortButton {
     color: #2196F3;
     background-color: white;
@@ -71,55 +56,44 @@ div[drawer] {
 div[drawer] > * {
     border-right: 1px rgba(0, 0, 0, 0.12) solid;
 }
-paper-item > a {
-    -webkit-user-drag: none;
-    color: inherit;
+div[drawer] > iron-pages {
+  overflow: auto;
 }
-paper-item > a:hover {
-    text-decoration: none;
-}
-#cardsNav[data-editModeToggle] > loot-plugin-item {
-    transition: transform 0.6s;
-}
-#cardsNav > loot-plugin-item {
-    margin: 8px 0;
-}
-#contentFilter {
-    display: block;
-    line-height: initial;
+#cardsNav {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 #filters {
     padding: 8px 0;
-    overflow: hidden;
+    overflow: auto;
 }
 #filters > paper-checkbox,
-#filters > core-tooltip,
-#filters > div:not(.divider) {
+#hiddenPlugins,
+#hiddenMessages {
     padding: 0 16px;
     height: 48px;
     line-height: 48px;
 }
-#filters > paper-checkbox,
-#filters > core-tooltip {
-    display: block;
+#contentFilter {
+    padding: 0 16px;
+    height: 48px;
 }
 
 /* Panel */
 #main {
-    background: #EEE;
+    background-color: #fafafa;
     overflow: auto;
     position: relative;
     z-index: 0;
 }
-#main > core-list {
+#main > iron-list {
     transform-style: preserve-3d;
+    margin-bottom: 170px;
 }
 #summary {
-    background: white;
+    background-color: white;
     margin: 8px;
     padding: 16px;
-    border-radius: 2px;
-    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
 }
 #summary > h1 {
     margin: -16px 0 0;
@@ -132,6 +106,7 @@ paper-item > a:hover {
     margin-right: 32px;
     width: auto;
     background-color: inherit;
+    border-collapse: collapse;
 }
 #summary > table:last-child {
     margin-right: 0;
@@ -167,28 +142,25 @@ li.warn {
 
 /* Dialogs */
 #about {
-    max-width: 580px;
+    max-width: 550px;
 }
 #about blockquote {
     white-space: pre-line;
 }
-#settingsDialog > div > * {
+#settingsDialog > paper-dialog-scrollable > div > * {
     margin: 16px;
 }
-#settingsDialog > div > div > :first-child {
+#settingsDialog > paper-dialog-scrollable > div > div > :first-child {
     margin-right: 16px;
     margin-left: 0;
 }
-#settingsDialog > div > :last-child {
+#settingsDialog > paper-dialog-scrollable > div > :last-child {
     margin-right: 0;
 }
-#settingsDialog core-label [for]:last-child {
-    margin-left: 16px;
-}
 #gameTable {
     margin: 32px 0 0;
 }
-paper-progress {
+#progressDialog paper-progress {
     width: 100%;
 }
 
@@ -199,16 +171,13 @@ paper-progress {
     margin-top: -1px;
 }
 
-/* Tables */
-html /deep/ table {
-    border-collapse: collapse;
-    width: 100%;
+/* Hack for the squashing of icons when text is not wrapped, due to the use of
+   flex display. See <https://github.com/PolymerElements/paper-item/issues/71> */
+paper-icon-item iron-icon {
+  margin-right: 32px;
 }
-html /deep/ table td, html /deep/ table th {
-    vertical-align: top;
-    text-align: left;
-    padding: 8px 16px;
-}
-html /deep/ table th {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+/* Set icons to use Material Design colouring. */
+iron-icon {
+    color: rgba(0, 0, 0, 0.54);
 }
diff --git a/src/gui/html/css/typography.css b/src/gui/html/css/typography.css
index f21c2e57..44a62702 100644
--- a/src/gui/html/css/typography.css
+++ b/src/gui/html/css/typography.css
@@ -125,80 +125,10 @@ html {
     font-weight: 400;
     text-rendering: optimizeLegibility;
 }
-.display4 {
-    font-weight: 300;
-    font-size: 8rem;
+h1 {
+    font-weight: 400;
     color: rgba(0, 0, 0, 0.54);
-    /*letter-spacing: -0.01em;*/
 }
-.display3 {
-    font-weight: 400;
-    font-size: 4rem;
-    color: rgba(0, 0, 0, 0.54);
-    /*letter-spacing: -0.005em;*/
-}
-.display2, h1 {
-    font-weight: 400;
-    font-size: 3.214rem;
-    color: rgba(0, 0, 0, 0.54);
-    line-height: 1.067;
-}
-.display1 {
-    font-weight: 400;
-    font-size: 2.429rem;
-    color: rgba(0, 0, 0, 0.54);
-    line-height: 1.176;
-}
-.headline, h2 {
-    font-weight: 400;
-    font-size: 1.714rem;
-    line-height: 1.333;
-}
-.title, h3 {
-    font-weight: 500;
-    font-size: 1.429rem;
-    /*letter-spacing: 0.005em;*/
-}
-.subhead, h4,
-#summary > h1,
-html /deep/ paper-item {
-    font-weight: 400;
+#summary > h1 {
     font-size: 1.143rem;
-    line-height: 1.75;
-    /* Alternate line height: */
-    /* line-height: 1.5; */
-    /*letter-spacing: 0.01em;*/
-}
-.body2,
-html /deep/ paper-menu-button paper-item,
-html /deep/ paper-menu-button paper-checkbox {
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1.714;
-    /*letter-spacing: 0.01em;*/
-}
-.body1,
-html /deep/ paper-checkbox,
-paper-toast {
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.429;
-    /*letter-spacing: 0.01em;*/
-}
-.caption {
-    font-weight: 400;
-    font-size: 0.857rem;
-    color: rgba(0, 0, 0, 0.54);
-    /*letter-spacing: 0.02em;*/
-}
-.button,
-html /deep/ paper-tab,
-html /deep/ paper-button {
-    font-weight: 500;
-    font-size: 1rem;
-    text-transform: uppercase;
-    /*letter-spacing: 0.01em;*/
-}
-.display4.dark, .display3.dark, .display2.dark, .display1.dark, .caption.dark {
-    color: rgba(255, 255, 255, 0.7);
 }

From 71c4abaab88bea38b2a8e9d9246190a163e2ae41 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 18:45:20 +0000
Subject: [PATCH 18/62] Update dialog.js for progress dialog API change

---
 src/gui/html/js/dialog.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/gui/html/js/dialog.js b/src/gui/html/js/dialog.js
index e83f2243..f515db02 100644
--- a/src/gui/html/js/dialog.js
+++ b/src/gui/html/js/dialog.js
@@ -14,29 +14,34 @@
       const progressDialog = document.getElementById('progressDialog');
       progressDialog.getElementsByTagName('p')[0].textContent = text;
       if (!progressDialog.opened) {
-        progressDialog.showModal();
+        progressDialog.open();
+      } else {
+        progressDialog.center();
       }
     }
 
     static closeProgress() {
       const progressDialog = document.getElementById('progressDialog');
       if (progressDialog.opened) {
+        /* Center before closing so that when it is re-opened it does so in the
+           correct position. */
+        progressDialog.center();
         progressDialog.close();
       }
     }
 
     static showMessage(title, text) {
       const dialog = document.createElement('loot-message-dialog');
+      document.body.appendChild(dialog);
       dialog.setDismissable(false);
       dialog.showModal(title, text);
-      document.body.appendChild(dialog);
     }
 
     static askQuestion(title, text, confirmText, closeCallback) {
       const dialog = document.createElement('loot-message-dialog');
+      document.body.appendChild(dialog);
       dialog.setConfirmText(confirmText);
       dialog.showModal(title, text, closeCallback);
-      document.body.appendChild(dialog);
     }
 
     static showNotification(text) {

From 34c721763a24fbe5b2aef90ef0325f85d0941de1 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 21:29:03 +0000
Subject: [PATCH 19/62] Update l10n.js for DOM changes

---
 src/gui/html/js/l10n.js | 232 ++++++++++++++++------------------------
 1 file changed, 93 insertions(+), 139 deletions(-)

diff --git a/src/gui/html/js/l10n.js b/src/gui/html/js/l10n.js
index ca3ff8f2..7b860ce2 100644
--- a/src/gui/html/js/l10n.js
+++ b/src/gui/html/js/l10n.js
@@ -12,20 +12,15 @@
 }(this, () => {
   function translatePluginCardTemplate(l10n) {
     /* Plugin card template. */
-    let pluginCard = document.querySelector('link[rel="import"][href$="loot-plugin-card.html"]');
-    if (pluginCard) {
-      pluginCard = pluginCard.import.querySelector('template').content;
-    } else {
-      pluginCard = document.querySelector('polymer-element[name="loot-plugin-card"]').querySelector('template').content;
-    }
+    const pluginCard = document.getElementById('loot-plugin-card').querySelector('template').content;
 
-    pluginCard.getElementById('activeTick').setAttribute('label', l10n.translate('Active Plugin'));
-    pluginCard.getElementById('isMaster').setAttribute('label', l10n.translate('Master File'));
-    pluginCard.getElementById('emptyPlugin').setAttribute('label', l10n.translate('Empty Plugin'));
-    pluginCard.getElementById('loadsArchive').setAttribute('label', l10n.translate('Loads Archive'));
-    pluginCard.getElementById('hasUserEdits').setAttribute('label', l10n.translate('Has User Metadata'));
+    pluginCard.querySelector('paper-tooltip[for=activeTick]').textContent = l10n.translate('Active Plugin');
+    pluginCard.querySelector('paper-tooltip[for=isMaster]').textContent = l10n.translate('Master File');
+    pluginCard.querySelector('paper-tooltip[for=isEmpty]').textContent = l10n.translate('Empty Plugin');
+    pluginCard.querySelector('paper-tooltip[for=loadsArchive]').textContent = l10n.translate('Loads Archive');
+    pluginCard.querySelector('paper-tooltip[for=hasUserEdits]').textContent = l10n.translate('Has User Metadata');
 
-    pluginCard.getElementById('showOnlyConflicts').previousElementSibling.textContent = l10n.translate('Show Only Conflicts');
+    pluginCard.getElementById('showOnlyConflicts').textContent = l10n.translate('Show Only Conflicts');
     pluginCard.getElementById('editMetadata').lastChild.textContent = l10n.translate('Edit Metadata');
     pluginCard.getElementById('copyMetadata').lastChild.textContent = l10n.translate('Copy Metadata');
     pluginCard.getElementById('clearMetadata').lastChild.textContent = l10n.translate('Clear User Metadata');
@@ -33,35 +28,30 @@
 
   function translatePluginEditorTemplate(l10n) {
     /* Plugin editor template. */
-    let pluginEditor = document.querySelector('link[rel="import"][href$="loot-plugin-card.html"]');
-    if (pluginEditor) {
-      pluginEditor = pluginEditor.import.querySelector('link[rel="import"][href$="loot-plugin-editor.html"]').import.querySelector('template').content;
-    } else {
-      pluginEditor = document.querySelector('polymer-element[name="loot-plugin-editor"]').querySelector('template').content;
-    }
+    const pluginEditor = document.getElementById('loot-plugin-editor').querySelector('template').content;
 
-    pluginEditor.getElementById('activeTick').setAttribute('label', l10n.translate('Active Plugin'));
-    pluginEditor.getElementById('isMaster').setAttribute('label', l10n.translate('Master File'));
-    pluginEditor.getElementById('emptyPlugin').setAttribute('label', l10n.translate('Empty Plugin'));
-    pluginEditor.getElementById('loadsArchive').setAttribute('label', l10n.translate('Loads Archive'));
+    pluginEditor.querySelector('paper-tooltip[for=activeTick]').textContent = l10n.translate('Active Plugin');
+    pluginEditor.querySelector('paper-tooltip[for=isMaster]').textContent = l10n.translate('Master File');
+    pluginEditor.querySelector('paper-tooltip[for=isEmpty]').textContent = l10n.translate('Empty Plugin');
+    pluginEditor.querySelector('paper-tooltip[for=loadsArchive]').textContent = l10n.translate('Loads Archive');
 
     pluginEditor.getElementById('enableEdits').previousElementSibling.textContent = l10n.translate('Enable Edits');
-    pluginEditor.getElementById('globalPriority').parentElement.parentElement.setAttribute('label', l10n.translate('Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.'));
-    pluginEditor.getElementById('globalPriority').previousElementSibling.textContent = l10n.translate('Global Priority');
-    pluginEditor.getElementById('priorityValue').parentElement.previousElementSibling.textContent = l10n.translate('Priority Value');
+    pluginEditor.getElementById('isPriorityGlobal').previousElementSibling.textContent = l10n.translate('Global Priority');
+    pluginEditor.querySelector('paper-tooltip[for=isPriorityGlobal]').textContent = l10n.translate('Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.');
+    pluginEditor.getElementById('priorityValue').previousElementSibling.textContent = l10n.translate('Priority Value');
 
     pluginEditor.getElementById('tableTabs').querySelector('[data-for=main]').textContent = l10n.translate('Main');
-    pluginEditor.getElementById('tableTabs').querySelector('[data-for=loadAfter]').textContent = l10n.translate('Load After');
+    pluginEditor.getElementById('tableTabs').querySelector('[data-for=after]').textContent = l10n.translate('Load After');
     pluginEditor.getElementById('tableTabs').querySelector('[data-for=req]').textContent = l10n.translate('Requirements');
     pluginEditor.getElementById('tableTabs').querySelector('[data-for=inc]').textContent = l10n.translate('Incompatibilities');
     pluginEditor.getElementById('tableTabs').querySelector('[data-for=message]').textContent = l10n.translate('Messages');
     pluginEditor.getElementById('tableTabs').querySelector('[data-for=tags]').textContent = l10n.translate('Bash Tags');
     pluginEditor.getElementById('tableTabs').querySelector('[data-for=dirty]').textContent = l10n.translate('Dirty Info');
-    pluginEditor.getElementById('tableTabs').querySelector('[data-for=locations]').textContent = l10n.translate('Locations');
+    pluginEditor.getElementById('tableTabs').querySelector('[data-for=url]').textContent = l10n.translate('Locations');
 
-    pluginEditor.getElementById('loadAfter').querySelector('th:first-child').textContent = l10n.translate('Filename');
-    pluginEditor.getElementById('loadAfter').querySelector('th:nth-child(2)').textContent = l10n.translate('Display Name');
-    pluginEditor.getElementById('loadAfter').querySelector('th:nth-child(3)').textContent = l10n.translate('Condition');
+    pluginEditor.getElementById('after').querySelector('th:first-child').textContent = l10n.translate('Filename');
+    pluginEditor.getElementById('after').querySelector('th:nth-child(2)').textContent = l10n.translate('Display Name');
+    pluginEditor.getElementById('after').querySelector('th:nth-child(3)').textContent = l10n.translate('Condition');
 
     pluginEditor.getElementById('req').querySelector('th:first-child').textContent = l10n.translate('Filename');
     pluginEditor.getElementById('req').querySelector('th:nth-child(2)').textContent = l10n.translate('Display Name');
@@ -86,152 +76,116 @@
     pluginEditor.getElementById('dirty').querySelector('th:nth-child(4)').textContent = l10n.translate('Deleted Navmeshes');
     pluginEditor.getElementById('dirty').querySelector('th:nth-child(5)').textContent = l10n.translate('Cleaning Utility');
 
-    pluginEditor.getElementById('locations').querySelector('th:first-child').textContent = l10n.translate('URL');
-    pluginEditor.getElementById('locations').querySelector('th:nth-child(2)').textContent = l10n.translate('Name');
+    pluginEditor.getElementById('url').querySelector('th:first-child').textContent = l10n.translate('URL');
+    pluginEditor.getElementById('url').querySelector('th:nth-child(2)').textContent = l10n.translate('Name');
 
-    pluginEditor.getElementById('accept').parentElement.setAttribute('label', l10n.translate('Apply'));
-    pluginEditor.getElementById('cancel').parentElement.setAttribute('label', l10n.translate('Cancel'));
+    pluginEditor.querySelector('paper-tooltip[for=accept]').textContent = l10n.translate('Apply');
+    pluginEditor.querySelector('paper-tooltip[for=cancel]').textContent = l10n.translate('Cancel');
   }
 
   function translatePluginListItemTemplate(l10n) {
     /* Plugin List Item Template */
-    let pluginItem = document.querySelector('link[rel="import"][href$="loot-plugin-item.html"]');
-    if (pluginItem) {
-      pluginItem = pluginItem.import.querySelector('template').content;
-    } else {
-      pluginItem = document.querySelector('polymer-element[name="loot-plugin-item"]').querySelector('template').content;
-    }
-    pluginItem.querySelector('#secondary core-tooltip').setAttribute('label', l10n.translate('Global Priority'));
-    pluginItem.getElementById('hasUserEditsTooltip').textContent = l10n.translate('Has User Metadata');
-    pluginItem.getElementById('editorIsOpenTooltip').textContent = l10n.translate('Editor Is Open');
+    const pluginItem = document.getElementById('loot-plugin-item').querySelector('template').content;
+
+    pluginItem.querySelector('paper-tooltip[for=globalPriorityIcon]').textContent = l10n.translate('Global Priority');
+    pluginItem.querySelector('paper-tooltip[for=hasUserEdits]').textContent = l10n.translate('Has User Metadata');
+    pluginItem.querySelector('paper-tooltip[for=editorIsOpen]').textContent = l10n.translate('Editor Is Open');
   }
 
   function translateMessageDialogTemplate(l10n) {
     /* Plugin List Item Template */
-    let messageDialog = document.querySelector('link[rel="import"][href$="loot-message-dialog.html"]');
-    if (messageDialog) {
-      messageDialog = messageDialog.import.querySelector('template').content;
-    } else {
-      messageDialog = document.querySelector('polymer-element[name="loot-message-dialog"]').querySelector('template').content;
-    }
+    const messageDialog = document.getElementById('loot-message-dialog').querySelector('template').content;
+
     messageDialog.getElementById('confirm').textContent = l10n.translate('OK');
     messageDialog.getElementById('dismiss').textContent = l10n.translate('Cancel');
   }
 
   function translateFileRowTemplate(l10n) {
     /* File row template */
-    let fileRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-    if (fileRow) {
-      fileRow = fileRow.import.querySelector('#fileRow').content;
-    } else {
-      fileRow = document.querySelector('#fileRow').content;
-    }
-    fileRow.querySelector('loot-validated-input').setAttribute('error', l10n.translate('A filename is required.'));
-    fileRow.querySelector('core-tooltip').setAttribute('label', l10n.translate('Delete Row'));
+    const fileRow = document.getElementById('fileRow').content;
+
+    fileRow.querySelector('.name').setAttribute('error-message', l10n.translate('A filename is required.'));
+    fileRow.querySelector('paper-tooltip').textContent = l10n.translate('Delete Row');
   }
 
   function translateMessageRowTemplate(l10n) {
     /* Message row template */
-    let messageRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-    if (messageRow) {
-      messageRow = messageRow.import.querySelector('#messageRow').content;
-    } else {
-      messageRow = document.querySelector('#messageRow').content;
-    }
+    const messageRow = document.getElementById('messageRow').content;
+
     messageRow.querySelector('.type').children[0].textContent = l10n.translate('Note');
     messageRow.querySelector('.type').children[1].textContent = l10n.translate('Warning');
     messageRow.querySelector('.type').children[2].textContent = l10n.translate('Error');
-    messageRow.querySelector('loot-validated-input').setAttribute('error', l10n.translate('A content string is required.'));
-    messageRow.querySelector('core-tooltip').setAttribute('label', l10n.translate('Delete Row'));
+    messageRow.querySelector('.content').setAttribute('error-message', l10n.translate('A content string is required.'));
+    messageRow.querySelector('paper-tooltip').textContent = l10n.translate('Delete Row');
   }
 
   function translateTagRowTemplate(l10n) {
     /* Tag row template */
-    let tagRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-    if (tagRow) {
-      tagRow = tagRow.import.querySelector('#tagRow').content;
-    } else {
-      tagRow = document.querySelector('#tagRow').content;
-    }
+    const tagRow = document.getElementById('tagRow').content;
+
     tagRow.querySelector('.type').children[0].textContent = l10n.translate('Add');
     tagRow.querySelector('.type').children[1].textContent = l10n.translate('Remove');
-    tagRow.querySelector('loot-validated-input').setAttribute('error', l10n.translate('A name is required.'));
-    tagRow.querySelector('core-tooltip').setAttribute('label', l10n.translate('Delete Row'));
+    tagRow.querySelector('.name').setAttribute('error-message', l10n.translate('A name is required.'));
+    tagRow.querySelector('paper-tooltip').textContent = l10n.translate('Delete Row');
   }
 
   function translateDirtyInfoRowTemplate(l10n) {
     /* Dirty Info row template */
-    let dirtyInfoRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-    if (dirtyInfoRow) {
-      dirtyInfoRow = dirtyInfoRow.import.querySelector('#dirtyInfoRow').content;
-    } else {
-      dirtyInfoRow = document.querySelector('#dirtyInfoRow').content;
-    }
+    const dirtyInfoRow = document.getElementById('dirtyInfoRow').content;
 
-    dirtyInfoRow.querySelector('loot-validated-input.crc').setAttribute('error', l10n.translate('A CRC is required.'));
-    dirtyInfoRow.querySelector('loot-validated-input.itm').setAttribute('error', l10n.translate('Values must be integers.'));
-    dirtyInfoRow.querySelector('loot-validated-input.udr').setAttribute('error', l10n.translate('Values must be integers.'));
-    dirtyInfoRow.querySelector('loot-validated-input.nav').setAttribute('error', l10n.translate('Values must be integers.'));
-    dirtyInfoRow.querySelector('loot-validated-input.util').setAttribute('error', l10n.translate('A utility name is required.'));
-    dirtyInfoRow.querySelector('core-tooltip').setAttribute('label', l10n.translate('Delete Row'));
+    dirtyInfoRow.querySelector('.crc').setAttribute('error-message', l10n.translate('A CRC is required.'));
+    dirtyInfoRow.querySelector('.itm').setAttribute('error-message', l10n.translate('Values must be integers.'));
+    dirtyInfoRow.querySelector('.udr').setAttribute('error-message', l10n.translate('Values must be integers.'));
+    dirtyInfoRow.querySelector('.nav').setAttribute('error-message', l10n.translate('Values must be integers.'));
+    dirtyInfoRow.querySelector('.util').setAttribute('error-message', l10n.translate('A utility name is required.'));
+    dirtyInfoRow.querySelector('paper-tooltip').textContent = l10n.translate('Delete Row');
   }
 
   function translateLocationRowTemplate(l10n) {
     /* Location row template */
-    let locationRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-    if (locationRow) {
-      locationRow = locationRow.import.querySelector('#locationRow').content;
-    } else {
-      locationRow = document.querySelector('#locationRow').content;
-    }
-    locationRow.querySelector('loot-validated-input').setAttribute('error', l10n.translate('A link is required.'));
-    locationRow.querySelector('core-tooltip').setAttribute('label', l10n.translate('Delete Row'));
+    const locationRow = document.getElementById('locationRow').content;
+
+    locationRow.querySelector('.link').setAttribute('error-message', l10n.translate('A link is required.'));
+    locationRow.querySelector('paper-tooltip').textContent = l10n.translate('Delete Row');
   }
 
   function translateGameRowTemplate(l10n) {
     /* Game row template */
-    let gameRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-    if (gameRow) {
-      gameRow = gameRow.import.querySelector('#gameRow').content;
-    } else {
-      gameRow = document.querySelector('#gameRow').content;
-    }
-    gameRow.querySelector('loot-validated-input.name').setAttribute('error', l10n.translate('A name is required.'));
-    gameRow.querySelector('loot-validated-input.folder').setAttribute('error', l10n.translate('A folder is required.'));
-    gameRow.querySelector('core-tooltip').setAttribute('label', l10n.translate('Delete Row'));
+    const gameRow = document.getElementById('gameRow').content;
+
+    gameRow.querySelector('.name').setAttribute('error-message', l10n.translate('A name is required.'));
+    gameRow.querySelector('.folder').setAttribute('error-message', l10n.translate('A folder is required.'));
+    gameRow.querySelector('paper-tooltip').textContent = l10n.translate('Delete Row');
   }
 
   function translateNewRowTemplate(l10n) {
     /* New row template */
-    let newRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');
-    if (newRow) {
-      newRow = newRow.import.querySelector('#newRow').content;
-    } else {
-      newRow = document.querySelector('#newRow').content;
-    }
-    newRow.querySelector('core-tooltip').setAttribute('label', l10n.translate('Add New Row'));
+    const newRow = document.getElementById('newRow').content;
+
+    newRow.querySelector('paper-tooltip').textContent = l10n.translate('Add New Row');
   }
 
   function translateMainToolbar(l10n) {
     /* Main toolbar */
-    document.getElementById('jumpToGeneralInfo').parentElement.label = l10n.translate('Jump To General Information');
-    document.getElementById('sortButton').parentElement.label = l10n.translate('Sort Plugins');
-    document.getElementById('updateMasterlistButton').parentElement.label = l10n.translate('Update Masterlist');
+    const mainToolbar = document.getElementById('mainToolbar');
+    mainToolbar.querySelector('paper-tooltip[for=jumpToGeneralInfo]').textContent = l10n.translate('Jump To General Information');
+    mainToolbar.querySelector('paper-tooltip[for=sortButton]').textContent = l10n.translate('Sort Plugins');
+    mainToolbar.querySelector('paper-tooltip[for=updateMasterlistButton]').textContent = l10n.translate('Update Masterlist');
     document.getElementById('applySortButton').textContent = l10n.translate('Apply');
     document.getElementById('cancelSortButton').textContent = l10n.translate('Cancel');
-    document.getElementById('showSearch').parentElement.label = l10n.translate('Search Cards');
+    mainToolbar.querySelector('paper-tooltip[for=showSearch]').textContent = l10n.translate('Search Cards');
 
     /* Toolbar menu */
-    document.getElementById('redatePluginsButton').lastElementChild.textContent = l10n.translate('Redate Plugins');
-    document.getElementById('openLogButton').lastElementChild.textContent = l10n.translate('Open Debug Log Location');
-    document.getElementById('wipeUserlistButton').lastElementChild.textContent = l10n.translate('Clear All User Metadata');
-    document.getElementById('copyLoadOrderButton').lastElementChild.textContent = l10n.translate('Copy Load Order');
-    document.getElementById('copyContentButton').lastElementChild.textContent = l10n.translate('Copy Content');
-    document.getElementById('refreshContentButton').lastElementChild.textContent = l10n.translate('Refresh Content');
-    document.getElementById('helpButton').lastElementChild.textContent = l10n.translate('View Documentation');
-    document.getElementById('aboutButton').lastElementChild.textContent = l10n.translate('About');
-    document.getElementById('settingsButton').lastElementChild.textContent = l10n.translate('Settings');
-    document.getElementById('quitButton').lastElementChild.textContent = l10n.translate('Quit');
+    document.getElementById('redatePluginsButton').lastChild.textContent = l10n.translate('Redate Plugins');
+    document.getElementById('openLogButton').lastChild.textContent = l10n.translate('Open Debug Log Location');
+    document.getElementById('wipeUserlistButton').lastChild.textContent = l10n.translate('Clear All User Metadata');
+    document.getElementById('copyLoadOrderButton').lastChild.textContent = l10n.translate('Copy Load Order');
+    document.getElementById('copyContentButton').lastChild.textContent = l10n.translate('Copy Content');
+    document.getElementById('refreshContentButton').lastChild.textContent = l10n.translate('Refresh Content');
+    document.getElementById('helpButton').lastChild.textContent = l10n.translate('View Documentation');
+    document.getElementById('aboutButton').lastChild.textContent = l10n.translate('About');
+    document.getElementById('settingsButton').lastChild.textContent = l10n.translate('Settings');
+    document.getElementById('quitButton').lastChild.textContent = l10n.translate('Quit');
 
     /* Search bar */
     document.getElementById('searchBar').shadowRoot.getElementById('search').label = l10n.translate('Search cards');
@@ -241,18 +195,18 @@
     /* Nav items */
     document.getElementById('sidebarTabs').firstElementChild.textContent = l10n.translate('Plugins');
     document.getElementById('sidebarTabs').firstElementChild.nextElementSibling.textContent = l10n.translate('Filters');
-    document.getElementById('contentFilter').parentElement.label = l10n.translate('Press Enter or click outside the input to set the filter.');
+    document.getElementById('filters').querySelector('paper-tooltip[for=contentFilter]').textContent = l10n.translate('Press Enter or click outside the input to set the filter.');
     document.getElementById('contentFilter').label = l10n.translate('Filter content');
 
     /* Filters */
-    document.getElementById('hideVersionNumbers').label = l10n.translate('Hide version numbers');
-    document.getElementById('hideCRCs').label = l10n.translate('Hide CRCs');
-    document.getElementById('hideBashTags').label = l10n.translate('Hide Bash Tags');
-    document.getElementById('hideNotes').label = l10n.translate('Hide notes');
-    document.getElementById('hideDoNotCleanMessages').label = l10n.translate('Hide \'Do not clean\' messages');
-    document.getElementById('hideAllPluginMessages').label = l10n.translate('Hide all plugin messages');
-    document.getElementById('hideInactivePlugins').label = l10n.translate('Hide inactive plugins');
-    document.getElementById('hideMessagelessPlugins').label = l10n.translate('Hide messageless plugins');
+    document.getElementById('hideVersionNumbers').textContent = l10n.translate('Hide version numbers');
+    document.getElementById('hideCRCs').textContent = l10n.translate('Hide CRCs');
+    document.getElementById('hideBashTags').textContent = l10n.translate('Hide Bash Tags');
+    document.getElementById('hideNotes').textContent = l10n.translate('Hide notes');
+    document.getElementById('hideDoNotCleanMessages').textContent = l10n.translate('Hide \'Do not clean\' messages');
+    document.getElementById('hideAllPluginMessages').textContent = l10n.translate('Hide all plugin messages');
+    document.getElementById('hideInactivePlugins').textContent = l10n.translate('Hide inactive plugins');
+    document.getElementById('hideMessagelessPlugins').textContent = l10n.translate('Hide messageless plugins');
     document.getElementById('hiddenPluginsTxt').textContent = l10n.translate('Hidden plugins:');
     document.getElementById('hiddenMessagesTxt').textContent = l10n.translate('Hidden messages:');
   }
@@ -272,19 +226,19 @@
 
   function translateSettingsDialog(l10n) {
     /* Settings dialog */
-    document.getElementById('settingsDialog').heading = l10n.translate('Settings');
+    document.getElementById('settingsDialog').querySelector('h2').textContent = l10n.translate('Settings');
 
     const defaultGameSelect = document.getElementById('defaultGameSelect');
     defaultGameSelect.previousElementSibling.textContent = l10n.translate('Default Game');
     defaultGameSelect.firstElementChild.textContent = l10n.translate('Autodetect');
     /* The selected text doesn't update, so force that translation. */
-    defaultGameSelect.shadowRoot.querySelector('paper-dropdown-menu').selectedItemLabel = defaultGameSelect.shadowRoot.querySelector('core-menu').selectedItem.textContent;
+    defaultGameSelect.shadowRoot.querySelector('paper-dropdown-menu').shadowRoot.querySelector('paper-input').value = defaultGameSelect.shadowRoot.querySelector('paper-dropdown-menu').selectedItem.textContent;
 
-    document.getElementById('languageSelect').previousElementSibling.textContent = l10n.translate('Language');
-    document.getElementById('languageSelect').previousElementSibling.label = l10n.translate('Language changes will be applied after LOOT is restarted.');
+    document.getElementById('languageLabel').textContent = l10n.translate('Language');
+    document.getElementById('languageLabel').nextElementSibling.textContent = l10n.translate('Language changes will be applied after LOOT is restarted.');
 
     document.getElementById('enableDebugLogging').previousElementSibling.textContent = l10n.translate('Enable debug logging');
-    document.getElementById('enableDebugLogging').parentElement.label = l10n.translate('The output is logged to the LOOTDebugLog.txt file.');
+    document.getElementById('enableDebugLogging').nextElementSibling.textContent = l10n.translate('The output is logged to the LOOTDebugLog.txt file.');
 
     document.getElementById('updateMasterlist').previousElementSibling.textContent = l10n.translate('Update masterlist before sorting');
 
@@ -300,7 +254,7 @@
 
     /* As the game table is attached on launch, its "Add New Row"
        tooltip doesn't benefit from the template translation above. */
-    gameTable.querySelector('tr:last-child core-tooltip').setAttribute('label', l10n.translate('Add New Row'));
+    gameTable.querySelector('tr:last-child paper-tooltip').textContent = l10n.translate('Add New Row');
 
     document.getElementById('settingsDialog').getElementsByClassName('accept')[0].textContent = l10n.translate('Apply');
     document.getElementById('settingsDialog').getElementsByClassName('cancel')[0].textContent = l10n.translate('Cancel');
@@ -309,7 +263,7 @@
   function translateFirstRunDialog(l10n) {
     /* First-run dialog */
     const firstRun = document.getElementById('firstRun');
-    firstRun.heading = l10n.translate('First-Time Tips');
+    firstRun.querySelector('h2').textContent = l10n.translate('First-Time Tips');
 
     firstRun.querySelector('li:nth-child(3)').textContent = l10n.translate('CRCs are only displayed after plugins have been loaded, either by conflict filtering, or by sorting.');
     firstRun.querySelector('li:nth-child(4)').textContent = l10n.translate('Double-click a plugin in the sidebar to quickly open its metadata editor. Multiple metadata editors can be opened at once.');

From c55501338bbf99f3e9f2cf19088fb24fe3d4a3a9 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 18:29:17 +0000
Subject: [PATCH 20/62] Remove obsolete polymer-ready event listener

---
 src/gui/html/index.html | 4 ++++
 src/gui/html/js/init.js | 2 --
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 3baf1eb7..73ac982d 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -459,4 +459,8 @@
   <script src="js/query.js"></script>
   <script src="js/translator.js"></script>
   <script src="js/init.js"></script>
+  <script>
+    'use strict';
+    loot.initialise();
+  </script>
 </body>
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index ef0aba54..785df698 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -279,5 +279,3 @@
     }).catch(handlePromiseError);
   };
 }));
-
-window.addEventListener('polymer-ready', loot.initialise);

From 27394fe12dc80423fbe3b53191470df2c57dfb73 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Mon, 1 Feb 2016 22:23:52 +0000
Subject: [PATCH 21/62] Toggle sidebar drag 'n' drop with edit mode

Only add and remove the drag 'n' drop functionality for sidebar plugin
items when the first editor is opened and the last editor is closed
respectively, instead of doing so every time an editor is opened or
closed.
---
 src/gui/html/js/events.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 51d9f319..95ea8c54 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -413,13 +413,6 @@ function onShowSettingsDialog() {
 }
 
 function onEditorOpen(evt) {
-  /* Set up drag 'n' drop event handlers. */
-  const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
-  for (let i = 0; i < elements.length; ++i) {
-    elements[i].draggable = true;
-    elements[i].addEventListener('dragstart', elements[i].onDragStart);
-  }
-
   /* Now show editor. */
   evt.target.classList.toggle('flip');
 
@@ -432,6 +425,13 @@ function onEditorOpen(evt) {
   ++numEditors;
 
   if (numEditors === 1) {
+    /* Set up drag 'n' drop event handlers. */
+    const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+    for (let i = 0; i < elements.length; ++i) {
+      elements[i].draggable = true;
+      elements[i].addEventListener('dragstart', elements[i].onDragStart);
+    }
+
     /* Set the edit mode toggle attribute. */
     document.getElementById('cardsNav').setAttribute('data-editModeToggle', '');
     /* Disable the toolbar elements. */
@@ -483,19 +483,19 @@ function onEditorClose(evt) {
     evt.target.classList.toggle('flip');
     evt.target.data.isEditorOpen = false;
 
-    /* Remove drag 'n' drop event handlers. */
-    const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
-    for (let i = 0; i < elements.length; ++i) {
-      elements[i].removeAttribute('draggable');
-      elements[i].removeEventListener('dragstart', elements[i].onDragStart);
-    }
-
     /* Disable priority hover in plugins list and enable header
        buttons if this is the only editor instance. */
     let numEditors = parseInt(document.body.getAttribute('data-editors'), 10);
     --numEditors;
 
     if (numEditors === 0) {
+      /* Remove drag 'n' drop event handlers. */
+      const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+      for (let i = 0; i < elements.length; ++i) {
+        elements[i].removeAttribute('draggable');
+        elements[i].removeEventListener('dragstart', elements[i].onDragStart);
+      }
+
       document.body.removeAttribute('data-editors');
       /* Set the edit mode toggle attribute. */
       document.getElementById('cardsNav').setAttribute('data-editModeToggle', '');

From 0f790e0df29089c640a71cac9910073624c7adf1 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Mon, 1 Feb 2016 22:42:48 +0000
Subject: [PATCH 22/62] Remove duplicate editor toggle handling

Flipping the plugin card is now handled within the plugin card
itself.
---
 src/gui/html/js/events.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 95ea8c54..b57979a2 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -413,9 +413,6 @@ function onShowSettingsDialog() {
 }
 
 function onEditorOpen(evt) {
-  /* Now show editor. */
-  evt.target.classList.toggle('flip');
-
   /* Enable priority hover in plugins list and enable header
      buttons if this is the only editor instance. */
   let numEditors = 0;
@@ -479,10 +476,6 @@ function onEditorClose(evt) {
   promise.then(() => {
     delete evt.target.data.editor;
 
-    /* Now hide editor. */
-    evt.target.classList.toggle('flip');
-    evt.target.data.isEditorOpen = false;
-
     /* Disable priority hover in plugins list and enable header
        buttons if this is the only editor instance. */
     let numEditors = parseInt(document.body.getAttribute('data-editors'), 10);

From c88d5e18b7e7dce42deba77245223340a3545871 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 18:30:56 +0000
Subject: [PATCH 23/62] Don't set obsolete data-editModeToggle attribute

---
 src/gui/html/js/events.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index b57979a2..a2729688 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -429,8 +429,6 @@ function onEditorOpen(evt) {
       elements[i].addEventListener('dragstart', elements[i].onDragStart);
     }
 
-    /* Set the edit mode toggle attribute. */
-    document.getElementById('cardsNav').setAttribute('data-editModeToggle', '');
     /* Disable the toolbar elements. */
     document.getElementById('wipeUserlistButton').setAttribute('disabled', '');
     document.getElementById('copyContentButton').setAttribute('disabled', '');
@@ -490,8 +488,7 @@ function onEditorClose(evt) {
       }
 
       document.body.removeAttribute('data-editors');
-      /* Set the edit mode toggle attribute. */
-      document.getElementById('cardsNav').setAttribute('data-editModeToggle', '');
+
       /* Re-enable toolbar elements. */
       document.getElementById('wipeUserlistButton').removeAttribute('disabled');
       document.getElementById('copyContentButton').removeAttribute('disabled');

From b2244e144768423241e096bacb9cce134b2962fb Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 21:37:25 +0000
Subject: [PATCH 24/62] Update JS for API changes moving to iron-list

---
 src/gui/html/js/events.js  | 12 +++++-------
 src/gui/html/js/helpers.js |  7 +++----
 src/gui/html/js/init.js    |  4 ++--
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index a2729688..8d17bf91 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -40,8 +40,8 @@ function onChangeGame(evt) {
     loot.game = new loot.Game(gameInfo, loot.l10n);
 
     /* Reset virtual list positions. */
-    document.getElementById('cardsNav').scrollToItem(0);
-    document.getElementById('main').lastElementChild.scrollToItem(0);
+    document.getElementById('cardsNav').scrollToIndex(0);
+    document.getElementById('main').lastElementChild.scrollToIndex(0);
 
     /* Now update virtual lists. */
     filterPluginData(loot.game.plugins, loot.filters);
@@ -70,8 +70,6 @@ function updateMasterlistNoProgress() {
           existingPlugin.tags = resultPlugin.tags;
         }
       });
-      /* Hack to stop cards overlapping. */
-      document.getElementById('main').lastElementChild.updateSize();
 
       loot.Dialog.showNotification(loot.l10n.translate('Masterlist updated to revision %s.', loot.game.masterlist.revision));
     } else {
@@ -356,7 +354,7 @@ function onSwitchSidebarTab(evt) {
 }
 function onSidebarClick(evt) {
   if (evt.target.hasAttribute('data-index')) {
-    document.getElementById('main').lastElementChild.scrollToItem(evt.target.getAttribute('data-index'));
+    document.getElementById('main').lastElementChild.scrollToIndex(evt.target.getAttribute('data-index'));
 
     if (evt.type === 'dblclick') {
       const card = document.getElementById(evt.target.getAttribute('data-id'));
@@ -439,7 +437,7 @@ function onEditorOpen(evt) {
     document.getElementById('sortButton').setAttribute('disabled', '');
   }
   document.body.setAttribute('data-editors', numEditors);
-  document.getElementById('cardsNav').updateSize();
+  document.getElementById('cardsNav').notifyResize();
 
   return loot.query('editorOpened').catch(handlePromiseError);
 }
@@ -500,7 +498,7 @@ function onEditorClose(evt) {
     } else {
       document.body.setAttribute('data-editors', numEditors);
     }
-    document.getElementById('cardsNav').updateSize();
+    document.getElementById('cardsNav').notifyResize();
   }).catch(handlePromiseError);
 }
 function undoConflictsFilter() {
diff --git a/src/gui/html/js/helpers.js b/src/gui/html/js/helpers.js
index 08db0c61..a9ca5574 100644
--- a/src/gui/html/js/helpers.js
+++ b/src/gui/html/js/helpers.js
@@ -44,8 +44,8 @@ function filterPluginData(plugins, filters) {
     filters.conflictingPluginNames = conflictingPluginNames;
     return plugins.filter(filters.pluginFilter, filters);
   }).then((filteredPlugins) => {
-    document.getElementById('cardsNav').data = filteredPlugins;
-    document.getElementById('pluginCardList').data = filteredPlugins;
+    document.getElementById('cardsNav').items = filteredPlugins;
+    document.getElementById('pluginCardList').items = filteredPlugins;
 
     const pluginCards = document.getElementById('pluginCardList').children;
     for (let i = 0; i < pluginCards.length; ++i) {
@@ -53,8 +53,7 @@ function filterPluginData(plugins, filters) {
         pluginCards[i].updateContent();
       }
     }
-    document.getElementById('cardsNav').updateSize();
-    document.getElementById('pluginCardList').updateSize();
+    document.getElementById('cardsNav').notifyResize();
 
     /* Now perform search again. If there is no current search, this won't
        do anything. */
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 785df698..45a7fe1f 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -222,8 +222,8 @@
     return query('getGameData').then((result) => {
       const game = JSON.parse(result, Plugin.fromJson);
       appData.game = new Game(game, appData.l10n);
-      document.getElementById('cardsNav').data = appData.game.plugins;
-      document.getElementById('main').lastElementChild.data = appData.game.plugins;
+      document.getElementById('cardsNav').items = appData.game.plugins;
+      document.getElementById('main').lastElementChild.items = appData.game.plugins;
       applyEnabledFilters(appData.filters, appData.settings, appData.game.plugins);
       Dialog.closeProgress();
     });

From 863a6bc22614747dd368ac536a8cf92c21ad5c2e Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 21:37:43 +0000
Subject: [PATCH 25/62] Update JS for API changes moving to paper-dialog

---
 src/gui/html/js/events.js | 4 ++--
 src/gui/html/js/init.js   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 8d17bf91..d35cd6f8 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -324,7 +324,7 @@ function onOpenLogLocation() {
   loot.query('openLogLocation').catch(handlePromiseError);
 }
 function onShowAboutDialog() {
-  document.getElementById('about').showModal();
+  document.getElementById('about').open();
 }
 function handleUnappliedChangesClose(change) {
   loot.Dialog.askQuestion('', loot.l10n.translate('You have not yet applied or cancelled your %s. Are you sure you want to quit?', change), loot.l10n.translate('Quit'), (result) => {
@@ -407,7 +407,7 @@ function onCloseSettingsDialog(evt) {
   evt.target.parentElement.close();
 }
 function onShowSettingsDialog() {
-  document.getElementById('settingsDialog').showModal();
+  document.getElementById('settingsDialog').open();
 }
 
 function onEditorOpen(evt) {
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 45a7fe1f..89bb1d13 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -274,7 +274,7 @@
       return setGameData(loot);
     }).then(() => {
       if (!loot.settings.lastVersion || loot.settings.lastVersion !== loot.version) {
-        document.getElementById('firstRun').showModal();
+        document.getElementById('firstRun').open();
       }
     }).catch(handlePromiseError);
   };

From 03d8c96e30f07c73a2951fcd228965686b969b83 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Fri, 5 Feb 2016 17:10:03 +0000
Subject: [PATCH 26/62] Implement new search event handlers

---
 src/gui/html/js/events.js | 30 +++++++++++++++++++++++++++++-
 src/gui/html/js/init.js   |  4 +++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index d35cd6f8..37583f1d 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -576,6 +576,34 @@ function onSearchOpen() {
   document.getElementById('mainToolbar').classList.add('search');
   document.getElementById('searchBar').focusInput();
 }
-function onSearchClose() {
+function onSearchBegin(evt) {
+  loot.game.plugins.forEach((plugin) => {
+    plugin.isSearchResult = false;
+  });
+
+  if (!evt.detail.needle) {
+    return;
+  }
+
+  // Don't push to the target's results property directly, as the
+  // change observer doesn't work correctly unless special Polymer APIs
+  // are used, which I don't want to get into.
+  const results = [];
+  loot.game.plugins.forEach((plugin, index) => {
+    if (plugin.getCardContent(loot.filters).containsText(evt.detail.needle)) {
+      results.push(index);
+      plugin.isSearchResult = true;
+    }
+  });
+
+  evt.target.results = results;
+}
+function onSearchChangeSelection(evt) {
+  document.getElementById('pluginCardList').scrollToIndex(evt.detail.selection);
+}
+function onSearchEnd(evt) {
+  loot.game.plugins.forEach((plugin) => {
+    plugin.isSearchResult = false;
+  });
   document.getElementById('mainToolbar').classList.remove('search');
 }
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 89bb1d13..32487221 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -75,7 +75,9 @@
 
     /* Set up search event handlers. */
     document.getElementById('showSearch').addEventListener('click', onSearchOpen);
-    document.getElementById('searchBar').addEventListener('loot-search-close', onSearchClose);
+    document.getElementById('searchBar').addEventListener('loot-search-begin', onSearchBegin);
+    document.getElementById('searchBar').addEventListener('loot-search-change-selection', onSearchChangeSelection, false);
+    document.getElementById('searchBar').addEventListener('loot-search-end', onSearchEnd);
     window.addEventListener('keyup', onFocusSearch);
 
     /* Set up event handlers for settings dialog. */

From 40427265376127788e3d4fce537311bb3f2a8ed3 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 22:04:01 +0000
Subject: [PATCH 27/62] Update event handlers for misc Polymer API changes

---
 src/gui/html/js/events.js | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 37583f1d..88e3d617 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -14,11 +14,9 @@ function onJumpToGeneralInfo() {
   document.getElementById('main').scrollTop = 0;
 }
 function onChangeGame(evt) {
-  /* Check that the selected game isn't the current one. */
-  if (!evt.detail.isSelected) {
+  if (evt.detail.item.getAttribute('value') === loot.game.folder) {
     return;
   }
-
   /* Send off a CEF query with the folder name of the new game. */
   loot.Dialog.showProgress(loot.l10n.translate('Loading game data...'));
   loot.query('changeGame', evt.detail.item.getAttribute('value')).then((result) => {
@@ -348,13 +346,12 @@ function onQuit() {
 }
 
 function onSwitchSidebarTab(evt) {
-  if (evt.detail.isSelected) {
-    document.getElementById(evt.target.selected).parentElement.selected = evt.target.selected;
-  }
+  document.getElementById(evt.target.selected).parentElement.selected = evt.target.selected;
 }
 function onSidebarClick(evt) {
   if (evt.target.hasAttribute('data-index')) {
-    document.getElementById('main').lastElementChild.scrollToIndex(evt.target.getAttribute('data-index'));
+    const index = parseInt(evt.target.getAttribute('data-index'), 10);
+    document.getElementById('pluginCardList').scrollToIndex(index);
 
     if (evt.type === 'dblclick') {
       const card = document.getElementById(evt.target.getAttribute('data-id'));
@@ -366,14 +363,7 @@ function onSidebarClick(evt) {
 }
 
 function areSettingsValid() {
-  /* Validate inputs individually. */
-  const inputs = document.getElementById('settingsDialog').getElementsByTagName('loot-validated-input');
-  for (let i = 0; i < inputs.length; ++i) {
-    if (!inputs[i].checkValidity()) {
-      return false;
-    }
-  }
-  return true;
+  return document.getElementById('gameTable').validate();
 }
 function onCloseSettingsDialog(evt) {
   if (evt.target.classList.contains('accept')) {
@@ -404,13 +394,16 @@ function onCloseSettingsDialog(evt) {
     /* Re-apply the existing settings to the settings dialog elements. */
     loot.dom.updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
   }
-  evt.target.parentElement.close();
+  evt.target.parentElement.parentElement.close();
 }
 function onShowSettingsDialog() {
   document.getElementById('settingsDialog').open();
 }
 
 function onEditorOpen(evt) {
+  /* Update the size of the card in the iron-list. */
+  document.getElementById('pluginCardList').updateSizeForItem(evt.target.data);
+
   /* Enable priority hover in plugins list and enable header
      buttons if this is the only editor instance. */
   let numEditors = 0;
@@ -442,6 +435,9 @@ function onEditorOpen(evt) {
   return loot.query('editorOpened').catch(handlePromiseError);
 }
 function onEditorClose(evt) {
+  /* Update the size of the card in the iron-list. */
+  document.getElementById('pluginCardList').updateSizeForItem(evt.target.data);
+
   /* evt.detail is true if the apply button was pressed. */
   let promise;
   if (evt.detail) {

From ea2a61cf20fa942b98f8962fb95ac2a975a7b0a0 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Thu, 4 Feb 2016 20:21:14 +0000
Subject: [PATCH 28/62] Listen for Polymer 1.x element events

---
 src/gui/html/js/init.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 32487221..0a976262 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -65,12 +65,12 @@
     document.getElementById('helpButton').addEventListener('click', onOpenReadme);
     document.getElementById('aboutButton').addEventListener('click', onShowAboutDialog);
     document.getElementById('quitButton').addEventListener('click', onQuit);
-    document.getElementById('gameMenu').addEventListener('core-select', onChangeGame);
+    document.getElementById('gameMenu').addEventListener('iron-select', onChangeGame);
     document.getElementById('updateMasterlistButton').addEventListener('click', onUpdateMasterlist);
     document.getElementById('sortButton').addEventListener('click', onSortPlugins);
     document.getElementById('applySortButton').addEventListener('click', onApplySort);
     document.getElementById('cancelSortButton').addEventListener('click', onCancelSort);
-    document.getElementById('sidebarTabs').addEventListener('core-select', onSwitchSidebarTab);
+    document.getElementById('sidebarTabs').addEventListener('iron-select', onSwitchSidebarTab);
     document.getElementById('jumpToGeneralInfo').addEventListener('click', onJumpToGeneralInfo);
 
     /* Set up search event handlers. */

From 143cb6cb292d824b68e434910ceb3541de71d485 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 7 Feb 2016 12:05:34 +0000
Subject: [PATCH 29/62] Declaratively set plugin card list scroll handler

---
 src/gui/html/index.html | 2 +-
 src/gui/html/js/init.js | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 73ac982d..57560ec4 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -317,7 +317,7 @@
             <!-- Generated message <li> elements go here. -->
           </ul>
         </paper-material>
-        <iron-list id="pluginCardList" as="plugin">
+        <iron-list id="pluginCardList" as="plugin" scroll-target="main">
           <template>
             <loot-plugin-card id="[[plugin.id]]"
                               data="[[plugin]]">
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 0a976262..f5076a7f 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -233,8 +233,6 @@
 
   return () => {
     Dialog.showProgress('Initialising user interface...');
-    /* Set the plugin list's scroll target to its parent. */
-    document.getElementById('pluginCardList').scrollTarget = document.getElementById('main');
 
     /* Make sure settings are what I want. */
     window.marked.setOptions({

From 37163a77d31183ae696a76bf0c52dcfffd5bfe00 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 7 Feb 2016 12:31:33 +0000
Subject: [PATCH 30/62] Don't set 'noink' attribute on paper-item elements

As of Polymer 1.x, the attribute has no effect.
---
 src/gui/html/js/dom.js  | 1 -
 src/gui/html/js/init.js | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/gui/html/js/dom.js b/src/gui/html/js/dom.js
index 5f8c2475..3df6fbd5 100644
--- a/src/gui/html/js/dom.js
+++ b/src/gui/html/js/dom.js
@@ -70,7 +70,6 @@
       settings.games.forEach((game) => {
         const menuItem = document.createElement('paper-item');
         menuItem.setAttribute('value', game.folder);
-        menuItem.setAttribute('noink', '');
         menuItem.textContent = game.name;
         gameMenu.appendChild(menuItem);
         gameSelect.appendChild(menuItem.cloneNode(true));
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index f5076a7f..0289f5b7 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -158,7 +158,6 @@
       result.forEach((language) => {
         const settingsItem = document.createElement('paper-item');
         settingsItem.setAttribute('value', language.locale);
-        settingsItem.setAttribute('noink', '');
         settingsItem.textContent = language.name;
         settingsLangSelect.appendChild(settingsItem);
         messageLangSelect.appendChild(settingsItem.cloneNode(true));
@@ -198,7 +197,6 @@
       result.forEach((gameType) => {
         const item = document.createElement('paper-item');
         item.setAttribute('value', gameType);
-        item.setAttribute('noink', '');
         item.textContent = gameType;
         select.appendChild(item);
       });

From 3966d2269ee2e7798176fd8116e74af2e1fe5d1a Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 7 Feb 2016 12:42:16 +0000
Subject: [PATCH 31/62] Get the plugin card list directly

Don't get its parent then the lastElementChild, that's more prone to
breaking.
---
 src/gui/html/js/events.js | 2 +-
 src/gui/html/js/init.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 88e3d617..808ec37c 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -39,7 +39,7 @@ function onChangeGame(evt) {
 
     /* Reset virtual list positions. */
     document.getElementById('cardsNav').scrollToIndex(0);
-    document.getElementById('main').lastElementChild.scrollToIndex(0);
+    document.getElementById('pluginCardList').scrollToIndex(0);
 
     /* Now update virtual lists. */
     filterPluginData(loot.game.plugins, loot.filters);
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 0289f5b7..25e9128c 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -223,7 +223,7 @@
       const game = JSON.parse(result, Plugin.fromJson);
       appData.game = new Game(game, appData.l10n);
       document.getElementById('cardsNav').items = appData.game.plugins;
-      document.getElementById('main').lastElementChild.items = appData.game.plugins;
+      document.getElementById('pluginCardList').items = appData.game.plugins;
       applyEnabledFilters(appData.filters, appData.settings, appData.game.plugins);
       Dialog.closeProgress();
     });

From c13cd8b8596a538f27203b0fdfca7ba27cddb68f Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Tue, 9 Feb 2016 17:38:53 +0000
Subject: [PATCH 32/62] Fix settings dialog close actions

If the Esc key or the Cancel button are used to exit the Settings
dialog, any changes will be discarded. If the Apply button is used, the
dialog only closes if the inputs are all valid, then saves the settings
in the dialog.
---
 src/gui/html/js/dom.js    | 36 +++++++++++++--------
 src/gui/html/js/events.js | 67 ++++++++++++++++++++++-----------------
 src/gui/html/js/init.js   | 14 +++++---
 3 files changed, 71 insertions(+), 46 deletions(-)

diff --git a/src/gui/html/js/dom.js b/src/gui/html/js/dom.js
index 3df6fbd5..291c3b10 100644
--- a/src/gui/html/js/dom.js
+++ b/src/gui/html/js/dom.js
@@ -52,27 +52,40 @@
       }
     },
 
-    updateSettingsDialog(settings, installedGames, gameFolder) {
-      const gameSelect = document.getElementById('defaultGameSelect');
+    createGameItem(game) {
+      const menuItem = document.createElement('paper-item');
+      menuItem.setAttribute('value', game.folder);
+      menuItem.textContent = game.name;
+
+      return menuItem;
+    },
+
+    setGameMenuItems(games) {
       const gameMenu = document.getElementById('gameMenu');
+
+      /* First make sure game listing elements don't have any existing entries. */
+      while (gameMenu.firstElementChild) {
+        gameMenu.removeChild(gameMenu.firstElementChild);
+      }
+
+      games.forEach((game) => {
+        gameMenu.appendChild(this.createGameItem(game));
+      });
+    },
+
+    updateSettingsDialog(settings) {
+      const gameSelect = document.getElementById('defaultGameSelect');
       const gameTable = document.getElementById('gameTable');
 
       /* First make sure game listing elements don't have any existing entries. */
       while (gameSelect.children.length > 1) {
         gameSelect.removeChild(gameSelect.lastElementChild);
       }
-      while (gameMenu.firstElementChild) {
-        gameMenu.removeChild(gameMenu.firstElementChild);
-      }
       gameTable.clear();
 
       /* Now fill with new values. */
       settings.games.forEach((game) => {
-        const menuItem = document.createElement('paper-item');
-        menuItem.setAttribute('value', game.folder);
-        menuItem.textContent = game.name;
-        gameMenu.appendChild(menuItem);
-        gameSelect.appendChild(menuItem.cloneNode(true));
+        gameSelect.appendChild(this.createGameItem(game));
 
         const row = gameTable.addRow(game);
         gameTable.setReadOnly(row, ['name', 'folder', 'type']);
@@ -82,9 +95,6 @@
       document.getElementById('languageSelect').value = settings.language;
       document.getElementById('enableDebugLogging').checked = settings.enableDebugLogging;
       document.getElementById('updateMasterlist').checked = settings.updateMasterlist;
-
-      this.updateEnabledGames(installedGames);
-      this.updateSelectedGame(gameFolder);
     },
   };
 }));
diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 808ec37c..3cab21aa 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -365,36 +365,45 @@ function onSidebarClick(evt) {
 function areSettingsValid() {
   return document.getElementById('gameTable').validate();
 }
-function onCloseSettingsDialog(evt) {
-  if (evt.target.classList.contains('accept')) {
-    if (!areSettingsValid()) {
-      return;
-    }
-
-    /* Update the JS variable values. */
-    const settings = {
-      enableDebugLogging: document.getElementById('enableDebugLogging').checked,
-      game: document.getElementById('defaultGameSelect').value,
-      games: document.getElementById('gameTable').getRowsData(false),
-      language: document.getElementById('languageSelect').value,
-      lastGame: loot.settings.lastGame,
-      updateMasterlist: document.getElementById('updateMasterlist').checked,
-      filters: loot.settings.filters,
-    };
-
-    /* Send the settings back to the C++ side. */
-    loot.query('closeSettings', settings).then(JSON.parse).then((installedGames) => {
-      loot.installedGames = installedGames;
-      loot.dom.updateEnabledGames(installedGames);
-    }).catch(handlePromiseError).then(() => {
-      loot.settings = settings;
-      loot.dom.updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
-    }).catch(handlePromiseError);
-  } else {
-    /* Re-apply the existing settings to the settings dialog elements. */
-    loot.dom.updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
+function onApplySettings(evt) {
+  if (!areSettingsValid()) {
+    evt.stopPropagation();
   }
-  evt.target.parentElement.parentElement.close();
+}
+function onCloseSettingsDialog(evt) {
+  if (evt.target.id !== 'settingsDialog') {
+    /* The event can be fired by dropdowns in the settings dialog, so ignore
+       any events that don't come from the dialog itself. */
+    return;
+  }
+  if (!evt.detail.confirmed) {
+    /* Re-apply the existing settings to the settings dialog elements. */
+    loot.dom.updateSettingsDialog(loot.settings);
+    return;
+  }
+
+  /* Update the JS variable values. */
+  const settings = {
+    enableDebugLogging: document.getElementById('enableDebugLogging').checked,
+    game: document.getElementById('defaultGameSelect').value,
+    games: document.getElementById('gameTable').getRowsData(false),
+    language: document.getElementById('languageSelect').value,
+    lastGame: loot.settings.lastGame,
+    updateMasterlist: document.getElementById('updateMasterlist').checked,
+    filters: loot.settings.filters,
+  };
+
+  /* Send the settings back to the C++ side. */
+  loot.query('closeSettings', settings).then(JSON.parse).then((installedGames) => {
+    loot.installedGames = installedGames;
+    loot.dom.updateEnabledGames(installedGames);
+  }).catch(handlePromiseError).then(() => {
+    loot.settings = settings;
+    loot.dom.updateSettingsDialog(loot.settings);
+    loot.dom.setGameMenuItems(loot.settings.games);
+    loot.dom.updateEnabledGames(loot.installedGames);
+    loot.dom.updateSelectedGame(loot.game.folder);
+  }).catch(handlePromiseError);
 }
 function onShowSettingsDialog() {
   document.getElementById('settingsDialog').open();
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 25e9128c..4f72d5a7 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -82,8 +82,8 @@
 
     /* Set up event handlers for settings dialog. */
     const settings = document.getElementById('settingsDialog');
-    settings.getElementsByClassName('accept')[0].addEventListener('click', onCloseSettingsDialog);
-    settings.getElementsByClassName('cancel')[0].addEventListener('click', onCloseSettingsDialog);
+    settings.addEventListener('iron-overlay-closed', onCloseSettingsDialog);
+    settings.querySelector('[dialog-confirm]').addEventListener('tap', onApplySettings);
 
     /* Set up handler for opening and closing editors. */
     document.body.addEventListener('loot-editor-open', onEditorOpen);
@@ -214,7 +214,10 @@
   function setSettings(appData) {
     return query('getSettings').then(JSON.parse).then((result) => {
       appData.settings = result;
-      dom.updateSettingsDialog(appData.settings, appData.installedGames, appData.game.folder);
+      dom.updateSettingsDialog(appData.settings);
+      loot.dom.setGameMenuItems(appData.settings.games);
+      loot.dom.updateEnabledGames(appData.installedGames);
+      loot.dom.updateSelectedGame(appData.game.folder);
     });
   }
 
@@ -260,7 +263,10 @@
       loot.filters = new Filters(loot.l10n);
       translateStaticText(loot.l10n);
       /* Also need to update the settings UI. */
-      dom.updateSettingsDialog(loot.settings, loot.installedGames, loot.game.folder);
+      dom.updateSettingsDialog(loot.settings);
+      loot.dom.setGameMenuItems(loot.settings.games);
+      loot.dom.updateEnabledGames(loot.installedGames);
+      loot.dom.updateSelectedGame(loot.game.folder);
     }).then(() => {
       return displayInitErrors();
     }).then((result) => {

From 632cf1b30aa679c78f454344f931370484afde1c Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Tue, 9 Feb 2016 21:02:31 +0000
Subject: [PATCH 33/62] Update a plugin's card when its content changes

Add new events fired when changing the CRC or tags, and update the card
content if they or the plugin's messages change. Use Lodash's isEquals()
to test for deep object equality.
---
 bower.json                           |   3 +-
 src/gui/html/index.html              |   1 +
 src/gui/html/js/init.js              |   4 +-
 src/gui/html/js/plugin.js            |  60 ++++++++++--
 src/tests/gui/html/js/test.html      |   1 +
 src/tests/gui/html/js/test_plugin.js | 138 +++++++++++++++++++++++++--
 6 files changed, 188 insertions(+), 19 deletions(-)

diff --git a/bower.json b/bower.json
index 13d1fbcb..0ffbc93b 100644
--- a/bower.json
+++ b/bower.json
@@ -31,6 +31,7 @@
     "paper-tooltip": "PolymerElements/paper-tooltip#^1.0.0",
     "Jed": "SlexAxton/Jed#a9d03e1bbca9211a8b29a93a298a7ee9ddb353f0",
     "jed-gettext-parser": "^1.0.0",
-    "marked": "^0.3.2"
+    "marked": "^0.3.2",
+    "lodash": "^4.3.0"
   }
 }
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 57560ec4..0a1957ab 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -448,6 +448,7 @@
   <script src="../../../bower_components/marked/lib/marked.js"></script>
   <script src="../../../bower_components/Jed/jed.js"></script>
   <script src="../../../bower_components/jed-gettext-parser/jedGettextParser.js"></script>
+  <script src="../../../bower_components/lodash/dist/lodash.core.min.js"></script>
   <script src="js/dialog.js"></script>
   <script src="js/dom.js"></script>
   <script src="js/events.js"></script>
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 4f72d5a7..9f192a01 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -94,9 +94,11 @@
     document.getElementById('cardsNav').addEventListener('click', onSidebarClick);
     document.getElementById('cardsNav').addEventListener('dblclick', onSidebarClick);
 
-    /* Set up handler for plugin message and dirty info changes. */
+    /* Set up handler for plugin data changes. */
     document.addEventListener('loot-plugin-message-change', Plugin.onMessageChange);
+    document.addEventListener('loot-plugin-message-change', Plugin.onContentChange);
     document.addEventListener('loot-plugin-isdirty-change', Plugin.onIsDirtyChange);
+    document.addEventListener('loot-plugin-card-content-change', Plugin.onContentChange);
 
     /* Set up event handlers for game member variable changes. */
     document.addEventListener('loot-game-folder-change', Game.onFolderChange);
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index 5a37d8c2..78fb2ec5 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -25,13 +25,13 @@
 (function exportModule(root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD. Register as an anonymous module.
-    define([], factory);
+    define(['bower_components/lodash/dist/lodash.core.min'], factory);
   } else {
     // Browser globals
     root.loot = root.loot || {};
-    root.loot.Plugin = factory();
+    root.loot.Plugin = factory(root._);
   }
-}(this, () => {
+}(this, (_) => {
   /* Messages, tags, CRCs and version strings can all be hidden by filters.
      Use getters with no setters for member variables as data should not be
      written to objects of this class. */
@@ -168,7 +168,7 @@
     constructor(obj) {
       /* Plugin data */
       this.name = obj.name;
-      this.crc = obj.crc || 0;
+      this._crc = obj.crc || 0;
       this.version = obj.version || '';
       this.isActive = obj.isActive || false;
       this.isEmpty = obj.isEmpty || false;
@@ -181,7 +181,7 @@
       this.priority = obj.priority || 0;
       this.isPriorityGlobal = obj.isPriorityGlobal || false;
       this._messages = obj.messages || [];
-      this.tags = obj.tags;
+      this._tags = obj.tags;
       this._isDirty = obj.isDirty || false;
 
       /* UI state variables */
@@ -240,6 +240,12 @@
       return this.priority.toString();
     }
 
+    _dispatchCardContentChangeEvent() {
+      document.dispatchEvent(new CustomEvent('loot-plugin-card-content-change', {
+        detail: { pluginId: this.id },
+      }));
+    }
+
     get messages() {
       return this._messages;
     }
@@ -273,17 +279,21 @@
         }
       });
 
-      if (newTotal !== oldTotal || newWarns !== oldWarns || newErrs !== oldErrs) {
+      if (newTotal !== oldTotal
+        || newWarns !== oldWarns
+        || newErrs !== oldErrs
+        || !_.isEqual(this._messages, messages)) {
+        this._messages = messages;
+
         document.dispatchEvent(new CustomEvent('loot-plugin-message-change', {
           detail: {
+            pluginId: this.id,
             totalDiff: newTotal - oldTotal,
             warningDiff: newWarns - oldWarns,
             errorDiff: newErrs - oldErrs,
           },
         }));
       }
-
-      this._messages = messages;
     }
 
     get isDirty() {
@@ -293,14 +303,38 @@
     set isDirty(dirty) {
       /* Update dirty counts. */
       if (dirty !== this._isDirty) {
+        this._isDirty = dirty;
+
         document.dispatchEvent(new CustomEvent('loot-plugin-isdirty-change', {
           detail: {
             isDirty: dirty,
           },
         }));
       }
+    }
 
-      this._isDirty = dirty;
+    get crc() {
+      return this._crc;
+    }
+
+    set crc(crc) {
+      if (this._crc !== crc) {
+        this._crc = crc;
+
+        this._dispatchCardContentChangeEvent();
+      }
+    }
+
+    get tags() {
+      return this._tags;
+    }
+
+    set tags(tags) {
+      if (!_.isEqual(this._tags, tags)) {
+        this._tags = tags;
+
+        this._dispatchCardContentChangeEvent();
+      }
     }
 
     get hasUserEdits() {
@@ -317,6 +351,7 @@
       document.getElementById('totalWarningNo').textContent = parseInt(document.getElementById('totalWarningNo').textContent, 10) + evt.detail.warningDiff;
       document.getElementById('totalErrorNo').textContent = parseInt(document.getElementById('totalErrorNo').textContent, 10) + evt.detail.errorDiff;
     }
+
     static onIsDirtyChange(evt) {
       if (evt.detail.isDirty) {
         document.getElementById('dirtyPluginNo').textContent = parseInt(document.getElementById('dirtyPluginNo').textContent, 10) + 1;
@@ -324,5 +359,12 @@
         document.getElementById('dirtyPluginNo').textContent = parseInt(document.getElementById('dirtyPluginNo').textContent, 10) - 1;
       }
     }
+
+    static onContentChange(evt) {
+      const card = document.getElementById(evt.detail.pluginId);
+      if (card) {
+        card.updateContent();
+      }
+    }
   };
 }));
diff --git a/src/tests/gui/html/js/test.html b/src/tests/gui/html/js/test.html
index 44de2886..11efd275 100644
--- a/src/tests/gui/html/js/test.html
+++ b/src/tests/gui/html/js/test.html
@@ -9,6 +9,7 @@
 
 <script src="../../../../../bower_components/Jed/jed.js"></script>
 <script src="../../../../../bower_components/jed-gettext-parser/jedGettextParser.js"></script>
+<script src="../../../../../bower_components/lodash/dist/lodash.core.min.js"></script>
 
 <script>mocha.setup('bdd')</script>
 <script src="../../../../gui/html/js/filters.js"></script>
diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index 928d391e..76093c92 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -357,7 +357,7 @@ describe('Plugin', () => {
       }];
       const plugin = new loot.Plugin({
         name: 'test',
-        messages: messages,
+        messages,
       });
 
       plugin.messages.should.be.deepEqual(messages);
@@ -378,7 +378,7 @@ describe('Plugin', () => {
       plugin.messages.should.be.deepEqual(messages);
     });
 
-    it('setting messages should not fire an event if no message counts were changed', (done) => {
+    it('setting messages should not fire an event if no messages were changed', (done) => {
       const plugin = new loot.Plugin({
         name: 'test',
         messages: [{
@@ -386,10 +386,6 @@ describe('Plugin', () => {
           content: 'test message',
         }],
       });
-      const messages = [{
-        type: 'say',
-        content: 'another test message',
-      }];
 
       handleEvent = () => {
         done(new Error('Should not have fired an event'));
@@ -397,12 +393,12 @@ describe('Plugin', () => {
 
       document.addEventListener('loot-plugin-message-change', handleEvent);
 
-      plugin.messages = messages;
+      plugin.messages = plugin.messages;
 
       setTimeout(done, 100);
     });
 
-    it('setting messages should fire an event if message counts were changed', (done) => {
+    it('setting messages should fire an event if the messages were changed', (done) => {
       const plugin = new loot.Plugin({
         name: 'test',
         messages: [],
@@ -413,6 +409,7 @@ describe('Plugin', () => {
       }];
 
       handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
         evt.detail.totalDiff.should.equal(1);
         evt.detail.warningDiff.should.equal(0);
         evt.detail.errorDiff.should.equal(1);
@@ -483,6 +480,131 @@ describe('Plugin', () => {
     });
   });
 
+  describe('#crc', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-card-content-change', handleEvent);
+    });
+
+    it('getting value should return 0 if crc has not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isDirty.should.be.false();
+    });
+
+    it('getting value should return 0xDEADBEEF if it was set in the constructor', () => {
+      const plugin = new loot.Plugin({
+        name: 'test',
+        crc: 0xDEADBEEF,
+      });
+
+      plugin.crc.should.equal(0xDEADBEEF);
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.crc = 0xDEADBEEF;
+
+      plugin.crc.should.equal(0xDEADBEEF);
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-card-content-change', handleEvent);
+
+      plugin.crc = plugin.crc;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-card-content-change', handleEvent);
+
+      plugin.crc = 0xDEADBEEF;
+    });
+  });
+
+  describe('#tags', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-card-content-change', handleEvent);
+    });
+
+    it('getting value should return an empty array if tags have not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.tags.length.should.equal(0);
+    });
+
+    it('getting value should return any tags that are set', () => {
+      const tags = [{
+        name: 'Delev',
+      }];
+      const plugin = new loot.Plugin({
+        name: 'test',
+        tags,
+      });
+
+      plugin.tags.should.deepEqual(tags);
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+      const tags = [{
+        name: 'Delev',
+      }];
+
+      plugin.tags = tags;
+
+      plugin.tags.should.deepEqual(tags);
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-card-content-change', handleEvent);
+
+      plugin.tags = plugin.tags;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+      const tags = [{
+        name: 'Delev',
+      }];
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-card-content-change', handleEvent);
+
+      plugin.tags = tags;
+    });
+  });
+
   describe('#getCardContent()', () => {
     let plugin;
     beforeEach(() => {

From 210dd14a10fe2a91b935319c1257c97ac35eb37f Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 10 Feb 2016 18:06:53 +0000
Subject: [PATCH 34/62] Remove unused Plugin.priorityString getter

---
 src/gui/html/js/plugin.js            |  8 --------
 src/tests/gui/html/js/test_plugin.js | 26 --------------------------
 2 files changed, 34 deletions(-)

diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index 78fb2ec5..da7db3f9 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -232,14 +232,6 @@
       return rowData;
     }
 
-    get priorityString() {
-      if (this.priority === 0) {
-        return '';
-      }
-
-      return this.priority.toString();
-    }
-
     _dispatchCardContentChangeEvent() {
       document.dispatchEvent(new CustomEvent('loot-plugin-card-content-change', {
         detail: { pluginId: this.id },
diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index 76093c92..9044361e 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -301,32 +301,6 @@ describe('Plugin', () => {
     });
   });
 
-  describe('#priorityString', () => {
-    it('should return an empty string if priority is undefined', () => {
-      const plugin = new loot.Plugin({ name: 'test' });
-
-      plugin.priorityString.should.equal('');
-    });
-
-    it('should return an empty string if priority is zero', () => {
-      const plugin = new loot.Plugin({
-        name: 'test',
-        priority: 0,
-      });
-
-      plugin.priorityString.should.equal('');
-    });
-
-    it('should return priority value as string if non zero', () => {
-      const plugin = new loot.Plugin({
-        name: 'test',
-        priority: -50,
-      });
-
-      plugin.priorityString.should.equal('-50');
-    });
-  });
-
   describe('#messages', () => {
     let handleEvent;
 

From d1fc5df0518ca6b4a750648b8b8861deb29e7a23 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 10 Feb 2016 18:56:43 +0000
Subject: [PATCH 35/62] Fix typo in Plugin constructor test

---
 src/tests/gui/html/js/test_plugin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index 9044361e..1f97d36b 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -177,10 +177,10 @@ describe('Plugin', () => {
     it('should set isPriorityGlobal to passed key\'s value', () => {
       const plugin = new loot.Plugin({
         name: 'test',
-        isEmpty: true,
+        isPriorityGlobal: true,
       });
 
-      plugin.isEmpty.should.be.true();
+      plugin.isPriorityGlobal.should.be.true();
     });
 
     it('should set id to the plugins name without spaces', () => {

From e8d3f9bb40a62a7dc7532d60f65de7b0e6f00a2e Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 10 Feb 2016 18:59:12 +0000
Subject: [PATCH 36/62] Fixed Plugin.tags not initialising

If the constructor is passed an object that doesn't have a `tags` key.
---
 src/gui/html/js/plugin.js            |  2 +-
 src/tests/gui/html/js/test_plugin.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index da7db3f9..6d3102af 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -181,7 +181,7 @@
       this.priority = obj.priority || 0;
       this.isPriorityGlobal = obj.isPriorityGlobal || false;
       this._messages = obj.messages || [];
-      this._tags = obj.tags;
+      this._tags = obj.tags || [];
       this._isDirty = obj.isDirty || false;
 
       /* UI state variables */
diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index 1f97d36b..6d8462b5 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -183,6 +183,24 @@ describe('Plugin', () => {
       plugin.isPriorityGlobal.should.be.true();
     });
 
+    it('should set tags value to an empty array if no key was passed', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.tags.length.should.equal(0);
+    });
+
+    it('should set tags to passed key\'s value', () => {
+      const tags = [{
+        name: 'Delev',
+      }];
+      const plugin = new loot.Plugin({
+        name: 'test',
+        tags,
+      });
+
+      plugin.tags.should.deepEqual(tags);
+    });
+
     it('should set id to the plugins name without spaces', () => {
       const plugin = new loot.Plugin({ name: 'test plugin name' });
 

From 3cf7f9eaf190b2ae72068cfe418fc6c2a34b3e1b Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 10 Feb 2016 18:59:40 +0000
Subject: [PATCH 37/62] Add missing Plugin constructor tests

---
 src/tests/gui/html/js/test_plugin.js | 49 ++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index 6d8462b5..6c46a6c7 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -168,6 +168,21 @@ describe('Plugin', () => {
       plugin.userlist.should.be.deepEqual({});
     });
 
+    it('should set priority to 0 if no key was passed', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.priority.should.equal(0);
+    });
+
+    it('should set priority to passed key\'s value', () => {
+      const plugin = new loot.Plugin({
+        name: 'test',
+        priority: 5,
+      });
+
+      plugin.priority.should.equal(5);
+    });
+
     it('should set isPriorityGlobal value to false if no key was passed', () => {
       const plugin = new loot.Plugin({ name: 'test' });
 
@@ -183,6 +198,25 @@ describe('Plugin', () => {
       plugin.isPriorityGlobal.should.be.true();
     });
 
+    it('should set messages value to an empty array if no key was passed', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.messages.length.should.equal(0);
+    });
+
+    it('should set messages to passed key\'s value', () => {
+      const messages = [{
+        type: 'say',
+        content: 'test message',
+      }];
+      const plugin = new loot.Plugin({
+        name: 'test',
+        messages,
+      });
+
+      plugin.messages.should.deepEqual(messages);
+    });
+
     it('should set tags value to an empty array if no key was passed', () => {
       const plugin = new loot.Plugin({ name: 'test' });
 
@@ -201,6 +235,21 @@ describe('Plugin', () => {
       plugin.tags.should.deepEqual(tags);
     });
 
+    it('should set isDirty value to false if no key was passed', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isDirty.should.be.false();
+    });
+
+    it('should set isDirty to passed key\'s value', () => {
+      const plugin = new loot.Plugin({
+        name: 'test',
+        isDirty: true,
+      });
+
+      plugin.isDirty.should.be.true();
+    });
+
     it('should set id to the plugins name without spaces', () => {
       const plugin = new loot.Plugin({ name: 'test plugin name' });
 

From 03bd1150af7f46b0f6ec1d2431deebb0bed0af73 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 10 Feb 2016 20:50:24 +0000
Subject: [PATCH 38/62] Fix plugin item content not updating

Fire an event whenever a Plugin object's relevant members are set, and
handle the event to update the plugin item content if an item for the
Plugin exists.
---
 src/gui/html/js/init.js              |   1 +
 src/gui/html/js/plugin.js            |  92 ++++++++++-
 src/tests/gui/html/js/test_plugin.js | 239 +++++++++++++++++++++++++++
 3 files changed, 327 insertions(+), 5 deletions(-)

diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 9f192a01..72a3eab1 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -99,6 +99,7 @@
     document.addEventListener('loot-plugin-message-change', Plugin.onContentChange);
     document.addEventListener('loot-plugin-isdirty-change', Plugin.onIsDirtyChange);
     document.addEventListener('loot-plugin-card-content-change', Plugin.onContentChange);
+    document.addEventListener('loot-plugin-item-content-change', Plugin.onItemContentChange);
 
     /* Set up event handlers for game member variable changes. */
     document.addEventListener('loot-game-folder-change', Game.onFolderChange);
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index 6d3102af..ed72bcd8 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -176,10 +176,10 @@
       this.loadsArchive = obj.loadsArchive || false;
 
       this.masterlist = obj.masterlist;
-      this.userlist = obj.userlist;
+      this._userlist = obj.userlist;
 
-      this.priority = obj.priority || 0;
-      this.isPriorityGlobal = obj.isPriorityGlobal || false;
+      this._priority = obj.priority || 0;
+      this._isPriorityGlobal = obj.isPriorityGlobal || false;
       this._messages = obj.messages || [];
       this._tags = obj.tags || [];
       this._isDirty = obj.isDirty || false;
@@ -187,7 +187,7 @@
       /* UI state variables */
       this.id = this.name.replace(/\s+/g, '');
       this.isMenuOpen = false;
-      this.isEditorOpen = false;
+      this._isEditorOpen = false;
       this.isConflictFilterChecked = false;
       this.isSearchResult = false;
     }
@@ -238,6 +238,18 @@
       }));
     }
 
+    _dispatchItemContentChangeEvent() {
+      document.dispatchEvent(new CustomEvent('loot-plugin-item-content-change', {
+        detail: {
+          pluginId: this.id,
+          priority: this.priority,
+          isPriorityGlobal: this.isPriorityGlobal,
+          isEditorOpen: this.isEditorOpen,
+          hasUserEdits: this.hasUserEdits,
+        },
+      }));
+    }
+
     get messages() {
       return this._messages;
     }
@@ -330,7 +342,55 @@
     }
 
     get hasUserEdits() {
-      return this.userlist && Object.keys(this.userlist).length > 1;
+      return this.userlist !== undefined && Object.keys(this.userlist).length > 1;
+    }
+
+    get userlist() {
+      return this._userlist;
+    }
+
+    set userlist(userlist) {
+      if (!_.isEqual(this._userlist, userlist)) {
+        this._userlist = userlist;
+
+        this._dispatchItemContentChangeEvent();
+      }
+    }
+
+    get priority() {
+      return this._priority;
+    }
+
+    set priority(priority) {
+      if (this._priority !== priority) {
+        this._priority = priority;
+
+        this._dispatchItemContentChangeEvent();
+      }
+    }
+
+    get isPriorityGlobal() {
+      return this._isPriorityGlobal;
+    }
+
+    set isPriorityGlobal(isPriorityGlobal) {
+      if (this._isPriorityGlobal !== isPriorityGlobal) {
+        this._isPriorityGlobal = isPriorityGlobal;
+
+        this._dispatchItemContentChangeEvent();
+      }
+    }
+
+    get isEditorOpen() {
+      return this._isEditorOpen;
+    }
+
+    set isEditorOpen(isEditorOpen) {
+      if (this._isEditorOpen !== isEditorOpen) {
+        this._isEditorOpen = isEditorOpen;
+
+        this._dispatchItemContentChangeEvent();
+      }
     }
 
     getCardContent(filters) {
@@ -358,5 +418,27 @@
         card.updateContent();
       }
     }
+
+    static onItemContentChange(evt) {
+      const item = document.getElementById('cardsNav').querySelector(`[data-id="${evt.detail.pluginId}"]`);
+      if (item) {
+        item.setAttribute('priority', evt.detail.priority);
+        if (evt.detail.isPriorityGlobal) {
+          item.setAttribute('is-priority-global', '');
+        } else {
+          item.removeAttribute('is-priority-global');
+        }
+        if (evt.detail.isEditorOpen) {
+          item.setAttribute('is-editor-open', '');
+        } else {
+          item.removeAttribute('is-editor-open');
+        }
+        if (evt.detail.hasUserEdits) {
+          item.setAttribute('has-user-edits', '');
+        } else {
+          item.removeAttribute('has-user-edits');
+        }
+      }
+    }
   };
 }));
diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index 6c46a6c7..ddbbcdce 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -646,6 +646,245 @@ describe('Plugin', () => {
     });
   });
 
+  describe('#userlist', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-item-content-change', handleEvent);
+    });
+
+    it('getting value should return undefined if it has not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      should(plugin.userlist).be.undefined();
+    });
+
+    it('getting value should return the value that was set', () => {
+      const plugin = new loot.Plugin({
+        name: 'test',
+        userlist: {},
+      });
+
+      plugin.userlist.should.deepEqual({});
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.userlist = {};
+
+      plugin.userlist.should.deepEqual({});
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.userlist = plugin.userlist;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        evt.detail.priority.should.equal(plugin.priority);
+        evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
+        evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.userlist = { priority: 1 };
+    });
+  });
+
+  describe('#priority', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-item-content-change', handleEvent);
+    });
+
+    it('getting value should return 0 if it has not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.priority.should.equal(0);
+    });
+
+    it('getting value should return the value that was set', () => {
+      const plugin = new loot.Plugin({
+        name: 'test',
+        priority: 5,
+      });
+
+      plugin.priority.should.equal(5);
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.priority = 5;
+
+      plugin.priority.should.equal(5);
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.priority = plugin.priority;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        evt.detail.priority.should.equal(plugin.priority);
+        evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
+        evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.priority = 5;
+    });
+  });
+
+  describe('#isPriorityGlobal', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-item-content-change', handleEvent);
+    });
+
+    it('getting value should return false if it has not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isPriorityGlobal.should.be.false();
+    });
+
+    it('getting value should return the value that was set', () => {
+      const plugin = new loot.Plugin({
+        name: 'test',
+        isPriorityGlobal: true,
+      });
+
+      plugin.isPriorityGlobal.should.be.true();
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isPriorityGlobal = true;
+
+      plugin.isPriorityGlobal.should.be.true();
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.isPriorityGlobal = plugin.isPriorityGlobal;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        evt.detail.priority.should.equal(plugin.priority);
+        evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
+        evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.isPriorityGlobal = true;
+    });
+  });
+
+  describe('#isEditorOpen', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-item-content-change', handleEvent);
+    });
+
+    it('getting value should return false if it has not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isEditorOpen.should.be.false();
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isEditorOpen = true;
+
+      plugin.isEditorOpen.should.be.true();
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.isEditorOpen = plugin.isEditorOpen;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        evt.detail.priority.should.equal(plugin.priority);
+        evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
+        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
+        evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-item-content-change', handleEvent);
+
+      plugin.isEditorOpen = true;
+    });
+  });
+
   describe('#getCardContent()', () => {
     let plugin;
     beforeEach(() => {

From b875174ab90e33ce1aea1324b64ebfb5753b9699 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Thu, 11 Feb 2016 20:38:58 +0000
Subject: [PATCH 39/62] Fix plugin cards not updating for some data changes

If Plugin.hasUserEdits or Plugin.isSearchResult changes state, the
corresponding plugin card, if present, will be updated.
---
 src/gui/html/elements/loot-plugin-card.html |  3 ++
 src/gui/html/js/plugin.js                   | 15 ++++++-
 src/tests/gui/html/js/test_plugin.js        | 49 +++++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 74e7e39f..5c8c58ee 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -330,6 +330,9 @@ loot-clear-metadata
           this._setTagsContent(cardContent.tags);
           this._setMessagesContent(cardContent.messages);
 
+          this.hasUserEdits = this.data.hasUserEdits;
+          this.isSearchResult = this.data.isSearchResult;
+
           /* Update the conflict filter toggle state. */
           this.$.showOnlyConflicts.checked = this.data.isConflictFilterChecked;
 
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index ed72bcd8..77c52c93 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -189,7 +189,7 @@
       this.isMenuOpen = false;
       this._isEditorOpen = false;
       this.isConflictFilterChecked = false;
-      this.isSearchResult = false;
+      this._isSearchResult = false;
     }
 
     static fromJson(key, value) {
@@ -354,6 +354,7 @@
         this._userlist = userlist;
 
         this._dispatchItemContentChangeEvent();
+        this._dispatchCardContentChangeEvent();
       }
     }
 
@@ -393,6 +394,18 @@
       }
     }
 
+    get isSearchResult() {
+      return this._isSearchResult;
+    }
+
+    set isSearchResult(isSearchResult) {
+      if (this._isSearchResult !== isSearchResult) {
+        this._isSearchResult = isSearchResult;
+
+        this._dispatchCardContentChangeEvent();
+      }
+    }
+
     getCardContent(filters) {
       return new PluginCardContent(this, filters);
     }
diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index ddbbcdce..a80fa77a 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -885,6 +885,55 @@ describe('Plugin', () => {
     });
   });
 
+  describe('#isSearchResult', () => {
+    let handleEvent;
+
+    afterEach(() => {
+      document.removeEventListener('loot-plugin-card-content-change', handleEvent);
+    });
+
+    it('getting value should return false if it has not been set in the constructor', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isSearchResult.should.be.false();
+    });
+
+    it('setting value should store set value', () => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      plugin.isSearchResult = true;
+
+      plugin.isSearchResult.should.be.true();
+    });
+
+    it('setting value to the current value should not fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = () => {
+        done(new Error('Should not have fired an event'));
+      };
+
+      document.addEventListener('loot-plugin-card-content-change', handleEvent);
+
+      plugin.isSearchResult = plugin.isSearchResult;
+
+      setTimeout(done, 100);
+    });
+
+    it('setting value not equal to the current value should fire an event', (done) => {
+      const plugin = new loot.Plugin({ name: 'test' });
+
+      handleEvent = (evt) => {
+        evt.detail.pluginId.should.equal(plugin.id);
+        done();
+      };
+
+      document.addEventListener('loot-plugin-card-content-change', handleEvent);
+
+      plugin.isSearchResult = true;
+    });
+  });
+
   describe('#getCardContent()', () => {
     let plugin;
     beforeEach(() => {

From 2f577482b50fa730553141f129d288a75d4b571e Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Tue, 16 Feb 2016 19:59:48 +0000
Subject: [PATCH 40/62] Use LOOT's fork of <iron-list>

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 0ffbc93b..0e9ac13b 100644
--- a/bower.json
+++ b/bower.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "polymer": "Polymer/polymer#^1.1.0",
     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
-    "iron-list": "PolymerElements/iron-list#^1.0.0",
+    "iron-list": "loot/iron-list#patched-for-loot",
     "iron-pages": "PolymerElements/iron-pages#^1.0.0",
     "paper-button": "PolymerElements/paper-button#^1.0.0",
     "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",

From 370c9713961fa126b7333f512c157790303cfb11 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 17 Feb 2016 18:21:27 +0000
Subject: [PATCH 41/62] Replace <paper-menu> with <loot-menu>

It uses <paper-listbox> internally for better performance, and
automatically deselects items when they are selected, allowing the
same item to be selected repeatedly.
---
 scripts/vulcanize.js                          |  1 +
 src/gui/html/elements/loot-menu.html          | 30 +++++++++++++++++++
 src/gui/html/elements/loot-plugin-card.html   |  6 ++--
 src/gui/html/index.html                       |  5 ++--
 .../gui/html/elements/test_loot-menu.html     | 19 ++++++++++++
 5 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/gui/html/elements/loot-menu.html
 create mode 100644 src/tests/gui/html/elements/test_loot-menu.html

diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index b5ccdf89..650351d6 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -65,6 +65,7 @@ function vulcanizeTests(releasePath) {
     'test_editable-table.html',
     'test_loot-custom-icons.html',
     'test_loot-dropdown-menu.html',
+    'test_loot-menu.html',
     'test_loot-message-dialog.html',
     'test_loot-plugin-card.html',
     'test_loot-plugin-editor.html',
diff --git a/src/gui/html/elements/loot-menu.html b/src/gui/html/elements/loot-menu.html
new file mode 100644
index 00000000..3d72e608
--- /dev/null
+++ b/src/gui/html/elements/loot-menu.html
@@ -0,0 +1,30 @@
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
+
+<dom-module id="loot-menu">
+  <template>
+    <style>
+      ::content > * {
+        cursor: pointer;
+      }
+    </style>
+    <paper-listbox id="menu" multi>
+      <content></content>
+    </paper-listbox>
+  </template>
+  <script>
+    'use strict';
+    Polymer({
+      is: 'loot-menu',
+
+      listeners: {
+        'menu.iron-select': 'onSelect',
+      },
+
+      onSelect(evt) {
+        evt.currentTarget.select(evt.currentTarget.indexOf(evt.detail.item));
+      },
+    });
+  </script>
+</dom-module>
diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 5c8c58ee..40c8c5e1 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -20,7 +20,6 @@ loot-clear-metadata
 <link rel="import" href="../../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../../bower_components/paper-item/paper-icon-item.html">
 <link rel="import" href="../../../../bower_components/paper-material/paper-material.html">
-<link rel="import" href="../../../../bower_components/paper-menu/paper-menu.html">
 <link rel="import" href="../../../../bower_components/paper-menu-button/paper-menu-button.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">
@@ -28,6 +27,7 @@ loot-clear-metadata
 
 <link rel="import" href="loot-plugin-editor.html">
 <link rel="import" href="loot-custom-icons.html">
+<link rel="import" href="loot-menu.html">
 
 <dom-module id="loot-plugin-card">
   <template>
@@ -157,7 +157,7 @@ loot-clear-metadata
           <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
           <paper-menu-button id="menu" opened="{{data.isMenuOpen}}" horizontal-align="right">
             <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
-            <paper-menu class="dropdown-content">
+            <loot-menu class="dropdown-content">
               <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}">Show Only Conflicts</paper-toggle-button>
               <paper-icon-item id="editMetadata">
                 <iron-icon icon="create" item-icon></iron-icon>
@@ -171,7 +171,7 @@ loot-clear-metadata
                 <iron-icon icon="delete" item-icon></iron-icon>
                 Clear User Metadata
               </paper-icon-item>
-            </paper-menu>
+            </loot-menu>
           </paper-menu-button>
         </paper-toolbar>
         <div id="content">
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 0a1957ab..fd51de2d 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -39,7 +39,6 @@
   <link rel="import" href="../../../bower_components/paper-input/paper-input.html">
   <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
   <link rel="import" href="../../../bower_components/paper-item/paper-icon-item.html">
-  <link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
   <link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
   <link rel="import" href="../../../bower_components/paper-progress/paper-progress.html">
   <link rel="import" href="../../../bower_components/paper-toast/paper-toast.html">
@@ -218,7 +217,7 @@
         <paper-tooltip for="showSearch">Search Cards</paper-tooltip>
         <paper-menu-button horizontal-align="right">
           <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
-          <paper-menu class="dropdown-content">
+          <loot-menu class="dropdown-content">
             <paper-icon-item id="redatePluginsButton">
               <iron-icon icon="today" item-icon></iron-icon>
               Redate Plugins
@@ -262,7 +261,7 @@
               <iron-icon icon="close" item-icon></iron-icon>
               Quit
             </paper-icon-item>
-          </paper-menu>
+          </loot-menu>
         </paper-menu-button>
       </paper-toolbar>
       <loot-search-toolbar id="searchBar"></loot-search-toolbar>
diff --git a/src/tests/gui/html/elements/test_loot-menu.html b/src/tests/gui/html/elements/test_loot-menu.html
new file mode 100644
index 00000000..dceef923
--- /dev/null
+++ b/src/tests/gui/html/elements/test_loot-menu.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <title>test_loot-menu.html</title>
+
+  <link rel="import" href="../../../../gui/html/native-shadow-dom.html">
+
+  <link rel="import" href="../../../../../bower_components/paper-item/paper-item.html">
+
+  <link rel="import" href="../../../../gui/html/elements/loot-menu.html">
+</head>
+
+<body>
+  <loot-menu>
+    <paper-item>Note</paper-item>
+    <paper-item>Warning</paper-item>
+    <paper-item>Error</paper-item>
+  </loot-menu>
+</body>

From 7be73eda494631a50aac685884f954ae036f3111 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 17 Feb 2016 18:26:13 +0000
Subject: [PATCH 42/62] Remove plugin menu state tracking

It's no longer necessary, as Polymer 1.x's menu button disables
scrolling while a menu is open.

Removing the data binding also avoids the `Cannot use 'in' operator to
search for 'plugin' in undefined` that would occur when interacting with
the plugin menu.
---
 src/gui/html/elements/loot-plugin-card.html | 2 +-
 src/gui/html/js/plugin.js                   | 1 -
 src/tests/gui/html/js/test_plugin.js        | 6 ------
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 40c8c5e1..da0c4100 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -155,7 +155,7 @@ loot-clear-metadata
           <paper-tooltip for="loadsArchive">Loads Archive</paper-tooltip>
           <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
           <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
-          <paper-menu-button id="menu" opened="{{data.isMenuOpen}}" horizontal-align="right">
+          <paper-menu-button id="menu" horizontal-align="right">
             <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
             <loot-menu class="dropdown-content">
               <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}">Show Only Conflicts</paper-toggle-button>
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index 77c52c93..166e25b9 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -186,7 +186,6 @@
 
       /* UI state variables */
       this.id = this.name.replace(/\s+/g, '');
-      this.isMenuOpen = false;
       this._isEditorOpen = false;
       this.isConflictFilterChecked = false;
       this._isSearchResult = false;
diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index a80fa77a..79b9ed50 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -256,12 +256,6 @@ describe('Plugin', () => {
       plugin.id.should.equal('testpluginname');
     });
 
-    it('should set isMenuOpen to false', () => {
-      const plugin = new loot.Plugin({ name: 'test' });
-
-      plugin.isMenuOpen.should.be.false();
-    });
-
     it('should set isEditorOpen to false', () => {
       const plugin = new loot.Plugin({ name: 'test' });
 

From 4aa1f18ff7dc40a5eac2606e3ef01cc5c5792032 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 3 Feb 2016 18:40:22 +0000
Subject: [PATCH 43/62] Removed theming support

It's not currently functional with Polymer 1.2's CSS Custom
Variables semi-polyfill.
---
 docs/LOOT Readme.html           |   4 --
 resources/ui/css/dark-theme.css | 111 --------------------------------
 scripts/archive.js              |   4 --
 scripts/installer.iss           |   2 -
 scripts/vulcanize.js            |   3 -
 src/gui/html/index.html         |   1 -
 6 files changed, 125 deletions(-)
 delete mode 100644 resources/ui/css/dark-theme.css

diff --git a/docs/LOOT Readme.html b/docs/LOOT Readme.html
index 27f583a8..44e57a73 100644
--- a/docs/LOOT Readme.html	
+++ b/docs/LOOT Readme.html	
@@ -203,7 +203,6 @@ var {
         <li><a href="#usage-editing">Editing Plugin Metadata</a>
         <li><a href="#usage-settings">Editing Settings</a>
     </ol>
-    <li><a href="#themes">Themes</a>
     <li><a href="#contrib">Contributing &amp; Support</a>
     <li><a href="#credits">Credits</a>
     <li><a href="#license">License</a>
@@ -471,9 +470,6 @@ var {
         <tr><td>Install Path Registry Key<td>The registry key, in <code>HKEY_LOCAL_MACHINE</code>, that contains the install path of the game. This is used to obtain the install path if LOOT has no previous record of the game's install path, or LOOT's stored install path is invalid. Either this or an install path must be supplied.
 </table>
 
-<h2 id="themes">Themes</h2>
-<p>LOOT's user interface has experimental support for the use of alternative and custom CSS themes. To use a theme, place its CSS file into the <code>resources/ui/css</code> folder inside LOOT's installation folder, and rename the file to <code>theme.css</code>. LOOT will then load this file when it launches. A dark user interface theme is provided with LOOT: to use it, rename <code>dark-theme.css</code> in the <code>resources/ui/css</code> folder to <code>theme.css</code>. Theme support is experimental because future updates to LOOT's user interface may break existing CSS selectors.</p>
-
 
 <h2 id="contrib">Contributing &amp; Support</h2>
 <p>LOOT is very much a community project, and contributions from its users are very welcome, whether they be metadata, translations, code or anything else. The best way to contribute is to <a href="https://github.com/loot/loot.github.io/wiki/How-To-Contribute">make changes yourself</a> at GitHub! It's the fastest way to get changes you want applied, and you'll get your name automatically immortalised in our <a href="http://loot.github.io/credits/">credits</a>.
diff --git a/resources/ui/css/dark-theme.css b/resources/ui/css/dark-theme.css
deleted file mode 100644
index 7f260501..00000000
--- a/resources/ui/css/dark-theme.css
+++ /dev/null
@@ -1,111 +0,0 @@
-/* Dark theme CSS overrides. */
-html,
-html /deep/ paper-item, html /deep/ core-menu > paper-item,
-html /deep/ paper-dropdown-menu::shadow #label {
-    color: white !important;
-}
-
-html, body {
-    background: black;
-}
-
-html /deep/ paper-item[disabled],
-html /deep/ paper-item[disabled] > core-icon,
-html /deep/ paper-input-decorator::shadow .label-text,
-html /deep/ input::-webkit-input-placeholder,
-html /deep/ table[is=editable-table] paper-icon-button[disabled],
-html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu[disabled]::shadow #label,
-html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu::shadow #arrow {
-    color: rgba(255, 255, 255, 0.3) !important;
-}
-
-html /deep/ paper-item core-icon,
-html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button,
-html /deep/ table[is=editable-table] paper-icon-button,
-html /deep/ loot-plugin-card::shadow core-tooltip:not(#activeTick) > core-icon,
-html /deep/ loot-plugin-card::shadow #conflictsLabel > core-icon,
-html /deep/ loot-plugin-item::shadow #secondary,
-html /deep/ loot-plugin-editor::shadow core-tooltip:not(#activeTick) > core-icon {
-    color: rgba(255, 255, 255, 0.7) !important;
-}
-
-html /deep/ paper-input-decorator::shadow .underline .unfocused-underline,
-.divider {
-    background-color: rgba(255, 255, 255, 0.12) !important;
-}
-
-html /deep/ paper-input-decorator[disabled]::shadow .underline,
-html /deep/ table th,
-html /deep/ paper-dropdown-menu {
-    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
-}
-
-html /deep/ paper-checkbox::shadow #checkbox.checked {
-    border-color: #1A237E !important;
-}
-
-html /deep/ paper-toggle-button::shadow [checked] .toggle-bar {
-    background-color: rgba(26, 35, 126, 0.5) !important;
-}
-
-html /deep/ paper-toggle-button::shadow [checked] .toggle-button,
-html /deep/ paper-checkbox::shadow #checkbox.checked {
-    background-color: #1A237E !important;
-}
-
-html /deep/ paper-toggle-button::shadow [checked] .toggle-ink {
-    color: #1A237E !important;
-}
-
-/* Dark dropdown menus. */
-html /deep/ paper-dropdown::shadow #background,
-loot-dialog,
-loot-message-dialog,
-div[drawer],
-#summary,
-html /deep/ loot-plugin-card::shadow #wrapper,
-html /deep/ loot-plugin-editor::shadow core-selector > * {
-    background: #424242 !important;
-}
-
-/* Dark dialogs. */
-loot-dialog,
-loot-message-dialog {
-    color: white !important;
-}
-
-/* Dark progress bar background. */
-paper-progress::shadow #progressContainer {
-    background-color: #303030 !important;
-}
-
-core-toolbar,
-div[drawer] > div:first-child,
-html /deep/ loot-search::shadow core-toolbar,
-html /deep/ loot-plugin-editor {
-    background: #212121 !important;
-}
-
-#main {
-    background: #303030 !important;
-}
-
-li.error > p,
-li.warn > p {
-    color: black !important;
-}
-
-.version {
-    color: #78909C !important;
-}
-.crc {
-    color: #8D6E63 !important;
-}
-
-html /deep/ loot-plugin-card.search-result::shadow #editor {
-    box-shadow: inset 4px 0 #1A237E !important;
-}
-
-html /deep/ loot-plugin-editor::shadow core-selector > * {
-    border-bottom: 4px solid #212121 !important;
-}
diff --git a/scripts/archive.js b/scripts/archive.js
index c0d9974b..27024f8b 100644
--- a/scripts/archive.js
+++ b/scripts/archive.js
@@ -115,10 +115,6 @@ function createAppArchive(rootPath, releasePath, tempPath, destPath) {
     path.join(releasePath, 'resources', 'ui', 'index.html'),
     path.join(tempPath, 'resources', 'ui', 'index.html')
   );
-  fs.copySync(
-    path.join(rootPath, 'resources', 'ui', 'css', 'dark-theme.css'),
-    path.join(tempPath, 'resources', 'ui', 'css', 'dark-theme.css')
-  );
   fs.copySync(
     path.join(rootPath, 'resources', 'ui', 'fonts'),
     path.join(tempPath, 'resources', 'ui', 'fonts')
diff --git a/scripts/installer.iss b/scripts/installer.iss
index 9c9bc3cd..01d05dd5 100644
--- a/scripts/installer.iss
+++ b/scripts/installer.iss
@@ -108,8 +108,6 @@ DestDir: "{app}\docs\images"; Flags: ignoreversion
 
 Source: "{#buildir}\Release\resources\ui\index.html"; \
 DestDir: "{app}\resources\ui"; Flags: ignoreversion
-Source: "resources\ui\css\dark-theme.css"; \
-DestDir: "{app}\resources\ui\css"; Flags: ignoreversion
 Source: "resources\ui\fonts\*"; \
 DestDir: "{app}\resources\ui\fonts"; Flags: ignoreversion
 
diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js
index 650351d6..2cd7c306 100755
--- a/scripts/vulcanize.js
+++ b/scripts/vulcanize.js
@@ -21,9 +21,6 @@ if (process.argv.length > 3) {
 const vulcanize = new Vulcanize({
   inlineScripts: true,
   inlineCss: true,
-  excludes: [
-    'css/theme.css',
-  ],
 });
 
 function mkdir(dir) {
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index fd51de2d..052e2e12 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -4,7 +4,6 @@
   <title>LOOT</title>
   <link rel="stylesheet" href="css/typography.css" />
   <link rel="stylesheet" href="css/style.css" />
-  <link rel="stylesheet" href="css/theme.css" />
 
   <link rel="import" href="native-shadow-dom.html">
 

From aa2eb2b432001621d64f89be8c61bcf7c071f328 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Thu, 18 Feb 2016 18:41:42 +0000
Subject: [PATCH 44/62] Use LOOT's fork of <iron-dropdown>

---
 bower.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/bower.json b/bower.json
index 0e9ac13b..33a76d0d 100644
--- a/bower.json
+++ b/bower.json
@@ -8,6 +8,7 @@
   ],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.1.0",
+    "iron-dropdown": "loot/iron-dropdown#fix-position-inside-transformed-element",
     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
     "iron-list": "loot/iron-list#patched-for-loot",
     "iron-pages": "PolymerElements/iron-pages#^1.0.0",
@@ -33,5 +34,8 @@
     "jed-gettext-parser": "^1.0.0",
     "marked": "^0.3.2",
     "lodash": "^4.3.0"
+  },
+  "resolutions": {
+    "iron-dropdown": "fix-position-inside-transformed-element"
   }
 }

From b6541b6b354f196f3121fcd2e0476f114c4f38b0 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Fri, 19 Feb 2016 17:29:59 +0000
Subject: [PATCH 45/62] Fix double-clicking an item selecting its text

Cancel the selection on a double-click. This still allows selection by
click-and-drag, which can be useful.
---
 src/gui/html/js/events.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 3cab21aa..cf062dfe 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -354,6 +354,10 @@ function onSidebarClick(evt) {
     document.getElementById('pluginCardList').scrollToIndex(index);
 
     if (evt.type === 'dblclick') {
+      /* Double-clicking can select the item's text, clear the selection in
+         case that has happened. */
+      window.getSelection().removeAllRanges();
+
       const card = document.getElementById(evt.target.getAttribute('data-id'));
       if (!card.classList.contains('flip')) {
         document.getElementById(evt.target.getAttribute('data-id')).onShowEditor();

From 2225fde6df72952ee6eafdee3f1605989b17c7f9 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 11:32:01 +0000
Subject: [PATCH 46/62] Remove most plugin card properties

Manually set card state instead, because it's more performant and using
Polymer's data binding doesn't provide any advantages for the removed
properties.
---
 src/gui/html/elements/loot-plugin-card.html | 62 ++++++---------------
 1 file changed, 18 insertions(+), 44 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index da0c4100..c9c7f7cc 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -44,8 +44,7 @@ loot-clear-metadata
       :host(.highlight) #wrapper {
         outline: 4px solid var(--loot-accent-color);
       }
-      :host([is-search-result]) #front,
-      :host([is-search-result]) #editor {
+      :host(.search-result) #wrapper > * {
         box-shadow: inset 4px 0 var(--loot-primary-color);
       }
       #front {
@@ -80,7 +79,8 @@ loot-clear-metadata
       #activeTick {
         color: green;
       }
-      :host(:not([is-active])) #activeTick {
+      #activeTick[hidden] {
+        display: initial;
         visibility: hidden;
       }
 
@@ -147,13 +147,13 @@ loot-clear-metadata
             <content select=".version"></content>
             <content select=".crc"></content>
           </div>
-          <iron-icon id="isMaster" icon="loot-custom-icons:crown" hidden$="[[!isMaster]]"></iron-icon>
+          <iron-icon id="isMaster" icon="loot-custom-icons:crown"></iron-icon>
           <paper-tooltip for="isMaster">Master File</paper-tooltip>
-          <iron-icon id="emptyPlugin" icon="visibility-off" hidden$="[[!isEmpty]]"></iron-icon>
-          <paper-tooltip for="emptyPlugin">Empty Plugin</paper-tooltip>
-          <iron-icon id="loadsArchive" icon="attachment" hidden$="[[!loadsArchive]]"></iron-icon>
+          <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>
-          <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
+          <iron-icon id="hasUserEdits" icon="account-circle"></iron-icon>
           <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
           <paper-menu-button id="menu" horizontal-align="right">
             <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
@@ -203,36 +203,6 @@ loot-clear-metadata
           notify: true,
           observer: '_dataChanged',
         },
-        isActive: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-        isMaster: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-        isEmpty: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-        loadsArchive: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-        hasUserEdits: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-        isSearchResult: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
       },
 
       attached() {
@@ -277,11 +247,14 @@ loot-clear-metadata
           /* Initialise the card content data. */
           this.updateContent();
 
-          /* Also set highlight if the conflict filter is active. */
-          this.classList.toggle('highlight', newValue.isConflictFilterChecked);
+          /* Set icons' visibility */
+          this.$.activeTick.hidden = !this.data.isActive;
+          this.$.isMaster.hidden = !this.data.isMaster;
+          this.$.isEmpty.hidden = !this.data.isEmpty;
+          this.$.loadsArchive.hidden = !this.data.loadsArchive;
 
-          /* Set highlight if the plugin is a search result. */
-          this.classList.toggle('search-result', newValue.isSearchResult);
+          /* Also set highlight if the conflict filter is active. */
+          this.classList.toggle('highlight', this.data.isConflictFilterChecked);
         }
       },
 
@@ -330,8 +303,9 @@ loot-clear-metadata
           this._setTagsContent(cardContent.tags);
           this._setMessagesContent(cardContent.messages);
 
-          this.hasUserEdits = this.data.hasUserEdits;
-          this.isSearchResult = this.data.isSearchResult;
+          this.$.hasUserEdits.hidden = !this.data.hasUserEdits;
+          /* Set highlight if the plugin is a search result. */
+          this.classList.toggle('search-result', this.data.isSearchResult);
 
           /* Update the conflict filter toggle state. */
           this.$.showOnlyConflicts.checked = this.data.isConflictFilterChecked;

From 8ba713bf1d266a1af4749187fc753cf146c57a99 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 11:33:38 +0000
Subject: [PATCH 47/62] Make plugin card content updates more granular

Separate styling and content update functions, and make potential
variable-height content changes optional. This improves performance.
---
 src/gui/html/elements/loot-plugin-card.html | 26 +++++++++++-------
 src/gui/html/js/helpers.js                  |  2 +-
 src/gui/html/js/init.js                     |  1 +
 src/gui/html/js/plugin.js                   | 29 ++++++++++++++++-----
 4 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index c9c7f7cc..1ab20efa 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -245,7 +245,8 @@ loot-clear-metadata
           }
 
           /* Initialise the card content data. */
-          this.updateContent();
+          this.updateContent(true);
+          this.updateStyling();
 
           /* Set icons' visibility */
           this.$.activeTick.hidden = !this.data.isActive;
@@ -290,7 +291,7 @@ loot-clear-metadata
         }
       },
 
-      updateContent() {
+      updateContent(updateBodyContent) {
         if (this.data) {
           const cardContent = this.data.getCardContent(loot.filters);
 
@@ -300,18 +301,25 @@ loot-clear-metadata
           this.getElementsByClassName('crc')[0].textContent = cardContent.crc;
           this.$.editor.getElementsByClassName('crc')[0].textContent = cardContent.crc;
 
-          this._setTagsContent(cardContent.tags);
-          this._setMessagesContent(cardContent.messages);
+          if (updateBodyContent) {
+            this._setTagsContent(cardContent.tags);
+            this._setMessagesContent(cardContent.messages);
 
-          this.$.hasUserEdits.hidden = !this.data.hasUserEdits;
-          /* Set highlight if the plugin is a search result. */
-          this.classList.toggle('search-result', this.data.isSearchResult);
+            /* Notify that this card (may have) changed size. */
+            this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+          }
 
           /* Update the conflict filter toggle state. */
           this.$.showOnlyConflicts.checked = this.data.isConflictFilterChecked;
+        }
+      },
 
-          /* Notify that this card (may have) changed size. */
-          this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+      updateStyling() {
+        if (this.data) {
+          this.$.hasUserEdits.hidden = !this.data.hasUserEdits;
+
+          /* Set highlight if the plugin is a search result. */
+          this.classList.toggle('search-result', this.data.isSearchResult);
         }
       },
 
diff --git a/src/gui/html/js/helpers.js b/src/gui/html/js/helpers.js
index a9ca5574..04ebc1d6 100644
--- a/src/gui/html/js/helpers.js
+++ b/src/gui/html/js/helpers.js
@@ -50,7 +50,7 @@ function filterPluginData(plugins, filters) {
     const pluginCards = document.getElementById('pluginCardList').children;
     for (let i = 0; i < pluginCards.length; ++i) {
       if (pluginCards[i].data) {
-        pluginCards[i].updateContent();
+        pluginCards[i].updateContent(true);
       }
     }
     document.getElementById('cardsNav').notifyResize();
diff --git a/src/gui/html/js/init.js b/src/gui/html/js/init.js
index 72a3eab1..598bfd8e 100644
--- a/src/gui/html/js/init.js
+++ b/src/gui/html/js/init.js
@@ -99,6 +99,7 @@
     document.addEventListener('loot-plugin-message-change', Plugin.onContentChange);
     document.addEventListener('loot-plugin-isdirty-change', Plugin.onIsDirtyChange);
     document.addEventListener('loot-plugin-card-content-change', Plugin.onContentChange);
+    document.addEventListener('loot-plugin-card-styling-change', Plugin.onCardStylingChange);
     document.addEventListener('loot-plugin-item-content-change', Plugin.onItemContentChange);
 
     /* Set up event handlers for game member variable changes. */
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index 166e25b9..590adaad 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -231,8 +231,17 @@
       return rowData;
     }
 
-    _dispatchCardContentChangeEvent() {
+    _dispatchCardContentChangeEvent(mayChangeCardHeight) {
       document.dispatchEvent(new CustomEvent('loot-plugin-card-content-change', {
+        detail: {
+          pluginId: this.id,
+          mayChangeCardHeight,
+        },
+      }));
+    }
+
+    _dispatchCardStylingChangeEvent() {
+      document.dispatchEvent(new CustomEvent('loot-plugin-card-styling-change', {
         detail: { pluginId: this.id },
       }));
     }
@@ -291,6 +300,7 @@
         document.dispatchEvent(new CustomEvent('loot-plugin-message-change', {
           detail: {
             pluginId: this.id,
+            mayChangeCardHeight: true,
             totalDiff: newTotal - oldTotal,
             warningDiff: newWarns - oldWarns,
             errorDiff: newErrs - oldErrs,
@@ -324,7 +334,7 @@
       if (this._crc !== crc) {
         this._crc = crc;
 
-        this._dispatchCardContentChangeEvent();
+        this._dispatchCardContentChangeEvent(false);
       }
     }
 
@@ -336,7 +346,7 @@
       if (!_.isEqual(this._tags, tags)) {
         this._tags = tags;
 
-        this._dispatchCardContentChangeEvent();
+        this._dispatchCardContentChangeEvent(true);
       }
     }
 
@@ -353,7 +363,7 @@
         this._userlist = userlist;
 
         this._dispatchItemContentChangeEvent();
-        this._dispatchCardContentChangeEvent();
+        this._dispatchCardStylingChangeEvent();
       }
     }
 
@@ -401,7 +411,7 @@
       if (this._isSearchResult !== isSearchResult) {
         this._isSearchResult = isSearchResult;
 
-        this._dispatchCardContentChangeEvent();
+        this._dispatchCardStylingChangeEvent();
       }
     }
 
@@ -427,7 +437,14 @@
     static onContentChange(evt) {
       const card = document.getElementById(evt.detail.pluginId);
       if (card) {
-        card.updateContent();
+        card.updateContent(evt.detail.mayChangeCardHeight);
+      }
+    }
+
+    static onCardStylingChange(evt) {
+      const card = document.getElementById(evt.detail.pluginId);
+      if (card) {
+        card.updateStyling();
       }
     }
 

From 880cbb3373fad3a230da728c78e08ae3962648ae Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 16:19:10 +0000
Subject: [PATCH 48/62] Move metadata editor out of card list

Replace the per-card metadata editors with a single metadata editor that
is displayed below the card list, fixed to the bottom of the window.

Remove the CRC, version and plugin icons from the editor. Change the
editor toolbar background to a light blue, and remove the content area
borders.
---
 src/gui/html/css/typography.css               |   1 -
 src/gui/html/elements/loot-plugin-card.html   | 186 ++++--------------
 src/gui/html/elements/loot-plugin-editor.html |  61 +-----
 src/gui/html/index.html                       |   3 +
 src/gui/html/js/events.js                     | 121 ++++++------
 src/gui/html/js/l10n.js                       |   5 -
 6 files changed, 108 insertions(+), 269 deletions(-)

diff --git a/src/gui/html/css/typography.css b/src/gui/html/css/typography.css
index 44a62702..63bba52b 100644
--- a/src/gui/html/css/typography.css
+++ b/src/gui/html/css/typography.css
@@ -127,7 +127,6 @@ html {
 }
 h1 {
     font-weight: 400;
-    color: rgba(0, 0, 0, 0.54);
 }
 #summary > h1 {
     font-size: 1.143rem;
diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 1ab20efa..adeb616e 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -32,44 +32,19 @@ loot-clear-metadata
 <dom-module id="loot-plugin-card">
   <template>
     <style>
-      /* Host and front/editor styling. */
+      /* Host styling. */
       #wrapper {
         display: block;
         background: white;
         margin: 0 8px 8px 8px;
         position: relative;
-        transition: 0.6s;
-        transform-style: preserve-3d;
       }
       :host(.highlight) #wrapper {
         outline: 4px solid var(--loot-accent-color);
       }
-      :host(.search-result) #wrapper > * {
+      :host(.search-result) #wrapper {
         box-shadow: inset 4px 0 var(--loot-primary-color);
       }
-      #front {
-        display: block;
-        backface-visibility: hidden;
-      }
-      #editor {
-        transform: rotateY(180deg);
-        display:none;
-        backface-visibility: hidden;
-      }
-
-      /* Flip animation styling. */
-      :host(.flip) #wrapper {
-        transform: rotateY(180deg);
-      }
-      :host(.flip) #front  {
-        display: none;
-      }
-      :host(.flip) #editor  {
-        display: block;
-      }
-      :host(.fastflip) #wrapper {
-        transition-duration: 1ms;
-      }
 
       /* Icon styling. */
       iron-icon {
@@ -138,53 +113,46 @@ loot-clear-metadata
       }
     </style>
     <paper-material id="wrapper" elevation="1">
-      <section id="front">
-        <paper-toolbar>
-          <iron-icon id="activeTick" icon="check"></iron-icon>
-          <paper-tooltip for="activeTick">Active Plugin</paper-tooltip>
-          <div id="title">
-            <content select="h1"></content>
-            <content select=".version"></content>
-            <content select=".crc"></content>
-          </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>
-          <iron-icon id="hasUserEdits" icon="account-circle"></iron-icon>
-          <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
-          <paper-menu-button id="menu" horizontal-align="right">
-            <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
-            <loot-menu class="dropdown-content">
-              <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}">Show Only Conflicts</paper-toggle-button>
-              <paper-icon-item id="editMetadata">
-                <iron-icon icon="create" item-icon></iron-icon>
-                Edit Metadata
-              </paper-icon-item>
-              <paper-icon-item id="copyMetadata">
-                <iron-icon icon="content-copy" item-icon></iron-icon>
-                Copy Metadata
-              </paper-icon-item>
-              <paper-icon-item id="clearMetadata">
-                <iron-icon icon="delete" item-icon></iron-icon>
-                Clear User Metadata
-              </paper-icon-item>
-            </loot-menu>
-          </paper-menu-button>
-        </paper-toolbar>
-        <div id="content">
-          <content select=".tag.add"></content>
-          <content select=".tag.remove"></content>
-          <content></content>
+      <paper-toolbar>
+        <iron-icon id="activeTick" icon="check"></iron-icon>
+        <paper-tooltip for="activeTick">Active Plugin</paper-tooltip>
+        <div id="title">
+          <content select="h1"></content>
+          <content select=".version"></content>
+          <content select=".crc"></content>
         </div>
-      </section>
-      <loot-plugin-editor id="editor">
-        <h1>[[data.name]]</h1>
-        <span class="version"></span>
-        <span class="crc"></span>
-      </loot-plugin-editor>
+        <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>
+        <iron-icon id="hasUserEdits" icon="account-circle"></iron-icon>
+        <paper-tooltip for="hasUserEdits">Has User Metadata</paper-tooltip>
+        <paper-menu-button id="menu" horizontal-align="right">
+          <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
+          <loot-menu class="dropdown-content">
+            <paper-toggle-button id="showOnlyConflicts" checked="{{data.isConflictFilterChecked}}">Show Only Conflicts</paper-toggle-button>
+            <paper-icon-item id="editMetadata">
+              <iron-icon icon="create" item-icon></iron-icon>
+              Edit Metadata
+            </paper-icon-item>
+            <paper-icon-item id="copyMetadata">
+              <iron-icon icon="content-copy" item-icon></iron-icon>
+              Copy Metadata
+            </paper-icon-item>
+            <paper-icon-item id="clearMetadata">
+              <iron-icon icon="delete" item-icon></iron-icon>
+              Clear User Metadata
+            </paper-icon-item>
+          </loot-menu>
+        </paper-menu-button>
+      </paper-toolbar>
+      <div id="content">
+        <content select=".tag.add"></content>
+        <content select=".tag.remove"></content>
+        <content></content>
+      </div>
     </paper-material>
   </template>
   <script>
@@ -208,42 +176,19 @@ loot-clear-metadata
       attached() {
         this.$.showOnlyConflicts.addEventListener('change', this._onShowOnlyConflicts);
         this.$.editMetadata.addEventListener('click', this.onShowEditor);
-        this.$.editor.addEventListener('loot-editor-close', this._onHideEditor);
         this.$.copyMetadata.addEventListener('click', this._onCopyMetadata);
         this.$.clearMetadata.addEventListener('click', this._onClearMetadata);
-
-        this.addEventListener('transitionend', this._onFlipEnd);
       },
 
       detached() {
         this.$.showOnlyConflicts.removeEventListener('change', this._onShowOnlyConflicts);
         this.$.editMetadata.removeEventListener('click', this.onShowEditor);
-        this.$.editor.removeEventListener('loot-editor-close', this._onHideEditor);
         this.$.copyMetadata.removeEventListener('click', this._onCopyMetadata);
         this.$.clearMetadata.removeEventListener('click', this._onClearMetadata);
-
-        this.removeEventListener('transitionend', this._onFlipEnd);
       },
 
       _dataChanged(newValue, oldValue) {
         if (newValue) {
-          if (newValue.isEditorOpen) {
-            /* Record existing data. */
-            if (oldValue) {
-              oldValue.editor = this.readFromEditor(oldValue);
-            }
-            /* Share the data with the editor. */
-            this.$.editor.setEditorData(newValue);
-          }
-
-          /* Set the card flip state. */
-          if (this.classList.contains('flip') !== newValue.isEditorOpen) {
-            /* Temporarily speed up the flip effect, as otherwise fast
-               scrolling lets the user see the end of it. */
-            this.classList.add('fastflip');
-            this.classList.toggle('flip');
-          }
-
           /* Initialise the card content data. */
           this.updateContent(true);
           this.updateStyling();
@@ -296,10 +241,8 @@ loot-clear-metadata
           const cardContent = this.data.getCardContent(loot.filters);
 
           this.getElementsByClassName('version')[0].textContent = cardContent.version;
-          this.$.editor.getElementsByClassName('version')[0].textContent = cardContent.version;
 
           this.getElementsByClassName('crc')[0].textContent = cardContent.crc;
-          this.$.editor.getElementsByClassName('crc')[0].textContent = cardContent.crc;
 
           if (updateBodyContent) {
             this._setTagsContent(cardContent.tags);
@@ -327,56 +270,11 @@ loot-clear-metadata
         return this.getElementsByTagName('h1')[0].textContent;
       },
 
-      _onFlipEnd() {
-        /* Remove fastflip class if present. This also fires when the menu is
-           opened or closed, but that isn't an issue. */
-        this.classList.remove('fastflip');
-      },
-
       onShowEditor() {
-        let card;
-        if (this.tagName === 'LOOT-PLUGIN-CARD') {
-          card = this;
-        } else {
-          card = getMenuItemCard(this);
-        }
-
-        /* If the editor hasn't already been opened, its data is not yet set, so do that now. */
-        if (!card.data.isEditorOpen && !card.data.editor) {
-          card.$.editor.setEditorData(card.data);
-        }
-
-        card.data.isEditorOpen = true;
-
-        card.classList.toggle('flip');
-
         /* Fire an open event, so that the UI can enter edit mode. */
-        card.dispatchEvent(new CustomEvent('loot-editor-open', {
+        this.dispatchEvent(new CustomEvent('loot-editor-open', {
           bubbles: true,
         }));
-
-        /* Notify that this card (may have) changed size. */
-        card.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
-      },
-
-      _onHideEditor() {
-        let card;
-        if (this.tagName === 'LOOT-PLUGIN-CARD') {
-          card = this;
-        } else {
-          card = getMenuItemCard(this);
-        }
-
-        /* Now hide editor. */
-        card.classList.toggle('flip');
-        card.data.isEditorOpen = false;
-
-        /* Notify that this card (may have) changed size. */
-        card.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
-      },
-
-      readFromEditor(oldData) {
-        return this.$.editor.readFromEditor(oldData);
       },
 
       _onShowOnlyConflicts(evt) {
diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index 5e5a4d5f..f3c02946 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -26,6 +26,11 @@ loot-editor-close
 <dom-module id="loot-plugin-editor">
   <template>
     <style>
+      :host {
+        position: relative;
+        @apply(--shadow-elevation-2dp);
+      }
+
       /* Material Design for non-button icons. */
       iron-icon {
         color: var(--loot-secondary-text-color);
@@ -36,13 +41,6 @@ loot-editor-close
       [hidden] {
         display: none;
       }
-      #activeTick {
-        color: green;
-      }
-      #activeTick[hidden] {
-        display: initial;
-        visibility: hidden;
-      }
       #accept {
         color: var(--loot-accent-color);
       }
@@ -51,23 +49,10 @@ loot-editor-close
       }
 
       /* 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 > div {
@@ -85,19 +70,12 @@ loot-editor-close
 
       /* Misc Styling. */
       paper-toolbar.medium-tall {
-        --paper-toolbar-background: #CFD4E9;
+        --paper-toolbar-background: var(--paper-blue-50);
         --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;
+        padding: 8px 16px;
       }
       iron-pages > div > table[is=editable-table] th {
         padding-top: 8px;
@@ -116,23 +94,9 @@ loot-editor-close
       }
     </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>
@@ -375,12 +339,7 @@ loot-editor-close
 
       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;
+        this.querySelector('h1').textContent = newData.name;
 
         /* There may be existing recorded data from a previous instance of the
            editor, so use that for userlist and priority data if so. */
@@ -401,10 +360,6 @@ loot-editor-close
           };
         }
 
-        /* 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;
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 052e2e12..c5e82030 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -332,6 +332,9 @@
           <!-- Generated <loot-plugin-card> elements go here. -->
         </iron-list>
       </div>
+      <loot-plugin-editor id="editor" hidden>
+        <h1></h1>
+      </loot-plugin-editor>
     </div>
   </paper-drawer-panel>
   <paper-toast id="toast"></paper-toast>
diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index cf062dfe..61022883 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -414,59 +414,55 @@ function onShowSettingsDialog() {
 }
 
 function onEditorOpen(evt) {
-  /* Update the size of the card in the iron-list. */
-  document.getElementById('pluginCardList').updateSizeForItem(evt.target.data);
+  /* Set the editor data. */
+  const editor = document.getElementById('editor');
+  editor.setEditorData(evt.target.data);
 
-  /* Enable priority hover in plugins list and enable header
-     buttons if this is the only editor instance. */
-  let numEditors = 0;
-  if (document.body.hasAttribute('data-editors')) {
-    numEditors = parseInt(document.body.getAttribute('data-editors'), 10);
-  }
-  ++numEditors;
-
-  if (numEditors === 1) {
-    /* Set up drag 'n' drop event handlers. */
-    const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
-    for (let i = 0; i < elements.length; ++i) {
-      elements[i].draggable = true;
-      elements[i].addEventListener('dragstart', elements[i].onDragStart);
-    }
-
-    /* Disable the toolbar elements. */
-    document.getElementById('wipeUserlistButton').setAttribute('disabled', '');
-    document.getElementById('copyContentButton').setAttribute('disabled', '');
-    document.getElementById('refreshContentButton').setAttribute('disabled', '');
-    document.getElementById('settingsButton').setAttribute('disabled', '');
-    document.getElementById('gameMenu').setAttribute('disabled', '');
-    document.getElementById('updateMasterlistButton').setAttribute('disabled', '');
-    document.getElementById('sortButton').setAttribute('disabled', '');
-  }
-  document.body.setAttribute('data-editors', numEditors);
+  /* Set body attribute so that sidebar items are styled correctly. */
+  document.body.setAttribute('data-editors', true);
   document.getElementById('cardsNav').notifyResize();
 
+  /* Unhide editor. */
+  editor.hidden = false;
+
+  /* Set up drag 'n' drop event handlers. */
+  const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+  for (let i = 0; i < elements.length; ++i) {
+    elements[i].draggable = true;
+    elements[i].addEventListener('dragstart', elements[i].onDragStart);
+  }
+
+  /* Disable the toolbar elements. */
+  document.getElementById('wipeUserlistButton').setAttribute('disabled', '');
+  document.getElementById('copyContentButton').setAttribute('disabled', '');
+  document.getElementById('refreshContentButton').setAttribute('disabled', '');
+  document.getElementById('settingsButton').setAttribute('disabled', '');
+  document.getElementById('gameMenu').setAttribute('disabled', '');
+  document.getElementById('updateMasterlistButton').setAttribute('disabled', '');
+  document.getElementById('sortButton').setAttribute('disabled', '');
+
   return loot.query('editorOpened').catch(handlePromiseError);
 }
 function onEditorClose(evt) {
-  /* Update the size of the card in the iron-list. */
-  document.getElementById('pluginCardList').updateSizeForItem(evt.target.data);
-
   /* evt.detail is true if the apply button was pressed. */
   let promise;
   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. */
-    const edits = evt.target.readFromEditor(evt.target.data);
+    const plugin = loot.game.plugins.find((item) => {
+      return item.name === evt.target.querySelector('h1').textContent;
+    })
+    const edits = evt.target.readFromEditor(plugin);
     promise = loot.query('editorClosed', edits).then(JSON.parse).then((result) => {
       if (result) {
-        evt.target.data.priority = result.priority;
-        evt.target.data.isPriorityGlobal = result.isPriorityGlobal;
-        evt.target.data.messages = result.messages;
-        evt.target.data.tags = result.tags;
-        evt.target.data.isDirty = result.isDirty;
+        plugin.priority = result.priority;
+        plugin.isPriorityGlobal = result.isPriorityGlobal;
+        plugin.messages = result.messages;
+        plugin.tags = result.tags;
+        plugin.isDirty = result.isDirty;
 
-        evt.target.data.userlist = edits.userlist;
+        plugin.userlist = edits.userlist;
 
         /* Now perform search again. If there is no current search, this won't
            do anything. */
@@ -479,35 +475,28 @@ function onEditorClose(evt) {
     promise = loot.query('editorClosed');
   }
   promise.then(() => {
-    delete evt.target.data.editor;
-
-    /* Disable priority hover in plugins list and enable header
-       buttons if this is the only editor instance. */
-    let numEditors = parseInt(document.body.getAttribute('data-editors'), 10);
-    --numEditors;
-
-    if (numEditors === 0) {
-      /* Remove drag 'n' drop event handlers. */
-      const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
-      for (let i = 0; i < elements.length; ++i) {
-        elements[i].removeAttribute('draggable');
-        elements[i].removeEventListener('dragstart', elements[i].onDragStart);
-      }
-
-      document.body.removeAttribute('data-editors');
-
-      /* Re-enable toolbar elements. */
-      document.getElementById('wipeUserlistButton').removeAttribute('disabled');
-      document.getElementById('copyContentButton').removeAttribute('disabled');
-      document.getElementById('refreshContentButton').removeAttribute('disabled');
-      document.getElementById('settingsButton').removeAttribute('disabled');
-      document.getElementById('gameMenu').removeAttribute('disabled');
-      document.getElementById('updateMasterlistButton').removeAttribute('disabled');
-      document.getElementById('sortButton').removeAttribute('disabled');
-    } else {
-      document.body.setAttribute('data-editors', numEditors);
-    }
+    /* Remove body attribute so that sidebar items are styled correctly. */
+    document.body.removeAttribute('data-editors');
     document.getElementById('cardsNav').notifyResize();
+
+    /* Hide editor. */
+    evt.target.hidden = true;
+
+    /* Remove drag 'n' drop event handlers. */
+    const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
+    for (let i = 0; i < elements.length; ++i) {
+      elements[i].removeAttribute('draggable');
+      elements[i].removeEventListener('dragstart', elements[i].onDragStart);
+    }
+
+    /* Re-enable toolbar elements. */
+    document.getElementById('wipeUserlistButton').removeAttribute('disabled');
+    document.getElementById('copyContentButton').removeAttribute('disabled');
+    document.getElementById('refreshContentButton').removeAttribute('disabled');
+    document.getElementById('settingsButton').removeAttribute('disabled');
+    document.getElementById('gameMenu').removeAttribute('disabled');
+    document.getElementById('updateMasterlistButton').removeAttribute('disabled');
+    document.getElementById('sortButton').removeAttribute('disabled');
   }).catch(handlePromiseError);
 }
 function undoConflictsFilter() {
diff --git a/src/gui/html/js/l10n.js b/src/gui/html/js/l10n.js
index 7b860ce2..1fe3eafc 100644
--- a/src/gui/html/js/l10n.js
+++ b/src/gui/html/js/l10n.js
@@ -30,11 +30,6 @@
     /* Plugin editor template. */
     const pluginEditor = document.getElementById('loot-plugin-editor').querySelector('template').content;
 
-    pluginEditor.querySelector('paper-tooltip[for=activeTick]').textContent = l10n.translate('Active Plugin');
-    pluginEditor.querySelector('paper-tooltip[for=isMaster]').textContent = l10n.translate('Master File');
-    pluginEditor.querySelector('paper-tooltip[for=isEmpty]').textContent = l10n.translate('Empty Plugin');
-    pluginEditor.querySelector('paper-tooltip[for=loadsArchive]').textContent = l10n.translate('Loads Archive');
-
     pluginEditor.getElementById('enableEdits').previousElementSibling.textContent = l10n.translate('Enable Edits');
     pluginEditor.getElementById('isPriorityGlobal').previousElementSibling.textContent = l10n.translate('Global Priority');
     pluginEditor.querySelector('paper-tooltip[for=isPriorityGlobal]').textContent = l10n.translate('Global priorities are compared against all other plugins. Normal priorities are compared against only conflicting plugins.');

From a3e022a0d71cdb9bf62d0835241489e9c540b64f Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 16:23:38 +0000
Subject: [PATCH 49/62] Remove editor state tracking

Now that there is only one editor, and it doesn't get automatically
recycled as before, the state tracking is unnecessary.
---
 src/gui/html/elements/loot-plugin-item.html | 39 +------------
 src/gui/html/index.html                     |  1 -
 src/gui/html/js/l10n.js                     |  1 -
 src/gui/html/js/plugin.js                   | 19 -------
 src/tests/gui/html/js/test_plugin.js        | 62 ---------------------
 5 files changed, 2 insertions(+), 120 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-item.html b/src/gui/html/elements/loot-plugin-item.html
index 9fef4523..53fe141f 100644
--- a/src/gui/html/elements/loot-plugin-item.html
+++ b/src/gui/html/elements/loot-plugin-item.html
@@ -12,28 +12,9 @@
   <template>
     <style>
       /* Flip effect for user metadata / editor open icons. */
-      #flipper {
-        transform-style: preserve-3d;
-        transition: 0.6s;
-        overflow: visible;
-      }
-      #flipper.flipped {
-        transform: rotateY(180deg);
-      }
-      #hasUserEdits,
-      #editorIsOpen {
+      #hasUserEdits {
         display: block;
         margin-right: 0;
-        backface-visibility: hidden;
-      }
-      #hasUserEdits {
-        transform: translateZ(1px);
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-      #editorIsOpen {
-        transform: rotateY(180deg) translateZ(-1px);
       }
 
       /* paper-item (two-line) */
@@ -104,12 +85,8 @@
           <span id="priority" hidden$="[[!priority]]">[[priority]]</span>
         </div>
       </paper-item-body>
-      <paper-tooltip for="editorIsOpen" position="left">Editor Is Open</paper-tooltip>
+      <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
       <paper-tooltip for="hasUserEdits" position="left">Has User Metadata</paper-tooltip>
-      <div id="flipper" class$="[[computeFlipperClass(isEditorOpen)]]">
-        <iron-icon id="editorIsOpen" icon="create"></iron-icon>
-        <iron-icon id="hasUserEdits" icon="account-circle" hidden$="[[!hasUserEdits]]"></iron-icon>
-      </div>
     </paper-item>
   </template>
   <script>
@@ -127,11 +104,6 @@
           value: false,
           reflectToAttribute: true,
         },
-        isEditorOpen: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
         hasUserEdits: {
           type: Boolean,
           value: false,
@@ -139,13 +111,6 @@
         },
       },
 
-      computeFlipperClass(isEditorOpen) {
-        if (isEditorOpen) {
-          return 'flipped';
-        }
-        return '';
-      },
-
       getName() {
         return this.textContent.trim();
       },
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index c5e82030..5b7434c6 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -167,7 +167,6 @@
                               data-index$="[[index]]"
                               priority="[[item.priority]]"
                               is-priority-global$="[[item.isPriorityGlobal]]"
-                              is-editor-open$="[[item.isEditorOpen]]"
                               has-user-edits$="[[item.hasUserEdits]]">[[item.name]]</loot-plugin-item>
           </template>
           <!-- Generated <loot-plugin-item> elements go here. -->
diff --git a/src/gui/html/js/l10n.js b/src/gui/html/js/l10n.js
index 1fe3eafc..e544eeb8 100644
--- a/src/gui/html/js/l10n.js
+++ b/src/gui/html/js/l10n.js
@@ -84,7 +84,6 @@
 
     pluginItem.querySelector('paper-tooltip[for=globalPriorityIcon]').textContent = l10n.translate('Global Priority');
     pluginItem.querySelector('paper-tooltip[for=hasUserEdits]').textContent = l10n.translate('Has User Metadata');
-    pluginItem.querySelector('paper-tooltip[for=editorIsOpen]').textContent = l10n.translate('Editor Is Open');
   }
 
   function translateMessageDialogTemplate(l10n) {
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index 590adaad..e4f1cbea 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -186,7 +186,6 @@
 
       /* UI state variables */
       this.id = this.name.replace(/\s+/g, '');
-      this._isEditorOpen = false;
       this.isConflictFilterChecked = false;
       this._isSearchResult = false;
     }
@@ -252,7 +251,6 @@
           pluginId: this.id,
           priority: this.priority,
           isPriorityGlobal: this.isPriorityGlobal,
-          isEditorOpen: this.isEditorOpen,
           hasUserEdits: this.hasUserEdits,
         },
       }));
@@ -391,18 +389,6 @@
       }
     }
 
-    get isEditorOpen() {
-      return this._isEditorOpen;
-    }
-
-    set isEditorOpen(isEditorOpen) {
-      if (this._isEditorOpen !== isEditorOpen) {
-        this._isEditorOpen = isEditorOpen;
-
-        this._dispatchItemContentChangeEvent();
-      }
-    }
-
     get isSearchResult() {
       return this._isSearchResult;
     }
@@ -457,11 +443,6 @@
         } else {
           item.removeAttribute('is-priority-global');
         }
-        if (evt.detail.isEditorOpen) {
-          item.setAttribute('is-editor-open', '');
-        } else {
-          item.removeAttribute('is-editor-open');
-        }
         if (evt.detail.hasUserEdits) {
           item.setAttribute('has-user-edits', '');
         } else {
diff --git a/src/tests/gui/html/js/test_plugin.js b/src/tests/gui/html/js/test_plugin.js
index 79b9ed50..dad49226 100644
--- a/src/tests/gui/html/js/test_plugin.js
+++ b/src/tests/gui/html/js/test_plugin.js
@@ -256,12 +256,6 @@ describe('Plugin', () => {
       plugin.id.should.equal('testpluginname');
     });
 
-    it('should set isEditorOpen to false', () => {
-      const plugin = new loot.Plugin({ name: 'test' });
-
-      plugin.isEditorOpen.should.be.false();
-    });
-
     it('should set isConflictFilterChecked to false', () => {
       const plugin = new loot.Plugin({ name: 'test' });
 
@@ -691,7 +685,6 @@ describe('Plugin', () => {
         evt.detail.pluginId.should.equal(plugin.id);
         evt.detail.priority.should.equal(plugin.priority);
         evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
-        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
         evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
         done();
       };
@@ -753,7 +746,6 @@ describe('Plugin', () => {
         evt.detail.pluginId.should.equal(plugin.id);
         evt.detail.priority.should.equal(plugin.priority);
         evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
-        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
         evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
         done();
       };
@@ -815,7 +807,6 @@ describe('Plugin', () => {
         evt.detail.pluginId.should.equal(plugin.id);
         evt.detail.priority.should.equal(plugin.priority);
         evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
-        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
         evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
         done();
       };
@@ -826,59 +817,6 @@ describe('Plugin', () => {
     });
   });
 
-  describe('#isEditorOpen', () => {
-    let handleEvent;
-
-    afterEach(() => {
-      document.removeEventListener('loot-plugin-item-content-change', handleEvent);
-    });
-
-    it('getting value should return false if it has not been set in the constructor', () => {
-      const plugin = new loot.Plugin({ name: 'test' });
-
-      plugin.isEditorOpen.should.be.false();
-    });
-
-    it('setting value should store set value', () => {
-      const plugin = new loot.Plugin({ name: 'test' });
-
-      plugin.isEditorOpen = true;
-
-      plugin.isEditorOpen.should.be.true();
-    });
-
-    it('setting value to the current value should not fire an event', (done) => {
-      const plugin = new loot.Plugin({ name: 'test' });
-
-      handleEvent = () => {
-        done(new Error('Should not have fired an event'));
-      };
-
-      document.addEventListener('loot-plugin-item-content-change', handleEvent);
-
-      plugin.isEditorOpen = plugin.isEditorOpen;
-
-      setTimeout(done, 100);
-    });
-
-    it('setting value not equal to the current value should fire an event', (done) => {
-      const plugin = new loot.Plugin({ name: 'test' });
-
-      handleEvent = (evt) => {
-        evt.detail.pluginId.should.equal(plugin.id);
-        evt.detail.priority.should.equal(plugin.priority);
-        evt.detail.isPriorityGlobal.should.equal(plugin.isPriorityGlobal);
-        evt.detail.isEditorOpen.should.equal(plugin.isEditorOpen);
-        evt.detail.hasUserEdits.should.equal(plugin.hasUserEdits);
-        done();
-      };
-
-      document.addEventListener('loot-plugin-item-content-change', handleEvent);
-
-      plugin.isEditorOpen = true;
-    });
-  });
-
   describe('#isSearchResult', () => {
     let handleEvent;
 

From ea862bf9a938547c52852b669a2b03f828105bfb Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 17:57:36 +0000
Subject: [PATCH 50/62] Disable Edit Metadata menu item when editor is open

---
 src/gui/html/elements/loot-plugin-card.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index adeb616e..5ae6c1ac 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -96,6 +96,10 @@ loot-clear-metadata
         overflow: hidden;
         white-space: nowrap;
       }
+      :host-context(body[data-editors]) #editMetadata {
+        color: #9b9b9b;
+        pointer-events: none;
+      }
       #editMetadata,
       #copyMetadata,
       #clearMetadata {

From 5eb2287688b8148b59d1f19d96879a37c1ff0772 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 18:38:18 +0000
Subject: [PATCH 51/62] Improve editable table styling

Using the Material Design spec as a guide, but diverging to improve
information density.
---
 src/gui/html/elements/editable-table.html     | 64 +++++++++++--------
 src/gui/html/elements/loot-plugin-editor.html |  4 --
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/gui/html/elements/editable-table.html b/src/gui/html/elements/editable-table.html
index e7efa2c8..bf7e9948 100644
--- a/src/gui/html/elements/editable-table.html
+++ b/src/gui/html/elements/editable-table.html
@@ -25,32 +25,32 @@
 </template>
 <template id="messageRow">
   <tr>
-    <td>
-      <loot-dropdown-menu class="type" value="say">
+    <td style="width: 100px;">
+      <loot-dropdown-menu class="type" value="say" vertical-align="bottom">
         <paper-item value="say">Note</paper-item>
         <paper-item value="warn">Warning</paper-item>
         <paper-item value="error">Error</paper-item>
       </loot-dropdown-menu>
     </td>
-      <td><paper-textarea error-message="A content string is required." class="content" required auto-validate></paper-textarea></td>
-      <td><paper-input class="condition" no-label-float></paper-input></td>
-      <td>
-        <loot-dropdown-menu class="language">
-          <!-- Language <option> elements go here. -->
-        </loot-dropdown-menu>
-      </td>
-      <td>
-        <span>
-          <paper-icon-button class="delete" icon="delete"></paper-icon-button>
-          <paper-tooltip position="left">Delete Row</paper-tooltip>
-        </span>
-      </td>
+    <td><paper-input error-message="A content string is required." class="content" required auto-validate no-label-float></paper-input></td>
+    <td><paper-input class="condition" no-label-float></paper-input></td>
+    <td>
+      <loot-dropdown-menu class="language" vertical-align="bottom">
+        <!-- Language <option> elements go here. -->
+      </loot-dropdown-menu>
+    </td>
+    <td>
+      <span>
+        <paper-icon-button class="delete" icon="delete"></paper-icon-button>
+        <paper-tooltip position="left">Delete Row</paper-tooltip>
+      </span>
+    </td>
   </tr>
 </template>
 <template id="tagRow">
   <tr>
-    <td>
-      <loot-dropdown-menu class="type" value="add">
+    <td style="width: 100px;">
+      <loot-dropdown-menu class="type" value="add" vertical-align="bottom">
         <paper-item value="add">Add</paper-item>
         <paper-item value="remove">Remove</paper-item>
       </loot-dropdown-menu>
@@ -67,10 +67,10 @@
 </template>
 <template id="dirtyInfoRow">
   <tr>
-    <td><paper-input error-message="A CRC is required." class="crc" maxlength="8" minlength="8" pattern="[0-9A-Fa-f]{8}" required auto-validate no-label-float></paper-input></td>
-    <td><paper-input error-message="Values must be integers." class="itm" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
-    <td><paper-input error-message="Values must be integers." class="udr" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
-    <td><paper-input error-message="Values must be integers." class="nav" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
+    <td style="width: 92px;"><paper-input error-message="A CRC is required." class="crc" maxlength="8" minlength="8" pattern="[0-9A-Fa-f]{8}" required auto-validate no-label-float></paper-input></td>
+    <td style="width: 48px;"><paper-input error-message="Values must be integers." class="itm" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
+    <td style="width: 48px;"><paper-input error-message="Values must be integers." class="udr" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
+    <td style="width: 48px;"><paper-input error-message="Values must be integers." class="nav" type="number" min="0" step="1" value="0" auto-validate no-label-float></paper-input></td>
     <td><paper-input error-message="A utility name is required." class="util" required auto-validate no-label-float></paper-input></td>
     <td>
       <span>
@@ -96,7 +96,7 @@
   <tr>
     <td><paper-input error-message="A name is required." class="name" required auto-validate no-label-float></paper-input></td>
     <td>
-      <loot-dropdown-menu class="type">
+      <loot-dropdown-menu class="type" vertical-align="bottom">
         <!-- Game <option> elements go here. -->
       </loot-dropdown-menu>
     </td>
@@ -136,14 +136,26 @@
       }
       ::content td,
       ::content th {
-        vertical-align: top;
+        vertical-align: middle;
         text-align: left;
+        padding: 0 7px;
       }
-      ::content td {
-          padding: 0;
+      ::content th:first-child,
+      ::content td:first-child {
+        padding-left: 16px;
+      }
+      ::content th:last-child,
+      ::content td:last-child {
+        padding-left: 0;
+      }
+      ::content thead > tr {
+        height: 56px;
+      }
+      ::content tbody > tr {
+        height: 48px;
       }
       ::content th {
-          padding: 0 4px;
+          color: var(--loot-secondary-text-color);
           border-bottom: 1px solid var(--loot-divider-color);
       }
       ::content paper-icon-button {
diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index f3c02946..c36d2294 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -77,10 +77,6 @@ loot-editor-close
       #main {
         padding: 8px 16px;
       }
-      iron-pages > div > table[is=editable-table] th {
-        padding-top: 8px;
-        padding-bottom: 8px;
-      }
       #title {
         @apply(--layout-flex);
         overflow: hidden;

From 984c10fb99671106dfeb13616a4230e3e4878e84 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 5 Mar 2016 23:37:27 +0000
Subject: [PATCH 52/62] Add a splitter to the top of the editor panel

The splitter allows the height of the editor to be adjusted by dragging
it up and down. The height defaults to the height of the 'main' tab
elements, and is reset to this when the editor is closed. The height
of the editor cannot be greater than the available space, and
cannot be less than 56px.
---
 src/gui/html/elements/loot-plugin-editor.html | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index c36d2294..5caa7bc6 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -29,6 +29,9 @@ loot-editor-close
       :host {
         position: relative;
         @apply(--shadow-elevation-2dp);
+        height: 264px;
+        min-height: 56px;
+        max-height: calc(100% - 56px);
       }
 
       /* Material Design for non-button icons. */
@@ -64,6 +67,10 @@ loot-editor-close
         margin-right: 16px;
         @apply(--layout-flex);
       }
+      iron-pages {
+        height: calc(100% - 104px);
+        overflow: auto;
+      }
       iron-pages > *:not(.iron-selected) {
         display: none;
       }
@@ -88,7 +95,19 @@ loot-editor-close
       paper-tab {
         --paper-tab-ink: var(--loot-accent-color);
       }
+      #splitter {
+        width: 100%;
+        height: 10px;
+        position: absolute;
+        top: -5px;
+        cursor: row-resize;
+        z-index: 1;
+      }
+      #splitter:active {
+        background: rgba(0, 0, 0, 0.12);
+      }
     </style>
+    <div id="splitter"></div>
     <paper-toolbar class="medium-tall">
       <div id="title">
         <content select="h1"></content>
@@ -211,12 +230,14 @@ loot-editor-close
         this.$.accept.addEventListener('click', this._onHideEditor);
         this.$.cancel.addEventListener('click', this._onHideEditor);
         this.$.tablePages.addEventListener('iron-deselect', this._onTablePageActivate);
+        this.$.splitter.addEventListener('track', this._onSplitterDrag);
       },
 
       detached() {
         this.$.accept.removeEventListener('click', this._onHideEditor);
         this.$.cancel.removeEventListener('click', this._onHideEditor);
         this.$.tablePages.removeEventListener('iron-deselect', this._onTablePageActivate);
+        this.$.splitter.removeEventListener('track', this._onSplitterDrag);
       },
 
       _onTablePageActivate() {
@@ -224,6 +245,13 @@ loot-editor-close
         this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
       },
 
+      _onSplitterDrag(evt) {
+        if (evt.detail.state === 'start') {
+          this.parentNode.host.style.height = parseInt(window.getComputedStyle(this.parentNode.host).height) + 'px';
+        }
+        this.parentNode.host.style.height = (parseInt(this.parentNode.host.style.height) - evt.detail.ddy) + 'px';
+      },
+
       _rowDataToMessage(rowData) {
         return {
           type: rowData.type,
@@ -306,6 +334,9 @@ loot-editor-close
         }
 
         if (isValid || evt.target.id !== 'accept') {
+          /* Reset height to default */
+          this.parentElement.parentNode.host.style.height = '264px';
+
           /* Fire the close event, saying whether or not to save data. */
           evt.target.dispatchEvent(new CustomEvent('loot-editor-close', {
             detail: evt.target.id === 'accept',

From 056eff601b6e5b93a653c51c6c4bd92cc4a597fd Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 08:28:51 +0000
Subject: [PATCH 53/62] Uppercase tab labels

As per the Material Design spec and LOOT's pre-Polymer 1.2 behaviour.
For some reason the 1.2 <paper-tab> element doesn't enforce this
styling.
---
 src/gui/html/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 5b7434c6..0c950355 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -137,6 +137,9 @@
 
       --paper-tabs-selection-bar-color: var(--loot-accent-color);
       --paper-tab-ink: var(--loot-accent-color);
+      --paper-tab-content: {
+        text-transform: uppercase;
+      }
 
       /* Prevents pop-in for the toggle button when a dropdown containing it is
          opened. */

From 864299d3d58a637ad694c8e6d191acb0ed1192db Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 09:05:26 +0000
Subject: [PATCH 54/62] Some misc. tidying up of editor-related code

---
 src/gui/html/elements/loot-plugin-card.html   |  1 -
 src/gui/html/elements/loot-plugin-editor.html | 11 ++---------
 src/gui/html/index.html                       |  1 +
 src/gui/html/js/events.js                     |  2 +-
 4 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 5ae6c1ac..97c835ae 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -25,7 +25,6 @@ loot-clear-metadata
 <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="loot-plugin-editor.html">
 <link rel="import" href="loot-custom-icons.html">
 <link rel="import" href="loot-menu.html">
 
diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index 5caa7bc6..b5d26c4b 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -229,27 +229,20 @@ loot-editor-close
       attached() {
         this.$.accept.addEventListener('click', this._onHideEditor);
         this.$.cancel.addEventListener('click', this._onHideEditor);
-        this.$.tablePages.addEventListener('iron-deselect', this._onTablePageActivate);
         this.$.splitter.addEventListener('track', this._onSplitterDrag);
       },
 
       detached() {
         this.$.accept.removeEventListener('click', this._onHideEditor);
         this.$.cancel.removeEventListener('click', this._onHideEditor);
-        this.$.tablePages.removeEventListener('iron-deselect', this._onTablePageActivate);
         this.$.splitter.removeEventListener('track', this._onSplitterDrag);
       },
 
-      _onTablePageActivate() {
-        /* Notify that this editor (may have) changed size. */
-        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
-      },
-
       _onSplitterDrag(evt) {
         if (evt.detail.state === 'start') {
-          this.parentNode.host.style.height = parseInt(window.getComputedStyle(this.parentNode.host).height) + 'px';
+          this.parentNode.host.style.height = parseInt(window.getComputedStyle(this.parentNode.host).height, 10) + 'px';
         }
-        this.parentNode.host.style.height = (parseInt(this.parentNode.host.style.height) - evt.detail.ddy) + 'px';
+        this.parentNode.host.style.height = (parseInt(this.parentNode.host.style.height, 10) - evt.detail.ddy) + 'px';
       },
 
       _rowDataToMessage(rowData) {
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index 0c950355..ce053577 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -14,6 +14,7 @@
   <link rel="import" href="elements/loot-message-dialog.html">
   <link rel="import" href="elements/loot-plugin-item.html">
   <link rel="import" href="elements/loot-plugin-card.html">
+  <link rel="import" href="elements/loot-plugin-editor.html">
   <link rel="import" href="elements/loot-search-toolbar.html">
 
   <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index 61022883..d1c34de5 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -452,7 +452,7 @@ function onEditorClose(evt) {
        majority of the work to the C++ side of things. */
     const plugin = loot.game.plugins.find((item) => {
       return item.name === evt.target.querySelector('h1').textContent;
-    })
+    });
     const edits = evt.target.readFromEditor(plugin);
     promise = loot.query('editorClosed', edits).then(JSON.parse).then((result) => {
       if (result) {

From ff3e24ca674668063ef14ba982536b9924e74292 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 09:06:08 +0000
Subject: [PATCH 55/62] Fix sidebar item double-clicks overwriting editor data

---
 src/gui/html/js/events.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index d1c34de5..ed1f92a8 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -358,8 +358,7 @@ function onSidebarClick(evt) {
          case that has happened. */
       window.getSelection().removeAllRanges();
 
-      const card = document.getElementById(evt.target.getAttribute('data-id'));
-      if (!card.classList.contains('flip')) {
+      if (!document.body.hasAttribute('data-editors')) {
         document.getElementById(evt.target.getAttribute('data-id')).onShowEditor();
       }
     }

From 3ef8d4e5e3aa76ec572781ad757503c2f8786f63 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 09:07:05 +0000
Subject: [PATCH 56/62] Open editor as part of setEditorData()

Also add a smooth transition between open and closed states.
---
 src/gui/html/elements/loot-plugin-editor.html | 19 +++++++++++++++++--
 src/gui/html/index.html                       |  2 +-
 src/gui/html/js/events.js                     |  9 +--------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index b5d26c4b..48c9c1a6 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -32,6 +32,14 @@ loot-editor-close
         height: 264px;
         min-height: 56px;
         max-height: calc(100% - 56px);
+        transition: height 0.6s, min-height 0.6s;
+      }
+      :host(.hidden) {
+        height: 0;
+        min-height: 0;
+      }
+      :host(.resizing) {
+        transition: unset;
       }
 
       /* Material Design for non-button icons. */
@@ -240,7 +248,10 @@ loot-editor-close
 
       _onSplitterDrag(evt) {
         if (evt.detail.state === 'start') {
+          this.parentNode.host.classList.toggle('resizing', true);
           this.parentNode.host.style.height = parseInt(window.getComputedStyle(this.parentNode.host).height, 10) + 'px';
+        } else if (evt.detail.state === 'end') {
+          this.parentNode.host.classList.toggle('resizing', false);
         }
         this.parentNode.host.style.height = (parseInt(this.parentNode.host.style.height, 10) - evt.detail.ddy) + 'px';
       },
@@ -327,8 +338,9 @@ loot-editor-close
         }
 
         if (isValid || evt.target.id !== 'accept') {
-          /* Reset height to default */
-          this.parentElement.parentNode.host.style.height = '264px';
+          /* Now hide editor. */
+          evt.target.parentElement.parentNode.host.style.height = '';
+          evt.target.parentElement.parentNode.host.classList.toggle('hidden', true);
 
           /* Fire the close event, saying whether or not to save data. */
           evt.target.dispatchEvent(new CustomEvent('loot-editor-close', {
@@ -424,6 +436,9 @@ loot-editor-close
             }
           }
         }
+
+        /* Now show editor. */
+        this.classList.toggle('hidden', false);
       },
     });
   </script>
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index ce053577..429dbdd3 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -335,7 +335,7 @@
           <!-- Generated <loot-plugin-card> elements go here. -->
         </iron-list>
       </div>
-      <loot-plugin-editor id="editor" hidden>
+      <loot-plugin-editor id="editor" class="hidden">
         <h1></h1>
       </loot-plugin-editor>
     </div>
diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index ed1f92a8..99577e1d 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -414,16 +414,12 @@ function onShowSettingsDialog() {
 
 function onEditorOpen(evt) {
   /* Set the editor data. */
-  const editor = document.getElementById('editor');
-  editor.setEditorData(evt.target.data);
+  document.getElementById('editor').setEditorData(evt.target.data);
 
   /* Set body attribute so that sidebar items are styled correctly. */
   document.body.setAttribute('data-editors', true);
   document.getElementById('cardsNav').notifyResize();
 
-  /* Unhide editor. */
-  editor.hidden = false;
-
   /* Set up drag 'n' drop event handlers. */
   const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
   for (let i = 0; i < elements.length; ++i) {
@@ -478,9 +474,6 @@ function onEditorClose(evt) {
     document.body.removeAttribute('data-editors');
     document.getElementById('cardsNav').notifyResize();
 
-    /* Hide editor. */
-    evt.target.hidden = true;
-
     /* Remove drag 'n' drop event handlers. */
     const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
     for (let i = 0; i < elements.length; ++i) {

From c14301a1ff8fe276c54804027c85fbdb0c961ee3 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 12:51:07 +0000
Subject: [PATCH 57/62] Fix text selection while dragging editor splitter

---
 src/gui/html/elements/loot-plugin-editor.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index 48c9c1a6..06e074df 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -253,6 +253,7 @@ loot-editor-close
         } else if (evt.detail.state === 'end') {
           this.parentNode.host.classList.toggle('resizing', false);
         }
+        window.getSelection().removeAllRanges();
         this.parentNode.host.style.height = (parseInt(this.parentNode.host.style.height, 10) - evt.detail.ddy) + 'px';
       },
 

From 7b768c5136e4b24d18ebe53f684aa39c4105f6fe Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 12:54:14 +0000
Subject: [PATCH 58/62] Fix search result styling

It was broken in 880cbb3373fad3a230da728c78e08ae3962648ae.
---
 src/gui/html/elements/loot-plugin-card.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 97c835ae..f23ef3b0 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -41,7 +41,7 @@ loot-clear-metadata
       :host(.highlight) #wrapper {
         outline: 4px solid var(--loot-accent-color);
       }
-      :host(.search-result) #wrapper {
+      :host(.search-result) #wrapper > * {
         box-shadow: inset 4px 0 var(--loot-primary-color);
       }
 

From 93c634cf8b3d4c8194fd172b804c23375ca936a4 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 13:00:39 +0000
Subject: [PATCH 59/62] Rename and restyle editor Apply button

As a Save Metadata button with a 'save' icon.
---
 src/gui/html/elements/loot-plugin-editor.html | 6 +++---
 src/gui/html/js/l10n.js                       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index 06e074df..ab8f22c4 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -53,7 +53,7 @@ loot-editor-close
         display: none;
       }
       #accept {
-        color: var(--loot-accent-color);
+        color: var(--loot-dark-accent-color);
       }
       #cancel {
         color: red;
@@ -120,8 +120,8 @@ loot-editor-close
       <div id="title">
         <content select="h1"></content>
       </div>
-      <paper-icon-button id="accept" icon="check"></paper-icon-button>
-      <paper-tooltip for="accept">Apply</paper-tooltip>
+      <paper-icon-button id="accept" icon="save"></paper-icon-button>
+      <paper-tooltip for="accept">Save Metadata</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>
diff --git a/src/gui/html/js/l10n.js b/src/gui/html/js/l10n.js
index e544eeb8..fa0bb4c6 100644
--- a/src/gui/html/js/l10n.js
+++ b/src/gui/html/js/l10n.js
@@ -74,7 +74,7 @@
     pluginEditor.getElementById('url').querySelector('th:first-child').textContent = l10n.translate('URL');
     pluginEditor.getElementById('url').querySelector('th:nth-child(2)').textContent = l10n.translate('Name');
 
-    pluginEditor.querySelector('paper-tooltip[for=accept]').textContent = l10n.translate('Apply');
+    pluginEditor.querySelector('paper-tooltip[for=accept]').textContent = l10n.translate('Save Metadata');
     pluginEditor.querySelector('paper-tooltip[for=cancel]').textContent = l10n.translate('Cancel');
   }
 

From 39f6cec046df8f045eabd6255f7d82d726c56d05 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 6 Mar 2016 14:47:53 +0000
Subject: [PATCH 60/62] Simplify plugin item data binding

---
 src/gui/html/elements/loot-plugin-item.html |  9 ++++++---
 src/gui/html/js/plugin.js                   | 12 +-----------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/gui/html/elements/loot-plugin-item.html b/src/gui/html/elements/loot-plugin-item.html
index 53fe141f..9b41ef76 100644
--- a/src/gui/html/elements/loot-plugin-item.html
+++ b/src/gui/html/elements/loot-plugin-item.html
@@ -97,17 +97,14 @@
         priority: {
           type: String,
           value: '',
-          reflectToAttribute: true,
         },
         isPriorityGlobal: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true,
         },
         hasUserEdits: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true,
         },
       },
 
@@ -120,6 +117,12 @@
         evt.dataTransfer.setData('text/plain', evt.currentTarget.getName());
         evt.dataTransfer.setDragImage(evt.currentTarget, 325, 175);
       },
+
+      updateStyling(pluginData) {
+        this.priority = pluginData.priority;
+        this.isPriorityGlobal = pluginData.isPriorityGlobal;
+        this.hasUserEdits = pluginData.hasUserEdits;
+      },
     });
   </script>
 </dom-module>
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index e4f1cbea..6561c02d 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -437,17 +437,7 @@
     static onItemContentChange(evt) {
       const item = document.getElementById('cardsNav').querySelector(`[data-id="${evt.detail.pluginId}"]`);
       if (item) {
-        item.setAttribute('priority', evt.detail.priority);
-        if (evt.detail.isPriorityGlobal) {
-          item.setAttribute('is-priority-global', '');
-        } else {
-          item.removeAttribute('is-priority-global');
-        }
-        if (evt.detail.hasUserEdits) {
-          item.setAttribute('has-user-edits', '');
-        } else {
-          item.removeAttribute('has-user-edits');
-        }
+        item.updateStyling(evt.detail);
       }
     }
   };

From 0f0090ea7f9ca1014368817ca13f001a795e738e Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Mon, 7 Mar 2016 20:16:07 +0000
Subject: [PATCH 61/62] Add PolymerElements/neon-animation to Bower config

It was pulled in by another element, but that was changed recently, so
make the dependency explicit.
---
 bower.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bower.json b/bower.json
index 33a76d0d..381f6742 100644
--- a/bower.json
+++ b/bower.json
@@ -12,6 +12,7 @@
     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
     "iron-list": "loot/iron-list#patched-for-loot",
     "iron-pages": "PolymerElements/iron-pages#^1.0.0",
+    "neon-animation": "PolymerElements/neon-animation#^1.0.0",
     "paper-button": "PolymerElements/paper-button#^1.0.0",
     "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
     "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",

From e3b50b8eebe4d410dbe258ce3f7e518b6e4dfe20 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Tue, 8 Mar 2016 19:57:50 +0000
Subject: [PATCH 62/62] Improve progress dialog positioning

---
 src/gui/html/js/dialog.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/gui/html/js/dialog.js b/src/gui/html/js/dialog.js
index f515db02..0115910e 100644
--- a/src/gui/html/js/dialog.js
+++ b/src/gui/html/js/dialog.js
@@ -16,16 +16,14 @@
       if (!progressDialog.opened) {
         progressDialog.open();
       } else {
-        progressDialog.center();
+        progressDialog.refit();
       }
     }
 
     static closeProgress() {
       const progressDialog = document.getElementById('progressDialog');
       if (progressDialog.opened) {
-        /* Center before closing so that when it is re-opened it does so in the
-           correct position. */
-        progressDialog.center();
+        progressDialog.refit();
         progressDialog.close();
       }
     }