Downloads WebUI: Migrate to Polymer3

Updating chrome://downloads to use Polymer 3/JS modules and removing usage of HTML imports Size comparison (~5.7% reduction) Before: vulcanized.html 90k crisper.js 135k Total 225k After: vulcanized.html 1.1k downloads.js 211k Total: 212.1k Bug: 1022215 Change-Id: I788d8d0534324b1ac68542b4d867265f74953110 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1910748 Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Rebekah Potter <rbpotter@chromium.org> Cr-Commit-Position: refs/heads/master@{#716466}
chromium · Nov 19, 2019 · ffb30cf · ffb30cf
1 parent b8ffd1e
commit ffb30cf
Show file tree

Hide file tree

Showing 34 changed files with 441 additions and 462 deletions.
diff --git a/chrome/browser/resources/BUILD.gn b/chrome/browser/resources/BUILD.gn
@@ -244,6 +244,7 @@ if (!is_android) {
       source = "downloads/downloads_resources.grd"
 
       deps = [
+        "//chrome/browser/resources/downloads:polymer3_elements",
         "//chrome/browser/ui/webui/downloads:mojo_bindings_js",
       ]
     }

diff --git a/chrome/browser/resources/downloads/BUILD.gn b/chrome/browser/resources/downloads/BUILD.gn
@@ -5,6 +5,7 @@
 import("//chrome/common/features.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
+import("//tools/polymer/polymer.gni")
 import("../optimize_webui.gni")
 
 if (optimize_webui) {
@@ -15,17 +16,18 @@ if (optimize_webui) {
     host = "downloads"
     html_in_files = [ "downloads.html" ]
     html_out_files = [ "vulcanized.html" ]
-    insert_in_head = "<base href=chrome://downloads>"
     input = rebase_path("$target_gen_dir/$unpak_folder", root_build_dir)
-    js_out_files = [ "crisper.js" ]
+    js_out_files = [ "downloads.js" ]
+    js_module_in_files = [ "downloads.js" ]
     excludes = [
-      "chrome://resources/js/mojo_bindings_lite.js",
+      "chrome://resources/js/cr.m.js",
+      "chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js",
       "downloads.mojom-lite.js",
-      "downloads.mojom-lite.html",
     ]
 
     deps = [
       ":unpak",
+      "../../../../ui/webui/resources:modulize",
     ]
   }
 
@@ -52,6 +54,7 @@ if (optimize_webui) {
       downloads_pak_file,
     ]
     deps = [
+      ":polymer3_elements",
       "//chrome/browser/ui/webui/downloads:mojo_bindings_js",
     ]
     grit_flags = [
@@ -63,6 +66,7 @@ if (optimize_webui) {
 }
 
 js_type_check("closure_compile") {
+  is_polymer3 = true
   deps = [
     ":browser_proxy",
     ":constants",
@@ -76,22 +80,20 @@ js_type_check("closure_compile") {
 js_library("browser_proxy") {
   deps = [
     "//chrome/browser/ui/webui/downloads:mojo_bindings_js_library_for_compile",
-    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:cr.m",
   ]
   externs_list = [ "externs.js" ]
 }
 
 js_library("constants") {
-  deps = [
-    "//ui/webui/resources/js:cr",
-  ]
 }
 
 js_library("icon_loader") {
   deps = [
-    "//ui/webui/resources/js:assert",
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:icon",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:icon.m",
+    "//ui/webui/resources/js:promise_resolver.m",
   ]
 }
 
@@ -100,15 +102,13 @@ js_library("item") {
     ":browser_proxy",
     ":constants",
     ":icon_loader",
-    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager",
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:load_time_data",
-    "//ui/webui/resources/js:util",
-    "//ui/webui/resources/js/cr/ui:focus_row",
-    "//ui/webui/resources/js/cr/ui:focus_row_behavior",
-    "//ui/webui/resources/js/cr/ui:focus_without_ink",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js/cr/ui:focus_row_behavior.m",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink.m",
   ]
-  externs_list = [ "$externs_path/pending_polymer.js" ]
 }
 
 js_library("manager") {
@@ -117,33 +117,68 @@ js_library("manager") {
     ":item",
     ":search_service",
     ":toolbar",
-    "//third_party/polymer/v1_0/components-chromium/iron-list:iron-list-extracted",
-    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager",
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:find_shortcut_behavior",
-    "//ui/webui/resources/js:load_time_data",
-    "//ui/webui/resources/js:util",
+    "//third_party/polymer/v3_0/components-chromium/iron-a11y-announcer",
+    "//third_party/polymer/v3_0/components-chromium/iron-list",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:find_shortcut_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js:promise_resolver.m",
+    "//ui/webui/resources/js:util.m",
   ]
   externs_list = [ "$externs_path/chrome_send.js" ]
 }
 
 js_library("search_service") {
   deps = [
     ":browser_proxy",
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:load_time_data",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 
 js_library("toolbar") {
   deps = [
     ":browser_proxy",
     ":search_service",
-    "//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted",
-    "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu",
-    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager",
-    "//ui/webui/resources/cr_elements/cr_toolbar:cr_toolbar",
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:util",
+    "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu.m",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager.m",
+    "//ui/webui/resources/cr_elements/cr_toolbar:cr_toolbar.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js:util.m",
   ]
 }
+
+group("polymer3_elements") {
+  deps = [
+    ":icons_module",
+    ":item_module",
+    ":manager_module",
+    ":toolbar_module",
+  ]
+}
+
+polymer_modulizer("item") {
+  html_file = "item.html"
+  js_file = "item.js"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("manager") {
+  html_file = "manager.html"
+  js_file = "manager.js"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("toolbar") {
+  html_file = "toolbar.html"
+  js_file = "toolbar.js"
+  html_type = "v3-ready"
+}
+
+polymer_modulizer("icons") {
+  html_file = "icons.html"
+  js_file = "icons.js"
+  html_type = "v3-ready"
+}
diff --git a/chrome/browser/resources/downloads/browser_proxy.html b/chrome/browser/resources/downloads/browser_proxy.html
diff --git a/chrome/browser/resources/downloads/browser_proxy.js b/chrome/browser/resources/downloads/browser_proxy.js
@@ -2,8 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('downloads', function() {
-  class BrowserProxy {
+import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+import './downloads.mojom-lite.js';
+
+  export class BrowserProxy {
     constructor() {
       /** @type {downloads.mojom.PageCallbackRouter} */
       this.callbackRouter = new downloads.mojom.PageCallbackRouter();
@@ -18,7 +21,4 @@ cr.define('downloads', function() {
     }
   }
 
-  cr.addSingletonGetter(BrowserProxy);
-
-  return {BrowserProxy: BrowserProxy};
-});
+  addSingletonGetter(BrowserProxy);
diff --git a/chrome/browser/resources/downloads/constants.html b/chrome/browser/resources/downloads/constants.html
diff --git a/chrome/browser/resources/downloads/constants.js b/chrome/browser/resources/downloads/constants.js
@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('downloads', function() {
   /**
    * Explains why a download is in DANGEROUS state.
    * @enum {string}
    */
-  const DangerType = {
+  export const DangerType = {
     NOT_DANGEROUS: 'NOT_DANGEROUS',
     DANGEROUS_FILE: 'DANGEROUS_FILE',
     DANGEROUS_URL: 'DANGEROUS_URL',
@@ -28,17 +27,11 @@ cr.define('downloads', function() {
    * DownloadsDOMHandler::CreateDownloadItemValue
    * @enum {string}
    */
-  const States = {
+  export const States = {
     IN_PROGRESS: 'IN_PROGRESS',
     CANCELLED: 'CANCELLED',
     COMPLETE: 'COMPLETE',
     PAUSED: 'PAUSED',
     DANGEROUS: 'DANGEROUS',
     INTERRUPTED: 'INTERRUPTED',
   };
-
-  return {
-    DangerType: DangerType,
-    States: States,
-  };
-});
diff --git a/chrome/browser/resources/downloads/downloads.html b/chrome/browser/resources/downloads/downloads.html
@@ -3,9 +3,7 @@
     $i18n{a11yenhanced}>
 <head>
   <meta charset="utf-8">
-<if expr="not optimize_webui">
   <base href="chrome://downloads">
-</if>
   <title>$i18n{title}</title>
   <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
   <style>
@@ -38,9 +36,6 @@
 <body>
   <downloads-manager></downloads-manager>
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
-  <link rel="import" href="chrome://resources/html/cr.html">
-  <link rel="import" href="chrome://resources/html/polymer.html">
-  <link rel="import" href="i18n_setup.html">
-  <link rel="import" href="manager.html">
+  <script type="module" src="downloads.js"></script>
 </body>
 </html>
diff --git a/chrome/browser/resources/downloads/downloads.js b/chrome/browser/resources/downloads/downloads.js
@@ -0,0 +1,10 @@
+// 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 './manager.js';
+
+export {BrowserProxy} from './browser_proxy.js';
+export {DangerType, States} from './constants.js';
+export {IconLoader} from './icon_loader.js';
+export {SearchService} from './search_service.js';
diff --git a/chrome/browser/resources/downloads/downloads.mojom-lite.html b/chrome/browser/resources/downloads/downloads.mojom-lite.html
diff --git a/chrome/browser/resources/downloads/downloads_resources.grd b/chrome/browser/resources/downloads/downloads_resources.grd
@@ -18,67 +18,48 @@
       <include name="IDR_DOWNLOADS_IMAGES_NO_DOWNLOADS_SVG"
           file="images\no_downloads.svg"
           type="BINDATA" />
-      <include name="IDR_DOWNLOADS_MOJO_LITE_HTML"
-          file="downloads.mojom-lite.html"
-          type="BINDATA" />
       <include name="IDR_DOWNLOADS_MOJO_LITE_JS"
           file="${root_gen_dir}\chrome\browser\ui\webui\downloads\downloads.mojom-lite.js"
           use_base_dir="false"
           type="BINDATA" />
+      <include name="IDR_DOWNLOADS_MANAGER_JS"
+          file="${root_gen_dir}\chrome\browser\resources\downloads\manager.js"
+          use_base_dir="false"
+          preprocess="true"
+          type="chrome_html" />
+      <include name="IDR_DOWNLOADS_ITEM_JS"
+          file="${root_gen_dir}\chrome\browser\resources\downloads\item.js"
+          use_base_dir="false"
+          type="chrome_html" />
+      <include name="IDR_DOWNLOADS_TOOLBAR_JS"
+          file="${root_gen_dir}\chrome\browser\resources\downloads\toolbar.js"
+          use_base_dir="false"
+          type="chrome_html" />
+      <include name="IDR_DOWNLOADS_ICONS_JS"
+          file="${root_gen_dir}\chrome\browser\resources\downloads\icons.js"
+          use_base_dir="false"
+          type="chrome_html" />
     </includes>
     <structures>
       <structure name="IDR_DOWNLOADS_DOWNLOADS_HTML"
           file="downloads.html"
           preprocess="true"
           type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_BROWSER_PROXY_HTML"
-          file="browser_proxy.html"
-          type="chrome_html" />
       <structure name="IDR_DOWNLOADS_BROWSER_PROXY_JS"
           file="browser_proxy.js"
           type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_CONSTANTS_HTML"
-          file="constants.html"
-          type="chrome_html" />
       <structure name="IDR_DOWNLOADS_CONSTANTS_JS"
           file="constants.js"
           type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_I18N_SETUP_HTML"
-          file="i18n_setup.html"
-          type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_ICON_LOADER_HTML"
-          file="icon_loader.html"
+      <structure name="IDR_DOWNLOADS_DOWNLOADS_JS"
+          file="downloads.js"
           type="chrome_html" />
       <structure name="IDR_DOWNLOADS_ICON_LOADER_JS"
-          file="icon_loader.js" type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_ICONS_HTML"
-          file="icons.html"
-          type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_ITEM_HTML"
-          file="item.html"
-          type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_ITEM_JS"
-          file="item.js"
-          type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_MANAGER_HTML"
-          file="manager.html"
-          type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_MANAGER_JS"
-          file="manager.js"
-          preprocess="true"
-          type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_SEARCH_SERVICE_HTML"
-          file="search_service.html"
+          file="icon_loader.js"
           type="chrome_html" />
       <structure name="IDR_DOWNLOADS_SEARCH_SERVICE_JS"
           file="search_service.js"
           type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_TOOLBAR_HTML"
-          file="toolbar.html"
-          type="chrome_html" />
-      <structure name="IDR_DOWNLOADS_TOOLBAR_JS"
-          file="toolbar.js"
-          type="chrome_html" />
     </structures>
   </release>
 </grit>
diff --git a/chrome/browser/resources/downloads/downloads_resources_vulcanized.grd b/chrome/browser/resources/downloads/downloads_resources_vulcanized.grd
@@ -18,9 +18,6 @@
       <include name="IDR_DOWNLOADS_IMAGES_NO_DOWNLOADS_SVG"
                file="images\no_downloads.svg"
                type="BINDATA" />
-      <include name="IDR_DOWNLOADS_MOJO_LITE_HTML"
-               file="downloads.mojom-lite.html"
-               type="BINDATA" />
       <include name="IDR_DOWNLOADS_MOJO_LITE_JS"
                file="${root_gen_dir}\chrome\browser\ui\webui\downloads\downloads.mojom-lite.js"
                use_base_dir="false"
@@ -32,8 +29,8 @@
                preprocess="true"
                compress="gzip"
                type="BINDATA" />
-      <include name="IDR_DOWNLOADS_CRISPER_JS"
-               file="${root_gen_dir}\chrome\browser\resources\downloads\crisper.js"
+      <include name="IDR_DOWNLOADS_DOWNLOADS_ROLLUP_JS"
+               file="${root_gen_dir}\chrome\browser\resources\downloads\downloads.js"
                use_base_dir="false"
                preprocess="true"
                compress="gzip"

diff --git a/chrome/browser/resources/downloads/i18n_setup.html b/chrome/browser/resources/downloads/i18n_setup.html