3 files changed, 237 insertions, 34 deletions

diff --git a/chrome/browser/resources/connection_manager.js b/chrome/browser/resources/connection_manager.js
index bf443c4..baa3737 100644
--- a/chrome/browser/resources/connection_manager.js
+++ b/chrome/browser/resources/connection_manager.js
@@ -9,15 +9,9 @@ function chromeos() {
 chromeos.connectionManager = function() {
 };
 
-chromeos.connectionManager.device_info_callback_ = null;
 chromeos.connectionManager.transaction_status_callback_ = null;
 chromeos.connectionManager.parent_page_url_ = 'chrome://mobilesetup';
 
-chromeos.connectionManager.getDeviceInfo = function(callback) {
-  chromeos.connectionManager.device_info_callback_ = callback;
-  chromeos.connectionManager.requestDeviceInfo_();
-};
-
 chromeos.connectionManager.setTransactionStatus = function(status, callback) {
   chromeos.connectionManager.transaction_status_callback_ = callback;
   chromeos.connectionManager.reportTransactionStatus_(status);
@@ -32,18 +26,3 @@ chromeos.connectionManager.reportTransactionStatus_ = function(status) {
   window.parent.postMessage(msg, chromeos.connectionManager.parent_page_url_);
 };
 
-chromeos.connectionManager.requestDeviceInfo_ = function() {
-  var msg = {
-    'type': 'requestDeviceInfoMsg',
-    'domain': location.href,
-  };
-  window.parent.postMessage(msg, chromeos.connectionManager.parent_page_url_);
-}
-
-window.addEventListener('message', function(e) {
-  if (e.data.type == 'deviceInfoMsg') {
-    if (chromeos.connectionManager.device_info_callback_)
-      chromeos.connectionManager.device_info_callback_(e.data.payload);
-  }
-});
-
diff --git a/chrome/browser/resources/mobile_setup.html b/chrome/browser/resources/mobile_setup.html
index 1811e7b..5fa2e49 100644
--- a/chrome/browser/resources/mobile_setup.html
+++ b/chrome/browser/resources/mobile_setup.html
@@ -5,18 +5,139 @@
 <title i18n-content="title"></title>
 <style>
 body {
-  font-family: sans-serif;
-  font-size: 10px;
+  font-size: 100%;
+  -webkit-user-select: none;
+}
+
+iframe { 
+  overflow-x: scroll; 
+  overflow-y: scroll; 
+}
+
+.overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, .2);
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  padding: 20px;
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+}
+
+.overlay > div {
+  background: white;
+  border-radius: 5px;
+  padding: 15px;
+  border: 1px solid #666;
+  -webkit-box-shadow: 3px 3px 3px #666;
+}
+
+.startup {
+  width: 500px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left:-250px;
+  margin-top:-250px;
+  text-align: center;
 }
 
 #payment-form {
-  width: 600px;
-  height: 300px;
-  overflow: hidden;
+  display: -webkit-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.logo {
+  background: url('file:///usr/share/chromeos-assets/mobile/carrier_logo.png') no-repeat;
+  height: 58px;
+}
+
+#error-msg {
+  margin: 20px;
+}
+
+.box {
+  display: -webkit-box;
+}
+
+#final-logo {
+  position: absolute;
+  right: 30px;
+  width: 150px;
+}
+
+#activation-logo {
+  background-position: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
 }
 
-#error-div {
+#splitter {
+  margin-top: 10px;
+  left: 50%;
+  margin-left: 150px;
+  width: 200px;
+  border-bottom: 1px solid #EEE;
+  height: 1px;
 }
+
+body[state='connecting'] > #payment-form,
+body[state='connecting'] > #final-message,
+body[state='connecting'] > * > #error-message {
+  display: none
+}
+body[state='connecting'] > #system-status {
+  display: block
+}
+
+body[state='error'] > #payment-form,
+body[state='error'] > #final-message {
+  display: none
+}
+body[state='error'] > * > #error-message,
+body[state='error'] > #system-status {
+  display: block
+}
+
+body[state='payment'] > * > #error-message,
+body[state='payment'] > #final-message,
+body[state='payment'] > #system-status {
+  display: none
+}
+body[state='payment'] > #payment-form {
+  display: block
+}
+
+body[state='activating'] > #payment-form,
+body[state='activating'] > #final-message,
+body[state='activating'] > * > #error-message {
+  display: none
+}
+body[state='activating'] > #system-status {
+  display: block
+}
+
+body[state='connected'] > * > #error-message,
+body[state='connected'] > #system-status {
+  display: none
+}
+body[state='connected'] > #payment-form,
+body[state='connected'] > #final-message {
+  display: block
+}
+
+.testing-only {
+}
+
 </style>
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/util.js"></script>
@@ -25,8 +146,28 @@ body {
   mobile.MobileSetup.getInstance().initialize('payment-form');
 </script>
 </head>
-<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
-<h1 i18n-content="header"></h1>
-<div id="error-div"></div>
-<iframe id="payment-form" frameborder="0"></iframe></body>
+<body state="connecting" onload="setInterval(mobile.MobileSetup.drawProgress, 100);"
+    i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+  <iframe id="payment-form" frameborder="0"></iframe>
+  <div id="system-status" class="startup">
+    <div class="status-header"><h3 id="header"
+      i18n-content="status_header"></h3></div>
+    <div id="error-message"></div>
+    <canvas id="canvas" width="56" height="56"></canvas>
+    <div id="splitter"></div>
+    <div id="activation-logo" class="logo"></div>
+  </div>
+  <div id="final-message" class="overlay">
+    <div class="box">
+      <div>
+        <div class="header"><h3 i18n-content="completed_header"></h3></div>
+        <div id="action" i18n-content="completed_text"></div>
+      </div>
+      <div id="final-logo" class="logo"></div>
+    </div>
+  </div>
+  <div class="testing-only">
+    <button id="cheat">Fake activation!</button>
+  </div>
+</body>
 </html>
diff --git a/chrome/browser/resources/mobile_setup.js b/chrome/browser/resources/mobile_setup.js
index fa1e98e..f6c481d 100644
--- a/chrome/browser/resources/mobile_setup.js
+++ b/chrome/browser/resources/mobile_setup.js
@@ -14,6 +14,15 @@ cr.define('mobile', function() {
     // Mobile device information.
     deviceInfo_: null,
     frame_name_ : '',
+    local_strings_: new LocalStrings();
+    // UI states.
+    state_ : 0,
+    STATE_UNKNOWN_: "unknown",
+    STATE_CONNECTING_: "connecting",
+    STATE_ERROR_: "error",
+    STATE_PAYMENT_: "payment",
+    STATE_ACTIVATING_: "activating",
+    STATE_CONNECTED_: "connected",
 
     initialize: function(frame_name) {
       self = this;
@@ -31,9 +40,6 @@ cr.define('mobile', function() {
       if (deviceInfo) {
         this.deviceInfo_ = deviceInfo;
 
-        // HACK(zelidrag): Remove the next line for real testing.
-        this.deviceInfo_.payment_url = 'http://link.to/mobile_activation.html';
-            
         $(this.frame_name_).contentWindow.location.href =
             this.deviceInfo_.payment_url;
       }
@@ -51,6 +57,38 @@ cr.define('mobile', function() {
       }
     },
 
+    changeState: function(new_state, errorText) {
+      if (state_ == new_state)
+        return;
+      if (new_state == STATE_UNKNOWN_)
+        document.body.setAttribute('state', STATE_CONNECTING_);
+      else
+        document.body.setAttribute('state', new_state);
+      switch(new_state) {
+        case STATE_UNKNOWN_:
+        case STATE_CONNECTING_:
+          $('status-header').textContent =
+              local_strings_.getString('connecting_header');
+          $('error-message').textContent = '';
+          break;
+        case STATE_ERROR_:
+          $('status-header').textContent =
+              local_strings_.getString('error_header');
+          $('error-message').textContent = errorText;
+          break;
+        case STATE_ACTIVATING_:
+          $('status-header').textContent =
+              local_strings_.getString('activating_header');
+          $('error-message').textContent = '';
+          break;
+      }
+      state_ = new_state;
+    },
+
+    updateDeviceStatus_: function(deviceInfo) {
+      this.changeState(deviceInfo.state, deviceInfo.error);
+    },
+
     sendDeviceInfo_ : function() {
       var msg = {
         type: 'deviceInfoMsg',
@@ -67,12 +105,57 @@ cr.define('mobile', function() {
       $(this.frame_name_).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);
+
+    var segmentCount = Math.min(12, canvas.width/1.6) // Number of segments
+    var rotation = 0.75; // Counterclockwise rotation
+
+    // Rotate canvas over time
+    ctx.translate(canvas.width/2, canvas.height/2);
+    ctx.rotate(Math.PI * 2 / (segmentCount + rotation));
+    ctx.translate(-canvas.width/2, -canvas.height/2);
+
+    var gap = canvas.width / 24; // Gap between segments
+    var oRadius = canvas.width/2; // Outer radius
+    var iRadius = oRadius * 0.618; // Inner radius
+    var oCircumference = Math.PI * 2 * oRadius; // Outer circumference
+    var iCircumference = Math.PI * 2 * iRadius; // Inner circumference
+    var oGap = gap / oCircumference; // Gap size as fraction of  outer ring
+    var iGap = gap / iCircumference; // Gap size as fraction of  inner ring
+    var oArc = Math.PI * 2 * ( 1 / segmentCount - oGap); // Angle of outer arcs
+    var iArc = Math.PI * 2 * ( 1 / segmentCount - iGap); // Angle of inner arcs
+
+    for (i = 0; i < segmentCount; i++){ // Draw each segment
+      var opacity = Math.pow(1.0 - i / segmentCount, 3.0);
+      opacity = (0.15 + opacity * 0.8) // Vary from 0.15 to 0.95
+      var angle = - Math.PI * 2 * i / segmentCount;
+
+      ctx.beginPath();
+      ctx.arc(canvas.width/2, canvas.height/2, oRadius,
+        angle - oArc/2, angle + oArc/2, false);
+      ctx.arc(canvas.width/2, canvas.height/2, iRadius,
+        angle + iArc/2, angle - iArc/2, true);
+      ctx.closePath();
+      ctx.fillStyle = "rgba(240, 30, 29, " + opacity + ")";
+      ctx.fill();
+    }
   };
 
   MobileSetup.getDeviceInfoCallback = function(deviceInfo) {
     MobileSetup.getInstance().loadPaymentFrame(deviceInfo);
   };
 
+
+  MobileSetup.deviceStateChanged = function(deviceInfo) {
+    MobileSetup.getInstance().updateDeviceStatus_(deviceInfo);
+  };
+
   // Export
   return {
     MobileSetup: MobileSetup