[CCA] Convert toast.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: Ie8bccaee10969887bad0371c445aabb925db6482
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1981415
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@{#727399}

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

@@ -126,6 +126,7 @@ js_library("namespace") {
 
 js_library("toast") {
   deps = [
+    ":namespace",
     ":util",
   ]
 }

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

@@ -10,6 +10,7 @@
 // eslint-disable-next-line no-unused-vars
 var cca = {
   mojo: {},
+  toast: {},
   tooltip: {},
   util: {},
 };

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

@@ -2,48 +2,44 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
+import {assertInstanceof} from './chrome_util.js';
+import * as util from './util.js';
 
 /**
- * Namespace for the Camera app.
+ * Updates the toast message.
+ * @param {string} message Message to be updated.
+ * @param {boolean} spoken Whether the toast is spoken only.
  */
-var cca = cca || {};
+function update(message, spoken) {
+  // TTS speaks changes of on-screen aria-live elements. Force content changes
+  // and clear content once inactive to avoid stale content being read out.
+  const element =
+      assertInstanceof(document.querySelector('#toast'), HTMLElement);
+  util.animateCancel(element);  // Cancel the active toast if any.
+  element.textContent = '';     // Force to reiterate repeated messages.
+  element.textContent = chrome.i18n.getMessage(message) || message;
 
-/**
- * Namespace for toast.
- */
-cca.toast = cca.toast || {};
+  element.classList.toggle('spoken', spoken);
+  util.animateOnce(element, () => element.textContent = '');
+}
 
 /**
  * Shows a toast message.
  * @param {string} message Message to be shown.
  */
-cca.toast.show = function(message) {
-  cca.toast.update_(message, false);
-};
+export function show(message) {
+  update(message, false);
+}
 
 /**
  * Speaks a toast message.
  * @param {string} message Message to be spoken.
  */
-cca.toast.speak = function(message) {
-  cca.toast.update_(message, true);
-};
+export function speak(message) {
+  update(message, true);
+}
 
-/**
- * Updates the toast message.
- * @param {string} message Message to be updated.
- * @param {boolean} spoken Whether the toast is spoken only.
- * @private
- */
-cca.toast.update_ = function(message, spoken) {
-  // TTS speaks changes of on-screen aria-live elements. Force content changes
-  // and clear content once inactive to avoid stale content being read out.
-  var element = /** @type {!HTMLElement} */ (document.querySelector('#toast'));
-  cca.util.animateCancel(element); // Cancel the active toast if any.
-  element.textContent = ''; // Force to reiterate repeated messages.
-  element.textContent = chrome.i18n.getMessage(message) || message;
-
-  element.classList.toggle('spoken', spoken);
-  cca.util.animateOnce(element, () => element.textContent = '');
-};
+/** @const */
+cca.toast.show = show;
+/** @const */
+cca.toast.speak = speak;

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

@@ -18,7 +18,7 @@
     <script defer src="../js/metrics.js"></script>
     <script defer src="../js/intent.js"></script>
     <script type="module" src="../js/util.js"></script>
-    <script defer src="../js/toast.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 defer src="../js/sound.js"></script>