Started to polymerise settings dialog.

However, the editable table still needs polymerisation, and there are
issues with getting and setting values, thanks to API differences from
standard elements (which is the only downside to Polymer I've come
across).

resources/report/css/style.css

@@ -48,7 +48,7 @@ noscript {
 #gameMenu {
     background: inherit;
 }
-#gameMenu::shadow #control[selected] {
+#gameMenu::shadow #control {
     color: white;
     border-bottom-color: #f1f1f1;
 }
@@ -133,9 +133,6 @@ dialog > h1 {
 dialog[data-type=warn] > span:first-child  {
     color: gold;
 }
-dialog > .buttons {
-    text-align: center;
-}
 dialog button {
     margin: 0.5em;
 }
@@ -230,10 +227,6 @@ plugin-card > ul {
     margin-left: 1.75em;
 }
 
-#settings {
-    width: auto;
-    max-width: 90%;
-}
 #settings > select {
     float: right;
     clear: both;
@@ -246,8 +239,13 @@ plugin-card > ul {
     padding: 1px;
     margin: 2px;
 }
-
-
+paper-checkbox {
+    padding: 0.5em 1em;
+}
+paper-dropdown-menu {
+    padding-left: 2em;
+    top: -0.25em;
+}
 
 input[readonly] {
     border: none;

resources/report/js/script.js

@@ -187,22 +187,18 @@ var loot = {
 
         /* Now fill with new values. */
         this.settings.games.forEach(function(game){
-            var option = document.createElement('option');
-            option.value = game.folder;
-            option.textContent = game.name;
-            gameSelect.appendChild(option);
-
-            var li = document.createElement('paper-item');
-            li.setAttribute('data-folder', game.folder);
-            li.setAttribute('label', game.name);
-            gameMenu.appendChild(li);
+            var menuItem = document.createElement('paper-item');
+            menuItem.setAttribute('data-folder', game.folder);
+            menuItem.setAttribute('label', game.name);
+            gameMenu.appendChild(menuItem);
+            gameSelect.appendChild(menuItem.cloneNode());
 
             var row = gameTable.addRow(game);
             gameTable.setReadOnly(row, ['name','folder','type']);
         });
 
-        gameSelect.value = this.settings.game;
-        document.getElementById('languageSelect').value = this.settings.language;
+        gameSelect.selected = this.settings.game;
+        document.getElementById('languageSelect').selected = this.settings.language;
         document.getElementById('enableDebugLogging').checked = this.settings.enableDebugLogging;
         document.getElementById('updateMasterlist').checked = this.settings.updateMasterlist;
         document.getElementById('autoRefresh').checked = this.settings.autoRefresh;
@@ -1051,9 +1047,9 @@ function closeSettingsDialog(evt) {
         /* Update the JS variable values. */
         var settings = {
             enableDebugLogging: document.getElementById('enableDebugLogging').checked,
-            game: document.getElementById('defaultGameSelect').value,
+            game: document.getElementById('defaultGameSelect').selected,
             games: document.getElementById('gameTable').getRowsData(false),
-            language: document.getElementById('languageSelect').value,
+            language: document.getElementById('languageSelect').selected,
             lastGame: loot.settings.lastGame,
             updateMasterlist: document.getElementById('updateMasterlist').checked,
             filters: loot.settings.filters,
@@ -1090,11 +1086,10 @@ function closeSettingsDialog(evt) {
         /* Re-apply the existing settings to the settings dialog elements. */
         loot.updateSettingsUI();
     }
-    dialog.close();
 }
 
 function showSettingsDialog(evt) {
-    document.getElementById('settings').showModal();
+    document.getElementById('settings').opened = true;
 }
 
 function getDialogParent(element) {
@@ -1275,11 +1270,15 @@ function initVars() {
             var settingsLangSelect = document.getElementById('languageSelect');
             var messageLangSelect = editableTableImportDoc.querySelector('#messageRow').content.querySelector('.language');
             for (var i = 0; i < loot.languages.length; ++i) {
+                var settingsItem = document.createElement('paper-item');
+                settingsItem.setAttribute('value', loot.languages[i].locale);
+                settingsItem.setAttribute('label', loot.languages[i].name);
+                settingsLangSelect.appendChild(settingsItem);
+
                 var option = document.createElement('option');
                 option.value = loot.languages[i].locale;
                 option.textContent = loot.languages[i].name;
-                settingsLangSelect.appendChild(option);
-                messageLangSelect.appendChild(option.cloneNode(true));
+                messageLangSelect.appendChild(option);
             }
         } catch (e) {
             console.log(e);

resources/report/report.html

@@ -202,20 +202,32 @@ along with LOOT. If not, see <http://www.gnu.org/licenses/>.
         <paper-button affirmative autofocus>OK</paper-button>
     </paper-dialog>
 
-    <dialog id="settings">
-        <h1>Settings</h1>
-        <label for="defaultGameSelect">Default Game</label>
-        <select id="defaultGameSelect">
-            <option value="auto">Autodetect</option>
-            <!-- Game <option> elements go here. -->
-        </select><br>
-        <label for="languageSelect">Language</label>
-        <select id="languageSelect">
-            <!-- Language <option> elements go here. -->
-        </select><br>
-        <p><input type="checkbox" id="enableDebugLogging"><label for="enableDebugLogging" title="The output is logged to the LOOTDebugLog.txt file.">Enable debug logging</label></p>
-        <p><input type="checkbox" id="updateMasterlist"><label for="updateMasterlist">Update masterlist before sorting</label></p>
-        <p><input type="checkbox" id="autoRefresh"><label for="autoRefresh">Automatically refresh content on window refocus</label></p>
+    <paper-dialog id="settings" heading="Settings" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
+        <div center horizontal layout>
+            <div>Default Game</div>
+            <paper-dropdown-menu id="defaultGameSelect" valueattr="data-folder">
+                <paper-item data-folder="auto" label="Autodetect"></paper-item>
+                <!-- Game <option> elements go here. -->
+            </paper-dropdown-menu>
+        </div>
+        <div center horizontal layout>
+            <div>Language</div>
+            <paper-dropdown-menu id="languageSelect" valueattr="value">
+                <!-- Language <option> elements go here. -->
+            </paper-dropdown-menu>
+        </div>
+        <paper-tooltip label="The output is logged to the LOOTDebugLog.txt file." center horizontal layout>
+            <paper-checkbox id="enableDebugLogging"></paper-checkbox>
+            <div>Enable debug logging</div>
+        </paper-tooltip>
+        <div center horizontal layout>
+            <paper-checkbox id="updateMasterlist"></paper-checkbox>
+            <div>Update masterlist before sorting</div>
+        </div>
+        <div center horizontal layout>
+            <paper-checkbox id="autoRefresh"></paper-checkbox>
+            <div>Automatically refresh content on window refocus</div>
+        </div>
         <table is="editable-table" id="gameTable" data-template="gameRow">
             <thead>
                 <tr>
@@ -239,12 +251,9 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
             </tbody>
         </table>
         <p id="languageRestartTxt">Language changes will be applied after LOOT is restarted.</p>
-        <hr>
-        <div class="buttons">
-            <button class="accept">Apply</button>
-            <button class="cancel">Cancel</button>
-        </div>
-    </dialog>
+        <paper-button class="accept" affirmative autofocus>Apply</paper-button>
+        <paper-button class="cancel" affirmative>Cancel</paper-button>
+    </paper-dialog>
 
     <div id="hoverText" class="hidden"></div>
     <paper-dialog id="progressDialog" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>