CCA: Add barcode scan box overlay on preview

Bug: b/172879638
Test: Manually
Change-Id: I157453bc4d743f43a26531f60dbe53952ff4d827
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2596896
Commit-Queue: Shik Chen <shik@chromium.org>
Reviewed-by: Inker Kuo <inker@chromium.org>
Auto-Submit: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837986}

chromeos/components/camera_app_ui/resources/camera_app_resources.grd

@@ -163,6 +163,7 @@
       <include name="IDR_CAMERA_BARCODE_CHEVRON_DOWN_SVG" file="images/barcode_chevron_down.svg" type="BINDATA" />
       <include name="IDR_CAMERA_BARCODE_CHEVRON_UP_SVG" file="images/barcode_chevron_up.svg" type="BINDATA" />
       <include name="IDR_CAMERA_BARCODE_COPY_SVG" file="images/barcode_copy.svg" type="BINDATA" />
+      <include name="IDR_CAMERA_BARCODE_SCAN_BOX_BORDER_MASK_SVG" file="images/barcode_scan_box_border_mask.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" />

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

@@ -1508,6 +1508,52 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
   visibility: visible;
 }
 
+/* The container of scan box for layout and positioning. */
+.barcode-scan-box {
+  --border-distance: 8px;
+  --border-width: 4px;
+  --inner-border-radius: 16px;
+  /* Use padding-top instead of height to make a responsive square, since the
+   * percentage in padding-top is relative to the width of the containing
+   * block. */
+  padding-top: calc(100% / 3);
+  visibility: hidden;
+  width: calc(100% / 3);
+  z-index: 30;
+}
+
+body.photo.scan-barcode .barcode-scan-box {
+  visibility: visible;
+}
+
+/* The inner scan box with a translucent overlay. */
+.barcode-scan-box::before {
+  --offset: calc(var(--border-width) + var(--border-distance));
+  border-radius: var(--inner-border-radius);
+  bottom: var(--offset);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
+  content: '';
+  left: var(--offset);
+  position: absolute;
+  right: var(--offset);
+  top: var(--offset);
+  z-index: -1;  /* This need to be lower than the corner borders */
+}
+
+/* The corner borders of the scan box. */
+.barcode-scan-box::after {
+  -webkit-mask: url(/images/barcode_scan_box_border_mask.svg);
+  border: var(--border-width) solid white;
+  border-radius: calc(var(--inner-border-radius) + var(--border-distance));
+  box-sizing: border-box;
+  content: '';
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
 /* TODO(b/172879638): Tune the position and layout after we finalized the
  * responsive window design. */
 .barcode-chip-container {
@@ -1651,6 +1697,7 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
   position: absolute;
   visibility: hidden;
   width: 256px;
+  z-index: 50;
 }
 
 .snackbar.animate {

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

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect x="0" y="0" width="25" height="25" fill="#000000"/>
+  <rect x="75" y="0" width="25" height="25" fill="#000000"/>
+  <rect x="0" y="75" width="25" height="25" fill="#000000"/>
+  <rect x="75" y="75" width="25" height="25" fill="#000000"/>
+</svg>

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

@@ -6,6 +6,7 @@ in_app_assets = [
   "barcode_chevron_down.svg",
   "barcode_chevron_up.svg",
   "barcode_copy.svg",
+  "barcode_scan_box_border_mask.svg",
   "barcode_toggle_off.svg",
   "barcode_toggle_on.svg",
   "barcode_url.svg",

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

@@ -75,6 +75,7 @@
                     data="/images/camera_focus_aim.svg"
                     tabindex="-1" hidden></object>
           </div>
+          <div class="barcode-scan-box centered-overlay"></div>
           <div class="snackbar"></div>
           <div id="camera-mode" class="centered-overlay"></div>
         </div>