Add EDU login flow: Add 'info for parents' screen

Add component and strings for parent info screen.
Move edu-login-button position CSS to shared CSS file.
Update template to allow scrollable content.
Screenshot: http://screen/ty41uTYuCQO

Bug: 1043108
Change-Id: Iea78f81e8469a41ca17357e891355676bf57d8a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2010963Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Kush Sinha <sinhak@chromium.org>
Commit-Queue: Anastasiia Nikolaienko <anastasiian@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753548}

chrome/app/chromeos_strings.grdp

@@ -4557,6 +4557,32 @@
   <message name="IDS_EDU_LOGIN_PARENT_SIGNIN_PASSWORD_HIDE" desc="A tool tip on a button that hides the saved password that is being shown.">
     Hide password
   </message>
+  <message name="IDS_EDU_LOGIN_INFO_TITLE" desc="Title for the parent information screen in EDU account addition flow.">
+    School account info for parents
+  </message>
+  <message name="IDS_EDU_LOGIN_INFO_BODY" desc="Text informing parent that only EDU account may be added to the device.">
+    Your child wants to add another Google account to this device. Only G Suite for Education accounts may be added to Family Link managed devices.
+  </message>
+  <message name="IDS_EDU_LOGIN_INFO_PARENT_SETTINGS" desc="Text informing parent about Family Link parent settings.">
+    Your Family Link parent settings will still apply. If you've previously blocked an app or site, you won't have to do it again.
+  </message>
+  <message name="IDS_EDU_LOGIN_INFO_DATA_PROTECTION" desc="Text informing parent about their child's data protection.">
+    You child's data in Classroom will be protected. <ph name="LINK_BEGIN">&lt;a target="_blank" href="$1<ex>https://support.google.com</ex>"&gt;</ph>Learn more<ph name="LINK_END">&lt;/a&gt;</ph>
+  </message>
+  <message name="IDS_EDU_LOGIN_INFO_RESOURCES_AVAILABILITY" desc="Text informing parent some resources for schoolwork might not be available.">
+    Resources for schoolwork might not be available or automatically loaded
+    Your child might not have access to:
+    <ph name="BEGIN_LIST">&lt;ul&gt;</ph>
+      <ph name="LIST_ITEM">&lt;li&gt;</ph>Applications and extensions that were installed by the school
+      <ph name="LIST_ITEM">&lt;li&gt;</ph>Bookmarks from a school Chromebook
+      <ph name="LIST_ITEM">&lt;li&gt;</ph>Autofill passwords to educational sites
+    <ph name="END_LIST">&lt;/ul&gt;</ph>
+    To get the full school experience on this device, your child should:
+    <ph name="BEGIN_OLIST">&lt;ol&gt;</ph>
+      <ph name="OLIST_ITEM">&lt;li&gt;</ph>Sign out of their Family Link managed account
+      <ph name="OLIST_ITEM">&lt;li&gt;</ph>Sign in with their GSuite for Education account on the sign-in screen. Note, however, this will mean school policies including app and website access settings will take effect over your Family Link supervision features (for instance, school administrators may allow YouTube if it’s necessary for homework, screentime would not be enforced, etc.)
+    <ph name="END_OLIST">&lt;/ol&gt;</ph>
+  </message>
 
   <!-- TPM firmware auto-update notifications -->
   <message name="IDS_TPM_AUTO_UPDATE_PLANNED_NOTIFICATION_TITLE" desc="Title for the notification informing the user that local data will be deleted.">

chrome/app/chromeos_strings_grdp/IDS_EDU_LOGIN_INFO_BODY.png.sha1

+bb5e6a878d7a98c8b7de545fd08bdc343436dcba
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_LOGIN_INFO_DATA_PROTECTION.png.sha1

+bb5e6a878d7a98c8b7de545fd08bdc343436dcba
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_LOGIN_INFO_PARENT_SETTINGS.png.sha1

+bb5e6a878d7a98c8b7de545fd08bdc343436dcba
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_LOGIN_INFO_RESOURCES_AVAILABILITY.png.sha1

+bb5e6a878d7a98c8b7de545fd08bdc343436dcba
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_EDU_LOGIN_INFO_TITLE.png.sha1

+bb5e6a878d7a98c8b7de545fd08bdc343436dcba
\ No newline at end of file

chrome/browser/browser_resources.grd

@@ -224,6 +224,7 @@
         <include name="IDR_EDU_LOGIN_EDU_LOGIN_WELCOME_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\edu_login_welcome.js" use_base_dir="false" type ="BINDATA" compress="gzip" preprocess="true" />
         <include name="IDR_EDU_LOGIN_EDU_LOGIN_PARENTS_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\edu_login_parents.js" use_base_dir="false" type ="BINDATA" compress="gzip" preprocess="true" />
         <include name="IDR_EDU_LOGIN_EDU_LOGIN_PARENT_SIGNIN_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\edu_login_parent_signin.js" use_base_dir="false" type ="BINDATA" compress="gzip" preprocess="true" />
+        <include name="IDR_EDU_LOGIN_EDU_LOGIN_PARENT_INFO_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\edu_login\edu_login_parent_info.js" use_base_dir="false" type ="BINDATA" compress="gzip" preprocess="true" />
         <include name="IDR_FAMILY_LINK_LOGO_SVG" file="resources\chromeos\family_link_logo.svg" type="BINDATA" compress="gzip" />
 
         <!-- Chrome OS Account Manager welcome screen resources -->

chrome/browser/resources/chromeos/edu_login/BUILD.gn

@@ -11,6 +11,7 @@ js_type_check("closure_compile") {
     ":app",
     ":browser_proxy",
     ":edu_login_button",
+    ":edu_login_parent_info",
     ":edu_login_parent_signin",
     ":edu_login_parents",
     ":edu_login_template",
@@ -21,6 +22,7 @@ js_type_check("closure_compile") {
 
 js_library("app") {
   deps = [
+    ":edu_login_parent_info",
     ":edu_login_parent_signin",
     ":edu_login_parents",
     ":edu_login_util",
@@ -42,6 +44,7 @@ js_library("edu_login_button") {
 js_library("edu_login_template") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements:cr_scrollable_behavior.m",
   ]
 }
 
@@ -84,6 +87,15 @@ js_library("edu_login_parent_signin") {
   ]
 }
 
+js_library("edu_login_parent_info") {
+  deps = [
+    ":edu_login_button",
+    ":edu_login_template",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:icon.m",
+  ]
+}
+
 polymer_modulizer("app") {
   js_file = "app.js"
   html_file = "app.html"
@@ -132,11 +144,18 @@ polymer_modulizer("edu_login_parent_signin") {
   html_type = "v3-ready"
 }
 
+polymer_modulizer("edu_login_parent_info") {
+  js_file = "edu_login_parent_info.js"
+  html_file = "edu_login_parent_info.html"
+  html_type = "v3-ready"
+}
+
 group("polymer3_elements") {
   public_deps = [
     ":app_module",
     ":edu_login_button_module",
     ":edu_login_css_module",
+    ":edu_login_parent_info_module",
     ":edu_login_parent_signin_module",
     ":edu_login_parents_module",
     ":edu_login_template_module",

chrome/browser/resources/chromeos/edu_login/app.html

@@ -7,4 +7,6 @@
   <edu-login-parent-signin id="[[Steps.PARENT_SIGNIN]]" slot="view"
       parent="[[selectedParent_]]">
   </edu-login-parent-signin>
+  <edu-login-parent-info id="[[Steps.PARENT_INFO]]" slot="view">
+  </edu-login-parent-info>
 </cr-view-manager>

chrome/browser/resources/chromeos/edu_login/app.js

@@ -5,6 +5,7 @@
 import './edu_login_welcome.js';
 import './edu_login_parents.js';
 import './edu_login_parent_signin.js';
+import './edu_login_parent_info.js';
 import 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.m.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';

chrome/browser/resources/chromeos/edu_login/edu_login_button.html

 <style>
-  cr-button {
-    position: absolute;
-    right: 32px;
-  }
-
   :host([button-type='next']) cr-button {
     padding-inline-end: 10px;
   }
 
   :host([button-type='back']) cr-button {
-    left: 32px;
     padding-inline-start: 10px;
-    right: auto;
-  }
-
-  :host-context([dir='rtl']) cr-button {
-    left: 32px;
-    right: auto;
-  }
-
-  :host-context([dir='rtl']):host([button-type='back']) cr-button {
-    left: auto;
-    right: 32px;
   }
 </style>
 <cr-button class$="[[getClass_(buttonType)]]" on-tap="onTap_"

chrome/browser/resources/chromeos/edu_login/edu_login_css.html

 <template>
   <style include="cr-shared-style cros-color-overrides">
+    :host {
+      --grey-border: 1px solid var(--google-grey-300);
+    }
+
     h1 {
       font-size: 2em;
       font-weight: normal;
@@ -49,5 +53,15 @@
       border-radius: 50%;
       flex-shrink: 0;
     }
+
+    span[slot='buttons'] {
+      display: flex;
+      width: 100%;
+    }
+
+    edu-login-button[button-type='ok'],
+    edu-login-button[button-type='next'] {
+      margin-inline-start: auto;
+    }
   </style>
 </template>

chrome/browser/resources/chromeos/edu_login/edu_login_parent_info.html

+<style include="edu-login-css">
+  .info-container {
+    margin-inline-start: 20px;
+  }
+
+  .info-item {
+    display: flex;
+    flex: auto;
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+
+  .info-item:not(:last-child) {
+    border-bottom: var(--grey-border);
+  }
+
+  .info-icon {
+    flex-basis: 24px;
+    padding-top: 10px;
+  }
+
+  .info-title {
+    flex: 1;
+    padding-inline-start: 24px;
+  }
+</style>
+
+<edu-login-template>
+  <span slot="main">
+    <div class="main-padding">
+      <if expr="_google_chrome">
+        <img id="google-full-logo" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
+          alt="">
+      </if>
+
+      <h1>$i18n{parentInfoTitle}</h1>
+
+      <p class="secondary">$i18n{parentInfoBody}</p>
+
+      <div class="info-container secondary">
+        <div class="info-item">
+          <iron-icon icon="edu-login-icons:child-account-icon"
+              class="info-icon">
+          </iron-icon>
+          <span class="info-title">
+            <p>$i18n{parentInfoParentSettingsText}</p>
+          </span>
+        </div>
+
+        <div class="info-item">
+          <iron-icon icon="edu-login-icons:lock-icon" class="info-icon">
+          </iron-icon>
+          <span class="info-title">
+            <p>$i18nRaw{parentInfoDataProtectionText}</p>
+          </span>
+        </div>
+
+        <div class="info-item">
+          <iron-icon icon="cr:info-outline" class="info-icon"></iron-icon>
+          <span class="info-title">
+            <p>$i18nRaw{parentInfoResourcesAvailabilityText}</p>
+          </span>
+        </div>
+      </div>
+    </div>
+  </span>
+  <span slot="buttons">
+    <edu-login-button button-type="next">
+    </edu-login-button>
+  </span>
+ </edu-login-template>

chrome/browser/resources/chromeos/edu_login/edu_login_parent_info.js

+// Copyright 2020 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.
+
+import './edu_login_css.js';
+import './edu_login_template.js';
+import './edu_login_button.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+Polymer({
+  is: 'edu-login-parent-info',
+
+  _template: html`{__html_template__}`,
+
+  listeners: {
+    'view-enter-finish': 'viewIsActive_',
+  },
+
+  /**
+   * Called when current view becomes active. Update the contents to set correct
+   * scollable classes.
+   * @private
+   */
+  viewIsActive_() {
+    this.$$('edu-login-template').updateScrollableContents();
+  }
+});

chrome/browser/resources/chromeos/edu_login/edu_login_parent_signin.html

 <style include="edu-login-css">
-  :host {
-    --grey-border: 1px solid var(--google-grey-300);
-  }
-
   .account-selection-container {
     align-items: center;
     border: var(--grey-border);

chrome/browser/resources/chromeos/edu_login/edu_login_template.html

 <style>
+  :host {
+    overflow-y: hidden;
+    --background-gradient-0: linear-gradient(0deg,
+        rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+        rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+    --background-gradient-180: linear-gradient(180deg,
+        rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+        rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+  }
+
   .main {
-    height: calc(100% - 60px);
+    height: calc(100% - 90px);
+    overflow-y: auto;
+  }
+
+  .main[scrollable].can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
+    background: var(--background-gradient-0);
+  }
+
+  .main[scrollable].can-scroll.is-scrolled:not(.scrolled-to-bottom) {
+    background: var(--background-gradient-0), var(--background-gradient-180);
+  }
+
+  .main[scrollable].is-scrolled.scrolled-to-bottom {
+    background: var(--background-gradient-180);
   }
 
   .footer {
-    height: 60px;
+    align-items: center;
+    display: flex;
+    height: 90px;
     padding-inline-end: 32px;
     padding-inline-start: 32px;
   }
 </style>
-<div class="main">
+<div class="main" scrollable>
   <slot name="main"></slot>
 </div>
 <div class="footer">

chrome/browser/resources/chromeos/edu_login/edu_login_template.js

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {CrScrollableBehavior} from 'chrome://resources/cr_elements/cr_scrollable_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 Polymer({
   is: 'edu-login-template',
 
   _template: html`{__html_template__}`,
+
+  behaviors: [CrScrollableBehavior],
 });

chrome/browser/resources/chromeos/edu_login/icons.html

@@ -3,6 +3,8 @@
     <defs>
       <g id="show-password-icon"><path d="M10.58,7.25l1.56,1.56c1.38,0.07,2.47,1.17,2.54,2.54l1.56,1.56C16.4,12.47,16.5,12,16.5,11.5C16.5,9.02,14.48,7,12,7 C11.5,7,11.03,7.1,10.58,7.25z"></path><path d="M12,6c3.79,0,7.17,2.13,8.82,5.5c-0.64,1.32-1.56,2.44-2.66,3.33l1.42,1.42c1.51-1.26,2.7-2.89,3.43-4.74 C21.27,7.11,17,4,12,4c-1.4,0-2.73,0.25-3.98,0.7L9.63,6.3C10.4,6.12,11.19,6,12,6z"></path><path d="M16.43,15.93l-1.25-1.25l-1.27-1.27l-3.82-3.82L8.82,8.32L7.57,7.07L6.09,5.59L3.31,2.81L1.89,4.22l2.53,2.53 C2.92,8.02,1.73,9.64,1,11.5C2.73,15.89,7,19,12,19c1.4,0,2.73-0.25,3.98-0.7l4.3,4.3l1.41-1.41l-3.78-3.78L16.43,15.93z M11.86,14.19c-1.38-0.07-2.47-1.17-2.54-2.54L11.86,14.19z M12,17c-3.79,0-7.17-2.13-8.82-5.5c0.64-1.32,1.56-2.44,2.66-3.33 l1.91,1.91C7.6,10.53,7.5,11,7.5,11.5c0,2.48,2.02,4.5,4.5,4.5c0.5,0,0.97-0.1,1.42-0.25l0.95,0.95C13.6,16.88,12.81,17,12,17z"></path></g>
       <g id="hide-password-icon"><path d="M12,7c-2.48,0-4.5,2.02-4.5,4.5S9.52,16,12,16s4.5-2.02,4.5-4.5S14.48,7,12,7z M12,14.2c-1.49,0-2.7-1.21-2.7-2.7 c0-1.49,1.21-2.7,2.7-2.7s2.7,1.21,2.7,2.7C14.7,12.99,13.49,14.2,12,14.2z"></path><path d="M12,4C7,4,2.73,7.11,1,11.5C2.73,15.89,7,19,12,19s9.27-3.11,11-7.5C21.27,7.11,17,4,12,4z M12,17 c-3.79,0-7.17-2.13-8.82-5.5C4.83,8.13,8.21,6,12,6s7.17,2.13,8.82,5.5C19.17,14.87,15.79,17,12,17z"></g>
+      <g id="child-account-icon"><circle cx="12" cy="13.49" r="1.5"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 2.5c1.24 0 2.25 1.01 2.25 2.25S13.24 9 12 9 9.75 7.99 9.75 6.75 10.76 4.5 12 4.5zm5 10.56v2.5c-.45.41-.96.77-1.5 1.05v-.68c0-.34-.17-.65-.46-.92-.65-.62-1.89-1.02-3.04-1.02-.96 0-1.96.28-2.65.73l-.17.12-.21.17c.78.47 1.63.72 2.54.82l1.33.15c.37.04.66.36.66.75 0 .29-.16.53-.4.66-.28.15-.64.09-.95.09-.35 0-.69-.01-1.03-.05-.5-.06-.99-.17-1.46-.33-.49-.16-.97-.38-1.42-.64-.22-.13-.44-.27-.65-.43l-.31-.24c-.04-.02-.28-.18-.28-.23v-4.28c0-1.58 2.63-2.78 5-2.78s5 1.2 5 2.78v1.78z"></path></g>
+      <g id="lock-icon"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path></g>
     </defs>
   </svg>
 </iron-iconset-svg>

chrome/browser/ui/webui/signin/inline_login_ui.cc

@@ -76,6 +76,18 @@ void AddEduStrings(content::WebUIDataSource* source,
                              IDS_EDU_LOGIN_PARENT_SIGNIN_PASSWORD_HIDE);
   source->AddString("parentSigninAccountRecoveryUrl",
                     chrome::kAccountRecoveryURL);
+
+  source->AddLocalizedString("parentInfoTitle", IDS_EDU_LOGIN_INFO_TITLE);
+  source->AddLocalizedString("parentInfoBody", IDS_EDU_LOGIN_INFO_BODY);
+  source->AddLocalizedString("parentInfoParentSettingsText",
+                             IDS_EDU_LOGIN_INFO_PARENT_SETTINGS);
+  source->AddString(
+      "parentInfoDataProtectionText",
+      l10n_util::GetStringFUTF16(
+          IDS_EDU_LOGIN_INFO_DATA_PROTECTION,
+          base::ASCIIToUTF16(chrome::kClassroomSigninLearnMoreURL)));
+  source->AddLocalizedString("parentInfoResourcesAvailabilityText",
+                             IDS_EDU_LOGIN_INFO_RESOURCES_AVAILABILITY);
 }
 #endif  // defined(OS_CHROMEOS)
 
@@ -120,6 +132,8 @@ content::WebUIDataSource* CreateWebUIDataSource() {
                           IDR_EDU_LOGIN_EDU_LOGIN_PARENTS_JS);
   source->AddResourcePath("edu_login_parent_signin.js",
                           IDR_EDU_LOGIN_EDU_LOGIN_PARENT_SIGNIN_JS);
+  source->AddResourcePath("edu_login_parent_info.js",
+                          IDR_EDU_LOGIN_EDU_LOGIN_PARENT_INFO_JS);
 
   source->AddResourcePath("test_loader.js", IDR_WEBUI_JS_TEST_LOADER);
   source->AddResourcePath("test_loader.html", IDR_WEBUI_HTML_TEST_LOADER);

chrome/common/url_constants.cc

@@ -323,6 +323,9 @@ const char kChromeOSGestureEducationHelpURL[] =
 const char kChromePaletteHelpURL[] =
     "https://support.google.com/chromebook?p=stylus_help";
 
+const char kClassroomSigninLearnMoreURL[] =
+    "https://support.google.com/edu/classroom/answer/6072460";
+
 const char kCrosScheme[] = "cros";
 
 const char kCupsPrintLearnMoreURL[] =

chrome/common/url_constants.h

@@ -276,6 +276,9 @@ extern const char kChromeOSGestureEducationHelpURL[];
 // Palette help link for Chrome.
 extern const char kChromePaletteHelpURL[];
 
+// The URL for "How do I sign in to Classroom?" page.
+extern const char kClassroomSigninLearnMoreURL[];
+
 extern const char kCrosScheme[];
 
 extern const char kCupsPrintLearnMoreURL[];