Implementing Win 10 FRE visual design tweaks requested by first UX pass.

chrome/browser/resources/welcome/win10/inline.css

Index: chrome/browser/resources/welcome/win10/inline.css
diff --git a/chrome/browser/resources/welcome/win10/inline.css b/chrome/browser/resources/welcome/win10/inline.css
index ecc26052423a09e43eaccdd42a0cbc0a6a30a309..039c7eb83bd76d384682d9a6f7f1c0444bd01f04 100644
--- a/chrome/browser/resources/welcome/win10/inline.css
+++ b/chrome/browser/resources/welcome/win10/inline.css
@@ -33,8 +33,8 @@ strong {
 }
 
 .header-logo {

[tmartino, 2016/12/20 17:52:24]

Removing the image set because it doesn't seem to actually...work. In the CSS
that's eventually loaded by Chrome, the 2x version is omitted entirely:

content: -webkit-image-set(url(/logo-large.png) 1x);

For the logo it's probably OK to just always use the 2x version (these are
loaded locally anyway). Down the road it may cause problems with the remote
.webp files (see below), so if you have any idea why this is happening, let me
know.

[Dan Beam, 2016/12/21 03:07:55]

did you try in 2x?  i.e. --force-device-scale-factor=2 or whatever?

[tmartino, 2017/01/05 21:28:21]

Yeah, there's still some bizarre processing going on that ends up stripping out
the 2x version. In fact, if I reverse the order and put the 2x version first in
the CSS:

content: -webkit-image-set(url(chrome://welcome-win10/logo-large.png) 2x,
url(chrome://welcome-win10/logo-small.png) 1x);


Then what pops up in the rendered page is:

content: -webkit-image-set(, url(chrome://welcome-win10/logo-large.png) 1x);

Which breaks the image entirely.

[Dan Beam, 2017/01/06 00:55:40]

that's probably grit
but did you try the proposed version (after this CL is applied) with
--force-device-scale-factor=2?

-  content: -webkit-image-set(url(/logo-large.png) 1x,
-                             url(/logo-large2x.png) 2x);
+  content: url(chrome://welcome-win10/logo-large.png);
+  height: 4em;
 }
 
 .heading {
@@ -45,7 +45,7 @@ strong {
 }
 
 .sections {
-  margin-bottom: 3em;
+  margin-bottom: 2em;
 }
 
 .section.expandable {
@@ -121,17 +121,17 @@ strong {
 
 .button {
   -webkit-font-smoothing: antialiased;
-  background: var(--paper-blue-a200);

[Dan Beam, 2016/12/21 03:07:55]

did this ever work?

[tmartino, 2017/01/05 21:28:21]

I suspect not, but I'm not the original author.

+  background: var(--google-blue-500);
   border-radius: 2px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
   color: #fff;
   display: inline-block;
-  font-size: .75em;
+  font-size: .8125em;
   font-weight: 500;
-  line-height: 1.75em;
-  min-width: 2em;
+  line-height: 2.25rem;
   padding: 0 1em;
   text-align: center;
+  text-transform: uppercase;

[Dan Beam, 2016/12/21 03:07:55]

why are you doing this?  doesn't paper-button have this by default?

[tmartino, 2017/01/05 21:28:21]

It appears it does. Removed.

   transition: 300ms cubic-bezier(.4, .2, 0, 1);
   will-change: box-shadow;
 }
@@ -142,8 +142,7 @@ strong {
 }
 
 .logo-small {
-  content: -webkit-image-set(url(/logo-small.png) 1x,
-                             url(/logo-small2x.png) 2x);
+  content: url(chrome://welcome-win10/logo-small.png);
   display: inline;
   height: 1.25em;
   vertical-align: top;