Gallery: fix overwrite bubble has not shown.

BUG=523178
TEST=none

Review URL: https://codereview.chromium.org/1302233002

Cr-Commit-Position: refs/heads/master@{#344725}

3 files changed, 58 insertions, 45 deletions

diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css
index 7416690..a73601a 100644
--- a/ui/file_manager/gallery/css/gallery.css
+++ b/ui/file_manager/gallery/css/gallery.css
@@ -55,7 +55,7 @@ paper-slider::shadow .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
 }
 
 .gallery,
-.gallery .content {
+.gallery > .content {
   bottom: 0;
   left: 0;
   overflow: hidden;
@@ -198,6 +198,7 @@ paper-slider::shadow .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
 .gallery > .toolbar.bottom {
   bottom: 0;
   height: 48px;
+  overflow: visible; /* For overwrite original bubble. */
 }
 
 .gallery > .toolbar.bottom > .slide-mode-toolbar {
@@ -337,7 +338,7 @@ paper-slider::shadow .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
 .gallery .toolbar .bubble {
   bottom: 65px;
   font-size: 85%;
-  left: 50px;
+  left: 20px;
   position: absolute;
   width: 220px;
 }
diff --git a/ui/file_manager/gallery/gallery.html b/ui/file_manager/gallery/gallery.html
index fc851c6..54df81e 100644
--- a/ui/file_manager/gallery/gallery.html
+++ b/ui/file_manager/gallery/gallery.html
@@ -105,6 +105,11 @@
           <paper-button class="exit" i18n-content="GALLERY_EXIT"></paper-button>
         </div>
       </div>
+      <div class="bubble" hidden>
+        <div class="content"></div>
+        <span class="pointer bottom"></span>
+        <div class="close-x"></div>
+      </div>
     </div>
     <div class="prompt-wrapper" pos="center">
       <div class="error-banner"></div>
diff --git a/ui/file_manager/gallery/js/slide_mode.js b/ui/file_manager/gallery/js/slide_mode.js
index 91ddea7..4932fd4 100644
--- a/ui/file_manager/gallery/js/slide_mode.js
+++ b/ui/file_manager/gallery/js/slide_mode.js
@@ -224,7 +224,6 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
    */
   this.imageContainer_ = util.createChild(queryRequiredElement(
       this.document_, '.content'), 'image-container');
-  this.imageContainer_.addEventListener('click', this.onClick_.bind(this));
 
   this.document_.addEventListener('click', this.onDocumentClick_.bind(this));
 
@@ -260,28 +259,16 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
       (queryRequiredElement(document, 'files-toast'));
 
   /**
-   * @type {!HTMLElement}
-   * @private
+   * @private {!HTMLElement}
    * @const
    */
-  this.bubble_ = util.createChild(this.bottomToolbar_, 'bubble');
-  this.bubble_.hidden = true;
+  this.bubble_ = queryRequiredElement(this.bottomToolbar_, '.bubble');
 
-  /**
-   * @type {!HTMLElement}
-   * @const
-   */
-  var bubbleContent = util.createChild(this.bubble_);
-  bubbleContent.innerHTML = this.displayStringFunction_(
-      'GALLERY_OVERWRITE_BUBBLE');
-
-  util.createChild(this.bubble_, 'pointer bottom', 'span');
+  var bubbleContent = queryRequiredElement(this.bubble_, '.content');
+  // GALLERY_OVERWRITE_BUBBLE contains <br> tag inside message.
+  bubbleContent.innerHTML = strf('GALLERY_OVERWRITE_BUBBLE');
 
-  /**
-   * @type {!HTMLElement}
-   * @const
-   */
-  var bubbleClose = util.createChild(this.bubble_, 'close-x');
+  var bubbleClose = queryRequiredElement(this.bubble_, '.close-x');
   bubbleClose.addEventListener('click', this.onCloseBubble_.bind(this));
 
   /**
@@ -1044,20 +1031,9 @@ SlideMode.prototype.itemLoaded_ = function(
   this.overwriteOriginalCheckbox_.checked = false;
 
   var keys = {};
-  keys[SlideMode.OVERWRITE_BUBBLE_KEY] = 0;
   keys[SlideMode.OVERWRITE_ORIGINAL_KEY] = true;
   chrome.storage.local.get(keys,
       function(values) {
-        var times = values[SlideMode.OVERWRITE_BUBBLE_KEY];
-        if (times < SlideMode.OVERWRITE_BUBBLE_MAX_TIMES) {
-          this.bubble_.hidden = false;
-          if (this.isEditing()) {
-            var items = {};
-            items[SlideMode.OVERWRITE_BUBBLE_KEY] = times + 1;
-            chrome.storage.local.set(items);
-          }
-        }
-
         // Users can overwrite original file only if loaded image is original
         // and writable.
         if (item.isOriginal() &&
@@ -1101,15 +1077,6 @@ SlideMode.prototype.requestPrefetch = function(direction, delay) {
 // Event handlers.
 
 /**
- * Click handler for the image container.
- *
- * @param {!Event} event Mouse click event.
- * @private
- */
-SlideMode.prototype.onClick_ = function(event) {
-};
-
-/**
  * Click handler for the entire document.
  * @param {!Event} event Mouse click event.
  * @private
@@ -1370,10 +1337,7 @@ SlideMode.prototype.onOverwriteOriginalCheckboxChanged_ = function() {
  */
 SlideMode.prototype.onCloseBubble_ = function() {
   this.bubble_.hidden = true;
-  var items = {};
-  items[SlideMode.OVERWRITE_BUBBLE_KEY] =
-      SlideMode.OVERWRITE_BUBBLE_MAX_TIMES;
-  chrome.storage.local.set(items);
+  this.setOverwriteBubbleCount_(SlideMode.OVERWRITE_BUBBLE_MAX_TIMES);
 };
 
 // Slideshow
@@ -1606,6 +1570,15 @@ SlideMode.prototype.toggleEditor = function(opt_event) {
 
     this.touchHandlers_.enabled = false;
     this.dimmableUIController_.setDisabled(true);
+
+    // Show overwrite original bubble if it hasn't been shown for max times.
+    this.getOverwriteBubbleCount_().then(function(count) {
+      if (count >= SlideMode.OVERWRITE_BUBBLE_MAX_TIMES)
+        return;
+
+      this.setOverwriteBubbleCount_(count + 1);
+      this.bubble_.hidden = false;
+    }.bind(this));
   } else {
     this.editor_.getPrompt().hide();
     this.editor_.leaveModeGently();
@@ -1614,12 +1587,46 @@ SlideMode.prototype.toggleEditor = function(opt_event) {
     this.viewport_.setScreenBottom(0);
     this.imageView_.applyViewportChange();
 
+    this.bubble_.hidden = true;
+
     this.touchHandlers_.enabled = true;
     this.dimmableUIController_.setDisabled(false);
   }
 };
 
 /**
+ * Gets count of overwrite bubble.
+ * @return {!Promise<number>}
+ * @private
+ */
+SlideMode.prototype.getOverwriteBubbleCount_ = function() {
+  return new Promise(function(resolve, reject) {
+    var requests = {};
+    requests[SlideMode.OVERWRITE_BUBBLE_KEY] = 0;
+
+    chrome.storage.local.get(requests, function(results) {
+      if (!!chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError);
+        return;
+      }
+
+      resolve(results[SlideMode.OVERWRITE_BUBBLE_KEY]);
+    });
+  });
+};
+
+/**
+ * Sets count of overwrite bubble.
+ * @param {number} value
+ * @private
+ */
+SlideMode.prototype.setOverwriteBubbleCount_ = function(value) {
+  var requests = {};
+  requests[SlideMode.OVERWRITE_BUBBLE_KEY] = value;
+  chrome.storage.local.set(requests);
+};
+
+/**
  * Prints the current item.
  * @private
  */