Settings: Port people_page/people_page.html to Polymer3.

Subpages of people_page.html are not migrated yet, and will be in
later CLs. For this reason unit tests are also not ported yet.

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

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

@@ -53,7 +53,6 @@ polymer_modulizer("basic_page") {
   html_file = "basic_page.html"
   html_type = "dom-module"
   ignore_imports = [
-    "chrome/browser/resources/settings/people_page/people_page.html",
     "chrome/browser/resources/settings/privacy_page/privacy_page.html",
     "chrome/browser/resources/settings/safety_check_page/safety_check_page.html",
   ]

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

@@ -165,10 +165,11 @@ js_library("sync_encryption_options") {
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
-    #    ":account_manager_browser_proxy.m",
+    ":account_manager_browser_proxy.m",
+
     #    ":manage_profile.m",
     #    ":manage_profile_browser_proxy.m",
-    #    ":people_page.m",
+    ":people_page.m",
     ":profile_info_browser_proxy.m",
     ":signout_dialog.m",
 
@@ -189,9 +190,7 @@ js_type_check("closure_compile_module") {
 
 js_library("account_manager_browser_proxy.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/people_page/account_manager_browser_proxy.m.js" ]
-  deps = [
-    # TODO: Fill those in.
-  ]
+  deps = [ "//ui/webui/resources/js:cr.m" ]
   extra_deps = [ ":modulize" ]
 }
 
@@ -236,7 +235,21 @@ js_library("manage_profile_browser_proxy.m") {
 js_library("people_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/people_page/people_page.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    ":account_manager_browser_proxy.m",
+    ":profile_info_browser_proxy.m",
+    ":sync_browser_proxy.m",
+    "..:i18n_setup.m",
+    "..:open_window_proxy.m",
+    "..:page_visibility.m",
+    "..:route.m",
+    "..:router.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/chromeos/cr_picture:png.m",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:icon.m",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
   extra_deps = [ ":people_page_module" ]
 }
@@ -325,6 +338,25 @@ polymer_modulizer("people_page") {
   js_file = "people_page.js"
   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",
+  ]
+  namespace_rewrites = settings_namespace_rewrites
+  auto_imports = settings_auto_imports + [
+                   "chrome/browser/resources/settings/route.html|routes",
+                   "chrome/browser/resources/settings/open_window_proxy.html|OpenWindowProxyImpl",
+                   "chrome/browser/resources/settings/router.html|Router,RouteObserverBehavior",
+                   "ui/webui/resources/cr_elements/chromeos/cr_picture/png.html|convertImageSequenceToPng",
+                   "ui/webui/resources/html/assert.html|assert",
+                   "ui/webui/resources/html/cr.html|isChromeOS",
+                   "ui/webui/resources/html/icon.html|getImage",
+                   "chrome/browser/resources/settings/page_visibility.html|PageVisibility",
+                   "chrome/browser/resources/settings/people_page/account_manager_browser_proxy.html|AccountManagerBrowserProxyImpl",
+                   "chrome/browser/resources/settings/people_page/profile_info_browser_proxy.html|ProfileInfoBrowserProxyImpl,ProfileInfoBrowserProxy,ProfileInfo",
+                   "chrome/browser/resources/settings/people_page/sync_browser_proxy.html|SyncBrowserProxyImpl,SyncBrowserProxy,SyncStatus,StoredAccount",
+                 ]
 }
 
 polymer_modulizer("signout_dialog") {
@@ -368,6 +400,5 @@ js_modulizer("modulize") {
     input_files += [ "import_data_browser_proxy.js" ]
   }
 
-  namespace_rewrites =
-      settings_namespace_rewrites + [ "settings.StoredAccount|StoredAccount" ]
+  namespace_rewrites = settings_namespace_rewrites
 }

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

@@ -2,6 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 cr.define('settings', function() {
   /**
    * Information for an account managed by Chrome OS AccountManager.
@@ -61,7 +65,7 @@ cr.define('settings', function() {
   /**
    * @implements {settings.AccountManagerBrowserProxy}
    */
-  class AccountManagerBrowserProxyImpl {
+  /* #export */ class AccountManagerBrowserProxyImpl {
     /** @override */
     getAccounts() {
       return cr.sendWithPromise('getAccounts');

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

@@ -8,6 +8,7 @@
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/icon.html">
@@ -18,8 +19,10 @@
 <link rel="import" href="profile_info_browser_proxy.html">
 <link rel="import" href="sync_browser_proxy.html">
 <link rel="import" href="sync_page.html">
+<link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../open_window_proxy.html">
+<link rel="import" href="../page_visibility.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../router.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">

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

@@ -152,8 +152,10 @@ Polymer({
     }
     // </if>
     if (useProfileNameAndIcon) {
-      settings.ProfileInfoBrowserProxyImpl.getInstance().getProfileInfo().then(
-          this.handleProfileInfo_.bind(this));
+      /** @type {!settings.ProfileInfoBrowserProxy} */ (
+          settings.ProfileInfoBrowserProxyImpl.getInstance())
+          .getProfileInfo()
+          .then(this.handleProfileInfo_.bind(this));
       this.addWebUIListener(
           'profile-info-changed', this.handleProfileInfo_.bind(this));
     }

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

@@ -14,10 +14,10 @@ cr.define('settings', function() {
    *   iconUrl: string
    * }}
    */
-  let ProfileInfo;
+  /* #export */ let ProfileInfo;
 
   /** @interface */
-  class ProfileInfoBrowserProxy {
+  /* #export */ class ProfileInfoBrowserProxy {
     /**
      * Returns a Promise for the profile info.
      * @return {!Promise<!settings.ProfileInfo>}
@@ -32,7 +32,7 @@ cr.define('settings', function() {
   }
 
   /**
-   * @implements {ProfileInfoBrowserProxy}
+   * @implements {settings.ProfileInfoBrowserProxy}
    */
   /* #export */ class ProfileInfoBrowserProxyImpl {
     /** @override */
@@ -49,5 +49,9 @@ cr.define('settings', function() {
   cr.addSingletonGetter(ProfileInfoBrowserProxyImpl);
 
   // #cr_define_end
-  return {ProfileInfo, ProfileInfoBrowserProxyImpl};
+  return {
+    ProfileInfo,
+    ProfileInfoBrowserProxy,
+    ProfileInfoBrowserProxyImpl,
+  };
 });

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

@@ -14,7 +14,7 @@ cr.define('settings', function() {
    *            avatarImage: (string|undefined)}}
    * @see chrome/browser/ui/webui/settings/people_handler.cc
    */
-  let StoredAccount;
+  /* #export */ let StoredAccount;
 
   /**
    * @typedef {{childUser: (boolean|undefined),

chrome/browser/resources/settings/settings.gni

@@ -9,6 +9,8 @@ settings_namespace_rewrites = [
   "cr_slider.SliderTick|SliderTick",
   "settings.address.CountryDetailManager|CountryDetailManager",
   "settings.AboutPageBrowserProxy|AboutPageBrowserProxy",
+  "settings.AccountManagerBrowserProxy|AccountManagerBrowserProxy",
+  "settings.Account|Account",
   "settings.AppearanceBrowserProxy|AppearanceBrowserProxy",
   "settings.AutofillManager|AutofillManager",
   "settings.BlockingRequestManager|BlockingRequestManager",
@@ -60,6 +62,7 @@ settings_namespace_rewrites = [
   "settings.SiteSettingsPrefsBrowserProxy|SiteSettingsPrefsBrowserProxy",
   "settings.StartupUrlsPageBrowserProxy|StartupUrlsPageBrowserProxy",
   "settings.StatusAction|StatusAction",
+  "settings.StoredAccount|StoredAccount",
   "settings.SyncBrowserProxy|SyncBrowserProxy",
   "settings.SyncPrefs|SyncPrefs",
   "settings.SyncStatus|SyncStatus",

chrome/browser/resources/settings/settings_resources_v3.grdp

@@ -367,6 +367,17 @@
              use_base_dir="false"
              type="BINDATA" />
   </if>
+  <if expr="chromeos">
+    <include name="IDR_SETTINGS_PEOPLE_PAGE_ACCOUNT_MANAGER_BROWSER_PROXY_M_JS"
+             file="${root_gen_dir}/chrome/browser/resources/settings/people_page/account_manager_browser_proxy.m.js"
+             use_base_dir="false"
+             type="BINDATA" />
+  </if>
+  <include name="IDR_SETTINGS_PEOPLE_PAGE_PEOPLE_PAGE_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/people_page/people_page.m.js"
+           use_base_dir="false"
+           preprocess="true"
+           type="BINDATA" />
   <include name="IDR_SETTINGS_PEOPLE_PAGE_PROFILE_INFO_BROWSER_PROXY_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.m.js"
            use_base_dir="false"

ui/webui/resources/cr_elements/BUILD.gn

@@ -186,9 +186,10 @@ group("polymer3_elements") {
 
   if (is_chromeos) {
     public_deps += [
+      "chromeos:polymer3_elements",
+
       # cr-searchable-drop-down is only used in smb and cups dialogs, both of
       # which are chromeos only.
-      "chromeos:cros_color_overrides_module",
       "cr_searchable_drop_down:cr_searchable_drop_down_module",
     ]
   }

ui/webui/resources/cr_elements/chromeos/BUILD.gn

@@ -11,6 +11,16 @@ group("closure_compile") {
   deps = [
     "cr_lottie:closure_compile",
     "cr_picture:closure_compile",
+
+    # Targets for auto-generated Polymer3/JS Modules
+    "cr_picture:closure_compile_module",
+  ]
+}
+
+group("polymer3_elements") {
+  public_deps = [
+    ":cros_color_overrides_module",
+    "cr_picture:modulize",
   ]
 }
 

ui/webui/resources/cr_elements/chromeos/cr_picture/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//ui/webui/resources/tools/js_modulizer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -41,3 +42,24 @@ js_library("cr_picture_types") {
 js_library("png") {
   deps = [ "//ui/webui/resources/js:cr" ]
 }
+
+js_modulizer("modulize") {
+  input_files = [ "png.js" ]
+}
+
+js_type_check("closure_compile_module") {
+  uses_js_modules = true
+  deps = [ ":png.m" ]
+}
+
+js_library("png.m") {
+  # Need to turn off default sources filtering by GN, otherwise |sources| is
+  # filtered on non-CrOS, because it contains the term "chromeos". This
+  # js_library() target is needed in non-CrOS builds as well (see
+  # chrome/browser/resources/settings/people_page:people_page.m)
+  set_sources_assignment_filter([])
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/chromeos/cr_picture/png.m.js",
+  ]
+  extra_deps = [ ":modulize" ]
+}

ui/webui/resources/cr_elements/chromeos/cr_picture/png.js

@@ -135,7 +135,7 @@ cr.define('cr.png', function() {
    * @param {!Array<string>} images The data URLs for each image.
    * @return {string} A data URL for an animated PNG image.
    */
-  function convertImageSequenceToPng(images) {
+  /* #export */ function convertImageSequenceToPng(images) {
     const png =
         /** @type {!CrPngState} */ ({frames: 0, sequences: 0, chunks: []});
 
@@ -217,7 +217,7 @@ cr.define('cr.png', function() {
    * @param {string} url An btoa encoded data URL for a PNG image.
    * @return {boolean} True if data URL is an animated PNG image.
    */
-  function isEncodedPngDataUrlAnimated(url) {
+  /* #export */ function isEncodedPngDataUrlAnimated(url) {
     const decoded = atob(url.substr('data:image/png;base64,'.length));
     return decoded.substr(37, 4) === 'acTL';
   }
@@ -510,6 +510,7 @@ cr.define('cr.png', function() {
     console.error('Unexpectedly reached end of file');
   }
 
+  // #cr_define_end
   return {
     convertImageSequenceToPng,
     isEncodedPngDataUrlAnimated,

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -242,5 +242,10 @@
            use_base_dir="false"
            type="BINDATA"
            compress="gzip" />
+    <include name="IDR_CR_ELEMENTS_CHROMEOS_CR_PICTURE_PNG_M_JS"
+           file="${root_gen_dir}/ui/webui/resources/cr_elements/chromeos/cr_picture/png.m.js"
+           use_base_dir="false"
+           type="BINDATA"
+           compress="gzip" />
   </if>
 </grit-part>

ui/webui/resources/tools/js_modulizer.gni

@@ -8,12 +8,14 @@ common_namespace_rewrites = [
   "cr.addWebUIListener|addWebUIListener",
   "cr.dispatchSimpleEvent|dispatchSimpleEvent",
   "cr.icon.getFavicon|getFavicon",
+  "cr.icon.getImage|getImage",
   "cr.isAndroid|isAndroid",
   "cr.isChromeOS|isChromeOS",
   "cr.isIOS|isIOS",
   "cr.isLinux|isLinux",
   "cr.isMac|isMac",
   "cr.isWindows|isWindows",
+  "cr.png.convertImageSequenceToPng|convertImageSequenceToPng",
   "cr.removeWebUIListener|removeWebUIListener",
   "cr.sendWithPromise|sendWithPromise",
   "cr.toastManager.getToastManager|getToastManager",