[CCA] Show confirm to leave dialog when closing CCA while recording

We use 'beforeunload' event listener to show confirm to leave dialog.

Bug: 1140391
Test: Manually
Change-Id: Ied6c0542fce505d46c5bbcb809740effe278c5c7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2494407
Commit-Queue: Wei Lee <wtlee@chromium.org>
Reviewed-by: Inker Kuo <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822568}

chromeos/components/camera_app_ui/resources/js/browser_proxy/browser_proxy.js

@@ -235,6 +235,11 @@ class ChromeAppBrowserProxy {
   getUntrustedOrigin() {
     return UntrustedOrigin.CHROME_EXTENSION;
   }
+
+  /** @override */
+  setBeforeUnloadListenerEnabled(enabled) {
+    // Do nothing since beforeunload event is unavailable for platform apps.
+  }
 }
 
 export const browserProxy = new ChromeAppBrowserProxy();

chromeos/components/camera_app_ui/resources/js/browser_proxy/browser_proxy_interface.js

@@ -141,4 +141,10 @@ export class BrowserProxy {
    * @abstract
    */
   getUntrustedOrigin() {}
+
+  /**
+   * @param {boolean} enabled
+   * @abstract
+   */
+  setBeforeUnloadListenerEnabled(enabled) {}
 }

chromeos/components/camera_app_ui/resources/js/browser_proxy/webui_browser_proxy.js

@@ -20,6 +20,16 @@ import {UntrustedOrigin} from '../type.js';
 // eslint-disable-next-line no-unused-vars
 import {BrowserProxy} from './browser_proxy_interface.js';
 
+/**
+ * The 'beforeunload' listener which will show confirm dialog when trying to
+ * close window.
+ * @param {!Event} event The 'beforeunload' event.
+ */
+function beforeUnloadListener(event) {
+  event.preventDefault();
+  event.returnValue = '';
+}
+
 /**
  * The WebUI implementation of the CCA's interaction with the browser.
  * @implements {BrowserProxy}
@@ -173,6 +183,15 @@ class WebUIBrowserProxy {
   getUntrustedOrigin() {
     return UntrustedOrigin.CHROME_UNTRUSTED;
   }
+
+  /** @override */
+  setBeforeUnloadListenerEnabled(enabled) {
+    if (enabled) {
+      window.addEventListener('beforeunload', beforeUnloadListener);
+    } else {
+      window.removeEventListener('beforeunload', beforeUnloadListener);
+    }
+  }
 }
 
 export const browserProxy = new WebUIBrowserProxy();

chromeos/components/camera_app_ui/resources/js/views/camera/mode/video.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {AsyncJobQueue} from '../../../async_job_queue.js';
+import {browserProxy} from '../../../browser_proxy/browser_proxy.js';
 import {assert} from '../../../chrome_util.js';
 import {Filenamer} from '../../../models/file_namer.js';
 import {
@@ -306,6 +307,7 @@ export class Video extends ModeBase {
         (this.mediaRecorder_.state === 'recording' ||
          this.mediaRecorder_.state === 'paused')) {
       this.mediaRecorder_.stop();
+      browserProxy.setBeforeUnloadListenerEnabled(false);
     }
   }
 
@@ -350,6 +352,9 @@ export class Video extends ModeBase {
       this.mediaRecorder_.addEventListener('dataavailable', ondataavailable);
       this.mediaRecorder_.addEventListener('stop', onstop);
       this.mediaRecorder_.addEventListener('start', onstart);
+
+      browserProxy.setBeforeUnloadListenerEnabled(true);
+
       this.mediaRecorder_.start(100);
       state.set(state.State.RECORDING_PAUSED, false);
       state.set(state.State.RECORDING_UI_PAUSED, false);