Dynamically load resources for CrOS Media App.

This cl does the following:
- change html encoding to utf-8 to support translation files.
- add build-time grd file selection.
- build real resources (if src-internal is available) or mock resources (for tests/if
src-internal is unavailable).
- iterate over chromeos_media_app_bundle_resources to add them as resources to serve at runtime.

Submit after landing cl/277647372 & pushing to src-internal.

Design doc: go/cr-g3-remote-resources#bookmark=id.b1xx7d4iasyv

Bug: 996088, 1023739, b/141645032, b/142915800
Change-Id: Ib26a65b84f61b1f938e22c4242114448111c3469
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1895263Reviewed-by: Lei Zhang <thestig@chromium.org>
Reviewed-by: Ryo Hashimoto <hashimoto@chromium.org>
Reviewed-by: Trent Apted <tapted@chromium.org>
Commit-Queue: David Lei <dlei@google.com>
Cr-Commit-Position: refs/heads/master@{#714846}

chrome/chrome_paks.gni

@@ -4,6 +4,7 @@
 
 import("//build/config/locales.gni")
 import("//chrome/common/features.gni")
+import("//chromeos/components/media_app_ui/media_app_ui.gni")
 import("//extensions/buildflags/buildflags.gni")
 import("//ui/base/ui_features.gni")
 import("chrome_repack_locales.gni")
@@ -159,6 +160,7 @@ template("chrome_extra_paks") {
         "$root_gen_dir/chrome/multidevice_setup_resources.pak",
         "$root_gen_dir/chrome/os_settings_resources.pak",
         "$root_gen_dir/chromeos/chromeos_help_app_resources.pak",
+        "$root_gen_dir/chromeos/chromeos_media_app_bundle_resources.pak",
         "$root_gen_dir/chromeos/chromeos_resources.pak",
         "$root_gen_dir/third_party/ink/ink_resources.pak",
         "$root_gen_dir/ui/file_manager/file_manager_resources.pak",
@@ -171,6 +173,7 @@ template("chrome_extra_paks") {
         "//chrome/browser/resources/chromeos:multidevice_setup_resources",
         "//chromeos/resources",
         "//chromeos/resources:help_app_resources",
+        "//chromeos/resources:media_app_bundle_resources",
         "//third_party/ink:ink_resources",
         "//ui/file_manager:resources",
       ]

chromeos/components/media_app_ui/BUILD.gn

@@ -20,6 +20,7 @@ static_library("media_app_ui") {
   deps = [
     "//chromeos/constants",
     "//chromeos/resources",
+    "//chromeos/resources:media_app_bundle_resources",
     "//content/public/browser",
     "//ui/webui",
   ]

chromeos/components/media_app_ui/DEPS

 include_rules = [
   # Do not add chrome here (use a delegate instead).
+  "+chromeos/grit/chromeos_media_app_bundle_resources.h",
   "+chromeos/grit/chromeos_resources.h",
   "+content/public/browser",
   "+ui/webui",

chromeos/components/media_app_ui/media_app_guest_ui.cc

@@ -5,6 +5,8 @@
 #include "chromeos/components/media_app_ui/media_app_guest_ui.h"
 
 #include "chromeos/components/media_app_ui/url_constants.h"
+#include "chromeos/grit/chromeos_media_app_bundle_resources.h"
+#include "chromeos/grit/chromeos_media_app_bundle_resources_map.h"
 #include "chromeos/grit/chromeos_resources.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
@@ -16,12 +18,26 @@ namespace chromeos {
 content::WebUIDataSource* MediaAppGuestUI::CreateDataSource() {
   content::WebUIDataSource* source =
       content::WebUIDataSource::Create(kChromeUIMediaAppGuestHost);
+  // Add resources from chromeos_resources.pak.
   source->AddResourcePath("app.html", IDR_MEDIA_APP_APP_HTML);
-  source->AddResourcePath("js/app_main.js", IDR_MEDIA_APP_APP_JS);
+
+  // Add resources from chromeos_media_app_bundle.pak that are also needed for
+  // mocks. If enable_cros_media_app = true, then these calls will happen a
+  // second time with the same parameters. When false, we need these to specify
+  // what routes are mocked by files in ./resources/mock/js. The loop is
+  // irrelevant in that case.
+  source->AddResourcePath("js/app_main.js", IDR_MEDIA_APP_APP_MAIN_JS);
   source->AddResourcePath("js/app_image_handler_module.js",
-                          IDR_MEDIA_APP_IMAGE_HANDLER_MODULE_JS);
+                          IDR_MEDIA_APP_APP_IMAGE_HANDLER_MODULE_JS);
   source->AddResourcePath("js/app_drop_target_module.js",
-                          IDR_MEDIA_APP_DROP_TARGET_MODULE_JS);
+                          IDR_MEDIA_APP_APP_DROP_TARGET_MODULE_JS);
+
+  // Add all resources from chromeos_media_app_bundle.pak.
+  for (size_t i = 0; i < kChromeosMediaAppBundleResourcesSize; i++) {
+    source->AddResourcePath(kChromeosMediaAppBundleResources[i].name,
+                            kChromeosMediaAppBundleResources[i].value);
+  }
+
   source->DisableDenyXFrameOptions();
   return source;
 }

chromeos/components/media_app_ui/media_app_ui.cc

@@ -6,6 +6,7 @@
 
 #include "chromeos/components/media_app_ui/media_app_guest_ui.h"
 #include "chromeos/components/media_app_ui/url_constants.h"
+#include "chromeos/grit/chromeos_media_app_bundle_resources.h"
 #include "chromeos/grit/chromeos_resources.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
@@ -17,10 +18,14 @@ namespace {
 content::WebUIDataSource* CreateHostDataSource() {
   content::WebUIDataSource* source =
       content::WebUIDataSource::Create(kChromeUIMediaAppHost);
+
+  // Add resources from chromeos_resources.pak.
   source->SetDefaultResource(IDR_MEDIA_APP_INDEX_HTML);
   source->AddResourcePath("pwa.html", IDR_MEDIA_APP_PWA_HTML);
   source->AddResourcePath("manifest.json", IDR_MEDIA_APP_MANIFEST);
-  source->AddResourcePath("assets/app_icon_256.png", IDR_MEDIA_APP_ICON_256);
+  // Add resources from chromeos_media_app_bundle.pak.
+  source->AddResourcePath("system_assets/app_icon_256.png",
+                          IDR_MEDIA_APP_APP_ICON_256_PNG);
   return source;
 }
 

chromeos/components/media_app_ui/resources/app.html

@@ -2,6 +2,7 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 <!DOCTYPE html>
+<meta charset="utf-8"/>
 <style>
   body {
     overflow: hidden;

chromeos/components/media_app_ui/resources/manifest.json

@@ -7,7 +7,7 @@
   "background_color": "#3c4043",
   "icons": [
     {
-      "src": "assets/app_icon_256.png",
+      "src": "system_assets/app_icon_256.png",
       "sizes": "256x256",
       "type": "image/png"
     }

chromeos/components/media_app_ui/resources/mock/media_app_bundle_mock_resources.grd

+<?xml version="1.0" encoding="utf-8"?>
+<grit current_release="1" latest_public_release="0" output_all_resource_defines="false">
+  <outputs>
+    <output filename="grit/chromeos_media_app_bundle_resources.h" type="rc_header">
+      <emit emit_type="prepend"/>
+    </output>
+    <output filename="grit/chromeos_media_app_bundle_resources_map.cc" type="resource_file_map_source"/>
+    <output filename="grit/chromeos_media_app_bundle_resources_map.h" type="resource_map_header"/>
+    <output filename="chromeos_media_app_bundle_resources.pak" type="data_package"/>
+  </outputs>
+  <release seq="1">
+    <includes>
+      <include name="IDR_MEDIA_APP_APP_MAIN_JS"
+          file="js/app_main.js"
+          type="BINDATA" />
+      <include name="IDR_MEDIA_APP_APP_IMAGE_HANDLER_MODULE_JS"
+          file="js/mock_module.js"
+          type="BINDATA" />
+      <include name="IDR_MEDIA_APP_APP_DROP_TARGET_MODULE_JS"
+          file="js/mock_module.js"
+          type="BINDATA" />
+      <!-- Use a placeholder icon when enable_cros_media_app = false. -->
+      <include name="IDR_MEDIA_APP_APP_ICON_256_PNG"
+            file="../../../../../ui/file_manager/gallery/images/icon256.png"
+            type="BINDATA" />
+    </includes>
+  </release>
+</grit>
\ No newline at end of file

chromeos/resources/BUILD.gn

@@ -54,3 +54,22 @@ grit("help_app_resources") {
   ]
   output_dir = "$root_gen_dir/chromeos"
 }
+
+grit("media_app_bundle_resources") {
+  if (enable_cros_media_app) {
+    # Obtained via src-internal/DEPS.
+    source = "../components/media_app_ui/resources/app/app/media_app_bundle_resources.grd"
+  } else {
+    source = "../components/media_app_ui/resources/mock/media_app_bundle_mock_resources.grd"
+  }
+
+  source_is_generated = true
+
+  outputs = [
+    "grit/chromeos_media_app_bundle_resources.h",
+    "grit/chromeos_media_app_bundle_resources_map.cc",
+    "grit/chromeos_media_app_bundle_resources_map.h",
+    "chromeos_media_app_bundle_resources.pak",
+  ]
+  output_dir = "$root_gen_dir/chromeos"
+}

chromeos/resources/media_app_resources.grdp

@@ -15,38 +15,4 @@
   <include name="IDR_MEDIA_APP_APP_HTML"
       file="../components/media_app_ui/resources/app.html"
       type="BINDATA" />
-  <if expr="enable_cros_media_app">
-    <then>
-      <include name="IDR_MEDIA_APP_APP_JS"
-          file="../components/media_app_ui/resources/app/app/js/app_main.js"
-          type="BINDATA" />
-      <include name="IDR_MEDIA_APP_IMAGE_HANDLER_MODULE_JS"
-          file="../components/media_app_ui/resources/app/app/js/app_image_handler_module.js"
-          type="BINDATA" />
-      <include name="IDR_MEDIA_APP_DROP_TARGET_MODULE_JS"
-          file="../components/media_app_ui/resources/app/app/js/app_drop_target_module.js"
-          type="BINDATA" />
-
-      <!-- Note the icon is fetched from the privileged origin. -->
-      <include name="IDR_MEDIA_APP_ICON_256"
-            file="../components/media_app_ui/resources/app/app/assets/app_icon_256.png"
-            type="BINDATA" />
-    </then>
-    <else>
-      <include name="IDR_MEDIA_APP_APP_JS"
-          file="../components/media_app_ui/resources/mock/js/app_main.js"
-          type="BINDATA" />
-      <include name="IDR_MEDIA_APP_IMAGE_HANDLER_MODULE_JS"
-          file="../components/media_app_ui/resources/mock/js/mock_module.js"
-          type="BINDATA" />
-      <include name="IDR_MEDIA_APP_DROP_TARGET_MODULE_JS"
-          file="../components/media_app_ui/resources/mock/js/mock_module.js"
-          type="BINDATA" />
-
-      <!-- Use a placeholder icon when enable_cros_media_app = false. -->
-      <include name="IDR_MEDIA_APP_ICON_256"
-            file="../../ui/file_manager/gallery/images/icon256.png"
-            type="BINDATA" />
-    </else>
-  </if>
 </grit-part>

tools/gritsettings/resource_ids

@@ -212,9 +212,18 @@
   "chromeos/components/help_app_ui/resources/help_app_resources.grd": {
     "includes": [14580],
   },
-  "chromeos/resources/chromeos_resources.grd": {
+  # Both media_app_bundle_resources.grd and media_app_bundle_mock_resources.grd start
+  # with the same id because only one of them is built depending on if src_internal is
+  # available. Lower bound for number of resource ids is number of languages (74).
+  "chromeos/components/media_app_ui/resources/app/app/media_app_bundle_resources.grd": {
+    "includes": [14680],
+  },
+  "chromeos/components/media_app_ui/resources/mock/media_app_bundle_mock_resources.grd": {
     "includes": [14680],
   },
+  "chromeos/resources/chromeos_resources.grd": {
+    "includes": [14780],
+  },
   # END chromeos/ section.
 
   # START components/ section.