CCA: Restrict the max width of barcode chips by preview box

The 420px on UI spec is too wide for the minimum window size in
responsive layout and the chip will overlap with other controls.

This CL moves the barcode chips into preview box and restrict the
max-width to 80% of the box.

Bug: b/172879638
Test: Manually resize the windows and scan barcodes.
Change-Id: I0cf483a7c728a98ddac7f91ffbd3f34b0daaf3fe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2596589
Commit-Queue: Shik Chen <shik@chromium.org>
Reviewed-by: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#839425}

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

@@ -1602,7 +1602,9 @@ body.photo.scan-barcode .barcode-scan-box {
  * responsive window design. */
 .barcode-chip-container {
   --chip-height: 32px;
+  --chip-max-width: 420px;
   left: 50%;
+  max-width: min(80%, var(--chip-max-width));
   opacity: 1;
   position: absolute;
   top: 10%;
@@ -1633,6 +1635,7 @@ body.photo.scan-barcode .barcode-scan-box {
   background: url(/images/barcode_url.svg) no-repeat;
   content: '';
   display: inline-block;
+  flex-shrink: 0;
   height: 20px;
   margin-inline-end: 6px;
   vertical-align: middle;
@@ -1641,7 +1644,6 @@ body.photo.scan-barcode .barcode-scan-box {
 
 .barcode-chip-url > a {
   color: var(--blue-300);
-  max-width: 416px;
   overflow: hidden;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -1678,14 +1680,14 @@ body.photo.scan-barcode .barcode-scan-box {
   display: flex;
   flex-direction: column;
   font: 400 15px Roboto;
+  padding: 8px 20px;
 }
 
 #barcode-chip-text-content {
   --line-height: 24px;
   color: var(--grey-200);
   line-height: var(--line-height);
-  margin: 8px 20px;
-  max-width: 416px;
+  max-width: 100%;
   overflow: hidden;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -1696,7 +1698,8 @@ body.photo.scan-barcode .barcode-scan-box {
   /* TODO(b/172879638): Make this responsive */
   max-height: calc(var(--line-height) * 10);
   white-space: normal;
-  width: 416px;
+  /* Keep the same width as before to avoid text jumping. */
+  width: var(--chip-max-width);
 }
 
 #barcode-chip-text-expand {

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

@@ -79,6 +79,30 @@
           <div class="snackbar" aria-live="polite"></div>
           <div id="camera-mode" class="centered-overlay"></div>
         </div>
+        <div id="barcode-chip-url-container"
+             class="invisible barcode-chip-container">
+          <div class="barcode-chip-url">
+            <a target="_blank"></a>
+          </div>
+          <div class="circle">
+            <button class="barcode-copy-button" tabindex="0"
+              i18n-label="barcode_copy_link_button"></button>
+          </div>
+        </div>
+        <div id="barcode-chip-text-container"
+             class="invisible barcode-chip-container"
+             role="dialog" i18n-label="barcode_text_detected"
+             aria-live="polite" aria-describedby="barcode-chip-text-content">
+          <div class="barcode-chip-text">
+            <div id="barcode-chip-text-content"></div>
+            <button id="barcode-chip-text-expand"
+                    aria-expanded="false"></button>
+          </div>
+          <div class="circle">
+            <button class="barcode-copy-button" tabindex="0"
+              i18n-label="barcode_copy_text_button"></button>
+          </div>
+        </div>
       </div>
       <div id="video-snapshot-holder" class="buttons right-stripe circle">
         <button id="video-snapshot" tabindex="0"
@@ -406,29 +430,6 @@
       </div>
     </div>
     <div id="toast" class="centered-overlay" aria-live="polite"></div>
-    <div id="barcode-chip-url-container"
-         class="invisible barcode-chip-container">
-      <div class="barcode-chip-url">
-        <a target="_blank"></a>
-      </div>
-      <div class="circle">
-        <button class="barcode-copy-button" tabindex="0"
-          i18n-label="barcode_copy_link_button"></button>
-      </div>
-    </div>
-    <div id="barcode-chip-text-container"
-         class="invisible barcode-chip-container"
-         role="dialog" i18n-label="barcode_text_detected"
-         aria-live="polite" aria-describedby="barcode-chip-text-content">
-      <div class="barcode-chip-text">
-        <div id="barcode-chip-text-content"></div>
-        <button id="barcode-chip-text-expand" aria-expanded="false"></button>
-      </div>
-      <div class="circle">
-        <button class="barcode-copy-button" tabindex="0"
-          i18n-label="barcode_copy_text_button"></button>
-      </div>
-    </div>
     <div id="tooltip" aria-hidden="true"></div>
     <audio id="sound-tick-final" src="/sounds/tick_final.ogg"
       data-timeout="1000">