PrintPreview: Migrate to Lit, part 8.
In this part migrating
- ui/number_settings_section.ts
- ui/print_preview_search_box.ts
Bug: 410607166
Change-Id: Iac17e1f6c5ea9a38c61a7c93dc368fae842c1b94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6485470
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1453029}
diff --git a/chrome/browser/resources/print_preview/BUILD.gn b/chrome/browser/resources/print_preview/BUILD.gn
index 3580e61..fb6a80c 100644
--- a/chrome/browser/resources/print_preview/BUILD.gn
+++ b/chrome/browser/resources/print_preview/BUILD.gn
@@ -98,7 +98,9 @@
"ui/link_container.css",
"ui/media_size_settings.css",
"ui/more_settings.css",
+ "ui/number_settings_section.css",
"ui/pages_settings.css",
+ "ui/print_preview_search_box.css",
"ui/print_preview_shared.css",
"ui/print_preview_shared_lit.css",
"ui/print_preview_vars.css",
diff --git a/chrome/browser/resources/print_preview/ui/number_settings_section.css b/chrome/browser/resources/print_preview/ui/number_settings_section.css
new file mode 100644
index 0000000..aed0127
--- /dev/null
+++ b/chrome/browser/resources/print_preview/ui/number_settings_section.css
@@ -0,0 +1,42 @@
+/* Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=./print_preview_shared_lit.css.js
+ * #import=./print_preview_vars.css.js
+ * #scheme=relative
+ * #include=print-preview-shared-lit
+ * #css_wrapper_metadata_end */
+
+:host {
+ /* Width = 3 digits + space + cr-input-padding-end/start */
+ --cr-input-width: calc(4em + 16px);
+}
+
+#sectionTitle {
+ align-self: baseline;
+}
+
+cr-input {
+ margin-inline-end: 16px;
+ min-height: var(--print-preview-row-height);
+ overflow: hidden;
+}
+
+.input-wrapper {
+ align-items: center;
+ display: flex;
+}
+
+:host([input-valid]) cr-input {
+ --cr-input-error-display: none;
+}
+
+span[slot=suffix] {
+ max-width: calc(100% - 5em);
+ min-height: var(--print-preview-row-height);
+ overflow: hidden;
+ word-wrap: break-word;
+}
diff --git a/chrome/browser/resources/print_preview/ui/number_settings_section.html b/chrome/browser/resources/print_preview/ui/number_settings_section.html
index b8c68352..5b5a856 100644
--- a/chrome/browser/resources/print_preview/ui/number_settings_section.html
+++ b/chrome/browser/resources/print_preview/ui/number_settings_section.html
@@ -1,44 +1,12 @@
-<style include="print-preview-shared">
- :host {
- /* Width = 3 digits + space + cr-input-padding-end/start */
- --cr-input-width: calc(4em + 16px);
- }
-
- #sectionTitle {
- align-self: baseline;
- }
-
- cr-input {
- margin-inline-end: 16px;
- min-height: var(--print-preview-row-height);
- overflow: hidden;
- }
-
- .input-wrapper {
- align-items: center;
- display: flex;
- }
-
- :host([input-valid]) cr-input {
- --cr-input-error-display: none;
- }
-
- span[slot=suffix] {
- max-width: calc(100% - 5em);
- min-height: var(--print-preview-row-height);
- overflow: hidden;
- word-wrap: break-word;
- }
-</style>
<print-preview-settings-section>
- <span slot="title" id="sectionTitle">[[inputLabel]]</span>
+ <span slot="title" id="sectionTitle">${this.inputLabel}</span>
<div slot="controls" id="controls">
<span class="input-wrapper">
<cr-input id="userValue" type="number" class="stroked"
- max="[[maxValue]]" min="[[minValue]]" data-timeout-delay="250"
- disabled$="[[getDisabled_(disabled)]]" on-keydown="onKeydown_"
- on-blur="onBlur_" aria-label="[[inputAriaLabel]]"
- error-message="[[errorMessage_]]" auto-validate>
+ max="${this.maxValue}" min="${this.minValue}" data-timeout-delay="250"
+ ?disabled="${this.getDisabled_()}" @keydown="${this.onKeydown_}"
+ @blur="${this.onBlur_}" aria-label="${this.inputAriaLabel}"
+ error-message="${this.errorMessage_}" auto-validate>
<span slot="suffix">
<slot name="opt-inside-content"></slot>
</span>
diff --git a/chrome/browser/resources/print_preview/ui/number_settings_section.ts b/chrome/browser/resources/print_preview/ui/number_settings_section.ts
index b8bfd2d3c..0006379c 100644
--- a/chrome/browser/resources/print_preview/ui/number_settings_section.ts
+++ b/chrome/browser/resources/print_preview/ui/number_settings_section.ts
@@ -3,16 +3,16 @@
// found in the LICENSE file.
import 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import './print_preview_shared.css.js';
-import './print_preview_vars.css.js';
import './settings_section.js';
import type {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import {WebUiListenerMixin} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
-import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {WebUiListenerMixinLit} from 'chrome://resources/cr_elements/web_ui_listener_mixin_lit.js';
+import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';
+import type {PropertyValues} from 'chrome://resources/lit/v3_0/lit.rollup.js';
-import {InputMixin} from './input_mixin.js';
-import {getTemplate} from './number_settings_section.html.js';
+import {InputMixinLit} from './input_mixin_lit.js';
+import {getCss} from './number_settings_section.css.js';
+import {getHtml} from './number_settings_section.html.js';
export interface PrintPreviewNumberSettingsSectionElement {
$: {
@@ -21,7 +21,7 @@
}
const PrintPreviewNumberSettingsSectionElementBase =
- WebUiListenerMixin(InputMixin(PolymerElement));
+ WebUiListenerMixinLit(InputMixinLit(CrLitElement));
export class PrintPreviewNumberSettingsSectionElement extends
PrintPreviewNumberSettingsSectionElementBase {
@@ -29,63 +29,70 @@
return 'print-preview-number-settings-section';
}
- static get template() {
- return getTemplate();
+ static override get styles() {
+ return getCss();
}
- static get properties() {
+ override render() {
+ return getHtml.bind(this)();
+ }
+
+ static override get properties() {
return {
inputValid: {
type: Boolean,
notify: true,
- reflectToAttribute: true,
- value: true,
+ reflect: true,
},
currentValue: {
type: String,
notify: true,
- observer: 'onCurrentValueChanged_',
},
- defaultValue: String,
-
- maxValue: Number,
-
- minValue: Number,
-
- inputLabel: String,
-
- inputAriaLabel: String,
-
- hintMessage: String,
-
- disabled: Boolean,
-
- errorMessage_: {
- type: String,
- computed: 'computeErrorMessage_(hintMessage, inputValid)',
- },
+ defaultValue: {type: String},
+ maxValue: {type: Number},
+ minValue: {type: Number},
+ inputLabel: {type: String},
+ inputAriaLabel: {type: String},
+ hintMessage: {type: String},
+ disabled: {type: Boolean},
+ errorMessage_: {type: String},
};
}
- declare currentValue: string;
- declare defaultValue: string;
- declare disabled: boolean;
- declare hintMessage: string;
- declare inputAriaLabel: string;
- declare inputLabel: string;
- declare inputValid: boolean;
- declare minValue: number;
- declare maxValue: number;
- declare private errorMessage_: string;
+ accessor currentValue: string;
+ accessor defaultValue: string;
+ accessor disabled: boolean;
+ accessor hintMessage: string;
+ accessor inputAriaLabel: string;
+ accessor inputLabel: string;
+ accessor inputValid: boolean = true;
+ accessor minValue: number;
+ accessor maxValue: number;
+ protected accessor errorMessage_: string;
- override ready() {
- super.ready();
-
+ override firstUpdated() {
this.addEventListener('input-change', e => this.onInputChangeEvent_(e));
}
+ override willUpdate(changedProperties: PropertyValues<this>) {
+ super.willUpdate(changedProperties);
+
+ if (changedProperties.has('hintMessage') ||
+ changedProperties.has('inputValid')) {
+ this.errorMessage_ = this.inputValid ? '' : this.hintMessage;
+ }
+ }
+
+ override updated(changedProperties: PropertyValues<this>) {
+ super.updated(changedProperties);
+
+ if (changedProperties.has('currentValue')) {
+ this.onCurrentValueChanged_();
+ }
+ }
+
/** @return The cr-input field element for InputBehavior. */
override getInput() {
return this.$.userValue;
@@ -108,11 +115,11 @@
/**
* @return Whether the input should be disabled.
*/
- private getDisabled_(): boolean {
+ protected getDisabled_(): boolean {
return this.disabled && this.inputValid;
}
- private onKeydown_(e: KeyboardEvent) {
+ protected onKeydown_(e: KeyboardEvent) {
if (['.', 'e', 'E', '-', '+'].includes(e.key)) {
e.preventDefault();
return;
@@ -123,7 +130,7 @@
}
}
- private onBlur_() {
+ protected onBlur_() {
if (this.currentValue === '') {
this.currentValue = this.defaultValue;
this.inputValid = this.$.userValue.validate();
@@ -140,12 +147,11 @@
}
this.resetString();
}
-
- private computeErrorMessage_(): string {
- return this.inputValid ? '' : this.hintMessage;
- }
}
+export type NumberSettingsSectionElement =
+ PrintPreviewNumberSettingsSectionElement;
+
declare global {
interface HTMLElementTagNameMap {
'print-preview-number-settings-section':
diff --git a/chrome/browser/resources/print_preview/ui/print_preview_search_box.css b/chrome/browser/resources/print_preview/ui/print_preview_search_box.css
new file mode 100644
index 0000000..c8989d4c
--- /dev/null
+++ b/chrome/browser/resources/print_preview/ui/print_preview_search_box.css
@@ -0,0 +1,61 @@
+/* Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=./print_preview_shared_lit.css.js
+ * #import=chrome://resources/cr_elements/cr_input/cr_input_style_lit.css.js
+ * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
+ * #scheme=relative
+ * #include=print-preview-shared-lit cr-input-style-lit
+ * #css_wrapper_metadata_end */
+
+:host {
+ display: flex;
+ --cr-input-error-display: none;
+}
+
+cr-input::part(row-container) {
+ min-height: 32px;
+}
+
+#icon,
+#clearSearch {
+ margin-inline-end: 0;
+ margin-inline-start: 0;
+}
+
+#icon {
+ height: var(--search-icon-size);
+ width: var(--search-icon-size);
+}
+
+#clearSearch {
+ --clear-icon-size: 28px;
+ --cr-icon-button-size: var(--clear-icon-size);
+ --cr-icon-button-icon-size: 20px;
+ height: var(--clear-icon-size);
+ position: absolute;
+ right: 0;
+ width: var(--clear-icon-size);
+ /* Necessary to be above the '#hover-layer' in cr-input. */
+ z-index: 1;
+}
+
+:host-context([dir=rtl]) #clearSearch {
+ left: 0;
+ right: auto;
+}
+
+:host([has-search-text]) cr-input {
+ --cr-input-padding-end: 24px;
+}
+
+.search-box-input {
+ width: 100%;
+}
+
+.search-box-input::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+}
diff --git a/chrome/browser/resources/print_preview/ui/print_preview_search_box.html b/chrome/browser/resources/print_preview/ui/print_preview_search_box.html
index 48bb905..ef5d7838 100644
--- a/chrome/browser/resources/print_preview/ui/print_preview_search_box.html
+++ b/chrome/browser/resources/print_preview/ui/print_preview_search_box.html
@@ -1,60 +1,10 @@
-<style include="print-preview-shared cr-input-style">
- :host {
- display: flex;
- --cr-input-error-display: none;
- }
-
- cr-input::part(row-container) {
- min-height: 32px;
- }
-
- #icon,
- #clearSearch {
- margin-inline-end: 0;
- margin-inline-start: 0;
- }
-
- #icon {
- height: var(--search-icon-size);
- width: var(--search-icon-size);
- }
-
- #clearSearch {
- --clear-icon-size: 28px;
- --cr-icon-button-size: var(--clear-icon-size);
- --cr-icon-button-icon-size: 20px;
- height: var(--clear-icon-size);
- position: absolute;
- right: 0;
- width: var(--clear-icon-size);
- /* Necessary to be above the '#hover-layer' in cr-input. */
- z-index: 1;
- }
-
- :host-context([dir=rtl]) #clearSearch {
- left: 0;
- right: auto;
- }
-
- :host([has-search-text]) cr-input {
- --cr-input-padding-end: 24px;
- }
-
- .search-box-input {
- width: 100%;
- }
-
- .search-box-input::-webkit-search-cancel-button {
- -webkit-appearance: none;
- }
-</style>
<cr-input type="search" id="searchInput" class="search-box-input"
- on-search="onSearchTermSearch" on-input="onSearchTermInput"
- aria-label$="[[label]]" placeholder="[[label]]"
- autofocus="[[autofocus]]" spellcheck="false">
+ @search="${this.onSearchTermSearch}" @input="${this.onSearchTermInput}"
+ aria-label="${this.label}" placeholder="${this.label}"
+ autofocus="${this.autofocus}" spellcheck="false">
<div slot="inline-prefix" id="icon" class="cr-icon icon-search" alt=""></div>
<cr-icon-button id="clearSearch" class="icon-cancel"
- hidden$="[[!hasSearchText]]" slot="suffix" on-click="onClearClick_"
- title="$i18n{clearSearch}">
+ ?hidden="${!this.hasSearchText}" slot="suffix"
+ @click="${this.onClearClick_}" title="$i18n{clearSearch}">
</cr-icon-button>
</cr-input>
diff --git a/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts b/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts
index 3b531c7..701697fab 100644
--- a/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts
+++ b/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts
@@ -3,18 +3,17 @@
// found in the LICENSE file.
import 'chrome://resources/cr_elements/cr_icons.css.js';
-import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
import 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import './print_preview_shared.css.js';
import type {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import {CrSearchFieldMixin} from 'chrome://resources/cr_elements/cr_search_field/cr_search_field_mixin.js';
-import {WebUiListenerMixin} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
+import {CrSearchFieldMixinLit} from 'chrome://resources/cr_elements/cr_search_field/cr_search_field_mixin_lit.js';
+import {WebUiListenerMixinLit} from 'chrome://resources/cr_elements/web_ui_listener_mixin_lit.js';
import {stripDiacritics} from 'chrome://resources/js/search_highlight_utils.js';
-import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';
-import {getTemplate} from './print_preview_search_box.html.js';
+import {getCss} from './print_preview_search_box.css.js';
+import {getHtml} from './print_preview_search_box.html.js';
declare global {
interface HTMLElementEventMap {
@@ -31,7 +30,7 @@
}
const PrintPreviewSearchBoxElementBase =
- CrSearchFieldMixin(WebUiListenerMixin(PolymerElement));
+ CrSearchFieldMixinLit(WebUiListenerMixinLit(CrLitElement));
export class PrintPreviewSearchBoxElement extends
PrintPreviewSearchBoxElementBase {
@@ -39,13 +38,17 @@
return 'print-preview-search-box';
}
- static get template() {
- return getTemplate();
+ static override get styles() {
+ return getCss();
}
- static get properties() {
+ override render() {
+ return getHtml.bind(this)();
+ }
+
+ static override get properties() {
return {
- autofocus: Boolean,
+ autofocus: {type: Boolean},
searchQuery: {
type: Object,
@@ -54,13 +57,11 @@
};
}
- declare autofocus: boolean;
- declare searchQuery: RegExp|null;
+ override accessor autofocus: boolean;
+ accessor searchQuery: RegExp|null;
private lastQuery_: string = '';
- override ready() {
- super.ready();
-
+ override firstUpdated() {
this.addEventListener('search-changed', e => this.onSearchChanged_(e));
}
@@ -84,7 +85,7 @@
safeQuery.length > 0 ? new RegExp(`(${safeQuery})`, 'ig') : null;
}
- private onClearClick_() {
+ protected onClearClick_() {
this.setValue('');
this.$.searchInput.focus();
}
diff --git a/chrome/test/data/webui/print_preview/advanced_dialog_test.ts b/chrome/test/data/webui/print_preview/advanced_dialog_test.ts
index a6c1de7..bc33a2fe 100644
--- a/chrome/test/data/webui/print_preview/advanced_dialog_test.ts
+++ b/chrome/test/data/webui/print_preview/advanced_dialog_test.ts
@@ -8,7 +8,7 @@
import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
import {keyEventOn} from 'chrome://webui-test/keyboard_mock_interactions.js';
import {fakeDataBind} from 'chrome://webui-test/polymer_test_util.js';
-import {eventToPromise} from 'chrome://webui-test/test_util.js';
+import {eventToPromise, microtasksFinished} from 'chrome://webui-test/test_util.js';
import {getCddTemplateWithAdvancedSettings} from './print_preview_test_utils.js';
@@ -171,34 +171,36 @@
// Tests that the dialog correctly shows and hides settings based on the
// value of the search query.
- test(
- 'AdvancedSettingsFilter', function() {
- setupDialog(3);
- const searchBox = dialog.$.searchBox;
- const items = dialog.shadowRoot!.querySelectorAll(
- 'print-preview-advanced-settings-item');
- const noMatchHint = dialog.shadowRoot!.querySelector<HTMLElement>(
- '.no-settings-match-hint')!;
+ test('AdvancedSettingsFilter', async function() {
+ setupDialog(3);
+ const searchBox = dialog.$.searchBox;
+ const items = dialog.shadowRoot!.querySelectorAll(
+ 'print-preview-advanced-settings-item');
+ const noMatchHint = dialog.shadowRoot!.querySelector<HTMLElement>(
+ '.no-settings-match-hint')!;
- // Query is initialized to null. All items are shown and the hint is
- // hidden.
- items.forEach(item => assertFalse(item.hidden));
- assertTrue(noMatchHint.hidden);
+ // Query is initialized to null. All items are shown and the hint is
+ // hidden.
+ items.forEach(item => assertFalse(item.hidden));
+ assertTrue(noMatchHint.hidden);
- // Searching for Watermark should show only the watermark setting.
- searchBox.searchQuery = /(Watermark)/ig;
- items.forEach((item, index) => assertEquals(index !== 2, item.hidden));
- assertTrue(noMatchHint.hidden);
+ // Searching for Watermark should show only the watermark setting.
+ searchBox.searchQuery = /(Watermark)/ig;
+ await microtasksFinished();
+ items.forEach((item, index) => assertEquals(index !== 2, item.hidden));
+ assertTrue(noMatchHint.hidden);
- // Searching for A4 should show only the print area setting.
- searchBox.searchQuery = /(A4)/ig;
- items.forEach((item, index) => assertEquals(index !== 0, item.hidden));
- assertTrue(noMatchHint.hidden);
+ // Searching for A4 should show only the print area setting.
+ searchBox.searchQuery = /(A4)/ig;
+ await microtasksFinished();
+ items.forEach((item, index) => assertEquals(index !== 0, item.hidden));
+ assertTrue(noMatchHint.hidden);
- // Searching for WXYZ should show no settings and display the "no match"
- // hint.
- searchBox.searchQuery = /(WXYZ)/ig;
- items.forEach(item => assertTrue(item.hidden));
- assertFalse(noMatchHint.hidden);
- });
+ // Searching for WXYZ should show no settings and display the "no match"
+ // hint.
+ searchBox.searchQuery = /(WXYZ)/ig;
+ await microtasksFinished();
+ items.forEach(item => assertTrue(item.hidden));
+ assertFalse(noMatchHint.hidden);
+ });
});
diff --git a/chrome/test/data/webui/print_preview/key_event_test.ts b/chrome/test/data/webui/print_preview/key_event_test.ts
index bb714d6..7cf6762 100644
--- a/chrome/test/data/webui/print_preview/key_event_test.ts
+++ b/chrome/test/data/webui/print_preview/key_event_test.ts
@@ -71,7 +71,7 @@
keyEventOn(
page.shadowRoot!.querySelector('print-preview-sidebar')!.shadowRoot!
.querySelector('print-preview-copies-settings')!.shadowRoot
- .querySelector('print-preview-number-settings-section')!.shadowRoot!
+ .querySelector('print-preview-number-settings-section')!.shadowRoot
.querySelector('cr-input')!.inputElement,
'keydown', 0, [], 'Enter');
return whenPrintCalled;
diff --git a/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts b/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts
index f2fafb7..7a63458 100644
--- a/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts
+++ b/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts
@@ -7,6 +7,7 @@
import type {PrintPreviewNumberSettingsSectionElement} from 'chrome://print/print_preview.js';
import {getTrustedHTML} from 'chrome://print/print_preview.js';
import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {microtasksFinished} from 'chrome://webui-test/test_util.js';
import {triggerInputEvent} from './print_preview_test_utils.js';
@@ -30,7 +31,6 @@
// Initial value is 10.
const crInput = numberSettings.getInput();
const input = crInput.inputElement;
- await crInput.updateComplete;
assertEquals('10', input.value);
// Set something invalid in the input.
@@ -42,7 +42,7 @@
// Blurring the input does not clear it or clear the error if there
// is an explicit invalid value.
input.blur();
- await crInput.updateComplete;
+ await microtasksFinished();
assertEquals('0', input.value);
assertTrue(crInput.invalid);
@@ -55,7 +55,7 @@
// Blurring the input clears it to the default when it is empty.
input.blur();
- await crInput.updateComplete;
+ await microtasksFinished();
assertEquals('50', input.value);
assertFalse(crInput.invalid);
});
diff --git a/chrome/test/data/webui/print_preview/number_settings_section_test.ts b/chrome/test/data/webui/print_preview/number_settings_section_test.ts
index 1d9859dc..d6d87381 100644
--- a/chrome/test/data/webui/print_preview/number_settings_section_test.ts
+++ b/chrome/test/data/webui/print_preview/number_settings_section_test.ts
@@ -30,62 +30,46 @@
});
// Test that key events that would result in invalid values are blocked.
- test(
- 'BlocksInvalidKeys', function() {
- const input = numberSettings.$.userValue;
- /**
- * @param key Key name for the keyboard event that will be fired.
- * @return Promise that resolves when 'keydown' is received by
- * |parentElement|.
- */
- function sendKeyDownAndReturnPromise(key: string):
- Promise<KeyboardEvent> {
- const whenKeyDown = eventToPromise('keydown', parentElement);
- keyEventOn(input.inputElement, 'keydown', 0, undefined, key);
- return whenKeyDown;
- }
+ test('BlocksInvalidKeys', async function() {
+ const input = numberSettings.$.userValue;
+ /**
+ * @param key Key name for the keyboard event that will be fired.
+ * @return Promise that resolves when 'keydown' is received by
+ * |parentElement|.
+ */
+ function sendKeyDownAndReturnPromise(key: string): Promise<KeyboardEvent> {
+ const whenKeyDown = eventToPromise('keydown', parentElement);
+ keyEventOn(input.inputElement, 'keydown', 0, undefined, key);
+ return whenKeyDown;
+ }
- return sendKeyDownAndReturnPromise('e')
- .then((e: KeyboardEvent) => {
- assertTrue(e.defaultPrevented);
- return sendKeyDownAndReturnPromise('.');
- })
- .then((e: KeyboardEvent) => {
- assertTrue(e.defaultPrevented);
- return sendKeyDownAndReturnPromise('-');
- })
- .then((e: KeyboardEvent) => {
- assertTrue(e.defaultPrevented);
- return sendKeyDownAndReturnPromise('E');
- })
- .then((e: KeyboardEvent) => {
- assertTrue(e.defaultPrevented);
- return sendKeyDownAndReturnPromise('+');
- })
- .then((e: KeyboardEvent) => {
- assertTrue(e.defaultPrevented);
- // Try a valid key.
- return sendKeyDownAndReturnPromise('1');
- })
- .then((e: KeyboardEvent) => {
- assertFalse(e.defaultPrevented);
- });
- });
+ let e = await sendKeyDownAndReturnPromise('e');
+ assertTrue(e.defaultPrevented);
+ e = await sendKeyDownAndReturnPromise('.');
+ assertTrue(e.defaultPrevented);
+ e = await sendKeyDownAndReturnPromise('-');
+ assertTrue(e.defaultPrevented);
+ e = await sendKeyDownAndReturnPromise('E');
+ assertTrue(e.defaultPrevented);
+ e = await sendKeyDownAndReturnPromise('+');
+ assertTrue(e.defaultPrevented);
+ // Try a valid key.
+ e = await sendKeyDownAndReturnPromise('1');
+ assertFalse(e.defaultPrevented);
+ });
- test(
- 'UpdatesErrorMessage', function() {
- const input = numberSettings.$.userValue;
+ test('UpdatesErrorMessage', async function() {
+ const input = numberSettings.$.userValue;
- // The error message should be empty initially, since the input is
- // valid.
- assertTrue(numberSettings.inputValid);
- assertEquals('', input.errorMessage);
+ // The error message should be empty initially, since the input is
+ // valid.
+ assertTrue(numberSettings.inputValid);
+ assertEquals('', input.errorMessage);
- // Enter an out of range value, and confirm that the error message is
- // updated correctly.
- return triggerInputEvent(input, '300', numberSettings).then(() => {
- assertFalse(numberSettings.inputValid);
- assertEquals('incorrect value entered', input.errorMessage);
- });
- });
+ // Enter an out of range value, and confirm that the error message is
+ // updated correctly.
+ await triggerInputEvent(input, '300', numberSettings);
+ assertFalse(numberSettings.inputValid);
+ assertEquals('incorrect value entered', input.errorMessage);
+ });
});
diff --git a/chrome/test/data/webui/print_preview/scaling_settings_test.ts b/chrome/test/data/webui/print_preview/scaling_settings_test.ts
index dc19429..841c6cf 100644
--- a/chrome/test/data/webui/print_preview/scaling_settings_test.ts
+++ b/chrome/test/data/webui/print_preview/scaling_settings_test.ts
@@ -7,6 +7,7 @@
import type {PrintPreviewModelElement, PrintPreviewScalingSettingsElement} from 'chrome://print/print_preview.js';
import {ScalingType} from 'chrome://print/print_preview.js';
import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {microtasksFinished} from 'chrome://webui-test/test_util.js';
import {selectOption, triggerInputEvent} from './print_preview_test_utils.js';
@@ -109,7 +110,7 @@
setDocumentPdf(true);
// Default is 100
- await scalingCrInput.updateComplete;
+ await microtasksFinished();
validateState('100', true, ScalingType.DEFAULT, ScalingType.DEFAULT, '100');
assertFalse(scalingSection.getSetting('scaling').setFromUi);
assertFalse(scalingSection.getSetting('scalingType').setFromUi);
@@ -146,7 +147,7 @@
// Select fit to page. Should clear the invalid value.
await selectOption(scalingSection, ScalingType.FIT_TO_PAGE.toString());
- await scalingCrInput.updateComplete;
+ await microtasksFinished();
validateState(
'105', true, ScalingType.CUSTOM, ScalingType.FIT_TO_PAGE, '105');
@@ -161,7 +162,7 @@
// Pick default scaling. This should clear the error.
await selectOption(scalingSection, ScalingType.DEFAULT.toString());
- await scalingCrInput.updateComplete;
+ await microtasksFinished();
validateState('105', true, ScalingType.DEFAULT, ScalingType.DEFAULT, '105');
// Custom scaling should set to last valid.
diff --git a/chrome/test/data/webui/print_preview/system_dialog_test.ts b/chrome/test/data/webui/print_preview/system_dialog_test.ts
index adf9dcd5..a1ae174 100644
--- a/chrome/test/data/webui/print_preview/system_dialog_test.ts
+++ b/chrome/test/data/webui/print_preview/system_dialog_test.ts
@@ -6,7 +6,7 @@
import {NativeLayerImpl, PluginProxyImpl, ScalingType, whenReady} from 'chrome://print/print_preview.js';
import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
import {waitBeforeNextRender} from 'chrome://webui-test/polymer_test_util.js';
-import {eventToPromise} from 'chrome://webui-test/test_util.js';
+import {eventToPromise, microtasksFinished} from 'chrome://webui-test/test_util.js';
import {NativeLayerStub} from './native_layer_stub.js';
import {getDefaultInitialSettings, selectOption} from './print_preview_test_utils.js';
@@ -81,7 +81,7 @@
});
});
- test('InvalidSettingsDisableLink', function() {
+ test('InvalidSettingsDisableLink', async function() {
assertFalse(linkContainer.disabled);
assertFalse(link.hidden);
@@ -95,35 +95,31 @@
let previewCalls = 0;
// Set scaling settings to custom.
- return selectOption(scalingSettings, ScalingType.CUSTOM.toString())
- .then(() => {
- previewCalls = nativeLayer.getCallCount('getPreview');
+ await selectOption(scalingSettings, ScalingType.CUSTOM.toString());
+ previewCalls = nativeLayer.getCallCount('getPreview');
- // Set an invalid input.
- const scalingSettingsInput =
- scalingSettings.shadowRoot
- .querySelector('print-preview-number-settings-section')!.$
- .userValue.inputElement;
- scalingSettingsInput.value = '0';
- scalingSettingsInput.dispatchEvent(
- new CustomEvent('input', {composed: true, bubbles: true}));
+ // Set an invalid input.
+ const scalingSettingsInput =
+ scalingSettings.shadowRoot
+ .querySelector('print-preview-number-settings-section')!.$.userValue
+ .inputElement;
+ scalingSettingsInput.value = '0';
+ scalingSettingsInput.dispatchEvent(
+ new CustomEvent('input', {composed: true, bubbles: true}));
- return eventToPromise('input-change', scalingSettings);
- })
- .then(() => {
- // Expect disabled print button
- const parentElement =
- sidebar.shadowRoot!.querySelector('print-preview-button-strip')!;
- const printButton =
- parentElement.shadowRoot.querySelector<CrButtonElement>(
- '.action-button')!;
- assertTrue(printButton.disabled);
- assertTrue(linkContainer.disabled);
- assertFalse(link.hidden);
- assertTrue(link.querySelector('cr-icon-button')!.disabled);
+ await eventToPromise('input-change', scalingSettings);
+ await microtasksFinished();
+ // Expect disabled print button
+ const parentElement =
+ sidebar.shadowRoot!.querySelector('print-preview-button-strip')!;
+ const printButton = parentElement.shadowRoot.querySelector<CrButtonElement>(
+ '.action-button')!;
+ assertTrue(printButton.disabled);
+ assertTrue(linkContainer.disabled);
+ assertFalse(link.hidden);
+ assertTrue(link.querySelector('cr-icon-button')!.disabled);
- // No new preview
- assertEquals(previewCalls, nativeLayer.getCallCount('getPreview'));
- });
+ // No new preview
+ assertEquals(previewCalls, nativeLayer.getCallCount('getPreview'));
});
});
