[CCA] Convert state.js into ES6 module.

Bug: 141518780
Test: Pass closure compiler check, tast run <DUT> 'camera.CCAUI*' and
manually validate tooltips function of CCA works correctly.

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

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

@@ -104,6 +104,9 @@ js_library("perf") {
 }
 
 js_library("state") {
+  deps = [
+    ":namespace",
+  ]
 }
 
 js_library("background") {

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

@@ -11,6 +11,7 @@
 var cca = {
   mojo: {},
   proxy: {},
+  state: {},
   toast: {},
   tooltip: {},
   util: {},

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

@@ -2,32 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
-
-/**
- * Namespace for the Camera app.
- */
-var cca = cca || {};
-
-/**
- * Namespace for the app state.
- */
-cca.state = cca.state || {};
-
-/* eslint-disable no-unused-vars */
-
 /**
  * @typedef {function(boolean, cca.PerfInformation=)}
  */
-var StateObserver;
-
-/* eslint-enable no-unused-vars */
+let StateObserver;  // eslint-disable-line no-unused-vars
 
 /**
  * @type {!Map<string, Set<!StateObserver>>}
- * @private
  */
-cca.state.observers_ = new Map();
+const allObservers = new Map();
 
 /**
  * Adds observer function to be called on any state change.
@@ -35,14 +18,14 @@ cca.state.observers_ = new Map();
  * @param {!StateObserver} observer Observer function called with
  *     newly changed value.
  */
-cca.state.addObserver = function(state, observer) {
-  let observers = cca.state.observers_.get(state);
+export function addObserver(state, observer) {
+  let observers = allObservers.get(state);
   if (observers === undefined) {
     observers = new Set();
-    cca.state.observers_.set(state, observers);
+    allObservers.set(state, observers);
   }
   observers.add(observer);
-};
+}
 
 /**
  * Removes observer function to be called on state change.
@@ -51,22 +34,22 @@ cca.state.addObserver = function(state, observer) {
  * @return {boolean} Whether the observer is in the set and is removed
  *     successfully or not.
  */
-cca.state.removeObserver = function(state, observer) {
-  const observers = cca.state.observers_.get(state);
+export function removeObserver(state, observer) {
+  const observers = allObservers.get(state);
   if (observers === undefined) {
     return false;
   }
   return observers.delete(observer);
-};
+}
 
 /**
  * Checks if the specified state exists.
  * @param {string} state State to be checked.
  * @return {boolean} Whether the state exists.
  */
-cca.state.get = function(state) {
+export function get(state) {
   return document.body.classList.contains(state);
-};
+}
 
 /**
  * Sets the specified state on or off. Optionally, pass the information for
@@ -76,13 +59,22 @@ cca.state.get = function(state) {
  * @param {cca.PerfInformation=} perfInfo Optional information of this state for
  *     performance measurement.
  */
-cca.state.set = function(state, val, perfInfo = {}) {
-  const oldVal = cca.state.get(state);
+export function set(state, val, perfInfo = {}) {
+  const oldVal = get(state);
   if (oldVal === val) {
     return;
   }
 
   document.body.classList.toggle(state, val);
-  const observers = cca.state.observers_.get(state) || [];
+  const observers = allObservers.get(state) || [];
   observers.forEach((f) => f(val, perfInfo));
-};
+}
+
+/** @const */
+cca.state.addObserver = addObserver;
+/** @const */
+cca.state.removeObserver = removeObserver;
+/** @const */
+cca.state.get = get;
+/** @const */
+cca.state.set = set;

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

@@ -20,7 +20,7 @@
     <script type="module" src="../js/util.js"></script>
     <script type="module" src="../js/toast.js"></script>
     <script type="module" src="../js/tooltip.js"></script>
-    <script defer src="../js/state.js"></script>
+    <script type="module" 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>