[CCA] Fix circular dependencies

We should fix the circular dependencies to avoid potential wrong order
when importing modules.

For example, if the dependencies of modules are like:
  A --> B --> ... --> A
If we import B but A needs B when loading A, it might hit "access
before initialization" error.

Bug: 1121457
Test: tast run [DUT] camera.CCAUI*
Test: npx madge --circular main.js
Test: (Replace some js with SWA version and run "npx madge" again)

Change-Id: Ib41b85425fc256a3394b31a8c573f68177d45c3a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2505397
Commit-Queue: Wei Lee <wtlee@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822107}

chromeos/components/camera_app_ui/resources/js/background.js

@@ -9,12 +9,13 @@ import {
   ForegroundOps,  // eslint-disable-line no-unused-vars
 } from './background_ops.js';
 import {browserProxy} from './browser_proxy/browser_proxy.js';
-// eslint-disable-next-line no-unused-vars
-import {TestingErrorCallback} from './error.js';
 import {Intent} from './intent.js';
 import {initMetrics, setMetricsEnabled} from './metrics.js';
 import {PerfLogger} from './perf.js';
-import {PerfEvent} from './type.js';
+import {
+  PerfEvent,
+  TestingErrorCallback,  // eslint-disable-line no-unused-vars
+} from './type.js';
 
 /**
  * Fixed minimum width of the window inner-bounds in pixels.

chromeos/components/camera_app_ui/resources/js/background_ops.js

@@ -5,11 +5,11 @@
 // eslint-disable-next-line no-unused-vars
 import {AppWindow} from './app_window.js';
 // eslint-disable-next-line no-unused-vars
-import {TestingErrorCallback} from './error.js';
-// eslint-disable-next-line no-unused-vars
 import {Intent} from './intent.js';
 // eslint-disable-next-line no-unused-vars
 import {PerfLogger} from './perf.js';
+// eslint-disable-next-line no-unused-vars
+import {TestingErrorCallback} from './type.js';
 
 /**
  * Operations supported by foreground window.
@@ -81,3 +81,22 @@ export class BackgroundOps {
    */
   notifySuspension() {}
 }
+
+/**
+ * Creates a fake background ops.
+ * @return {!BackgroundOps}
+ */
+export function createFakeBackgroundOps() {
+  const perfLogger = new PerfLogger();
+  const url = window.location.href;
+  const intent = url.includes('intent') ? Intent.create(new URL(url)) : null;
+  return /** @type {!BackgroundOps} */ ({
+    bindForegroundOps: (ops) => {},
+    bindAppWindow: (appWindow) => {},
+    getIntent: () => intent,
+    getPerfLogger: () => perfLogger,
+    getTestingErrorCallback: () => null,
+    notifyActivation: () => {},
+    notifySuspension: () => {},
+  });
+}

chromeos/components/camera_app_ui/resources/js/browser_proxy/browser_proxy.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {assert, promisify} from '../chrome_util.js';
+import {promisify} from '../chrome_util.js';
 import {ChromeDirectoryEntry} from '../models/chrome_file_system_entry.js';
 import {getMaybeLazyDirectory} from '../models/lazy_directory_entry.js';
 import {Resolution} from '../type.js';
@@ -162,12 +162,6 @@ class ChromeAppBrowserProxy {
     return true;
   }
 
-  /** @override */
-  getBackgroundOps() {
-    assert(window['backgroundOps'] !== undefined);
-    return window['backgroundOps'];
-  }
-
   /** @override */
   async fitWindow() {
     const appWindow = chrome.app.window.current();

chromeos/components/camera_app_ui/resources/js/browser_proxy/browser_proxy_interface.js

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// eslint-disable-next-line no-unused-vars
-import {BackgroundOps} from '../background_ops.js';
 import {
   AbstractDirectoryEntry,   // eslint-disable-line no-unused-vars
   AbstractFileEntry,        // eslint-disable-line no-unused-vars
@@ -117,12 +115,6 @@ export class BrowserProxy {
    */
   isMp4RecordingEnabled() {}
 
-  /**
-   * @return {!BackgroundOps}
-   * @abstract
-   */
-  getBackgroundOps() {}
-
   /**
    * @return {!Promise}
    * @abstract

chromeos/components/camera_app_ui/resources/js/browser_proxy/webui_browser_proxy.js

@@ -11,14 +11,10 @@
  */
 import '/strings.m.js';
 
-// eslint-disable-next-line no-unused-vars
-import {BackgroundOps} from '../background_ops.js';
 import {assert} from '../chrome_util.js';
-import {Intent} from '../intent.js';
 import {getMaybeLazyDirectory} from '../models/lazy_directory_entry.js';
 import {NativeDirectoryEntry} from '../models/native_file_system_entry.js';
 import {ChromeHelper} from '../mojo/chrome_helper.js';
-import {PerfLogger} from '../perf.js';
 
 // eslint-disable-next-line no-unused-vars
 import {BrowserProxy} from './browser_proxy_interface.js';
@@ -156,24 +152,6 @@ class WebUIBrowserProxy {
     return false;
   }
 
-  /** @override */
-  getBackgroundOps() {
-    // TODO(crbug.com/980846): Refactor after migrating to SWA since there is no
-    // background page for SWA.
-    const perfLogger = new PerfLogger();
-    const url = window.location.href;
-    const intent = url.includes('intent') ? Intent.create(new URL(url)) : null;
-    return /** @type {!BackgroundOps} */ ({
-      bindForegroundOps: (ops) => {},
-      bindAppWindow: (appWindow) => {},
-      getIntent: () => intent,
-      getPerfLogger: () => perfLogger,
-      getTestingErrorCallback: () => null,
-      notifyActivation: () => {},
-      notifySuspension: () => {},
-    });
-  }
-
   /** @override */
   fitWindow() {
     // TODO(crbug.com/980846): Remove the method once we migrate to SWA.

chromeos/components/camera_app_ui/resources/js/dom.js

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import {assertInstanceof} from './chrome_util.js';
-import {setupI18nElements} from './util.js';
 
 // Disables eslint check for closure compiler constructor type.
 /* eslint-disable valid-jsdoc */
@@ -61,16 +60,4 @@ export function getAll(selector, type) {
   return getAllFrom(document, selector, type);
 }
 
-/**
- * Instantiates template with the target selector.
- * @param {string} selector
- * @return {!Node}
- */
-export function instantiateTemplate(selector) {
-  const tpl = get(selector, HTMLTemplateElement);
-  const node = document.importNode(tpl.content, true);
-  setupI18nElements(node);
-  return node;
-}
-
 /* eslint-enable valid-jsdoc */

chromeos/components/camera_app_ui/resources/js/error.js

@@ -10,14 +10,9 @@ import {
   ErrorInfo,  // eslint-disable-line no-unused-vars
   ErrorLevel,
   ErrorType,
+  TestingErrorCallback,  // eslint-disable-line no-unused-vars
 } from './type.js';
 
-/**
- * Callback for reporting error in testing run.
- * @typedef {function(!ErrorInfo)}
- */
-export let TestingErrorCallback;
-
 /**
  * Code location of stack frame.
  * @typedef {{
@@ -29,20 +24,6 @@ export let TestingErrorCallback;
  */
 export let StackFrame;
 
-/**
- * Throws when a method is not implemented.
- */
-export class NotImplementedError extends Error {
-  /**
-   * @param {string=} message
-   * @public
-   */
-  constructor(message = 'Method is not implemented') {
-    super(message);
-    this.name = this.constructor.name;
-  }
-}
-
 /**
  * Converts v8 CallSite object to StackFrame.
  * @param {!CallSite} callsite

chromeos/components/camera_app_ui/resources/js/main.js

@@ -6,6 +6,7 @@
 import {AppWindow} from './app_window.js';
 import {
   BackgroundOps,  // eslint-disable-line no-unused-vars
+  createFakeBackgroundOps,
   ForegroundOps,  // eslint-disable-line no-unused-vars
 } from './background_ops.js';
 import {browserProxy} from './browser_proxy/browser_proxy.js';
@@ -279,7 +280,15 @@ let instance = null;
   if (instance !== null) {
     return;
   }
-  const bgOps = browserProxy.getBackgroundOps();
+
+  let bgOps;
+  if (window['backgroundOps'] !== undefined) {
+    bgOps = window['backgroundOps'];
+  } else {
+    // TODO(crbug.com/980846): Refactor after migrating to SWA since there is no
+    // background page for SWA.
+    bgOps = createFakeBackgroundOps();
+  }
 
   browserProxy.setupUnloadListener(() => {
     const intent = bgOps.getIntent();

chromeos/components/camera_app_ui/resources/js/models/native_file_system_entry.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import {assert} from '../chrome_util.js';
-import {NotImplementedError} from '../error.js';
+import {NotImplementedError} from '../type.js';
 
 import {AsyncWriter} from './async_writer.js';
 import {

chromeos/components/camera_app_ui/resources/js/type.js

@@ -222,3 +222,23 @@ export const ErrorLevel = {
   WARNING: 'WARNING',
   ERROR: 'ERROR',
 };
+
+/**
+ * Callback for reporting error in testing run.
+ * @typedef {function(!ErrorInfo)}
+ */
+export let TestingErrorCallback;
+
+/**
+ * Throws when a method is not implemented.
+ */
+export class NotImplementedError extends Error {
+  /**
+   * @param {string=} message
+   * @public
+   */
+  constructor(message = 'Method is not implemented') {
+    super(message);
+    this.name = this.constructor.name;
+  }
+}

chromeos/components/camera_app_ui/resources/js/util.js

@@ -4,6 +4,7 @@
 
 import {browserProxy} from './browser_proxy/browser_proxy.js';
 import {assertInstanceof} from './chrome_util.js';
+import * as dom from './dom.js';
 import {reportError} from './error.js';
 import * as state from './state.js';
 import * as tooltip from './tooltip.js';
@@ -441,3 +442,15 @@ export function setInkdropEffect(el) {
     animateOnce(el);
   });
 }
+
+/**
+ * Instantiates template with the target selector.
+ * @param {string} selector
+ * @return {!Node}
+ */
+export function instantiateTemplate(selector) {
+  const tpl = dom.get(selector, HTMLTemplateElement);
+  const node = document.importNode(tpl.content, true);
+  setupI18nElements(node);
+  return node;
+}

chromeos/components/camera_app_ui/resources/js/views/camera/preview.js

@@ -109,7 +109,7 @@ export class Preview {
    * @return {!Promise} Promise for the operation.
    */
   async setSource_(stream) {
-    const node = dom.instantiateTemplate('#preview-video-template');
+    const node = util.instantiateTemplate('#preview-video-template');
     const video = dom.getFrom(node, 'video', HTMLVideoElement);
     await new Promise((resolve) => {
       const handler = () => {

chromeos/components/camera_app_ui/resources/js/views/settings.js

@@ -441,7 +441,7 @@ export class ResolutionSettings extends BaseSettings {
       let /** !HTMLElement */ videoItem;
       if (deviceId !== focusedId) {
         const extItem =
-            dom.instantiateTemplate('#extcam-resolution-item-template');
+            util.instantiateTemplate('#extcam-resolution-item-template');
         [titleItem, photoItem, videoItem] =
             dom.getAllFrom(extItem, '.menu-item', HTMLElement);
 
@@ -610,7 +610,7 @@ export class ResolutionSettings extends BaseSettings {
         .forEach((element) => element.parentNode.removeChild(element));
 
     resolutions.forEach((r) => {
-      const item = dom.instantiateTemplate('#resolution-item-template');
+      const item = util.instantiateTemplate('#resolution-item-template');
       const label = dom.getFrom(item, 'label', HTMLLabelElement);
       util.setInkdropEffect(label);
       const input = dom.getFrom(item, 'input', HTMLInputElement);

chromeos/components/camera_app_ui/resources/js/window_controller/mojo_window_controller.js

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// eslint-disable-next-line no-unused-vars
-import {NotImplementedError} from '../error.js';
+import {NotImplementedError} from '../type.js';
 
 // eslint-disable-next-line no-unused-vars
 import {WindowController} from './window_controller_interface.js';