[Lacros] Update first run experience UI

Implement new mocks for the Lacros first run experience UI dialogs. - Change some strings - Remove background color for the header - Put enterprise disclaimer in the bottom left - Change font sizes - Change background image Fixed: 1324573 Change-Id: Ie36c16ca01fab2aea450853a86a506f544ec16e6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3641864 Reviewed-by: David Roger <droger@chromium.org> Commit-Queue: Fabian Sommer <fabiansommer@chromium.org> Cr-Commit-Position: refs/heads/main@{#1002590}
chromium · May 12, 2022 · 6c3e365 · 6c3e365
1 parent debd35e
commit 6c3e365
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 63 deletions.
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
@@ -9520,6 +9520,9 @@ Check your passwords anytime in <ph name="GOOGLE_PASSWORD_MANAGER">$1<ex>Google
         Sync settings
       </message>
       <if expr="chromeos_lacros">
+        <message name="IDS_SYNC_CONFIRMATION_TITLE_LACROS_NON_FORCED" desc="Title of the sync confirmation dialog/screen on lacros when sync is not forced.">
+          Turn on Chrome browser sync?
+        </message>
         <message name="IDS_SYNC_CONFIRMATION_TITLE_LACROS" desc="Title of the sync confirmation dialog/screen on lacros.">
           Chrome browser sync is on
         </message>

diff --git a/chrome/app/generated_resources_grd/IDS_SYNC_CONFIRMATION_TITLE_LACROS_NON_FORCED.png.sha1 b/chrome/app/generated_resources_grd/IDS_SYNC_CONFIRMATION_TITLE_LACROS_NON_FORCED.png.sha1
@@ -0,0 +1 @@
+726e2317363b54d1d4bce3f45d083e180bb3bd81
diff --git a/chrome/app/profiles_strings.grdp b/chrome/app/profiles_strings.grdp
@@ -698,13 +698,13 @@
         Welcome to Chrome
       </message>
       <message name="IDS_PRIMARY_PROFILE_FIRST_RUN_SUBTITLE" desc="Subtitle of the landing screen in first run experience for the primary profile. The screen promotes Chrome sync.">
-        Access your Chrome browser stuff from <ph name="ACCOUNT_EMAIL">$1<ex>Jane.Doe@gmail.com</ex></ph>
+        Get your Chrome browser stuff from <ph name="ACCOUNT_EMAIL">$1<ex>Jane.Doe@gmail.com</ex></ph>
       </message>
       <message name="IDS_PRIMARY_PROFILE_FIRST_RUN_NEXT_BUTTON_LABEL" desc="Label of the 'next' button of the landing screen in first run experience for the primary profile. The screen promotes Chrome sync.">
         Let's go
       </message>
       <message name="IDS_PRIMARY_PROFILE_FIRST_RUN_SESSION_MANAGED_BY_DESCRIPTION" desc="Disclaimer on the landing screen in first run experience for the primary profile, informing that the session is managed by an administrator.">
-        Your account is managed by <ph name="MANAGER_NAME">$1<ex>example.com</ex></ph>. Your administrator can see and edit this Chrome browser profile and its data. Your data includes bookmarks, history, and passwords.
+        Your account is managed by <ph name="MANAGER_NAME">$1<ex>example.com</ex></ph>. Your administrator can see and edit this Chrome browser profile and its data like bookmarks, history, and passwords.
       </message>
     </if>
 

diff --git a/...ofiles_strings_grdp/IDS_PRIMARY_PROFILE_FIRST_RUN_SESSION_MANAGED_BY_DESCRIPTION.png.sha1 b/...ofiles_strings_grdp/IDS_PRIMARY_PROFILE_FIRST_RUN_SESSION_MANAGED_BY_DESCRIPTION.png.sha1
@@ -1 +1 @@
-0da5976f4d66c817c3ded826cb4070505364fd1d
+326bf830998bb6dedf723e17f4a5bb468a1872f1
diff --git a/chrome/app/profiles_strings_grdp/IDS_PRIMARY_PROFILE_FIRST_RUN_SUBTITLE.png.sha1 b/chrome/app/profiles_strings_grdp/IDS_PRIMARY_PROFILE_FIRST_RUN_SUBTITLE.png.sha1
@@ -1 +1 @@
-0da5976f4d66c817c3ded826cb4070505364fd1d
+326bf830998bb6dedf723e17f4a5bb468a1872f1
diff --git a/...e/browser/resources/signin/enterprise_profile_welcome/enterprise_profile_welcome_app.html b/...e/browser/resources/signin/enterprise_profile_welcome/enterprise_profile_welcome_app.html
@@ -5,7 +5,7 @@
     --banner-size: auto;
     --footer-margin: 40px;
     --content-container-margin-bottom: calc(48px + var(--footer-margin));
-    --content-container-margin-top: 104px;
+    --content-container-margin-top: 72px;
     --info-box-margin-inline: auto;
     --info-box-margin-top: 32px;
     --info-box-width: 514px;
@@ -42,7 +42,6 @@
   }
 
   #headerContainer {
-    background-color: var(--header-background-color);
     height: var(--banner-height);
     position: relative;
     width: 100%;
@@ -102,29 +101,35 @@
   }
 
   #contentContainer {
+    font-size: 14px;
+    line-height: 20px;
     margin-bottom: var(--content-container-margin-bottom);
     margin-inline: auto;
     margin-top: var(--content-container-margin-top);
     text-align: center;
+    width: 382px;
   }
 
   #contentContainer h2 {
-    font-size: 1.85em;
-    font-weight: normal;
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 32px;
     margin-bottom: 8px;
   }
 
   .info-box {
     align-items: center;
-    border: 1px solid var(--google-grey-200);
-    border-radius: 8px;
+    bottom: 0;
     color: var(--google-grey-700);
     display: flex;
     flex-direction: row;
+    font-size: 11px;
+    line-height: 16px;
     margin-inline: var(--info-box-margin-inline);
     margin-top: var(--info-box-margin-top);
     padding-block: 12px;
     padding-inline-end: 18px;
+    position: absolute;
     width: var(--info-box-width);
   }
 
@@ -175,7 +180,6 @@
     }
 
     .info-box {
-      border-color: var(--google-grey-600);
       color: var(--google-grey-100);
     }
 
@@ -206,17 +210,17 @@ <h2 id="title">
       [[subtitle_]]
     </p>
   </template>
-  <template is="dom-if" if="[[enterpriseInfo_]]">
-    <div class="info-box">
-      <div class="icon-container">
-        <iron-icon icon="cr:domain"></iron-icon>
-      </div>
-      <p id="enterpriseInfo" >
-        [[enterpriseInfo_]]
-      </p>
-    </div>
-  </template>
 </div>
+<template is="dom-if" if="[[enterpriseInfo_]]">
+  <div class="info-box">
+    <div class="icon-container">
+      <iron-icon icon="cr:domain"></iron-icon>
+    </div>
+    <p id="enterpriseInfo" >
+      [[enterpriseInfo_]]
+    </p>
+  </div>
+</template>
 <template is="dom-if" if="[[showLinkDataCheckbox_]]">
   <cr-checkbox id="linkData" checked="{{linkData_}}">
     <div>$i18n{linkDataText}</div>

diff --git a/chrome/browser/resources/signin/enterprise_profile_welcome/enterprise_profile_welcome_app.ts b/chrome/browser/resources/signin/enterprise_profile_welcome/enterprise_profile_welcome_app.ts
@@ -152,7 +152,6 @@ export class EnterpriseProfileWelcomeAppElement extends
   }
 
   private setProfileInfo_(info: EnterpriseProfileInfo) {
-    this.style.setProperty('--header-background-color', info.backgroundColor);
     this.pictureUrl_ = info.pictureUrl;
     this.showEnterpriseBadge_ = info.showEnterpriseBadge;
     this.title_ = info.title;

diff --git a/...n/enterprise_profile_welcome/images/enterprise_profile_welcome_illustration.svg b/...n/enterprise_profile_welcome/images/enterprise_profile_welcome_illustration.svg
diff --git a/chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html b/chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html
@@ -5,7 +5,7 @@
     --banner-size: auto;
     --confirmation-description-margin-inline: auto;
     --content-container-margin-bottom: calc(32px + 2 * var(--footer-margin));
-    --content-container-margin-top: 104px;
+    --content-container-margin-top: 72px;
     --footer-margin: 40px;
     --text-font-size: 1.16em;
     color: var(--cr-primary-text-color);
@@ -122,7 +122,6 @@
   }
 
   #headerContainer {
-    background-color: var(--theme-frame-color);
     height: var(--banner-height);
     position: relative;
     width: 100%;
@@ -193,12 +192,14 @@
   }
 
   #contentContainer h2 {
-    font-size: 1.85em;
-    font-weight: normal;
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 32px;
   }
 
   #confirmationDescription {
-    font-size: var(--text-font-size);
+    font-size: 14px;
+    line-height: 20px;
     margin-inline: var(--confirmation-description-margin-inline);
     margin-top: 16px;
     max-width: 516px;

diff --git a/chrome/browser/ui/webui/signin/sync_confirmation_ui.cc b/chrome/browser/ui/webui/signin/sync_confirmation_ui.cc
@@ -116,6 +116,8 @@ void SyncConfirmationUI::InitializeForSyncConfirmation(
     title_id = IDS_SYNC_CONFIRMATION_TITLE_LACROS;
     info_title_id = IDS_SYNC_CONFIRMATION_SYNC_INFO_TITLE_LACROS;
     confirm_label_id = IDS_DONE;
+  } else {
+    title_id = IDS_SYNC_CONFIRMATION_TITLE_LACROS_NON_FORCED;
   }
 #endif
   AddStringResource(source, "syncConfirmationTitle", title_id);

diff --git a/chrome/test/data/webui/signin/enterprise_profile_welcome_test.ts b/chrome/test/data/webui/signin/enterprise_profile_welcome_test.ts
@@ -49,16 +49,6 @@ suite('EnterpriseProfileWelcomeTest', function() {
     assertEquals(expectedUrl, img.src);
   }
 
-  /**
-   * Checks that the expected header color is displayed.
-   */
-  function checkHeaderColor(expectedColor: string) {
-    assertTrue(isChildVisible(app, '#headerContainer'));
-    const headerElement = app.shadowRoot!.querySelector('#headerContainer')!;
-    assertEquals(
-        expectedColor, getComputedStyle(headerElement).backgroundColor);
-  }
-
   test('proceed', async function() {
     assertTrue(isChildVisible(app, '#proceedButton'));
     app.$.proceedButton.click();
@@ -129,7 +119,6 @@ suite('EnterpriseProfileWelcomeTest', function() {
     checkTextValues('title', 'subtitle', 'enterprise_info', 'proceed_label');
     checkImageUrl(AVATAR_URL_1);
     assertFalse(isChildVisible(app, '.work-badge'));
-    checkHeaderColor('rgb(255, 0, 0)');
 
     // Update the values.
     webUIListenerCallback('on-profile-info-changed', {
@@ -149,6 +138,5 @@ suite('EnterpriseProfileWelcomeTest', function() {
     checkImageUrl(AVATAR_URL_2);
     assertTrue(isChildVisible(app, '.work-badge'));
     assertFalse(isChildVisible(app, '#cancelButton'));
-    checkHeaderColor('rgb(0, 255, 0)');
   });
 });