1 files changed, 81 insertions, 40 deletions

diff --git a/chrome/browser/resources/mobile_setup.js b/chrome/browser/resources/mobile_setup.js
index f6c481d..0aa8d17 100644
--- a/chrome/browser/resources/mobile_setup.js
+++ b/chrome/browser/resources/mobile_setup.js
@@ -10,13 +10,22 @@ cr.define('mobile', function() {
 
   cr.addSingletonGetter(MobileSetup);
 
+  MobileSetup.PLAN_ACTIVATION_LOADING = -1;
+  MobileSetup.PLAN_ACTIVATION_START = 0;
+  MobileSetup.PLAN_ACTIVATION_INITIATING_ACTIVATION = 1;
+  MobileSetup.PLAN_ACTIVATION_ACTIVATING = 2;
+  MobileSetup.PLAN_ACTIVATION_SHOWING_PAYMENT = 3;
+  MobileSetup.PLAN_ACTIVATION_DONE = 4;
+  MobileSetup.PLAN_ACTIVATION_ERROR = 5;
+
+  MobileSetup.localStrings_ = new LocalStrings();
+
   MobileSetup.prototype = {
     // Mobile device information.
     deviceInfo_: null,
-    frame_name_ : '',
-    local_strings_: new LocalStrings();
+    frameName_ : '',
     // UI states.
-    state_ : 0,
+    state_ : -1,
     STATE_UNKNOWN_: "unknown",
     STATE_CONNECTING_: "connecting",
     STATE_ERROR_: "error",
@@ -26,21 +35,34 @@ cr.define('mobile', function() {
 
     initialize: function(frame_name) {
       self = this;
-      this.frame_name_ = frame_name;
-      document.addEventListener('DOMContentLoaded', function(deviceInfo) {
-          chrome.send('getDeviceInfo',
-                      ['mobile.MobileSetup.getDeviceInfoCallback']);
-      });
+      this.frameName_ = frame_name;
       window.addEventListener('message', function(e) {
           self.onMessageReceived_(e);
       });
+      $('cheat').addEventListener('click', function(e) {
+        chrome.send('setTransactionStatus', ['OK']);
+      });
+      $(frame_name).addEventListener('load', function(e) {
+        // Flip the visibility of the payment page only after the frame is
+        // fully loaded.
+        $('statusHeader').textContent = '';
+        $('paymentForm').classList.remove('hidden');
+        $('finalMessage').classList.add('hidden');
+        $('errorMessage').classList.add('hidden');
+        $('systemStatus').classList.add('hidden');
+      });
+
+      this.changeState_(MobileSetup.PLAN_ACTIVATION_LOADING);
+      setInterval(mobile.MobileSetup.drawProgress, 100);
+      // Kick off activation process.
+      chrome.send('startActivation', []);
     },
 
-    loadPaymentFrame: function(deviceInfo) {
+    loadPaymentFrame_: function(deviceInfo) {
       if (deviceInfo) {
         this.deviceInfo_ = deviceInfo;
 
-        $(this.frame_name_).contentWindow.location.href =
+        $(this.frameName_).contentWindow.location.href =
             this.deviceInfo_.payment_url;
       }
     },
@@ -57,36 +79,59 @@ cr.define('mobile', function() {
       }
     },
 
-    changeState: function(new_state, errorText) {
-      if (state_ == new_state)
+    changeState_: function(deviceInfo) {
+      var new_state = deviceInfo.state;
+      if (this.state_ == new_state)
         return;
-      if (new_state == STATE_UNKNOWN_)
-        document.body.setAttribute('state', STATE_CONNECTING_);
-      else
-        document.body.setAttribute('state', new_state);
+      var main = $('mainbody');
+      // Map handler state to UX.
       switch(new_state) {
-        case STATE_UNKNOWN_:
-        case STATE_CONNECTING_:
-          $('status-header').textContent =
-              local_strings_.getString('connecting_header');
-          $('error-message').textContent = '';
+        case MobileSetup.PLAN_ACTIVATION_LOADING:
+        case MobileSetup.PLAN_ACTIVATION_START:
+          $('statusHeader').textContent =
+              MobileSetup.localStrings_.getString('connecting_header');
+          $('errorMessage').textContent = '';
+          $('paymentForm').classList.add('hidden');
+          $('finalMessage').classList.add('hidden');
+          $('errorMessage').classList.add('hidden');
+          $('systemStatus').classList.remove('hidden');
+        case MobileSetup.PLAN_ACTIVATION_INITIATING_ACTIVATION:
+        case MobileSetup.PLAN_ACTIVATION_ACTIVATING:
+          $('statusHeader').textContent =
+              MobileSetup.localStrings_.getString('activating_header');
+          $('errorMessage').textContent = '';
+          $('paymentForm').classList.add('hidden');
+          $('finalMessage').classList.add('hidden');
+          $('errorMessage').classList.add('hidden');
+          $('systemStatus').classList.remove('hidden');
           break;
-        case STATE_ERROR_:
-          $('status-header').textContent =
-              local_strings_.getString('error_header');
-          $('error-message').textContent = errorText;
+        case MobileSetup.PLAN_ACTIVATION_SHOWING_PAYMENT:
+          this.loadPaymentFrame_(deviceInfo);
           break;
-        case STATE_ACTIVATING_:
-          $('status-header').textContent =
-              local_strings_.getString('activating_header');
-          $('error-message').textContent = '';
+        case MobileSetup.PLAN_ACTIVATION_DONE:
+          $('statusHeader').textContent = '';
+          $('paymentForm').classList.add('hidden');
+          $('finalMessage').classList.remove('hidden');
+          $('errorMessage').classList.add('hidden');
+          $('systemStatus').classList.add('hidden');
+          break;
+        case MobileSetup.PLAN_ACTIVATION_ERROR:
+          $('statusHeader').textContent =
+              MobileSetup.localStrings_.getString('error_header');
+          $('errorMessage').textContent = deviceInfo.error;
+          $('paymentForm').classList.add('hidden');
+          $('finalMessage').classList.add('hidden');
+          $('errorMessage').classList.remove('hidden');
+          $('systemStatus').classList.remove('hidden');
           break;
       }
-      state_ = new_state;
+      this.state_ = new_state;
+      $('statusHeader').textContent =
+          $('statusHeader').textContent + ' (state = ' + new_state + ')';
     },
 
     updateDeviceStatus_: function(deviceInfo) {
-      this.changeState(deviceInfo.state, deviceInfo.error);
+      this.changeState_(deviceInfo);
     },
 
     sendDeviceInfo_ : function() {
@@ -97,19 +142,16 @@ cr.define('mobile', function() {
           'carrier': this.deviceInfo_.carrier,
           'MEID': this.deviceInfo_.MEID,
           'IMEI': this.deviceInfo_.IMEI,
-          'IMSI': this.deviceInfo_.IMSI,
-          'ESN': this.deviceInfo_.ESN,
           'MDN': this.deviceInfo_.MDN
         }
       };
-      $(this.frame_name_).contentWindow.postMessage(msg,
+      $(this.frameName_).contentWindow.postMessage(msg,
           this.deviceInfo_.payment_url);
     }
 
   };
 
   MobileSetup.drawProgress = function () {
-    var canvas = $('wheel');
     var ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -147,15 +189,14 @@ cr.define('mobile', function() {
     }
   };
 
-  MobileSetup.getDeviceInfoCallback = function(deviceInfo) {
-    MobileSetup.getInstance().loadPaymentFrame(deviceInfo);
-  };
-
-
   MobileSetup.deviceStateChanged = function(deviceInfo) {
     MobileSetup.getInstance().updateDeviceStatus_(deviceInfo);
   };
 
+  MobileSetup.loadPage = function() {
+    mobile.MobileSetup.getInstance().initialize('paymentForm');
+  };
+
   // Export
   return {
     MobileSetup: MobileSetup