Finished mobile activation UI. Notification logic need to be tested.
BUG=chromium-os:4739, chromium-os:6949
TEST=none
Review URL: http://codereview.chromium.org/3606005
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@62041 0039d316-1c4b-4281-b951-d872f2087c98
diff --git a/chrome/browser/resources/mobile_setup.html b/chrome/browser/resources/mobile_setup.html
index 1811e7bd..5fa2e496 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%;
}
-#error-div {
+.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;
+}
+
+#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 @@
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>
