From d783daa13d1ed54dcaf98c9e1e6c9905a145e0bb Mon Sep 17 00:00:00 2001
From: yawano <yawano@chromium.org>
Date: Fri, 7 Aug 2015 02:08:25 -0700
Subject: [PATCH] Gallery: replace paper-input of rename field with
 HTMLInputElement.

Since ChromeVox does not support Shadow DOM for now, paper-input with
Shadow DOM is not accessible. As temporary solution until it supports
Shadow DOM, we replace paper-input with HTMLInputElement.

BUG=517774
TEST=none

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

Cr-Commit-Position: refs/heads/master@{#342322}
---
 ui/file_manager/gallery/css/gallery.css          |  7 ++++---
 ui/file_manager/gallery/gallery.html             |  5 ++++-
 ui/file_manager/gallery/js/gallery.js            | 12 +++++-------
 ui/file_manager/gallery/js/test_util.js          |  8 +++-----
 ui/file_manager/integration_tests/remote_call.js |  2 +-
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css
index 978c9a4a407e..a1a3fd42fa6a 100644
--- a/ui/file_manager/gallery/css/gallery.css
+++ b/ui/file_manager/gallery/css/gallery.css
@@ -316,14 +316,15 @@ paper-slider::shadow .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
   flex: 1 0 auto;
 }
 
-.filename-spacer paper-input {
+#rename-input {
   margin: 8px 0;
   min-width: 160px;
+  padding: 4px 0;
   width: -webkit-fit-content;
 }
 
-.filename-spacer paper-input::shadow paper-input-container {
-  padding: 4px 0;
+#rename-input > input {
+  color: white;
 }
 
 /* Bubble */
diff --git a/ui/file_manager/gallery/gallery.html b/ui/file_manager/gallery/gallery.html
index fcbb75dfd695..93900d64980d 100644
--- a/ui/file_manager/gallery/gallery.html
+++ b/ui/file_manager/gallery/gallery.html
@@ -46,7 +46,10 @@
     </div>
     <div id="top-toolbar" class="toolbar top tool dimmable">
       <div class="filename-spacer">
-        <paper-input no-label-float spellcheck="false"></paper-input>
+        <!-- Change this to use paper-input after ChromeVox supports shadow DOM. -->
+        <paper-input-container id="rename-input" no-label-float>
+          <input spellcheck="false"></input>
+        </paper-input-container>
       </div>
       <div class="button-spacer">
         <!-- Use button element for edit button to implement toggle button with
diff --git a/ui/file_manager/gallery/js/gallery.js b/ui/file_manager/gallery/js/gallery.js
index 4713b65813d5..a5f0306a6ba3 100644
--- a/ui/file_manager/gallery/js/gallery.js
+++ b/ui/file_manager/gallery/js/gallery.js
@@ -84,18 +84,17 @@ function Gallery(volumeManager) {
       '.filename-spacer');
 
   /**
-   * @private {PaperInput}
+   * @private {HTMLInputElement}
    * @const
    */
-  this.filenameEdit_ = /** @type {PaperInput} */
-      (queryRequiredElement(this.filenameSpacer_, 'paper-input'));
+  this.filenameEdit_ = /** @type {HTMLInputElement} */
+      (queryRequiredElement(this.filenameSpacer_, 'input'));
 
   this.filenameCanvas_ = document.createElement('canvas');
   this.filenameCanvasContext_ = this.filenameCanvas_.getContext('2d');
 
   // Set font style of canvas context to same font style with rename field.
-  var filenameEditComputedStyle = window.getComputedStyle(
-      this.filenameEdit_.inputElement);
+  var filenameEditComputedStyle = window.getComputedStyle(this.filenameEdit_);
   this.filenameCanvasContext_.font = filenameEditComputedStyle.font;
 
   this.filenameEdit_.addEventListener('blur',
@@ -761,8 +760,7 @@ Gallery.prototype.updateSelectionAndState_ = function() {
 Gallery.prototype.onFilenameFocus_ = function() {
   ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', true);
   this.filenameEdit_.originalValue = this.filenameEdit_.value;
-  setTimeout(this.filenameEdit_.inputElement.select.bind(
-      this.filenameEdit_.inputElement), 0);
+  setTimeout(this.filenameEdit_.select.bind(this.filenameEdit_), 0);
   this.onUserAction_();
 };
 
diff --git a/ui/file_manager/gallery/js/test_util.js b/ui/file_manager/gallery/js/test_util.js
index 6aaab6519956..db0fb02b5741 100644
--- a/ui/file_manager/gallery/js/test_util.js
+++ b/ui/file_manager/gallery/js/test_util.js
@@ -65,12 +65,10 @@ test.util.sync.changeValue = function(contentWindow, query, newValue) {
  * @param {string} newName Name to be newly assigned.
  */
 test.util.sync.changeName = function(contentWindow, newName) {
-  var nameBox = contentWindow.document.querySelector(
-      '.filename-spacer > paper-input');
-  // For paper-input, we need to focus on input element inside the component.
-  nameBox.inputElement.focus();
+  var nameBox = contentWindow.document.querySelector('.filename-spacer input');
+  nameBox.focus();
   nameBox.value = newName;
-  nameBox.inputElement.blur();
+  nameBox.blur();
 };
 
 // Register the test utils.
diff --git a/ui/file_manager/integration_tests/remote_call.js b/ui/file_manager/integration_tests/remote_call.js
index 0e51712562d6..42bd75641969 100644
--- a/ui/file_manager/integration_tests/remote_call.js
+++ b/ui/file_manager/integration_tests/remote_call.js
@@ -432,7 +432,7 @@ RemoteCallGallery.prototype.waitForSlideImage =
   return repeatUntil(function() {
     var query = '.gallery[mode="slide"] .content canvas.fullres';
     return Promise.all([
-        this.waitForElement(windowId, '.filename-spacer > paper-input'),
+        this.waitForElement(windowId, '.filename-spacer input'),
         this.waitForElement(windowId, query)
     ]).then(function(args) {
       var nameBox = args[0];
-- 
2.11.4.GIT