Implement the spring charger replacement UI.

chrome/browser/resources/chromeos/charger_replacement.css

Index: chrome/browser/resources/chromeos/charger_replacement.css
diff --git a/chrome/browser/resources/chromeos/charger_replacement.css b/chrome/browser/resources/chromeos/charger_replacement.css
new file mode 100644
index 0000000000000000000000000000000000000000..921664131d2903e9ff7a54e0f28b0bd0ce149d1f
--- /dev/null
+++ b/chrome/browser/resources/chromeos/charger_replacement.css
@@ -0,0 +1,159 @@
+/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+body {
+padding: 8px;

[xiyuan, 2013/12/06 00:24:37]

nit: 2-space indent

[jennyz, 2013/12/06 03:54:24]

Done.

+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.page {
+  display: none;
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 0;
+}
+
+body[page='0'] #check-charger,
+body[page='1'] #confirm-safe-charger {
+  display: block;
+}
+body[page='2'] #charger-update {
+  display: block;
+}
+body[page='3'] #order-charger-online {
+  display: block;
+}
+body[page='4'] #confirm-online-order {
+ display: block;
+}
+body[page='5'] #finish-not-order-charger {
+  display: block;
+}
+body[page='6'] #order-charger-offline {
+  display: block;
+}
+body[page='7'] #charger-still-bad {
+  display: block;
+}
+
+.button-strip {
+  display: -webkit-flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.command-button {
+  width: 80px;
+}
+
+.stop-use-recalled-charger {
+  font-weight: bold;
+}
+
+.checkbox-label {
+ margin-left: 5px;
+}
+
+.link {
+  color: blue;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+#select-device-country {
+  width: 270px;
+}
+
+#charger-selection {
+  display: -webkit-flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  margin-top: 15px;
+}
+
+#charger-selection img {
+  display: block;
+}
+
+#safe-charger-checkmark {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#go-with-good-charger {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+#safe-charger-checkmark {
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+
+#back-to-check-charger {
+ margin-right: 10px;
+}
+
+#new-charger-box {
+  border: 2px solid #999;
+}
+
+#original-charger-box {
+  border: 2px solid #999;
+}
+
+#charger-order-form {
+  border-style: none;
+  height: 500px;
+  width: 1100px;
+}
+
+

[xiyuan, 2013/12/06 00:24:37]

nit: nuke one empty line

[jennyz, 2013/12/06 03:54:24]

Done.

+#back-to-check-charger-from-charger-update {
+  margin-right: 10px;
+}
+
+#not-order-charger-checkbox-strip {
+  display: -webkit-flex;
+  margin-left: 20px;
+  margin-top: 5px;
+}
+
+#offline-content {
+  display: -webkit-flex;
+  justify-content: space-between;
+}
+
+#offline-order-contact {
+  font-weight: bold;
+}
+
+#offline-content-left {
+  width: 450px;
+}
+
+#offline-content-divider {
+  border: 1px solid #f5f5f5;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+#offline-content-right {
+  display: -webkit-flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#confirm-offline-order-checkbox-strip {
+  display: -webkit-flex;
+  flex-direction: row;
+}
+
+#finish-still-bad-charger {
+  margin-top: 40px;
+}