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..3f594ae92ac18f9f5682b2de586942b91ff6e31a
--- /dev/null
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
@@ -0,0 +1,147 @@
+/* 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.

[Dan Beam, 2016/01/06 22:57:57]

* found in the LICENSE file. */

[anthonyvd, 2016/01/08 22:39:41]

Done.

+ */
+
+html {
+  font-family: 'Roboto Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;

[Dan Beam, 2016/01/06 22:57:57]

use text_defaults.css instead

[anthonyvd, 2016/01/08 22:39:41]

Acknowledged. Our mocks specify this exact font list to be consistent with the
sign in flow that precedes this dialog. text_defaults.css seem to be setting the
font to something else (at least on my linux machine it uses Ubuntu) and using
roboto.css just falls back to I *think* Times New Roman.

Is text_default.css supposed to be this exact list?

[Dan Beam, 2016/01/21 03:57:33]

text_defaults_md.css**

[anthonyvd, 2016/01/21 22:36:10]

Ah! That file was only added 6 days ago but it seems to be what I want. Thanks,
done!

+}
+
+body {
+  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;

[Dan Beam, 2016/01/06 22:57:57]

RTL

[anthonyvd, 2016/01/08 22:39:41]

Not super familiar with this. Is ensuring the same padding on the right enough?
This is in a div that only displays a title.

[Dan Beam, 2016/01/21 03:57:33]

Chrome supports right-to-left UI languages like Hebrew and Arabic.  This
generally mirrors the UI when is makes sense.  So, if there's 22px of padding to
the left of a title in LTR, there should probably be 22px to the right of a
title in RTL (because it's as the "start" for the respective directionality). 
In fact, there's a -webkit-padding-start that does exactly that: translate to
padding-left in LTR and padding-right in RTL (effectively).

To check your UI in an RTL language:

Mac: change system language
Windows: probably also system language?
Linux: LANGUAGE=ar ./chrome
ChromeOS: ./chrome --lang=ar

if the tabs don't start at the right of your screen[1][2], you're not in RTL.

[1] http://i.imgur.com/OLVWiyn.png
[2] http://i.imgur.com/8l60GPL.png

[anthonyvd, 2016/01/21 22:36:10]

Thanks for the amazing info. I've switched to -webkit-padding-start.

+}
+
+.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;

[Dan Beam, 2016/01/06 22:57:57]

use % for font-size so zoom works

[anthonyvd, 2016/01/08 22:39:41]

This all happens in a fixed-size tab-modal window, should zoom work? How would
it be triggered?

I don't think any of the other tab-modal dialogs allow zoom either.

[Dan Beam, 2016/01/21 03:57:33]

oh, sorry: this might actually be a function of scaling when the user changes
the default text size from chrome://settings > Web Content.

[anthonyvd, 2016/01/21 22:36:10]

I see, that's indeed the case. However the problem then becomes that on a Chrome
with a larger text size, the content doesn't fit anymore.

I don't think any other tab modal dialog in Chrome handles different font sizes
like this though, and the Chrome sign in flow that precedes it just uses pixel
values as well. As such, I personally think specifying absolute values is the
way to go. Otherwise the dialog would be unusable anyways, see the screenshot
here:

https://drive.google.com/a/google.com/file/d/0B7c9zMzlLtKoaUpTOGJlUnNtdEU/vie...

WDYT?

+  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(//resources/images/check_circle.svg);
+  background-size: 100%;
+  border: 1px solid white;
+  border-radius: 50%;
+  display: inline-block;
+  height: 30px;
+  left: 64px;

[Dan Beam, 2016/01/06 22:57:57]

RTL

[anthonyvd, 2016/01/08 22:39:41]

Again, not super familiar with this. This is a checkmark icon partially
overlapping the profile picture. Would it typically be affected by a RTL
culture?  If so, what's the typical way to handle this?

Thanks for the info :)

[Dan Beam, 2016/01/21 03:57:33]

do you have screenshots?

[anthonyvd, 2016/01/21 22:36:10]

Sure, here's what this looks like in RTL. The white-on-blue checkmark is
currently on the same side for both RTL and LTR. Should it be affected by text
direction?

[Dan Beam, 2016/01/22 01:26:57]

did you mean to paste a link here?

[anthonyvd, 2016/01/22 17:19:56]

Well, this is embarassing!

Here it is:
https://drive.google.com/a/google.com/file/d/0B7c9zMzlLtKodVM3QnlaUkhFUUE/vie...

+  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;

[Dan Beam, 2016/01/06 22:57:57]

use `border` shorthand

[anthonyvd, 2016/01/08 22:39:41]

Acknowledged.

+  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;

[Dan Beam, 2016/01/06 22:57:57]

use shorthand `padding` rule

[anthonyvd, 2016/01/08 22:39:41]

Acknowledged.

+  position: static;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;

[Dan Beam, 2016/01/06 22:57:57]

is this mimicking material design style?  because if so, you should probably be
using Polymer instead

[anthonyvd, 2016/01/08 22:39:41]

Thanks for the heads up, I wasn't aware we had access to polymer in Chrome (I
don't do WebUI often ;) ).

Done.

+}
+
+.link-wrapper {
+  display: inline-block;
+}
+
+.link {
+  -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;
+}