Settings [DICE]: split the account row into its own element

This CL adds new elements to create self-contained sync-account element.
When a profile is DICE-enabled, the original avatar row is hidden,
and this new row will be shown instead.

Despite the new element and layout, the new avatar row will look
similar to the existing one after this CL. The intention is to make it
possible for follow-up CLs to actually change the account sync flow to
achieve the DICE design without affecting the existing avatar row for
non-DICE-enabled profiles.

Bug: 800970
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9325a8d5986d0513e9d63bdac2ee9055823f7eba
Reviewed-on: https://chromium-review.googlesource.com/862982
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532701}

chrome/app/settings_strings.grdp

@@ -3023,6 +3023,12 @@
     <message name="IDS_SETTINGS_PEOPLE_DOMAIN_MANAGED_PROFILE" desc="Provides the domain information for domain-managed accounts.">
       Managed by <ph name="DOMAIN">$1<ex>example.com</ex></ph>
     </message>
+    <message name="IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT" desc="The text displayed to prompt users to sign in to chrome.">
+      Web browsing with Google smarts
+    </message>
+    <message name="IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT_SECONDARY" desc="The secondary text displayed to prompt users to sign in to chrome.">
+      Sync for a personalized browsing experience, across your devices
+    </message>
     <message name="IDS_SETTINGS_SYNC_DISCONNECT_MANAGED_PROFILE_EXPLANATION" desc="The text to display in the 'Sign out of Chrome' dialog to stop syncing for managed profiles.">
       Because this account is managed by <ph name="DOMAIN">$1<ex>example.com</ex></ph>, your bookmarks, history, passwords, and other settings will be cleared from this device. However, your data will remain stored in your Google Account and can be managed on <ph name="BEGIN_LINK">&lt;a href="$2" target=&quot;_blank&quot;&gt;<ex>&lt;a href="$2" target=&quot;_blank&quot;&gt;</ex></ph>Google Dashboard<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>.
     </message>

chrome/browser/resources/settings/people_page/compiled_resources2.gyp

@@ -255,5 +255,17 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'sync_account_control',
+      'dependencies': [
+        '../compiled_resources2.gyp:route',
+        '../prefs/compiled_resources2.gyp:prefs_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:icon',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
+        'profile_info_browser_proxy',
+        'sync_browser_proxy',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }

chrome/browser/resources/settings/people_page/people_page.html

@@ -33,6 +33,7 @@
 <link rel="import" href="users_page.html">
 </if>
 <if expr="not chromeos">
+<link rel="import" href="sync_account_control.html">
 <link rel="import" href="import_data_dialog.html">
 <link rel="import" href="manage_profile.html">
 </if>
@@ -46,9 +47,7 @@
       }
 
       #profile-icon {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
+        background: center / cover no-repeat;
         border-radius: 20px;
         flex-shrink: 0;
         height: 40px;
@@ -102,66 +101,83 @@
     <settings-animated-pages id="pages" section="people"
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
-        <div id="picture-subpage-trigger" class="settings-box first two-line">
-          <template is="dom-if" if="[[syncStatus]]">
-            <div id="profile-icon" on-tap="onPictureTap_" actionable
-                style="background-image: [[getIconImageSet_(profileIconUrl_)]]">
-            </div>
 <if expr="not chromeos">
-            <div class="middle two-line no-min-width"
-                on-tap="onProfileTap_" actionable>
-</if>
-<if expr="chromeos">
-            <div class="middle two-line no-min-width" on-tap="onPictureTap_"
-                actionable>
+        <template is="dom-if" if="[[diceEnabled_]]">
+          <div class="settings-box first two-line"
+              hidden="[[syncStatus.signedIn]]">
+            <div class="start">
+              <div>$i18n{peopleSignInPrompt}</div>
+              <div class="secondary">$i18n{peopleSignInPromptSecondary}</div>
+            </div>
+          </div>
+          <settings-sync-account-control></settings-sync-account-control>
+        </template>
+        <template is="dom-if" if="[[!diceEnabled_]]">
 </if>
-              <div class="flex text-elide">
-                <span id="profile-name">[[profileName_]]</span>
-                <div class="secondary" hidden="[[!syncStatus.signedIn]]">
-                  [[syncStatus.signedInUsername]]
-                </div>
+          <div id="picture-subpage-trigger" class="settings-box first two-line">
+            <template is="dom-if" if="[[syncStatus]]">
+              <div id="profile-icon" on-tap="onProfileTap_" actionable
+                  style="background-image: [[getIconImageSet_(
+                      profileIconUrl_)]]">
               </div>
+              <div class="middle two-line no-min-width" on-tap="onProfileTap_"
+                  actionable>
+                <div class="flex text-elide">
+                  <span id="profile-name">[[profileName_]]</span>
+                  <div class="secondary" hidden="[[!syncStatus.signedIn]]">
+                    [[syncStatus.signedInUsername]]
+                  </div>
+                </div>
 <if expr="not chromeos">
-              <button class="subpage-arrow" is="paper-icon-button-light"
-                  aria-label="$i18n{editPerson}"
-                  aria-describedby="profile-name"></button>
+                <button class="subpage-arrow" is="paper-icon-button-light"
+                    aria-label="$i18n{editPerson}"
+                    aria-describedby="profile-name"></button>
 </if>
 <if expr="chromeos">
-              <button class="subpage-arrow" is="paper-icon-button-light"
-                  aria-label="$i18n{changePictureTitle}"
-                  aria-describedby="profile-name"></button>
+                <button class="subpage-arrow" is="paper-icon-button-light"
+                    aria-label="$i18n{changePictureTitle}"
+                    aria-describedby="profile-name"></button>
 </if>
-            </div>
+              </div>
 <if expr="not chromeos">
-            <template is="dom-if" if="[[showSignin_(syncStatus)]]">
-              <div class="separator"></div>
-              <paper-button class="primary-button" on-tap="onSigninTap_"
-                  disabled="[[syncStatus.setupInProgress]]">
-                $i18n{syncSignin}
-              </paper-button>
-            </template>
-            <template is="dom-if" if="[[syncStatus.signedIn]]">
-              <div class="separator"></div>
-              <paper-button id="disconnectButton" class="secondary-button"
-                  on-tap="onDisconnectTap_"
-                  disabled="[[syncStatus.setupInProgress]]">
-                $i18n{syncDisconnect}
-              </paper-button>
+              <template is="dom-if" if="[[showSignin_(syncStatus)]]">
+                <div class="separator"></div>
+                <paper-button class="primary-button" on-tap="onSigninTap_"
+                    disabled="[[syncStatus.setupInProgress]]">
+                  $i18n{syncSignin}
+                </paper-button>
+              </template>
+              <template is="dom-if" if="[[syncStatus.signedIn]]">
+                <div class="separator"></div>
+                <paper-button id="disconnectButton" class="secondary-button"
+                    on-tap="onDisconnectTap_"
+                    disabled="[[syncStatus.setupInProgress]]">
+                  $i18n{syncDisconnect}
+                </paper-button>
+              </template>
+</if>
             </template>
+          </div>
+<if expr="not chromeos">
+        </template> <!-- if="[[!diceEnabled_]]" -->
 </if>
-          </template>
-        </div>
 
         <template is="dom-if" if="[[!syncStatus.signedIn]]">
-          <div class="settings-box two-line"
-              hidden="[[!syncStatus.signinAllowed]]">
-            <div class="start">
-              $i18n{syncOverview}
-              <a target="_blank" href="$i18n{syncLearnMoreUrl}">
-                $i18n{learnMore}
-              </a>
+<if expr="not chromeos">
+          <template is="dom-if" if="[[!diceEnabled_]]">
+</if>
+            <div class="settings-box two-line"
+                hidden="[[!syncStatus.signinAllowed]]">
+              <div class="start">
+                $i18n{syncOverview}
+                <a target="_blank" href="$i18n{syncLearnMoreUrl}">
+                  $i18n{learnMore}
+                </a>
+              </div>
             </div>
-          </div>
+<if expr="not chromeos">
+          </template> <!-- if="[[!diceEnabled_]]" -->
+</if>
           <div class="settings-box" hidden="[[syncStatus.signinAllowed]]">
             $i18n{syncDisabledByAdministrator}
           </div>

chrome/browser/resources/settings/people_page/people_page.js

@@ -49,16 +49,19 @@ Polymer({
 
     /**
      * The currently selected profile icon URL. May be a data URL.
+     * @private
      */
     profileIconUrl_: String,
 
     /**
      * The current profile name.
+     * @private
      */
     profileName_: String,
 
     /**
      * True if the current profile manages supervised users.
+     * @private
      */
     profileManagesSupervisedUsers_: Boolean,
 
@@ -66,16 +69,19 @@ Polymer({
      * The profile deletion warning. The message indicates the number of
      * profile stats that will be deleted if a non-zero count for the profile
      * stats is returned from the browser.
+     * @private
      */
     deleteProfileWarning_: String,
 
     /**
      * True if the profile deletion warning is visible.
+     * @private
      */
     deleteProfileWarningVisible_: Boolean,
 
     /**
      * True if the checkbox to delete the profile has been checked.
+     * @private
      */
     deleteProfile_: Boolean,
 
@@ -267,7 +273,7 @@ Polymer({
   },
 
   /** @private */
-  onPictureTap_: function() {
+  onProfileTap_: function() {
     // <if expr="chromeos">
     settings.navigateTo(settings.routes.CHANGE_PICTURE);
     // </if>
@@ -276,13 +282,6 @@ Polymer({
     // </if>
   },
 
-  // <if expr="not chromeos">
-  /** @private */
-  onProfileTap_: function() {
-    settings.navigateTo(settings.routes.MANAGE_PROFILE);
-  },
-  // </if>
-
   /** @private */
   onSigninTap_: function() {
     this.syncBrowserProxy_.startSignIn();
@@ -291,7 +290,16 @@ Polymer({
   /** @private */
   onDisconnectClosed_: function() {
     this.showDisconnectDialog_ = false;
+    // <if expr="not chromeos">
+    if (!this.diceEnabled_) {
+      // If DICE-enabled, this button won't exist here.
+      cr.ui.focusWithoutInk(assert(this.$$('#disconnectButton')));
+    }
+    // </if>
+
+    // <if expr="chromeos">
     cr.ui.focusWithoutInk(assert(this.$$('#disconnectButton')));
+    // </if>
 
     if (settings.getCurrentRoute() == settings.routes.SIGN_OUT)
       settings.navigateToPreviousRoute();

chrome/browser/resources/settings/people_page/sync_account_control.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/html/icon.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="profile_info_browser_proxy.html">
+<link rel="import" href="sync_browser_proxy.html">
+<link rel="import" href="../route.html">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="settings-sync-account-control">
+  <template>
+    <style include="settings-shared">
+      setting-box.middle {
+        /* Per spec, middle text is indented 20px in this section. */
+        -webkit-margin-start: 20px;
+      }
+
+      #profile-icon {
+        background: center / cover no-repeat;
+        border-radius: 20px;
+        flex-shrink: 0;
+        height: 40px;
+        width: 40px;
+      }
+
+      .flex {
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+    <div class="settings-box first two-line">
+      <template is="dom-if" if="[[syncStatus]]">
+        <div id="profile-icon"
+            style="background-image: [[getIcon_(profileInfo_.iconUrl)]]">
+        </div>
+        <div class="middle two-line no-min-width">
+          <div class="flex text-elide">
+            <span>[[profileInfo_.name]]</span>
+            <div class="secondary" hidden="[[!syncStatus.signedIn]]">
+              [[syncStatus.signedInUsername]]
+            </div>
+          </div>
+        </div>
+        <template is="dom-if" if="[[showSignin_(syncStatus)]]">
+          <paper-button class="primary-button" on-tap="onSigninTap_"
+              disabled="[[syncStatus.setupInProgress]]">
+            $i18n{syncSignin}
+          </paper-button>
+        </template>
+        <template is="dom-if" if="[[syncStatus.signedIn]]">
+          <div class="separator"></div>
+          <paper-button id="disconnectButton" class="secondary-button"
+              on-tap="onDisconnectTap_"
+              disabled="[[syncStatus.setupInProgress]]">
+            $i18n{syncDisconnect}
+          </paper-button>
+        </template>
+      </template>
+    </div>
+  </template>
+  <script src="sync_account_control.js"></script>
+</dom-module>

chrome/browser/resources/settings/people_page/sync_account_control.js

+// Copyright 2018 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.
+/**
+ * @fileoverview
+ * 'settings-sync-account-section' is the settings page containing sign-in
+ * settings.
+ */
+Polymer({
+  is: 'settings-sync-account-control',
+  behaviors: [WebUIListenerBehavior],
+  properties: {
+    /**
+     * The current sync status, supplied by SyncBrowserProxy.
+     * @type {?settings.SyncStatus}
+     */
+    syncStatus: Object,
+
+    /** @private {!settings.ProfileInfo} */
+    profileInfo_: Object,
+  },
+
+  /** @private {?settings.SyncBrowserProxy} */
+  syncBrowserProxy_: null,
+
+  /** @override */
+  attached: function() {
+    const profileInfoProxy = settings.ProfileInfoBrowserProxyImpl.getInstance();
+    profileInfoProxy.getProfileInfo().then(this.handleProfileInfo_.bind(this));
+    this.addWebUIListener(
+        'profile-info-changed', this.handleProfileInfo_.bind(this));
+    this.syncBrowserProxy_ = settings.SyncBrowserProxyImpl.getInstance();
+    this.syncBrowserProxy_.getSyncStatus().then(
+        this.handleSyncStatus_.bind(this));
+    this.addWebUIListener(
+        'sync-status-changed', this.handleSyncStatus_.bind(this));
+  },
+
+  /**
+   * Handler for when the profile's icon and name is updated.
+   * @private
+   * @param {!settings.ProfileInfo} info
+   */
+  handleProfileInfo_: function(info) {
+    this.profileInfo_ = info;
+  },
+
+  /**
+   * Handler for when the sync state is pushed from the browser.
+   * @param {?settings.SyncStatus} syncStatus
+   * @private
+   */
+  handleSyncStatus_: function(syncStatus) {
+    this.syncStatus = syncStatus;
+  },
+
+  /** @private */
+  onSigninTap_: function() {
+    this.syncBrowserProxy_.startSignIn();
+  },
+
+  /** @private */
+  onDisconnectTap_: function() {
+    /* This will route to people_page's disconnect dialog. */
+    settings.navigateTo(settings.routes.SIGN_OUT);
+  },
+
+  /**
+   * @param {string} iconUrl
+   * @return {string} A CSS image-set for multiple scale factors.
+   * @private
+   */
+  getIcon_: function(iconUrl) {
+    return cr.icon.getImage(iconUrl);
+  },
+
+  /**
+   * @param {!settings.SyncStatus} syncStatus
+   * @return {boolean} Whether to show the "Sign in to Chrome" button.
+   * @private
+   */
+  showSignin_: function(syncStatus) {
+    return !!syncStatus.signinAllowed && !syncStatus.signedIn;
+  },
+});
\ No newline at end of file

chrome/browser/resources/settings/settings_resources.grd

@@ -701,6 +701,12 @@
                  preprocess="true"
                  allowexternalscript="true" />
       <if expr="not chromeos">
+        <structure name="IDR_SETTINGS_PEOPLE_PAGE_SYNC_ACCOUNT_CONTROL_HTML"
+                   file="people_page/sync_account_control.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_PEOPLE_PAGE_SYNC_ACCOUNT_CONTROL_JS"
+                   file="people_page/sync_account_control.js"
+                   type="chrome_html" />
         <structure name="IDR_SETTINGS_PEOPLE_PAGE_IMPORT_DATA_DIALOG_HTML"
                    file="people_page/import_data_dialog.html"
                    type="chrome_html" />

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -1423,6 +1423,9 @@ void AddPeopleStrings(content::WebUIDataSource* html_source) {
     {"videoModeAccessibleText", IDS_SETTINGS_VIDEO_MODE_ACCESSIBLE_TEXT},
 #else   // !defined(OS_CHROMEOS)
     {"domainManagedProfile", IDS_SETTINGS_PEOPLE_DOMAIN_MANAGED_PROFILE},
+    {"peopleSignInPrompt", IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT},
+    {"peopleSignInPromptSecondary",
+     IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT_SECONDARY},
     {"editPerson", IDS_SETTINGS_EDIT_PERSON},
     {"profileNameAndPicture", IDS_SETTINGS_PROFILE_NAME_AND_PICTURE},
     {"showShortcutLabel", IDS_SETTINGS_PROFILE_SHORTCUT_TOGGLE_LABEL},

chrome/test/data/webui/settings/people_page_test.js

@@ -363,7 +363,9 @@ cr.define('settings_people_page', function() {
         Polymer.dom.flush();
       });
 
-      teardown(function() { peoplePage.remove(); });
+      teardown(function() {
+        peoplePage.remove();
+      });
 
       test('ManageProfileRow', function() {
         assertTrue(!!peoplePage.$$('#edit-profile'));