From 86b81dcafd26c859fe55c5c24c19e5956026d56c Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Tue, 26 Aug 2014 23:22:27 +0100
Subject: [PATCH] Implemented custom progress bar.

CEF won't animate the `<progress>` value pseudo-element, though it works
fine in Chrome, so I had to roll my own. Part of #246.
---
 resources/report/css/style.css | 17 +++++++++++++----
 resources/report/js/script.js  |  2 +-
 resources/report/report.html   |  9 +++++++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 2e0146e4..50a74bf9 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -419,12 +419,16 @@ input:valid {
     box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
     padding: 2px 5px;
 }
-progress {
+progress, .progress {
     /* Reset the default appearance */
     -webkit-appearance: none;
     width: 250px;
     height: 20px;
     display: block;
+    margin: 0 auto;
+}
+#progressDialog > h1 {
+    font-size: 1.5em;
 }
 
 @-webkit-keyframes indeterminate {
@@ -432,11 +436,16 @@ progress {
 	100% { width: 100% }
 }
 
-progress::-webkit-progress-bar {
+progress::-webkit-progress-bar, .progress.bar {
     background-color: #eee;
     border-radius: 2px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
 }
-progress::-webkit-progress-value {
-    -webkit-animation: indeterminate 5s linear 0 infinite alternate;
+progress::-webkit-progress-value, .progress .value {
+    height: 100%;
+    background-color: green;
+    -webkit-animation: indeterminate 2s linear 0 infinite alternate paused;
+}
+#progressDialog[open] > .progress > .value {
+    -webkit-animation-play-state: running;
 }
\ No newline at end of file
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 776ba31e..3ab20846 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -759,7 +759,7 @@ function updateProgressDialog(message) {
     progressDialog.getElementsByTagName('h1')[0].textContent = message;
 }
 function sortPlugins(evt) {
-    updateProgressDialog('LOOT Working...');
+    updateProgressDialog('Sorting plugins...');
     toggleProgressDialog();
     if (loot.settings.updateMasterlist) {
         updateMasterlist(evt);
diff --git a/resources/report/report.html b/resources/report/report.html
index aaf284ce..3d62a37c 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -566,8 +566,13 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
 
     <div id="hoverText" class="hidden"></div>
     <dialog id="progressDialog">
-        <progress></progress>
-        <h1></h1>
+        <!-- CEF doesn't seem to want to play any animation set through CSS
+             for <progress>'s internal value pseudo-element, so use this
+             instead. -->
+        <div class="progress bar">
+            <div class="value"></div>
+        </div>
+        <h1>Calculating the last digit of &pi;...</h1>
     </dialog>
 
     <script src="js/script.js"></script>