Commit a28431db authored by Scott Chen's avatar Scott Chen Committed by Commit Bot

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: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#566531}
parent 8f68ca7f
<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>
......@@ -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';
......
......@@ -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'));
});
});
});
......@@ -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>
......
......@@ -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: {
......
......@@ -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. */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment