[Autofill Home] Add New Entry Points and Icons

This change implement adding new entry points for the new Autofill Home.
Also it adds the required icons. Both of these changes are gated behind
a flag.

Bug: 854562
Change-Id: Iee5b029045b59875ad4d98bffb856ddc9945171a
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Reviewed-on: https://chromium-review.googlesource.com/1111853
Commit-Queue: Jan Wilken Dörrie <jdoerrie@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#571079}

chrome/browser/resources/settings/basic_page/basic_page.html

@@ -140,6 +140,7 @@
           <settings-section page-title="$i18n{peoplePageTitle}"
               section="people">
             <settings-people-page prefs="{{prefs}}"
+                autofill-home-enabled="[[autofillHomeEnabled]]"
                 page-visibility="[[pageVisibility]]">
             </settings-people-page>
           </settings-section>
@@ -257,8 +258,9 @@
                 </settings-privacy-page>
               </settings-section>
             </template>
-            <template is="dom-if"
-                if="[[showPage_(pageVisibility.passwordsAndForms)]]" restamp>
+            <template is="dom-if" if="[[shouldShowPasswordsAndForms_(
+                autofillHomeEnabled, pageVisibility)]]"
+                restamp>
               <settings-section
                   page-title="$i18n{passwordsAndAutofillPageTitle}"
                   section="passwordsAndForms">

chrome/browser/resources/settings/basic_page/basic_page.js

@@ -28,6 +28,10 @@ Polymer({
     havePlayStoreApp: Boolean,
     // </if>
 
+    // TODO(jdoerrie): https://crbug.com/854562.
+    // Remove once Autofill Home is launched.
+    autofillHomeEnabled: Boolean,
+
     /** @type {!AndroidAppsInfo|undefined} */
     androidAppsInfo: Object,
 
@@ -253,6 +257,19 @@ Polymer({
     return this.showMultidevice && this.showPage_(visibility);
   },
 
+  /**
+   * @return {boolean} Whether to show the passwords and forms settings page.
+   * TODO(jdoerrie): https://crbug.com/854562. With Autofill Home enabled,
+   * the passwords and autofill sections are moved from the advanced page
+   * to the people page. Remove once Autofill Home is fully launched.
+   * @private
+   */
+  shouldShowPasswordsAndForms_: function() {
+    const visibility = /** @type {boolean|undefined} */ (
+        this.get('pageVisibility.passwordAndForms'));
+    return !this.autofillHomeEnabled && this.showPage_(visibility);
+  },
+
   /**
    * Hides everything but the newly expanded subpage.
    * @private

chrome/browser/resources/settings/icons.html

@@ -70,11 +70,13 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
       <g id="clipboard"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path></g>
       <g id="cloud"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"></path></g>
       <g id="code"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></g>
-      <g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g>
 <if expr="chromeos">
       <g id="computer"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"></path></g>
+</if>
+      <g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g>
+      <g id="credit-card"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></path></g>
+<if expr="chromeos">
       <g id="devices-other"><path d="M3 6h18V4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V6zm10 6H9v1.78c-.61.55-1 1.33-1 2.22s.39 1.67 1 2.22V20h4v-1.78c.61-.55 1-1.34 1-2.22s-.39-1.67-1-2.22V12zm-2 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM22 8h-6c-.5 0-1 .5-1 1v10c0 .5.5 1 1 1h6c.5 0 1-.5 1-1V9c0-.5-.5-1-1-1zm-1 10h-4v-8h4v8z"></path></g>
-
 </if>
       <g id="done"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></g>
       <g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g>
@@ -134,6 +136,7 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
       <g id="usb"><path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95 0 1.22.99 2.2 2.2 2.2 1.21 0 2.2-.98 2.2-2.2 0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z"></path></g>
       <g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></g>
       <g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></g>
+      <g id="vpn-key"><path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"></path></g>
 <if expr="chromeos">
       <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
       <g id="end-of-life"><path d="M4.574 2.916H4.55l.01.01.014-.01zM2.5 4.968v.023a.18.18 0 0 1 .01-.013l-.01-.01zm14.585 10.49v-.024l-.01.013.01.01zm.223 1.817l-.933-.95-4.106-4.11L8.026 7.99 3.675 3.635l-.942-.941-.712-.713L1 3.002l1.733 1.733A9.056 9.056 0 0 0 1.05 9.98c0 1.95.628 3.748 1.683 5.22.574.8 1.274 1.501 2.074 2.075a8.918 8.918 0 0 0 5.218 1.684 8.918 8.918 0 0 0 5.218-1.684L16.991 19l1.02-1.021-.703-.704zM15.243 2.684A8.922 8.922 0 0 0 10.025 1a8.922 8.922 0 0 0-5.218 1.684c-.005.003 4.135 4.16 4.135 4.16l1.083-1.814L15.042 11h-1.846l4.11 4.214a8.939 8.939 0 0 0 .011-10.456 9.021 9.021 0 0 0-2.074-2.074zM12 15H7.012v-3.989L4.5 11l2.227-1.876L12 14.6v.4z" fill="#DB4437" fill-rule="evenodd"></path></g>

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

@@ -19,9 +19,12 @@
 <link rel="import" href="sync_page.html">
 <link rel="import" href="profile_info_browser_proxy.html">
 <link rel="import" href="sync_browser_proxy.html">
+<link rel="import" href="../icons.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">
 <link rel="import" href="../settings_page/settings_subpage.html">
+<link rel="import" href="../passwords_and_forms_page/autofill_section.html">
+<link rel="import" href="../passwords_and_forms_page/passwords_section.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <if expr="chromeos">
@@ -77,6 +80,11 @@
         display: none;
       }
 
+      cr-link-row {
+        --cr-link-row-icon-width: 40px;
+        border-top: var(--settings-separator-line);
+      }
+
       .settings-box[actionable].sync-error #syncSecondary {
         color: var(--settings-error-color);
       }
@@ -268,6 +276,20 @@
           </div>
         </template>
 
+        <template is="dom-if" if="[[autofillHomeEnabled]]">
+          <cr-link-row id="passwordManagerButton" start-icon="settings:vpn-key"
+               label="$i18n{passwords}" icon-class="subpage-arrow"
+               on-click="onPasswordsTap_"></cr-link-row>
+          <cr-link-row id="paymentManagerButton"
+               start-icon="settings:credit-card"
+               label="$i18n{creditCards}" icon-class="subpage-arrow"
+               on-click="onAutofillTap_"></cr-link-row>
+          <cr-link-row id="addressesManagerButton"
+               start-icon="settings:location-on"
+               label="$i18n{addresses}" icon-class="subpage-arrow"
+               on-click="onAutofillTap_"></cr-link-row>
+        </template>
+
 <if expr="not chromeos">
         <template is="dom-if" if="[[diceEnabled_]]">
           <div class="settings-box" id="edit-profile" on-click="onProfileTap_"
@@ -337,6 +359,28 @@
           </settings-sync-page>
         </settings-subpage>
       </template>
+
+      <template is="dom-if" route-path="/passwords">
+        <settings-subpage
+            associated-control="[[$$('#passwordManagerButton')]]"
+            page-title="$i18n{passwords}"
+            learn-more-url="$i18n{passwordManagerLearnMoreURL}"
+            search-label="$i18n{searchPasswords}"
+            search-term="{{passwordFilter_}}">
+          <passwords-section id="passwordSection" filter="[[passwordFilter_]]"
+              prefs="{{prefs}}">
+          </passwords-section>
+        </settings-subpage>
+      </template>
+      <template is="dom-if" route-path="/autofill">
+        <settings-subpage
+            associated-control="[[$$('#addressesManagerButton')]]"
+            page-title="$i18n{autofill}">
+          <settings-autofill-section id="autofillSection" prefs="{{prefs}}">
+          </settings-autofill-section>
+        </settings-subpage>
+      </template>
+
 <if expr="chromeos">
       <template is="dom-if" route-path="/lockScreen">
         <settings-subpage

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

@@ -25,6 +25,9 @@ Polymer({
       notify: true,
     },
 
+    /** @private Filter applied to passwords and password exceptions. */
+    passwordFilter_: String,
+
     // <if expr="not chromeos">
     /**
      * This flag is used to conditionally show a set of new sign-in UIs to the
@@ -55,6 +58,10 @@ Polymer({
       },
     },
 
+    // TODO(jdoerrie): https://crbug.com/854562.
+    // Remove once Autofill Home is launched.
+    autofillHomeEnabled: Boolean,
+
     /**
      * The current sync status, supplied by SyncBrowserProxy.
      * @type {?settings.SyncStatus}
@@ -131,6 +138,16 @@ Polymer({
         const map = new Map();
         if (settings.routes.SYNC)
           map.set(settings.routes.SYNC.path, '#sync-status .subpage-arrow');
+        if (settings.routes.MANAGE_PASSWORDS) {
+          map.set(
+              settings.routes.MANAGE_PASSWORDS.path,
+              '#passwordManagerButton .subpage-arrow');
+        }
+        if (settings.routes.AUTOFILL) {
+          map.set(
+              settings.routes.AUTOFILL.path,
+              '#autofillManagerButton .subpage-arrow');
+        }
         // <if expr="not chromeos">
         if (settings.routes.MANAGE_PROFILE) {
           map.set(
@@ -313,6 +330,24 @@ Polymer({
     this.syncBrowserProxy_.startSignIn();
   },
 
+  /**
+   * Shows the manage passwords sub page.
+   * @param {!Event} event
+   * @private
+   */
+  onPasswordsTap_: function(event) {
+    settings.navigateTo(settings.routes.MANAGE_PASSWORDS);
+  },
+
+  /**
+   * Shows the manage autofill sub page.
+   * @param {!Event} event
+   * @private
+   */
+  onAutofillTap_: function(event) {
+    settings.navigateTo(settings.routes.AUTOFILL);
+  },
+
   /** @private */
   onDisconnectClosed_: function() {
     this.showDisconnectDialog_ = false;

chrome/browser/resources/settings/route.js

@@ -210,6 +210,10 @@ cr.define('settings', function() {
     /** @type {!SettingsRoutes} */
     const r = {};
 
+    const autofillHomeEnabled =
+        loadTimeData.valueExists('autofillHomeEnabled') &&
+        loadTimeData.getBoolean('autofillHomeEnabled');
+
     // Root pages.
     r.BASIC = new Route('/');
     r.ABOUT = new Route('/help');
@@ -266,6 +270,10 @@ cr.define('settings', function() {
     if (pageVisibility.people !== false) {
       r.PEOPLE = r.BASIC.createSection('/people', 'people');
       r.SYNC = r.PEOPLE.createChild('/syncSetup');
+      if (autofillHomeEnabled) {
+        r.AUTOFILL = r.PEOPLE.createChild('/autofill');
+        r.MANAGE_PASSWORDS = r.PEOPLE.createChild('/passwords');
+      }
       // <if expr="not chromeos">
       r.MANAGE_PROFILE = r.PEOPLE.createChild('/manageProfile');
       // </if>
@@ -360,7 +368,7 @@ cr.define('settings', function() {
       }
       // </if>
 
-      if (pageVisibility.passwordsAndForms !== false) {
+      if (!autofillHomeEnabled && pageVisibility.passwordsAndForms !== false) {
         r.PASSWORDS =
             r.ADVANCED.createSection('/passwordsAndForms', 'passwordsAndForms');
         r.AUTOFILL = r.PASSWORDS.createChild('/autofill');

chrome/browser/resources/settings/settings_main/settings_main.html

@@ -47,6 +47,7 @@
           show-android-apps="[[showAndroidApps]]"
           show-multidevice="[[showMultidevice]]"
           have-play-store-app="[[havePlayStoreApp]]"
+          autofill-home-enabled="[[autofillHomeEnabled]]"
           on-subpage-expand="onSubpageExpand_"
           in-search-mode="[[inSearchMode_]]"
           advanced-toggle-expanded="{{advancedToggleExpanded}}">

chrome/browser/resources/settings/settings_main/settings_main.js

@@ -81,6 +81,10 @@ Polymer({
     showMultidevice: Boolean,
 
     havePlayStoreApp: Boolean,
+
+    // TODO(jdoerrie): https://crbug.com/854562.
+    // Remove once Autofill Home is launched.
+    autofillHomeEnabled: Boolean,
   },
 
   /** @override */

chrome/browser/resources/settings/settings_menu/settings_menu.html

@@ -163,11 +163,13 @@
             <iron-icon icon="cr:security"></iron-icon>
             $i18n{privacyPageTitle}
           </a>
-          <a id= "passwordsAndForms" href="/passwordsAndForms"
-              hidden="[[!pageVisibility.passwordsAndForms]]">
-            <iron-icon icon="settings:assignment"></iron-icon>
-            $i18n{passwordsAndAutofillPageTitle}
-          </a>
+          <template is="dom-if" if="[[!autofillHomeEnabled]]">
+            <a id="passwordsAndForms" href="/passwordsAndForms"
+                hidden="[[!pageVisibility.passwordsAndForms]]">
+              <iron-icon icon="settings:assignment"></iron-icon>
+              $i18n{passwordsAndAutofillPageTitle}
+            </a>
+          </template>
           <a href="/languages">
             <iron-icon icon="settings:language"></iron-icon>
             $i18n{languagesPageTitle}

chrome/browser/resources/settings/settings_menu/settings_menu.js

@@ -17,6 +17,10 @@ Polymer({
       notify: true,
     },
 
+    // TODO(jdoerrie): https://crbug.com/854562.
+    // Remove once Autofill Home is launched.
+    autofillHomeEnabled: Boolean,
+
     /**
      * Dictionary defining page visibility.
      * @type {!GuestModePageVisibility}

chrome/browser/resources/settings/settings_ui/settings_ui.html

@@ -70,6 +70,7 @@
               show-android-apps="[[showAndroidApps_]]"
               show-multidevice="[[showMultidevice_]]"
               have-play-store-app="[[havePlayStoreApp_]]"
+              autofill-home-enabled="[[autofillHomeEnabled_]]"
               on-iron-activate="onIronActivate_"
               advanced-opened="{{advancedOpened_}}">
           </settings-menu>
@@ -84,6 +85,7 @@
           show-android-apps="[[showAndroidApps_]]"
           show-multidevice="[[showMultidevice_]]"
           have-play-store-app="[[havePlayStoreApp_]]"
+          autofill-home-enabled="[[autofillHomeEnabled_]]"
           advanced-toggle-expanded="{{advancedOpened_}}">
       </settings-main>
     </div>

chrome/browser/resources/settings/settings_ui/settings_ui.js

@@ -62,6 +62,13 @@ Polymer({
     /** @private */
     havePlayStoreApp_: Boolean,
 
+    /**
+     * TODO(jdoerrie): https://crbug.com/854562.
+     * Remove once Autofill Home is launched.
+     * @private
+     */
+    autofillHomeEnabled_: Boolean,
+
     /** @private */
     lastSearchQuery_: {
       type: String,
@@ -146,6 +153,9 @@ Polymer({
         loadTimeData.getBoolean('enableMultideviceSettings');
     this.havePlayStoreApp_ = loadTimeData.valueExists('havePlayStoreApp') &&
         loadTimeData.getBoolean('havePlayStoreApp');
+    this.autofillHomeEnabled_ =
+        loadTimeData.valueExists('autofillHomeEnabled') &&
+        loadTimeData.getBoolean('autofillHomeEnabled');
 
     this.addEventListener('show-container', () => {
       this.$.container.style.visibility = 'visible';

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

@@ -327,6 +327,12 @@ MdSettingsUI::MdSettingsUI(content::WebUI* web_ui)
   html_source->AddBoolean("unifiedConsentEnabled",
                           IsUnifiedConsentEnabled(profile));
 
+  // TODO(jdoerrie): https://crbug.com/854562.
+  // Remove once Autofill Home is launched.
+  html_source->AddBoolean(
+      "autofillHomeEnabled",
+      base::FeatureList::IsEnabled(password_manager::features::kAutofillHome));
+
   html_source->AddBoolean("showImportPasswords",
                           base::FeatureList::IsEnabled(
                               password_manager::features::kPasswordImport));

chrome/test/data/webui/settings/a11y/passwords_a11y_test.js

@@ -69,7 +69,7 @@ AccessibilityTest.define('SettingsA11yManagePasswords', {
         // Passwords section should be loaded before setup is complete.
         this.passwordsSection = settingsUi.$$('settings-main')
                                     .$$('settings-basic-page')
-                                    .$$('settings-passwords-and-forms-page')
+                                    .$$('settings-people-page')
                                     .$$('passwords-section');
         assertTrue(!!this.passwordsSection);
 

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

@@ -42,8 +42,7 @@ TEST_F('SettingsAdvancedPageBrowserTest', 'MAYBE_Load', function() {
 
     test('advanced pages', function() {
       const page = self.basicPage;
-      let sections =
-          ['privacy', 'passwordsAndForms', 'languages', 'downloads', 'reset'];
+      let sections = ['privacy', 'languages', 'downloads', 'reset'];
       if (cr.isChromeOS)
         sections = sections.concat(['dateTime', 'a11y']);
 

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

@@ -126,7 +126,6 @@ cr.define('settings_menu', function() {
       assertFalse(settingsMenu.$$('#onStartup').hidden);
       assertFalse(settingsMenu.$$('#advancedButton').hidden);
       assertFalse(settingsMenu.$$('#advancedSubmenu').hidden);
-      assertFalse(settingsMenu.$$('#passwordsAndForms').hidden);
       assertFalse(settingsMenu.$$('#reset').hidden);
       if (!cr.isChromeOS)
         assertFalse(settingsMenu.$$('#defaultBrowser').hidden);

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-theme.html">
 
@@ -42,6 +43,13 @@
         pointer-events: none;
       }
 
+      #startIcon {
+        -webkit-padding-end: var(--cr-icon-button-margin-start);
+        display: flex;
+        flex-shrink: 0;
+        width: var(--cr-link-row-icon-width, var(--cr-icon-size));
+      }
+
       #icon {
         /* The |_rippleContainer| must be position relative. */
         position: relative;
@@ -79,6 +87,9 @@
     </style>
     <button disabled="[[disabled]]">
       <div id="outer" noSubLabel$="[[!subLabel]]">
+        <iron-icon id="startIcon" icon="[[startIcon]]" hidden="[[!startIcon]]"
+            aria-hidden="true">
+        </iron-icon>
         <div id="labelWrapper" hidden="[[!label]]">
           <div id="label" class="label">[[label]]</div>
           <div id="subLabel" class="secondary label">[[subLabel]]</div>

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.js

@@ -16,9 +16,17 @@ Polymer({
   behaviors: [Polymer.PaperRippleBehavior],
 
   properties: {
+    startIcon: {
+      type: String,
+      value: '',
+    },
+
     iconClass: String,
 
-    label: String,
+    label: {
+      type: String,
+      value: '',
+    },
 
     subLabel: {
       type: String,