CCA: Show text chip from detected barcode

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

chromeos/components/camera_app_ui/resources.h

@@ -61,6 +61,7 @@ const struct {
     {"expert_print_performance_logs", IDS_EXPERT_PRINT_PERFORMANCE_LOGS},
     {"expert_scan_barcode", IDS_EXPERT_SCAN_BARCODE},
     {"snackbar_link_copied", IDS_SNACKBAR_LINK_COPIED},
+    {"snackbar_text_copied", IDS_SNACKBAR_TEXT_COPIED},
     {"error_msg_expert_mode_not_supported",
      IDS_ERROR_MSG_EXPERT_MODE_NOT_SUPPORTED},
     {"feedback_button", IDS_FEEDBACK_BUTTON},

chromeos/components/camera_app_ui/resources/camera_app_resources.grd

@@ -160,6 +160,8 @@
       <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_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_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" />

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

@@ -1515,14 +1515,15 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
   left: 50%;
   opacity: 0;
   position: absolute;
-  top: 15%;
-  transform: translate(-50%, -50%);
+  top: 10%;
+  transform: translateX(-50%);
   visibility: hidden;
   z-index: 50;
 }
 
 /* TODO(b/172879638): Tune the animation according to the final motion spec. */
 .barcode-chip-container.animate {
+  /* TODO(b/172879638): This might be too short for long text. */
   animation: 8s show-barcode-chip ease-out;
   visibility: visible;
 }
@@ -1588,6 +1589,50 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
   z-index: 50;
 }
 
+.barcode-chip-text {
+  align-items: center;
+  background: var(--grey-900);
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font: 400 15px Roboto;
+}
+
+#barcode-chip-text-content {
+  --line-height: 24px;
+  color: var(--grey-200);
+  line-height: var(--line-height);
+  margin: 8px 20px;
+  max-width: 416px;
+  overflow: hidden;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expanded #barcode-chip-text-content {
+  /* TODO(b/172879638): Make this responsive */
+  max-height: calc(var(--line-height) * 10);
+  white-space: normal;
+  width: 416px;
+}
+
+#barcode-chip-text-expand.hide {
+  display: none;
+}
+
+#barcode-chip-text-expand {
+  background: url(/images/barcode_chevron_down.svg) center no-repeat;
+  height: 40px;
+  width: 100%;
+}
+
+.expanded #barcode-chip-text-expand {
+  background: url(/images/barcode_chevron_up.svg) center no-repeat;
+}
+
 .snackbar {
   align-items: center;
   background: var(--grey-900);

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

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.41 6L10 10.9447L14.59 6L16 7.52227L10 14L4 7.52227L5.41 6Z" fill="#E8EAED"/>
+</svg>

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

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.59 14L10 9.05533L5.41 14L4 12.4777L10 6L16 12.4777L14.59 14Z" fill="#E8EAED"/>
+</svg>

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

@@ -3,6 +3,8 @@
 # found in the LICENSE file.
 
 in_app_assets = [
+  "barcode_chevron_down.svg",
+  "barcode_chevron_up.svg",
   "barcode_copy.svg",
   "barcode_toggle_off.svg",
   "barcode_toggle_on.svg",

chromeos/components/camera_app_ui/resources/js/barcode_chip.js

@@ -4,7 +4,6 @@
 
 import * as dom from './dom.js';
 import * as snackbar from './snackbar.js';
-import * as toast from './toast.js';
 import * as util from './util.js';
 
 /**
@@ -25,12 +24,28 @@ function isSafeUrl(s) {
   }
 }
 
+/**
+ * Setups the copy button.
+ * @param {!HTMLElement} container The container for the button.
+ * @param {string} content The content to be copied.
+ * @param {string} snackbarLabel The label to be displayed on snackbar when the
+ *     content is copied.
+ */
+function setupCopyButton(container, content, snackbarLabel) {
+  const copyButton =
+      dom.getFrom(container, '.barcode-copy-button', HTMLButtonElement);
+  copyButton.onclick = async () => {
+    await navigator.clipboard.writeText(content);
+    snackbar.show(snackbarLabel);
+  };
+}
+
 /**
  * Shows an actionable url chip.
  * @param {string} url
  */
 function showUrl(url) {
-  const container = dom.get('.barcode-chip-container', HTMLDivElement);
+  const container = dom.get('#barcode-chip-url-container', HTMLDivElement);
 
   const anchor = dom.getFrom(container, 'a', HTMLAnchorElement);
   Object.assign(anchor, {
@@ -38,14 +53,7 @@ function showUrl(url) {
     textContent: url,
   });
 
-  // TODO(b/172879638): Extract a common implementation for both URL and Text
-  // barcodes.
-  const copyButton =
-      dom.getFrom(container, '.barcode-copy-button', HTMLButtonElement);
-  copyButton.onclick = async () => {
-    await navigator.clipboard.writeText(url);
-    snackbar.show('snackbar_link_copied');
-  };
+  setupCopyButton(container, url, 'snackbar_link_copied');
 
   // TODO(b/172879638): Handle a11y.
   util.animateOnce(container);
@@ -56,8 +64,23 @@ function showUrl(url) {
  * @param {string} text
  */
 function showText(text) {
-  // TODO(b/172879638): Show text properly.
-  toast.showDebugMessage(text);
+  const container = dom.get('#barcode-chip-text-container', HTMLDivElement);
+  container.classList.remove('expanded');
+
+  const textEl = dom.get('#barcode-chip-text-content', HTMLDivElement);
+  textEl.textContent = text;
+  const expandable = textEl.scrollWidth > textEl.clientWidth;
+
+  const expandEl = dom.get('#barcode-chip-text-expand', HTMLButtonElement);
+  expandEl.classList.toggle('hide', !expandable);
+  expandEl.onclick = () => {
+    container.classList.toggle('expanded');
+  };
+
+  setupCopyButton(container, text, 'snackbar_text_copied');
+
+  // TODO(b/172879638): Handle a11y.
+  util.animateOnce(container);
 }
 
 /**

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

@@ -345,6 +345,9 @@
       <message desc="Label for snackbar message when a link is copied" name="IDS_SNACKBAR_LINK_COPIED">
         Link copied
       </message>
+      <message desc="Label for snackbar message when a link is copied" name="IDS_SNACKBAR_TEXT_COPIED">
+        Text copied
+      </message>
       <message desc="Error message when the device does not support expert mode but tries to enable it." name="IDS_ERROR_MSG_EXPERT_MODE_NOT_SUPPORTED">
         Expert mode is not supported on this device
       </message>

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

+5450e27836ede51beeda1b84c1b1d26a49c545f6
\ No newline at end of file

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

@@ -403,7 +403,7 @@
       </div>
     </div>
     <div id="toast" class="centered-overlay" aria-live="polite"></div>
-    <div class="barcode-chip-container">
+    <div id="barcode-chip-url-container" class="barcode-chip-container">
       <div class="barcode-chip-url">
         <a target="_blank"></a>
       </div>
@@ -411,6 +411,15 @@
         <button class="barcode-copy-button" tabindex="0"></button>
       </div>
     </div>
+    <div id="barcode-chip-text-container" class="barcode-chip-container">
+      <div class="barcode-chip-text">
+        <div id="barcode-chip-text-content"></div>
+        <button id="barcode-chip-text-expand"></button>
+      </div>
+      <div class="circle">
+        <button class="barcode-copy-button" tabindex="0"></button>
+      </div>
+    </div>
     <div id="tooltip" aria-hidden="true"></div>
     <audio id="sound-tick-final" src="/sounds/tick_final.ogg"
       data-timeout="1000">