| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 | |
| 6 cr.define('mobile', function() { | |
| 7 | |
| 8 function MobileSetup() { | |
| 9 } | |
| 10 | |
| 11 cr.addSingletonGetter(MobileSetup); | |
| 12 | |
| 13 MobileSetup.PLAN_ACTIVATION_PAGE_LOADING = -1; | |
| 14 MobileSetup.PLAN_ACTIVATION_START = 0; | |
| 15 MobileSetup.PLAN_ACTIVATION_TRYING_OTASP = 1; | |
| 16 MobileSetup.PLAN_ACTIVATION_RECONNECTING_OTASP_TRY = 2; | |
| 17 MobileSetup.PLAN_ACTIVATION_INITIATING_ACTIVATION = 3; | |
| 18 MobileSetup.PLAN_ACTIVATION_RECONNECTING = 4; | |
| 19 MobileSetup.PLAN_ACTIVATION_PAYMENT_PORTAL_LOADING = 5; | |
| 20 MobileSetup.PLAN_ACTIVATION_SHOWING_PAYMENT = 6; | |
| 21 MobileSetup.PLAN_ACTIVATION_RECONNECTING_PAYMENT = 7; | |
| 22 MobileSetup.PLAN_ACTIVATION_DELAY_OTASP = 8; | |
| 23 MobileSetup.PLAN_ACTIVATION_START_OTASP = 9; | |
| 24 MobileSetup.PLAN_ACTIVATION_OTASP = 10; | |
| 25 MobileSetup.PLAN_ACTIVATION_RECONNECTING_OTASP = 11; | |
| 26 MobileSetup.PLAN_ACTIVATION_DONE = 12; | |
| 27 MobileSetup.PLAN_ACTIVATION_ERROR = 0xFF; | |
| 28 | |
| 29 MobileSetup.EXTENSION_PAGE_URL = | |
| 30 'chrome-extension://iadeocfgjdjdmpenejdbfeaocpbikmab'; | |
| 31 MobileSetup.ACTIVATION_PAGE_URL = MobileSetup.EXTENSION_PAGE_URL + | |
| 32 '/activation.html'; | |
| 33 MobileSetup.REDIRECT_POST_PAGE_URL = MobileSetup.EXTENSION_PAGE_URL + | |
| 34 '/redirect.html'; | |
| 35 | |
| 36 MobileSetup.localStrings_ = new LocalStrings(); | |
| 37 | |
| 38 MobileSetup.prototype = { | |
| 39 // Mobile device information. | |
| 40 deviceInfo_: null, | |
| 41 frameName_ : '', | |
| 42 initialized_ : false, | |
| 43 faked_transaction_ : false, | |
| 44 payment_shown_ : false, | |
| 45 frame_load_error_ : 0, | |
| 46 frame_load_ignored_ : true, | |
| 47 spinner_int_: -1, | |
| 48 // UI states. | |
| 49 state_ : -1, | |
| 50 STATE_UNKNOWN_: "unknown", | |
| 51 STATE_CONNECTING_: "connecting", | |
| 52 STATE_ERROR_: "error", | |
| 53 STATE_PAYMENT_: "payment", | |
| 54 STATE_ACTIVATING_: "activating", | |
| 55 STATE_CONNECTED_: "connected", | |
| 56 | |
| 57 initialize: function(frame_name, carrierPage) { | |
| 58 if (this.initialized_) { | |
| 59 console.log('calling initialize() again?'); | |
| 60 return; | |
| 61 } | |
| 62 this.initialized_ = true; | |
| 63 self = this; | |
| 64 this.frameName_ = frame_name; | |
| 65 | |
| 66 cr.ui.dialogs.BaseDialog.OK_LABEL = | |
| 67 MobileSetup.localStrings_.getString('ok_button'); | |
| 68 cr.ui.dialogs.BaseDialog.CANCEL_LABEL = | |
| 69 MobileSetup.localStrings_.getString('cancel_button'); | |
| 70 this.confirm_ = new cr.ui.dialogs.ConfirmDialog(document.body); | |
| 71 | |
| 72 window.addEventListener('message', function(e) { | |
| 73 self.onMessageReceived_(e); | |
| 74 }); | |
| 75 | |
| 76 $('closeButton').addEventListener('click', function(e) { | |
| 77 $('finalStatus').classList.add('hidden'); | |
| 78 }); | |
| 79 | |
| 80 $('cancelButton').addEventListener('click', function(e) { | |
| 81 if (self.state_ == MobileSetup.PLAN_ACTIVATION_DONE || | |
| 82 self.state_ == MobileSetup.PLAN_ACTIVATION_ERROR) { | |
| 83 window.close(); | |
| 84 return; | |
| 85 } | |
| 86 self.confirm_.show( | |
| 87 MobileSetup.localStrings_.getString('cancel_question'), function() { | |
| 88 window.close(); | |
| 89 }); | |
| 90 }); | |
| 91 | |
| 92 this.changeState_({state: MobileSetup.PLAN_ACTIVATION_PAGE_LOADING}); | |
| 93 // Kick off activation process. | |
| 94 chrome.send('startActivation', []); | |
| 95 }, | |
| 96 | |
| 97 startSpinner_:function() { | |
| 98 this.stopSpinner_(); | |
| 99 this.spinner_int_ = setInterval(mobile.MobileSetup.drawProgress, 100); | |
| 100 }, | |
| 101 | |
| 102 stopSpinner_:function() { | |
| 103 if (this.spinner_int_ != -1) { | |
| 104 clearInterval(this.spinner_int_); | |
| 105 this.spinner_int_ = -1; | |
| 106 } | |
| 107 }, | |
| 108 | |
| 109 onFrameLoaded_: function(success) { | |
| 110 chrome.send('paymentPortalLoad', [success ? 'ok' : 'failed']); | |
| 111 }, | |
| 112 | |
| 113 loadPaymentFrame_: function(deviceInfo) { | |
| 114 if (deviceInfo) { | |
| 115 this.frame_load_error_ = 0; | |
| 116 this.deviceInfo_ = deviceInfo; | |
| 117 if (deviceInfo.post_data && deviceInfo.post_data.length) { | |
| 118 this.frame_load_ignored_ = true; | |
| 119 $(this.frameName_).contentWindow.location.href = | |
| 120 MobileSetup.REDIRECT_POST_PAGE_URL + | |
| 121 '?post_data=' + escape(deviceInfo.post_data) + | |
| 122 '&formUrl=' + escape(deviceInfo.payment_url); | |
| 123 } else { | |
| 124 this.frame_load_ignored_ = false; | |
| 125 $(this.frameName_).contentWindow.location.href = | |
| 126 deviceInfo.payment_url; | |
| 127 } | |
| 128 } | |
| 129 }, | |
| 130 | |
| 131 onMessageReceived_: function(e) { | |
| 132 if (e.origin != | |
| 133 this.deviceInfo_.payment_url.substring(0, e.origin.length) && | |
| 134 e.origin != MobileSetup.EXTENSION_PAGE_URL) | |
| 135 return; | |
| 136 | |
| 137 if (e.data.type == 'requestDeviceInfoMsg') { | |
| 138 this.sendDeviceInfo_(); | |
| 139 } else if (e.data.type == 'framePostReady') { | |
| 140 this.frame_load_ignored_ = false; | |
| 141 this.sendPostFrame_(e.origin); | |
| 142 } else if (e.data.type == 'reportTransactionStatusMsg') { | |
| 143 console.log('calling setTransactionStatus from onMessageReceived_'); | |
| 144 $('paymentForm').classList.add('hidden'); | |
| 145 chrome.send('setTransactionStatus', [e.data.status]); | |
| 146 } | |
| 147 }, | |
| 148 | |
| 149 changeState_: function(deviceInfo) { | |
| 150 var new_state = deviceInfo.state; | |
| 151 if (this.state_ == new_state) | |
| 152 return; | |
| 153 var main = $('mainbody'); | |
| 154 // Map handler state to UX. | |
| 155 switch(new_state) { | |
| 156 case MobileSetup.PLAN_ACTIVATION_PAGE_LOADING: | |
| 157 case MobileSetup.PLAN_ACTIVATION_START: | |
| 158 case MobileSetup.PLAN_ACTIVATION_DELAY_OTASP: | |
| 159 case MobileSetup.PLAN_ACTIVATION_START_OTASP: | |
| 160 case MobileSetup.PLAN_ACTIVATION_RECONNECTING: | |
| 161 case MobileSetup.PLAN_ACTIVATION_RECONNECTING_PAYMENT: | |
| 162 case MobileSetup.PLAN_ACTIVATION_RECONNECTING_OTASP_TRY: | |
| 163 case MobileSetup.PLAN_ACTIVATION_RECONNECTING_OTASP: | |
| 164 $('statusHeader').textContent = | |
| 165 MobileSetup.localStrings_.getString('connecting_header'); | |
| 166 $('auxHeader').textContent = | |
| 167 MobileSetup.localStrings_.getString('please_wait'); | |
| 168 $('paymentForm').classList.add('hidden'); | |
| 169 $('finalStatus').classList.add('hidden'); | |
| 170 $('systemStatus').classList.remove('hidden'); | |
| 171 $('carrierPage').classList.remove('hidden'); | |
| 172 $('canvas').classList.remove('hidden'); | |
| 173 this.startSpinner_(); | |
| 174 break; | |
| 175 case MobileSetup.PLAN_ACTIVATION_TRYING_OTASP: | |
| 176 case MobileSetup.PLAN_ACTIVATION_INITIATING_ACTIVATION: | |
| 177 case MobileSetup.PLAN_ACTIVATION_OTASP: | |
| 178 $('statusHeader').textContent = | |
| 179 MobileSetup.localStrings_.getString('activating_header'); | |
| 180 $('auxHeader').textContent = | |
| 181 MobileSetup.localStrings_.getString('please_wait'); | |
| 182 $('paymentForm').classList.add('hidden'); | |
| 183 $('finalStatus').classList.add('hidden'); | |
| 184 $('systemStatus').classList.remove('hidden'); | |
| 185 $('carrierPage').classList.remove('hidden'); | |
| 186 $('canvas').classList.remove('hidden'); | |
| 187 this.startSpinner_(); | |
| 188 break; | |
| 189 case MobileSetup.PLAN_ACTIVATION_PAYMENT_PORTAL_LOADING: | |
| 190 $('statusHeader').textContent = | |
| 191 MobileSetup.localStrings_.getString('connecting_header'); | |
| 192 $('auxHeader').textContent = ''; | |
| 193 $('paymentForm').classList.add('hidden'); | |
| 194 $('finalStatus').classList.add('hidden'); | |
| 195 $('systemStatus').classList.remove('hidden'); | |
| 196 $('canvas').classList.remove('hidden'); | |
| 197 this.loadPaymentFrame_(deviceInfo); | |
| 198 break; | |
| 199 case MobileSetup.PLAN_ACTIVATION_SHOWING_PAYMENT: | |
| 200 $('statusHeader').textContent = ''; | |
| 201 $('auxHeader').textContent = ''; | |
| 202 $('finalStatus').classList.add('hidden'); | |
| 203 $('systemStatus').classList.add('hidden'); | |
| 204 $('carrierPage').classList.add('hidden'); | |
| 205 $('paymentForm').classList.remove('hidden'); | |
| 206 $('canvas').classList.add('hidden'); | |
| 207 this.stopSpinner_(); | |
| 208 this.payment_shown_ = true; | |
| 209 break; | |
| 210 case MobileSetup.PLAN_ACTIVATION_DONE: | |
| 211 $('statusHeader').textContent = ''; | |
| 212 $('auxHeader').textContent = ''; | |
| 213 $('finalHeader').textContent = | |
| 214 MobileSetup.localStrings_.getString('completed_header'); | |
| 215 $('finalMessage').textContent = | |
| 216 MobileSetup.localStrings_.getString('completed_text'); | |
| 217 $('systemStatus').classList.add('hidden'); | |
| 218 $('carrierPage').classList.add('hidden'); | |
| 219 $('paymentForm').classList.remove('hidden'); | |
| 220 $('closeButton').classList.remove('hidden'); | |
| 221 $('finalStatus').classList.remove('hidden'); | |
| 222 $('canvas').classList.add('hidden'); | |
| 223 this.stopSpinner_(); | |
| 224 if (this.payment_shown_) { | |
| 225 $('closeButton').classList.remove('hidden'); | |
| 226 } else { | |
| 227 $('closeButton').classList.add('hidden'); | |
| 228 $('cancelButton').textContent = | |
| 229 MobileSetup.localStrings_.getString('close_button'); | |
| 230 } | |
| 231 break; | |
| 232 case MobileSetup.PLAN_ACTIVATION_ERROR: | |
| 233 $('statusHeader').textContent = ''; | |
| 234 $('auxHeader').textContent = ''; | |
| 235 $('finalHeader').textContent = | |
| 236 MobileSetup.localStrings_.getString('error_header'); | |
| 237 $('finalMessage').textContent = deviceInfo.error; | |
| 238 $('systemStatus').classList.add('hidden'); | |
| 239 $('carrierPage').classList.add('hidden'); | |
| 240 $('paymentForm').classList.remove('hidden'); | |
| 241 $('canvas').classList.add('hidden'); | |
| 242 this.stopSpinner_(); | |
| 243 if (this.payment_shown_) { | |
| 244 $('closeButton').classList.remove('hidden'); | |
| 245 } else { | |
| 246 $('closeButton').classList.add('hidden'); | |
| 247 $('cancelButton').textContent = | |
| 248 MobileSetup.localStrings_.getString('close_button'); | |
| 249 } | |
| 250 $('finalStatus').classList.remove('hidden'); | |
| 251 break; | |
| 252 } | |
| 253 this.state_ = new_state; | |
| 254 }, | |
| 255 | |
| 256 updateDeviceStatus_: function(deviceInfo) { | |
| 257 this.changeState_(deviceInfo); | |
| 258 }, | |
| 259 | |
| 260 portalFrameLoadError_: function(errorCode) { | |
| 261 if (this.frame_load_ignored_) | |
| 262 return; | |
| 263 console.log("Portal frame load error detected: " + errorCode); | |
| 264 this.frame_load_error_ = errorCode; | |
| 265 }, | |
| 266 | |
| 267 portalFrameLoadCompleted_: function() { | |
| 268 if (this.frame_load_ignored_) | |
| 269 return; | |
| 270 console.log("Portal frame load completed!"); | |
| 271 this.onFrameLoaded_(this.frame_load_error_ == 0); | |
| 272 }, | |
| 273 | |
| 274 sendPostFrame_ : function(frameUrl) { | |
| 275 var msg = { type: 'postFrame' }; | |
| 276 $(this.frameName_).contentWindow.postMessage(msg, frameUrl); | |
| 277 }, | |
| 278 | |
| 279 sendDeviceInfo_ : function() { | |
| 280 var msg = { | |
| 281 type: 'deviceInfoMsg', | |
| 282 domain: document.location, | |
| 283 payload: { | |
| 284 'carrier': this.deviceInfo_.carrier, | |
| 285 'MEID': this.deviceInfo_.MEID, | |
| 286 'IMEI': this.deviceInfo_.IMEI, | |
| 287 'MDN': this.deviceInfo_.MDN | |
| 288 } | |
| 289 }; | |
| 290 $(this.frameName_).contentWindow.postMessage(msg, | |
| 291 this.deviceInfo_.payment_url); | |
| 292 } | |
| 293 | |
| 294 }; | |
| 295 | |
| 296 MobileSetup.drawProgress = function () { | |
| 297 var ctx = canvas.getContext('2d'); | |
| 298 ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| 299 | |
| 300 var segmentCount = Math.min(12, canvas.width/1.6) // Number of segments | |
| 301 var rotation = 0.75; // Counterclockwise rotation | |
| 302 | |
| 303 // Rotate canvas over time | |
| 304 ctx.translate(canvas.width/2, canvas.height/2); | |
| 305 ctx.rotate(Math.PI * 2 / (segmentCount + rotation)); | |
| 306 ctx.translate(-canvas.width/2, -canvas.height/2); | |
| 307 | |
| 308 var gap = canvas.width / 24; // Gap between segments | |
| 309 var oRadius = canvas.width/2; // Outer radius | |
| 310 var iRadius = oRadius * 0.618; // Inner radius | |
| 311 var oCircumference = Math.PI * 2 * oRadius; // Outer circumference | |
| 312 var iCircumference = Math.PI * 2 * iRadius; // Inner circumference | |
| 313 var oGap = gap / oCircumference; // Gap size as fraction of outer ring | |
| 314 var iGap = gap / iCircumference; // Gap size as fraction of inner ring | |
| 315 var oArc = Math.PI * 2 * ( 1 / segmentCount - oGap); // Angle of outer arcs | |
| 316 var iArc = Math.PI * 2 * ( 1 / segmentCount - iGap); // Angle of inner arcs | |
| 317 | |
| 318 for (i = 0; i < segmentCount; i++){ // Draw each segment | |
| 319 var opacity = Math.pow(1.0 - i / segmentCount, 3.0); | |
| 320 opacity = (0.15 + opacity * 0.8) // Vary from 0.15 to 0.95 | |
| 321 var angle = - Math.PI * 2 * i / segmentCount; | |
| 322 | |
| 323 ctx.beginPath(); | |
| 324 ctx.arc(canvas.width/2, canvas.height/2, oRadius, | |
| 325 angle - oArc/2, angle + oArc/2, false); | |
| 326 ctx.arc(canvas.width/2, canvas.height/2, iRadius, | |
| 327 angle + iArc/2, angle - iArc/2, true); | |
| 328 ctx.closePath(); | |
| 329 ctx.fillStyle = "rgba(240, 30, 29, " + opacity + ")"; | |
| 330 ctx.fill(); | |
| 331 } | |
| 332 }; | |
| 333 | |
| 334 MobileSetup.deviceStateChanged = function(deviceInfo) { | |
| 335 MobileSetup.getInstance().updateDeviceStatus_(deviceInfo); | |
| 336 }; | |
| 337 | |
| 338 MobileSetup.portalFrameLoadError = function(errorCode) { | |
| 339 MobileSetup.getInstance().portalFrameLoadError_(errorCode); | |
| 340 }; | |
| 341 | |
| 342 MobileSetup.portalFrameLoadCompleted = function() { | |
| 343 MobileSetup.getInstance().portalFrameLoadCompleted_(); | |
| 344 }; | |
| 345 | |
| 346 MobileSetup.loadPage = function() { | |
| 347 mobile.MobileSetup.getInstance().initialize('paymentForm', | |
| 348 mobile.MobileSetup.ACTIVATION_PAGE_URL); | |
| 349 }; | |
| 350 | |
| 351 // Export | |
| 352 return { | |
| 353 MobileSetup: MobileSetup | |
| 354 }; | |
| 355 | |
| 356 }); | |
| 357 | |
| OLD | NEW |