WebUI[MD-refresh]: modify settings-subpage-search to use cr-input

Bug: 832177
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I493b2b14e0489254fecdfef608f842af369809f6
Reviewed-on: https://chromium-review.googlesource.com/1089575
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#566531}

chrome/browser/resources/settings/settings_page/settings_subpage_search.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 
 <dom-module id="settings-subpage-search">
   <template>
     <style include="cr-shared-style">
       :host {
-        --paper-input-container-underline: var(--subpage-search-underline);
-        --paper-input-container-underline-focus:
-            var(--subpage-search-underline);
-        --paper-input-container-underline-disabled:
-            var(--subpage-search-underline);
-        --paper-input-suffix: {
-          /* Required to align the icon in |clearSearch| vertically. */
-          line-height: 0;
-        };
-        --subpage-search-underline: {
-          margin-bottom: -2px;
-          margin-top: -2px;
-        }
         user-select: none;
       }
 
@@ -34,20 +21,21 @@
         width: 16px;
       }
 
-      paper-input-container {
+      cr-input {
+        --cr-input-error-display: none;
+        --cr-input-input: {
+          background-color: white;
+          -webkit-padding-end: 20px;
+          -webkit-padding-start: 0;
+          padding-bottom: 2px;
+          padding-top: 2px;
+          border-bottom: 1px solid var(--paper-grey-800);
+        }
         display: inline-block;
         vertical-align: middle;
         width: 160px;  /* Special width for search input. */
       }
 
-      input[type='search']::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-      }
-
-      input[placeholder] {
-        text-overflow: ellipsis;
-      }
-
       #searchInput {
         font-size: 92.3076923%;  /* To 12px from 13px. */
         min-height: 24px;
@@ -64,20 +52,26 @@
         /* A 16px icon that fits on the input line. */
         background-size: 16px;
         height: 24px;
+        position: absolute;
+        right: 0;
         width: 24px;
       }
+
+      :host-context([dir='rtl']) #clearSearchContainer {
+        left: 0;
+        right: auto;
+      }
     </style>
     <iron-icon id="searchIcon" icon="cr:search"></iron-icon>
-    <paper-input-container no-label-float>
-      <input id="searchInput" type="search" on-search="onSearchTermSearch"
-          on-input="onSearchTermInput" aria-label$="[[label]]" incremental
-          autofocus$="[[autofocus]]" placeholder="[[label]]" slot="input">
+    <cr-input id="searchInput" on-search="onSearchTermSearch" incremental
+        on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
+        autofocus="[[autofocus]]" placeholder="[[label]]">
       <paper-icon-button-light id="clearSearchContainer" class="icon-cancel"
           hidden$="[[!hasSearchText]]" slot="suffix">
         <button id="clearSearch" on-click="onTapClear_" title="[[clearLabel]]">
         </button>
       </paper-icon-button-light>
-    </paper-input-container>
+    </cr-input>
   </template>
   <script src="settings_subpage_search.js"></script>
 </dom-module>

chrome/test/data/webui/cr_elements/cr_input_test.js

@@ -15,35 +15,25 @@ suite('cr-input', function() {
   });
 
   test('AttributesCorrectlySupported', function() {
-    assertFalse(input.autofocus);
-    crInput.setAttribute('autofocus', 'autofocus');
-    assertTrue(input.autofocus);
-
-    assertFalse(input.disabled);
-    crInput.setAttribute('disabled', 'disabled');
-    assertTrue(input.disabled);
-
-    assertFalse(input.hasAttribute('tabindex'));
-    crInput.tabIndex = '-1';
-    assertEquals(-1, input.tabIndex);
-    crInput.tabIndex = '0';
-    assertEquals(0, input.tabIndex);
-
-    assertEquals('none', getComputedStyle(crInput.$.label).display);
-    crInput.label = 'label';
-    assertEquals('block', getComputedStyle(crInput.$.label).display);
-
-    assertFalse(input.readOnly);
-    crInput.setAttribute('readonly', 'readonly');
-    assertTrue(input.readOnly);
-
-    assertEquals('text', input.type);
-    crInput.setAttribute('type', 'password');
-    assertEquals('password', input.type);
-
-    assertEquals(-1, input.maxLength);
-    crInput.setAttribute('maxlength', 5);
-    assertEquals(5, input.maxLength);
+    const attributesToTest = [
+      // [externalName, internalName, defaultValue, testValue]
+      ['autofocus', 'autofocus', false, true],
+      ['disabled', 'disabled', false, true],
+      ['incremental', 'incremental', false, true],
+      ['maxlength', 'maxLength', -1, 5],
+      ['pattern', 'pattern', '', '[a-z]+'],
+      ['readonly', 'readOnly', false, true],
+      ['required', 'required', false, true],
+      ['tab-index', 'tabIndex', 0, -1],
+      ['type', 'type', 'text', 'password'],
+    ];
+
+    attributesToTest.forEach(attr => {
+      console.log(attr[0]);
+      assertEquals(attr[2], input[attr[1]]);
+      crInput.setAttribute(attr[0], attr[3]);
+      assertEquals(attr[3], input[attr[1]]);
+    });
   });
 
   test('placeholderCorrectlyBound', function() {
@@ -61,9 +51,9 @@ suite('cr-input', function() {
 
   test('labelHiddenWhenEmpty', function() {
     const label = crInput.$.label;
-    assertTrue(label.hidden);
+    assertEquals('none', getComputedStyle(crInput.$.label).display);
     crInput.label = 'foobar';
-    assertFalse(label.hidden);
+    assertEquals('block', getComputedStyle(crInput.$.label).display);
     assertEquals('foobar', label.textContent);
   });
 
@@ -127,14 +117,13 @@ suite('cr-input', function() {
 
   test('validation', function() {
     crInput.value = 'FOO';
-    // Note that even with |autoValidate|, crInput.invalid only updates after
-    // |value| is changed.
     crInput.autoValidate = true;
     assertFalse(crInput.hasAttribute('required'));
     assertFalse(crInput.invalid);
 
-    crInput.setAttribute('required', 'required');
-    assertTrue(input.required);
+    // Note that even with |autoValidate|, crInput.invalid only updates after
+    // |value| is changed.
+    crInput.setAttribute('required', '');
     assertFalse(crInput.invalid);
 
     crInput.value = '';
@@ -144,7 +133,6 @@ suite('cr-input', function() {
 
     const testPattern = '[a-z]+';
     crInput.setAttribute('pattern', testPattern);
-    assertEquals(testPattern, input.pattern);
     crInput.value = 'FOO';
     assertTrue(crInput.invalid);
     crInput.value = 'foo';

chrome/test/data/webui/settings/settings_subpage_test.js

@@ -70,16 +70,16 @@ cr.define('settings_subpage', function() {
   });
 
   suite('SettingsSubpageSearch', function() {
-    test('host autofocus propagates to <input>', function() {
+    test('host autofocus propagates to <cr-input>', function() {
       PolymerTest.clearBody();
       const element = document.createElement('settings-subpage-search');
       element.setAttribute('autofocus', true);
       document.body.appendChild(element);
 
-      assertTrue(element.$$('input').hasAttribute('autofocus'));
+      assertTrue(element.$$('cr-input').hasAttribute('autofocus'));
 
       element.removeAttribute('autofocus');
-      assertFalse(element.$$('input').hasAttribute('autofocus'));
+      assertFalse(element.$$('cr-input').hasAttribute('autofocus'));
     });
   });
 });

ui/webui/resources/cr_elements/cr_input/cr_input.html

@@ -81,9 +81,14 @@
         /* This will spread the input field and the suffix apart only if the
            host element width is intentionally set to something large. */
         justify-content: space-between;
+        position: relative;
 
         @apply --cr-input-row-container;
       }
+
+      #input[type='search']::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+      }
     </style>
     <div id="label" hidden="[[!label]]">[[label]]</div>
     <div id="row-container">
@@ -94,7 +99,8 @@
         <input id="input" disabled="[[disabled]]" autofocus="[[autofocus]]"
             value="{{value::input}}" tabindex$="[[tabIndex]]" type="[[type]]"
             readonly$="[[readonly]]" maxlength$="[[maxlength]]"
-            pattern="[[pattern]]" required="[[required]]">
+            pattern="[[pattern]]" required="[[required]]"
+            incremental="[[incremental]]">
         <div id="underline"></div>
       </div>
       <slot name="suffix"></slot>

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

@@ -8,14 +8,15 @@
  * Native input attributes that are currently supported by cr-inputs are:
  *   autofocus
  *   disabled
+ *   incremental (only applicable when type="search")
  *   maxlength
- *   type (only 'text' and 'password')
- *   readonly
  *   pattern
- *   required
- *   value
  *   placeholder
+ *   readonly
+ *   required
  *   tabindex as 'tab-index' (e.g.: <cr-input tab-index="-1">)
+ *   type (only 'text', 'password', and 'search' supported)
+ *   value
  *
  * Additional attributes that you can use with cr-input:
  *   label
@@ -55,6 +56,8 @@ Polymer({
       value: '',
     },
 
+    incremental: Boolean,
+
     invalid: {
       type: Boolean,
       value: false,
@@ -95,7 +98,7 @@ Polymer({
 
     type: {
       type: String,
-      value: 'text',  // Only 'text' and 'password' are currently supported.
+      value: 'text',  // Only 'text', 'password', 'search' are supported.
     },
 
     value: {

ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html

@@ -42,8 +42,22 @@
         font-size: inherit;
         line-height: inherit;
         outline: none;
-        padding: 6px 8px;
         width: 100%;
+
+        /**
+         * When using mixins, avoid using padding shorthand. Using both the
+         * shorthand and top/bottom/start/end can lead to style override issues.
+         * This is only noticable when the |optimize_webui=true| build argument
+         * is used.
+         *
+         * See https://crbug.com/846254 and associated CL for more information.
+         */
+        -webkit-padding-end: 8px;
+        -webkit-padding-start: 8px;
+        padding-bottom: 6px;
+        padding-top: 6px;
+
+        @apply --cr-input-input;
       }
 
       /* Underline styling below. */