CCA: Use bracket property accessors for all undefined property

CCA has 3 kinds of property currently undefined to closure compiler:
1. Properties set by external browsing context.
2. Properties defined in dataset.
3. properties defined under * type.
This CL use bracket property accessors to access these properties for
avoiding being caught in closure compiler strict mode check.

Bug: 1122444
Test: tast run <DUT> "camera.CCAUI*"
Change-Id: I8f57adc6ca536629377af4976bb45515b4efc2be
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2383590
Commit-Queue: Inker Kuo <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#803347}

chromeos/components/camera_app_ui/resources/src/js/background.js

@@ -206,7 +206,7 @@ class CCAWindow {
               this.testingCallbacks_.onClosed(windowUrl);
             }
           });
-          appWindow.contentWindow.backgroundOps = this;
+          appWindow.contentWindow['backgroundOps'] = this;
           if (this.testingCallbacks_ !== null) {
             this.testingCallbacks_.onCreated(windowUrl);
           }
@@ -588,8 +588,9 @@ chrome.app.runtime.onLaunched.addListener((launchData) => {
     background = new Background();
   }
   try {
-    if (launchData.url) {
-      const intent = Intent.create(new URL(launchData.url));
+    const /** (string|undefined) */ url = launchData['url'];
+    if (url !== undefined) {
+      const intent = Intent.create(new URL(url));
       background.launchIntent(intent);
     } else {
       background.launchApp();

chromeos/components/camera_app_ui/resources/src/js/device/constraints_preferrer.js

@@ -251,7 +251,7 @@ export class VideoConstraintsPreferrer extends ConstraintsPreferrer {
    */
   restoreFpsPreference_() {
     browserProxy.localStorageGet({deviceVideoFps: {}})
-        .then((values) => this.prefFpses_ = values.deviceVideoFps);
+        .then((values) => this.prefFpses_ = values['deviceVideoFps']);
   }
 
   /**

chromeos/components/camera_app_ui/resources/src/js/main.js

@@ -7,7 +7,7 @@ import {
   ForegroundOps,  // eslint-disable-line no-unused-vars
 } from './background_ops.js';
 import {browserProxy} from './browser_proxy/browser_proxy.js';
-import {assert} from './chrome_util.js';
+import {assert, assertInstanceof} from './chrome_util.js';
 import {
   PhotoConstraintsPreferrer,
   VideoConstraintsPreferrer,
@@ -131,22 +131,26 @@ export class App {
    */
   setupToggles_() {
     browserProxy.localStorageGet({expert: false})
-        .then(({expert}) => state.set(state.State.EXPERT, expert));
+        .then((values) => state.set(state.State.EXPERT, values['expert']));
     dom.getAll('input', HTMLInputElement).forEach((element) => {
-      element.addEventListener(
-          'keypress',
-          (event) =>
-              util.getShortcutIdentifier(event) === 'Enter' && element.click());
+      element.addEventListener('keypress', (event) => {
+        const e = assertInstanceof(event, KeyboardEvent);
+        if (util.getShortcutIdentifier(e) === 'Enter') {
+          element.click();
+        }
+      });
 
-      const payload = (element) => ({[element.dataset.key]: element.checked});
+      const payload = (element) =>
+          ({[element.dataset['key']]: element.checked});
       const save = (element) => {
-        if (element.dataset.key !== undefined) {
+        if (element.dataset['key'] !== undefined) {
           browserProxy.localStorageSet(payload(element));
         }
       };
       element.addEventListener('change', (event) => {
-        if (element.dataset.state !== undefined) {
-          state.set(state.assertState(element.dataset.state), element.checked);
+        if (element.dataset['state'] !== undefined) {
+          state.set(
+              state.assertState(element.dataset['state']), element.checked);
         }
         if (event.isTrusted) {
           save(element);
@@ -160,12 +164,12 @@ export class App {
           }
         }
       });
-      if (element.dataset.key !== undefined) {
+      if (element.dataset['key'] !== undefined) {
         // Restore the previously saved state on startup.
         browserProxy.localStorageGet(payload(element))
             .then(
-                (values) =>
-                    util.toggleChecked(element, values[element.dataset.key]));
+                (values) => util.toggleChecked(
+                    element, values[element.dataset['key']]));
       }
     });
   }
@@ -228,7 +232,7 @@ export class App {
    */
   onKeyPressed_(event) {
     tooltip.hide();  // Hide shown tooltip on any keypress.
-    nav.onKeyPressed(event);
+    nav.onKeyPressed(assertInstanceof(event, KeyboardEvent));
   }
 
   /**

chromeos/components/camera_app_ui/resources/src/js/metrics.js

@@ -95,8 +95,8 @@ export function initMetrics() {
       }, i[r].l = 1 * new Date();
       const a = s.createElement(o);
       const m = s.getElementsByTagName(o)[0];
-      a.async = 1;
-      a.src = g;
+      a['async'] = 1;
+      a['src'] = g;
       m.parentNode.insertBefore(a, m);
     })(window, document, 'script', '../js/lib/analytics.js', 'ga');
 
@@ -317,7 +317,8 @@ export class PerfEventParam {
  * @param {!PerfEventParam} param
  */
 export function sendPerfEvent({event, duration, extras = {}}) {
-  const {resolution = '', facing = ''} = extras;
+  const resolution = extras['resolution'] || '';
+  const facing = extras['facing'] || '';
   sendEvent(
       {
         eventCategory: 'perf',

chromeos/components/camera_app_ui/resources/src/js/nav.js

@@ -53,7 +53,7 @@ function activate(index) {
   const view = allViews[index];
   view.root.setAttribute('aria-hidden', 'false');
   dom.getAllFrom(view.root, '[tabindex]', HTMLElement).forEach((element) => {
-    element.setAttribute('tabindex', element.dataset.tabindex);
+    element.setAttribute('tabindex', element.dataset['tabindex']);
     element.removeAttribute('data-tabindex');
   });
   view.focus();
@@ -67,7 +67,7 @@ function inactivate(index) {
   const view = allViews[index];
   view.root.setAttribute('aria-hidden', 'true');
   dom.getAllFrom(view.root, '[tabindex]', HTMLElement).forEach((element) => {
-    element.dataset.tabindex = element.getAttribute('tabindex');
+    element.dataset['tabindex'] = element.getAttribute('tabindex');
     element.setAttribute('tabindex', '-1');
   });
   document.activeElement.blur();

chromeos/components/camera_app_ui/resources/src/js/sound.js

@@ -16,7 +16,8 @@ export function play(selector) {
   let cancel;
   const p = new Promise((resolve, reject) => {
     const element = dom.get(selector, HTMLAudioElement);
-    const timeout = setTimeout(resolve, Number(element.dataset.timeout || 0));
+    const timeout =
+        setTimeout(resolve, Number(element.dataset['timeout'] || 0));
     cancel = () => {
       clearTimeout(timeout);
       reject(new Error('cancel'));

chromeos/components/camera_app_ui/resources/src/js/views/camera/mode/index.js

@@ -258,7 +258,7 @@ export class Modes {
       });
       element.addEventListener('change', async (event) => {
         if (element.checked) {
-          const mode = element.dataset.mode;
+          const mode = /** @type {!Mode} */ (element.dataset['mode']);
           this.updateModeUI_(mode);
           state.set(state.State.MODE_SWITCHING, true);
           const isSuccess = await this.doSwitchMode_();
@@ -387,7 +387,9 @@ export class Modes {
     dom.getAll('div.mode-item', HTMLDivElement).forEach((element) => {
       const radio = dom.getFrom(element, 'input[type=radio]', HTMLInputElement);
       element.classList.toggle(
-          'hide', !supportedModes.includes(radio.dataset.mode));
+          'hide',
+          !supportedModes.includes(
+              /** @type {!Mode} */ (radio.dataset['mode'])));
     });
     this.modesGroup_.classList.toggle('scrollable', supportedModes.length > 3);
     this.modesGroup_.classList.remove('hide');

chromeos/components/camera_app_ui/resources/src/js/views/camera/options.js

@@ -100,7 +100,7 @@ export class Options {
 
     // Restore saved mirroring states per video device.
     browserProxy.localStorageGet({mirroringToggles: {}})
-        .then((values) => this.mirroringToggles_ = values.mirroringToggles);
+        .then((values) => this.mirroringToggles_ = values['mirroringToggles']);
     // Remove the deprecated values.
     browserProxy.localStorageRemove(
         ['effectIndex', 'toggleMulti', 'toggleMirror']);

chromeos/components/camera_app_ui/resources/src/js/views/settings.js

@@ -84,7 +84,7 @@ export class BaseSettings extends View {
   openSubSettings(name) {
     // Dismiss master-settings if sub-settings was dismissed by background
     // click.
-    nav.open(name).then((cond) => cond && cond.bkgnd && this.leave(cond));
+    nav.open(name).then((cond) => cond && cond['bkgnd'] && this.leave(cond));
   }
 }
 
@@ -405,7 +405,7 @@ export class ResolutionSettings extends BaseSettings {
      * @param {function(!Resolution, !ResolutionList): string} optTextTempl
      */
     const prepItem = (item, id, {prefResol, resols}, optTextTempl) => {
-      item.dataset.deviceId = id;
+      item.dataset['deviceId'] = id;
       item.classList.toggle('multi-option', resols.length > 1);
       item.querySelector('.description>span').textContent =
           optTextTempl(prefResol, resols);
@@ -435,7 +435,7 @@ export class ResolutionSettings extends BaseSettings {
     const prevFocus = /** @type {?HTMLElement} */ (
         this.resMenu_.querySelector('.menu-item.external-camera:focus'));
     /** @type {?string} */
-    const prevFId = prevFocus && prevFocus.dataset.deviceId;
+    const prevFId = prevFocus && prevFocus.dataset['deviceId'];
     const /** number */ focusIdx =
         this.externalSettings_.findIndex(({deviceId}) => deviceId === prevFId);
     const fTitle = /** @type {?HTMLElement} */ (this.resMenu_.querySelector(
@@ -445,7 +445,7 @@ export class ResolutionSettings extends BaseSettings {
 
     dom.getAllFrom(this.resMenu_, '.menu-item.external-camera', HTMLElement)
         .forEach(
-            (element) => element.dataset.deviceId !== focusedId &&
+            (element) => element.dataset['deviceId'] !== focusedId &&
                 element.parentNode.removeChild(element));
 
     this.externalSettings_.forEach((config, index) => {
@@ -486,7 +486,7 @@ export class ResolutionSettings extends BaseSettings {
         photoItem = /** @type {!HTMLElement}*/ (fTitle.nextElementSibling);
         videoItem = /** @type {!HTMLElement}*/ (photoItem.nextElementSibling);
       }
-      titleItem.dataset.deviceId = deviceId;
+      titleItem.dataset['deviceId'] = deviceId;
       prepItem(photoItem, deviceId, config.photo, this.photoOptTextTempl_);
       prepItem(videoItem, deviceId, config.video, this.videoOptTextTempl_);
     });
@@ -629,9 +629,9 @@ export class ResolutionSettings extends BaseSettings {
           document.importNode(this.resItemTempl_.content, true));
       const input = dom.getFrom(item, 'input', HTMLInputElement);
       item.querySelector('span').textContent = optTextTempl(r, resolutions);
-      input.name = menu.dataset.name;
-      input.dataset.width = r.width;
-      input.dataset.height = r.height;
+      input.name = menu.dataset['name'];
+      input.dataset['width'] = r.width.toString();
+      input.dataset['height'] = r.height.toString();
       if (r.equals(selectedR)) {
         captionText.textContent = optTextTempl(r, resolutions);
         input.checked = true;