Improve troubleshooting tool (#364)

With the old version, where network checks are only done after clicking
the corresponding button, many people would forget to click on that
button.

Now all checks are done with a click on the "Start Test" button.

troubleshoot/index.html

@@ -118,93 +118,100 @@
 
         <h1>Threema Web Diagnostics</h1>
 
-        <h2>Is JavaScript enabled?</h2>
-        <div id="status-js">
-            <div class="status status-no">
-                <i class="material-icons md-36">error</i> <span class="text">No</span>
-            </div>
-            <div class="status status-yes hidden">
-                <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
-            </div>
-        </div>
-
-        <h2>Is WebRTC available?</h2>
-        <div id="status-pc">
-            <div class="status status-unknown">
-                <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
-            </div>
-            <div class="status status-no hidden">
-                <i class="material-icons md-36">error</i> <span class="text">No</span>
-                <p class="small">RTCPeerConnection is a part of WebRTC.<br>Threema Web cannot work without it.</p>
-            </div>
-            <div class="status status-yes hidden">
-                <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
-            </div>
-        </div>
-
-        <h2>Are WebRTC DataChannels available?</h2>
-        <div id="status-dc">
-            <div class="status status-unknown">
-                <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
-            </div>
-            <div class="status status-no hidden">
-                <i class="material-icons md-36">error</i> <span class="text">No</span>
-                <p class="small">RTCDataChannel is a part of WebRTC.<br>Threema Web cannot work without it.</p>
-            </div>
-            <div class="status status-yes hidden">
-                <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
-            </div>
-        </div>
-
-        <h2>Is LocalStorage available?</h2>
-        <div id="status-ls">
-            <div class="status status-unknown">
-                <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
-            </div>
-            <div class="status status-no hidden">
-                <i class="material-icons md-36">error</i> <span class="text">No</span>
-                <p class="small">Without LocalStorage, persistent sessions and settings<br>cannot be stored in the browser.<br>
-                See the <a href="https://threema.ch/faq/web_browser_settings">FAQ</a> for information on how to fix this.</p>
-            </div>
-            <div class="status status-yes hidden">
-                <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
-            </div>
-        </div>
-
-        <h2>Are desktop notifications available?</h2>
-        <div id="status-dn">
-            <div class="status status-unknown">
-                <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
-            </div>
-            <div class="status status-no hidden">
-                <i class="material-icons md-36">error</i> <span class="text">No</span>
-                <p class="small">Without desktop notifications, we cannot notify you when a new message arrives.</p>
-            </div>
-            <div class="status status-yes hidden">
-                <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
-            </div>
-        </div>
-
-        <h2>Does TURN work?</h2>
-        <div id="status-turn">
-            <div class="status status-unknown">
-                <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
-            </div>
-            <div class="status status-no hidden">
-                <i class="material-icons md-36">error</i> <span class="text">No</span>
-                <p class="small hidden">It looks like TURN traffic is being blocked by your firewall.<br>
-                Without TURN, connections can only be established if your computer<br>
-                and your phone are in the same network.</p>
-            </div>
-            <div class="status status-yes hidden">
-                <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
-            </div>
-            <div class="status status-test hidden">
-                <button>Click to test</button>
-            </div>
-            <div class="results hidden">
-                <p>Results:</p>
-                <p class="result-data"></p>
+        <p id="help-text">This test will check your browser for compatibility problems. It
+        will also check whether WebRTC connection buildup using STUN/TURN works.</p>
+
+        <button id="start">Start Test</button>
+
+        <div id="checks" class="hidden">
+            <h2>Is JavaScript enabled?</h2>
+            <div id="status-js">
+                <div class="status status-no">
+                    <i class="material-icons md-36">error</i> <span class="text">No</span>
+                </div>
+                <div class="status status-yes hidden">
+                    <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
+                </div>
+            </div>
+
+            <h2>Is WebRTC available?</h2>
+            <div id="status-pc">
+                <div class="status status-unknown">
+                    <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
+                </div>
+                <div class="status status-no hidden">
+                    <i class="material-icons md-36">error</i> <span class="text">No</span>
+                    <p class="small">RTCPeerConnection is a part of WebRTC.<br>Threema Web cannot work without it.</p>
+                </div>
+                <div class="status status-yes hidden">
+                    <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
+                </div>
+            </div>
+
+            <h2>Are WebRTC DataChannels available?</h2>
+            <div id="status-dc">
+                <div class="status status-unknown">
+                    <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
+                </div>
+                <div class="status status-no hidden">
+                    <i class="material-icons md-36">error</i> <span class="text">No</span>
+                    <p class="small">RTCDataChannel is a part of WebRTC.<br>Threema Web cannot work without it.</p>
+                </div>
+                <div class="status status-yes hidden">
+                    <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
+                </div>
+            </div>
+
+            <h2>Is LocalStorage available?</h2>
+            <div id="status-ls">
+                <div class="status status-unknown">
+                    <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
+                </div>
+                <div class="status status-no hidden">
+                    <i class="material-icons md-36">error</i> <span class="text">No</span>
+                    <p class="small">Without LocalStorage, persistent sessions and settings<br>cannot be stored in the browser.<br>
+                    See the <a href="https://threema.ch/faq/web_browser_settings">FAQ</a> for information on how to fix this.</p>
+                </div>
+                <div class="status status-yes hidden">
+                    <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
+                </div>
+            </div>
+
+            <h2>Are desktop notifications available?</h2>
+            <div id="status-dn">
+                <div class="status status-unknown">
+                    <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
+                </div>
+                <div class="status status-no hidden">
+                    <i class="material-icons md-36">error</i> <span class="text">No</span>
+                    <p class="small">Without desktop notifications, we cannot notify you when a new message arrives.</p>
+                </div>
+                <div class="status status-yes hidden">
+                    <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
+                </div>
+            </div>
+
+            <h2>Does TURN work?</h2>
+            <div id="status-turn">
+                <div class="status status-unknown">
+                    <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
+                </div>
+                <div class="status status-no hidden">
+                    <i class="material-icons md-36">error</i> <span class="text">No</span>
+                    <p class="small hidden">It looks like TURN traffic is being blocked by your firewall.<br>
+                    Without TURN, connections can only be established if your computer<br>
+                    and your phone are in the same network.</p>
+                </div>
+                <div class="status status-yes hidden">
+                    <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
+                </div>
+                <div class="status status-test hidden">
+                    <img src="loading.gif" alt="Loading...">
+                </div>
+                <div class="results hidden">
+                    <p>Results:</p>
+                    <p class="result-data"></p>
+                </div>
             </div>
         </div>
     </div>

troubleshoot/troubleshoot.js

@@ -12,6 +12,18 @@ function switchTo(type, newStatus) {
     document.querySelector('#status-' + type + ' .status-' + newStatus).classList.remove('hidden');
 }
 
+function setupChecks() {
+    var start = document.querySelector('#start');
+    var helpText = document.querySelector('#help-text');
+    var checks = document.querySelector('#checks');
+    start.addEventListener('click', function(e) {
+        start.classList.add('hidden');
+        helpText.classList.add('hidden');
+        checks.classList.remove('hidden');
+        doChecks();
+    });
+}
+
 function doChecks() {
     // Check for JS
     switchTo('js', 'yes');
@@ -67,9 +79,7 @@ function doChecks() {
         document.querySelector('#status-turn .results').classList.add('hidden');
         document.querySelector('#status-turn .status-no .small').classList.remove('hidden');
     }
-    var button = document.querySelector('#status-turn button');
-    button.addEventListener('click', function(e) {
-        button.outerHTML = '<img src="loading.gif" alt="Loading...">';
+    function testTurn() {
         timeout = setTimeout(function() {
             turnFail();
         }, 10000);
@@ -110,11 +120,12 @@ function doChecks() {
                 console.warn('Invalid candidate:', ice.candidate.candidate);
             }
         }
-    });
+    }
+    testTurn();
 }
 
 if (document.readyState != 'loading') {
-    doChecks();
+    setupChecks();
 } else {
-    document.addEventListener('DOMContentLoaded', doChecks);
+    document.addEventListener('DOMContentLoaded', setupChecks);
 }