[CCA] Convert type.js into ES6 module.

Add types in type.js into cca namespace and transform it into ES6 module.

Bug: 141518780
Test: Pass closure compiler check, tast run <DUT> 'camera.CCAUI*' and
validate all function of CCA on HALv1/v3 device works correctly.

Change-Id: I38d88a8900bb29de258591ba4eaa07ac49314eb5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1975690Reviewed-by: Shik Chen <shik@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#727355}

chrome/browser/resources/chromeos/camera/.eslintrc.js

@@ -376,6 +376,7 @@ module.exports = {
     // BigInt64Array as a defined type.
     'BigInt64Array': 'readable',
     'chromeosCamera': 'readable',
+    'cca': 'readable', // TODO(inker): remove this after resolving b/141518780.
     'cros': 'readable',
     'webkitRequestFileSystem': 'readable',
   },

chrome/browser/resources/chromeos/camera/src/js/BUILD.gn

@@ -67,6 +67,9 @@ js_library("sound") {
 }
 
 js_library("type") {
+  deps = [
+    ":namespace",
+  ]
 }
 
 js_library("main") {

chrome/browser/resources/chromeos/camera/src/js/device/camera3_device_info.js

@@ -14,11 +14,6 @@ var cca = cca || {};
  */
 cca.device = cca.device || {};
 
-/**
- * import {Resolution} from '../type.js';
- */
-var Resolution = Resolution || {};
-
 /**
  * Video device information queried from HALv3 mojo private API.
  */
@@ -27,11 +22,12 @@ cca.device.Camera3DeviceInfo = class {
    * @public
    * @param {!MediaDeviceInfo} deviceInfo Information of the video device.
    * @param {!cros.mojom.CameraFacing} facing Camera facing of the video device.
-   * @param {!ResolutionList} photoResols Supported available photo resolutions
-   *     of the video device.
-   * @param {!Array<!VideoConfig>} videoResolFpses Supported available video
+   * @param {!cca.ResolutionList} photoResols Supported available photo
+   *     resolutions of the video device.
+   * @param {!Array<!cca.VideoConfig>} videoResolFpses Supported available video
    *     resolutions and maximal capture fps of the video device.
-   * @param {!FpsRangeList} fpsRanges Supported fps ranges of the video device.
+   * @param {!cca.FpsRangeList} fpsRanges Supported fps ranges of the video
+   *     device.
    */
   constructor(deviceInfo, facing, photoResols, videoResolFpses, fpsRanges) {
     /**
@@ -47,32 +43,32 @@ cca.device.Camera3DeviceInfo = class {
     this.facing = facing;
 
     /**
-     * @type {!ResolutionList}
+     * @type {!cca.ResolutionList}
      * @public
      */
     this.photoResols = photoResols;
 
     /**
-     * @type {!ResolutionList}
+     * @type {!cca.ResolutionList}
      * @public
      */
     this.videoResols = [];
 
     /**
-     * @type {!MaxFpsInfo}
+     * @type {!cca.MaxFpsInfo}
      * @public
      */
     this.videoMaxFps = {};
 
     /**
-     * @type {!FpsRangeList}
+     * @type {!cca.FpsRangeList}
      * @public
      */
     this.fpsRanges = fpsRanges;
 
     videoResolFpses.filter(({maxFps}) => maxFps >= 24)
         .forEach(({width, height, maxFps}) => {
-          const r = new Resolution(width, height);
+          const r = new cca.Resolution(width, height);
           this.videoResols.push(r);
           this.videoMaxFps[r] = maxFps;
         });

chrome/browser/resources/chromeos/camera/src/js/device/device_info_updater.js

@@ -231,8 +231,8 @@ cca.device.DeviceInfoUpdater = class {
   /**
    * Gets supported photo and video resolutions for specified video device.
    * @param {string} deviceId Device id of the video device.
-   * @return {!Promise<!{photo: !ResolutionList, video: !ResolutionList}>}
-   *     Supported photo and video resolutions.
+   * @return {!Promise<!{photo: !cca.ResolutionList, video:
+   *     !cca.ResolutionList}>} Supported photo and video resolutions.
    * @throws {Error} May fail on HALv1 device without capability of querying
    *     supported resolutions.
    */

chrome/browser/resources/chromeos/camera/src/js/intent.js

@@ -19,11 +19,6 @@ cca.intent = cca.intent || {};
  */
 var assertNotReached = assertNotReached || {};
 
-/**
- * import {Mode} from './type.js';
- */
-var Mode = Mode || {};
-
 /**
  * Thrown when fails to parse intent url.
  */
@@ -50,7 +45,7 @@ cca.intent.Intent = class {
   /**
    * @param {!URL} url
    * @param {number} intentId
-   * @param {Mode} mode
+   * @param {cca.Mode} mode
    * @param {boolean} shouldHandleResult
    * @param {boolean} shouldDownScale
    * @param {boolean} isSecure
@@ -70,7 +65,7 @@ cca.intent.Intent = class {
 
     /**
      * Capture mode of intent.
-     * @const {Mode}
+     * @const {cca.Mode}
      */
     this.mode = mode;
 
@@ -180,10 +175,10 @@ cca.intent.Intent = class {
     const intentId = parseInt(param, 10);
 
     param = params.get('mode');
-    if (param === null || !Object.values(Mode).includes(param)) {
+    if (param === null || !Object.values(cca.Mode).includes(param)) {
       throw new cca.intent.ParseError(url);
     }
-    const mode = /** @type {Mode} */ (param);
+    const mode = /** @type {cca.Mode} */ (param);
 
     return new cca.intent.Intent(
         url, intentId, mode, getBool('shouldHandleResult'),

chrome/browser/resources/chromeos/camera/src/js/main.js

@@ -14,11 +14,6 @@ var cca = cca || {};
  */
 var {assert, assertInstanceof} = {assert, assertInstanceof};
 
-/**
- * import {Mode} from './type.js';
- */
-var Mode = Mode || {};
-
 /**
  * Creates the Camera App main object.
  * @implements {cca.bg.ForegroundOps}
@@ -75,7 +70,8 @@ cca.App = class {
       } else {
         return new cca.views.Camera(
             this.galleryButton_, this.infoUpdater_, this.photoPreferrer_,
-            this.videoPreferrer_, intent !== null ? intent.mode : Mode.PHOTO);
+            this.videoPreferrer_,
+            intent !== null ? intent.mode : cca.Mode.PHOTO);
       }
     })();
 

chrome/browser/resources/chromeos/camera/src/js/metrics.js

@@ -14,11 +14,6 @@ var cca = cca || {};
  */
 cca.metrics = cca.metrics || {};
 
-/**
- * import {Mode} from './type.js';
- */
-var Mode = Mode || {};
-
 /**
  * Event builder for basic metrics.
  * @type {?analytics.EventBuilder}
@@ -110,7 +105,7 @@ cca.metrics.IntentResultType = {
  * Returns event builder for the metrics type: capture.
  * @param {?string} facingMode Camera facing-mode of the capture.
  * @param {number} length Length of 1 minute buckets for captured video.
- * @param {!Resolution} resolution Capture resolution.
+ * @param {!cca.Resolution} resolution Capture resolution.
  * @param {!cca.metrics.IntentResultType} intentResult
  * @return {!analytics.EventBuilder}
  * @private
@@ -129,17 +124,17 @@ cca.metrics.captureType_ = function(
   };
 
   return cca.metrics.base_.category('capture')
-      .action(condState(Object.values(Mode)))
+      .action(condState(Object.values(cca.Mode)))
       .label(facingMode || '(not set)')
       .dimen(3, condState(['sound']))
       .dimen(4, condState(['mirror']))
       .dimen(5, condState(['_3x3', '_4x4', 'golden'], 'grid'))
       .dimen(6, condState(['_3sec', '_10sec'], 'timer'))
-      .dimen(7, condState(['mic'], Mode.VIDEO, true))
+      .dimen(7, condState(['mic'], cca.Mode.VIDEO, true))
       .dimen(8, condState(['max-wnd']))
       .dimen(9, condState(['tall']))
       .dimen(10, resolution.toString())
-      .dimen(11, condState(['_30fps', '_60fps'], Mode.VIDEO, true))
+      .dimen(11, condState(['_30fps', '_60fps'], cca.Mode.VIDEO, true))
       .dimen(12, intentResult)
       .value(length || 0);
 };

chrome/browser/resources/chromeos/camera/src/js/mojo/chrome_helper.js

@@ -137,9 +137,5 @@ export class ChromeHelper {
   }
 }
 
-/* eslint-disable no-undef */
-
 /** @const */
 cca.mojo.ChromeHelper = ChromeHelper;
-
-/* eslint-enable no-undef */

chrome/browser/resources/chromeos/camera/src/js/mojo/device_operator.js

@@ -2,14 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable no-undef */
-
-/**
- * import {Resolution} from '../type.js';
- */
-const CCAResolution = Resolution;
-
-/* eslint-enable no-undef */
+import {Resolution,
+        ResolutionList,  // eslint-disable-line no-unused-vars
+} from '../type.js';
 
 /**
  * Parse the entry data according to its type.
@@ -156,7 +151,7 @@ export class DeviceOperator {
       const [format, width, height, type] =
           streamConfigs.slice(i, i + numElementPerEntry);
       if (format === formatBlob && type === typeOutputStream) {
-        supportedResolutions.push(new CCAResolution(width, height));
+        supportedResolutions.push(new Resolution(width, height));
       }
     }
     return supportedResolutions;
@@ -166,7 +161,7 @@ export class DeviceOperator {
    * Gets supported video configurations for specific camera.
    * @param {string} deviceId The renderer-facing device id of the target camera
    *     which could be retrieved from MediaDeviceInfo.deviceId.
-   * @return {!Promise<!Array<VideoConfig>>} Promise of supported video
+   * @return {!Promise<!Array<cca.VideoConfig>>} Promise of supported video
    *     configurations.
    * @throws {Error} Thrown when fail to parse the metadata or the device
    *     operation is not supported.
@@ -222,7 +217,7 @@ export class DeviceOperator {
    * Gets supported fps ranges for specific camera.
    * @param {string} deviceId The renderer-facing device id of the target camera
    *     which could be retrieved from MediaDeviceInfo.deviceId.
-   * @return {!Promise<!FpsRangeList>} Promise of supported fps ranges.
+   * @return {!Promise<!cca.FpsRangeList>} Promise of supported fps ranges.
    *     Each range is represented as [min, max].
    * @throws {Error} Thrown when fail to parse the metadata or the device
    *     operation is not supported.
@@ -244,7 +239,7 @@ export class DeviceOperator {
       throw new Error('Unexpected length of available fps range configs');
     }
 
-    const /** !FpsRangeList */ supportedFpsRanges = [];
+    const /** !cca.FpsRangeList */ supportedFpsRanges = [];
     for (let i = 0; i < availableFpsRanges.length; i += numElementPerEntry) {
       const [minFps, maxFps] =
           availableFpsRanges.slice(i, i + numElementPerEntry);
@@ -468,11 +463,7 @@ export class DeviceOperator {
   }
 }
 
-/* eslint-disable no-undef */
-
 /** @const */
 cca.mojo.DeviceOperator = DeviceOperator;
 /** @const */
 cca.mojo.parseMetadataData = parseMetadataData;
-
-/* eslint-enable no-undef */

chrome/browser/resources/chromeos/camera/src/js/perf.js

@@ -102,8 +102,8 @@ cca.perf.PerfLogger = class {
   /**
    * Stops the measurement for given event and returns the measurement result.
    * @param {cca.perf.PerfEvent} event Target event.
-   * @param {PerfInformation=} perfInfo Optional information of this event for
-   *     performance measurement.
+   * @param {cca.PerfInformation=} perfInfo Optional information of this event
+   *     for performance measurement.
    */
   stop(event, perfInfo = {}) {
     if (!this.startTimeMap_.has(event)) {
@@ -133,8 +133,8 @@ cca.perf.PerfLogger = class {
 
   /**
    * Stops the measurement of launch-related events.
-   * @param {PerfInformation=} perfInfo Optional information of this event for
-   *     performance measurement.
+   * @param {cca.PerfInformation=} perfInfo Optional information of this event
+   *     for performance measurement.
    */
   stopLaunch(perfInfo) {
     const launchEvents = [

chrome/browser/resources/chromeos/camera/src/js/state.js

@@ -17,7 +17,7 @@ cca.state = cca.state || {};
 /* eslint-disable no-unused-vars */
 
 /**
- * @typedef {function(boolean, PerfInformation=)}
+ * @typedef {function(boolean, cca.PerfInformation=)}
  */
 var StateObserver;
 
@@ -73,7 +73,7 @@ cca.state.get = function(state) {
  * performance measurement.
  * @param {string} state State to be set.
  * @param {boolean} val True to set the state on, false otherwise.
- * @param {PerfInformation=} perfInfo Optional information of this state for
+ * @param {cca.PerfInformation=} perfInfo Optional information of this state for
  *     performance measurement.
  */
 cca.state.set = function(state, val, perfInfo = {}) {

chrome/browser/resources/chromeos/camera/src/js/type.js

@@ -2,14 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
-
-/* eslint-disable no-unused-vars */
-
 /**
  * Photo or video resolution.
  */
-var Resolution = class {
+export class Resolution {
   /**
    * @param {number} width
    * @param {number} height
@@ -78,26 +74,32 @@ var Resolution = class {
   toString() {
     return `${this.width}x${this.height}`;
   }
-};
+}
 
 /**
  * Capture modes.
  * @enum {string}
  */
-var Mode = {
+export const Mode = {
   PHOTO: 'photo',
   VIDEO: 'video',
   SQUARE: 'square',
   PORTRAIT: 'portrait',
 };
 
+// The types here are used only in jsdoc and are required to be explicitly
+// exported in order to be referenced by closure compiler.
+// TODO(inker): Exports/Imports these jsdoc only types by closure compiler
+// comment syntax. The implementation of syntax is tracked here:
+// https://github.com/google/closure-compiler/issues/3041
+
 /**
  * @typedef {{
  *   hasError: (boolean|undefined),
  *   resolution: (Resolution|undefined),
  * }}
  */
-var PerfInformation;
+export let PerfInformation;
 
 /**
  * @typedef {{
@@ -106,7 +108,7 @@ var PerfInformation;
  *   maxFps: number,
  * }}
  */
-var VideoConfig;
+export let VideoConfig;
 
 /**
  * @typedef {{
@@ -114,13 +116,13 @@ var VideoConfig;
  *   maxFps: number,
  * }}
  */
-var FpsRange;
+export let FpsRange;
 
 /**
  * A list of resolutions.
  * @typedef {Array<!Resolution>}
  */
-var ResolutionList;
+export let ResolutionList;
 
 /**
  * Map of all available resolution to its maximal supported capture fps. The key
@@ -128,12 +130,27 @@ var ResolutionList;
  * capture fps under that resolution.
  * @typedef {Object<(!Resolution|string), number>}
  */
-var MaxFpsInfo;
+export let MaxFpsInfo;
 
 /**
  * List of supported capture fps ranges.
  * @typedef {Array<!FpsRange>}
  */
-var FpsRangeList;
-
-/* eslint-enable no-unused-vars */
+export let FpsRangeList;
+
+/** @const */
+cca.Resolution = Resolution;
+/** @const */
+cca.Mode = Mode;
+/** @const */
+cca.PerfInformation = PerfInformation;
+/** @const */
+cca.VideoConfig = VideoConfig;
+/** @const */
+cca.FpsRange = FpsRange;
+/** @const */
+cca.ResolutionList = ResolutionList;
+/** @const */
+cca.MaxFpsInfo = MaxFpsInfo;
+/** @const */
+cca.FpsRangeList = FpsRangeList;

chrome/browser/resources/chromeos/camera/src/js/util.js

@@ -14,11 +14,6 @@ var cca = cca || {};
  */
 cca.util = cca.util || {};
 
-/**
- * import {Resolution} from '../type.js';
- */
-var Resolution = Resolution || {};
-
 /**
  * Gets the clockwise rotation and flip that can orient a photo to its upright
  * position.
@@ -411,7 +406,7 @@ cca.util.fitWindow = function() {
 
   /**
    * Get a preferred window size which can fit in current screen.
-   * @return {Resolution} Preferred window size.
+   * @return {cca.Resolution} Preferred window size.
    */
   const getPreferredWindowSize = () => {
     const inner = appWindow.innerBounds;
@@ -429,7 +424,7 @@ cca.util.fitWindow = function() {
     preferredWidth -= preferredWidth % 16;
     const preferredHeight = preferredWidth * 9 / 16;
 
-    return new Resolution(preferredWidth, preferredHeight);
+    return new cca.Resolution(preferredWidth, preferredHeight);
   };
 
   const {width, height} = getPreferredWindowSize();

chrome/browser/resources/chromeos/camera/src/js/views/camera.js

@@ -14,11 +14,6 @@ var cca = cca || {};
  */
 cca.views = cca.views || {};
 
-/**
- * import {Mode} from '../type.js';
- */
-var Mode = Mode || {};
-
 /**
  * import {assert} from '../chrome_util.js';
  */
@@ -47,7 +42,7 @@ cca.views.Camera = class extends cca.views.View {
    * @param {!cca.device.DeviceInfoUpdater} infoUpdater
    * @param {!cca.device.PhotoConstraintsPreferrer} photoPreferrer
    * @param {!cca.device.VideoConstraintsPreferrer} videoPreferrer
-   * @param {Mode} defaultMode
+   * @param {cca.Mode} defaultMode
    */
   constructor(
       resultSaver, infoUpdater, photoPreferrer, videoPreferrer, defaultMode) {
@@ -60,7 +55,7 @@ cca.views.Camera = class extends cca.views.View {
     this.infoUpdater_ = infoUpdater;
 
     /**
-     * @type {!Mode}
+     * @type {!cca.Mode}
      * @protected
      */
     this.defaultMode_ = defaultMode;
@@ -320,7 +315,7 @@ cca.views.Camera = class extends cca.views.View {
   /**
    * Try start stream reconfiguration with specified mode and device id.
    * @param {?string} deviceId
-   * @param {!Mode} mode
+   * @param {!cca.Mode} mode
    * @return {!Promise<boolean>} If found suitable stream and reconfigure
    *     successfully.
    */

chrome/browser/resources/chromeos/camera/src/js/views/camera/layout.js

@@ -19,11 +19,6 @@ cca.views = cca.views || {};
  */
 cca.views.camera = cca.views.camera || {};
 
-/**
- * import {Mode, Resolution} from '../../type.js';
- */
-var {Mode, Resolution} = {Mode, Resolution};
-
 /**
  * import {assert} from '../chrome_util.js';
  */
@@ -77,7 +72,7 @@ cca.views.camera.Layout = class {
 
   /**
    * Updates the video element size for previewing in the window.
-   * @return {!Resolution} Letterbox size.
+   * @return {!cca.Resolution} Letterbox size.
    * @private
    */
   updatePreviewSize_() {
@@ -89,7 +84,7 @@ cca.views.camera.Layout = class {
     let contentWidth = 0;
     let contentHeight = 0;
     if (video.videoHeight) {
-      const scale = cca.state.get(Mode.SQUARE) ?
+      const scale = cca.state.get(cca.Mode.SQUARE) ?
           Math.min(window.innerHeight, window.innerWidth) /
               Math.min(video.videoHeight, video.videoWidth) :
           Math.min(
@@ -102,8 +97,8 @@ cca.views.camera.Layout = class {
     }
     let viewportW = contentWidth;
     let viewportH = contentHeight;
-    cca.state.set('square-preview', cca.state.get(Mode.SQUARE));
-    if (cca.state.get(Mode.SQUARE)) {
+    cca.state.set('square-preview', cca.state.get(cca.Mode.SQUARE));
+    if (cca.state.get(cca.Mode.SQUARE)) {
       viewportW = viewportH = Math.min(contentWidth, contentHeight);
       this.squareVideo_.setProperty(
           'left', `${(viewportW - contentWidth) / 2}px`);
@@ -112,7 +107,7 @@ cca.views.camera.Layout = class {
       this.squareViewport_.setProperty('width', `${viewportW}px`);
       this.squareViewport_.setProperty('height', `${viewportH}px`);
     }
-    return new Resolution(
+    return new cca.Resolution(
         window.innerWidth - viewportW, window.innerHeight - viewportH);
   }
 

chrome/browser/resources/chromeos/camera/src/js/views/camera/modes.js

@@ -19,16 +19,6 @@ cca.views = cca.views || {};
  */
 cca.views.camera = cca.views.camera || {};
 
-/**
- * import {Resolution} from '../type.js';
- */
-var Resolution = Resolution || {};
-
-/**
- * import {Mode} from '../../type.js';
- */
-var Mode = Mode || {};
-
 /* eslint-disable no-unused-vars */
 
 /**
@@ -128,7 +118,7 @@ cca.views.camera.ModeConfig = class {
 
   /**
    * Mode to be fallbacked to when fail to configure this mode.
-   * @return {!Mode}
+   * @return {!cca.Mode}
    * @abstract
    */
   get nextMode() {}
@@ -148,7 +138,7 @@ cca.views.camera.ModeConfig = class {
  */
 cca.views.camera.Modes = class {
   /**
-   * @param {!Mode} defaultMode Default mode to be switched to.
+   * @param {!cca.Mode} defaultMode Default mode to be switched to.
    * @param {!cca.device.PhotoConstraintsPreferrer} photoPreferrer
    * @param {!cca.device.VideoConstraintsPreferrer} videoPreferrer
    * @param {!cca.views.camera.DoSwitchMode} doSwitchMode
@@ -187,7 +177,7 @@ cca.views.camera.Modes = class {
         /** @type {!HTMLElement} */ (document.querySelector('#modes-group'));
 
     /**
-     * @type {?Resolution}
+     * @type {?cca.Resolution}
      * @private
      */
     this.captureResolution_ = null;
@@ -229,41 +219,41 @@ cca.views.camera.Modes = class {
 
     /**
      * Mode classname and related functions and attributes.
-     * @type {!Object<!Mode, !cca.views.camera.ModeConfig>}
+     * @type {!Object<!cca.Mode, !cca.views.camera.ModeConfig>}
      * @private
      */
     this.allModes_ = {
-      [Mode.VIDEO]: {
+      [cca.Mode.VIDEO]: {
         captureFactory: () => new cca.views.camera.Video(
             /** @type {!MediaStream} */ (this.stream_), createVideoSaver,
             doSaveVideo),
         isSupported: async () => true,
         constraintsPreferrer: videoPreferrer,
         getV1Constraints: getV1Constraints.bind(this, true),
-        nextMode: Mode.PHOTO,
+        nextMode: cca.Mode.PHOTO,
         captureIntent: cros.mojom.CaptureIntent.VIDEO_RECORD,
       },
-      [Mode.PHOTO]: {
+      [cca.Mode.PHOTO]: {
         captureFactory: () => new cca.views.camera.Photo(
             /** @type {!MediaStream} */ (this.stream_), doSavePhoto,
             this.captureResolution_, playShutterEffect),
         isSupported: async () => true,
         constraintsPreferrer: photoPreferrer,
         getV1Constraints: getV1Constraints.bind(this, false),
-        nextMode: Mode.SQUARE,
+        nextMode: cca.Mode.SQUARE,
         captureIntent: cros.mojom.CaptureIntent.STILL_CAPTURE,
       },
-      [Mode.SQUARE]: {
+      [cca.Mode.SQUARE]: {
         captureFactory: () => new cca.views.camera.Square(
             /** @type {!MediaStream} */ (this.stream_), doSavePhoto,
             this.captureResolution_, playShutterEffect),
         isSupported: async () => true,
         constraintsPreferrer: photoPreferrer,
         getV1Constraints: getV1Constraints.bind(this, false),
-        nextMode: Mode.PHOTO,
+        nextMode: cca.Mode.PHOTO,
         captureIntent: cros.mojom.CaptureIntent.STILL_CAPTURE,
       },
-      [Mode.PORTRAIT]: {
+      [cca.Mode.PORTRAIT]: {
         captureFactory: () => new cca.views.camera.Portrait(
             /** @type {!MediaStream} */ (this.stream_), doSavePhoto,
             this.captureResolution_, playShutterEffect),
@@ -279,7 +269,7 @@ cca.views.camera.Modes = class {
         },
         constraintsPreferrer: photoPreferrer,
         getV1Constraints: getV1Constraints.bind(this, false),
-        nextMode: Mode.PHOTO,
+        nextMode: cca.Mode.PHOTO,
         captureIntent: cros.mojom.CaptureIntent.STILL_CAPTURE,
       },
     };
@@ -311,7 +301,7 @@ cca.views.camera.Modes = class {
 
   /**
    * Updates state of mode related UI to the target mode.
-   * @param {!Mode} mode Mode to be toggled.
+   * @param {!cca.Mode} mode Mode to be toggled.
    * @private
    */
   updateModeUI_(mode) {
@@ -324,7 +314,7 @@ cca.views.camera.Modes = class {
         wrapper.offsetHeight / 2;
     // Make photo mode scroll slightly upper so that the third mode item falls
     // in blur area: crbug.com/988869
-    if (mode === Mode.PHOTO) {
+    if (mode === cca.Mode.PHOTO) {
       scrollTop -= 16;
     }
     this.modesGroup_.scrollTo({
@@ -337,13 +327,14 @@ cca.views.camera.Modes = class {
   /**
    * Gets all mode candidates. Desired trying sequence of candidate modes is
    * reflected in the order of the returned array.
-   * @return {!Array<!Mode>} Mode candidates to be tried out.
+   * @return {!Array<!cca.Mode>} Mode candidates to be tried out.
    */
   getModeCandidates() {
     const tried = {};
     const results = [];
     let mode =
-        /** @type {!Mode} */ (Object.keys(this.allModes_).find(cca.state.get));
+        /** @type {!cca.Mode} */ (
+            Object.keys(this.allModes_).find(cca.state.get));
     while (!tried[mode]) {
       tried[mode] = true;
       results.push(mode);
@@ -355,9 +346,9 @@ cca.views.camera.Modes = class {
   /**
    * Gets all available capture resolution and its corresponding preview
    * constraints for the given mode.
-   * @param {!Mode} mode
+   * @param {!cca.Mode} mode
    * @param {string} deviceId
-   * @param {!ResolutionList} previewResolutions
+   * @param {!cca.ResolutionList} previewResolutions
    * @return {!Array<!CaptureCandidate>}
    */
   getResolutionCandidates(mode, deviceId, previewResolutions) {
@@ -368,7 +359,7 @@ cca.views.camera.Modes = class {
   /**
    * Gets capture resolution and its corresponding preview constraints for the
    * given mode on camera HALv1 device.
-   * @param {!Mode} mode
+   * @param {!cca.Mode} mode
    * @param {?string} deviceId
    * @return {!Promise<!Array<!CaptureCandidate>>}
    */
@@ -380,7 +371,7 @@ cca.views.camera.Modes = class {
 
   /**
    * Gets capture intent for the given mode.
-   * @param {!Mode} mode
+   * @param {!cca.Mode} mode
    * @return {cros.mojom.CaptureIntent} Capture intent for the given mode.
    */
   getCaptureIntent(mode) {
@@ -390,7 +381,7 @@ cca.views.camera.Modes = class {
   /**
    * Gets supported modes for video device of given device id.
    * @param {?string} deviceId Device id of the video device.
-   * @return {!Promise<!Array<!Mode>>} All supported mode for
+   * @return {!Promise<!Array<!cca.Mode>>} All supported mode for
    *     the video device.
    */
   async getSupportedModes(deviceId) {
@@ -421,10 +412,10 @@ cca.views.camera.Modes = class {
 
   /**
    * Creates and updates new current mode object.
-   * @param {!Mode} mode Classname of mode to be updated.
+   * @param {!cca.Mode} mode Classname of mode to be updated.
    * @param {!MediaStream} stream Stream of the new switching mode.
    * @param {?string} deviceId Device id of currently working video device.
-   * @param {?Resolution} captureResolution Capturing resolution width and
+   * @param {?cca.Resolution} captureResolution Capturing resolution width and
    *     height.
    * @return {!Promise}
    */
@@ -486,7 +477,7 @@ cca.views.camera.Modes = class {
 cca.views.camera.ModeBase = class {
   /**
    * @param {!MediaStream} stream
-   * @param {?Resolution} captureResolution Capturing resolution width and
+   * @param {?cca.Resolution} captureResolution Capturing resolution width and
    *     height.
    */
   constructor(stream, captureResolution) {
@@ -500,7 +491,7 @@ cca.views.camera.ModeBase = class {
     /**
      * Capture resolution. May be null on device not support of setting
      * resolution.
-     * @type {?Resolution}
+     * @type {?cca.Resolution}
      * @private
      */
     this.captureResolution_ = captureResolution;
@@ -645,7 +636,7 @@ cca.views.camera.Video = class extends cca.views.camera.ModeBase {
     cca.sound.play('#sound-rec-end');
 
     const settings = this.stream_.getVideoTracks()[0].getSettings();
-    const resolution = new Resolution(settings.width, settings.height);
+    const resolution = new cca.Resolution(settings.width, settings.height);
     cca.state.set('video-capture-post-processing', true);
     try {
       await this.doSaveVideo_(
@@ -722,7 +713,7 @@ cca.views.camera.Photo = class extends cca.views.camera.ModeBase {
   /**
    * @param {!MediaStream} stream
    * @param {!cca.views.camera.DoSavePhoto} doSavePhoto
-   * @param {?Resolution} captureResolution
+   * @param {?cca.Resolution} captureResolution
    * @param {!cca.views.camera.PlayShutterEffect} playShutterEffect
    */
   constructor(stream, doSavePhoto, captureResolution, playShutterEffect) {
@@ -808,7 +799,7 @@ cca.views.camera.Photo = class extends cca.views.camera.ModeBase {
       cca.state.set('photo-capture-post-processing', true);
       const blob = await results[0];
       const image = await cca.util.blobToImage(blob);
-      const resolution = new Resolution(image.width, image.height);
+      const resolution = new cca.Resolution(image.width, image.height);
       await this.doSavePhoto_({resolution, blob}, imageName);
       cca.state.set('photo-capture-post-processing', false, {resolution});
     } catch (e) {
@@ -897,7 +888,7 @@ cca.views.camera.Square = class extends cca.views.camera.Photo {
   /**
    * @param {!MediaStream} stream
    * @param {!cca.views.camera.DoSavePhoto} doSavePhoto
-   * @param {?Resolution} captureResolution
+   * @param {?cca.Resolution} captureResolution
    * @param {!cca.views.camera.PlayShutterEffect} playShutterEffect
    */
   constructor(stream, doSavePhoto, captureResolution, playShutterEffect) {
@@ -945,7 +936,7 @@ cca.views.camera.Portrait = class extends cca.views.camera.Photo {
   /**
    * @param {!MediaStream} stream
    * @param {!cca.views.camera.DoSavePhoto} doSavePhoto
-   * @param {?Resolution} captureResolution
+   * @param {?cca.Resolution} captureResolution
    * @param {!cca.views.camera.PlayShutterEffect} playShutterEffect
    */
   constructor(stream, doSavePhoto, captureResolution, playShutterEffect) {

chrome/browser/resources/chromeos/camera/src/js/views/settings.js

@@ -14,17 +14,12 @@ var cca = cca || {};
  */
 cca.views = cca.views || {};
 
-/**
- * import {Resolution} from '../type.js';
- */
-var Resolution = Resolution || {};
-
 /* eslint-disable no-unused-vars */
 
 /**
  * Object of device id, preferred capture resolution and all
  * available resolutions for a particular video device.
- * @typedef {{prefResol: !Resolution, resols: !ResolutionList}}
+ * @typedef {{prefResol: !cca.Resolution, resols: !cca.ResolutionList}}
  */
 cca.views.ResolutionConfig;
 
@@ -281,7 +276,7 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
         const /** !cca.views.DeviceSetting */ deviceSetting = {
           deviceId,
           photo: {
-            prefResol: /** @type {!Resolution} */ (
+            prefResol: /** @type {!cca.Resolution} */ (
                 photoPreferrer.getPrefResolution(deviceId)),
             resols:
                 /* Filter out resolutions of megapixels < 0.1 i.e. megapixels
@@ -289,7 +284,7 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
                 photoResols.filter((r) => r.area >= 100000),
           },
           video: {
-            prefResol: /** @type {!Resolution} */ (
+            prefResol: /** @type {!cca.Resolution} */ (
                 videoPreferrer.getPrefResolution(deviceId)),
             resols: videoResols,
           },
@@ -319,8 +314,8 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
 
   /**
    * Template for generating option text from photo resolution width and height.
-   * @param {!Resolution} r Resolution of text to be generated.
-   * @param {!ResolutionList} resolutions All available resolutions.
+   * @param {!cca.Resolution} r Resolution of text to be generated.
+   * @param {!cca.ResolutionList} resolutions All available resolutions.
    * @return {string} Text shown on resolution option item.
    * @private
    */
@@ -332,7 +327,7 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
      */
     const gcd = (a, b) => (a === 0 ? b : gcd(b % a, a));
     /**
-     * @param {!Resolution} r
+     * @param {!cca.Resolution} r
      * @return {number}
      */
     const toMegapixel = (r) => Math.round(r.area / 100000) / 10;
@@ -352,7 +347,7 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
 
   /**
    * Template for generating option text from video resolution width and height.
-   * @param {!Resolution} r Resolution of text to be generated.
+   * @param {!cca.Resolution} r Resolution of text to be generated.
    * @return {string} Text shown on resolution option item.
    * @private
    */
@@ -386,7 +381,8 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
      * @param {!HTMLElement} item
      * @param {string} id
      * @param {!cca.views.ResolutionConfig} config
-     * @param {!function(!Resolution, !ResolutionList): string} optTextTempl
+     * @param {!function(!cca.Resolution, !cca.ResolutionList): string}
+     *     optTextTempl
      */
     const prepItem = (item, id, {prefResol, resols}, optTextTempl) => {
       item.dataset.deviceId = id;
@@ -489,7 +485,7 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
   /**
    * Updates current selected photo resolution.
    * @param {string} deviceId Device id of the selected resolution.
-   * @param {!Resolution} resolution Selected resolution.
+   * @param {!cca.Resolution} resolution Selected resolution.
    * @private
    */
   updateSelectedPhotoResolution_(deviceId, resolution) {
@@ -522,7 +518,7 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
   /**
    * Updates current selected video resolution.
    * @param {string} deviceId Device id of the selected resolution.
-   * @param {!Resolution} resolution Selected resolution.
+   * @param {!cca.Resolution} resolution Selected resolution.
    * @private
    */
   updateSelectedVideoResolution_(deviceId, resolution) {
@@ -588,14 +584,14 @@ cca.views.ResolutionSettings = class extends cca.views.BaseSettings {
    * Updates resolution menu with specified resolutions.
    * @param {!HTMLElement} resolItem DOM element holding selected resolution.
    * @param {!HTMLElement} menu Menu holding all resolution option elements.
-   * @param {!function(!Resolution, !ResolutionList): string} optTextTempl
-   *     Template generating text content for each resolution option from its
-   *     width and height.
-   * @param {!function(!Resolution)} onChange Called when selected option
+   * @param {!function(!cca.Resolution, !cca.ResolutionList): string}
+   *     optTextTempl Template generating text content for each resolution
+   *     option from its width and height.
+   * @param {!function(!cca.Resolution)} onChange Called when selected option
    *     changed with resolution of newly selected option.
-   * @param {!ResolutionList} resolutions Resolutions of its width and height to
-   *     be updated with.
-   * @param {!Resolution} selectedR Selected resolution.
+   * @param {!cca.ResolutionList} resolutions Resolutions of its width and
+   *     height to be updated with.
+   * @param {!cca.Resolution} selectedR Selected resolution.
    * @private
    */
   updateMenu_(resolItem, menu, optTextTempl, onChange, resolutions, selectedR) {

chrome/browser/resources/chromeos/camera/src/views/background.html

@@ -10,10 +10,10 @@
     <script src="../js/mojo/camera_intent.mojom-lite.js"></script>
     <script src="../js/mojo/camera_app_helper.mojom-lite.js"></script>
     <script type="module" src="../js/mojo/chrome_helper.js"></script>
-    <script src="../js/perf.js"></script>
-    <script src="../js/type.js"></script>
-    <script src="../js/intent.js"></script>
-    <script src="../js/background_ops.js"></script>
-    <script src="../js/background.js"></script>
+    <script type="module" src="../js/type.js"></script>
+    <script defer src="../js/perf.js"></script>
+    <script defer src="../js/intent.js"></script>
+    <script defer src="../js/background_ops.js"></script>
+    <script defer src="../js/background.js"></script>
   </head>
 </html>

chrome/browser/resources/chromeos/camera/src/views/main.html

@@ -13,54 +13,54 @@
     <script src="../js/chrome_util.js"></script>
     <script src="../js/browser_proxy/browser_proxy.js"></script>
     <script src="../js/google-analytics-bundle.js"></script>
-    <script src="../js/type.js"></script>
-    <script src="../js/perf.js"></script>
-    <script src="../js/metrics.js"></script>
-    <script src="../js/intent.js"></script>
-    <script src="../js/util.js"></script>
-    <script src="../js/toast.js"></script>
-    <script src="../js/tooltip.js"></script>
-    <script src="../js/state.js"></script>
-    <script src="../js/sound.js"></script>
-    <script src="../js/device/error.js"></script>
-    <script src="../js/device/camera3_device_info.js"></script>
-    <script src="../js/device/constraints_preferrer.js"></script>
-    <script src="../js/device/device_info_updater.js"></script>
-    <script src="../js/models/filenamer.js"></script>
-    <script src="../js/gallerybutton.js"></script>
-    <script src="../js/models/filesystem.js"></script>
-    <script src="../js/models/result_saver.js"></script>
-    <script src="../js/models/video_saver_interface.js"></script>
-    <script src="../js/models/file_video_saver.js"></script>
-    <script src="../js/models/intent_video_saver.js"></script>
-    <script src="../js/mojo/mojo_bindings_lite.js"></script>
-    <script src="../js/mojo/camera_metadata_tags.mojom-lite.js"></script>
-    <script src="../js/mojo/camera_metadata.mojom-lite.js"></script>
-    <script src="../js/mojo/camera_common.mojom-lite.js"></script>
-    <script src="../js/mojo/image_capture.mojom-lite.js"></script>
-    <script src="../js/mojo/geometry.mojom-lite.js"></script>
-    <script src="../js/mojo/range.mojom-lite.js"></script>
-    <script src="../js/mojo/camera_intent.mojom-lite.js"></script>
-    <script src="../js/mojo/camera_app.mojom-lite.js"></script>
-    <script src="../js/mojo/camera_app_helper.mojom-lite.js"></script>
+    <script type="module" src="../js/type.js"></script>
+    <script defer src="../js/perf.js"></script>
+    <script defer src="../js/metrics.js"></script>
+    <script defer src="../js/intent.js"></script>
+    <script defer src="../js/util.js"></script>
+    <script defer src="../js/toast.js"></script>
+    <script defer src="../js/tooltip.js"></script>
+    <script defer src="../js/state.js"></script>
+    <script defer src="../js/sound.js"></script>
+    <script defer src="../js/device/error.js"></script>
+    <script defer src="../js/device/camera3_device_info.js"></script>
+    <script defer src="../js/device/constraints_preferrer.js"></script>
+    <script defer src="../js/device/device_info_updater.js"></script>
+    <script defer src="../js/models/filenamer.js"></script>
+    <script defer src="../js/gallerybutton.js"></script>
+    <script defer src="../js/models/filesystem.js"></script>
+    <script defer src="../js/models/result_saver.js"></script>
+    <script defer src="../js/models/video_saver_interface.js"></script>
+    <script defer src="../js/models/file_video_saver.js"></script>
+    <script defer src="../js/models/intent_video_saver.js"></script>
+    <script defer src="../js/mojo/mojo_bindings_lite.js"></script>
+    <script defer src="../js/mojo/camera_metadata_tags.mojom-lite.js"></script>
+    <script defer src="../js/mojo/camera_metadata.mojom-lite.js"></script>
+    <script defer src="../js/mojo/camera_common.mojom-lite.js"></script>
+    <script defer src="../js/mojo/image_capture.mojom-lite.js"></script>
+    <script defer src="../js/mojo/geometry.mojom-lite.js"></script>
+    <script defer src="../js/mojo/range.mojom-lite.js"></script>
+    <script defer src="../js/mojo/camera_intent.mojom-lite.js"></script>
+    <script defer src="../js/mojo/camera_app.mojom-lite.js"></script>
+    <script defer src="../js/mojo/camera_app_helper.mojom-lite.js"></script>
     <script type="module" src="../js/mojo/chrome_helper.js"></script>
     <script type="module" src="../js/mojo/device_operator.js"></script>
-    <script src="../js/mojo/image_capture.js"></script>
-    <script src="../js/views/view.js"></script>
-    <script src="../js/views/camera.js"></script>
-    <script src="../js/views/camera_intent.js"></script>
-    <script src="../js/views/camera/layout.js"></script>
-    <script src="../js/views/camera/options.js"></script>
-    <script src="../js/views/camera/preview.js"></script>
-    <script src="../js/views/camera/recordtime.js"></script>
-    <script src="../js/views/camera/review_result.js"></script>
-    <script src="../js/views/camera/timertick.js"></script>
-    <script src="../js/views/camera/modes.js"></script>
-    <script src="../js/views/dialog.js"></script>
-    <script src="../js/views/settings.js"></script>
-    <script src="../js/views/warning.js"></script>
-    <script src="../js/nav.js"></script>
-    <script src="../js/main.js"></script>
+    <script defer src="../js/mojo/image_capture.js"></script>
+    <script defer src="../js/views/view.js"></script>
+    <script defer src="../js/views/camera.js"></script>
+    <script defer src="../js/views/camera_intent.js"></script>
+    <script defer src="../js/views/camera/layout.js"></script>
+    <script defer src="../js/views/camera/options.js"></script>
+    <script defer src="../js/views/camera/preview.js"></script>
+    <script defer src="../js/views/camera/recordtime.js"></script>
+    <script defer src="../js/views/camera/review_result.js"></script>
+    <script defer src="../js/views/camera/timertick.js"></script>
+    <script defer src="../js/views/camera/modes.js"></script>
+    <script defer src="../js/views/dialog.js"></script>
+    <script defer src="../js/views/settings.js"></script>
+    <script defer src="../js/views/warning.js"></script>
+    <script defer src="../js/nav.js"></script>
+    <script defer src="../js/main.js"></script>
   </head>
   <body class="sound mirror mic _3x3">
     <div id="camera">