Gallery: do not show focus state if it's focused by mouse.

Since focus state is similar to toggle state (or pressed state), if we
show the state for the focus of mouse click, it's confusing. This CL
changes not to show focus state if it's made by mosue click.

BUG=520777
TEST=none

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

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

5 files changed, 21 insertions, 8 deletions

diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css
index 7c2b42bf..d49d450 100644
--- a/ui/file_manager/gallery/css/gallery.css
+++ b/ui/file_manager/gallery/css/gallery.css
@@ -582,6 +582,10 @@ paper-slider::shadow .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
   outline: none;
 }
 
+.gallery > .toolbar button.using-mouse:focus {
+  background-color: transparent;
+}
+
 .gallery > .toolbar button > .icon {
   background-position: center;
   background-repeat: no-repeat;
diff --git a/ui/file_manager/gallery/js/gallery.js b/ui/file_manager/gallery/js/gallery.js
index 0062660..fdfb9ce 100644
--- a/ui/file_manager/gallery/js/gallery.js
+++ b/ui/file_manager/gallery/js/gallery.js
@@ -113,6 +113,7 @@ function Gallery(volumeManager) {
   this.errorBanner_ = new ErrorBanner(this.container_);
 
   var modeSwitchButton = queryRequiredElement(this.topToolbar_, 'button.mode');
+  GalleryUtil.decorateMouseFocusHandling(modeSwitchButton);
   modeSwitchButton.addEventListener('click',
       this.onModeSwitchButtonClicked_.bind(this));
 
diff --git a/ui/file_manager/gallery/js/gallery_util.js b/ui/file_manager/gallery/js/gallery_util.js
index 860dbb1..b27a88d 100644
--- a/ui/file_manager/gallery/js/gallery_util.js
+++ b/ui/file_manager/gallery/js/gallery_util.js
@@ -64,4 +64,16 @@ GalleryUtil.isOnMTPVolume = function(entry, volumeManager) {
   var volumeInfo = volumeManager.getVolumeInfo(entry);
   return volumeInfo &&
       volumeInfo.volumeType === VolumeManagerCommon.VolumeType.MTP;
-}
+};
+
+/**
+ * Decorates an element to handle mouse focus specific logic. The element
+ * becomes to have using-mouse class when it is focused by mouse.
+ * @param {!HTMLElement} element
+ */
+GalleryUtil.decorateMouseFocusHandling = function(element) {
+  element.addEventListener('mousedown',
+      element.classList.toggle.bind(element.classList, 'using-mouse', true));
+  element.addEventListener('blur',
+      element.classList.toggle.bind(element.classList, 'using-mouse', false));
+};
diff --git a/ui/file_manager/gallery/js/image_editor/image_editor.js b/ui/file_manager/gallery/js/image_editor/image_editor.js
index f5f7921..8116f1b 100644
--- a/ui/file_manager/gallery/js/image_editor/image_editor.js
+++ b/ui/file_manager/gallery/js/image_editor/image_editor.js
@@ -1176,14 +1176,9 @@ ImageEditor.Toolbar.createButton_ = function(
   button.label = strf(title);
   button.title = strf(title);
 
-  // Click event is late for setting using-mouse class. i.e. if we set this
-  // class with click event, user can see a blink of :focus:not(.using-mouse)
-  // state.
-  button.addEventListener('mousedown',
-      button.classList.toggle.bind(button.classList, 'using-mouse', true));
+  GalleryUtil.decorateMouseFocusHandling(button);
+
   button.addEventListener('click', handler , false);
-  button.addEventListener('blur',
-      button.classList.toggle.bind(button.classList, 'using-mouse', false));
 
   return button;
 };
diff --git a/ui/file_manager/gallery/js/slide_mode.js b/ui/file_manager/gallery/js/slide_mode.js
index 4368961..91ddea7 100644
--- a/ui/file_manager/gallery/js/slide_mode.js
+++ b/ui/file_manager/gallery/js/slide_mode.js
@@ -360,6 +360,7 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
    * @const
    */
   this.editButton_ = queryRequiredElement(this.topToolbar_, 'button.edit');
+  GalleryUtil.decorateMouseFocusHandling(this.editButton_);
   this.editButton_.addEventListener('click', this.toggleEditor.bind(this));
 
   /**