Added <loot-dialog> custom element.

This is a <paper-dialog> with a <dialog>-like API.

resources/report/html/loot-dialog.html

@@ -1,9 +1,47 @@
 <!--
+<loot-dialog> is an extension of <paper-dialog> that gives it a <dialog>-like API.
 
-<loot-dialog> is an extension of <paper-dialog> that
+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-dialog.html">
+<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
 
+<polymer-element name="loot-dialog" extends="paper-dialog" attributes="open">
+    <template>
+
+        <shadow></shadow>
+    </template>
+    <script>
+    Polymer({
+        open: false,
+
+        openedChanged: function(oldValue, newValue) {
+            this.open = newValue;
+        },
+
+        openChanged: function(oldValue, newValue) {
+            this.opened = newValue;
+        },
+
+        show: function() {
+            this.backdrop = false;
+            this.opened = true;
+            this.layered = false;
+        },
+        showModal: function() {
+            this.backdrop = true;
+            this.opened = true;
+            // The layered attribute seems to cause the dialog to be destroyed for some reason, so don't use it. It doesn't seem to be necessary anyway.
+            this.layered = false;
+        },
+        close: function(retVal) {
+            this.setAttribute('returnValue', retVal);
+            this.opened = false;
+        },
+    });
+    </script>

resources/report/js/script.js

@@ -775,8 +775,8 @@ function sortUIElements(pluginNames) {
 }
 function openProgressDialog() {
     var progressDialog = document.getElementById('progressDialog');
-    if (!progressDialog.opened) {
-        progressDialog.opened = true;
+    if (!progressDialog.open) {
+        progressDialog.showModal();
         progressDialog.querySelector('.progress').classList.toggle('running');
     }
 }
@@ -786,8 +786,8 @@ function updateProgressDialog(message) {
 }
 function closeProgressDialog() {
     var progressDialog = document.getElementById('progressDialog');
-    if (progressDialog.opened) {
-        progressDialog.opened = false;
+    if (progressDialog.open) {
+        progressDialog.close();
         progressDialog.querySelector('.progress').classList.toggle('running');
     }
 }
@@ -1035,7 +1035,7 @@ function switchSidebarTab(evt) {
 }
 
 function showAboutDialog(evt) {
-    document.getElementById('about').opened = true;
+    document.getElementById('about').showModal();
 }
 function closeSettingsDialog(evt) {
     if (!areSettingsValid()) {
@@ -1089,7 +1089,7 @@ function closeSettingsDialog(evt) {
 }
 
 function showSettingsDialog(evt) {
-    document.getElementById('settings').opened = true;
+    document.getElementById('settings').showModal();
 }
 
 function getDialogParent(element) {
@@ -1374,7 +1374,7 @@ function initVars() {
             }
 
             if (!loot.settings.lastVersion || loot.settings.lastVersion != loot.version) {
-                document.getElementById('firstRun').opened = true;
+                document.getElementById('firstRun').showModal();
             }
         }).catch(processCefError);
 

resources/report/report.html

@@ -12,6 +12,7 @@
     <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="bower_components/core-toolbar/core-toolbar.html">
     <link rel="import" href="bower_components/core-icon/core-icon.html">
@@ -182,7 +183,7 @@
         </div>
     </core-drawer-panel>
 
-    <paper-dialog id="about" heading="About LOOT" transition="paper-dialog-transition-center" backdrop>
+    <loot-dialog id="about" heading="About LOOT" transition="paper-dialog-transition-center" backdrop>
         <p>Version <span id="LOOTVersion"></span> (build <span id="LOOTBuild"></span>)</p>
         <p>Load order optimisation for Oblivion, Skyrim, Fallout 3 and Fallout: New Vegas.</p>
         <p><a href="http://loot.github.io">http://loot.github.io</a></p>
@@ -202,9 +203,9 @@ 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>
-    </paper-dialog>
+    </loot-dialog>
 
-    <paper-dialog id="settings" heading="Settings" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
+    <loot-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">
@@ -255,10 +256,10 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         <p id="languageRestartTxt">Language changes will be applied after LOOT is restarted.</p>
         <paper-button class="accept" affirmative autofocus>Apply</paper-button>
         <paper-button class="cancel" affirmative>Cancel</paper-button>
-    </paper-dialog>
+    </loot-dialog>
 
     <div id="hoverText" class="hidden"></div>
-    <paper-dialog id="progressDialog" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
+    <loot-dialog id="progressDialog" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
         <!-- CEF doesn't seem to want to play any animation set through CSS
              for <progress>'s internal value pseudo-element, so use this
              instead. -->
@@ -266,9 +267,9 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
             <div class="value"></div>
         </div>
         <h1>Calculating the last digit of &pi;...</h1>
-    </paper-dialog>
+    </loot-dialog>
 
-    <paper-dialog id="firstRun" heading="First-Time Tips" transition="paper-dialog-transition-center" backdrop>
+    <loot-dialog id="firstRun" heading="First-Time Tips" transition="paper-dialog-transition-center" backdrop>
         <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>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>
@@ -280,6 +281,6 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
         </ul>
         <p>See LOOT's documentation, accessed through the toolbar menu, for further details.</p>
         <paper-button affirmative autofocus>OK</paper-button>
-    </paper-dialog>
+    </loot-dialog>
     <script src="js/script.js"></script>
 </body>