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,33 +2,34 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('management', function() {
-  /**
+import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+
+/**
  * @typedef {{
  *   name: string,
  *   permissions: !Array<string>
  * }}
  */
-  let Extension;
+export let Extension;
 
-  /** @enum {string} */
-  const ReportingType = {
+/** @enum {string} */
+export const ReportingType = {
   SECURITY: 'security',
   DEVICE: 'device',
   USER: 'user',
   USER_ACTIVITY: 'user-activity',
   EXTENSIONS: 'extensions'
-  };
+};
 
-  /**
+/**
  * @typedef {{
  *   messageId: string,
-   *   reportingType: !management.ReportingType,
+ *   reportingType: !ReportingType,
  * }}
  */
-  let BrowserReportingResponse;
+export let BrowserReportingResponse;
 
-  /**
+/**
  * @typedef {{
  *   browserManagementNotice: string,
  *   extensionReportingTitle: string,
@@ -39,30 +40,30 @@ cr.define('management', function() {
  *   threatProtectionDescription: string
  * }}
  */
-  let ManagedDataResponse;
+let ManagedDataResponse;
 
-  /**
+/**
  * @typedef {{
  *  title: string,
  *  permission: string
  * }}
  */
-  let ThreatProtectionPermission;
+let ThreatProtectionPermission;
 
-  /**
+/**
  * @typedef {{
  *   info: !Array<!ThreatProtectionPermission>,
  *   description: string
  * }}
  */
-  let ThreatProtectionInfo;
+export let ThreatProtectionInfo;
 
-  // <if expr="chromeos">
-  /**
+// <if expr="chromeos">
+/**
  * @enum {string} Look at ToJSDeviceReportingType usage in
  *    management_ui_handler.cc for more details.
  */
-  const DeviceReportingType = {
+export const DeviceReportingType = {
   SUPERVISED_USER: 'supervised user',
   DEVICE_ACTIVITY: 'device activity',
   STATISTIC: 'device statistics',
@@ -70,21 +71,21 @@ cr.define('management', function() {
   LOGS: 'logs',
   PRINT: 'print',
   CROSTINI: 'crostini'
-  };
+};
 
 
-  /**
+/**
  * @typedef {{
  *   messageId: string,
-   *   reportingType: !management.DeviceReportingType,
+ *   reportingType: !DeviceReportingType,
  * }}
  */
-  let DeviceReportingResponse;
-  // </if>
+export let DeviceReportingResponse;
+// </if>
 
-  /** @interface */
-  class ManagementBrowserProxy {
-    /** @return {!Promise<!Array<!management.Extension>>} */
+/** @interface */
+export class ManagementBrowserProxy {
+  /** @return {!Promise<!Array<!Extension>>} */
   getExtensions() {}
 
   // <if expr="chromeos">
@@ -95,73 +96,62 @@ cr.define('management', function() {
   getLocalTrustRootsInfo() {}
 
   /**
-     * @return {!Promise<!Array<management.DeviceReportingResponse>>} List of
+   * @return {!Promise<!Array<DeviceReportingResponse>>} List of
    *     items to display in device reporting section.
    */
   getDeviceReportingInfo() {}
   // </if>
 
-    /** @return {!Promise<!management.ManagedDataResponse>} */
+  /** @return {!Promise<!ManagedDataResponse>} */
   getContextualManagedData() {}
 
-    /** @return {!Promise<!management.ThreatProtectionInfo>} */
+  /** @return {!Promise<!ThreatProtectionInfo>} */
   getThreatProtectionInfo() {}
 
   /**
-     * @return {!Promise<!Array<!management.BrowserReportingResponse>>} The list
+   * @return {!Promise<!Array<!BrowserReportingResponse>>} The list
    *     of browser reporting info messages.
    */
   initBrowserReportingInfo() {}
-  }
+}
 
-  /** @implements {management.ManagementBrowserProxy} */
-  class ManagementBrowserProxyImpl {
+/** @implements {ManagementBrowserProxy} */
+export class ManagementBrowserProxyImpl {
   /** @override */
   getExtensions() {
-      return cr.sendWithPromise('getExtensions');
+    return sendWithPromise('getExtensions');
   }
 
   // <if expr="chromeos">
   /** @override */
   getLocalTrustRootsInfo() {
-      return cr.sendWithPromise('getLocalTrustRootsInfo');
+    return sendWithPromise('getLocalTrustRootsInfo');
   }
 
   /** @override */
   getDeviceReportingInfo() {
-      return cr.sendWithPromise('getDeviceReportingInfo');
+    return sendWithPromise('getDeviceReportingInfo');
   }
   // </if>
 
   /** @override */
   getContextualManagedData() {
-      return cr.sendWithPromise('getContextualManagedData');
+    return sendWithPromise('getContextualManagedData');
   }
 
   /** @override */
   getThreatProtectionInfo() {
-      return cr.sendWithPromise('getThreatProtectionInfo');
+    return sendWithPromise('getThreatProtectionInfo');
   }
 
   /** @override */
   initBrowserReportingInfo() {
-      return cr.sendWithPromise('initBrowserReportingInfo');
-    }
+    return sendWithPromise('initBrowserReportingInfo');
   }
+}
 
-  cr.addSingletonGetter(ManagementBrowserProxyImpl);
+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/resources/management/management_ui.js

@@ -2,18 +2,38 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('management', function() {
-  /**
+import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+import 'chrome://resources/cr_elements/cr_icons_css.m.js';
+import 'chrome://resources/cr_elements/cr_page_host_style_css.m.js';
+import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.m.js';
+import 'chrome://resources/cr_elements/hidden_style_css.m.js';
+import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import './icons.js';
+
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {BrowserReportingResponse, Extension, ManagementBrowserProxy, ManagementBrowserProxyImpl, ReportingType, ThreatProtectionInfo} from './management_browser_proxy.js';
+// <if expr="chromeos">
+import {DeviceReportingResponse, DeviceReportingType} from './management_browser_proxy.js';
+// </if>
+
+/**
  * @typedef {{
  *   messageIds: !Array<string>,
  *   icon: string,
  * }}
  */
-  let BrowserReportingData;
+let BrowserReportingData;
 
-  Polymer({
+Polymer({
   is: 'management-ui',
 
+  _template: html`{__html_template__}`,
+
   behaviors: [
     I18nBehavior,
     WebUIListenerBehavior,
@@ -22,20 +42,20 @@ cr.define('management', function() {
   properties: {
     /**
      * List of messages related to browser reporting.
-       * @private {?Array<!management.BrowserReportingData>}
+     * @private {?Array<!BrowserReportingData>}
      */
     browserReportingInfo_: Array,
 
     /**
      * List of messages related to browser reporting.
-       * @private {?Array<!management.Extension>}
+     * @private {?Array<!Extension>}
      */
     extensions_: Array,
 
     // <if expr="chromeos">
     /**
      * List of messages related to device reporting.
-       * @private {?Array<!management.DeviceReportingResponse>}
+     * @private {?Array<!DeviceReportingResponse>}
      */
     deviceReportingInfo_: Array,
 
@@ -67,17 +87,17 @@ cr.define('management', function() {
     /** @private */
     extensionReportingSubtitle_: String,
 
-      /** @private {!management.ThreatProtectionInfo} */
+    /** @private {!ThreatProtectionInfo} */
     threatProtectionInfo_: Object,
   },
 
-    /** @private {?management.ManagementBrowserProxy} */
+  /** @private {?ManagementBrowserProxy} */
   browserProxy_: null,
 
   /** @override */
   attached() {
     document.documentElement.classList.remove('loading');
-      this.browserProxy_ = management.ManagementBrowserProxyImpl.getInstance();
+    this.browserProxy_ = ManagementBrowserProxyImpl.getInstance();
     this.updateManagedFields_();
     this.initBrowserReportingInfo_();
     this.getThreatProtectionInfo_();
@@ -108,7 +128,7 @@ cr.define('management', function() {
   },
 
   /**
-     * @param {!Array<!management.BrowserReportingResponse>} reportingInfo
+   * @param {!Array<!BrowserReportingResponse>} reportingInfo
    * @private
    */
   onBrowserReportingInfoReceived_(reportingInfo) {
@@ -122,11 +142,11 @@ cr.define('management', function() {
     }, {});
 
     const reportingTypeOrder = {
-        [management.ReportingType.SECURITY]: 1,
-        [management.ReportingType.EXTENSIONS]: 2,
-        [management.ReportingType.USER]: 3,
-        [management.ReportingType.USER_ACTIVITY]: 4,
-        [management.ReportingType.DEVICE]: 5,
+      [ReportingType.SECURITY]: 1,
+      [ReportingType.EXTENSIONS]: 2,
+      [ReportingType.USER]: 3,
+      [ReportingType.USER_ACTIVITY]: 4,
+      [ReportingType.DEVICE]: 5,
     };
 
     this.browserReportingInfo_ =
@@ -180,30 +200,29 @@ cr.define('management', function() {
    * @private
    */
   showDeviceReportingInfo_() {
-      return !!this.deviceReportingInfo_ &&
-          this.deviceReportingInfo_.length > 0;
+    return !!this.deviceReportingInfo_ && this.deviceReportingInfo_.length > 0;
   },
 
   /**
-     * @param {management.DeviceReportingType} reportingType
+   * @param {DeviceReportingType} reportingType
    * @return {string} The associated icon.
    * @private
    */
   getIconForDeviceReportingType_(reportingType) {
     switch (reportingType) {
-        case management.DeviceReportingType.SUPERVISED_USER:
+      case DeviceReportingType.SUPERVISED_USER:
         return 'management:supervised-user';
-        case management.DeviceReportingType.DEVICE_ACTIVITY:
+      case DeviceReportingType.DEVICE_ACTIVITY:
         return 'management:timelapse';
-        case management.DeviceReportingType.STATISTIC:
+      case DeviceReportingType.STATISTIC:
         return 'management:bar-chart';
-        case management.DeviceReportingType.DEVICE:
+      case DeviceReportingType.DEVICE:
         return 'cr:computer';
-        case management.DeviceReportingType.LOGS:
+      case DeviceReportingType.LOGS:
         return 'management:report';
-        case management.DeviceReportingType.PRINT:
+      case DeviceReportingType.PRINT:
         return 'cr:print';
-        case management.DeviceReportingType.CROSTINI:
+      case DeviceReportingType.CROSTINI:
         return 'management:linux';
       default:
         return 'cr:computer';
@@ -229,21 +248,21 @@ cr.define('management', function() {
   },
 
   /**
-     * @param {management.ReportingType} reportingType
+   * @param {ReportingType} reportingType
    * @returns {string} The associated icon.
    * @private
    */
   getIconForReportingType_(reportingType) {
     switch (reportingType) {
-        case management.ReportingType.SECURITY:
+      case ReportingType.SECURITY:
         return 'cr:security';
-        case management.ReportingType.DEVICE:
+      case ReportingType.DEVICE:
         return 'cr:computer';
-        case management.ReportingType.EXTENSIONS:
+      case ReportingType.EXTENSIONS:
         return 'cr:extension';
-        case management.ReportingType.USER:
+      case ReportingType.USER:
         return 'management:account-circle';
-        case management.ReportingType.USER_ACTIVITY:
+      case ReportingType.USER_ACTIVITY:
         return 'management:public';
       default:
         return 'cr:security';
@@ -287,9 +306,4 @@ cr.define('management', function() {
       // </if>
     });
   },
-  });
-
-  return {
-    BrowserReportingData: BrowserReportingData,
-  };
 });

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"