Settings: Port people_page/manage_profile.html to Polymer3.

Bug: 1026426
Change-Id: I9a155e796d3fd7cda5b569f90b9aff45678c8083
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2109314Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751899}

chrome/browser/resources/settings/lazy_load.js

@@ -17,21 +17,21 @@ import './search_engines_page/search_engines_page.m.js';
 // import './privacy_page/security_page.m.js';
 // import './site_settings/all_sites.m.js';
 import './site_settings/site_data_details_subpage.m.js';
-// import 'site_settings_page/site_settings_page.m.js';
-// import 'site_settings/category_default_setting.m.js';
-// import 'site_settings/category_setting_exceptions.m.js';
-// import 'site_settings/chooser_exception_list.m.js';
-// import 'site_settings/media_picker.m.js';
-// import 'site_settings/pdf_documents.m.js';
-// import 'site_settings/protocol_handlers.m.js';
-// import 'site_settings/site_data.m.js';
-// import 'site_settings/site_details.m.js';
-// import 'site_settings/zoom_levels.m.js';
+// import './site_settings_page/site_settings_page.m.js';
+// import './site_settings/category_default_setting.m.js';
+// import './site_settings/category_setting_exceptions.m.js';
+// import './site_settings/chooser_exception_list.m.js';
+// import './site_settings/media_picker.m.js';
+// import './site_settings/pdf_documents.m.js';
+// import './site_settings/protocol_handlers.m.js';
+// import './site_settings/site_data.m.js';
+// import './site_settings/site_details.m.js';
+// import './site_settings/zoom_levels.m.js';
 
 // <if expr="not chromeos">
-// import 'people_page/manage_profile.m.js';
+import './people_page/manage_profile.m.js';
 // </if>
-// import 'people_page/sync_account_control.m.js';
+// import './people_page/sync_account_control.m.js';
 
 // <if expr="use_nss_certs">
 import 'chrome://resources/cr_components/certificate_manager/certificate_manager.m.js';
@@ -88,6 +88,7 @@ export {SiteSettingsPrefsBrowserProxyImpl} from './site_settings/site_settings_p
 
 // <if expr="not chromeos">
 export {SystemPageBrowserProxyImpl} from './system_page/system_page_browser_proxy.m.js';
+export {ProfileShortcutStatus, ManageProfileBrowserProxyImpl} from './people_page/manage_profile_browser_proxy.m.js';
 // </if>
 
 // <if expr="chromeos">

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

@@ -166,9 +166,6 @@ js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
     ":account_manager_browser_proxy.m",
-
-    #    ":manage_profile.m",
-    #    ":manage_profile_browser_proxy.m",
     ":people_page.m",
     ":profile_info_browser_proxy.m",
     ":signout_dialog.m",
@@ -184,6 +181,8 @@ js_type_check("closure_compile_module") {
     deps += [
       ":import_data_browser_proxy.m",
       ":import_data_dialog.m",
+      ":manage_profile.m",
+      ":manage_profile_browser_proxy.m",
     ]
   }
 }
@@ -214,22 +213,28 @@ if (!is_chromeos) {
     ]
     extra_deps = [ ":import_data_dialog_module" ]
   }
-}
 
-js_library("manage_profile.m") {
+  js_library("manage_profile.m") {
     sources = [ "$root_gen_dir/chrome/browser/resources/settings/people_page/manage_profile.m.js" ]
     deps = [
-    # TODO: Fill those in.
+      ":manage_profile_browser_proxy.m",
+      ":sync_browser_proxy.m",
+      "..:i18n_setup.m",
+      "..:route.m",
+      "..:router.m",
+      "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     ]
     extra_deps = [ ":manage_profile_module" ]
-}
+  }
 
-js_library("manage_profile_browser_proxy.m") {
+  js_library("manage_profile_browser_proxy.m") {
     sources = [ "$root_gen_dir/chrome/browser/resources/settings/people_page/manage_profile_browser_proxy.m.js" ]
     deps = [
-    # TODO: Fill those in.
+      "//ui/webui/resources/cr_elements/cr_profile_avatar_selector:cr_profile_avatar_selector.m",
+      "//ui/webui/resources/js:cr.m",
     ]
     extra_deps = [ ":modulize" ]
+  }
 }
 
 js_library("people_page.m") {
@@ -306,7 +311,6 @@ js_library("sync_page.m") {
 
 group("polymer3_elements") {
   public_deps = [
-    ":manage_profile_module",
     ":modulize",
     ":people_page_module",
     ":signout_dialog_module",
@@ -316,7 +320,10 @@ group("polymer3_elements") {
   ]
 
   if (!is_chromeos) {
-    public_deps += [ ":import_data_dialog_module" ]
+    public_deps += [
+      ":import_data_dialog_module",
+      ":manage_profile_module",
+    ]
   }
 }
 
@@ -332,6 +339,14 @@ polymer_modulizer("manage_profile") {
   js_file = "manage_profile.js"
   html_file = "manage_profile.html"
   html_type = "dom-module"
+  namespace_rewrites = settings_namespace_rewrites
+  auto_imports = settings_auto_imports + [
+                   "chrome/browser/resources/settings/people_page/manage_profile_browser_proxy.html|ManageProfileBrowserProxy,ManageProfileBrowserProxyImpl,ProfileShortcutStatus",
+                   "chrome/browser/resources/settings/people_page/sync_browser_proxy.html|SyncStatus",
+                   "chrome/browser/resources/settings/route.html|routes",
+                   "chrome/browser/resources/settings/router.html|Router,RouteObserverBehavior",
+                   "ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html|AvatarIcon",
+                 ]
 }
 
 polymer_modulizer("people_page") {
@@ -339,7 +354,6 @@ polymer_modulizer("people_page") {
   html_file = "people_page.html"
   html_type = "dom-module"
   ignore_imports = [
-    "chrome/browser/resources/settings/people_page/manage_profile.html",
     "chrome/browser/resources/settings/people_page/sync_controls.html",
     "chrome/browser/resources/settings/people_page/sync_page.html",
   ]
@@ -391,13 +405,15 @@ polymer_modulizer("sync_page") {
 js_modulizer("modulize") {
   input_files = [
     "account_manager_browser_proxy.js",
-    "manage_profile_browser_proxy.js",
     "profile_info_browser_proxy.js",
     "sync_browser_proxy.js",
   ]
 
   if (!is_chromeos) {
-    input_files += [ "import_data_browser_proxy.js" ]
+    input_files += [
+      "import_data_browser_proxy.js",
+      "manage_profile_browser_proxy.js",
+    ]
   }
 
   namespace_rewrites = settings_namespace_rewrites

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

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="manage_profile_browser_proxy.html">
+<link rel="import" href="sync_browser_proxy.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../router.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -23,7 +24,7 @@
       }
     </style>
     <div class="settings-box first">
-      <cr-input id="name" value="[[profileName]]" pattern=".*\S.*"
+      <cr-input id="name" value="[[profileName]]" pattern="[[pattern_]]"
           on-change="onProfileNameChanged_" on-keydown="onProfileNameKeydown_"
           disabled="[[isProfileNameDisabled_(syncStatus)]]" maxlength="500"
           auto-validate required spellcheck="false">

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

@@ -55,6 +55,18 @@ Polymer({
      * True if the profile shortcuts feature is enabled.
      */
     isProfileShortcutSettingVisible_: Boolean,
+
+    /**
+     * TODO(dpapad): Move this back to the HTML file when the Polymer2 version
+     * of the code is deleted. Because of "\" being a special character in a JS
+     * string, can't satisfy both Polymer2 and Polymer3 at the same time from
+     * the HTML file.
+     * @private
+     */
+    pattern_: {
+      type: String,
+      value: '.*\\S.*',
+    },
   },
 
   /** @private {?settings.ManageProfileBrowserProxy} */
@@ -84,14 +96,15 @@ Polymer({
       }
       if (loadTimeData.getBoolean('profileShortcutsEnabled')) {
         this.browserProxy_.getProfileShortcutStatus().then(status => {
-          if (status == ProfileShortcutStatus.PROFILE_SHORTCUT_SETTING_HIDDEN) {
+          if (status ==
+              settings.ProfileShortcutStatus.PROFILE_SHORTCUT_SETTING_HIDDEN) {
             this.isProfileShortcutSettingVisible_ = false;
             return;
           }
 
           this.isProfileShortcutSettingVisible_ = true;
           this.hasProfileShortcut_ =
-              status == ProfileShortcutStatus.PROFILE_SHORTCUT_FOUND;
+              status == settings.ProfileShortcutStatus.PROFILE_SHORTCUT_FOUND;
         });
       }
     }

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

@@ -7,20 +7,25 @@
  * the People section to interact with the browser. Chrome Browser only.
  */
 
-/**
+// clang-format off
+// #import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+// #import {AvatarIcon} from 'chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.m.js';
+// clang-format on
+
+cr.define('settings', function() {
+  /**
    * Contains the possible profile shortcut statuses. These strings must be kept
    * in sync with the C++ Manage Profile handler.
    * @enum {string}
    */
-const ProfileShortcutStatus = {
+  /* #export */ const ProfileShortcutStatus = {
     PROFILE_SHORTCUT_SETTING_HIDDEN: 'profileShortcutSettingHidden',
     PROFILE_SHORTCUT_NOT_FOUND: 'profileShortcutNotFound',
     PROFILE_SHORTCUT_FOUND: 'profileShortcutFound',
-};
+  };
 
-cr.define('settings', function() {
   /** @interface */
-  class ManageProfileBrowserProxy {
+  /* #export */ class ManageProfileBrowserProxy {
     /**
      * Gets the available profile icons to choose from.
      * @return {!Promise<!Array<!AvatarIcon>>}
@@ -46,7 +51,7 @@ cr.define('settings', function() {
 
     /**
      * Returns whether the current profile has a shortcut.
-     * @return {!Promise<ProfileShortcutStatus>}
+     * @return {!Promise<settings.ProfileShortcutStatus>}
      */
     getProfileShortcutStatus() {}
 
@@ -64,7 +69,7 @@ cr.define('settings', function() {
   /**
    * @implements {settings.ManageProfileBrowserProxy}
    */
-  class ManageProfileBrowserProxyImpl {
+  /* #export */ class ManageProfileBrowserProxyImpl {
     /** @override */
     getAvailableIcons() {
       return cr.sendWithPromise('getAvailableIcons');
@@ -107,7 +112,8 @@ cr.define('settings', function() {
 
   // #cr_define_end
   return {
-    ManageProfileBrowserProxy: ManageProfileBrowserProxy,
-    ManageProfileBrowserProxyImpl: ManageProfileBrowserProxyImpl,
+    ManageProfileBrowserProxy,
+    ManageProfileBrowserProxyImpl,
+    ProfileShortcutStatus
   };
 });

chrome/browser/resources/settings/settings.gni

@@ -37,6 +37,7 @@ settings_namespace_rewrites = [
   "settings.LifetimeBrowserProxy|LifetimeBrowserProxy",
   "settings.LocalDataBrowserProxy|LocalDataBrowserProxy",
   "settings.MainPageBehavior|MainPageBehavior",
+  "settings.ManageProfileBrowserProxy|ManageProfileBrowserProxy",
   "settings.MetricsBrowserProxy|MetricsBrowserProxy",
   "settings.MinimumRoutes|MinimumRoutes",
   "settings.OnStartupBrowserProxy|OnStartupBrowserProxy",
@@ -51,6 +52,7 @@ settings_namespace_rewrites = [
   "settings.PrivacyElementInteractions|PrivacyElementInteractions",
   "settings.ProfileInfoBrowserProxy|ProfileInfoBrowserProxy",
   "settings.ProfileInfo|ProfileInfo",
+  "settings.ProfileShortcutStatus|ProfileShortcutStatus",
   "settings.ResetBrowserProxy|ResetBrowserProxy",
   "settings.Route|Route",
   "settings.routes|routes",

chrome/browser/resources/settings/settings_resources.grd

@@ -752,8 +752,7 @@
                    type="chrome_html" />
         <structure name="IDR_SETTINGS_PEOPLE_PAGE_MANAGE_PROFILE_HTML"
                    file="people_page/manage_profile.html"
-                   type="chrome_html"
-                   preprocess="true" />
+                   type="chrome_html" />
         <structure name="IDR_SETTINGS_PEOPLE_PAGE_MANAGE_PROFILE_JS"
                    file="people_page/manage_profile.js"
                    type="chrome_html" />

chrome/browser/resources/settings/settings_resources_v3.grdp

@@ -366,6 +366,14 @@
              file="${root_gen_dir}/chrome/browser/resources/settings/people_page/import_data_browser_proxy.m.js"
              use_base_dir="false"
              type="BINDATA" />
+    <include name="IDR_SETTINGS_PEOPLE_PAGE_MANAGE_PROFILE_M_JS"
+             file="${root_gen_dir}/chrome/browser/resources/settings/people_page/manage_profile.m.js"
+             use_base_dir="false"
+             type="BINDATA" />
+    <include name="IDR_SETTINGS_PEOPLE_PAGE_MANAGE_PROFILE_BROWSER_PROXY_M_JS"
+             file="${root_gen_dir}/chrome/browser/resources/settings/people_page/manage_profile_browser_proxy.m.js"
+             use_base_dir="false"
+             type="BINDATA" />
   </if>
   <if expr="chromeos">
     <include name="IDR_SETTINGS_PEOPLE_PAGE_ACCOUNT_MANAGER_BROWSER_PROXY_M_JS"

chrome/test/data/webui/BUILD.gn

@@ -286,6 +286,7 @@ js2gtest("browser_tests_js_webui") {
     data += [
       "$root_gen_dir/chrome/test/data/webui/settings/default_browser_browsertest.m.js",
       "$root_gen_dir/chrome/test/data/webui/settings/import_data_dialog_test.m.js",
+      "$root_gen_dir/chrome/test/data/webui/settings/people_page_manage_profile_test.m.js",
       "$root_gen_dir/chrome/test/data/webui/settings/system_page_tests.m.js",
     ]
   }

chrome/test/data/webui/settings/BUILD.gn

@@ -80,6 +80,7 @@ js_modulizer("modulize") {
     input_files += [
       "default_browser_browsertest.js",
       "import_data_dialog_test.js",
+      "people_page_manage_profile_test.js",
       "system_page_tests.js",
     ]
   }

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

@@ -171,6 +171,23 @@ TEST_F('CrSettingsIncompatibleApplicationsPageV3Test', 'All', function() {
 
 GEN('#endif  // defined(OS_WIN) && BUILDFLAG(GOOGLE_CHROME_BRANDING)');
 
+GEN('#if !defined(OS_CHROMEOS)');
+
+// eslint-disable-next-line no-var
+var CrSettingsPeoplePageManageProfileV3Test =
+    class extends CrSettingsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://settings/test_loader.html?module=settings/people_page_manage_profile_test.m.js';
+  }
+};
+
+TEST_F('CrSettingsPeoplePageManageProfileV3Test', 'All', function() {
+  mocha.run();
+});
+
+GEN('#endif  // !defined(OS_CHROMEOS)');
+
 // eslint-disable-next-line no-var
 var CrSettingsPrefUtilV3Test = class extends CrSettingsV3BrowserTest {
   /** @override */

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

@@ -2,6 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {ManageProfileBrowserProxyImpl, ProfileShortcutStatus} from 'chrome://settings/lazy_load.js';
+// #import {Router, routes} from 'chrome://settings/settings.js';
+// #import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// clang-format on
+
 cr.define('settings_people_page_manage_profile', function() {
   /** @implements {settings.ManageProfileBrowserProxy} */
   class TestManageProfileBrowserProxy extends TestBrowserProxy {
@@ -16,12 +23,12 @@ cr.define('settings_people_page_manage_profile', function() {
         'removeProfileShortcut',
       ]);
 
-      /** @private {!ProfileShortcutStatus} */
+      /** @private {!settings.ProfileShortcutStatus} */
       this.profileShortcutStatus_ =
-          ProfileShortcutStatus.PROFILE_SHORTCUT_FOUND;
+          settings.ProfileShortcutStatus.PROFILE_SHORTCUT_FOUND;
     }
 
-    /** @param {!ProfileShortcutStatus} status */
+    /** @param {!settings.ProfileShortcutStatus} status */
     setProfileShortcutStatus(status) {
       this.profileShortcutStatus_ = status;
     }
@@ -120,6 +127,7 @@ cr.define('settings_people_page_manage_profile', function() {
       const nameField = manageProfile.$.name;
       assertTrue(!!nameField);
       assertFalse(!!nameField.disabled);
+      assertEquals('.*\\S.*', nameField.pattern);
 
       assertEquals('Initial Fake Name', nameField.value);
 
@@ -224,7 +232,7 @@ cr.define('settings_people_page_manage_profile', function() {
     // profile shortcut is found.
     test('ManageProfileShortcutToggle', function() {
       browserProxy.setProfileShortcutStatus(
-          ProfileShortcutStatus.PROFILE_SHORTCUT_NOT_FOUND);
+          settings.ProfileShortcutStatus.PROFILE_SHORTCUT_NOT_FOUND);
 
       settings.Router.getInstance().navigateTo(settings.routes.MANAGE_PROFILE);
       Polymer.dom.flush();
@@ -246,7 +254,7 @@ cr.define('settings_people_page_manage_profile', function() {
     // occur in the single profile case.
     test('ManageProfileShortcutSettingHIdden', function() {
       browserProxy.setProfileShortcutStatus(
-          ProfileShortcutStatus.PROFILE_SHORTCUT_SETTING_HIDDEN);
+          settings.ProfileShortcutStatus.PROFILE_SHORTCUT_SETTING_HIDDEN);
 
       settings.Router.getInstance().navigateTo(settings.routes.MANAGE_PROFILE);
       Polymer.dom.flush();
@@ -261,4 +269,5 @@ cr.define('settings_people_page_manage_profile', function() {
           });
     });
   });
+  // #cr_define_end
 });

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.js

@@ -13,7 +13,7 @@
  *            isGaiaAvatar: (boolean|undefined),
  *            selected: (boolean|undefined)}}
  */
-let AvatarIcon;
+/* #export */ let AvatarIcon;
 
 Polymer({
   is: 'cr-profile-avatar-selector',