[CrOS MultiDevice] Update setup flow WebUI styling.

This CL inserts the appropriate strings to be displayed in the unified
setup flow, and adjusts some styling to match the mocks.

Still to be done:
(1) Adding animations on both the "start setup" and "setup succeeded"
    pages; these animations have not yet been provided in the required
    SVG or PNG formats.
(2) Inserting the correct icons on the "start setup" page; currently,
    the Google "G" icon is displayed multiple times. These icons have
    not yet been provided by UX.
(3) Adjusting the forward/backward button styles. Multiple sets of
    mocks exist, each with different styles and different button text.
(4) Making the pages "pixel-perfect"; this CL causes the page to match
    the mocks roughly, but there are a few edge cases. I didn't make all
    CSS perfect yet due to some inconsistencies with the mocks, and I
    want to make sure that the mocks are truly finalized before
    perfoming the rest of the UI polish work.

Bug: 824568
Change-Id: I840afcb30f07d9d899ff17e156faa0268a5f556e
Reviewed-on: https://chromium-review.googlesource.com/1152030Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#578792}

chrome/app/chromeos_strings.grdp

@@ -159,11 +159,11 @@
   <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_HEADER" desc="Header for welcome page.">
     Better Together
   </message>
-  <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MESSAGE_PART_1" desc="Concise summary to tell user that they can share their Android's capabilities with their Chromebook.">
-    Share the best of Android with your Chromebook automatically.
+  <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MESSAGE" desc="Summary to tell user that they can share their Android's capabilities with their Chromebook; includes details on specific features that can be used and a link to an information page">
+    Share the best of Android with your Chromebook automatically. Connect your phone so you can text from your computer, share your phone's internet connection, and unlock your Chromebook screen.<ph name="FOOTNOTE_POINTER">$1<ex>*</ex></ph> <ph name="LINK_BEGIN">&lt;a id="learn-more-link" href="$2<ex>https://support.google.com/chromebook/?p=multidevice</ex>"&gt;</ph>Learn more<ph name="LINK_END">&lt;/a&gt;</ph>
   </message>
-  <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MESSAGE_PART_2" desc="More details on specific multidevice features and a link to an information page.">
-    Connect your phone so you can text from your computer, share your phone's internet connection, and unlock your Chromebook screen.<ph name="FOOTNOTE_POINTER">$1<ex>*</ex></ph> <ph name="LINK_BEGIN">&lt;a id="learn-more-link" href="$2<ex>https://support.google.com/chromebook/?p=multidevice</ex>"&gt;</ph>Learn more<ph name="LINK_END">&lt;/a&gt;</ph>
+  <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_FOOTNOTE" desc="Footnote for multi-device feature setup page, which indicates that the exact set of features available to users differs according to the device model used.">
+    <ph name="FOOTNOTE_POINTER">$1<ex>*</ex></ph>Features vary by device
   </message>
   <message name="IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_SINGLE_DEVICE_HEADER" desc="Label appearing over the name of an Android phone which this Chromebook can connect to.">
     Device detected

chrome/browser/resources/chromeos/multidevice_setup/setup_succeeded_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="ui_page.html">
 <link rel="import" href="ui_page_container_behavior.html">
 
 <dom-module id="setup-succeeded-page">
   <template>
+    <style include="iron-flex">
+      #animation-container {
+        @apply(--layout-horizontal);
+        @apply(--layout-center-justified);
+      }
+
+      #animation-placeholder {
+        background-color: lightblue;
+        height: 156px;
+        margin-top: 20px;
+        width: 416px;
+      }
+    </style>
     <ui-page header-text="[[headerText]]" icon-name="google-g">
       <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
-      <div slot="additional-content">
-        This is empty... (PlAcEhOlDeR tExT!!)
+      <div id="animation-container" slot="additional-content">
+        <div id="animation-placeholder">Animation Placeholder</div>
       </div>
     </ui-page>
   </template>

chrome/browser/resources/chromeos/multidevice_setup/start_setup_page.html

@@ -9,11 +9,8 @@
 <dom-module id="start-setup-page">
   <template>
     <style include="iron-flex multidevice-setup-shared">
-      #device-selection-container {
+      #content-container {
         @apply(--layout-horizontal);
-        @apply(--layout-center);
-        border-bottom: 1px solid rgb(232, 234, 237);
-        border-top: 1px solid rgb(232, 234, 237);
         color: rgb(33, 33, 36);
         font-family: Roboto-Regular, Roboto, sans-serif;
         font-size: 13px;
@@ -28,26 +25,91 @@
         height: 32px;
         width: 240px;
       }
+
+      #animation-container {
+        @apply(--layout-horizontal);
+        @apply(--layout-center-justified);
+      }
+
+      #animation-placeholder {
+        background-color: lightblue;
+        height: 100px;
+        margin-top: 20px;
+        width: 300px;
+      }
+
+      #feature-details-container {
+        border-left: 1px solid rgb(218, 220, 224);
+        padding-left: 24px;
+      }
+
+      #feature-details-container-header {
+        margin-bottom: 18px;
+      }
+
+      .feature-detail {
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+        padding-bottom: 28px;
+        padding-top: 21px;
+      }
+
+      .feature-detail iron-icon {
+        --iron-icon-height: 20px;
+        --iron-icon-width: 20px;
+      }
+
+      .feature-detail span {
+        padding-left: 8px;
+      }
     </style>
     <ui-page header-text="[[headerText]]" icon-name="google-g">
       <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
-      <div id="device-selection-container" slot="additional-content">
-        [[getDeviceSelectionHeader_(devices)]]
-        <div class="flex"></div>
-        <div hidden$="[[!doesDeviceListHaveOneElement_(devices)]]">
-          [[getFirstDeviceNameInList_(devices)]]
-        </div>
-        <div hidden$="[[!doesDeviceListHaveMultipleElements_(devices)]]">
-          <select id="deviceDropdown"
-              on-change="onDeviceDropdownSelectionChanged_">
-            <template is="dom-repeat" items="[[devices]]">
-              <option value$="[[item.publicKey]]">
-                [[item.name]]
-              </option>
-            </template>
-          </select>
+      <div slot="additional-content">
+        <div id="content-container">
+          <div class="flex">
+            [[getDeviceSelectionHeader_(devices)]]
+            <div class="flex"></div>
+            <div hidden$="[[!doesDeviceListHaveOneElement_(devices)]]">
+              [[getFirstDeviceNameInList_(devices)]]
+            </div>
+            <div hidden$="[[!doesDeviceListHaveMultipleElements_(devices)]]">
+              <select id="deviceDropdown"
+                  on-change="onDeviceDropdownSelectionChanged_">
+                <template is="dom-repeat" items="[[devices]]">
+                  <option value$="[[item.publicKey]]">
+                    [[item.name]]
+                  </option>
+                </template>
+              </select>
+            </div>
+            <div id="animation-container">
+              <div id="animation-placeholder">Animation Placeholder</div>
+            </div>
+          </div>
+          <div id="feature-details-container" class="flex">
+            <div id="feature-details-container-header">
+              $i18n{startSetupPageFeatureListHeader}
+            </div>
+            <div class="feature-detail">
+              <!-- TODO(jordynass): Use correct icon. -->
+              <iron-icon icon="multidevice-setup-icons:google-g"></iron-icon>
+              <span>$i18n{startSetupPageFeatureListAwm}</span>
+            </div>
+            <div class="feature-detail">
+              <!-- TODO(jordynass): Use correct icon. -->
+              <iron-icon icon="multidevice-setup-icons:google-g"></iron-icon>
+              <span>$i18n{startSetupPageFeatureListInstallApps}</span>
+            </div>
+            <div class="feature-detail">
+              <!-- TODO(jordynass): Use correct icon. -->
+              <iron-icon icon="multidevice-setup-icons:google-g"></iron-icon>
+              <span>$i18n{startSetupPageFeatureListAddFeatures}</span>
+            </div>
+          </div>
         </div>
-      </span>
+        <div id="footnote">$i18n{startSetupPageFootnote}</div>
+      </div>
     </ui-page>
   </template>
   <script src="start_setup_page.js"></script>

chrome/browser/resources/chromeos/multidevice_setup/ui_page.html

@@ -14,7 +14,7 @@
       }
 
       h1 {
-        color: rgb(33, 33, 36);
+        color: rgb(32, 33, 36);
         font-size: 28px;
         margin: 0;
         padding-top: 36px;
@@ -24,17 +24,6 @@
         height: 72px;
         padding-top: 14px;
       }
-
-      #additional-content-container {
-        height: 50px;
-      }
-
-      #banner {
-        background-color: rgb(0, 100, 120);
-        font-size: 36px;
-        height: 236px;
-        margin-top: 8px;
-      }
     </style>
     <div id="ui-page-container">
       <iron-icon icon="[[computeIconIdentifier_(iconName)]]"></iron-icon>
@@ -42,10 +31,9 @@
       <div id="message-container" class="page-content-text">
         <slot name="message"></slot>
       </div>
-      <div id="additional-content-container">
+      <div id="additional-content-container" class="page-content-text">
         <slot name="additional-content"></slot>
       </div>
-      <div id="banner">SETUP ILLUSTRATIONS/ANIMATIONS GO HERE!</div>
     </div>
   </template>
   <script src="ui_page.js"></script>

chrome/browser/resources/chromeos/multidevice_setup/ui_page_container_behavior.js

@@ -95,8 +95,10 @@ const UiPageContainerBehaviorImpl = {
   computeLocalizedText_: function(textId) {
     if (!this.i18nExists(textId))
       return;
+
+    const validNodeFn = (node, value) => node.tagName == 'A';
     return this.i18nAdvanced(
-        textId, {attrs: {'id': (node, value) => node.tagName == 'A'}});
+        textId, {attrs: {'id': validNodeFn, 'href': validNodeFn}});
   },
 };
 

chrome/browser/ui/webui/chromeos/multidevice_setup/multidevice_setup_dialog.cc

@@ -4,6 +4,7 @@
 
 #include "chrome/browser/ui/webui/chromeos/multidevice_setup/multidevice_setup_dialog.h"
 
+#include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/common/webui_url_constants.h"
 #include "chrome/grit/generated_resources.h"
@@ -20,6 +21,10 @@ namespace multidevice_setup {
 
 namespace {
 
+// TODO(khorimoto): Replace with actual help center URL when available.
+const char kFootnoteMarker[] = "*";
+const char kSetupLearnMoreLink[] = "https://multidevice-learn-more.com";
+
 constexpr int kDialogHeightPx = 640;
 constexpr int kDialogWidthPx = 768;
 
@@ -29,7 +34,7 @@ void AddMultiDeviceSetupStrings(content::WebUIDataSource* html_source) {
   static constexpr struct {
     const char* name;
     int id;
-  } kLocalizedStrings[] = {
+  } kLocalizedStringsWithoutPlaceholders[] = {
       {"accept", IDS_MULTIDEVICE_SETUP_ACCEPT_LABEL},
       {"cancel", IDS_CANCEL},
       {"done", IDS_DONE},
@@ -37,6 +42,14 @@ void AddMultiDeviceSetupStrings(content::WebUIDataSource* html_source) {
        IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MULTIPLE_DEVICE_HEADER},
       {"startSetupPageSingleDeviceHeader",
        IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_SINGLE_DEVICE_HEADER},
+      {"startSetupPageFeatureListHeader",
+       IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_FEATURE_LIST_HEADER},
+      {"startSetupPageFeatureListAwm",
+       IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_AWM_DESCRIPTION},
+      {"startSetupPageFeatureListInstallApps",
+       IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_INSTALL_APPS_DESCRIPTION},
+      {"startSetupPageFeatureListAddFeatures",
+       IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_ADD_FEATURES},
       {"setupFailedPageHeader", IDS_MULTIDEVICE_SETUP_SETUP_FAILED_PAGE_HEADER},
       {"setupFailedPageMessage",
        IDS_MULTIDEVICE_SETUP_SETUP_FAILED_PAGE_MESSAGE},
@@ -45,16 +58,24 @@ void AddMultiDeviceSetupStrings(content::WebUIDataSource* html_source) {
       {"setupSucceededPageMessage",
        IDS_MULTIDEVICE_SETUP_SETUP_SUCCEEDED_PAGE_MESSAGE},
       {"startSetupPageHeader", IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_HEADER},
-      {"startSetupPageMessagePart1",
-       IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MESSAGE_PART_1},
-      {"startSetupPageMessagePart2",
-       IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MESSAGE_PART_2},
       {"title", IDS_MULTIDEVICE_SETUP_DIALOG_TITLE},
       {"tryAgain", IDS_MULTIDEVICE_SETUP_TRY_AGAIN_LABEL},
   };
 
-  for (const auto& entry : kLocalizedStrings)
+  for (const auto& entry : kLocalizedStringsWithoutPlaceholders)
     html_source->AddLocalizedString(entry.name, entry.id);
+
+  html_source->AddString(
+      "startSetupPageMessage",
+      l10n_util::GetStringFUTF16(
+          IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_MESSAGE,
+          base::ASCIIToUTF16(kFootnoteMarker),
+          base::ASCIIToUTF16(kSetupLearnMoreLink)));
+  html_source->AddString(
+      "startSetupPageFootnote",
+      l10n_util::GetStringFUTF16(
+          IDS_MULTIDEVICE_SETUP_START_SETUP_PAGE_FOOTNOTE,
+          base::ASCIIToUTF16(kFootnoteMarker)));
 }
 
 }  // namespace