CCA: Add barcode detection toggle button

This CL adds a new barcode detection toggle button and removes the old
item in expert mode menu.

Bug: b/172879638
Test: Manually
Change-Id: Ia89657f5d3d2900b53721f650058240e472b254b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2594827Reviewed-by: Wei Lee <wtlee@chromium.org>
Commit-Queue: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837518}

chromeos/components/camera_app_ui/resources.h

@@ -54,6 +54,7 @@ const struct {
     {"error_msg_no_camera", IDS_ERROR_MSG_NO_CAMERA},
     {"error_msg_record_start_failed", IDS_ERROR_MSG_RECORD_START_FAILED},
     {"toggle_mic_button", IDS_TOGGLE_MIC_BUTTON},
+    {"toggle_barcode_button", IDS_TOGGLE_BARCODE_BUTTON},
     {"expert_mode_button", IDS_EXPERT_MODE_BUTTON},
     {"expert_preview_metadata", IDS_EXPERT_PREVIEW_METADATA},
     {"expert_save_metadata", IDS_EXPERT_SAVE_METADATA},

chromeos/components/camera_app_ui/resources/camera_app_resources.grd

@@ -160,8 +160,10 @@
       <include name="IDR_CAMERA_CAMERA_APP_ICONS_128_PNG" file="images/camera_app_icons_128.png" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_APP_ICONS_192_PNG" file="images/camera_app_icons_192.png" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_APP_ICONS_48_PNG" file="images/camera_app_icons_48.png" type="BINDATA" />
-      <include name="IDR_CAMERA_BARCODE_URL_SVG" file="images/barcode_url.svg" type="BINDATA" />
       <include name="IDR_CAMERA_BARCODE_COPY_SVG" file="images/barcode_copy.svg" type="BINDATA" />
+      <include name="IDR_CAMERA_BARCODE_TOGGLE_OFF_SVG" file="images/barcode_toggle_off.svg" type="BINDATA" />
+      <include name="IDR_CAMERA_BARCODE_TOGGLE_ON_SVG" file="images/barcode_toggle_on.svg" type="BINDATA" />
+      <include name="IDR_CAMERA_BARCODE_URL_SVG" file="images/barcode_url.svg" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_BUTTON_FPS_30_SVG" file="images/camera_button_fps_30.svg" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_BUTTON_FPS_60_SVG" file="images/camera_button_fps_60.svg" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_BUTTON_GRID_OFF_SVG" file="images/camera_button_grid_off.svg" type="BINDATA" />

chromeos/components/camera_app_ui/resources/css/main.css

@@ -3,6 +3,8 @@
  * found in the LICENSE file. */
 
 :root {
+  --blue-300-rgb: 138, 180, 248;
+  --blue-300: rgb(var(--blue-300-rgb));
   --grey-100: rgb(241, 243, 244);
   --grey-200: rgb(232, 234, 237);
   --grey-900: rgb(32, 33, 36);
@@ -509,6 +511,7 @@ body.video.taking #recordvideo {
 }
 
 body:not(.video) #toggle-mic,
+body:not(.photo) #toggle-barcode,
 body:not(.multi-camera) #switch-device {
   visibility: hidden;
 }
@@ -646,6 +649,16 @@ body._10sec #toggle-timer:checked {
   background-image: url(/images/camera_button_mic_off.svg);
 }
 
+#toggle-barcode:checked {
+  background: url(/images/barcode_toggle_on.svg) center no-repeat,
+              rgba(var(--blue-300-rgb), 0.3);
+}
+
+#toggle-barcode {
+  background-image: url(/images/barcode_toggle_off.svg);
+  border-radius: 50%;
+}
+
 body:not(.multi-fps) #toggle-fps,
 body:not(.video) #toggle-fps {
   display: none;
@@ -1550,7 +1563,7 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
 }
 
 .barcode-chip-url > a {
-  color: rgb(138, 180, 248);
+  color: var(--blue-300);
   max-width: 416px;
   overflow: hidden;
   text-decoration: none;

chromeos/components/camera_app_ui/resources/images/barcode_toggle_off.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
+    <title>ic_QR code</title>
+    <g jetway-hook-id="08335F75-6103-408B-A1E8-5C734C95C86B" id="ic_QR-code" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g jetway-hook-id="0922F802-CA75-47A8-91C7-3DDA7435639F" id="Scanner" transform="translate(2.000000, 2.000000)" fill="#E8EAED">
+            <path d="M0,11 L2,11 L2,14 L5,14 L5,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,11 Z M16,11 L16,14 C16,15.1045695 15.1045695,16 14,16 L11,16 L11,14 L14,14 L14,11 L16,11 Z M14,0 C15.1045695,0 16,0.8954305 16,2 L16,5 L14,4.999 L14,2 L11,2 L11,0 L14,0 Z M5,2 L2,2 L2,5 L0,5 L0,2 C0,0.8954305 0.8954305,0 2,0 L5,0 L5,2 Z" jetway-hook-id="65066AE9-BA95-4BD2-830F-702A2BAF2373" id="Combined-Shape" fill-rule="nonzero"></path>
+            <path d="M7,3 L7,7 L3,7 L3,3 L7,3 Z M5.5,4.5 L4.5,4.5 L4.5,5.5 L5.5,5.5 L5.5,4.5 Z" jetway-hook-id="7AFE2645-6416-4C0A-86F8-9937AF5F8D2D" id="Rectangle" fill-rule="nonzero"></path>
+            <path d="M7,9 L7,13 L3,13 L3,9 L7,9 Z M5.5,10.5 L4.5,10.5 L4.5,11.5 L5.5,11.5 L5.5,10.5 Z" jetway-hook-id="60AB4502-99DF-497C-B25D-E1FEF2949C77" id="Rectangle-Copy-2" fill-rule="nonzero"></path>
+            <path d="M13,3 L13,7 L9,7 L9,3 L13,3 Z M11.5,4.5 L10.5,4.5 L10.5,5.5 L11.5,5.5 L11.5,4.5 Z" jetway-hook-id="489581C8-570A-4400-9696-1F0B5E704108" id="Rectangle-Copy" fill-rule="nonzero"></path>
+            <path d="M10.5,8.5 L10.5,10 L9.5,10 L9.5,11.5 L10.5,11.5 L10.5,13 L9,13 L9,11.5 L8,11.5 L8,10 L9,10 L9,8.5 L10.5,8.5 Z M10.5,11.5 L10.5,10 L11.5,10 L11.5,8.5 L13,8.5 L13,10 L12,10 L12,11.5 L13,11.5 L13,13 L11.5,13 L11.5,11.5 L10.5,11.5 Z" jetway-hook-id="A007E647-A565-4BF9-A946-07BABE8CA005" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>

chromeos/components/camera_app_ui/resources/images/barcode_toggle_on.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
+    <title>ic_QR code</title>
+    <g jetway-hook-id="08335F75-6103-408B-A1E8-5C734C95C86B" id="ic_QR-code" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g jetway-hook-id="0922F802-CA75-47A8-91C7-3DDA7435639F" id="Scanner" transform="translate(2.000000, 2.000000)" fill="#8AB4F8">
+            <path d="M0,11 L2,11 L2,14 L5,14 L5,16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,11 Z M16,11 L16,14 C16,15.1045695 15.1045695,16 14,16 L11,16 L11,14 L14,14 L14,11 L16,11 Z M14,0 C15.1045695,0 16,0.8954305 16,2 L16,5 L14,4.999 L14,2 L11,2 L11,0 L14,0 Z M5,2 L2,2 L2,5 L0,5 L0,2 C0,0.8954305 0.8954305,0 2,0 L5,0 L5,2 Z" jetway-hook-id="65066AE9-BA95-4BD2-830F-702A2BAF2373" id="Combined-Shape" fill-rule="nonzero"></path>
+            <path d="M7,3 L7,7 L3,7 L3,3 L7,3 Z M5.5,4.5 L4.5,4.5 L4.5,5.5 L5.5,5.5 L5.5,4.5 Z" jetway-hook-id="7AFE2645-6416-4C0A-86F8-9937AF5F8D2D" id="Rectangle" fill-rule="nonzero"></path>
+            <path d="M7,9 L7,13 L3,13 L3,9 L7,9 Z M5.5,10.5 L4.5,10.5 L4.5,11.5 L5.5,11.5 L5.5,10.5 Z" jetway-hook-id="60AB4502-99DF-497C-B25D-E1FEF2949C77" id="Rectangle-Copy-2" fill-rule="nonzero"></path>
+            <path d="M13,3 L13,7 L9,7 L9,3 L13,3 Z M11.5,4.5 L10.5,4.5 L10.5,5.5 L11.5,5.5 L11.5,4.5 Z" jetway-hook-id="489581C8-570A-4400-9696-1F0B5E704108" id="Rectangle-Copy" fill-rule="nonzero"></path>
+            <path d="M10.5,8.5 L10.5,10 L9.5,10 L9.5,11.5 L10.5,11.5 L10.5,13 L9,13 L9,11.5 L8,11.5 L8,10 L9,10 L9,8.5 L10.5,8.5 Z M10.5,11.5 L10.5,10 L11.5,10 L11.5,8.5 L13,8.5 L13,10 L12,10 L12,11.5 L13,11.5 L13,13 L11.5,13 L11.5,11.5 L10.5,11.5 Z" jetway-hook-id="A007E647-A565-4BF9-A946-07BABE8CA005" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>

chromeos/components/camera_app_ui/resources/images/images.gni

@@ -3,8 +3,10 @@
 # found in the LICENSE file.
 
 in_app_assets = [
-  "barcode_url.svg",
   "barcode_copy.svg",
+  "barcode_toggle_off.svg",
+  "barcode_toggle_on.svg",
+  "barcode_url.svg",
   "camera_button_fps_30.svg",
   "camera_button_fps_60.svg",
   "camera_button_grid_off.svg",

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

@@ -50,6 +50,13 @@ export class Options {
      */
     this.toggleMirror_ = dom.get('#toggle-mirror', HTMLInputElement);
 
+    /**
+     * @type {!HTMLInputElement}
+     * @private
+     * @const
+     */
+    this.toggleBarcode_ = dom.get('#toggle-barcode', HTMLInputElement);
+
     /**
      * Device id of the camera device currently used or selected.
      * @type {?string}
@@ -96,6 +103,7 @@ export class Options {
 
     this.toggleMic_.addEventListener('click', () => this.updateAudioByMic_());
     this.toggleMirror_.addEventListener('click', () => this.saveMirroring_());
+    this.toggleBarcode_.addEventListener('click', () => this.updateBarcode_());
 
     util.bindElementAriaLabelWithState({
       element: dom.get('#toggle-timer', Element),
@@ -233,7 +241,8 @@ export class Options {
   }
 
   /**
-   * Enables/disables the current audio track by the microphone option.
+   * Enables/disables the current audio track according to the microphone
+   * option.
    * @private
    */
   updateAudioByMic_() {
@@ -242,6 +251,14 @@ export class Options {
     }
   }
 
+  /**
+   * Enables/disables barcode scanning according to the barcode option.
+   * @private
+   */
+  updateBarcode_() {
+    state.set(state.State.SCAN_BARCODE, this.toggleBarcode_.checked);
+  }
+
   /**
    * Gets the video device ids sorted by preference.
    * @return {!Promise<!Array<?string>>} May contain null for user facing camera

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

@@ -9,6 +9,7 @@ import {DeviceOperator, parseMetadata} from '../../mojo/device_operator.js';
 import * as nav from '../../nav.js';
 import * as state from '../../state.js';
 import * as util from '../../util.js';
+import {Mode} from '../../type.js';
 
 /**
  * Creates a controller for the video preview of Camera view.
@@ -203,8 +204,7 @@ export class Preview {
     if (this.scanner_ === null) {
       return;
     }
-    // TODO(b/172879638): Only enables barcode scanning in Photo mode.
-    if (state.get(state.State.EXPERT) && state.get(state.State.SCAN_BARCODE)) {
+    if (state.get(Mode.PHOTO) && state.get(state.State.SCAN_BARCODE)) {
       this.scanner_.start();
     } else {
       this.scanner_.stop();

chromeos/components/camera_app_ui/resources/strings/camera_strings.grd

@@ -324,6 +324,9 @@
       <message desc="Label for the checkbox to toggle the microphone for recording video." name="IDS_TOGGLE_MIC_BUTTON">
         Microphone
       </message>
+      <message desc="Label for the checkbox to toggle barcode (QR code) scanning in photo mode." name="IDS_TOGGLE_BARCODE_BUTTON">
+        QR code
+      </message>
       <message desc="Label for the button of expert mode options." name="IDS_EXPERT_MODE_BUTTON">
         Expert mode
       </message>

chromeos/components/camera_app_ui/resources/strings/camera_strings_grd/IDS_TOGGLE_BARCODE_BUTTON.png.sha1

+17f5c8289bd5155105f0539f2f930c441d542e48
\ No newline at end of file

chromeos/components/camera_app_ui/resources/views/main.html

@@ -182,6 +182,10 @@
                i18n-label="toggle_mic_button" data-state="mic"
                data-key="toggleMic" checked>
       </div>
+      <div class="top-stripe right-stripe circle buttons">
+        <input id="toggle-barcode" type="checkbox"
+               tabindex="0" i18n-label="toggle_barcode_button">
+      </div>
       <div class="centered-overlay">
         <div id="timer-tick-msg"></div>
       </div>
@@ -379,12 +383,6 @@
                  data-key="printPerformanceLogs">
           <span i18n-content="expert_print_performance_logs"></span>
         </label>
-        <label class="menu-item">
-          <input id="expert-scan-barcode" class="icon" type="checkbox"
-                 tabindex="0" data-state="scan-barcode"
-                 data-key="scanBarcode">
-          <span i18n-content="expert_scan_barcode"></span>
-        </label>
       </div>
     </div>
     <div id="spinner" class="centered-overlay"></div>