From 9f2a0ff2715ac3db4671e03bcbc6d12bd351967e Mon Sep 17 00:00:00 2001
From: Craig Gidney <craig.gidney@gmail.com>
Date: Sat, 30 Apr 2016 16:08:58 -0400
Subject: [PATCH 1/3] Fading out the 'an error happened' div as the user
 changes the circuit and no more errors occur

---
 res/index.html              | 14 ++++++--------
 src/circuit/CircuitStats.js |  2 +-
 src/fallback.js             |  9 ++++++---
 src/main.js                 |  7 +++++++
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/res/index.html b/res/index.html
index 78b00ac5..7a8c54f1 100644
--- a/res/index.html
+++ b/res/index.html
@@ -11,27 +11,25 @@
                 <canvas id="drawCanvas"></canvas>
             </div>
         </div>
-        <div id="errorDiv" style="display:none; font-size:24px; font-family:monospace; color:red; background-color:#FFA;">
+        <div id="errorDiv" style="display:none; font-size:24px; font-family:monospace; color:red;">
             An error happened. :(
+            <div id="errorMessageDiv" style="font-size: 16px;"></div>
             <br/>
-            <br/>
-            You can:
-            <ul>
+            Please report it:
+            <ul style="font-size: 18px;">
                 <li>
                     <a id="error-github-anchor">Create an issue on github</a>
                     (requires an account)
                     (repository: <a href="https://github.com/Strilanc/Quirk">Strilanc/Quirk</a>)
                 </li>
-                <li>
-                    Undo what you just did to the circuit (hit CTRL+Z).
-                </li>
                 <li>
                     <a id="error-mailto-anchor"></a>
                 </li>
             </ul>
-            Useful details to mention:
             <br/>
             <br/>
+            Useful details to mention (auto-included if you use the create/email links above):
+            <br/>
             <div id="errorDescDiv" style="font-size: 16px;"></div>
         </div>
         <script src="src.min.js"></script>
diff --git a/src/circuit/CircuitStats.js b/src/circuit/CircuitStats.js
index 646907f5..3599f6db 100644
--- a/src/circuit/CircuitStats.js
+++ b/src/circuit/CircuitStats.js
@@ -128,7 +128,7 @@ export default class CircuitStats {
             return CircuitStats._fromCircuitAtTime_noFallback(circuitDefinition, time);
         } catch (ex) {
             notifyAboutRecoveryFromUnexpectedError(
-                "Computing circuit values failed. Defaulted to NaN results.",
+                `Defaulted to NaN results. Computing circuit values failed.`,
                 {circuitDefinition: Serializer.toJson(circuitDefinition)},
                 ex);
             return new CircuitStats(
diff --git a/src/fallback.js b/src/fallback.js
index f52aea11..6455d68e 100644
--- a/src/fallback.js
+++ b/src/fallback.js
@@ -2,12 +2,15 @@ import describe from "src/base/Describe.js"
 
 let _alreadySeen = [];
 let showErrorDiv = (subject, body) => {
+    document.getElementById('errorDiv').style.backgroundColor = '#FFA';
+    document.getElementById('errorDiv').style.opacity = 1.0;
+    document.getElementById('errorDiv').style.display = 'block';
     if (_alreadySeen.indexOf(body) !== -1) {
         return;
     }
     _alreadySeen.push(body);
 
-    document.getElementById('errorDiv').style.display = 'block';
+    document.getElementById('errorMessageDiv').innerText = subject;
     document.getElementById('errorDescDiv').innerText = body;
     document.getElementById('error-mailto-anchor').innerText = 'Email the issue to craig.gidney@gmail.com';
     document.getElementById('error-mailto-anchor').href = [
@@ -54,10 +57,10 @@ let notifyAboutRecoveryFromUnexpectedError = (recovery, context, error) => {
          simplifySrcUrls(location)
     ].join('\n');
 
-    showErrorDiv(recovery, msg);
+    showErrorDiv(recovery + ' (' + (error.message || '') + ')', msg);
 };
 
-let simplifySrcUrls = textContainingUrls => textContainingUrls.replace(/http.+\/src\.min\.js/g, 'src.min.js');
+let simplifySrcUrls = textContainingUrls => textContainingUrls.replace(/http.+?\/src\.min\.js/g, 'src.min.js');
 
 let drawErrorBox = msg => {
     let canvas = document.getElementById("drawCanvas");
diff --git a/src/main.js b/src/main.js
index 5f616788..d507c97c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -124,6 +124,13 @@ const redrawNow = () => {
     let painter = new Painter(canvas);
     let shown = syncArea(inspector).previewDrop();
     if (!currentCircuitStatsCache.circuitDefinition.isEqualTo(shown.circuitWidget.circuitDefinition)) {
+        // Maybe this fresh new circuit isn't failing. Clear the error tint.
+        let errDivStyle = document.getElementById('errorDiv').style;
+        errDivStyle.opacity *= 0.9;
+        if (errDivStyle.opacity < 0.06) {
+            errDivStyle.display = 'None'
+        }
+
         currentCircuitStatsCache =
             new CycleCircuitStats(shown.circuitWidget.circuitDefinition, Config.TIME_CACHE_GRANULARITY);
     }

From 23221deb4656813b080407d68b34eaa2f4720a6c Mon Sep 17 00:00:00 2001
From: Craig Gidney <craig.gidney@gmail.com>
Date: Sat, 30 Apr 2016 16:16:59 -0400
Subject: [PATCH 2/3] After error div fades away, old errors can reshow

---
 src/fallback.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/fallback.js b/src/fallback.js
index 6455d68e..9bc8baf2 100644
--- a/src/fallback.js
+++ b/src/fallback.js
@@ -2,14 +2,23 @@ import describe from "src/base/Describe.js"
 
 let _alreadySeen = [];
 let showErrorDiv = (subject, body) => {
-    document.getElementById('errorDiv').style.backgroundColor = '#FFA';
-    document.getElementById('errorDiv').style.opacity = 1.0;
-    document.getElementById('errorDiv').style.display = 'block';
+    let errDivStyle = document.getElementById('errorDiv').style;
+    if (errDivStyle.display !== 'block') {
+        // Faded away. We can re-show messages now.
+        _alreadySeen = [];
+    }
+
+    // Error just happened, so this should be showing and highlighted.
+    errDivStyle.backgroundColor = '#FFA';
+    errDivStyle.opacity = 1.0;
+    errDivStyle.display = 'block';
+
     if (_alreadySeen.indexOf(body) !== -1) {
         return;
     }
     _alreadySeen.push(body);
 
+    // Set shown error details.
     document.getElementById('errorMessageDiv').innerText = subject;
     document.getElementById('errorDescDiv').innerText = body;
     document.getElementById('error-mailto-anchor').innerText = 'Email the issue to craig.gidney@gmail.com';

From 9831f238d2cffb26fbf0b0afe1559d8759dfa01b Mon Sep 17 00:00:00 2001
From: Craig Gidney <craig.gidney@gmail.com>
Date: Sat, 30 Apr 2016 16:28:05 -0400
Subject: [PATCH 3/3] Added About link, and allowed reshowing of repeated but
 faded error messages

---
 res/index.html  | 2 ++
 src/fallback.js | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/res/index.html b/res/index.html
index 7a8c54f1..a6f7a1ec 100644
--- a/res/index.html
+++ b/res/index.html
@@ -6,6 +6,8 @@
         <link rel="shortcut icon" href="favicon.ico">
     </head>
     <body style="margin: 0">
+        <a href="https://github.com/Strilanc/Quirk/"
+           style="position: fixed; bottom: 5px; right: 5px; font-size: 20px;">About Quirk</a>
         <div id="inspectorDiv">
             <div id="canvasDiv" style="width: 100%;">
                 <canvas id="drawCanvas"></canvas>
diff --git a/src/fallback.js b/src/fallback.js
index 9bc8baf2..9ae4df3f 100644
--- a/src/fallback.js
+++ b/src/fallback.js
@@ -3,8 +3,9 @@ import describe from "src/base/Describe.js"
 let _alreadySeen = [];
 let showErrorDiv = (subject, body) => {
     let errDivStyle = document.getElementById('errorDiv').style;
-    if (errDivStyle.display !== 'block') {
-        // Faded away. We can re-show messages now.
+    if (errDivStyle.opacity < 0.7) {
+        // Partially faded away as user interacted with circuit.
+        // Enough time to justify updating the message despite the risk of clearing the user's selection.
         _alreadySeen = [];
     }