Add modal for introducing CCA new UI changes.

Bug: 956858
Change-Id: Id0b36488deeede4b6114f1e2cbe3df49a5fd6b4e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1605385Reviewed-by: Sheng-hao Tsao <shenghao@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#659067}

chrome/browser/resources/chromeos/camera/BUILD.gn

@@ -82,6 +82,7 @@ copy("chrome_camera_app_images") {
     "src/images/camera_shutter_video_start_hover.svg",
     "src/images/camera_shutter_video_stop.svg",
     "src/images/camera_shutter_video_stop_hover.svg",
+    "src/images/dialog_intro_icon.svg",
     "src/images/settings_button_back.svg",
     "src/images/settings_button_expand.svg",
     "src/images/settings_feedback.svg",

chrome/browser/resources/chromeos/camera/Makefile

@@ -104,6 +104,7 @@ RESOURCES = \
 	src/images/camera_shutter_video_start_hover.svg \
 	src/images/camera_shutter_video_stop.svg \
 	src/images/camera_shutter_video_stop_hover.svg \
+	src/images/dialog_intro_icon.svg \
 	src/images/settings_button_back.svg \
 	src/images/settings_button_expand.svg \
 	src/images/settings_feedback.svg \

chrome/browser/resources/chromeos/camera/src/_locales/en/messages.json

@@ -230,5 +230,17 @@
   "MIGRATE_PICTURES_MSG": {
     "message": "Photos and videos taken with the camera will be moved to the Downloads folder. You can access them in Files.\n\nApps with storage permissions will have access to your photos and videos.",
     "description": "Message shown before moving all photos and videos stored in the Camera App to the Downloads folder."
+  },
+  "DIALOG_INTRO_TITLE": {
+    "message": "A whole new look",
+    "description": "Title of dialog shown for introducing new camera App UI."
+  },
+  "DIALOG_INTRO_MSG": {
+    "message": "Your camera now supports new modes and your photos and videos will be available under your Downloads folders.",
+    "description": "Message in the dialog shown for introducing new camera App UI."
+  },
+  "DIALOG_GOT_IT_BUTTON": {
+    "message": "Got it",
+    "description": "Label for the got it button in the dialog for introducing new camera App UI."
   }
 }
\ No newline at end of file

chrome/browser/resources/chromeos/camera/src/css/main.css

@@ -444,7 +444,8 @@ body._10sec #toggle-timer:checked {
 #gridsettings,
 #timersettings,
 #browser,
-#dialog,
+#message-dialog,
+#intro-dialog,
 #warning {
   bottom: 0;
   left: 0;
@@ -461,7 +462,8 @@ body.settings #settings,
 body.gridsettings #gridsettings,
 body.timersettings #timersettings,
 body.browser #browser,
-body.dialog #dialog,
+body.message-dialog #message-dialog,
+body.intro-dialog #intro-dialog,
 body.warning #warning {
   opacity: 1;
   transition: opacity 100ms;
@@ -1005,7 +1007,7 @@ body._10sec .description span[i18n-content=label_timer_10s] {
 }
 
 #warning,
-#dialog {
+.dialog {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -1025,13 +1027,14 @@ body._10sec .description span[i18n-content=label_timer_10s] {
   white-space: pre-wrap;
 }
 
-#dialog {
-  background: rgba(0, 0, 0, 0.8);
+.dialog {
+  background: rgba(0, 0, 0, 0.6);
 }
 
-#dialog-popup {
+.dialog-popup {
   background: white;
-  border-radius: 4px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
   display: flex;
   flex-direction: column;
   padding: 20px;
@@ -1039,11 +1042,11 @@ body._10sec .description span[i18n-content=label_timer_10s] {
   transition: transform 200ms;
 }
 
-body.dialog #dialog #dialog-popup {
+.dialog .dialog-popup {
   transform: translateY(0);
 }
 
-#dialog #dialog-msg {
+.dialog .dialog-msg {
   color: rgb(32, 33, 36);
   cursor: text;
   font-family: 'Roboto', sans-serif;
@@ -1056,29 +1059,29 @@ body.dialog #dialog #dialog-popup {
   white-space: pre-wrap;
 }
 
-#dialog #dialog-msg::-webkit-scrollbar {
+.dialog .dialog-msg::-webkit-scrollbar {
   height: 6px;
   width: 6px;
 }
 
-#dialog #dialog-msg::-webkit-scrollbar-track {
+.dialog .dialog-msg::-webkit-scrollbar-track {
   background: transparent;
 }
 
-#dialog #dialog-msg::-webkit-scrollbar-thumb {
+.dialog .dialog-msg::-webkit-scrollbar-thumb {
   background: gray;
   height: 6px;
   width: 6px;
 }
 
-#dialog-buttons {
+.dialog-buttons {
   align-items: center;
   display: flex;
   justify-content: flex-end;
   margin: 0 -2px;
 }
 
-#dialog-buttons button {
+.dialog-buttons button {
   background-color: white;
   border-style: solid;
   color: rgb(37, 129, 223);
@@ -1088,16 +1091,59 @@ body.dialog #dialog #dialog-popup {
   padding: 6px 18px;
 }
 
-#dialog-buttons button:focus {
+.dialog-buttons button:focus {
   background-color: rgb(37, 129, 223);
   border-color: rgb(37, 129, 223);
   color: white;
 }
 
-#dialog-buttons button:focus::after {
+.dialog-buttons button:focus::after {
   border: none;
 }
 
+#intro-dialog .dialog-popup {
+  align-items: center;
+  justify-content: center;
+  padding: 32px 50px;
+  text-align: center;
+  width: 360px;
+}
+
+#intro-dialog .dialog-title-icon {
+  background-image: url(../images/dialog_new_cca_icon.svg);
+  background-size: cover;
+  height: 32px;
+  width: 32px;
+}
+
+#intro-dialog .dialog-title {
+  color: rgb(32, 33, 36);
+  font: normal 28px/36px 'Google Sans', sans-serif;
+  margin-top: 20px;
+}
+
+#intro-dialog .dialog-msg {
+  color: rgb(95, 99, 104);
+  font: normal 13px/20px 'Roboto';
+  margin-top: 12px;
+  padding: 0;
+}
+
+#intro-dialog .dialog-buttons {
+  justify-content: center;
+  margin-top: 32px;
+}
+
+#intro-dialog .dialog-positive-button {
+  background: rgb(26, 115, 232);
+  border: none;
+  color: white;
+  font: 500 13px/20px 'Roboto', sans-serif;
+  height: 32px;
+  margin: 0;
+  padding: 0 16px;
+}
+
 #spinner {
   background-image: url(../images/spinner.svg);
   height: 32px;

chrome/browser/resources/chromeos/camera/src/images/dialog_intro_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" fill-rule="nonzero"/></svg>
\ No newline at end of file

chrome/browser/resources/chromeos/camera/src/js/main.js

@@ -49,7 +49,8 @@ cca.App = function() {
     new cca.views.TimerSettings(),
     this.browserView_,
     new cca.views.Warning(),
-    new cca.views.Dialog(),
+    new cca.views.Dialog('#message-dialog'),
+    new cca.views.Dialog('#intro-dialog'),
   ]);
 };
 
@@ -133,12 +134,13 @@ cca.App.prototype.start = function() {
   cca.models.FileSystem.initialize(() => {
     // Prompt to migrate pictures if needed.
     var message = chrome.i18n.getMessage('migrate_pictures_msg');
-    return cca.nav.open('dialog', message, false).then((acked) => {
-      if (!acked) {
-        throw new Error('no-migrate');
-      }
-      ackMigrate = true;
-    });
+    return cca.nav.open('message-dialog', {message, cancellable: false})
+        .then((acked) => {
+          if (!acked) {
+            throw new Error('no-migrate');
+          }
+          ackMigrate = true;
+        });
   }).then((external) => {
     cca.state.set('ext-fs', external);
     this.model_.addObserver(this.galleryButton_);
@@ -147,6 +149,7 @@ cca.App.prototype.start = function() {
     }
     this.model_.load();
     cca.nav.open('camera');
+    this.openIntroDialog_();
   }).catch((error) => {
     console.error(error);
     if (error && error.message == 'no-migrate') {
@@ -169,6 +172,19 @@ cca.App.prototype.onKeyPressed_ = function(event) {
   cca.nav.onKeyPressed(event);
 };
 
+/**
+ * Tries to open dialog for introducing new CCA.
+ * @private
+ */
+cca.App.prototype.openIntroDialog_ = function() {
+  chrome.storage.local.get(['isIntroDialogShown'], (values) => {
+    if (!values['isIntroDialogShown']) {
+      cca.nav.open('intro-dialog');
+      chrome.storage.local.set({isIntroDialogShown: true});
+    }
+  });
+};
+
 /**
  * @type {cca.App} Singleton of the App object.
  * @private

chrome/browser/resources/chromeos/camera/src/js/views/dialog.js

@@ -18,33 +18,38 @@ cca.views = cca.views || {};
  * Creates the Dialog view controller.
  * @extends {cca.views.View}
  * @constructor
+ * @param {string} viewId Root element id of dialog view.
  */
-cca.views.Dialog = function() {
-  cca.views.View.call(this, '#dialog', true);
+cca.views.Dialog = function(viewId) {
+  cca.views.View.call(this, viewId, true);
 
   /**
    * @type {HTMLButtonElement}
    * @private
    */
-  this.positiveButton_ = document.querySelector('#dialog-positive-button');
+  this.positiveButton_ =
+      document.querySelector(`${viewId} .dialog-positive-button`);
 
   /**
-   * @type {HTMLButtonElement}
+   * @type {!HTMLButtonElement}
    * @private
    */
-  this.negativeButton_ = document.querySelector('#dialog-negative-button');
+  this.negativeButton_ =
+      document.querySelector(`${viewId} .dialog-negative-button`);
 
   /**
-   * @type {HTMLElement}
+   * @type {!HTMLElement}
    * @private
    */
-  this.messageElement_ = document.querySelector('#dialog-msg');
+  this.messageHolder_ = document.querySelector(`${viewId} .dialog-msg-holder`);
 
   // End of properties, seal the object.
   Object.seal(this);
 
   this.positiveButton_.addEventListener('click', () => this.leave(true));
-  this.negativeButton_.addEventListener('click', () => this.leave());
+  if (this.negativeButton_) {
+    this.negativeButton_.addEventListener('click', () => this.leave());
+  }
 };
 
 cca.views.Dialog.prototype = {
@@ -56,9 +61,13 @@ cca.views.Dialog.prototype = {
  * @param {boolean} cancellable Whether the dialog is cancellable.
  * @override
  */
-cca.views.Dialog.prototype.entering = function(message, cancellable) {
-  this.messageElement_.textContent = message;
-  this.negativeButton_.hidden = !cancellable;
+cca.views.Dialog.prototype.entering = function({message, cancellable} = {}) {
+  if (this.messageHolder_ && message) {
+    this.messageHolder_.textContent = message;
+  }
+  if (this.negativeButton_) {
+    this.negativeButton_.hidden = !cancellable;
+  }
 };
 
 /**

chrome/browser/resources/chromeos/camera/src/js/views/gallery_base.js

@@ -128,18 +128,20 @@ cca.views.GalleryBase.prototype.deleteSelection = function() {
   var message = chrome.i18n.getMessage(
       multi ? 'delete_multi_confirmation_msg' : 'delete_confirmation_msg',
       param);
-  cca.nav.open('dialog', message, true).then((confirmed) => {
-    if (!confirmed) {
-      return;
-    }
-    var selectedPictures = this.selectedPictures();
-    for (var i = selectedPictures.length - 1; i >= 0; i--) {
-      this.model_.deletePicture(selectedPictures[i].picture).catch((error) => {
-        console.error(error);
-        // TODO(yuli): Show a toast message here.
+  cca.nav.open('message-dialog', {message, cancellable: true})
+      .then((confirmed) => {
+        if (!confirmed) {
+          return;
+        }
+        var selectedPictures = this.selectedPictures();
+        for (var i = selectedPictures.length - 1; i >= 0; i--) {
+          this.model_.deletePicture(selectedPictures[i].picture)
+              .catch((error) => {
+                console.error(error);
+                // TODO(yuli): Show a toast message here.
+              });
+        }
       });
-    }
-  });
 };
 
 /**

chrome/browser/resources/chromeos/camera/src/strings/camera_strings.grd

@@ -273,6 +273,15 @@
       <message desc="Label for switch to take portrait photo mode button." name="IDS_LABEL_SWITCH_TAKE_PORTRAIT_PHOTO_BUTTON">
         Portrait
       </message>
+      <message desc="Title of dialog shown for introducing new camera App UI." name="IDS_DIALOG_INTRO_TITLE">
+        A whole new look
+      </message>
+      <message desc="Message in the dialog shown for introducing new camera App UI." name="IDS_DIALOG_INTRO_MSG">
+        Your camera now supports new modes and your photos and videos will be available under your Downloads folders.
+      </message>
+      <message desc="Label for the got it button in the dialog for introducing new camera App UI." name="IDS_DIALOG_GOT_IT_BUTTON">
+        Got it
+      </message>
     </messages>
   </release>
 </grit>

chrome/browser/resources/chromeos/camera/src/views/main.html

@@ -234,17 +234,28 @@
     <div id="warning">
       <div id="error-msg" aria-live="polite"></div>
     </div>
-    <div id="dialog">
-      <div id="dialog-popup" role="dialog" aria-labelledby="dialog-msg">
-        <div id="dialog-msg"></div>
-        <div id="dialog-buttons">
-          <button id="dialog-negative-button" tabindex="0"
+    <div id="message-dialog" class="dialog">
+      <div class="dialog-popup" role="dialog" aria-labelledby="dialog-msg">
+        <div class="dialog-msg dialog-msg-holder"></div>
+        <div class="dialog-buttons">
+          <button class="dialog-negative-button" tabindex="0"
                   i18n-content="dialog_cancel_button"></button>
-          <button id="dialog-positive-button" tabindex="0"
+          <button class="dialog-positive-button" tabindex="0"
                   i18n-content="dialog_ok_button"></button>
         </div>
       </div>
     </div>
+    <div id="intro-dialog" class="dialog">
+      <div class="dialog-popup" role="dialog" aria-labelledby="dialog-msg">
+        <div class="dialog-title-icon"></div>
+        <div class="dialog-title" i18n-content="dialog_intro_title"></div>
+        <div class="dialog-msg" i18n-content="dialog_intro_msg"></div>
+        <div class="dialog-buttons">
+          <button class="dialog-positive-button" tabindex="0"
+            i18n-content="dialog_got_it_button"></button>
+        </div>
+      </div>
+    </div>
     <div class="centered-overlay" id="toast" aria-live="polite"></div>
     <div id="tooltip" aria-hidden="true"></div>
     <audio id="sound-tick" src="../sounds/tick.ogg" data-timeout="200">