Refactor install view

Let install view manage the connection to the provisioning socket as
well as cleaning up the window on completion, simplifying options.js.
Call `remove` so that the view stops listening when the window closes.
Move view script and template to background page.
Adds ability to hide nav if this isn't our first run.

// FREEBIE

background.html

@@ -508,6 +508,95 @@
     {{/action }}
   </script>
 
+  <script type='text/x-tmpl-mustache' id='install_flow_template'>
+    <div id='step1' class='step'>
+      <div class='inner'>
+        <div class='step-body'>
+          <img id='signal-icon' src='/images/icon_250.png'/>
+          <h1>{{ installWelcome }}</h1>
+          <p>{{ installTagline }}</p>
+        </div>
+        <div class='nav'>
+          <div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
+          <span class='dot step1 selected'></span>
+          <span class='dot step2'></span>
+          <span class='dot step3'></span>
+        </div>
+      </div>
+    </div>
+
+    <div id='step2' class='step'>
+      <div class='inner'>
+        <div class='step-body'>
+          <img id='signal-phone' src='/images/signal-phone.png'>
+          <p>{{{ installSignalLink }}}</p>
+        </div>
+        <div class='nav'>
+          <div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
+          <span class='dot step1'></span>
+          <span class='dot step2 selected'></span>
+          <span class='dot step3'></span>
+        </div>
+      </div>
+    </div>
+
+    <div id='step3' class='step'>
+      <div class='inner'>
+        <div class='step-body'>
+          <div id="qr"></div>
+          <p>{{ installAndroidInstructions }}</p>
+        </div>
+        <div class='nav'>
+          <span class='dot step1'></span>
+          <span class='dot step2'></span>
+          <span class='dot step3 selected'></span>
+        </div>
+      </div>
+    </div>
+
+    <form id='step4' class='step'>
+      <div class='inner'>
+        <div class='step-body'>
+          <p>{{ installLinkingWithNumber }}</p>
+          <h2 class='number'></h2>
+          <img id='signal-computer' src='/images/signal-laptop.png'>
+          <p>{{ installComputerName }}</p>
+          <div>
+            <input type='text' id='device-name' spellcheck='false' maxlength='50' />
+          </div>
+        </div>
+        <div class='nav'>
+          <div>
+            <input type='submit' class='button' id='sync' value='{{ installFinalButton }}' />
+          </div>
+        </div>
+      </div>
+    </form>
+
+    <div id='step5' class='step'>
+      <div class='inner'>
+        <div class='step-body'>
+          <img id='signal-icon' src='/images/icon_250.png'/>
+          <div class='progress-dialog'>
+            <p class='status'></p>
+            <div class='bar-container'><div class='bar progress-bar'></div></div>
+          </div>
+        </div>
+        <div class='nav'>
+        </div>
+      </div>
+    </div>
+
+    <div id='stepTooManyDevices' class='step'>
+      <div class='inner error-dialog clearfix'>
+        <div class='panel step-body'>{{ installTooManyDevices }}</div>
+        <div class='nav'>
+          <button class='ok step3'>{{ ok }}</button>
+        </div>
+      </div>
+    </div>
+  </script>
+
   <script type='text/javascript' src='js/components.js'></script>
   <script type='text/javascript' src='js/database.js'></script>
   <script type='text/javascript' src='js/debugLog.js'></script>
@@ -559,6 +648,7 @@
   <script type='text/javascript' src='js/views/confirmation_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
   <script type='text/javascript' src='js/views/settings_view.js'></script>
+  <script type="text/javascript" src="js/views/install_view.js"></script>
 
   <script type='text/javascript' src='js/wall_clock_listener.js'></script>
   <script type='text/javascript' src='js/rotate_signed_prekey_listener.js'></script>

js/background.js

@@ -126,14 +126,15 @@
                 storage.put('theme-setting', 'ios');
             }
             var syncRequest = new textsecure.SyncRequest(textsecure.messaging, messageReceiver);
+            Whisper.events.trigger('contactsync:begin');
             syncRequest.addEventListener('success', function() {
                 console.log('sync successful');
                 storage.put('synced_at', Date.now());
-                window.dispatchEvent(new Event('textsecure:contactsync'));
+                Whisper.events.trigger('contactsync');
             });
             syncRequest.addEventListener('timeout', function() {
                 console.log('sync timed out');
-                window.dispatchEvent(new Event('textsecure:contactsync'));
+                Whisper.events.trigger('contactsync');
             });
         }
     }

js/options.js

@@ -6,56 +6,19 @@
     extension.windows.getBackground(function(bg) {
         bg.storage.onready(function() {
             $(function() {
-                var deviceName = bg.textsecure.storage.user.getDeviceName();
+                var Whisper = bg.Whisper;
-                if (!deviceName) {
+                var installView = new Whisper.InstallView({
-                    deviceName = 'Chrome';
+                      el: $('#install')
-                    if (navigator.userAgent.match('Mac OS')) {
-                        deviceName += ' on Mac';
-                    } else if (navigator.userAgent.match('Linux')) {
-                        deviceName += ' on Linux';
-                    } else if (navigator.userAgent.match('Windows')) {
-                        deviceName += ' on Windows';
-                    }
-                }
-                var view = new Whisper.InstallView({
-                    el: $('#install'),
-                    deviceName: deviceName
                 });
-                if (bg.Whisper.Registration.everDone()) {
+                if (Whisper.Registration.everDone()) {
-                    view.selectStep(3);
+                    installView.selectStep(3);
+                    installView.hideDots();
                 }
-                view.$el.show();
+                installView.$el.show();
-                var accountManager = new bg.getAccountManager();
+                Whisper.events.on('contactsync', function() {
-
+                  bg.openInbox();
-                var init = function() {
+                  window.close();
-                    view.clearQR();
+                });
-
-                    accountManager.registerSecondDevice(
-                        view.setProvisioningUrl.bind(view),
-                        view.confirmNumber.bind(view),
-                        view.incrementCounter.bind(view)
-                    ).then(function() {
-                        var launch = function() {
-                            bg.openInbox();
-                            bg.removeEventListener('textsecure:contactsync', launch);
-                            window.close();
-                        };
-                        bg.addEventListener('textsecure:contactsync', launch);
-                        view.showSync();
-                    }).catch(function(e) {
-                        if (e.message === 'websocket closed') {
-                            view.showConnectionError();
-                            setTimeout(init, 10000);
-                        } else if (e.name === 'HTTPError' && e.code == 411) {
-                            view.showTooManyDevices();
-                        }
-                        else {
-                            throw e;
-                        }
-                    });
-                };
-                $('.error-dialog .ok').click(init);
-                init();
             });
         });
     });

js/views/install_view.js

@@ -7,6 +7,8 @@
 
     Whisper.InstallView = Whisper.View.extend({
         templateName: 'install_flow_template',
+        id: 'install',
+        className: 'main',
         render_attributes: function() {
             var playStoreHref = 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms';
             var appStoreHref = 'https://itunes.apple.com/us/app/signal-private-messenger/id874139669';
@@ -31,11 +33,53 @@
 
             this.render();
 
-            this.$('#device-name').val(options.deviceName);
+            var deviceName = textsecure.storage.user.getDeviceName();
+            if (!deviceName) {
+                deviceName = 'Chrome';
+                if (navigator.userAgent.match('Mac OS')) {
+                    deviceName += ' on Mac';
+                } else if (navigator.userAgent.match('Linux')) {
+                    deviceName += ' on Linux';
+                } else if (navigator.userAgent.match('Windows')) {
+                    deviceName += ' on Windows';
+                }
+            }
+
+            this.$('#device-name').val(deviceName);
             this.$('#step1').show();
+            this.connect();
+            this.on('disconnected', this.reconnect);
+            this.listenTo(Whisper.events, 'contactsync:begin', this.showSync);
+            this.listenTo(Whisper.events, 'contactsync', this.close);
+        },
+        connect: function() {
+            this.clearQR();
+            var accountManager = getAccountManager();
+            accountManager.registerSecondDevice(
+                this.setProvisioningUrl.bind(this),
+                this.confirmNumber.bind(this),
+                this.incrementCounter.bind(this)
+            ).catch(this.handleDisconnect.bind(this));
+        },
+        handleDisconnect: function(e) {
+            if (e.message === 'websocket closed') {
+                this.showConnectionError();
+                this.trigger('disconnected');
+            } else if (e.name === 'HTTPError' && e.code == 411) {
+                this.showTooManyDevices();
+            } else {
+                throw e;
+            }
+        },
+        reconnect: function() {
+            setTimeout(this.connect.bind(this), 10000);
+        },
+        close: function() {
+            this.remove();
         },
         events: function() {
             return {
+                'click .error-dialog .ok': 'connect',
                 'click .step1': this.selectStep.bind(this, 1),
                 'click .step2': this.selectStep.bind(this, 2),
                 'click .step3': this.selectStep.bind(this, 3)
@@ -94,6 +138,9 @@
         },
         showConnectionError: function() {
             this.$('#qr').text(i18n("installConnectionFailed"));
+        },
+        hideDots: function() {
+            this.$('#step3 .nav .dot').hide();
         }
     });
 })();

options.html

@@ -8,94 +8,6 @@
 </head>
 <body>
   <div id='install' class='main'>
-    <script type='text/x-tmpl-mustache' id='install_flow_template'>
-      <div id='step1' class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <img id='signal-icon' src='/images/icon_250.png'/>
-            <h1>{{ installWelcome }}</h1>
-            <p>{{ installTagline }}</p>
-          </div>
-          <div class='nav'>
-            <div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
-            <span class='dot step1 selected'></span>
-            <span class='dot step2'></span>
-            <span class='dot step3'></span>
-          </div>
-        </div>
-      </div>
-
-      <div id='step2' class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <img id='signal-phone' src='/images/signal-phone.png'>
-            <p>{{{ installSignalLink }}}</p>
-          </div>
-          <div class='nav'>
-            <div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
-            <span class='dot step1'></span>
-            <span class='dot step2 selected'></span>
-            <span class='dot step3'></span>
-          </div>
-        </div>
-      </div>
-
-      <div id='step3' class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <div id="qr"></div>
-            <p>{{ installAndroidInstructions }}</p>
-          </div>
-          <div class='nav'>
-            <span class='dot step1'></span>
-            <span class='dot step2'></span>
-            <span class='dot step3 selected'></span>
-          </div>
-        </div>
-      </div>
-
-      <form id='step4' class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <p>{{ installLinkingWithNumber }}</p>
-            <h2 class='number'></h2>
-            <img id='signal-computer' src='/images/signal-laptop.png'>
-            <p>{{ installComputerName }}</p>
-            <div>
-              <input type='text' id='device-name' spellcheck='false' maxlength='50' />
-            </div>
-          </div>
-          <div class='nav'>
-            <div>
-              <input type='submit' class='button' id='sync' value='{{ installFinalButton }}' />
-            </div>
-          </div>
-        </div>
-      </form>
-
-      <div id='step5' class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <img id='signal-icon' src='/images/icon_250.png'/>
-            <div class='progress-dialog'>
-              <p class='status'></p>
-              <div class='bar-container'><div class='bar progress-bar'></div></div>
-            </div>
-          </div>
-          <div class='nav'>
-          </div>
-        </div>
-      </div>
-
-      <div id='stepTooManyDevices' class='step'>
-        <div class='inner error-dialog clearfix'>
-          <div class='panel step-body'>{{ installTooManyDevices }}</div>
-          <div class='nav'>
-            <button class='ok step3'>{{ ok }}</button>
-          </div>
-        </div>
-      </div>
-    </script>
   </div>
 
   <script type="text/javascript" src="js/components.js"></script>
@@ -106,9 +18,6 @@
   <script type="text/javascript" src="js/models/conversations.js"></script>
 
   <script type="text/javascript" src="js/chromium.js"></script>
-  <script type="text/javascript" src="js/views/whisper_view.js"></script>
-  <script type="text/javascript" src="js/views/phone-input-view.js"></script>
-  <script type="text/javascript" src="js/views/install_view.js"></script>
   <script type="text/javascript" src="js/options.js"></script>
 </body>
 </html>