CCA: Add snackbar for copied link

Bug: b/172879638
Test: Manually in expert mode

Change-Id: I4507280850563ffdb684e3c41ad51bfd579c95ba
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2583587
Commit-Queue: Shik Chen <shik@chromium.org>
Reviewed-by: Wei Lee <wtlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835624}

chromeos/components/camera_app_ui/resources.h

@@ -59,6 +59,7 @@ const struct {
     {"expert_save_metadata", IDS_EXPERT_SAVE_METADATA},
     {"expert_print_performance_logs", IDS_EXPERT_PRINT_PERFORMANCE_LOGS},
     {"expert_scan_barcode", IDS_EXPERT_SCAN_BARCODE},
+    {"snackbar_link_copied", IDS_SNACKBAR_LINK_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/BUILD.gn

@@ -87,6 +87,7 @@ copy("chrome_camera_app_js") {
     "js/metrics.js",
     "js/nav.js",
     "js/perf.js",
+    "js/snackbar.js",
     "js/sound.js",
     "js/state.js",
     "js/test_bridge.js",

chromeos/components/camera_app_ui/resources/camera_app_resources.grd

@@ -70,6 +70,7 @@
       <structure name="IDR_CAMERA_RESULT_SAVER_JS" file="js/models/result_saver.js" type="chrome_html" />
       <structure name="IDR_CAMERA_REVIEW_RESULT_JS" file="js/views/camera/review_result.js" type="chrome_html" />
       <structure name="IDR_CAMERA_SETTINGS_JS" file="js/views/settings.js" type="chrome_html" />
+      <structure name="IDR_CAMERA_SNACKBAR_JS" file="js/snackbar.js" type="chrome_html" />
       <structure name="IDR_CAMERA_SOUND_JS" file="js/sound.js" type="chrome_html" />
       <structure name="IDR_CAMERA_STATE_JS" file="js/state.js" type="chrome_html" />
       <structure name="IDR_CAMERA_TEST_BRIDGE_JS" file="js/test_bridge.js" type="chrome_html" />

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

@@ -1578,3 +1578,47 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
   width: var(--chip-height);
   z-index: 50;
 }
+
+/* TODO(b/172879638): Tune the position and layout after we finalized the
+ * responsive window design. */
+.snackbar {
+  align-items: center;
+  background: rgb(32, 33, 36);
+  border-radius: 4px;
+  bottom: 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;
+  color: rgb(232, 234, 237);
+  display: flex;
+  font-family: Roboto;
+  font-size: 13px;
+  height: 48px;
+  left: 4px;
+  opacity: 0;
+  padding: 14px 16px;
+  position: absolute;
+  visibility: hidden;
+  width: 256px;
+}
+
+.snackbar.animate {
+  animation: 3s show-snackbar linear;
+  visibility: visible;
+}
+
+@keyframes show-snackbar {
+  0% {
+    opacity: 0;
+  }
+  /* 100ms fade-in */
+  3.33% {
+    opacity: 1;
+  }
+  97.33% {
+    opacity: 1;
+  }
+  /* 80ms fade-out */
+  100% {
+    opacity: 0;
+  }
+}

chromeos/components/camera_app_ui/resources/js/BUILD.gn

@@ -93,6 +93,7 @@ js_library("compile_resources") {
     "mojo/image_capture.js",
     "nav.js",
     "perf.js",
+    "snackbar.js",
     "sound.js",
     "state.js",
     "test_bridge.js",

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as dom from './dom.js';
+import * as snackbar from './snackbar.js';
 import * as toast from './toast.js';
 import * as util from './util.js';
 
@@ -43,8 +44,7 @@ function showUrl(url) {
       dom.getFrom(container, '.barcode-copy-button', HTMLButtonElement);
   copyButton.onclick = async () => {
     await navigator.clipboard.writeText(url);
-    // TODO(b/172879638): Show "Link copied" in a snackbar.
-    toast.showDebugMessage('Link copied');
+    snackbar.show('snackbar_link_copied');
   };
 
   // TODO(b/172879638): Handle a11y.

chromeos/components/camera_app_ui/resources/js/snackbar.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {browserProxy} from './browser_proxy/browser_proxy.js';
+import * as dom from './dom.js';
+import * as util from './util.js';
+
+/**
+ * Shows a snackbar message.
+ * @param {string} label The label of the message to show.
+ * @param {...string} substitutions The substitutions for the label.
+ */
+export function show(label, ...substitutions) {
+  const message = browserProxy.getI18nMessage(label, ...substitutions);
+  const el = dom.get('.snackbar', HTMLElement);
+  el.textContent = message;
+  util.animateOnce(el);
+  // TODO(b/172879638): Handle a11y.
+}

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

@@ -339,6 +339,9 @@
       <message desc="Label for expert mode option: scan barcode." name="IDS_EXPERT_SCAN_BARCODE">
         Scan barcode
       </message>
+      <message desc="Label for snackbar message when a link is copied" name="IDS_SNACKBAR_LINK_COPIED">
+        Link 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_LINK_COPIED.png.sha1

+e755f4517dd4f8592fc8a0cc5b571cb1c754eff4
\ No newline at end of file

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

@@ -408,6 +408,7 @@
         <button class="barcode-copy-button" tabindex="0"></button>
       </div>
     </div>
+    <div class="snackbar"></div>
     <div id="tooltip" aria-hidden="true"></div>
     <audio id="sound-tick-final" src="/sounds/tick_final.ogg"
       data-timeout="1000">