[CCA] Show message to user about camera folder change

We should show a message to users to let them know we have changed the
default camera folder from "MyFiles/Downloads" to "MyFiles/Camera".

Bug: 1127587
Test: Launch CCA and the dialog show up
Change-Id: I2dc78e839dfb4bc54a42da2627eb89d491689016
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2407734
Commit-Queue: Wei Lee <wtlee@chromium.org>
Reviewed-by: Inker Kuo <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809246}

chromeos/components/camera_app_ui/resources.h

@@ -100,6 +100,9 @@ const struct {
     {"record_video_pause_button", IDS_RECORD_VIDEO_PAUSE_BUTTON},
     {"record_video_resume_button", IDS_RECORD_VIDEO_RESUME_BUTTON},
     {"feedback_description_placeholder", IDS_FEEDBACK_DESCRIPTION_PLACEHOLDER},
+    {"banner_title", IDS_BANNER_TITLE},
+    {"banner_msg", IDS_BANNER_MSG},
+    {"banner_close_button", IDS_BANNER_CLOSE_BUTTON},
 };
 
 const struct {

chromeos/components/camera_app_ui/resources/BUILD.gn

@@ -68,6 +68,8 @@ copy("chrome_camera_app_images") {
     "src/images/camera_intent_play_video.svg",
     "src/images/camera_intent_result_cancel.svg",
     "src/images/camera_intent_result_confirm.svg",
+    "src/images/camera_intro_banner_close.svg",
+    "src/images/camera_intro_banner_icon.svg",
     "src/images/camera_mode_photo.svg",
     "src/images/camera_mode_portrait.svg",
     "src/images/camera_mode_square.svg",

chromeos/components/camera_app_ui/resources/camera_app_resources.grd

@@ -172,6 +172,8 @@
       <include name="IDR_CAMERA_CAMERA_BUTTON_FPS_60_SVG" file="src/images/camera_button_fps_60.svg" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_INTENT_RESULT_CANCEL_SVG" file="src/images/camera_intent_result_cancel.svg" type="BINDATA" />
       <include name="IDR_CAMERA_CAMERA_INTENT_RESULT_CONFIRM_SVG" file="src/images/camera_intent_result_confirm.svg" type="BINDATA" />
+      <include name="IDR_CAMERA_CAMERA_INTRO_BANNER_ICON_SVG" file="src/images/camera_intro_banner_icon.svg" type="BINDATA" />
+      <include name="IDR_CAMERA_CAMERA_INTRO_BANNER_CLOSE_SVG" file="src/images/camera_intro_banner_close.svg" type="BINDATA" />
     </includes>
   </release>
 </grit>

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

@@ -1118,6 +1118,65 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
   }
 }
 
+#banner {
+  background: white;
+  border-radius: 8px;
+  bottom: -130px;
+  display: none;
+  padding: 26px 29px;
+  width: 460px;
+}
+
+#banner.animate {
+  animation: emerge 12000ms ease-out;
+  display: block;
+}
+
+@keyframes emerge {
+  0%,
+  100% {
+    bottom: -130;
+  }
+  10%,
+  90% {
+    bottom: 31px;
+  }
+}
+
+#banner-title {
+  color: rgb(26, 115, 232);
+  margin-bottom: 10px;
+}
+
+#banner-title-icon {
+  background-image: url(../images/camera_intro_banner_icon.svg);
+  display: inline-block;
+  height: 20px;
+  margin-right: 10px;
+  vertical-align: middle;
+  width: 20px;
+}
+
+#banner-title-text {
+  font: 450 18px 'Google Sans', sans-serif;
+  vertical-align: middle;
+}
+
+#banner-msg {
+  color: rgb(95, 99, 104);
+  font: 375 15px/22px 'Roboto';
+}
+
+#banner-close {
+  background-image: url(../images/camera_intro_banner_close.svg);
+  display: block;
+  height: 20px;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  width: 20px;
+}
+
 .menu {
   background: rgba(0, 0, 0, 0.75);
   display: flex;

chromeos/components/camera_app_ui/resources/src/images/camera_intro_banner_close.svg

+<svg width="20" height="20" viewBox="10 10 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M16 5.41L14.59 4 10 8.59 5.41 4 4 5.41 8.59 10 4 14.59 5.41 16 10 11.41 14.59 16 16 14.59 11.41 10z"/></defs><g fill="none" fill-rule="evenodd"><path d="M0 0h40v40H0z"/><use fill="#5F6368" xlink:href="#a" transform="translate(10 10)"/></g></svg>
\ No newline at end of file

chromeos/components/camera_app_ui/resources/src/images/camera_intro_banner_icon.svg

+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 6l2-2h5l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3zM3 8v9h13V8H3zm14.373-5.373L16 2l1.373-.627L18 0l.627 1.373L20 2l-1.373.627L18 4l-.627-1.373zM9.5 15.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#1A73E8"/></svg>
\ No newline at end of file

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

@@ -179,6 +179,11 @@ export class Camera extends View {
      */
     this.take_ = null;
 
+    /**
+     * @type {!HTMLElement}
+     */
+    this.banner_ = dom.get('#banner', HTMLElement);
+
     /**
      * Gets type of ways to trigger shutter from click event.
      * @param {!MouseEvent} e
@@ -237,6 +242,11 @@ export class Camera extends View {
       offLabel: 'record_video_pause_button',
     });
 
+    dom.get('#banner-close', HTMLButtonElement)
+        .addEventListener('click', () => {
+          util.animateCancel(this.banner_);
+        });
+
     // Monitor the states to stop camera when locked/minimized.
     browserProxy.addOnLockListener((isLocked) => {
       this.locked_ = isLocked;
@@ -333,9 +343,22 @@ export class Camera extends View {
    * @override
    */
   focus() {
-    // Avoid focusing invisible shutters.
-    dom.getAll('button.shutter', HTMLButtonElement)
-        .forEach((btn) => btn.offsetParent && btn.focus());
+    const focusOnShutterButton = () => {
+      // Avoid focusing invisible shutters.
+      dom.getAll('button.shutter', HTMLButtonElement)
+          .forEach((btn) => btn.offsetParent && btn.focus());
+    };
+    (async () => {
+      const values =
+          await browserProxy.localStorageGet({isFolderChangeMsgShown: false});
+      await this.configuring_;
+      if (!values['isFolderChangeMsgShown']) {
+        browserProxy.localStorageSet({isFolderChangeMsgShown: true});
+        util.animateOnce(this.banner_, focusOnShutterButton);
+      } else {
+        focusOnShutterButton();
+      }
+    })();
   }
 
   /**

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

@@ -440,6 +440,15 @@
 
 If your feedback is about image or video quality, please attach a sample photo or video and describe what's wrong. (For example, photo is too dark or subject isn’t in focus.)
       </message>
+      <message desc="Title of banner shown for introducing new camera App UI." name="IDS_BANNER_TITLE">
+        Your photos and videos have a new home
+      </message>
+      <message desc="Message in the banner shown for introducing new camera App UI." name="IDS_BANNER_MSG">
+        Photos and videos will now be saved to a new folder in the Files app: My files > Camera. Previous photos and videos won't move to the new folder.
+      </message>
+      <message desc="Label for close introducing new camera App UI banner button." name="IDS_BANNER_CLOSE_BUTTON">
+        Close
+      </message>
     </messages>
   </release>
 </grit>

chromeos/components/camera_app_ui/resources/src/strings/camera_strings_grd/IDS_BANNER_CLOSE_BUTTON.png.sha1

+cf6c1136aee77066f2ffb5ac6e259ed482ace723
\ No newline at end of file

chromeos/components/camera_app_ui/resources/src/strings/camera_strings_grd/IDS_BANNER_MSG.png.sha1

+cf6c1136aee77066f2ffb5ac6e259ed482ace723
\ No newline at end of file

chromeos/components/camera_app_ui/resources/src/strings/camera_strings_grd/IDS_BANNER_TITLE.png.sha1

+cf6c1136aee77066f2ffb5ac6e259ed482ace723
\ No newline at end of file

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

@@ -131,6 +131,16 @@
         <button id="gallery-enter" tabindex="0"
                 i18n-label="gallery_button" hidden></button>
       </div>
+      <div id="banner" class="horizontal-center-stripe" aria-live="polite">
+        <div id="banner-title">
+          <div id="banner-title-icon"></div>
+          <span id="banner-title-text" i18n-content="banner_title"></span>
+        </div>
+        <div id="banner-msg">
+          <span i18n-content="banner_msg"></span>
+        </div>
+        <button id="banner-close" i18n-label="banner_close_button"></button>
+      </div>
       <div id="confirm-result-groups" class="buttons right-stripe circle">
         <button id="confirm-result" tabindex="0"
           i18n-label="confirm_review_button"></button>