From 63733f32206016cf5c820647b806dea537ec67e2 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sun, 9 Nov 2014 12:30:28 +0000
Subject: [PATCH] Replaced plugin-li element with <loot-plugin-item>.

The latter extends <paper-item>. Also split Polymer CSS overrides into a
new CSS file, and fixed sidebar plugin item display.
---
 resources/report/css/overrides.css          |  34 +++++++
 resources/report/css/style.css              |  53 +++-------
 resources/report/html/loot-plugin-item.html | 102 ++++++++++++++++++++
 resources/report/html/plugin-card.html      |   4 +-
 resources/report/html/plugin-li.html        |  92 ------------------
 resources/report/js/plugin.js               |   6 +-
 resources/report/js/script.js               |  12 +--
 resources/report/report.html                |  12 +--
 8 files changed, 164 insertions(+), 151 deletions(-)
 create mode 100644 resources/report/css/overrides.css
 create mode 100644 resources/report/html/loot-plugin-item.html
 delete mode 100644 resources/report/html/plugin-li.html

diff --git a/resources/report/css/overrides.css b/resources/report/css/overrides.css
new file mode 100644
index 00000000..2859e710
--- /dev/null
+++ b/resources/report/css/overrides.css
@@ -0,0 +1,34 @@
+/* These styles override Polymer's own internal styling for certain elements. */
+
+/* The following 3 rules are for setting the sizes of the drawer and panel. */
+#container::shadow #main {
+    left: 33% !important;
+}
+#container::shadow .narrow-layout #main {
+    left: 0 !important;
+}
+#container::shadow #drawer {
+    width: 33% !important;
+}
+
+/* These overrides change the colour of the game menu's text and underline. */
+#gameMenu::shadow #control {
+    color: white;
+    border-bottom-color: #f1f1f1;
+}
+#gameMenu::shadow #menu {
+    color: black;
+}
+
+/* These overrides change the colour of the tab ink effect and their underline. */
+paper-tabs::shadow #selectionBar {
+    background-color: #4285f4;
+}
+paper-tab::shadow #ink {
+    color: #4285f4;
+}
+
+/* These overrides change the font size of the sidebar items to be the body text size. */
+#cardsNav /deep/ #label {
+    font-size: 10pt;
+}
\ No newline at end of file
diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 15e6ace8..cea42c8d 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -48,47 +48,11 @@ noscript {
 #gameMenu {
     background: inherit;
 }
-#gameMenu::shadow #control {
-    color: white;
-    border-bottom-color: #f1f1f1;
-}
-#gameMenu::shadow #menu {
-    color: black;
-}
 
 #filtersToggle > span {
     margin-right: 1em;
 }
 
-#container {
-    position: fixed;
-    top: 64px;
-    height: calc(100% - 64px);
-    /*display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    width: 100%;*/
-}
-paper-tabs::shadow #selectionBar {
-    background-color: #4285f4;
-}
-paper-tab::shadow #ink {
-    color: #4285f4;
-}
-#pluginsNav {
-    height: 100%;
-    overflow: auto;
-    margin: 0;
-    padding: 0;
-}
-#pluginsNav li {
-    padding: 0 0.5em;
-    white-space:nowrap;
-}
-#pluginsNav li > span {
-    display: inline-block;
-    width: 1.2em;
-}
 div[drawer] > core-tooltip {
     width: 100%;
     margin: 0 12px;
@@ -100,6 +64,18 @@ div[drawer] > core-tooltip {
     overflow: auto;
     position: relative;
 }
+#cardsNav {
+    margin: 0;
+    overflow: auto;
+}
+#cardsNav > paper-item, #cardsNav > loot-plugin-item {
+    height: 2em;
+}
+#container {
+    position: fixed;
+    top: 64px;
+    height: calc(100% - 64px);
+}
 
 section {
     background:white;
@@ -256,11 +232,6 @@ td input {
     text-overflow: ellipsis;
 }
 
-
-
-#pluginsNav .priority {
-    display: none;
-}
 body.editMode header {
     color: #999;
 }
diff --git a/resources/report/html/loot-plugin-item.html b/resources/report/html/loot-plugin-item.html
new file mode 100644
index 00000000..a18725a1
--- /dev/null
+++ b/resources/report/html/loot-plugin-item.html
@@ -0,0 +1,102 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../bower_components/core-tooltip/core-tooltip.html">
+
+<polymer-element name="loot-plugin-item" extends="paper-item">
+    <template>
+        <style>
+        @import '../css/font-awesome.min.css';
+        :host {
+            display: block;
+            padding: 0.5em 1em;
+        }
+        :host([data-bsa=false]) .loadsBSA,
+        :host([data-dummy=false]) .dummyPlugin,
+        :host([data-edits=false]) .hasUserEdits,
+        :host([data-global-priority=false]) .hasGlobalPriority,
+        :host .hasPriority:not([title^=Priority]) {
+            visibility: hidden;
+        }
+        :host a {
+            text-decoration: none;
+            color: black;
+        }
+        :host .hasGlobalPriority, :host .hasPriority {
+            display:none;
+        }
+        :host-context(body.editMode) .hasGlobalPriority,
+        :host-context(body.editMode) .hasPriority {
+            display: inline-block;
+        }
+
+        :host::shadow paper-ripple {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            pointer-events: none;
+        }
+        :host {
+            display: block;
+            position: relative;
+            font-size: 16px;
+            -webkit-user-select: none;
+            cursor: pointer;
+            box-sizing: border-box;
+            height: 48px;
+            padding: 0 16px;
+            white-space: nowrap;
+        }
+        :host::shadow ::content > a {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        div {
+            min-width: 62px;
+        }
+        </style>
+        <div center horizontal layout>
+            <core-tooltip label="Dummy Plugin">
+                <span class="dummyPlugin fa fa-fw fa-eye-slash"></span>
+            </core-tooltip>
+            <core-tooltip label="Loads BSA">
+                <span class="loadsBSA fa fa-fw fa-paperclip"></span>
+            </core-tooltip>
+            <core-tooltip label="Has User Metadata">
+                <span class="hasUserEdits fa fa-fw fa-user"></span>
+            </core-tooltip>
+            <core-tooltip label="Priority Is Global">
+                <span class="hasGlobalPriority fa fa-fw fa-globe"></span>
+            </core-tooltip>
+            <core-tooltip label="">
+                <span class="hasPriority fa fa-fw fa-exclamation"></span>
+            </core-tooltip>
+        </div>
+        <shadow></shadow>
+    </template>
+    <script>
+    Polymer({
+        setLink: function(url) {
+            this.getElementsByTagName('a')[0].href = url;
+        },
+
+        setPriority: function(text) {
+            this.shadowRoot.getElementsByClassName('hasPriority')[0].parentElement.label = text;
+        },
+
+        handleDragStart: function(evt) {
+            evt.dataTransfer.effectAllowed = 'copy';
+            evt.dataTransfer.setData('text/plain', evt.currentTarget.textContent);
+        },
+
+        created: function() {
+            var a = document.createElement('a');
+            this.appendChild(a);
+        },
+    });
+    </script>
+</polymer-element>
\ No newline at end of file
diff --git a/resources/report/html/plugin-card.html b/resources/report/html/plugin-card.html
index d029dba6..0f58f371 100644
--- a/resources/report/html/plugin-card.html
+++ b/resources/report/html/plugin-card.html
@@ -494,7 +494,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
 
 
                 /* Remove drag 'n' drop event handlers. */
-                var elements = document.getElementById('pluginsNav').children;
+                var elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
                 for (var i = 0; i < elements.length; ++i) {
                     elements[i].removeAttribute('draggable');
                     elements[i].removeEventListener('dragstart', elements[i].handleDragStart, false);
@@ -694,7 +694,7 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
             pluginCard.shadowRoot.getElementById('cancel').addEventListener('click', pluginCard.hideEditor, false);
 
             /* Set up drag 'n' drop event handlers. */
-            elements = document.getElementById('pluginsNav').children;
+            elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
             for (var i = 0; i < elements.length; ++i) {
                 elements[i].draggable = true;
                 elements[i].addEventListener('dragstart', elements[i].handleDragStart, false);
diff --git a/resources/report/html/plugin-li.html b/resources/report/html/plugin-li.html
deleted file mode 100644
index c74523f8..00000000
--- a/resources/report/html/plugin-li.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<template id="pluginLI">
-    <style>
-    @import 'css/font-awesome.min.css';
-    :host([data-bsa=false]) > .loadsBSA,
-    :host([data-dummy=false]) > .dummyPlugin,
-    :host([data-edits=false]) > .hasUserEdits,
-    :host([data-global-priority=false]) > .hasGlobalPriority,
-    :host > .hasPriority:not([title^=Priority]) {
-        visibility: hidden;
-    }
-    :host > a {
-        text-decoration: none;
-        color: black;
-    }
-    :host > .hasGlobalPriority, :host > .hasPriority {
-        display:none;
-    }
-    :host-context(body.editMode) > .hasGlobalPriority,
-    :host-context(body.editMode) > .hasPriority {
-        display: inline-block;
-    }
-    </style>
-    <span class="dummyPlugin fa fa-eye-slash" title="Dummy Plugin"></span>
-    <span class="loadsBSA fa fa-paperclip" title="Loads BSA"></span>
-    <span class="hasUserEdits fa fa-user" title="Has User Metadata"></span>
-    <span class="hasGlobalPriority fa fa-globe" title="Priority Is Global"></span>
-    <span class="hasPriority fa fa-exclamation"></span>
-    <a href=""><content></content></a>
-</template>
-
-<script>
-'use strict';
-// Record this document.
-var pluginLiImportDoc = document.currentScript.ownerDocument;
-
-/* Create a <li is="plugin-li"> element type. */
-var pluginLIProto = Object.create(HTMLLIElement.prototype, {
-
-    setLink: {
-        value: function(url) {
-            this.shadowRoot.getElementsByTagName('a')[0].href = url;
-        }
-    },
-
-    setPriority: {
-        value: function(text) {
-            this.shadowRoot.getElementsByClassName('hasPriority')[0].title = text;
-        }
-    },
-
-    handleDragStart: {
-        value: function(evt) {
-            evt.dataTransfer.effectAllowed = 'copy';
-            evt.dataTransfer.setData('text/plain', evt.currentTarget.textContent);
-        }
-    },
-
-    createdCallback: {
-        value: function() {
-            var template = pluginLiImportDoc.querySelector('#pluginLI');
-            var clone = document.importNode(template.content, true);
-            var root = this.createShadowRoot();
-            root.appendChild(clone);
-        }
-    },
-
-    attachedCallback: {
-        value: function() {
-            var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
-            for (var i = 0; i < hoverTargets.length; ++i) {
-                hoverTargets[i].addEventListener('mouseenter', showHoverText, false);
-                hoverTargets[i].addEventListener('mouseleave', hideHoverText, false);
-            }
-        }
-    },
-
-    detachedCallback: {
-        value: function() {
-            var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
-            for (var i = 0; i < hoverTargets.length; ++i) {
-                hoverTargets[i].removeEventListener('mouseenter', showHoverText, false);
-                hoverTargets[i].removeEventListener('mouseleave', hideHoverText, false);
-            }
-        }
-    }
-
-});
-var PluginListItem = document.registerElement('plugin-li', {
-    prototype: pluginLIProto,
-    extends: 'li'
-});
-</script>
\ No newline at end of file
diff --git a/resources/report/js/plugin.js b/resources/report/js/plugin.js
index 2a2d6575..5ed5415e 100644
--- a/resources/report/js/plugin.js
+++ b/resources/report/js/plugin.js
@@ -160,10 +160,10 @@ function Plugin(obj) {
     }
 
     Plugin.prototype.createListItem = function() {
-        var li = new PluginListItem();
+        var li = document.createElement('loot-plugin-item');
         this.li = li;
 
-        li.textContent = this.name;
+        li.label = this.name;
         li.setLink('#' + this.id);
         li.setPriority(this.getPriorityString());
 
@@ -172,7 +172,7 @@ function Plugin(obj) {
         li.setAttribute('data-edits', this.userlist != undefined);
         li.setAttribute('data-global-priority', this.isGlobalPriority);
 
-        document.getElementById('pluginsNav').appendChild(li);
+        document.getElementById('cardsNav').appendChild(li);
     }
 
     Plugin.prototype.observer = function(changes) {
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 60db2642..a4105b70 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -472,7 +472,7 @@ function getConflictingPluginsFromFilter() {
 }
 function applyFilters(evt) {
     var cards = document.getElementById('main').getElementsByTagName('plugin-card');
-    var entries = document.getElementById('pluginsNav').children;
+    var entries = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
     var hiddenPluginNo = 0;
     var hiddenMessageNo = 0;
     if (cards.length != entries.length) {
@@ -714,8 +714,8 @@ function sortUIElements(pluginNames) {
     /* pluginNames is an array of plugin names in their sorted order. Rearrange
        the plugin cards and nav entries to match it. */
     var main = document.getElementById('main');
-    var pluginsNav = document.getElementById('pluginsNav');
-    var entries = pluginsNav.children;
+    var cardsNav = document.getElementById('cardsNav');
+    var entries = cardsNav.getElementsByTagName('loot-plugin-item');
     if (main.getElementsByTagName('plugin-card').length != entries.length) {
         throw Error("Error: Number of plugins in sidebar doesn't match number of plugins in main area!");
     }
@@ -756,11 +756,11 @@ function sortUIElements(pluginNames) {
             } else {
                 main.insertBefore(card, main.getElementsByTagName('plugin-card')[0]);
             }
-            pluginsNav.removeChild(li);
+            cardsNav.removeChild(li);
             if (lastLi) {
-                pluginsNav.insertBefore(li, lastLi.nextElementSibling);
+                cardsNav.insertBefore(li, lastLi.nextElementSibling);
             } else {
-                pluginsNav.insertBefore(li, pluginsNav.firstElementChild);
+                cardsNav.insertBefore(li, cardsNav.firstElementChild);
             }
             lastLi = li;
         } else {
diff --git a/resources/report/report.html b/resources/report/report.html
index 717171d9..b88618d2 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -3,17 +3,18 @@
     <meta charset="utf-8" />
     <title>LOOT</title>
     <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/overrides.css" />
     <link rel="stylesheet" href="css/font-awesome.min.css" />
 
     <script src="bower_components/platform/platform.js"></script>
     <link rel="import" href="bower_components/polymer/polymer.html">
 
-    <link rel="import" href="html/plugin-li.html">
     <link rel="import" href="html/plugin-card.html">
     <link rel="import" href="html/editable-table.html">
     <link rel="import" href="html/loot-dialog.html">
     <link rel="import" href="html/loot-dropdown-menu.html">
     <link rel="import" href="html/loot-message-dialog.html">
+    <link rel="import" href="html/loot-plugin-item.html">
 
     <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
     <link rel="import" href="bower_components/core-icon/core-icon.html">
@@ -68,18 +69,16 @@
                 <paper-tab>Plugins</paper-tab>
                 <paper-tab>Filters</paper-tab>
             </paper-tabs>
-            <core-menu class="tab-content">
+            <core-menu id="cardsNav" class="tab-content" flex>
                 <paper-item label="Summary">
                     <a href="#summary"></a>
                 </paper-item>
                 <paper-item label="General Messages">
                     <a href="#generalMessages"></a>
                 </paper-item>
-                <core-submenu id="pluginsNav">
-                    <!-- Generated <li> elements go here, containing # links to each plugin's section in the list. -->
-                </core-submenu>
+                <!-- Generated <loot-plugin-item> elements go here, containing # links to each plugin's section in the list. -->
             </core-menu>
-            <core-menu id="filters" class="tab-content hidden">
+            <core-menu id="filters" class="tab-content hidden" flex>
                 <div center horizontal layout>
                     <div flex>Hide version numbers</div>
                     <paper-checkbox id="hideVersionNumbers" data-class="version"></paper-checkbox>
@@ -121,7 +120,6 @@
                     <div><span id="hiddenMessageNo">0</span> / <span id="filterTotalMessageNo">0</span></div>
                 </div>
             </core-menu>
-            <div flex></div>
             <core-tooltip label="Press Enter when searching to select the next match." position="top">
                 <paper-input id="searchBox" type="search" label="Search content..."></paper-input>
             </core-tooltip>