Add passwords.google.com link to Device Passwords page

Mock: https://screenshot.googleplex.com/opD1RHQ3qmN
Implementation: https://storage.cloud.google.com/chromium-translation-screenshots/34c070526b05e911eec3972b16c715c065ac4d96

Bug: 1049141
Change-Id: Ie93f72ec1d6d95c8f517fc2aad75873652bacddd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2257421
Commit-Queue: Victor Vianna <victorvianna@google.com>
Reviewed-by: Marc Treib <treib@chromium.org>
Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Reviewed-by: Friedrich [CET] <fhorschig@chromium.org>
Cr-Commit-Position: refs/heads/master@{#781293}

chrome/app/settings_strings.grdp

@@ -533,6 +533,9 @@
   <message name="IDS_SETTINGS_PASSWORDS_MANAGE_PASSWORDS" desc="Shown in the passwords section of settings. Descriptive text to inform that passwords can be accessed online. Has a link.">
     View and manage saved passwords in your <ph name="BEGIN_LINK">&lt;a is="action-link" href="$1" target="_blank"&gt;</ph>Google Account<ph name="END_LINK">&lt;/a&gt;</ph>
   </message>
+  <message name="IDS_SETTINGS_PASSWORDS_MANAGE_PASSWORDS_PLAINTEXT" desc="Shown in the passwords section of settings. Descriptive text to inform that passwords can be accessed online.">
+    View and manage saved passwords in your Google Account
+  </message>
   <message name="IDS_SETTINGS_PASSWORDS_OPT_IN_ACCOUNT_STORAGE_BODY" desc="Description before a button in the passwords section of settings which triggers opt in to the account-scoped password storage.">
     You can also show passwords from your <ph name="BEGIN_LINK">&lt;a is="action-link" href="$1" target="_blank"&gt;</ph>Google Account<ph name="END_LINK">&lt;/a&gt;</ph> here
   </message>

chrome/app/settings_strings_grdp/IDS_SETTINGS_PASSWORDS_MANAGE_PASSWORDS_PLAINTEXT.png.sha1

+34c070526b05e911eec3972b16c715c065ac4d96
\ No newline at end of file

chrome/browser/resources/settings/autofill_page/BUILD.gn

@@ -291,10 +291,15 @@ js_library("passwords_device_section") {
     ":password_list_item",
     ":password_manager_proxy",
     ":passwords_list_handler",
+    "..:i18n_setup",
+    "..:open_window_proxy",
     "..:route",
+    "../people_page:profile_info_browser_proxy.m",
     "//third_party/polymer/v3_0/components-chromium/iron-a11y-keys-behavior:iron-a11y-keys-behavior",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:icon.m",
     "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
 }
 

chrome/browser/resources/settings/autofill_page/passwords_device_section.html

 <style include="cr-shared-style settings-shared iron-flex passwords-shared">
+  #profileIcon {
+    background: center / cover no-repeat;
+    border-radius: 20px;
+    flex-shrink: 0;
+    height: 40px;
+    margin-inline-end: 16px;
+    width: 40px;
+  }
+
+  #manageAccountPasswordsBanner {
+    border: 2px solid var(--google-grey-200);
+    border-radius: 10px;
+    cursor: pointer;
+    margin: 10px 20px;
+    padding: 0 10px;
+  }
 </style>
 <div class="cr-row first">
   <h2 class="flex">
@@ -48,3 +64,12 @@
     </div>
   </div>
 </passwords-list-handler>
+<div id="manageAccountPasswordsBanner" class="cr-row two-line list-item"
+    on-click="onManageAccountPasswordsClicked_">
+  <div id="profileIcon" style="background-image: [[profileIcon_]]"></div>
+  <div class="flex cr-padded-text">
+    <div>$i18nRaw{managePasswordsPlaintext}</div>
+    <div class="secondary">[[accountEmail_]]</div>
+  </div>
+  <cr-icon-button iron-icon="cr:open-in-new"></cr-icon-button>
+</div>

chrome/browser/resources/settings/autofill_page/passwords_device_section.js

@@ -18,11 +18,17 @@ import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classe
 import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import {getImage} from 'chrome://resources/js/icon.m.js';
 import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
 import {IronA11yKeysBehavior} from 'chrome://resources/polymer/v3_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {GlobalScrollTargetBehavior} from '../global_scroll_target_behavior.m.js';
+import {loadTimeData} from '../i18n_setup.js';
+import {OpenWindowProxyImpl} from '../open_window_proxy.js';
+import {ProfileInfo, ProfileInfoBrowserProxyImpl} from '../people_page/profile_info_browser_proxy.m.js';
+import {StoredAccount, SyncBrowserProxyImpl} from '../people_page/sync_browser_proxy.m.js';
 import {routes} from '../route.js';
 
 import {MergePasswordsStoreCopiesBehavior} from './merge_passwords_store_copies_behavior.js';
@@ -53,6 +59,7 @@ Polymer({
     I18nBehavior,
     IronA11yKeysBehavior,
     GlobalScrollTargetBehavior,
+    WebUIListenerBehavior,
   ],
 
   properties: {
@@ -107,6 +114,35 @@ Polymer({
     /** @private */
     listBlurred_: Boolean,
 
+    /**
+     * The currently selected profile icon as CSS image set.
+     * @private
+     */
+    profileIcon_: String,
+
+    /** @private */
+    accountEmail_: String,
+
+  },
+
+  /** @override */
+  attached() {
+    /** @type {!function(!ProfileInfo):void} */
+    const extractIconFromProfileInfo = profileInfo => {
+      this.profileIcon_ = getImage(profileInfo.iconUrl);
+    };
+    ProfileInfoBrowserProxyImpl.getInstance().getProfileInfo().then(
+        extractIconFromProfileInfo);
+    this.addWebUIListener('profile-info-changed', extractIconFromProfileInfo);
+
+    /** @type {!function(!Array<!StoredAccount>):void} */
+    const extractFirstStoredAccountEmail = accounts => {
+      this.accountEmail_ = accounts.length > 0 ? accounts[0].email : '';
+    };
+    SyncBrowserProxyImpl.getInstance().getStoredAccounts().then(
+        extractFirstStoredAccountEmail);
+    this.addWebUIListener(
+        'stored-accounts-updated', extractFirstStoredAccountEmail);
   },
 
   /**
@@ -178,4 +214,10 @@ Polymer({
       event.preventDefault();
     }
   },
+
+  onManageAccountPasswordsClicked_() {
+    OpenWindowProxyImpl.getInstance().openURL(
+        loadTimeData.getString('googlePasswordManagerUrl'));
+  },
+
 });

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

@@ -956,6 +956,8 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_PASSWORDS_EXPORTING_FAILURE_TIP_ENOUGH_SPACE},
       {"exportPasswordsFailTipsAnotherFolder",
        IDS_SETTINGS_PASSWORDS_EXPORTING_FAILURE_TIP_ANOTHER_FOLDER},
+      {"managePasswordsPlaintext",
+       IDS_SETTINGS_PASSWORDS_MANAGE_PASSWORDS_PLAINTEXT},
       {"savedToThisDeviceOnly",
        IDS_SETTINGS_PAYMENTS_SAVED_TO_THIS_DEVICE_ONLY}};