Implement the new Sync Confirmation dialog on Linux and Windows.

chrome/browser/resources/sync_confirmation/sync_confirmation.css

Index: chrome/browser/resources/sync_confirmation/sync_confirmation.css
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.css b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
new file mode 100644
index 0000000000000000000000000000000000000000..3c93375cbd0b9798394dc99363fae66bbb4704f6
--- /dev/null
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
@@ -0,0 +1,144 @@
+/* Copyright 2015 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.
+ */
+
+* {

[Evan Stade, 2015/12/04 01:46:56]

I don't think you should use this selector. Font is inherited so you can set
that just on html. Margin and padding should be added on more specific things.

[anthonyvd, 2015/12/04 22:42:06]

Done.

+  font-family: 'Roboto Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: rgb(85, 149, 254);
+  text-decoration: none;
+}
+
+.picture img {
+  border-radius: 50%;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.container {
+  background-color: white;
+  height: 360px;
+  overflow: hidden;
+  width: 450px;
+}
+
+.top-title-bar {
+  align-items: center;
+  border-bottom: 1px solid lightgray;
+  color: #333;
+  display: flex;
+  font-size: 17px;
+  height: 60px;
+  padding-left: 22px;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  height: 276px;
+  justify-content: space-between;
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+
+.sync-message {
+  color: #595959;
+  font-size: 13.5px;
+  padding-left: 22px;
+  padding-right: 22px;
+}
+
+.picture-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 22px;
+  padding-top: 22px;
+}
+
+.picture {
+  height: 96px;
+  position: relative;
+  width: 96px;
+}
+
+#profile-picture,
+.checkmark-bubble {
+  position: absolute;
+}
+
+.checkmark-bubble {
+  background-color: white;
+  background-image: url(chrome://resources/images/check_circle.svg);

[Evan Stade, 2015/12/04 01:46:56]

if you make this a relative path it will get inlined as a data url (this is
preferred).

[anthonyvd, 2015/12/04 22:42:06]

Maybe I'm missing something but I'm unable to make this a relative path. I think
it's because the root is different from the document's URL's root. For example,
"../resources/images/check_circle.svg" and
"../../resources/images/check_circle.svg" both resolve to
"chrome://sync-confirmation/resources/images/check_circle.svg" at runtime.

Is there another way?

+  background-size: 100%;
+  border: 1px solid white;
+  border-radius: 50%;
+  display: inline-block;
+  height: 30px;
+  left: 64px;
+  top: 66px;
+  width: 30px;
+}
+
+.action-container {
+  align-items: baseline;
+  display: flex;
+  justify-content: flex-end;
+  padding-left: 22px;
+  padding-right: 22px;
+}
+
+.action-button-wrapper {
+  display: inline-block;
+}
+
+.action-button {
+  background-color: rgb(66, 133, 244);
+  border-color: white;
+  border-radius: 2px;
+  border-style: none;
+  border-width: 0;
+  color: white;
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  min-width: 88px;
+}
+
+.action-button-label {
+  -webkit-user-select: none;
+  display: block;
+  font-size: 13.5px;
+  line-height: 24px;
+  padding-bottom: 6px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 6px;
+  position: static;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.link-wrapper {
+  display: inline-block;
+}
+
+.link {

[Evan Stade, 2015/12/04 01:46:56]

I feel like you should be including CSS from some shared file rather than
defining a lot of it specifically for this dialog

[anthonyvd, 2015/12/04 22:42:06]

Yeah it's the first time I dabble in webUI so I wouldn't be surprised if I'm
doing a few things the wrong way. Any idea which shared file I can take a look
at?

A lot of this styling is pretty unique in the sense that there's no other (to my
knowledge) dialog that looks very similar to this. It's styled to be consistent
with the sign in flow that precedes it, which is actually a server-side
resource. Because of that, I'm not sure there are many things that can be shared
with other webUI but I'd love to use them if there are.

+  -webkit-user-select: none;
+  color: #5A5A5A;
+  cursor: pointer;
+  font-size: 13.5px;
+  line-height: 24px;
+  padding-bottom: 6px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 6px;
+  text-transform: uppercase;
+}