[CCA] Fix switch resolution race.

The switch resolution race is caused by logic of enabling switching
options right after STREAMING ready and before camera configuration
finishing. This CL fix the race by introducing new CAMERA_CONFIGURING
state will be flagged during the camera stream reconfiguration process.

Bug: b/147567355
Test: Manually test clicking on the resolution options when it's
clickable and won't jump back to previous option after clicked.

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

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

@@ -13,6 +13,7 @@ import {ViewName} from './views/view.js';
  * @enum {string}
  */
 export const State = {
+  CAMERA_CONFIGURING: 'camera-configuring',
   CAMERA_SWITCHING: 'camera-switching',
   EXPERT: 'expert',
   FPS_30: '_30fps',

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

@@ -351,6 +351,7 @@ export class Camera extends View {
         return false;
       }
     }
+    state.set(state.State.CAMERA_CONFIGURING, true);
     this.configuring_ = (async () => {
       try {
         if (state.get(state.State.TAKING)) {
@@ -467,6 +468,7 @@ export class Camera extends View {
         throw new CameraSuspendedError();
       });
       this.configuring_ = null;
+      state.set(state.State.CAMERA_CONFIGURING, false);
 
       return true;
     } catch (error) {

chrome/browser/resources/chromeos/camera/src/js/views/settings.js

@@ -335,6 +335,16 @@ export class ResolutionSettings extends BaseSettings {
         this.updateSelectedPhotoResolution_.bind(this));
     this.videoPreferrer_.setPreferredResolutionChangeListener(
         this.updateSelectedVideoResolution_.bind(this));
+
+    // Flips 'disabled' of resolution options.
+    [state.State.CAMERA_CONFIGURING, state.State.TAKING].forEach((s) => {
+      state.addObserver(s, () => {
+        document.querySelectorAll('.resolution-option>input').forEach((e) => {
+          e.disabled = state.get(state.State.CAMERA_CONFIGURING) ||
+              state.get(state.State.TAKING);
+        });
+      });
+    });
   }
 
   /**
@@ -639,12 +649,8 @@ export class ResolutionSettings extends BaseSettings {
         captionText.textContent = optTextTempl(r, resolutions);
         inputElement.checked = true;
       }
-      inputElement.addEventListener('click', (event) => {
-        if (!state.get(state.State.STREAMING) ||
-            state.get(state.State.TAKING)) {
-          event.preventDefault();
-        }
-      });
+      inputElement.disabled = state.get(state.State.CAMERA_CONFIGURING) ||
+          state.get(state.State.TAKING);
       inputElement.addEventListener('change', (event) => {
         if (inputElement.checked) {
           captionText.textContent = optTextTempl(r, resolutions);

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

@@ -376,7 +376,7 @@
       data-timeout="200">
     <audio id="sound-rec-end" src="../sounds/record_end.ogg" data-timeout="450">
     <template id="resolution-item-template">
-      <label class="menu-item circle">
+      <label class="menu-item circle resolution-option">
         <input class="icon" type="radio" tabindex="0">
         <span></span>
       </label>