[CCA] Move things out of src/ and avoid using relative path

For historical reason, we put our js files, html files and resources
under src/ directory of CCA directory. However, we reference the
resource differently on platform app/SWA.

On platform app, a resource
foo.js is referenced as "chrome-extension://.../js/foo.js".
While on SWA, it is references as: "chrome://.../src/js/foo.js".

We should align the path between two versions of CCA and further replace
the relative path by absolute paths in resource files.
By doing so, we can further support launching CCA (SWA) when typing
random CCA URL in Chrome. (e.g. chrome://camera-app/foo)

NOPRESUBMIT=true

Bug: 980846
Test: cca deploy [DUT]
Test: cca test [DUT]
Test: Both version (Platform app / SWA) works normally
Test: tast run [DUT] camera.CCAUI*
Change-Id: I845fe698ad92ee8da003b2ac3d12519509bdedd4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2434188
Commit-Queue: Wei Lee <wtlee@chromium.org>
Reviewed-by: Inker Kuo <inker@chromium.org>
Reviewed-by: Lei Zhang <thestig@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811569}

chrome/chrome_repack_locales.gni

@@ -67,7 +67,7 @@ template("chrome_repack_locales") {
       source_patterns += [
         "${root_gen_dir}/ash/shortcut_viewer/strings/shortcut_viewer_strings_",
         "${root_gen_dir}/ash/strings/ash_strings_",
-        "${root_gen_dir}/chromeos/components/camera_app_ui/resources/src/strings/chromeos_camera_app_strings_",
+        "${root_gen_dir}/chromeos/components/camera_app_ui/resources/strings/chromeos_camera_app_strings_",
         "${root_gen_dir}/chromeos/strings/chromeos_strings_",
         "${root_gen_dir}/remoting/resources/",
         "${root_gen_dir}/ui/chromeos/strings/ui_chromeos_strings_",
@@ -75,7 +75,7 @@ template("chrome_repack_locales") {
       deps += [
         "//ash/shortcut_viewer/strings",
         "//ash/strings",
-        "//chromeos/components/camera_app_ui/resources/src/strings",
+        "//chromeos/components/camera_app_ui/resources/strings",
         "//chromeos/strings",
         "//remoting/resources",
         "//ui/chromeos/strings",

chromeos/components/camera_app_ui/BUILD.gn

@@ -22,7 +22,7 @@ static_library("camera_app_ui") {
   deps = [
     ":mojo_bindings",
     ":mojo_bindings_js",
-    "resources/src/strings",
+    "resources/strings",
     "//ash/public/cpp",
     "//chromeos/components/web_applications",
     "//chromeos/constants",

chromeos/components/camera_app_ui/camera_app_ui.gni

@@ -5,5 +5,5 @@ declare_args() {
   # The directory where to store generated resource files for strings. It is
   # used by SWA version of CCA.
   gen_camera_app_dir =
-      "$root_gen_dir/chromeos/components/camera_app_ui/resources/src"
+      "$root_gen_dir/chromeos/components/camera_app_ui/resources"
 }

chromeos/components/camera_app_ui/resources.h

@@ -5,7 +5,7 @@
 #ifndef CHROMEOS_COMPONENTS_CAMERA_APP_UI_RESOURCES_H_
 #define CHROMEOS_COMPONENTS_CAMERA_APP_UI_RESOURCES_H_
 
-#include "chromeos/components/camera_app_ui/resources/src/strings/grit/chromeos_camera_app_strings.h"
+#include "chromeos/components/camera_app_ui/resources/strings/grit/chromeos_camera_app_strings.h"
 #include "chromeos/grit/chromeos_camera_app_resources.h"
 #include "chromeos/grit/chromeos_camera_app_resources_map.h"
 #include "mojo/public/js/grit/mojo_bindings_resources.h"
@@ -109,30 +109,30 @@ const struct {
   const char* path;
   int id;
 } kGritResourceMap[] = {
-    {"src/js/browser_proxy/browser_proxy.js",
+    {"js/browser_proxy/browser_proxy.js",
      IDR_CAMERA_WEBUI_BROWSER_PROXY_JS},
-    {"src/js/mojo/camera_intent.mojom-lite.js",
+    {"js/mojo/camera_intent.mojom-lite.js",
      IDR_CAMERA_CAMERA_INTENT_MOJOM_LITE_JS},
-    {"src/js/mojo/image_capture.mojom-lite.js",
+    {"js/mojo/image_capture.mojom-lite.js",
      IDR_CAMERA_IMAGE_CAPTURE_MOJOM_LITE_JS},
-    {"src/js/mojo/camera_common.mojom-lite.js",
+    {"js/mojo/camera_common.mojom-lite.js",
      IDR_CAMERA_CAMERA_COMMON_MOJOM_LITE_JS},
-    {"src/js/mojo/camera_metadata.mojom-lite.js",
+    {"js/mojo/camera_metadata.mojom-lite.js",
      IDR_CAMERA_CAMERA_METADATA_MOJOM_LITE_JS},
-    {"src/js/mojo/camera_metadata_tags.mojom-lite.js",
+    {"js/mojo/camera_metadata_tags.mojom-lite.js",
      IDR_CAMERA_CAMERA_METADATA_TAGS_MOJOM_LITE_JS},
-    {"src/js/mojo/camera_app.mojom-lite.js",
+    {"js/mojo/camera_app.mojom-lite.js",
      IDR_CAMERA_CAMERA_APP_MOJOM_LITE_JS},
-    {"src/js/mojo/mojo_bindings_lite.js", IDR_MOJO_MOJO_BINDINGS_LITE_JS},
-    {"src/js/mojo/camera_app_helper.mojom-lite.js",
+    {"js/mojo/mojo_bindings_lite.js", IDR_MOJO_MOJO_BINDINGS_LITE_JS},
+    {"js/mojo/camera_app_helper.mojom-lite.js",
      IDR_CAMERA_CAMERA_APP_HELPER_MOJOM_LITE_JS},
-    {"src/js/mojo/time.mojom-lite.js", IDR_CAMERA_TIME_MOJOM_LITE_JS},
-    {"src/js/mojo/idle_manager.mojom-lite.js",
+    {"js/mojo/time.mojom-lite.js", IDR_CAMERA_TIME_MOJOM_LITE_JS},
+    {"js/mojo/idle_manager.mojom-lite.js",
      IDR_CAMERA_IDLE_MANAGER_MOJOM_LITE_JS},
-    {"src/js/mojo/camera_app.mojom-lite.js",
+    {"js/mojo/camera_app.mojom-lite.js",
      IDR_CAMERA_CAMERA_APP_MOJOM_LITE_JS},
-    {"src/js/mojo/geometry.mojom-lite.js", IDR_CAMERA_GEOMETRY_MOJOM_LITE_JS},
-    {"src/js/mojo/range.mojom-lite.js", IDR_CAMERA_RANGE_MOJOM_LITE_JS},
+    {"js/mojo/geometry.mojom-lite.js", IDR_CAMERA_GEOMETRY_MOJOM_LITE_JS},
+    {"js/mojo/range.mojom-lite.js", IDR_CAMERA_RANGE_MOJOM_LITE_JS},
 };
 
 }  // namespace chromeos

chromeos/components/camera_app_ui/resources/.eslintignore

-src/js/lib/*
+js/lib/*

chromeos/components/camera_app_ui/resources/src/css/main.css → chromeos/components/camera_app_ui/resources/css/main.css

@@ -225,7 +225,7 @@ body.should-handle-intent-result #modes-group {
 }
 
 #play-result-video {
-  background-image: url(../images/camera_intent_play_video.svg);
+  background-image: url(/images/camera_intent_play_video.svg);
   height: 80px;
   width: 80px;
 }
@@ -253,11 +253,11 @@ body.playing-result-video #play-result-video {
 }
 
 #confirm-result {
-  background-image: url(../images/camera_intent_result_confirm.svg);
+  background-image: url(/images/camera_intent_result_confirm.svg);
 }
 
 #cancel-result {
-  background-image: url(../images/camera_intent_result_cancel.svg);
+  background-image: url(/images/camera_intent_result_cancel.svg);
 }
 
 .mode-item {
@@ -354,25 +354,25 @@ body.should-handle-intent-result #pause-recordvideo {
 
 #start-takephoto,
 #video-snapshot {
-  background-image: url(../images/camera_shutter_photo_start.svg);
+  background-image: url(/images/camera_shutter_photo_start.svg);
 }
 
 #start-takephoto:hover,
 #video-snapshot:hover {
-  background-image: url(../images/camera_shutter_photo_start_hover.svg);
+  background-image: url(/images/camera_shutter_photo_start_hover.svg);
 }
 
 #start-takephoto:active,
 #video-snapshot:active {
-  background-image: url(../images/camera_shutter_photo_start_active.svg);
+  background-image: url(/images/camera_shutter_photo_start_active.svg);
 }
 
 #stop-takephoto {
-  background-image: url(../images/camera_shutter_photo_stop.svg);
+  background-image: url(/images/camera_shutter_photo_stop.svg);
 }
 
 #stop-takephoto:hover {
-  background-image: url(../images/camera_shutter_photo_stop_hover.svg);
+  background-image: url(/images/camera_shutter_photo_stop_hover.svg);
 }
 
 #recordvideo {
@@ -462,7 +462,7 @@ body.taking.video #recordvideo .white-square {
 #pause-recordvideo .two-bars {
   --bar-size: 20px;
 
-  background-image: url(../images/camera_shutter_video_pause.svg);
+  background-image: url(/images/camera_shutter_video_pause.svg);
   height: var(--bar-size);
   left: calc(50% - var(--bar-size) / 2);
   position: absolute;
@@ -493,22 +493,22 @@ body:not(.multi-camera) #switch-device {
 }
 
 #camera-mode {
-  background-image: url(../images/camera_mode_photo.svg);
+  background-image: url(/images/camera_mode_photo.svg);
   height: 40px;
   visibility: hidden;
   width: 40px;
 }
 
 body.video #camera-mode {
-  background-image: url(../images/camera_mode_video.svg);
+  background-image: url(/images/camera_mode_video.svg);
 }
 
 body.square #camera-mode {
-  background-image: url(../images/camera_mode_square.svg);
+  background-image: url(/images/camera_mode_square.svg);
 }
 
 body.portrait #camera-mode {
-  background-image: url(../images/camera_mode_portrait.svg);
+  background-image: url(/images/camera_mode_portrait.svg);
 }
 
 body.mode-switching:not(.streaming) #camera-mode {
@@ -530,7 +530,7 @@ body.mode-switching:not(.streaming) #camera-mode {
 }
 
 #switch-device {
-  background-image: url(../images/camera_button_switch_device.svg);
+  background-image: url(/images/camera_button_switch_device.svg);
   height: var(--big-icon);
   width: var(--big-icon);
 }
@@ -591,39 +591,39 @@ body.max-wnd #options-group {
 }
 
 body._3sec #toggle-timer:checked {
-  background-image: url(../images/camera_button_timer_on_3s.svg);
+  background-image: url(/images/camera_button_timer_on_3s.svg);
 }
 
 body._10sec #toggle-timer:checked {
-  background-image: url(../images/camera_button_timer_on_10s.svg);
+  background-image: url(/images/camera_button_timer_on_10s.svg);
 }
 
 #toggle-timer {
-  background-image: url(../images/camera_button_timer_off.svg);
+  background-image: url(/images/camera_button_timer_off.svg);
 }
 
 #toggle-grid:checked {
-  background-image: url(../images/camera_button_grid_on.svg);
+  background-image: url(/images/camera_button_grid_on.svg);
 }
 
 #toggle-grid {
-  background-image: url(../images/camera_button_grid_off.svg);
+  background-image: url(/images/camera_button_grid_off.svg);
 }
 
 #toggle-mirror:checked {
-  background-image: url(../images/camera_button_mirror_on.svg);
+  background-image: url(/images/camera_button_mirror_on.svg);
 }
 
 #toggle-mirror {
-  background-image: url(../images/camera_button_mirror_off.svg);
+  background-image: url(/images/camera_button_mirror_off.svg);
 }
 
 #toggle-mic:checked {
-  background-image: url(../images/camera_button_mic_on.svg);
+  background-image: url(/images/camera_button_mic_on.svg);
 }
 
 #toggle-mic {
-  background-image: url(../images/camera_button_mic_off.svg);
+  background-image: url(/images/camera_button_mic_off.svg);
 }
 
 body:not(.multi-fps) #toggle-fps,
@@ -632,15 +632,15 @@ body:not(.video) #toggle-fps {
 }
 
 body._30fps #toggle-fps {
-  background-image: url(../images/camera_button_fps_30.svg);
+  background-image: url(/images/camera_button_fps_30.svg);
 }
 
 body._60fps #toggle-fps {
-  background-image: url(../images/camera_button_fps_60.svg);
+  background-image: url(/images/camera_button_fps_60.svg);
 }
 
 #open-settings {
-  background-image: url(../images/camera_button_settings.svg);
+  background-image: url(/images/camera_button_settings.svg);
 }
 
 body.should-handle-intent-result #open-settings {
@@ -1149,7 +1149,7 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
 }
 
 #banner-title-icon {
-  background-image: url(../images/camera_intro_banner_icon.svg);
+  background-image: url(/images/camera_intro_banner_icon.svg);
   display: inline-block;
   height: 20px;
   margin-right: 10px;
@@ -1168,7 +1168,7 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
 }
 
 #banner-close {
-  background-image: url(../images/camera_intro_banner_close.svg);
+  background-image: url(/images/camera_intro_banner_close.svg);
   display: block;
   height: 20px;
   position: absolute;
@@ -1337,7 +1337,7 @@ body.tab-navigation button.menu-item:focus::after {
 }
 
 .menu-header .icon {
-  background-image: url(../images/settings_button_back.svg);
+  background-image: url(/images/settings_button_back.svg);
 }
 
 .menu-header .icon:hover {
@@ -1345,11 +1345,11 @@ body.tab-navigation button.menu-item:focus::after {
 }
 
 #settings-gridtype .icon {
-  background-image: url(../images/settings_grid_type.svg);
+  background-image: url(/images/settings_grid_type.svg);
 }
 
 #settings-timerdur .icon {
-  background-image: url(../images/settings_timer_duration.svg);
+  background-image: url(/images/settings_timer_duration.svg);
 }
 
 body.no-resolution-settings #settings-resolution {
@@ -1357,19 +1357,19 @@ body.no-resolution-settings #settings-resolution {
 }
 
 #settings-resolution .icon {
-  background-image: url(../images/settings_resolution.svg);
+  background-image: url(/images/settings_resolution.svg);
 }
 
 #settings-expert .icon {
-  background-image: url(../images/settings_expert.svg);
+  background-image: url(/images/settings_expert.svg);
 }
 
 #settings-feedback .icon {
-  background-image: url(../images/settings_feedback.svg);
+  background-image: url(/images/settings_feedback.svg);
 }
 
 #settings-help .icon {
-  background-image: url(../images/settings_help.svg);
+  background-image: url(/images/settings_help.svg);
 }
 
 #settings-gridtype .icon.end,
@@ -1377,7 +1377,7 @@ body.no-resolution-settings #settings-resolution {
 #settings-resolution .icon.end,
 #settings-expert .icon.end,
 .resol-item.multi-option .icon.end {
-  background-image: url(../images/settings_button_expand.svg);
+  background-image: url(/images/settings_button_expand.svg);
 }
 
 #view-warning,
@@ -1476,7 +1476,7 @@ body.tab-navigation .dialog-buttons button:focus::after {
 }
 
 #spinner {
-  background-image: url(../images/spinner.svg);
+  background-image: url(/images/spinner.svg);
   height: 32px;
   visibility: hidden;
   width: 32px;
@@ -1484,7 +1484,7 @@ body.tab-navigation .dialog-buttons button:focus::after {
 }
 
 #view-splash {
-  background: no-repeat center url(../images/camera_mode_photo.svg), black;
+  background: no-repeat center url(/images/camera_mode_photo.svg), black;
   z-index: 2;
 }
 

chromeos/components/camera_app_ui/resources/src/js/BUILD.gn → chromeos/components/camera_app_ui/resources/js/BUILD.gn

@@ -15,7 +15,7 @@ js_type_check("closure_compile") {
         "jscomp_error=conformanceViolations",
         "hide_warnings_for=mojo/public/js/",
         "hide_warnings_for=gen/",
-        "hide_warnings_for=src/js/lib/",
+        "hide_warnings_for=js/lib/",
       ]
   deps = [ ":compile_resources" ]
 }

chromeos/components/camera_app_ui/resources/src/js/init.js → chromeos/components/camera_app_ui/resources/js/init.js

@@ -5,6 +5,6 @@
 document.addEventListener('DOMContentLoaded', () => {
   const mainScript = document.createElement('script');
   mainScript.setAttribute('type', 'module');
-  mainScript.setAttribute('src', '../js/main.js');
+  mainScript.setAttribute('src', '/js/main.js');
   document.head.appendChild(mainScript);
 });

chromeos/components/camera_app_ui/resources/src/js/lib/build_ffmpeg.sh → chromeos/components/camera_app_ui/resources/js/lib/build_ffmpeg.sh

@@ -122,7 +122,7 @@ main() {
 
   # locate ffmpeg directory in chromium source tree
   local ffmpeg_dir
-  ffmpeg_dir=$(realpath ../../../../../../../third_party/ffmpeg)
+  ffmpeg_dir=$(realpath ../../../../../../third_party/ffmpeg)
   [[ -d "$ffmpeg_dir" ]] || die "ffmpeg not found"
 
   # copy ffmpeg/ into a temporary directory to patch and build