Make feedback panel resources load lazily

Moves the feedback panel JS files out of the main script bundle, into
the lazily loaded set used for Polymer elements.

Also inline the background image resources for the button for now: we
will replace them in future CL with a cr-icon-button. Remove the icon
pause/expand/cancel SVG images: no longer used.

Bug: 947388
Change-Id: I0064b1b35a62d5f06674eada04cb0cd85191dc3b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1692110Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#676289}

ui/file_manager/file_manager/foreground/elements/BUILD.gn

@@ -30,6 +30,11 @@ js_type_check("closure_compile_module") {
     ":files_toast",
     ":files_toggle_ripple",
     ":files_tooltip",
+    ":xf_activity_complete",
+    ":xf_button",
+    ":xf_circular_progress",
+    ":xf_display_panel",
+    ":xf_panel_item",
   ]
 }
 
@@ -127,6 +132,9 @@ js_library("xf_activity_complete") {
 }
 
 js_library("xf_button") {
+  deps = [
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button",
+  ]
 }
 
 js_library("xf_circular_progress") {

ui/file_manager/file_manager/foreground/elements/elements_bundle.html

@@ -14,4 +14,5 @@
 <link rel="import" href="files_toast.html">
 <link rel="import" href="files_toggle_ripple.html">
 <link rel="import" href="files_tooltip.html">
+<link rel="import" href="files_xf_elements.html">
 <link rel="import" href="icons.html">

ui/file_manager/file_manager/foreground/elements/files_xf_elements.html

+<!-- 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.
+  -->
+<script src="xf_activity_complete.js"></script>
+<script src="xf_button.js"></script>
+<script src="xf_circular_progress.js"></script>
+<script src="xf_display_panel.js"></script>
+<script src="xf_panel_item.js"></script>

ui/file_manager/file_manager/foreground/elements/xf_button.js

@@ -34,17 +34,33 @@ class PanelButton extends HTMLElement {
               }
 
               :host([data-category='pause']) {
-                background: url(../images/files/ui/pause.svg) no-repeat center;
+                background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR\
+                  0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczNnB4JyBoZWlnaHQ\
+                  9JzM2cHgnIHZpZXdCb3g9JzAgMCAzNiAzNic+CiAgICA8ZyBzdHJva2U9JyM\
+                  1RjYzNjgnIHN0cm9rZS13aWR0aD0nMyc+CiAgICAgICAgPGxpbmUgeDE9JzE\
+                  1JyB5MT0nMTInIHgyPScxNScgeTI9JzI0Jy8+CiAgICAgICAgPGxpbmUgeDE\
+                  9JzIxJyB5MT0nMTInIHgyPScyMScgeTI9JzI0Jy8+CiAgICA8L2c+Cjwvc3Z\
+                  nPg==') no-repeat center;
               }
 
-              :host([data-category='cancel']),
-              :host([data-category='dismiss']) {
-                background: url(../images/files/ui/cancel.svg) no-repeat center;
+              :host([data-category='cancel']) {
+                background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR\
+                  0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczNnB4JyBoZWlnaHQ\
+                  9JzM2cHgnIHZpZXdCb3g9JzAgMCAzNiAzNic+CiAgICA8ZyBzdHJva2U9JyM\
+                  1RjYzNjgnIHN0cm9rZS13aWR0aD0nMic+CiAgICAgICAgPGxpbmUgeDE9JzE\
+                  yJyB5MT0nMTInIHgyPScyNCcgeTI9JzI0Jy8+CiAgICAgICAgPGxpbmUgeDE\
+                  9JzI0JyB5MT0nMTInIHgyPScxMicgeTI9JzI0Jy8+CiAgICA8L2c+Cjwvc3Z\
+                  nPg==') no-repeat center;
               }
 
               :host([data-category='expand']),
               :host([data-category='collapse']) {
-                background: url(../images/files/ui/expand.svg) no-repeat center;
+                background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR\
+                  0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczNnB4JyBoZWlnaHQ\
+                  9JzM2cHgnIHZpZXdCb3g9JzAgMCAzNiAzNic+CiAgICA8ZyBzdHJva2U9JyM\
+                  1RjYzNjgnIHN0cm9rZS13aWR0aD0nMic+CiAgICAgICAgPHBhdGggZmlsbD0\
+                  ibm9uZSIgZD0nTTEyLDIxbDYsLTYgNiw2Jy8+CiAgICA8L2c+Cjwvc3ZnPg=='
+                  ) no-repeat center;
               }
 
               @keyframes setcollapse {

ui/file_manager/file_manager/foreground/images/files/ui/cancel.svg

-<svg xmlns='http://www.w3.org/2000/svg' width='36px' height='36px' viewBox='0 0 36 36'>
-    <g stroke='#5F6368' stroke-width='2'>
-        <line x1='12' y1='12' x2='24' y2='24'/>
-        <line x1='24' y1='12' x2='12' y2='24'/>
-    </g>
-</svg>

ui/file_manager/file_manager/foreground/images/files/ui/expand.svg

-<svg xmlns='http://www.w3.org/2000/svg' width='36px' height='36px' viewBox='0 0 36 36'>
-    <g stroke='#5F6368' stroke-width='2'>
-        <path fill="none" d='M12,21l6,-6 6,6'/>
-    </g>
-</svg>

ui/file_manager/file_manager/foreground/images/files/ui/pause.svg

-<svg xmlns='http://www.w3.org/2000/svg' width='36px' height='36px' viewBox='0 0 36 36'>
-    <g stroke='#5F6368' stroke-width='3'>
-        <line x1='15' y1='12' x2='15' y2='24'/>
-        <line x1='21' y1='12' x2='21' y2='24'/>
-    </g>
-</svg>

ui/file_manager/file_manager/foreground/js/main_scripts.js

@@ -181,11 +181,6 @@
 // <include src="main_window_component.js">
 // <include src="../../../base/js/filtered_volume_manager.js">
 // <include src="webui_command_extender.js">
-// <include src="../elements/xf_activity_complete.js">
-// <include src="../elements/xf_button.js">
-// <include src="../elements/xf_circular_progress.js">
-// <include src="../elements/xf_display_panel.js">
-// <include src="../elements/xf_panel_item.js">
 
 // // For accurate load performance tracking place main.js should be
 // // the last include to include.

ui/file_manager/file_manager/test/scripts/create_test_main.py

@@ -236,6 +236,7 @@ for filename, substitutions in (
     ('foreground/elements/files_toast.html', ()),
     ('foreground/elements/files_toggle_ripple.html', ()),
     ('foreground/elements/files_tooltip.html', ()),
+    ('foreground/elements/files_xf_elements.html', ()),
     ('foreground/elements/icons.html', ()),
     ):
   buf = i18n(read('ui/file_manager/file_manager/' + filename))

ui/file_manager/file_manager_resources.grd

@@ -57,6 +57,12 @@
       <include name="IDR_FILE_MANAGER_ELEMENTS_FILES_TOOLTIP_HTML" file="file_manager/foreground/elements/files_tooltip.html" type="BINDATA" />
       <include name="IDR_FILE_MANAGER_ELEMENTS_FILES_TOOLTIP_JS" file="file_manager/foreground/elements/files_tooltip.js" type="BINDATA" />
       <include name="IDR_FILE_MANAGER_ELEMENTS_ICONS_HTML" file="file_manager/foreground/elements/icons.html" type="BINDATA" />
+      <include name="IDR_FILE_MANAGER_ELEMENTS_XF_ACTIVITY_COMPLETE_JS" file="file_manager/foreground/elements/xf_activity_complete.js" type="BINDATA" />
+      <include name="IDR_FILE_MANAGER_ELEMENTS_XF_BUTTON_JS" file="file_manager/foreground/elements/xf_button.js" type="BINDATA" />
+      <include name="IDR_FILE_MANAGER_ELEMENTS_XF_CIRCULAR_PROGRESS_JS" file="file_manager/foreground/elements/xf_circular_progress.js" type="BINDATA" />
+      <include name="IDR_FILE_MANAGER_ELEMENTS_XF_DISPLAY_PANEL_JS" file="file_manager/foreground/elements/xf_display_panel.js" type="BINDATA" />
+      <include name="IDR_FILE_MANAGER_ELEMENTS_XF_PANEL_ITEM_JS" file="file_manager/foreground/elements/xf_panel_item.js" type="BINDATA" />
+      <include name="IDR_FILE_MANAGER_ELEMENTS_FILES_XF_ELEMENTS_HTML" file="file_manager/foreground/elements/files_xf_elements.html" type="BINDATA" />
 
       <!-- Scripts required by the metadata parser worker. -->
       <include name="IDR_FILE_MANAGER_UTIL" file="file_manager/common/js/util.js" type="BINDATA" />