Polymerised first-run and progress dialogs.

I decided not to use paper-progress as it's less simple to animate.

resources/report/css/style.css

@@ -330,7 +330,7 @@ progress::-webkit-progress-value, .progress .value {
     background-color: green;
     -webkit-animation: indeterminate 2s linear 0 infinite alternate paused;
 }
-#progressDialog[open] > .progress > .value {
+.progress.running > .value {
     -webkit-animation-play-state: running;
 }
 
@@ -343,10 +343,6 @@ progress::-webkit-progress-value, .progress .value {
     list-style-type: disc;
     padding-left: 40px;
 }
-#firstRun > button {
-    display: block;
-    margin: 0 auto;
-}
 #firstRun .tag {
     margin: 0;
 }

resources/report/js/script.js

@@ -779,8 +779,9 @@ function sortUIElements(pluginNames) {
 }
 function openProgressDialog() {
     var progressDialog = document.getElementById('progressDialog');
-    if (!progressDialog.open) {
-        progressDialog.showModal();
+    if (!progressDialog.opened) {
+        progressDialog.opened = true;
+        progressDialog.querySelector('.progress').classList.toggle('running');
     }
 }
 function updateProgressDialog(message) {
@@ -789,8 +790,9 @@ function updateProgressDialog(message) {
 }
 function closeProgressDialog() {
     var progressDialog = document.getElementById('progressDialog');
-    if (progressDialog.open) {
-        progressDialog.close();
+    if (progressDialog.opened) {
+        progressDialog.opened = false;
+        progressDialog.querySelector('.progress').classList.toggle('running');
     }
 }
 function sortPlugins(evt) {
@@ -1176,9 +1178,6 @@ function focusSearch(evt) {
         document.getElementById('searchBox').focus();
     }
 }
-function closeFirstRunDialog(evt) {
-    evt.target.parentElement.close();
-}
 function handleUnappliedChangesClose() {
     showMessageDialog('Unapplied Sorting Changes', 'You have not yet applied or cancelled your sorted load order. Apply your load order before quitting?', function(result){
         if (result) {
@@ -1230,9 +1229,6 @@ function setupEventHandlers() {
     settings.getElementsByClassName('accept')[0].addEventListener('click', closeSettingsDialog, false);
     settings.getElementsByClassName('cancel')[0].addEventListener('click', closeSettingsDialog, false);
 
-    /* Set up event handler for closing the first-run dialog. */
-    document.getElementById('firstRun').getElementsByTagName('button')[0].addEventListener('click', closeFirstRunDialog, false);
-
     /* Set up event handler for hover text. */
     var hoverTargets = document.querySelectorAll('[title]');
     for (var i = 0; i < hoverTargets.length; ++i) {
@@ -1379,7 +1375,7 @@ function initVars() {
             }
 
             if (!loot.settings.lastVersion || loot.settings.lastVersion != loot.version) {
-                document.getElementById('firstRun').showModal();
+                document.getElementById('firstRun').opened = true;
             }
         }).catch(processCefError);
 
@@ -1464,15 +1460,17 @@ function onFocus(evt) {
 require.config({
     baseUrl: "js",
   });
-require(['marked', 'l10n', 'plugin'], function(markedResponse, l10nResponse) {
-    marked = markedResponse;
-    l10n = l10nResponse;
-    /* Make sure settings are what I want. */
-    marked.setOptions({
-        gfm: true,
-        tables: true,
-        sanitize: true
+window.addEventListener('polymer-ready', function(e) {
+    require(['marked', 'l10n', 'plugin'], function(markedResponse, l10nResponse) {
+        marked = markedResponse;
+        l10n = l10nResponse;
+        /* Make sure settings are what I want. */
+        marked.setOptions({
+            gfm: true,
+            tables: true,
+            sanitize: true
+        });
+        setupEventHandlers();
+        initVars();
     });
-    setupEventHandlers();
-    initVars();
-});
+}, false);

resources/report/report.html

@@ -247,7 +247,7 @@ along with LOOT. If not, see <http://www.gnu.org/licenses/>.
     </dialog>
 
     <div id="hoverText" class="hidden"></div>
-    <dialog id="progressDialog">
+    <paper-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. -->
@@ -255,10 +255,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>
-    </dialog>
+    </paper-dialog>
 
-    <dialog id="firstRun">
-        <h1>First-Time Tips</h1>
+    <paper-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>
@@ -268,8 +267,8 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
             <li>Plugins can be drag and dropped from the sidebar into editors' <q>load after</q>, <q>requirements</q> and <q>incompatibility</q> tables.</li>
             <li>Many interface elements have tooltips. If you don't know what something is, try hovering your mouse over it to find out.</li>
         </ul>
-        <p>See LOOT's documentation, accessed through the <q>Help</q> menu, for further details.</p>
-        <button class="accept">OK</button>
-    </dialog>
+        <p>See LOOT's documentation, accessed through the toolbar menu, for further details.</p>
+        <paper-button affirmative autofocus>OK</paper-button>
+    </paper-dialog>
     <script src="js/script.js"></script>
 </body>