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

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

 /* Copyright 2016 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 {
   box-sizing: border-box;
   color: var(--paper-grey-900);
   display: flex;
   flex-direction: column;
   font-size: 100%;
@@ skipping 14 matching lines @@
 
 strong {
   font-weight: 500;
 }
 
 .content {
   margin: 0 auto;
   padding: 4em 1.5em 1.5em 1.5em;
 }
 
 .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 {
   font-size: 2.125em;
   line-height: 1.6em;
   margin-bottom: 0.5em;
   margin-top: 1.2em;
 }
 
 .sections {
-  margin-bottom: 3em;
+  margin-bottom: 2em;
 }
 
 .section.expandable {
   border-top: 1px solid var(--google-grey-300);
 }
 
 .section.expandable:last-child {
   border-bottom: 1px solid var(--google-grey-300);
 }
 
@@ skipping 55 matching lines @@
 
 .section.expandable.expanded .section-steps {
   max-height: 28.75em;
   opacity: 1;
   transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
               opacity 150ms 250ms;
 }
 
 .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;
 }
 
 .button:hover {
   background: var(--paper-blue-a400);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .24)
 }
 
 .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;
   width: 1.25em;
 }
 
 .screenshot {
   display: block;
   height: 440px;
   margin: 0 auto;
@@ skipping 75 matching lines @@
     font-size: 1.95vw;
   }
 }
 
 /* Font-size used when the screenshot exactly reaches its max size. */
 @media (min-width: 626px) {
   .screenshot-html-overlay {
     font-size: 12.2px;
   }
 }