Better install view error handling (#1472)

If linking fails because an http request didn't connect, show a message and
allow the user to start over.

// FREEBIE

background.html

@@ -731,6 +731,14 @@
         </div>
       </div>
     </div>
+    <div id='stepNetworkError' class='step hidden'>
+      <div class='inner error-dialog clearfix'>
+        <div class='panel step-body'>{{ installConnectionFailed }}</div>
+        <button class='ok step3 button'>{{ tryAgain }}</button>
+        <div class='nav'>
+        </div>
+      </div>
+    </div>
   </script>
 
   <script type='text/x-tmpl-mustache' id='standalone'>

js/views/install_view.js

@@ -11,6 +11,7 @@
         ENTER_NAME: 4,
         PROGRESS_BAR: 5,
         TOO_MANY_DEVICES: 'TooManyDevices',
+        NETWORK_ERROR: 'NetworkError',
     };
 
     Whisper.InstallView = Whisper.View.extend({
@@ -31,7 +32,9 @@
                 installComputerName: i18n('installComputerName'),
                 installFinalButton: i18n('installFinalButton'),
                 installTooManyDevices: i18n('installTooManyDevices'),
+                installConnectionFailed: i18n('installConnectionFailed'),
                 ok: i18n('ok'),
+                tryAgain: i18n('tryAgain'),
                 development: window.config.environment === 'development'
             };
         },
@@ -74,10 +77,13 @@
             if (this.canceled) {
                 return;
             }
+            console.log('provisioning failed', e.stack);
 
             if (e.message === 'websocket closed') {
                 this.showConnectionError();
                 this.trigger('disconnected');
+            } else if (e.name === 'HTTPError' && e.code == -1) {
+                this.selectStep(Steps.NETWORK_ERROR);
             } else if (e.name === 'HTTPError' && e.code == 411) {
                 this.showTooManyDevices();
             } else {

stylesheets/manifest.css

@@ -3521,12 +3521,12 @@ li.entry .error-icon-container {
     max-width: 100%; }
   .install ul.country-list {
     min-width: 197px !important; }
-  .install .confirmation-dialog, .install .progress-dialog, .install .error-dialog {
+  .install .confirmation-dialog, .install .progress-dialog {
     padding: 1em;
     text-align: left; }
   .install .number {
     text-align: center; }
-  .install .confirmation-dialog button, .install .error-dialog button {
+  .install .confirmation-dialog button {
     float: right;
     margin-left: 10px; }
   .install .progress-dialog {
@@ -3546,8 +3546,6 @@ li.entry .error-icon-container {
       height: 100%;
       background-color: #a2d2f4;
       transition: width 0.25s; }
-  .install .error-dialog {
-    display: none; }
   .install .modal-container {
     display: none;
     position: absolute;

stylesheets/options.scss

@@ -268,12 +268,12 @@
     min-width: 197px !important;
   }
 
-  .confirmation-dialog, .progress-dialog, .error-dialog {
+  .confirmation-dialog, .progress-dialog {
     padding: 1em;
     text-align: left;
   }
   .number { text-align: center; }
-  .confirmation-dialog, .error-dialog {
+  .confirmation-dialog {
     button {
       float: right;
       margin-left: 10px;
@@ -303,9 +303,6 @@
       }
     }
   }
-  .error-dialog {
-    display: none;
-  }
 
   .modal-container {
     display: none;