Port chrome://management to Polymer3.

Bug: 965770
Change-Id: Ie978f3b8331275693f883ae6b11058f0a2ad3137
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1836604
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703104}

chrome/browser/BUILD.gn

@@ -5381,6 +5381,7 @@ grit("resources") {
 
   if (is_win || is_mac || is_desktop_linux || is_chromeos) {
     deps += [
+      "//chrome/browser/resources/management:polymer3_elements",
       "//chrome/browser/resources/discards:discards_resources_gen",
       "//chrome/browser/ui/webui/discards:mojo_bindings_js",
       "//services/resource_coordinator/public/mojom:mojom_js",

chrome/browser/browser_resources.grd

@@ -324,11 +324,9 @@
       <include name="IDR_POLICY_JS" file="resources\policy\policy.js" type="BINDATA" compress="gzip" />
       <if expr="not is_android">
         <include name="IDR_MANAGEMENT_HTML" file="resources\management\management.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
-        <include name="IDR_MANAGEMENT_UI_HTML" file="resources\management\management_ui.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
-        <include name="IDR_MANAGEMENT_UI_JS" file="resources\management\management_ui.js" type="BINDATA" compress="gzip" preprocess="true" />
-        <include name="IDR_MANAGEMENT_BROWSER_PROXY_HTML" file="resources\management\management_browser_proxy.html" allowexternalscript="true" type="BINDATA" compress="gzip" />
+        <include name="IDR_MANAGEMENT_UI_JS" file="${root_gen_dir}/chrome/browser/resources/management/management_ui.js" use_base_dir="false" type="BINDATA" compress="gzip" preprocess="true" />
         <include name="IDR_MANAGEMENT_BROWSER_PROXY_JS" file="resources\management\management_browser_proxy.js" type="BINDATA" compress="gzip" preprocess="true" />
-        <include name="IDR_MANAGEMENT_ICONS_HTML" file="resources\management\icons.html" type="BINDATA" compress="gzip" preprocess="true" />
+        <include name="IDR_MANAGEMENT_ICONS_JS" file="${root_gen_dir}/chrome/browser/resources/management/icons.js" use_base_dir="false" type="BINDATA" compress="gzip" preprocess="true" />
       </if>
       <include name="IDR_SITE_ENGAGEMENT_HTML" file="resources\engagement\site_engagement.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_SITE_ENGAGEMENT_JS" file="resources\engagement\site_engagement.js" flattenhtml="true" type="BINDATA" compress="gzip" />

chrome/browser/resources/management/BUILD.gn

@@ -3,8 +3,10 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
+  is_polymer3 = true
   deps = [
     ":management_browser_proxy",
     ":management_ui",
@@ -13,15 +15,34 @@ js_type_check("closure_compile") {
 
 js_library("management_ui") {
   deps = [
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:i18n_behavior",
-    "//ui/webui/resources/js:load_time_data",
-    "//ui/webui/resources/js:web_ui_listener_behavior",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
 }
 
 js_library("management_browser_proxy") {
   deps = [
-    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:cr.m",
+  ]
+}
+
+polymer_modulizer("management_ui") {
+  js_file = "management_ui.js"
+  html_file = "management_ui.html"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("icons") {
+  js_file = "icons.js"
+  html_file = "icons.html"
+  html_type = "v3-ready"
+}
+
+group("polymer3_elements") {
+  deps = [
+    ":icons_module",
+    ":management_ui_module",
   ]
 }

chrome/browser/resources/management/icons.html

-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
-
 <!-- Set of the management specific icons -->
-
 <iron-iconset-svg name="management" size="24">
   <svg>
     <defs>

chrome/browser/resources/management/icons.js

+// Copyright 2019 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.
+
+import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+const template = html`{__html_template__}`;
+document.head.appendChild(template.content);

chrome/browser/resources/management/management.html

@@ -7,7 +7,6 @@
 
   <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
-  <link rel="import" href="chrome://resources/html/cr.html">
   <style>
     html {
       background: var(--md-background-color);
@@ -30,8 +29,7 @@
     }
   </style>
 
-  <link rel="import" href="management_ui.html">
-  <script src="strings.js"></script>
+  <script type="module" src="management_ui.js"></script>
 </head>
 <body>
   <management-ui></management-ui>

chrome/browser/resources/management/management_browser_proxy.html

-<link rel="import" href="chrome://resources/html/cr.html">
-<script src="management_browser_proxy.js"></script>

chrome/browser/resources/management/management_browser_proxy.js

@@ -2,166 +2,156 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('management', function() {
-  /**
-   * @typedef {{
-   *   name: string,
-   *   permissions: !Array<string>
-   * }}
-   */
-  let Extension;
-
-  /** @enum {string} */
-  const ReportingType = {
-    SECURITY: 'security',
-    DEVICE: 'device',
-    USER: 'user',
-    USER_ACTIVITY: 'user-activity',
-    EXTENSIONS: 'extensions'
-  };
+import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+
+/**
+ * @typedef {{
+ *   name: string,
+ *   permissions: !Array<string>
+ * }}
+ */
+export let Extension;
+
+/** @enum {string} */
+export const ReportingType = {
+  SECURITY: 'security',
+  DEVICE: 'device',
+  USER: 'user',
+  USER_ACTIVITY: 'user-activity',
+  EXTENSIONS: 'extensions'
+};
+
+/**
+ * @typedef {{
+ *   messageId: string,
+ *   reportingType: !ReportingType,
+ * }}
+ */
+export let BrowserReportingResponse;
+
+/**
+ * @typedef {{
+ *   browserManagementNotice: string,
+ *   extensionReportingTitle: string,
+ *   pageSubtitle: string,
+ *   managed: boolean,
+ *   overview: string,
+ *   customerLogo: string,
+ *   threatProtectionDescription: string
+ * }}
+ */
+let ManagedDataResponse;
+
+/**
+ * @typedef {{
+ *  title: string,
+ *  permission: string
+ * }}
+ */
+let ThreatProtectionPermission;
+
+/**
+ * @typedef {{
+ *   info: !Array<!ThreatProtectionPermission>,
+ *   description: string
+ * }}
+ */
+export let ThreatProtectionInfo;
+
+// <if expr="chromeos">
+/**
+ * @enum {string} Look at ToJSDeviceReportingType usage in
+ *    management_ui_handler.cc for more details.
+ */
+export const DeviceReportingType = {
+  SUPERVISED_USER: 'supervised user',
+  DEVICE_ACTIVITY: 'device activity',
+  STATISTIC: 'device statistics',
+  DEVICE: 'device',
+  LOGS: 'logs',
+  PRINT: 'print',
+  CROSTINI: 'crostini'
+};
+
+
+/**
+ * @typedef {{
+ *   messageId: string,
+ *   reportingType: !DeviceReportingType,
+ * }}
+ */
+export let DeviceReportingResponse;
+// </if>
+
+/** @interface */
+export class ManagementBrowserProxy {
+  /** @return {!Promise<!Array<!Extension>>} */
+  getExtensions() {}
 
+  // <if expr="chromeos">
   /**
-   * @typedef {{
-   *   messageId: string,
-   *   reportingType: !management.ReportingType,
-   * }}
+   * @return {!Promise<boolean>} Boolean describing trust root configured
+   *     or not.
    */
-  let BrowserReportingResponse;
+  getLocalTrustRootsInfo() {}
 
   /**
-   * @typedef {{
-   *   browserManagementNotice: string,
-   *   extensionReportingTitle: string,
-   *   pageSubtitle: string,
-   *   managed: boolean,
-   *   overview: string,
-   *   customerLogo: string,
-   *   threatProtectionDescription: string
-   * }}
+   * @return {!Promise<!Array<DeviceReportingResponse>>} List of
+   *     items to display in device reporting section.
    */
-  let ManagedDataResponse;
+  getDeviceReportingInfo() {}
+  // </if>
 
-  /**
-   * @typedef {{
-   *  title: string,
-   *  permission: string
-   * }}
-   */
-  let ThreatProtectionPermission;
+  /** @return {!Promise<!ManagedDataResponse>} */
+  getContextualManagedData() {}
 
-  /**
-   * @typedef {{
-   *   info: !Array<!ThreatProtectionPermission>,
-   *   description: string
-   * }}
-   */
-  let ThreatProtectionInfo;
+  /** @return {!Promise<!ThreatProtectionInfo>} */
+  getThreatProtectionInfo() {}
 
-  // <if expr="chromeos">
   /**
-   * @enum {string} Look at ToJSDeviceReportingType usage in
-   *    management_ui_handler.cc for more details.
+   * @return {!Promise<!Array<!BrowserReportingResponse>>} The list
+   *     of browser reporting info messages.
    */
-  const DeviceReportingType = {
-    SUPERVISED_USER: 'supervised user',
-    DEVICE_ACTIVITY: 'device activity',
-    STATISTIC: 'device statistics',
-    DEVICE: 'device',
-    LOGS: 'logs',
-    PRINT: 'print',
-    CROSTINI: 'crostini'
-  };
+  initBrowserReportingInfo() {}
+}
+
+/** @implements {ManagementBrowserProxy} */
+export class ManagementBrowserProxyImpl {
+  /** @override */
+  getExtensions() {
+    return sendWithPromise('getExtensions');
+  }
 
+  // <if expr="chromeos">
+  /** @override */
+  getLocalTrustRootsInfo() {
+    return sendWithPromise('getLocalTrustRootsInfo');
+  }
 
-  /**
-   * @typedef {{
-   *   messageId: string,
-   *   reportingType: !management.DeviceReportingType,
-   * }}
-   */
-  let DeviceReportingResponse;
+  /** @override */
+  getDeviceReportingInfo() {
+    return sendWithPromise('getDeviceReportingInfo');
+  }
   // </if>
 
-  /** @interface */
-  class ManagementBrowserProxy {
-    /** @return {!Promise<!Array<!management.Extension>>} */
-    getExtensions() {}
-
-    // <if expr="chromeos">
-    /**
-     * @return {!Promise<boolean>} Boolean describing trust root configured
-     *     or not.
-     */
-    getLocalTrustRootsInfo() {}
-
-    /**
-     * @return {!Promise<!Array<management.DeviceReportingResponse>>} List of
-     *     items to display in device reporting section.
-     */
-    getDeviceReportingInfo() {}
-    // </if>
-
-    /** @return {!Promise<!management.ManagedDataResponse>} */
-    getContextualManagedData() {}
-
-    /** @return {!Promise<!management.ThreatProtectionInfo>} */
-    getThreatProtectionInfo() {}
-
-    /**
-     * @return {!Promise<!Array<!management.BrowserReportingResponse>>} The list
-     *     of browser reporting info messages.
-     */
-    initBrowserReportingInfo() {}
+  /** @override */
+  getContextualManagedData() {
+    return sendWithPromise('getContextualManagedData');
+  }
+
+  /** @override */
+  getThreatProtectionInfo() {
+    return sendWithPromise('getThreatProtectionInfo');
   }
 
-  /** @implements {management.ManagementBrowserProxy} */
-  class ManagementBrowserProxyImpl {
-    /** @override */
-    getExtensions() {
-      return cr.sendWithPromise('getExtensions');
-    }
-
-    // <if expr="chromeos">
-    /** @override */
-    getLocalTrustRootsInfo() {
-      return cr.sendWithPromise('getLocalTrustRootsInfo');
-    }
-
-    /** @override */
-    getDeviceReportingInfo() {
-      return cr.sendWithPromise('getDeviceReportingInfo');
-    }
-    // </if>
-
-    /** @override */
-    getContextualManagedData() {
-      return cr.sendWithPromise('getContextualManagedData');
-    }
-
-    /** @override */
-    getThreatProtectionInfo() {
-      return cr.sendWithPromise('getThreatProtectionInfo');
-    }
-
-    /** @override */
-    initBrowserReportingInfo() {
-      return cr.sendWithPromise('initBrowserReportingInfo');
-    }
+  /** @override */
+  initBrowserReportingInfo() {
+    return sendWithPromise('initBrowserReportingInfo');
   }
+}
+
+addSingletonGetter(ManagementBrowserProxyImpl);
 
-  cr.addSingletonGetter(ManagementBrowserProxyImpl);
-
-  return {
-    BrowserReportingResponse: BrowserReportingResponse,
-    // <if expr="chromeos">
-    DeviceReportingResponse: DeviceReportingResponse,
-    DeviceReportingType: DeviceReportingType,
-    // </if>
-    Extension: Extension,
-    ManagedDataResponse: ManagedDataResponse,
-    ManagementBrowserProxyImpl: ManagementBrowserProxyImpl,
-    ManagementBrowserProxy: ManagementBrowserProxy,
-    ReportingType: ReportingType,
-    ThreatProtectionInfo: ThreatProtectionInfo,
-  };
-});
+// Export |ManagementBrowserProxyImpl| on |window| so that it can be accessed by
+// management_ui_browsertest.cc
+window.ManagementBrowserProxyImpl = ManagementBrowserProxyImpl;

chrome/browser/resources/management/management_ui.html

-<link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_page_host_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
-<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
-<link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/html/load_time_data.html">
-<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="icons.html">
-<link rel="import" href="management_browser_proxy.html">
-
-<dom-module id="management-ui">
-  <template>
     <style include="cr-icons cr-hidden-style cr-page-host-style
         cr-shared-style">
       :host {
@@ -324,6 +308,3 @@
         </div>
       </div>
     </main>
-  </template>
-  <script src="management_ui.js"></script>
-</dom-module>

chrome/browser/ui/webui/management_ui.cc

@@ -115,14 +115,12 @@ content::WebUIDataSource* CreateManagementUIHtmlSource(Profile* profile) {
 #endif  // defined(OS_CHROMEOS)
 
   source->UseStringsJs();
+  source->EnableReplaceI18nInJS();
   // Add required resources.
-  source->AddResourcePath("management_browser_proxy.html",
-                          IDR_MANAGEMENT_BROWSER_PROXY_HTML);
   source->AddResourcePath("management_browser_proxy.js",
                           IDR_MANAGEMENT_BROWSER_PROXY_JS);
-  source->AddResourcePath("management_ui.html", IDR_MANAGEMENT_UI_HTML);
   source->AddResourcePath("management_ui.js", IDR_MANAGEMENT_UI_JS);
-  source->AddResourcePath("icons.html", IDR_MANAGEMENT_ICONS_HTML);
+  source->AddResourcePath("icons.js", IDR_MANAGEMENT_ICONS_JS);
   source->SetDefaultResource(IDR_MANAGEMENT_HTML);
   return source;
 }

chrome/browser/ui/webui/management_ui_browsertest.cc

@@ -59,7 +59,7 @@ IN_PROC_BROWSER_TEST_F(ManagementUITest, ManagementStateChange) {
 
   // The browser is not managed.
   const std::string javascript =
-      "management.ManagementBrowserProxyImpl.getInstance()"
+      "window.ManagementBrowserProxyImpl.getInstance()"
       "  .getContextualManagedData()"
       "  .then(managed_result => "
       "    domAutomationController.send(JSON.stringify(managed_result)));";

ui/webui/resources/cr_elements/BUILD.gn

@@ -91,6 +91,12 @@ polymer_modulizer("action_link_css") {
   html_type = "style-module"
 }
 
+polymer_modulizer("cr_page_host_style_css") {
+  js_file = "cr_page_host_style_css.m.js"
+  html_file = "cr_page_host_style_css.html"
+  html_type = "style-module"
+}
+
 polymer_modulizer("shared_vars_css") {
   js_file = "shared_vars_css.m.js"
   html_file = "shared_vars_css.html"
@@ -136,6 +142,7 @@ group("polymer3_elements") {
   deps = [
     ":action_link_css_module",
     ":cr_icons_css_module",
+    ":cr_page_host_style_css_module",
     ":hidden_style_css_module",
     ":icons_module",
     ":md_select_css_module",

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -61,6 +61,11 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_PAGE_HOST_STYLE_CSS_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_page_host_style_css.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_LAZY_RENDER_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.m.js"
          use_base_dir="false"