[CCA] Convert tooltip.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: I2adb2851fcd291e642ab1006c5e248a5af4729df
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1969089
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#727364}

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

@@ -131,6 +131,10 @@ js_library("toast") {
 }
 
 js_library("tooltip") {
+  deps = [
+    ":chrome_util",
+    ":namespace",
+  ]
 }
 
 js_library("util") {

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

@@ -8,4 +8,7 @@
  */
 
 // eslint-disable-next-line no-unused-vars
-var cca = {mojo: {}};
+var cca = {
+  mojo: {},
+  tooltip: {},
+};

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

@@ -2,61 +2,25 @@
 // 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 tooltip.
- */
-cca.tooltip = cca.tooltip || {};
+import {assertInstanceof} from './chrome_util.js';
 
 /**
  * Wrapper element that shows tooltip.
- * @private {HTMLElement}
+ * @type {?HTMLElement}
  */
-cca.tooltip.wrapper_ = null;
+let wrapper = null;
 
 /**
  * Hovered element whose tooltip to be shown.
- * @private {HTMLElement}
- */
-cca.tooltip.hovered_ = null;
-
-/**
- * Sets up tooltips for elements.
- * @param {NodeList<Element>} elements Elements whose tooltips to be shown.
- * @return {NodeList<Element>} Elements whose tooltips have been set up.
+ * @type {?HTMLElement}
  */
-cca.tooltip.setup = function(elements) {
-  cca.tooltip.wrapper_ =
-      /** @type {HTMLElement} */ (document.querySelector('#tooltip'));
-  elements.forEach((element) => {
-    const el = /** @type {HTMLElement} */ (element);
-    var handler = () => {
-      // Handler hides tooltip only when it's for the element.
-      if (el === cca.tooltip.hovered_) {
-        cca.tooltip.hide();
-      }
-    };
-    el.addEventListener('mouseout', handler);
-    el.addEventListener('click', handler);
-    el.addEventListener('mouseover', cca.tooltip.show_.bind(undefined, el));
-  });
-  return elements;
-};
+let hovered = null;
 
 /**
  * Positions the tooltip wrapper over the hovered element.
- * @private
  */
-cca.tooltip.position_ = function() {
+function position() {
   const [edgeMargin, elementMargin] = [5, 8];
-  var wrapper = cca.tooltip.wrapper_;
-  var hovered = cca.tooltip.hovered_;
   var rect = hovered.getBoundingClientRect();
   var tooltipTop = rect.top - wrapper.offsetHeight - elementMargin;
   if (tooltipTop < edgeMargin) {
@@ -70,15 +34,25 @@ cca.tooltip.position_ = function() {
       Math.max(hoveredCenter - wrapper.clientWidth / 2, edgeMargin),
       document.body.offsetWidth - wrapper.offsetWidth - edgeMargin);
   wrapper.style.left = Math.round(left) + 'px';
-};
+}
+
+/**
+ * Hides the shown tooltip if any.
+ */
+export function hide() {
+  if (hovered) {
+    hovered = null;
+    wrapper.textContent = '';
+    wrapper.classList.remove('visible');
+  }
+}
 
 /**
  * Shows a tooltip over the hovered element.
- * @param {HTMLElement} element Hovered element whose tooltip to be shown.
- * @private
+ * @param {!HTMLElement} element Hovered element whose tooltip to be shown.
  */
-cca.tooltip.show_ = function(element) {
-  cca.tooltip.hide();
+function show(element) {
+  hide();
   let message = element.getAttribute('aria-label');
   if (element.hasAttribute('tooltip-true') && element.checked) {
     message = element.getAttribute('tooltip-true');
@@ -86,19 +60,35 @@ cca.tooltip.show_ = function(element) {
   if (element.hasAttribute('tooltip-false') && !element.checked) {
     message = element.getAttribute('tooltip-false');
   }
-  cca.tooltip.wrapper_.textContent = message;
-  cca.tooltip.hovered_ = element;
-  cca.tooltip.position_();
-  cca.tooltip.wrapper_.classList.add('visible');
-};
+  wrapper.textContent = message;
+  hovered = element;
+  position();
+  wrapper.classList.add('visible');
+}
 
 /**
- * Hides the shown tooltip if any.
+ * Sets up tooltips for elements.
+ * @param {!NodeList<Element>} elements Elements whose tooltips to be shown.
+ * @return {!NodeList<Element>} Elements whose tooltips have been set up.
  */
-cca.tooltip.hide = function() {
-  if (cca.tooltip.hovered_) {
-    cca.tooltip.hovered_ = null;
-    cca.tooltip.wrapper_.textContent = '';
-    cca.tooltip.wrapper_.classList.remove('visible');
-  }
-};
+export function setup(elements) {
+  wrapper = assertInstanceof(document.querySelector('#tooltip'), HTMLElement);
+  elements.forEach((element) => {
+    const el = assertInstanceof(element, HTMLElement);
+    var handler = () => {
+      // Handler hides tooltip only when it's for the element.
+      if (el === hovered) {
+        hide();
+      }
+    };
+    el.addEventListener('mouseout', handler);
+    el.addEventListener('click', handler);
+    el.addEventListener('mouseover', () => show(el));
+  });
+  return elements;
+}
+
+/** @const */
+cca.tooltip.hide = hide;
+/** @const */
+cca.tooltip.setup = setup;

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

@@ -19,7 +19,7 @@
     <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 type="module" 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>