[CCA] Add closure compiler check to main.

Bug: b/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: Ib7c71fba143b809f612f5148070755cdf1eca131
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1933860Reviewed-by: Shik Chen <shik@chromium.org>
Commit-Queue: Shik Chen <shik@chromium.org>
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#720151}

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

@@ -19,7 +19,9 @@ js_type_check("compile_resources") {
   deps = [
     ":background",
     ":chrome_util",
+    ":gallerybutton",
     ":intent",
+    ":main",
     ":metrics",
     ":nav",
     ":sound",
@@ -40,6 +42,17 @@ js_library("intent") {
   ]
 }
 
+js_library("gallerybutton") {
+  deps = [
+    ":chrome_util",
+    "models:gallery",
+  ]
+  externs_list = [
+    "$externs_path/file_manager_private.js",
+    "$externs_path/file_system_provider.js",
+  ]
+}
+
 js_library("metrics") {
   deps = [
     "externs:chrome_platform_analytics",
@@ -52,6 +65,23 @@ js_library("sound") {
 js_library("type") {
 }
 
+js_library("main") {
+  deps = [
+    ":chrome_util",
+    ":gallerybutton",
+    ":intent",
+    ":state",
+    "device:constraints_preferrer",
+    "device:device_info_updater",
+    "models:gallery",
+    "views:camera",
+    "views:camera_intent",
+    "views:dialog",
+    "views:settings",
+    "views:warning",
+  ]
+}
+
 js_library("nav") {
   deps = [
     "mojo:device_operator",

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

@@ -85,3 +85,31 @@
   }
   return value;
 }
+
+/**
+ * @param {*} value The value to check.
+ * @param {string=} opt_message A message to show when this is hit.
+ * @return {string}
+ */
+/* #export */ function assertString(value, opt_message) {
+  // We don't use assert immediately here so that we avoid constructing an error
+  // message if we don't have to.
+  if (typeof value !== 'string') {
+    assertNotReached(opt_message || 'Value ' + value + ' is not a string');
+  }
+  return /** @type {string} */ (value);
+}
+
+/**
+ * @param {*} value The value to check.
+ * @param {string=} opt_message A message to show when this is hit.
+ * @return {boolean}
+ */
+/* #export */ function assertBoolean(value, opt_message) {
+  // We don't use assert immediately here so that we avoid constructing an error
+  // message if we don't have to.
+  if (typeof value !== 'boolean') {
+    assertNotReached(opt_message || 'Value ' + value + ' is not a boolean');
+  }
+  return /** @type {boolean} */ (value);
+}

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

@@ -9,100 +9,111 @@
  */
 var cca = cca || {};
 
+/**
+ * import {assertInstanceof} from './chrome_util.js';
+ */
+var assertInstanceof = assertInstanceof || {};
+
 /**
  * Creates a controller for the gallery-button.
- * @param {cca.models.Gallery} model Model object.
  * @implements {cca.models.Gallery.Observer}
- * @constructor
  */
-cca.GalleryButton = function(model) {
+cca.GalleryButton = class {
   /**
-   * @type {cca.models.Gallery}
-   * @private
+   * @param {!cca.models.Gallery} model Model object.
    */
-  this.model_ = model;
+  constructor(model) {
+    /**
+     * @type {!cca.models.Gallery}
+     * @private
+     */
+    this.model_ = model;
+
+    /**
+     * @type {?cca.models.Gallery.Picture}
+     * @private
+     */
+    this.lastPicture_ = null;
+
+    /**
+     * @type {!HTMLButtonElement}
+     * @private
+     */
+    this.button_ = assertInstanceof(
+        document.querySelector('#gallery-enter'), HTMLButtonElement);
+
+    this.button_.addEventListener('click', (event) => {
+      // Check if the last picture still exists before opening it in the
+      // gallery.
+      // TODO(yuli): Remove this workaround for unable watching changed-files.
+      this.model_.checkLastPicture().then((picture) => {
+        if (picture) {
+          this.openGallery_(picture);
+        }
+      });
+    });
+  }
 
   /**
-   * @type {cca.models.Gallery.Picture}
+   * Updates the button for the model changes.
    * @private
    */
-  this.lastPicture_ = null;
+  updateButton_() {
+    this.model_.lastPicture()
+        .then((picture) => {
+          if (picture !== this.lastPicture_) {
+            this.lastPicture_ = picture;
+            return true;
+          }
+          return false;
+        })
+        .then((changed) => {
+          if (!changed) {
+            return;
+          }
+          this.button_.hidden = !this.lastPicture_;
+          var url = this.lastPicture_ && this.lastPicture_.thumbnailURL;
+          this.button_.style.backgroundImage =
+              url ? ('url("' + url + '")') : 'none';
+        });
+  }
 
   /**
-   * @type {HTMLButtonElement}
+   * Opens the gallery to browse the picture.
+   * @param {cca.models.Gallery.Picture} picture Picture to be browsed.
    * @private
    */
-  this.button_ = document.querySelector('#gallery-enter');
-
-  // End of properties, seal the object.
-  Object.seal(this);
-
-  this.button_.addEventListener('click', (event) => {
-    // Check if the last picture still exists before opening it in the gallery.
-    // TODO(yuli): Remove this workaround for unable watching changed-files.
-    this.model_.checkLastPicture().then((picture) => {
-      if (picture) {
-        this.openGallery_(picture);
+  openGallery_(picture) {
+    const id = 'nlkncpkkdoccmpiclbokaimcnedabhhm|app|open';
+    const entry = picture.pictureEntry;
+    chrome.fileManagerPrivate.executeTask(id, [entry], (result) => {
+      if (chrome.runtime.lastError) {
+        console.warn(
+            'Unable to open picture: ' + chrome.runtime.lastError.message);
+        return;
+      }
+      if (result !== 'opened' && result !== 'message_sent') {
+        console.warn('Unable to open picture: ' + result);
       }
     });
-  });
-};
-
-/**
- * Updates the button for the model changes.
- * @private
- */
-cca.GalleryButton.prototype.updateButton_ = function() {
-  this.model_.lastPicture().then((picture) => {
-    if (picture !== this.lastPicture_) {
-      this.lastPicture_ = picture;
-      return true;
-    }
-    return false;
-  }).then((changed) => {
-    if (!changed) {
-      return;
-    }
-    this.button_.hidden = !this.lastPicture_;
-    var url = this.lastPicture_ && this.lastPicture_.thumbnailURL;
-    this.button_.style.backgroundImage = url ? ('url("' + url + '")') : 'none';
-  });
-};
+  }
 
-/**
- * Opens the gallery to browse the picture.
- * @param {cca.models.Gallery.Picture} picture Picture to be browsed.
- * @private
- */
-cca.GalleryButton.prototype.openGallery_ = function(picture) {
-  const id = 'nlkncpkkdoccmpiclbokaimcnedabhhm|app|open';
-  const entry = picture.pictureEntry;
-  chrome.fileManagerPrivate.executeTask(id, [entry], (result) => {
-    if (chrome.runtime.lastError) {
-      console.warn(
-          'Unable to open picture: ' + chrome.runtime.lastError.message);
-      return;
-    }
-    if (result !== 'opened' && result !== 'message_sent') {
-      console.warn('Unable to open picture: ' + result);
+  /**
+   * @override
+   */
+  onPictureDeleted(picture) {
+    if (this.lastPicture_ === picture) {
+      this.updateButton_();
     }
-  });
-};
-
-/**
- * @override
- */
-cca.GalleryButton.prototype.onPictureDeleted = function(picture) {
-  if (this.lastPicture_ === picture) {
-    this.updateButton_();
   }
-};
 
-/**
- * @override
- */
-cca.GalleryButton.prototype.onPictureAdded = function(picture) {
-  if (!this.lastPicture_ || this.lastPicture_.timestamp <= picture.timestamp) {
-    this.updateButton_();
+  /**
+   * @override
+   */
+  onPictureAdded(picture) {
+    if (!this.lastPicture_ ||
+        this.lastPicture_.timestamp <= picture.timestamp) {
+      this.updateButton_();
+    }
   }
 };

chrome/browser/resources/chromeos/camera/src/js/models/gallery.js

@@ -21,7 +21,7 @@ cca.models = cca.models || {};
  */
 cca.models.Gallery = function() {
   /**
-   * @type {Array<cca.models.Gallery.Observer>}
+   * @type {!Array<!cca.models.Gallery.Observer>}
    * @private
    */
   this.observers_ = [];
@@ -126,28 +126,25 @@ cca.models.Gallery.Picture.prototype.pictureURL = function() {
 
 /**
  * Observer interface for the pictures' model changes.
- * @constructor
- */
-cca.models.Gallery.Observer = function() {
-};
-
-/**
- * Notifies about a deleted picture.
- * @param {cca.models.Gallery.Picture} picture Picture deleted.
+ * @interface
  */
-cca.models.Gallery.Observer.prototype.onPictureDeleted = function(picture) {
-};
+cca.models.Gallery.Observer = class {
+  /**
+   * Notifies about a deleted picture.
+   * @param {cca.models.Gallery.Picture} picture Picture deleted.
+   */
+  onPictureDeleted(picture) {}
 
-/**
- * Notifies about an added picture.
- * @param {cca.models.Gallery.Picture} picture Picture added.
- */
-cca.models.Gallery.Observer.prototype.onPictureAdded = function(picture) {
+  /**
+   * Notifies about an added picture.
+   * @param {cca.models.Gallery.Picture} picture Picture added.
+   */
+  onPictureAdded(picture) {}
 };
 
 /**
  * Adds an observer.
- * @param {cca.models.Gallery.Observer} observer Observer to be added.
+ * @param {!cca.models.Gallery.Observer} observer Observer to be added.
  */
 cca.models.Gallery.prototype.addObserver = function(observer) {
   this.observers_.push(observer);
@@ -160,7 +157,7 @@ cca.models.Gallery.prototype.addObserver = function(observer) {
  * @private
  */
 cca.models.Gallery.prototype.notifyObservers_ = function(fn, picture) {
-  this.observers_.forEach((observer) => observer[fn](picture));
+  this.observers_.forEach((/** !Object */ observer) => observer[fn](picture));
 };
 
 /**

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

@@ -15,8 +15,10 @@ js_type_check("compile_resources") {
   deps = [
     ":camera",
     ":camera_intent",
+    ":dialog",
     ":settings",
     ":view",
+    ":warning",
   ]
 }
 
@@ -34,6 +36,9 @@ js_library("camera") {
   ]
 }
 
+js_library("dialog") {
+}
+
 js_library("camera_intent") {
   deps = [
     ":camera",
@@ -60,3 +65,6 @@ js_library("view") {
 
   externs_list = [ "../externs/chrome.js" ]
 }
+
+js_library("warning") {
+}

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

@@ -15,64 +15,74 @@ var cca = cca || {};
 cca.views = cca.views || {};
 
 /**
- * Creates the Dialog view controller.
- * @extends {cca.views.View}
- * @constructor
- * @param {string} viewId Root element id of dialog view.
+ * import {assertString} from '../chrome_util.js';
  */
-cca.views.Dialog = function(viewId) {
-  cca.views.View.call(this, viewId, true);
+var assertString = assertString || {};
 
-  /**
-   * @type {HTMLButtonElement}
-   * @private
-   */
-  this.positiveButton_ =
-      document.querySelector(`${viewId} .dialog-positive-button`);
+/**
+ * import {assertInstanceof, assertString, assertBoolean}
+ * from '../chrome_util.js';
+ */
+var {assertInstanceof, assertString, assertBoolean} = {
+  assertInstanceof,
+  assertString,
+  assertBoolean,
+};
 
+/**
+ * Creates the Dialog view controller.
+ */
+cca.views.Dialog = class extends cca.views.View {
   /**
-   * @type {!HTMLButtonElement}
-   * @private
+   * @param {string} viewId Root element id of dialog view.
    */
-  this.negativeButton_ =
-      document.querySelector(`${viewId} .dialog-negative-button`);
+  constructor(viewId) {
+    super(viewId, true);
 
-  /**
-   * @type {!HTMLElement}
-   * @private
-   */
-  this.messageHolder_ = document.querySelector(`${viewId} .dialog-msg-holder`);
+    /**
+     * @type {!HTMLButtonElement}
+     * @private
+     */
+    this.positiveButton_ = assertInstanceof(
+        document.querySelector(`${viewId} .dialog-positive-button`),
+        HTMLButtonElement);
 
-  // End of properties, seal the object.
-  Object.seal(this);
+    /**
+     * @type {!HTMLButtonElement}
+     * @private
+     */
+    this.negativeButton_ = assertInstanceof(
+        document.querySelector(`${viewId} .dialog-negative-button`),
+        HTMLButtonElement);
 
-  this.positiveButton_.addEventListener('click', () => this.leave(true));
-  if (this.negativeButton_) {
-    this.negativeButton_.addEventListener('click', () => this.leave());
-  }
-};
+    /**
+     * @type {!HTMLElement}
+     * @private
+     */
+    this.messageHolder_ = assertInstanceof(
+        document.querySelector(`${viewId} .dialog-msg-holder`), HTMLElement);
 
-cca.views.Dialog.prototype = {
-  __proto__: cca.views.View.prototype,
-};
+    this.positiveButton_.addEventListener('click', () => this.leave(true));
+    if (this.negativeButton_) {
+      this.negativeButton_.addEventListener('click', () => this.leave());
+    }
+  }
 
-/**
- * @param {string} message Message of the dialog.
- * @param {boolean} cancellable Whether the dialog is cancellable.
- * @override
- */
-cca.views.Dialog.prototype.entering = function({message, cancellable} = {}) {
-  if (this.messageHolder_ && message) {
+  /**
+   * @override
+   */
+  entering({message, cancellable = false} = {}) {
+    message = assertString(message);
     this.messageHolder_.textContent = message;
+    if (this.negativeButton_) {
+      this.negativeButton_.hidden = !cancellable;
+    }
   }
-  if (this.negativeButton_) {
-    this.negativeButton_.hidden = !cancellable;
-  }
-};
 
-/**
- * @override
- */
-cca.views.Dialog.prototype.focus = function() {
-  this.positiveButton_.focus();
+  /**
+   * @override
+   */
+  focus() {
+    this.positiveButton_.focus();
+  }
 };

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

@@ -14,6 +14,31 @@ var cca = cca || {};
  */
 cca.views = cca.views || {};
 
+/* eslint-disable no-unused-vars */
+
+/**
+ * message for message of the dialog view, cancellable for whether the dialog
+ * view is cancellable.
+ * @typedef {{
+ *   message: string,
+ *   cancellable: (boolean|undefined),
+ * }}
+ */
+cca.views.DialogEnterOptions;
+
+/**
+ * Warning message name.
+ * @typedef {string}
+ */
+cca.views.WarningEnterOptions;
+
+/**
+ * @typedef {!cca.views.DialogEnterOptions|!cca.views.WarningEnterOptions}
+ */
+cca.views.EnterOptions;
+
+/* eslint-enable no-unused-vars */
+
 /**
  * Base controller of a view for views' navigation sessions (cca.nav).
  * @param {string} selector Selector text of the view's root element.
@@ -87,28 +112,27 @@ cca.views.View.prototype.onKeyPressed = function(key) {
 /**
  * Focuses the default element on the view if applicable.
  */
-cca.views.View.prototype.focus = function() {
-};
+cca.views.View.prototype.focus = function() {};
 
 /**
  * Layouts the view.
  */
-cca.views.View.prototype.layout = function() {
-};
+cca.views.View.prototype.layout = function() {};
 
 /**
  * Hook of the subclass for entering the view.
- * @param {...*} args Optional rest parameters for entering the view.
+ * @param {cca.views.EnterOptions=} options Optional rest parameters for
+ *     entering the view.
  */
-cca.views.View.prototype.entering = function(...args) {
-};
+cca.views.View.prototype.entering = function(options) {};
 
 /**
  * Enters the view.
- * @param {...*} args Optional rest parameters for entering the view.
+ * @param {cca.views.EnterOptions=} options Optional rest parameters for
+ *     entering the view.
  * @return {!Promise<*>} Promise for the navigation session.
  */
-cca.views.View.prototype.enter = function(...args) {
+cca.views.View.prototype.enter = function(options) {
   // The session is started by entering the view and ended by leaving the view.
   if (!this.session_) {
     var end;
@@ -119,7 +143,7 @@ cca.views.View.prototype.enter = function(...args) {
       end(result);
     };
   }
-  this.entering(...args);
+  this.entering(options);
   return this.session_;
 };
 

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

@@ -14,76 +14,83 @@ var cca = cca || {};
  */
 cca.views = cca.views || {};
 
+/**
+ * import {assertString} from '../chrome_util.js';
+ */
+var assertString = assertString || {};
+
 /**
  * Creates the warning-view controller.
- * @extends {cca.views.View}
- * @constructor
  */
-cca.views.Warning = function() {
-  cca.views.View.call(this, '#warning');
+cca.views.Warning = class extends cca.views.View {
+  /**
+   * @public
+   */
+  constructor() {
+    super('#warning');
+
+    /**
+     * @type {!Array<string>}
+     * @private
+     */
+    this.errorNames_ = [];
+  }
 
   /**
-   * @type {Array<string>}
+   * Updates the error message for the latest error-name in the stack.
    * @private
    */
-  this.errorNames_ = [];
-
-  // End of properties, seal the object.
-  Object.seal(this);
-};
+  updateMessage_() {
+    let message = '';
+    switch (this.errorNames_[this.errorNames_.length - 1]) {
+      case 'no-camera':
+        message = 'error_msg_no_camera';
+        break;
+      case 'filesystem-failure':
+        message = 'error_msg_file_system_failed';
+        break;
+    }
+    document.querySelector('#error-msg').textContent =
+        chrome.i18n.getMessage(message);
+  }
 
-cca.views.Warning.prototype = {
-  __proto__: cca.views.View.prototype,
-};
+  /**
+   * @override
+   */
+  entering(name) {
+    name = assertString(name);
 
-/**
- * Updates the error message for the latest error-name in the stack.
- * @private
- */
-cca.views.Warning.prototype.updateMessage_ = function() {
-  var message = '';
-  switch (this.errorNames_[this.errorNames_.length - 1]) {
-    case 'no-camera':
-      message = 'error_msg_no_camera';
-      break;
-    case 'filesystem-failure':
-      message = 'error_msg_file_system_failed';
-      break;
+    // Remove the error-name from the stack to avoid duplication. Then make the
+    // error-name the latest one to show its message.
+    const index = this.errorNames_.indexOf(name);
+    if (index !== -1) {
+      this.errorNames_.splice(index, 1);
+    }
+    this.errorNames_.push(name);
+    this.updateMessage_();
   }
-  document.querySelector('#error-msg').textContent =
-      chrome.i18n.getMessage(message);
-};
 
-/**
- * @param {string} name Name of the error.
- * @override
- */
-cca.views.Warning.prototype.entering = function(name) {
-  // Remove the error-name from the stack to avoid duplication. Then make the
-  // error-name the latest one to show its message.
-  var index = this.errorNames_.indexOf(name);
-  if (index != -1) {
-    this.errorNames_.splice(index, 1);
-  }
-  this.errorNames_.push(name);
-  this.updateMessage_();
-};
+  /**
+   * @override
+   */
+  leaving(...args) {
+    /**
+     * Recovered error-name for leaving the view.
+     * @type {string}
+     */
+    const name = assertString(args[0]);
 
-/**
- * @param {string} name Recovered error-name for leaving the view.
- * @override
- */
-cca.views.Warning.prototype.leaving = function(name) {
-  // Remove the recovered error from the stack but don't leave the view until
-  // there is no error left in the stack.
-  var index = this.errorNames_.indexOf(name);
-  if (index != -1) {
-    this.errorNames_.splice(index, 1);
-  }
-  if (this.errorNames_.length) {
-    this.updateMessage_();
-    return false;
+    // Remove the recovered error from the stack but don't leave the view until
+    // there is no error left in the stack.
+    const index = this.errorNames_.indexOf(name);
+    if (index !== -1) {
+      this.errorNames_.splice(index, 1);
+    }
+    if (this.errorNames_.length) {
+      this.updateMessage_();
+      return false;
+    }
+    document.querySelector('#error-msg').textContent = '';
+    return true;
   }
-  document.querySelector('#error-msg').textContent = '';
-  return true;
 };

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

@@ -20,13 +20,13 @@
     <script src="../js/tooltip.js"></script>
     <script src="../js/state.js"></script>
     <script src="../js/sound.js"></script>
-    <script src="../js/gallerybutton.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/models/gallery.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>