cr-input: select input element when focused

Currently we select the input element contents when focusing back
to a <cr-input> element with shift-tab, but focusing forward to
a <cr-input> element does not select its contents. This fixes that
behavior to always select the contents to be consistent with the
behavior of <input>.

Bug: 882612
Change-Id: Iecfbd984928571ca7041133f5621d82fd32f4f35
Reviewed-on: https://chromium-review.googlesource.com/1217747Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590357}

chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html

@@ -43,18 +43,15 @@
       <div slot="title">$i18n{passwordDetailsTitle}</div>
       <div slot="body">
         <cr-input id="websiteInput" label="$i18n{editPasswordWebsiteLabel}"
-            value="[[item.entry.loginPair.urls.link]]" readonly
-            on-focus="onInputFocus_" on-blur="onInputBlur_">
+            value="[[item.entry.loginPair.urls.link]]" readonly>
         </cr-input>
         <cr-input id="usernameInput" label="$i18n{editPasswordUsernameLabel}"
-            value="[[item.entry.loginPair.username]]" readonly
-            on-focus="onInputFocus_" on-blur="onInputBlur_">
+            value="[[item.entry.loginPair.username]]" readonly>
         </cr-input>
         <cr-input id="passwordInput" readonly
             label="$i18n{editPasswordPasswordLabel}"
             type="[[getPasswordInputType_(item.password)]]"
-            value="[[getPassword_(item.password)]]"
-            on-focus="onInputFocus_" on-blur="onInputBlur_">
+            value="[[getPassword_(item.password)]]">
           <paper-icon-button-light id="showPasswordButtonContainer"
               class$="[[getIconClass_(item.password)]]" slot="suffix"
               hidden$="[[item.entry.federationText]]">

chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.js

@@ -32,19 +32,5 @@ Polymer({
   onActionButtonTap_: function() {
     this.close();
   },
-
-  /**
-   * Manually select texts for readonly inputs.
-   * @param {!Event} event
-   * @private
-   */
-  onInputFocus_: function(event) {
-    (/** @type {!CrInputElement} */ (event.target)).select();
-  },
-
-  /** Manually de-select texts for readonly inputs. */
-  onInputBlur_: function() {
-    this.shadowRoot.getSelection().removeAllRanges();
-  },
 });
 })();

ui/webui/resources/cr_elements/cr_input/cr_input.js

@@ -150,7 +150,7 @@ Polymer({
   },
 
   listeners: {
-    'focus': 'focusInput_',
+    'focus': 'onFocus_',
     'pointerdown': 'onPointerDown_',
   },
 
@@ -215,9 +215,24 @@ Polymer({
   },
 
   /** @private */
+  onFocus_: function() {
+    if (!this.focusInput_())
+      return;
+    // Always select the <input> element on focus. TODO(stevenjb/scottchen):
+    // Native <input> elements only do this for keyboard focus, not when
+    // focus() is called directly. Fix this? https://crbug.com/882612.
+    this.inputElement.select();
+  },
+
+  /**
+   * @return {boolean} Whether the <input> element was focused.
+   * @private
+   */
   focusInput_: function() {
-    if (this.shadowRoot.activeElement != this.inputElement)
-      this.inputElement.focus();
+    if (this.shadowRoot.activeElement == this.inputElement)
+      return false;
+    this.inputElement.focus();
+    return true;
   },
 
   /** @private */