Skip to content

GitLab

T
tangled
Commit 18f718a1 authored by Gavin Williams's avatar Gavin Williams Committed by Commit Bot
Browse files
Options

Remove cr-input from CrOS destination dropdown 

cr-input is mainly used for receiving user keyboard input and comes
with a lot of built-in features to support that. Since the print
preview dropdown does not directly receive keyboard input it makes
sense to replace cr-input with a standard div. This makes customization
of the dropdown cleaner as well.

"input" was removed from all of the element id's to reflect the removal
of cr-input.

Bug: 1059607
Change-Id: Icdbde1ac3e089fc76b35eef2ba67f76a4f649fe3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2284866Reviewed-by: default avatarRebekah Potter <rbpotter@chromium.org>
Reviewed-by: default avatarBailey Berro <baileyberro@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#786604}
parent eb197564
Show whitespace changes
Inline Side-by-side
Showing with 100 additions and 120 deletions
chrome/browser/resources/print_preview/ui/destination_dropdown_cros.html
View file @ 18f718a1
<style include="cr-shared-style cr-hidden-style md-select">
:host([opened_]) cr-input {
--cr-input-border-radius: 4px 4px 0 0;
}
iron-dropdown,
cr-input {
width: var(--md-select-width);
}
cr-input::part(input) {
cursor: pointer;
opacity: 1;
padding-inline-end: 32px;
padding-inline-start: 8px;
text-overflow: clip;
}
<style include="cr-shared-style cr-hidden-style">
iron-dropdown {
border: 0.5px solid rgba(0, 0, 0, 0.5);
max-height: 270px;
......@@ -24,27 +7,14 @@
iron-dropdown [slot='dropdown-content'] {
background-color: white;
box-shadow: 0 2px 6px var(--google-grey-600);
min-width: var(--md-select-width);
padding: 8px 0;
}
#input-overlay {
border-radius: 4px;
height: 100%;
left: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
#dropdown-icon {
--iron-icon-height: 20px;
--iron-icon-width: 20px;
margin-top: -10px;
padding-inline-end: 6px;
position: absolute;
--iron-icon-height: 24px;
--iron-icon-width: 44px;
align-items: center;
margin-inline-start: -4px;
right: 0;
top: 50%;
}
......@@ -54,20 +24,15 @@
right: unset;
}
cr-input:focus-within #dropdown-icon {
--iron-icon-fill-color: var(--google-blue-600);
}
#input-box {
#dropdown-box {
border-radius: 4px;
height: 100%;
left: 0;
pointer-events: none;
top: 0;
width: 100%;
}
#dropdown-box {
margin-top: 24px;
overflow: hidden;
pointer-events: initial;
position: absolute;
top: 0;
width: 100%;
}
......@@ -91,27 +56,37 @@
background-color: var(--google-blue-refresh-100);
}
.dot {
background-color: #bbb;
border-radius: 50%;
display: inline-block;
height: 10px;
width: 10px;
}
#pre-input-box,
#destination-icon-box,
.printer-display-name {
padding-inline-start: 8px;
}
#pre-input-box {
#destination-dropdown {
position: relative;
}
#destination-display-container {
align-items: center;
background-color: var(--google-grey-refresh-100);
border-radius: 4px;
cursor: pointer;
display: flex;
width: 100%;
}
#destination-display {
box-sizing: border-box;
overflow: hidden;
padding-inline-end: 32px;
padding-inline-start: 8px;
text-overflow: clip;
white-space: nowrap;
width: 100%;
}
</style>
<cr-input id="dropdownInput" on-keydown="onKeyDown_"
value="[[value.displayName]]" disabled="[[disabled]]" readonly>
<div id="pre-input-overlay" slot="inline-prefix">
<div id="pre-input-box">
<div id="destination-dropdown" on-keydown="onKeyDown_" tabindex="0">
<div id="destination-display-container">
<div id="destination-icon-box">
<iron-icon icon="[[destinationIcon]]"
hidden="[[isCurrentDestinationCrosLocal]]">
</iron-icon>
......@@ -121,9 +96,7 @@
value.printerStatusReason)]]">
</printer-status-icon-cros>
</div>
</div>
<div id="input-overlay" slot="suffix">
<div id="input-box">
<div id="destination-display">[[value.displayName]]</div>
<iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
</div>
<div id="dropdown-box">
......@@ -159,5 +132,4 @@
</div>
</iron-dropdown>
</div>
</div>
</cr-input>
</div>
chrome/browser/resources/print_preview/ui/destination_dropdown_cros.js
View file @ 18f718a1
......@@ -2,9 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
import 'chrome://resources/cr_elements/hidden_style_css.m.js';
import 'chrome://resources/cr_elements/md_select_css.m.js';
import 'chrome://resources/cr_elements/shared_vars_css.m.js';
// TODO(gavinwill): Remove iron-dropdown dependency https://crbug.com/1082587.
import 'chrome://resources/polymer/v3_0/iron-dropdown/iron-dropdown.js';
......@@ -142,8 +140,8 @@ Polymer({
const paths = event.composedPath();
const dropdown =
/** @type {!IronDropdownElement} */ (this.$$('iron-dropdown'));
const dropdownInput =
/** @type {!CrInputElement} */ (this.$$('#dropdownInput'));
const destinationDropdown =
/** @type {!Element} */ (this.$$('#destination-dropdown'));
// Exit if path includes |dropdown| because event will be handled by
// onSelect_.
......@@ -151,7 +149,7 @@ Polymer({
return;
}
if (!paths.includes(dropdownInput) || dropdown.opened) {
if (!paths.includes(destinationDropdown) || dropdown.opened) {
this.closeDropdown_();
return;
}
......
chrome/test/data/webui/print_preview/destination_dropdown_cros_test.js
View file @ 18f718a1
......@@ -48,9 +48,18 @@ suite(destination_dropdown_cros_test.suiteName, function() {
return dropdown.shadowRoot.querySelectorAll('.list-item');
}
/** @param {?Element} element */
function pointerDown(element) {
element.dispatchEvent(new PointerEvent('pointerdown', {
function clickDropdown() {
dropdown.$$('#destination-dropdown')
.dispatchEvent(new PointerEvent('pointerdown', {
bubbles: true,
cancelable: true,
composed: true,
buttons: 1,
}));
}
function clickOutsideDropdown() {
document.body.dispatchEvent(new PointerEvent('pointerdown', {
bubbles: true,
cancelable: true,
composed: true,
......@@ -59,19 +68,20 @@ suite(destination_dropdown_cros_test.suiteName, function() {
}
function down() {
keyDownOn(dropdown.$$('#dropdownInput'), 'ArrowDown', [], 'ArrowDown');
keyDownOn(
dropdown.$$('#destination-dropdown'), 'ArrowDown', [], 'ArrowDown');
}
function up() {
keyDownOn(dropdown.$$('#dropdownInput'), 'ArrowUp', [], 'ArrowUp');
keyDownOn(dropdown.$$('#destination-dropdown'), 'ArrowUp', [], 'ArrowUp');
}
function enter() {
keyDownOn(dropdown.$$('#dropdownInput'), 'Enter', [], 'Enter');
keyDownOn(dropdown.$$('#destination-dropdown'), 'Enter', [], 'Enter');
}
function tab() {
keyDownOn(dropdown.$$('#dropdownInput'), 'Tab', [], 'Tab');
keyDownOn(dropdown.$$('#destination-dropdown'), 'Tab', [], 'Tab');
}
/** @return {?Element} */
......@@ -145,17 +155,17 @@ suite(destination_dropdown_cros_test.suiteName, function() {
dropdown.value = destinationOne;
const ironDropdown = dropdown.$$('iron-dropdown');
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertTrue(ironDropdown.opened);
getList()[0].click();
assertFalse(ironDropdown.opened);
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertTrue(ironDropdown.opened);
// Click outside dropdown to close the dropdown.
pointerDown(document.body);
clickOutsideDropdown();
assertFalse(ironDropdown.opened);
});
......@@ -165,7 +175,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
dropdown.value = destinationOne;
const ironDropdown = dropdown.$$('iron-dropdown');
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertTrue(ironDropdown.opened);
tab();
......@@ -178,7 +188,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
const destinationOne = createDestination('One', DestinationOrigin.CROS);
setItemList([destinationOne]);
dropdown.value = destinationOne;
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertEquals('One', getHighlightedElementText());
down();
......@@ -255,7 +265,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
createDestination('Three', DestinationOrigin.CROS)
]);
dropdown.value = destinationOne;
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
move(getList()[1], {x: 0, y: 0}, {x: 0, y: 0}, 1);
assertEquals('Two', getHighlightedElementText());
......@@ -278,11 +288,11 @@ suite(destination_dropdown_cros_test.suiteName, function() {
dropdown.value = destinationOne;
dropdown.disabled = true;
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertFalse(dropdown.$$('iron-dropdown').opened);
dropdown.disabled = false;
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertTrue(dropdown.$$('iron-dropdown').opened);
});
......@@ -345,12 +355,12 @@ suite(destination_dropdown_cros_test.suiteName, function() {
]);
dropdown.value = destinationTwo;
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertEquals('Two', getHighlightedElementText());
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
dropdown.value = destinationThree;
pointerDown(dropdown.$$('#dropdownInput'));
clickDropdown();
assertEquals('Three', getHighlightedElementText());
});
});
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