Adding client code for new Windows 10 First Run Experience

BUG=648686
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2401853005
Cr-Commit-Position: refs/heads/master@{#427263}

chrome/browser/browser_resources.grd

@@ -77,6 +77,14 @@
         <structure name="IDR_WELCOME_HTML" file="resources\welcome\welcome.html" type="chrome_html" preprocess="true"/>
         <structure name="IDR_WELCOME_JS" file="resources\welcome\welcome.js" type="chrome_html" preprocess="true"/>
       </if>
+      <if expr="is_win">
+        <structure name="IDR_WELCOME_WIN10_INLINE_CSS" file="resources\welcome\win10\inline.css" type="chrome_html" />
+        <structure name="IDR_WELCOME_WIN10_INLINE_HTML" file="resources\welcome\win10\inline.html" type="chrome_html" />
+        <structure name="IDR_WELCOME_WIN10_INLINE_JS" file="resources\welcome\win10\inline.js" type="chrome_html" />
+        <structure name="IDR_WELCOME_WIN10_SECTIONED_CSS" file="resources\welcome\win10\sectioned.css" type="chrome_html" />
+        <structure name="IDR_WELCOME_WIN10_SECTIONED_HTML" file="resources\welcome\win10\sectioned.html" type="chrome_html" />
+        <structure name="IDR_WELCOME_WIN10_SECTIONED_JS" file="resources\welcome\win10\sectioned.js" type="chrome_html" />
+      </if>
     </structures>
     <includes>
       <if expr="is_win">

chrome/browser/resources/welcome/win10/README.md

+# Windows 10 Welcome page
+
+There are 2 different styles of the Windows 10 Welcome Page. A/B testing will
+be done to find out which one of them is better.
+
+TODO(pmonette): Experiment with the 2 versions of the Welcome Page and
+get rid of one of them. Bug id 658918.

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%;
+  justify-content: center;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: var(--google-blue-500);
+  text-decoration: none;
+}
+
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+strong {
+  font-weight: 500;
+}
+
+.content {
+  margin: 0 auto;
+  padding: 4em 1.5em 1.5em 1.5em;
+}
+
+.header-logo {
+  content: -webkit-image-set(url(/logo-large.png) 1x,
+                             url(/logo-large2x.png) 2x);
+}
+
+.heading {
+  font-size: 2.125em;
+  line-height: 1.6em;
+  margin-bottom: 0.5em;
+  margin-top: 1.2em;
+}
+
+.sections {
+  margin-bottom: 3em;
+}
+
+.section.expandable {
+  border-top: 1px solid var(--google-grey-300);
+}
+
+.section.expandable:last-child {
+  border-bottom: 1px solid var(--google-grey-300);
+}
+
+.section.expandable .section-heading {
+  color: var(--google-blue-500);
+  cursor: pointer;
+}
+
+.section-heading {
+  align-items: center;
+  display: flex;
+  padding: 1.5em 0;
+}
+
+.section-heading-text {
+  flex: 1;
+  font-weight: 500;
+}
+
+.section.expandable .section-heading-text {
+  font-weight: normal;
+}
+
+.section.expandable.expanded .section-heading-text {
+  font-weight: 500;
+}
+
+.section-heading-expand {
+  height: 1.25em;
+  opacity: 0.54;
+  transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms;
+  width: 1.25em;
+}
+
+.section.expandable.expanded .section-heading-expand {
+  transform: rotate(180deg);
+  transition-delay: 150ms;
+}
+
+.section-steps {
+  overflow: hidden;
+}
+
+.section-steps li {
+  -webkit-margin-start: 1.25em;
+  -webkit-padding-start: 1em;
+  margin-bottom: 1em;
+}
+
+.section-steps li:last-child {
+  margin-bottom: 1em;
+}
+
+.section.expandable .section-steps {
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms, opacity 150ms;
+}
+
+.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);
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
+  color: #fff;
+  display: inline-block;
+  font-size: .75em;
+  font-weight: 500;
+  line-height: 1.75em;
+  min-width: 2em;
+  padding: 0 1em;
+  text-align: center;
+  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);
+  display: inline;
+  height: 1.25em;
+  vertical-align: top;
+  width: 1.25em;
+}
+
+.screenshot {
+  display: block;
+  height: 440px;
+  margin: 0 auto;
+  max-width: 100%;
+  position: relative;
+  top: -96px;
+  width: 720px;
+}
+
+.screenshot-image {
+  box-shadow:  0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+  height: 48vw;
+  margin: 1em 0;
+  max-height: 300px;
+  max-width: 400px;
+  min-height: 150px;
+  min-width: 200px;
+  position: relative;
+  width: 64vw;
+}
+
+#screenshot-image--default {
+  background: -webkit-image-set(
+    url(https://www.gstatic.com/chrome/login/win10/default-small.webp) 1x,
+    url(https://www.gstatic.com/chrome/login/win10/default-small@2x.webp) 2x);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+#screenshot-image--taskbar {
+  background: -webkit-image-set(
+    url(https://www.gstatic.com/chrome/login/win10/pin-small.webp) 1x,
+    url(https://www.gstatic.com/chrome/login/win10/pin-small@2x.webp) 2x);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.screenshot-html-overlay {
+  box-sizing: border-box;
+  font-size: 6px;
+  line-height: 0;
+  position: absolute;
+}
+
+#screenshot-html-overlay--browser {
+  left: 54.8%;
+  top: 53%;
+}
+
+#screenshot-html-overlay--edge {
+  left: 65%;
+  top: 63.5%;
+}
+
+#screenshot-html-overlay--taskbar {
+  left: 31%;
+  top: 73%;
+}
+
+#screenshot-html-overlay--taskbar div {
+  color: #ccc;
+  font-family: Tahoma, Verdana, Segoe, sans-serif;
+  font-weight: 500;
+}
+
+#screenshot-html-overlay--icon {
+  background-image: url(/logo-small.png);
+  background-size: cover;
+  height: 8%;
+  left: 46%;
+  top: 90%;
+  width: 6%;
+}
+
+/* This value is precisely set so that the text over the screenshot starts
+ * scaling at the same time the image starts scaling too. */
+@media (min-width: 312px) {
+  .screenshot-html-overlay {
+    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;
+  }
+}

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

+<!DOCTYPE html>
+<html>
+<head>
+  <title>$i18n{headerText}</title>
+
+  <link rel="import" href="chrome://resources/cr_elements/icons.html">
+  <link rel="import" href="chrome://resources/html/cr.html">
+  <link rel="import" href="chrome://resources/html/polymer.html">
+  <link rel="import" href="chrome://resources/html/util.html">
+  <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+  <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+  <link rel="stylesheet" href="/welcome.css">
+
+  <script src="/welcome.js"></script>
+</head>
+<body>
+  <template is="dom-bind" id="inline-app">
+    <div class="content">
+      <div class="header-logo"></div>
+      <div class="heading">$i18n{headerText}</div>
+      <div class="sections">
+        <div class$="[[computeClasses(isCombined)]]">
+          <div class="section-heading" on-tap="onToggle">
+            <div class="section-heading-text">
+              $i18n{defaultBrowserSubheaderText}
+            </div>
+            <template is="dom-if" if="[[isCombined]]">
+              <iron-icon class="section-heading-expand" icon="cr:expand-more">
+              </iron-icon>
+            </template>
+          </div>
+          <ol class="section-steps">
+            <li>
+              <a href="#" on-tap="onOpenSettings">$i18n{openSettingsText}</a>
+            </li>
+            <li>
+              <div>$i18nRaw{clickEdgeText}</div>
+              <div class="screenshot-image" id="screenshot-image--default">
+                <div class="screenshot-html-overlay"
+                    id="screenshot-html-overlay--browser">
+                  <div>$i18n{webBrowserLabel}</div>
+                </div>
+                <div class="screenshot-html-overlay"
+                    id="screenshot-html-overlay--edge">
+                  <div>$i18n{microsoftEdgeLabel}</div>
+                </div>
+              </div>
+            </li>
+            <li>$i18nRaw{clickSelectChrome}</li>
+          </ol>
+        </div>
+        <template is="dom-if" if="[[isCombined]]">
+          <div class="section expandable">
+            <div class="section-heading" on-tap="onToggle">
+              <div class="section-heading-text">$i18n{pinSubheaderText}</div>
+              <iron-icon class="section-heading-expand" icon="cr:expand-more">
+              </iron-icon>
+            </div>
+            <ol class="section-steps">
+              <li>$i18nRaw{rightClickText}</li>
+              <li>
+                <div>$i18nRaw{pinInstructionText}</div>
+                <div class="screenshot-image" id="screenshot-image--taskbar">
+                  <div class="screenshot-html-overlay"
+                      id="screenshot-html-overlay--taskbar">
+                    <div>$i18n{pinToTaskbarLabel}</div>
+                  </div>
+                  <div class="screenshot-html-overlay"
+                      id="screenshot-html-overlay--icon">
+                  </div>
+                </div>
+              </li>
+            </ol>
+          </div>
+        </template>
+      </div>
+      <a href="#" class="button" on-tap="onContinue">$i18n{continueText}</a>
+    </div>
+  </template>
+</body>
+</html>

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

+// 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.
+
+cr.define('inline', function() {
+  'use strict';
+
+  function onContinue() {
+    chrome.send('handleContinue');
+  }
+
+  function onOpenSettings() {
+    chrome.send('handleSetDefaultBrowser');
+  }
+
+  function onToggle(app) {
+    if (app.isCombined) {
+      var sections = document.querySelectorAll('.section.expandable');
+      sections.forEach(function(section) {
+        section.classList.toggle('expanded');
+      });
+    }
+  }
+
+  function computeClasses(isCombined) {
+    if (isCombined)
+      return 'section expandable expanded';
+    return 'section';
+  }
+
+  function initialize() {
+    var app = $('inline-app');
+
+    app.isCombined = window.location.href.includes('variant=combined');
+
+    // Set handlers.
+    app.computeClasses = computeClasses;
+    app.onContinue = onContinue;
+    app.onOpenSettings = onOpenSettings;
+    app.onToggle = onToggle.bind(this, app);
+  }
+
+  return {
+    initialize: initialize
+  };
+});
+
+document.addEventListener('DOMContentLoaded', inline.initialize);

chrome/browser/resources/welcome/win10/sectioned.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%;
+  justify-content: center;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: var(--google-blue-500);
+  text-decoration: none;
+}
+
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+strong {
+  font-weight: 500;
+}
+
+.content {
+  padding: 64px 24px 24px 24px;
+}
+
+.header-logo {
+  content: -webkit-image-set(url(/logo-large.png) 1x,
+                             url(/logo-large2x.png) 2x);
+}
+
+.text {
+  margin: 0 auto;
+  max-width: 45em;
+}
+
+.heading {
+  font-size: 2.125em;
+  margin-bottom: .25em;
+  margin-top: 1.5em;
+}
+
+.subheading {
+  color: var(--google-grey-500);
+  font-size: 1em;
+  margin-bottom: 1.5em;
+  margin-top: .25em;
+  text-align: center;
+}
+
+.sections {
+  margin-bottom: 3em;
+}
+
+.section.expandable {
+  border-top: 1px solid var(--google-grey-300);
+}
+
+.section.expandable:last-child {
+  border-bottom: 1px solid var(--google-grey-300);
+}
+
+.section.expandable .section-heading {
+  color: var(--google-blue-500);
+  cursor: pointer;
+}
+
+.section-heading {
+  align-items: center;
+  display: flex;
+  padding: 1.5em 0;
+}
+
+.section-heading-text {
+  flex: 1;
+  font-weight: 500;
+}
+
+.section.expandable .section-heading-text {
+ font-weight: normal;
+}
+
+.section.expandable.expanded .section-heading-text {
+  font-weight: 500;
+}
+
+.section-heading-expand {
+  height: 1.25em;
+  opacity: 0.54;
+  transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms;
+  width: 1.25em;
+}
+
+.section.expandable.expanded .section-heading-expand {
+  transform: rotate(180deg);
+  transition-delay: 150ms;
+}
+
+.section-steps {
+  overflow: hidden;
+}
+
+.section-steps li {
+  -webkit-margin-start: 1.25em;
+  -webkit-padding-start: 1em;
+  margin-bottom: 1em;
+}
+
+.section-steps li:last-child {
+  margin-bottom: 1em;
+}
+
+.section.expandable .section-steps {
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms, opacity 150ms;
+}
+
+.section.expandable.expanded .section-steps {
+  max-height: 8.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);
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
+  color: #fff;
+  display: inline-block;
+  font-size: .74em;
+  font-weight: 500;
+  line-height: 1.75em;
+  min-width: 2em;
+  padding: 0 1em;
+  text-align: center;
+  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);
+}
+
+.bg {
+  background: var(--paper-light-blue-700);
+  flex: 1;
+  margin-top: 96px;
+  padding: 24px;
+}
+
+.logo-small {
+  content: -webkit-image-set(url(/logo-small.png) 1x,
+                             url(/logo-small2x.png) 2x);
+  display: inline;
+  height: 1.25em;
+  vertical-align: top;
+  width: 1.25em;
+}
+
+.screenshots {
+  display: block;
+  height: 440px;
+  margin: 0 auto;
+  max-width: 100%;
+  position: relative;
+  top: -96px;
+  width: 720px;
+}
+
+.screenshot-image {
+  box-shadow: 0 0 8px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .24);
+  height: 56vw;
+  max-height: 440px;
+  max-width: 720px;
+  min-height: 294px;
+  min-width: 480px;
+  position: absolute;
+  transition: opacity 150ms;
+  width: 92vw;
+}
+
+.screenshot-image.hidden {
+  opacity: 0;
+}
+
+#screenshot-image--default {
+  background: -webkit-image-set(
+    url(https://www.gstatic.com/chrome/login/win10/default-large.webp) 1x,
+    url(https://www.gstatic.com/chrome/login/win10/default-large@2x.webp) 2x);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+#screenshot-image--taskbar {
+  background: -webkit-image-set(
+    url(https://www.gstatic.com/chrome/login/win10/pin-large.webp) 1x,
+    url(https://www.gstatic.com/chrome/login/win10/pin-large@2x.webp) 2x);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.screenshot-html-overlay {
+  box-sizing: border-box;
+  font-size: 7px;
+  line-height: 0;
+  position: absolute;
+}
+
+#screenshot-html-overlay--browser {
+  left: 35.8%;
+  top: 75.8%;
+}
+
+#screenshot-html-overlay--edge {
+  left: 41.5%;
+  top: 82.4%;
+}
+
+#screenshot-html-overlay--taskbar {
+  left: 62.2%;
+  top: 81.5%;
+}
+
+#screenshot-html-overlay--taskbar div {
+  color: #ccc;
+  font-family: Tahoma, Verdana, Segoe, sans-serif;
+  font-weight: 500;
+}
+
+#screenshot-html-overlay--icon {
+  background-image: url(/logo-small.png);
+  background-size: cover;
+  height: 5.8%;
+  left: 70.60%;
+  top: 93.1%;
+  width: 3.5%;
+}
+
+/* This value is precisely set so that the text over the screenshot starts
+ * scaling at the same time the image starts scaling too. */
+@media (min-width: 520px) {
+  .screenshot-html-overlay {
+    font-size: 1.35vw;
+  }
+}
+
+/* Font-size used when the screenshot exactly reaches its max size. */
+@media (min-width: 780px) {
+  .screenshot-html-overlay {
+    font-size: 10.5px;
+  }
+}
+
+@media (min-width: 1280px) {
+  body {
+    flex-direction: row;
+  }
+
+  .content {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+    padding: 96px;
+  }
+
+  .text {
+    margin: 0 180px;
+    max-width: none;
+    width: 400px;
+  }
+
+  .bg {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    margin: 0;
+    max-width: 42%;
+    padding: 0;
+  }
+
+  .screenshots {
+    margin-left: -180px;
+    max-width: none;
+    top: 0;
+  }
+}

chrome/browser/resources/welcome/win10/sectioned.html

+<!DOCTYPE html>
+<html>
+<head>
+  <title>$i18n{headerText}</title>
+
+  <link rel="import" href="chrome://resources/cr_elements/icons.html">
+  <link rel="import" href="chrome://resources/html/cr.html">
+  <link rel="import" href="chrome://resources/html/polymer.html">
+  <link rel="import" href="chrome://resources/html/util.html">
+  <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+  <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+  <link rel="stylesheet" href="/welcome.css">
+
+  <script src="/welcome.js"></script>
+</head>
+<body>
+  <template is="dom-bind" id="sectioned-app">
+    <div class="content">
+      <div class="text">
+      <div class="header-logo"></div>
+        <div class="heading">$i18n{headerText}</div>
+        <div class="sections">
+          <div class$="[[computeClasses(isCombined)]]">
+            <div class="section-heading" on-tap="onToggle">
+              <div class="section-heading-text">
+                $i18n{defaultBrowserSubheaderText}
+              </div>
+              <template is="dom-if" if="[[isCombined]]">
+                <iron-icon class="section-heading-expand" icon="cr:expand-more">
+                </iron-icon>
+              </template>
+            </div>
+            <ol class="section-steps">
+              <li>
+                <a href="#" on-tap="onOpenSettings">$i18n{openSettingsText}</a>
+              </li>
+              <li>$i18nRaw{clickEdgeText}</li>
+              <li>$i18nRaw{clickSelectChrome}</li>
+            </ol>
+          </div>
+          <template is="dom-if" if="[[isCombined]]">
+            <div class="section expandable">
+              <div class="section-heading" on-tap="onToggle">
+                <div class="section-heading-text">$i18n{pinSubheaderText}</div>
+                <iron-icon class="section-heading-expand" icon="cr:expand-more">
+                </iron-icon>
+              </div>
+              <ol class="section-steps">
+                <li>$i18nRaw{rightClickText}</li>
+                <li>$i18nRaw{pinInstructionText}</li>
+              </ol>
+            </div>
+          </template>
+        </div>
+        <a href="#" class="button" on-tap="onContinue">$i18n{continueText}</a>
+      </div>
+    </div>
+    <div class="bg">
+      <div class="screenshots">
+        <div class="screenshot-image" id="screenshot-image--default">
+          <div class="screenshot-html-overlay"
+              id="screenshot-html-overlay--browser">
+            <div>$i18n{webBrowserLabel}</div>
+          </div>
+          <div class="screenshot-html-overlay"
+              id="screenshot-html-overlay--edge">
+            <div>$i18n{microsoftEdgeLabel}</div>
+          </div>
+        </div>
+        <div class="screenshot-image hidden" id="screenshot-image--taskbar">
+          <div class="screenshot-html-overlay"
+              id="screenshot-html-overlay--taskbar">
+            <div>$i18n{pinToTaskbarLabel}</div>
+          </div>
+          <div class="screenshot-html-overlay"
+              id="screenshot-html-overlay--icon">
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+</body>
+</html>

chrome/browser/resources/welcome/win10/sectioned.js

+// 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.
+
+cr.define('sectioned', function() {
+  'use strict';
+
+  function onContinue() {
+    chrome.send('handleContinue');
+  }
+
+  function onOpenSettings() {
+    chrome.send('handleSetDefaultBrowser');
+  }
+
+  function onToggle(app) {
+    if (app.isCombined) {
+      // Toggle sections.
+      var sections = document.querySelectorAll('.section.expandable');
+      sections.forEach(function(section) {
+        section.classList.toggle('expanded');
+      });
+      // Toggle screenshots.
+      var screenshots = document.querySelectorAll('.screenshot-image');
+      screenshots.forEach(function(screenshot) {
+        screenshot.classList.toggle('hidden');
+      });
+    }
+  }
+
+  function computeClasses(isCombined) {
+    if (isCombined)
+      return 'section expandable expanded';
+    return 'section';
+  }
+
+  function initialize() {
+    var app = $('sectioned-app');
+
+    app.isCombined = window.location.href.includes('variant=combined');
+
+    // Set handlers.
+    app.computeClasses = computeClasses;
+    app.onContinue = onContinue;
+    app.onOpenSettings = onOpenSettings;
+    app.onToggle = onToggle.bind(this, app);
+  }
+
+  return {
+    initialize: initialize
+  };
+});
+
+document.addEventListener('DOMContentLoaded', sectioned.initialize);

chrome/browser/ui/BUILD.gn

@@ -2952,6 +2952,10 @@ split_static_library("ui") {
       "webui/cast/cast_ui.h",
       "webui/conflicts_ui.cc",
       "webui/conflicts_ui.h",
+      "webui/welcome_win10_handler.cc",
+      "webui/welcome_win10_handler.h",
+      "webui/welcome_win10_ui.cc",
+      "webui/welcome_win10_ui.h",
     ]
     public_deps += [
       "//ui/views",

chrome/browser/ui/webui/chrome_web_ui_controller_factory.cc

@@ -171,6 +171,7 @@
 #if defined(OS_WIN)
 #include "chrome/browser/ui/webui/conflicts_ui.h"
 #include "chrome/browser/ui/webui/set_as_default_browser_ui_win.h"
+#include "chrome/browser/ui/webui/welcome_win10_ui.h"
 #endif
 
 #if (defined(USE_NSS_CERTS) || defined(USE_OPENSSL_CERTS)) && defined(USE_AURA)
@@ -277,6 +278,13 @@ WebUIController* NewWebUI<WelcomeUI>(WebUI* web_ui, const GURL& url) {
 #endif  // !defined(OS_CHROMEOS)
 #endif  // !defined(OS_ANDROID)
 
+#if defined(OS_WIN)
+template <>
+WebUIController* NewWebUI<WelcomeWin10UI>(WebUI* web_ui, const GURL& url) {
+  return new WelcomeWin10UI(web_ui, url);
+}
+#endif  // defined(OS_WIN)
+
 #if defined(ENABLE_EXTENSIONS)
 // Only create ExtensionWebUI for URLs that are allowed extension bindings,
 // hosted by actual tabs.
@@ -562,6 +570,10 @@ WebUIFactoryFunction GetWebUIFactoryFunction(WebUI* web_ui,
   if (url.host() == chrome::kChromeUIWelcomeHost)
     return &NewWebUI<WelcomeUI>;
 #endif
+#if defined(OS_WIN)
+  if (url.host() == chrome::kChromeUIWelcomeWin10Host)
+    return &NewWebUI<WelcomeWin10UI>;
+#endif  // defined(OS_WIN)
 
   /****************************************************************************
    * Other #defines and special logics.

chrome/browser/ui/webui/welcome_win10_handler.cc

+// 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.
+
+#include "chrome/browser/ui/webui/welcome_win10_handler.h"
+
+#include <string>
+
+#include "base/bind.h"
+#include "chrome/browser/shell_integration.h"
+#include "chrome/common/url_constants.h"
+#include "content/public/browser/web_contents.h"
+
+WelcomeWin10Handler::WelcomeWin10Handler() = default;
+
+WelcomeWin10Handler::~WelcomeWin10Handler() = default;
+
+// Override from WebUIMessageHandler.
+void WelcomeWin10Handler::RegisterMessages() {
+  web_ui()->RegisterMessageCallback(
+      "handleSetDefaultBrowser",
+      base::Bind(&WelcomeWin10Handler::HandleSetDefaultBrowser,
+                 base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "handleContinue",
+      base::Bind(&WelcomeWin10Handler::HandleContinue, base::Unretained(this)));
+}
+
+void WelcomeWin10Handler::HandleSetDefaultBrowser(const base::ListValue* args) {
+  // The worker owns itself.
+  (new shell_integration::DefaultBrowserWorker(
+       shell_integration::DefaultWebClientWorkerCallback()))
+      ->StartSetAsDefault();
+}
+
+void WelcomeWin10Handler::HandleContinue(const base::ListValue* args) {
+  web_ui()->GetWebContents()->GetController().LoadURL(
+      GURL(chrome::kChromeUINewTabURL), content::Referrer(),
+      ui::PageTransition::PAGE_TRANSITION_LINK, std::string());
+}

chrome/browser/ui/webui/welcome_win10_handler.h

+// 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.
+
+#ifndef CHROME_BROWSER_UI_WEBUI_WELCOME_WIN10_HANDLER_H_
+#define CHROME_BROWSER_UI_WEBUI_WELCOME_WIN10_HANDLER_H_
+
+#include "base/macros.h"
+#include "content/public/browser/web_ui_message_handler.h"
+
+namespace base {
+class ListValue;
+}
+
+// Handles actions on the Windows 10 specific Welcome page.
+class WelcomeWin10Handler : public content::WebUIMessageHandler {
+ public:
+  WelcomeWin10Handler();
+  ~WelcomeWin10Handler() override;
+
+  // content::WebUIMessageHandler:
+  void RegisterMessages() override;
+
+ private:
+  void HandleSetDefaultBrowser(const base::ListValue* args);
+  void HandleContinue(const base::ListValue* args);
+
+  DISALLOW_COPY_AND_ASSIGN(WelcomeWin10Handler);
+};
+
+#endif  // CHROME_BROWSER_UI_WEBUI_WELCOME_WIN10_HANDLER_H_

chrome/browser/ui/webui/welcome_win10_ui.cc

+// 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.
+
+#include "chrome/browser/ui/webui/welcome_win10_ui.h"
+
+#include <string>
+
+#include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/webui/welcome_win10_handler.h"
+#include "chrome/common/url_constants.h"
+#include "chrome/grit/browser_resources.h"
+#include "chrome/grit/chrome_unscaled_resources.h"
+#include "chrome/grit/chromium_strings.h"
+#include "chrome/grit/generated_resources.h"
+#include "chrome/grit/theme_resources.h"
+#include "content/public/browser/web_ui_data_source.h"
+#include "net/base/url_util.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "url/gurl.h"
+
+namespace {
+
+// Helper function to check the presence of a key/value inside the query in the
+// |url|.
+bool UrlContainsKeyValueInQuery(const GURL& url,
+                                const std::string& key,
+                                const std::string& expected_value) {
+  std::string value;
+  return net::GetValueForKeyInQuery(url, key, &value) &&
+         value == expected_value;
+}
+
+// Adds all the needed localized strings to |html_source|, depending on
+// the value of |is_first_run|.
+void AddLocalizedStrings(content::WebUIDataSource* html_source,
+                         bool is_first_run) {
+  // Only show the "Welcome to Chrome" text on first run.
+  int welcome_header_id = is_first_run
+                              ? IDS_WIN10_WELCOME_HEADER
+                              : IDS_WIN10_WELCOME_HEADER_AFTER_FIRST_RUN;
+  html_source->AddLocalizedString("headerText", welcome_header_id);
+
+  html_source->AddLocalizedString("continueText", IDS_WIN10_WELCOME_CONTINUE);
+
+  // Default browser strings.
+  html_source->AddLocalizedString("defaultBrowserSubheaderText",
+                                  IDS_WIN10_WELCOME_MAKE_DEFAULT_SUBHEADING);
+  html_source->AddLocalizedString("openSettingsText",
+                                  IDS_WIN10_WELCOME_OPEN_SETTINGS);
+  html_source->AddLocalizedString("clickEdgeText",
+                                  IDS_WIN10_WELCOME_CLICK_EDGE);
+  html_source->AddLocalizedString("clickSelectChrome",
+                                  IDS_WIN10_WELCOME_SELECT);
+  html_source->AddLocalizedString("webBrowserLabel",
+                                  IDS_WIN10_WELCOME_BROWSER_LABEL);
+  html_source->AddLocalizedString("microsoftEdgeLabel",
+                                  IDS_WIN10_WELCOME_EDGE_LABEL);
+
+  // Taskbar pin strings.
+  html_source->AddLocalizedString("pinSubheaderText",
+                                  IDS_WIN10_WELCOME_PIN_SUBHEADING);
+  html_source->AddLocalizedString("rightClickText",
+                                  IDS_WIN10_WELCOME_RIGHT_CLICK_TASKBAR);
+  html_source->AddLocalizedString("pinInstructionText",
+                                  IDS_WIN10_WELCOME_PIN_INSTRUCTION);
+  html_source->AddLocalizedString("pinToTaskbarLabel",
+                                  IDS_WIN10_WELCOME_PIN_LABEL);
+}
+
+}  // namespace
+
+WelcomeWin10UI::WelcomeWin10UI(content::WebUI* web_ui, const GURL& url)
+    : content::WebUIController(web_ui) {
+  static const char kCssFilePath[] = "welcome.css";
+  static const char kJsFilePath[] = "welcome.js";
+
+  web_ui->AddMessageHandler(new WelcomeWin10Handler());
+
+  content::WebUIDataSource* html_source =
+      content::WebUIDataSource::Create(url.host());
+
+  // Determine which variation to show.
+  bool is_first_run = !UrlContainsKeyValueInQuery(url, "text", "faster");
+  bool is_inline_style = UrlContainsKeyValueInQuery(url, "style", "inline");
+
+  AddLocalizedStrings(html_source, is_first_run);
+
+  if (is_inline_style) {
+    html_source->AddResourcePath(kCssFilePath, IDR_WELCOME_WIN10_INLINE_CSS);
+    html_source->AddResourcePath(kJsFilePath, IDR_WELCOME_WIN10_INLINE_JS);
+    html_source->SetDefaultResource(IDR_WELCOME_WIN10_INLINE_HTML);
+  } else {
+    html_source->AddResourcePath(kCssFilePath, IDR_WELCOME_WIN10_SECTIONED_CSS);
+    html_source->AddResourcePath(kJsFilePath, IDR_WELCOME_WIN10_SECTIONED_JS);
+    html_source->SetDefaultResource(IDR_WELCOME_WIN10_SECTIONED_HTML);
+  }
+
+  // Logo images of all scales.
+  html_source->AddResourcePath("logo-small.png", IDR_PRODUCT_LOGO_32);
+  html_source->AddResourcePath("logo-small2x.png", IDR_PRODUCT_LOGO_64);
+  html_source->AddResourcePath("logo-large.png", IDR_PRODUCT_LOGO_64);
+  html_source->AddResourcePath("logo-large2x.png", IDR_PRODUCT_LOGO_128);
+
+  content::WebUIDataSource::Add(Profile::FromWebUI(web_ui), html_source);
+}
+
+WelcomeWin10UI::~WelcomeWin10UI() = default;

chrome/browser/ui/webui/welcome_win10_ui.h

+// 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.
+
+#ifndef CHROME_BROWSER_UI_WEBUI_WELCOME_WIN10_UI_H_
+#define CHROME_BROWSER_UI_WEBUI_WELCOME_WIN10_UI_H_
+
+#include "content/public/browser/web_ui_controller.h"
+
+class GURL;
+
+// The WebUI for chrome://welcome-win10, the page which greets new Windows 10
+// users and educates them about setting the default browser and pinning the
+// browser to their taskbar.
+class WelcomeWin10UI : public content::WebUIController {
+ public:
+  WelcomeWin10UI(content::WebUI* web_ui, const GURL& url);
+  ~WelcomeWin10UI() override;
+};
+
+#endif  // CHROME_BROWSER_UI_WEBUI_WELCOME_WIN10_UI_H_

chrome/common/url_constants.cc

@@ -95,6 +95,7 @@ const char kChromeUIUberFrameURL[] = "chrome://uber-frame/";
 const char kChromeUIUserActionsURL[] = "chrome://user-actions/";
 const char kChromeUIVersionURL[] = "chrome://version/";
 const char kChromeUIWelcomeURL[] = "chrome://welcome/";
+const char kChromeUIWelcomeWin10URL[] = "chrome://welcome-win10/";
 
 #if BUILDFLAG(ANDROID_JAVA_UI)
 const char kChromeUIContextualSearchPromoURL[] =
@@ -259,6 +260,7 @@ const char kChromeUIUsbInternalsHost[] = "usb-internals";
 const char kChromeUIUserActionsHost[] = "user-actions";
 const char kChromeUIVersionHost[] = "version";
 const char kChromeUIWelcomeHost[] = "welcome";
+const char kChromeUIWelcomeWin10Host[] = "welcome-win10";
 const char kChromeUIWorkersHost[] = "workers";
 
 #if defined(ENABLE_PRINT_PREVIEW)

chrome/common/url_constants.h

@@ -88,6 +88,7 @@ extern const char kChromeUIUserActionsURL[];
 extern const char kChromeUIUserManagerURL[];
 extern const char kChromeUIVersionURL[];
 extern const char kChromeUIWelcomeURL[];
+extern const char kChromeUIWelcomeWin10URL[];
 
 #if BUILDFLAG(ANDROID_JAVA_UI)
 extern const char kChromeUIContextualSearchPromoURL[];
@@ -242,6 +243,7 @@ extern const char kChromeUIUsbInternalsHost[];
 extern const char kChromeUIUserActionsHost[];
 extern const char kChromeUIVersionHost[];
 extern const char kChromeUIWelcomeHost[];
+extern const char kChromeUIWelcomeWin10Host[];
 extern const char kChromeUIWorkersHost[];
 
 #if defined(ENABLE_PRINT_PREVIEW)