CCA: Clear barcode toggle state when switching to non-photo mode

The barcode toggle is a one-time toggle and should not be preserved
after switching modes.

This CL would also fixs the mode icon over scan box issue.

Bug: b/172879638
Test: Manually enable barcode toggle, switch to video mode and switch
back to photo mode.

Change-Id: Iaf3bc5341fb641ba5f1308d3883b661140d853e3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2602960
Commit-Queue: Shik Chen <shik@chromium.org>
Reviewed-by: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#839448}

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

@@ -10,7 +10,7 @@ import {DeviceInfoUpdater} from '../../device/device_info_updater.js';
 import * as dom from '../../dom.js';
 import * as nav from '../../nav.js';
 import * as state from '../../state.js';
-import {Facing, PerfEvent, ViewName} from '../../type.js';
+import {Facing, Mode, PerfEvent, ViewName} from '../../type.js';
 import * as util from '../../util.js';
 
 /**
@@ -105,6 +105,13 @@ export class Options {
     this.toggleMirror_.addEventListener('click', () => this.saveMirroring_());
     this.toggleBarcode_.addEventListener('click', () => this.updateBarcode_());
 
+    state.addObserver(Mode.PHOTO, (inPhotoMode) => {
+      if (!inPhotoMode) {
+        this.toggleBarcode_.checked = false;
+        this.updateBarcode_();
+      }
+    });
+
     util.bindElementAriaLabelWithState({
       element: dom.get('#toggle-timer', Element),
       state: state.State.TIMER_3SEC,