From 0ffd4d60d90210238affd5bfbf08ca3e50b3fbd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sat, 16 Dec 2017 16:19:51 -0500
Subject: [PATCH] Improve error page at loading

- Display the "Reload page" instantly and not after 5 seconds
- Remove stack trace, buggy anyway
- Wrap the error details so it does not expand beyond boundaries (scrollbar would not show up either)
- Do not show the slow-loading warning on error
- Make zeeoe details selectable instead of editable
- Label improvements
---
 client/css/style.css            | 17 ++++++++++++-
 client/index.html               |  9 ++++---
 client/js/loading-slow-alert.js | 44 ++++++++++++++++++++++-----------
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index a4a4a397..215d1b24 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -160,6 +160,7 @@ kbd {
 }
 
 #js-copy-hack,
+#loading pre,
 #help,
 #windows .header .title,
 #windows .header .topic,
@@ -1354,10 +1355,24 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-top: 10px;
 }
 
-#loading-slow {
+#loading-slow,
+#loading-reload {
 	display: none;
 }
 
+#loading-reload {
+	margin-top: 15px;
+}
+
+#loading summary {
+	outline: none;
+	cursor: pointer;
+}
+
+#loading pre {
+	white-space: normal;
+}
+
 #sign-in label {
 	display: block;
 	margin-top: 10px;
diff --git a/client/index.html b/client/index.html
index dd0bd3f9..bfc61872 100644
--- a/client/index.html
+++ b/client/index.html
@@ -53,10 +53,11 @@
 							</div>
 							<div class="col-xs-12">
 								<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank" rel="noopener">Make sure to have JavaScript enabled.</a></p>
-								<div id="loading-slow">
-									<p>This is taking longer than it should, there might be connectivity issues.</p>
-									<button id="loading-slow-reload" class="btn">Reload page</button>
-								</div>
+								<p id="loading-slow">
+									This is taking longer than it should, there might be
+									connectivity issues.
+								</p>
+								<button id="loading-reload" class="btn">Reload page</button>
 								<script async src="js/loading-slow-alert.js"></script>
 							</div>
 						</div>
diff --git a/client/js/loading-slow-alert.js b/client/js/loading-slow-alert.js
index 2eb990dd..8ece9ead 100644
--- a/client/js/loading-slow-alert.js
+++ b/client/js/loading-slow-alert.js
@@ -8,40 +8,54 @@
  *    so that the timeout can be triggered while slow JS is loading
  */
 
-setTimeout(function() {
-	var element = document.getElementById("loading-slow");
+function displayReload() {
+	var loadingReload = document.getElementById("loading-reload");
+	if (loadingReload) {
+		loadingReload.style.display = "block";
+	}
+}
 
-	if (element) {
-		element.style.display = "block";
+var loadingSlowTimeout = setTimeout(function() {
+	var loadingSlow = document.getElementById("loading-slow");
+
+	// The parent element, #loading, is being removed when the app is loaded.
+	// Since the timer is not cancelled, `loadingSlow` can be not found after
+	// 5s. Wrap everything in this block to make sure nothing happens if the
+	// element does not exist (i.e. page has loaded).
+	if (loadingSlow) {
+		loadingSlow.style.display = "block";
+		displayReload();
 	}
 }, 5000);
 
-document.getElementById("loading-slow-reload").addEventListener("click", function() {
+document.getElementById("loading-reload").addEventListener("click", function() {
 	location.reload();
 });
 
-window.g_LoungeErrorHandler = function LoungeErrorHandler(error) {
+window.g_LoungeErrorHandler = function LoungeErrorHandler(e) {
 	var title = document.getElementById("loading-title");
 	title.textContent = "An error has occured";
 
-	title = document.getElementById("loading-page-message");
-	title.textContent = "An error has occured that prevented the client from loading correctly.";
+	var message = document.getElementById("loading-page-message");
+	message.textContent = "An error has occured that prevented the client from loading correctly.";
 
 	var summary = document.createElement("summary");
 	summary.textContent = "More details";
 
-	if (error instanceof ErrorEvent) {
-		error = error.message + "\n\n" + error.stack + "\n\nView developer tools console for more information and a better stacktrace.";
-	}
-
 	var data = document.createElement("pre");
-	data.contentEditable = true;
-	data.textContent = error;
+	data.textContent = e.message; // e is an ErrorEvent
+
+	var info = document.createElement("p");
+	info.textContent = "Open the developer tools of your browser for more information.";
 
 	var details = document.createElement("details");
 	details.appendChild(summary);
 	details.appendChild(data);
-	title.parentNode.insertBefore(details, title.nextSibling);
+	details.appendChild(info);
+	message.parentNode.insertBefore(details, message.nextSibling);
+
+	window.clearTimeout(loadingSlowTimeout);
+	displayReload();
 };
 
 window.addEventListener("error", window.g_LoungeErrorHandler);