Print Preview: Convert more files to class based syntax
- media_size_settings.js
- more_settings.js
- number_settings_section.js
Bug: 1206112
Change-Id: I19cf7aa586505fd2e187d135846fc921ca1b3424
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3123786
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#916498}
diff --git a/chrome/browser/resources/print_preview/print_preview.js b/chrome/browser/resources/print_preview/print_preview.js
index 213b162..012a890 100644
--- a/chrome/browser/resources/print_preview/print_preview.js
+++ b/chrome/browser/resources/print_preview/print_preview.js
@@ -63,6 +63,8 @@
export {PrintPreviewMarginControlElement} from './ui/margin_control.js';
export {PrintPreviewMarginControlContainerElement} from './ui/margin_control_container.js';
export {PrintPreviewMarginsSettingsElement} from './ui/margins_settings.js';
+export {PrintPreviewMediaSizeSettingsElement} from './ui/media_size_settings.js';
+export {PrintPreviewNumberSettingsSectionElement} from './ui/number_settings_section.js';
export {PDFPlugin, PluginProxy, PluginProxyImpl} from './ui/plugin_proxy.js';
export {PreviewAreaState} from './ui/preview_area.js';
export {SelectBehavior} from './ui/select_behavior.js';
diff --git a/chrome/browser/resources/print_preview/ui/media_size_settings.js b/chrome/browser/resources/print_preview/ui/media_size_settings.js
index 5b432c2..c899912 100644
--- a/chrome/browser/resources/print_preview/ui/media_size_settings.js
+++ b/chrome/browser/resources/print_preview/ui/media_size_settings.js
@@ -5,26 +5,43 @@
import './print_preview_shared_css.js';
import './settings_section.js';
-import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {SettingsBehavior} from './settings_behavior.js';
+import {SettingsBehavior, SettingsBehaviorInterface} from './settings_behavior.js';
import {SelectOption} from './settings_select.js';
-Polymer({
- is: 'print-preview-media-size-settings',
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {SettingsBehaviorInterface}
+ */
+const PrintPreviewMediaSizeSettingsElementBase =
+ mixinBehaviors([SettingsBehavior], PolymerElement);
- _template: html`{__html_template__}`,
+/** @polymer */
+export class PrintPreviewMediaSizeSettingsElement extends
+ PrintPreviewMediaSizeSettingsElementBase {
+ static get is() {
+ return 'print-preview-media-size-settings';
+ }
- behaviors: [SettingsBehavior],
+ static get template() {
+ return html`{__html_template__}`;
+ }
- properties: {
- capability: Object,
+ static get properties() {
+ return {
+ capability: Object,
- disabled: Boolean,
- },
+ disabled: Boolean,
+ };
+ }
- observers:
- ['onMediaSizeSettingChange_(settings.mediaSize.*, capability.option)'],
+ static get observers() {
+ return [
+ 'onMediaSizeSettingChange_(settings.mediaSize.*, capability.option)',
+ ];
+ }
/** @private */
onMediaSizeSettingChange_() {
@@ -35,7 +52,8 @@
for (const option of
/** @type {!Array<!SelectOption>} */ (this.capability.option)) {
if (JSON.stringify(option) === valueToSet) {
- this.$$('print-preview-settings-select').selectValue(valueToSet);
+ this.shadowRoot.querySelector('print-preview-settings-select')
+ .selectValue(valueToSet);
return;
}
}
@@ -43,5 +61,9 @@
const defaultOption = this.capability.option.find(o => !!o.is_default) ||
this.capability.option[0];
this.setSetting('mediaSize', defaultOption);
- },
-});
+ }
+}
+
+customElements.define(
+ PrintPreviewMediaSizeSettingsElement.is,
+ PrintPreviewMediaSizeSettingsElement);
diff --git a/chrome/browser/resources/print_preview/ui/more_settings.js b/chrome/browser/resources/print_preview/ui/more_settings.js
index b8bf9a2a..eb3facfb 100644
--- a/chrome/browser/resources/print_preview/ui/more_settings.js
+++ b/chrome/browser/resources/print_preview/ui/more_settings.js
@@ -8,32 +8,40 @@
import '../strings.m.js';
import {assert} from 'chrome://resources/js/assert.m.js';
-import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
-import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {Metrics, MetricsContext} from '../metrics.js';
-Polymer({
- is: 'print-preview-more-settings',
+/** @polymer */
+class PrintPreviewMoreSettingsElement extends PolymerElement {
+ static get is() {
+ return 'print-preview-more-settings';
+ }
- _template: html`{__html_template__}`,
+ static get template() {
+ return html`{__html_template__}`;
+ }
- behaviors: [I18nBehavior],
+ static get properties() {
+ return {
+ settingsExpandedByUser: {
+ type: Boolean,
+ notify: true,
+ },
- properties: {
- settingsExpandedByUser: {
- type: Boolean,
- notify: true,
- },
+ disabled: {
+ type: Boolean,
+ reflectToAttribute: true,
+ },
+ };
+ }
- disabled: {
- type: Boolean,
- reflectToAttribute: true,
- },
- },
+ constructor() {
+ super();
- /** @private {!MetricsContext} */
- metrics_: MetricsContext.printSettingsUi(),
+ /** @private {!MetricsContext} */
+ this.metrics_ = MetricsContext.printSettingsUi();
+ }
/**
* Toggles the expand button within the element being listened to.
@@ -59,5 +67,8 @@
this.settingsExpandedByUser ?
Metrics.PrintSettingsUiBucket.MORE_SETTINGS_CLICKED :
Metrics.PrintSettingsUiBucket.LESS_SETTINGS_CLICKED);
- },
-});
+ }
+}
+
+customElements.define(
+ PrintPreviewMoreSettingsElement.is, PrintPreviewMoreSettingsElement);
diff --git a/chrome/browser/resources/print_preview/ui/number_settings_section.js b/chrome/browser/resources/print_preview/ui/number_settings_section.js
index 889c755..ffd1f8e 100644
--- a/chrome/browser/resources/print_preview/ui/number_settings_section.js
+++ b/chrome/browser/resources/print_preview/ui/number_settings_section.js
@@ -7,77 +7,98 @@
import './print_preview_vars_css.js';
import './settings_section.js';
-import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {WebUIListenerBehavior, WebUIListenerBehaviorInterface} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
+import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {InputBehavior} from './input_behavior.js';
+import {InputBehavior, InputBehaviorInterface} from './input_behavior.js';
-Polymer({
- is: 'print-preview-number-settings-section',
+/**
+ * @constructor
+ * @extends {PolymerElement}
+ * @implements {InputBehaviorInterface}
+ * @implements {WebUIListenerBehaviorInterface}
+ */
+const PrintPreviewNumberSettingsSectionElementBase =
+ mixinBehaviors([InputBehavior, WebUIListenerBehavior], PolymerElement);
- _template: html`{__html_template__}`,
+/** @polymer */
+export class PrintPreviewNumberSettingsSectionElement extends
+ PrintPreviewNumberSettingsSectionElementBase {
+ static get is() {
+ return 'print-preview-number-settings-section';
+ }
- behaviors: [InputBehavior],
+ static get template() {
+ return html`{__html_template__}`;
+ }
- properties: {
- /** @private {string} */
- inputString_: {
- type: String,
- notify: true,
- observer: 'onInputChanged_',
- },
+ static get properties() {
+ return {
+ /** @private {string} */
+ inputString_: {
+ type: String,
+ notify: true,
+ observer: 'onInputStringChanged_',
+ },
- /** @type {boolean} */
- inputValid: {
- type: Boolean,
- notify: true,
- reflectToAttribute: true,
- value: true,
- },
+ /** @type {boolean} */
+ inputValid: {
+ type: Boolean,
+ notify: true,
+ reflectToAttribute: true,
+ value: true,
+ },
- /** @type {string} */
- currentValue: {
- type: String,
- notify: true,
- observer: 'onCurrentValueChanged_',
- },
+ /** @type {string} */
+ currentValue: {
+ type: String,
+ notify: true,
+ observer: 'onCurrentValueChanged_',
+ },
- defaultValue: String,
+ defaultValue: String,
- maxValue: Number,
+ maxValue: Number,
- minValue: Number,
+ minValue: Number,
- inputLabel: String,
+ inputLabel: String,
- inputAriaLabel: String,
+ inputAriaLabel: String,
- hintMessage: String,
+ hintMessage: String,
- disabled: Boolean,
+ disabled: Boolean,
- /** @private */
- errorMessage_: {
- type: String,
- computed: 'computeErrorMessage_(hintMessage, inputValid)',
- },
- },
+ /** @private */
+ errorMessage_: {
+ type: String,
+ computed: 'computeErrorMessage_(hintMessage, inputValid)',
+ },
- listeners: {
- 'input-change': 'onInputChange_',
- },
+ };
+ }
+
+ ready() {
+ super.ready();
+
+ this.addEventListener(
+ 'input-change',
+ e => this.onInputChangeEvent_(/** @type {!CustomEvent<string>} */ (e)));
+ }
/** @return {!CrInputElement} The cr-input field element for InputBehavior. */
getInput() {
return /** @type {!CrInputElement} */ (this.$.userValue);
- },
+ }
/**
* @param {!CustomEvent<string>} e Contains the new input value.
* @private
*/
- onInputChange_(e) {
+ onInputChangeEvent_(e) {
this.inputString_ = e.detail;
- },
+ }
/**
* @return {boolean} Whether the input should be disabled.
@@ -85,10 +106,11 @@
*/
getDisabled_() {
return this.disabled && this.inputValid;
- },
+ }
/**
* @param {!KeyboardEvent} e The keyboard event
+ * @private
*/
onKeydown_(e) {
if (['.', 'e', 'E', '-', '+'].includes(e.key)) {
@@ -99,7 +121,7 @@
if (e.key === 'Enter') {
this.onBlur_();
}
- },
+ }
/** @private */
onBlur_() {
@@ -109,19 +131,19 @@
if (this.$.userValue.value === '') {
this.$.userValue.value = this.defaultValue;
}
- },
+ }
/** @private */
- onInputChanged_() {
+ onInputStringChanged_() {
this.inputValid = this.computeValid_();
this.currentValue = this.inputString_;
- },
+ }
/** @private */
onCurrentValueChanged_() {
this.inputString_ = this.currentValue;
this.resetString();
- },
+ }
/**
* @return {boolean} Whether input value represented by inputString_ is
@@ -132,7 +154,7 @@
// Make sure value updates first, in case inputString_ was updated by JS.
this.$.userValue.value = this.inputString_;
return !this.$.userValue.invalid;
- },
+ }
/**
* @return {string}
@@ -140,5 +162,9 @@
*/
computeErrorMessage_() {
return this.inputValid ? '' : this.hintMessage;
- },
-});
+ }
+}
+
+customElements.define(
+ PrintPreviewNumberSettingsSectionElement.is,
+ PrintPreviewNumberSettingsSectionElement);
diff --git a/chrome/test/data/webui/print_preview/invalid_settings_browsertest.js b/chrome/test/data/webui/print_preview/invalid_settings_browsertest.js
index c273f0d..2c81c319 100644
--- a/chrome/test/data/webui/print_preview/invalid_settings_browsertest.js
+++ b/chrome/test/data/webui/print_preview/invalid_settings_browsertest.js
@@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-import {CloudPrintInterfaceEventType, CloudPrintInterfaceImpl, Destination, DestinationConnectionStatus, DestinationOrigin, DestinationStore, DestinationType, LocalDestinationInfo, makeRecentDestination, MeasurementSystemUnitType, NativeInitialSettings, NativeLayer, NativeLayerImpl, PluginProxyImpl, PrintPreviewAppElement, PrintPreviewDestinationSettingsElement, PrintPreviewLayoutSettingsElement, ScalingType, State, whenReady} from 'chrome://print/print_preview.js';
+import {CloudPrintInterfaceEventType, CloudPrintInterfaceImpl, Destination, DestinationConnectionStatus, DestinationOrigin, DestinationStore, DestinationType, LocalDestinationInfo, makeRecentDestination, MeasurementSystemUnitType, NativeInitialSettings, NativeLayer, NativeLayerImpl, PluginProxyImpl, PrintPreviewAppElement, PrintPreviewDestinationSettingsElement, PrintPreviewLayoutSettingsElement, PrintPreviewNumberSettingsSectionElement, ScalingType, State, whenReady} from 'chrome://print/print_preview.js';
import {assert} from 'chrome://resources/js/assert.m.js';
import {isWindows} from 'chrome://resources/js/cr.m.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
@@ -352,7 +352,8 @@
assertEquals(State.ERROR, page.state);
assertTrue(
layoutSettings.shadowRoot.querySelector('select').disabled);
- assertTrue(scalingSettings.$$('cr-input').disabled);
+ assertTrue(scalingSettings.shadowRoot.querySelector('cr-input')
+ .disabled);
// The destination select dropdown should be enabled, so that the
// user can select a new printer.
@@ -377,7 +378,8 @@
// Settings sections are now active.
assertFalse(
layoutSettings.shadowRoot.querySelector('select').disabled);
- assertFalse(scalingSettings.$$('cr-input').disabled);
+ assertFalse(scalingSettings.shadowRoot.querySelector('cr-input')
+ .disabled);
// The destination select dropdown should still be enabled.
assertFalse(destinationSettings.shadowRoot
diff --git a/chrome/test/data/webui/print_preview/media_size_settings_test.js b/chrome/test/data/webui/print_preview/media_size_settings_test.js
index 49fbdfa5..38bcc17 100644
--- a/chrome/test/data/webui/print_preview/media_size_settings_test.js
+++ b/chrome/test/data/webui/print_preview/media_size_settings_test.js
@@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-import {PrintPreviewModelElement, SelectOption} from 'chrome://print/print_preview.js';
+import {PrintPreviewMediaSizeSettingsElement, PrintPreviewModelElement, SelectOption} from 'chrome://print/print_preview.js';
import {assert} from 'chrome://resources/js/assert.m.js';
import {assertDeepEquals, assertEquals, assertFalse} from '../chai_assert.js';
@@ -35,7 +35,8 @@
});
test('settings select', function() {
- const settingsSelect = mediaSizeSection.$$('print-preview-settings-select');
+ const settingsSelect = mediaSizeSection.shadowRoot.querySelector(
+ 'print-preview-settings-select');
assertFalse(settingsSelect.disabled);
assertEquals(mediaSizeCapability, settingsSelect.capability);
assertEquals('mediaSize', settingsSelect.settingName);
@@ -46,7 +47,8 @@
const squareOption = mediaSizeCapability.option[1];
// Default is letter
- const settingsSelect = mediaSizeSection.$$('print-preview-settings-select');
+ const settingsSelect = mediaSizeSection.shadowRoot.querySelector(
+ 'print-preview-settings-select');
assertDeepEquals(letterOption, JSON.parse(settingsSelect.selectedValue));
assertDeepEquals(
letterOption, mediaSizeSection.getSettingValue('mediaSize'));
diff --git a/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.js b/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.js
index 4d44058..7e084b1 100644
--- a/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.js
+++ b/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.js
@@ -2,10 +2,12 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-import 'chrome://print/print_preview.js';
+import {PrintPreviewNumberSettingsSectionElement} from 'chrome://print/print_preview.js';
import {assert} from 'chrome://resources/js/assert.m.js';
import {triggerInputEvent} from 'chrome://test/print_preview/print_preview_test_utils.js';
+import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
+
window.number_settings_section_interactive_test = {};
number_settings_section_interactive_test.suiteName =
'NumberSettingsSectionInteractiveTest';
@@ -20,15 +22,14 @@
/** @override */
setup(function() {
- PolymerTest.clearBody();
-
document.body.innerHTML = `
<print-preview-number-settings-section id="numberSettings"
min-value="1" max-value="100" default-value="50"
current-value="10" hint-message="incorrect value entered"
input-valid>
</print-preview-number-settings-section>`;
- numberSettings = document.querySelector('#numberSettings');
+ numberSettings = /** @type {!PrintPreviewNumberSettingsSectionElement} */ (
+ document.querySelector('#numberSettings'));
});
// Verifies that blurring the input will reset it to the default if it is
