| Index: chrome/browser/resources/mobile_setup.html
|
| ===================================================================
|
| --- chrome/browser/resources/mobile_setup.html (revision 61908)
|
| +++ chrome/browser/resources/mobile_setup.html (working copy)
|
| @@ -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>
|
|
|