CCA: Disable modes selector when taking photos or not streaming

Currently we only have visual effect on mode buttons when the buttons
shouldn't be clickable. This CL also disables the buttons.

Bug: b:242474054
Test: tast run dut camera.CCAUI*. Click mode button immediately after clicking shutter or mode button.
Change-Id: I0df534c7afe6c1cdb9625e70032c1fd5677b488b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4015665
Reviewed-by: Pi-Hsun Shih <pihsun@chromium.org>
Commit-Queue: Chu-Hsuan Yang <chuhsuan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1069042}

ash/webui/camera_app_ui/resources/css/main.css

@@ -264,8 +264,6 @@ body.doc-mode-reviewing #mode-selector {
   white-space: nowrap;
 }
 
-body:not(.streaming) #modes-group,
-body.taking #modes-group,
 body.taking:not(.video) #shutters-group,
 body.snapshotting #video-snapshot {
   opacity: 0.38;
@@ -311,6 +309,10 @@ body:is(.taking.video, .should-handle-intent-result) #modes-group {
   transform: none;
 }
 
+#modes-group .mode-item:has(input:disabled) {
+  opacity: 0.38;
+}
+
 div.mode-item>input {
   border-radius: 16px/50%;
 }

ash/webui/camera_app_ui/resources/js/views/camera.ts

@@ -251,9 +251,21 @@ export class Camera extends View implements CameraViewUI {
       },
     });
 
+    const checkModesGroupDisabled = () => {
+      const disabled =
+          !state.get(state.State.STREAMING) || state.get(state.State.TAKING);
+      const modes =
+          dom.getAllFrom(this.modesGroup, '.mode-item>input', HTMLInputElement);
+      for (const mode of modes) {
+        mode.disabled = disabled;
+      }
+    };
+    state.addObserver(state.State.STREAMING, checkModesGroupDisabled);
+    state.addObserver(state.State.TAKING, checkModesGroupDisabled);
+
     for (const el of dom.getAll('.mode-item>input', HTMLInputElement)) {
       el.addEventListener('click', (event) => {
-        if (!this.cameraReady) {
+        if (!this.cameraReady.isSignaled()) {
           event.preventDefault();
         }
       });