Commit 733d058c authored by Jesse Schettler's avatar Jesse Schettler Committed by Commit Bot

scanning: Stop disabling dropdowns based on number of options

Dropdowns are currently disabled based on the app state and the number
of options they contain. Only disable dropdowns based on the app state.

Bug: 1059779
Change-Id: I6b817c0590d38091a26f639d434c9e975b2d90f1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2545688Reviewed-by: default avatarZentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828524}
parent c1aaeb55
...@@ -34,10 +34,10 @@ export function colorModeSelectTest() { ...@@ -34,10 +34,10 @@ export function colorModeSelectTest() {
}); });
test('initializeColorModeSelect', () => { test('initializeColorModeSelect', () => {
// Before options are added, the dropdown should be disabled and empty. // Before options are added, the dropdown should be enabled and empty.
const select = colorModeSelect.$$('select'); const select = colorModeSelect.$$('select');
assertTrue(!!select); assertTrue(!!select);
assertTrue(select.disabled); assertFalse(select.disabled);
assertEquals(0, select.length); assertEquals(0, select.length);
const firstColorMode = ColorMode.COLOR; const firstColorMode = ColorMode.COLOR;
...@@ -45,9 +45,8 @@ export function colorModeSelectTest() { ...@@ -45,9 +45,8 @@ export function colorModeSelectTest() {
colorModeSelect.colorModes = [firstColorMode, secondColorMode]; colorModeSelect.colorModes = [firstColorMode, secondColorMode];
flush(); flush();
// Verify that adding more than one color mode results in the dropdown // Verify that adding color modes results in the dropdown displaying the
// becoming enabled with the correct options. // correct options.
assertFalse(select.disabled);
assertEquals(2, select.length); assertEquals(2, select.length);
assertEquals( assertEquals(
getColorModeString(firstColorMode), getColorModeString(firstColorMode),
...@@ -58,27 +57,6 @@ export function colorModeSelectTest() { ...@@ -58,27 +57,6 @@ export function colorModeSelectTest() {
assertEquals(firstColorMode.toString(), select.value); assertEquals(firstColorMode.toString(), select.value);
}); });
test('colorModeSelectDisabled', () => {
const select = colorModeSelect.$$('select');
assertTrue(!!select);
let colorModeArr = [ColorMode.BLACK_AND_WHITE];
colorModeSelect.colorModes = colorModeArr;
flush();
// Verify the dropdown is disabled when there's only one option.
assertEquals(1, select.length);
assertTrue(select.disabled);
colorModeArr = colorModeArr.concat([ColorMode.GRAYSCALE]);
colorModeSelect.colorModes = colorModeArr;
flush();
// Verify the dropdown is enabled when there's more than one option.
assertEquals(2, select.length);
assertFalse(select.disabled);
});
test('colorModesSortedAlphabetically', () => { test('colorModesSortedAlphabetically', () => {
colorModeSelect.colorModes = colorModeSelect.colorModes =
[ColorMode.GRAYSCALE, ColorMode.BLACK_AND_WHITE, ColorMode.COLOR]; [ColorMode.GRAYSCALE, ColorMode.BLACK_AND_WHITE, ColorMode.COLOR];
......
...@@ -34,11 +34,11 @@ export function pageSizeSelectTest() { ...@@ -34,11 +34,11 @@ export function pageSizeSelectTest() {
}); });
test('initializePageSizeSelect', () => { test('initializePageSizeSelect', () => {
// Before options are added, the dropdown should be disabled and empty. // Before options are added, the dropdown should be enabled and empty.
const select = const select =
/** @type {!HTMLSelectElement} */ (pageSizeSelect.$$('select')); /** @type {!HTMLSelectElement} */ (pageSizeSelect.$$('select'));
assertTrue(!!select); assertTrue(!!select);
assertTrue(select.disabled); assertFalse(select.disabled);
assertEquals(0, select.length); assertEquals(0, select.length);
const firstPageSize = PageSize.A4; const firstPageSize = PageSize.A4;
...@@ -46,9 +46,8 @@ export function pageSizeSelectTest() { ...@@ -46,9 +46,8 @@ export function pageSizeSelectTest() {
pageSizeSelect.pageSizes = [firstPageSize, secondPageSize]; pageSizeSelect.pageSizes = [firstPageSize, secondPageSize];
flush(); flush();
// Verify that adding more than one page size results in the dropdown // Verify that adding page sizes results in the dropdown displaying the
// becoming enabled with the correct options. // correct options.
assertFalse(select.disabled);
assertEquals(2, select.length); assertEquals(2, select.length);
assertEquals( assertEquals(
getPageSizeString(firstPageSize), select.options[0].textContent.trim()); getPageSizeString(firstPageSize), select.options[0].textContent.trim());
...@@ -66,27 +65,6 @@ export function pageSizeSelectTest() { ...@@ -66,27 +65,6 @@ export function pageSizeSelectTest() {
}); });
}); });
test('pageSizeSelectDisabled', () => {
const select = pageSizeSelect.$$('select');
assertTrue(!!select);
let pageSizeArr = [PageSize.Letter];
pageSizeSelect.pageSizes = pageSizeArr;
flush();
// Verify the dropdown is disabled when there's only one option.
assertEquals(1, select.length);
assertTrue(select.disabled);
pageSizeArr = pageSizeArr.concat([PageSize.A4]);
pageSizeSelect.pageSizes = pageSizeArr;
flush();
// Verify the dropdown is enabled when there's more than one option.
assertEquals(2, select.length);
assertFalse(select.disabled);
});
test('pageSizesSortedCorrectly', () => { test('pageSizesSortedCorrectly', () => {
pageSizeSelect.pageSizes = [PageSize.Letter, PageSize.Max, PageSize.A4]; pageSizeSelect.pageSizes = [PageSize.Letter, PageSize.Max, PageSize.A4];
flush(); flush();
......
...@@ -27,11 +27,11 @@ export function resolutionSelectTest() { ...@@ -27,11 +27,11 @@ export function resolutionSelectTest() {
}); });
test('initializeResolutionSelect', () => { test('initializeResolutionSelect', () => {
// Before options are added, the dropdown should be disabled and empty. // Before options are added, the dropdown should be enabled and empty.
const select = const select =
/** @type {!HTMLSelectElement} */ (resolutionSelect.$$('select')); /** @type {!HTMLSelectElement} */ (resolutionSelect.$$('select'));
assertTrue(!!select); assertTrue(!!select);
assertTrue(select.disabled); assertFalse(select.disabled);
assertEquals(0, select.length); assertEquals(0, select.length);
const firstResolution = 75; const firstResolution = 75;
...@@ -39,9 +39,8 @@ export function resolutionSelectTest() { ...@@ -39,9 +39,8 @@ export function resolutionSelectTest() {
resolutionSelect.resolutions = [firstResolution, secondResolution]; resolutionSelect.resolutions = [firstResolution, secondResolution];
flush(); flush();
// Verify that adding more than one resolution results in the dropdown // Verify that adding resolutions results in the dropdown displaying the
// becoming enabled with the correct options. // correct options.
assertFalse(select.disabled);
assertEquals(2, select.length); assertEquals(2, select.length);
assertEquals( assertEquals(
secondResolution.toString() + ' dpi', secondResolution.toString() + ' dpi',
...@@ -60,27 +59,6 @@ export function resolutionSelectTest() { ...@@ -60,27 +59,6 @@ export function resolutionSelectTest() {
}); });
}); });
test('resolutionSelectDisabled', () => {
const select = resolutionSelect.$$('select');
assertTrue(!!select);
let resolutionArr = [75];
resolutionSelect.resolutions = resolutionArr;
flush();
// Verify the dropdown is disabled when there's only one option.
assertEquals(1, select.length);
assertTrue(select.disabled);
resolutionArr = resolutionArr.concat([150]);
resolutionSelect.resolutions = resolutionArr;
flush();
// Verify the dropdown is enabled when there's more than one option.
assertEquals(2, select.length);
assertFalse(select.disabled);
});
test('resolutionsSortedCorrectly', () => { test('resolutionsSortedCorrectly', () => {
resolutionSelect.resolutions = [150, 300, 75, 600, 1200, 200]; resolutionSelect.resolutions = [150, 300, 75, 600, 1200, 200];
flush(); flush();
......
...@@ -72,29 +72,6 @@ export function scannerSelectTest() { ...@@ -72,29 +72,6 @@ export function scannerSelectTest() {
assertEquals(tokenToString(firstScannerId), select.value); assertEquals(tokenToString(firstScannerId), select.value);
}); });
test('scannerSelectDisabled', () => {
const select = scannerSelect.$$('select');
assertTrue(!!select);
let scannerArr = [createScanner(firstScannerId, firstScannerName)];
scannerSelect.scanners = scannerArr;
scannerSelect.loaded = true;
flush();
// Verify the dropdown is disabled when there's only one option.
assertEquals(1, select.length);
assertTrue(select.disabled);
scannerArr =
scannerArr.concat([createScanner(secondScannerId, secondScannerName)]);
scannerSelect.scanners = scannerArr;
flush();
// Verify the dropdown is enabled when there's more than one option.
assertEquals(2, select.length);
assertFalse(select.disabled);
});
test('noScanners', () => { test('noScanners', () => {
const select = scannerSelect.$$('select'); const select = scannerSelect.$$('select');
assertTrue(!!select); assertTrue(!!select);
...@@ -107,11 +84,10 @@ export function scannerSelectTest() { ...@@ -107,11 +84,10 @@ export function scannerSelectTest() {
// Verify that scanner connection help text is visible. // Verify that scanner connection help text is visible.
assertFalse(helpLink.hidden); assertFalse(helpLink.hidden);
// Verify the dropdown is disabled and displays the default option when no // Verify the dropdown displays the default option when no scanners are
// scanners are available. // available.
assertEquals(1, select.length); assertEquals(1, select.length);
assertEquals('No available scanners', select.options[0].textContent.trim()); assertEquals('No available scanners', select.options[0].textContent.trim());
assertTrue(select.disabled);
}); });
test('scannersSortedAlphabetically', () => { test('scannersSortedAlphabetically', () => {
......
...@@ -48,10 +48,10 @@ export function sourceSelectTest() { ...@@ -48,10 +48,10 @@ export function sourceSelectTest() {
}); });
test('initializeSourceSelect', () => { test('initializeSourceSelect', () => {
// Before options are added, the dropdown should be disabled and empty. // Before options are added, the dropdown should be enabled and empty.
const select = sourceSelect.$$('select'); const select = sourceSelect.$$('select');
assertTrue(!!select); assertTrue(!!select);
assertTrue(select.disabled); assertFalse(select.disabled);
assertEquals(0, select.length); assertEquals(0, select.length);
const firstSource = const firstSource =
...@@ -62,9 +62,8 @@ export function sourceSelectTest() { ...@@ -62,9 +62,8 @@ export function sourceSelectTest() {
sourceSelect.sources = sourceArr; sourceSelect.sources = sourceArr;
flush(); flush();
// Verify that adding more than one source results in the dropdown becoming // Verify that adding sources results in the dropdown displaying the correct
// enabled with the correct options. // options.
assertFalse(select.disabled);
assertEquals(2, select.length); assertEquals(2, select.length);
assertEquals( assertEquals(
getSourceTypeString(firstSource.type), getSourceTypeString(firstSource.type),
...@@ -75,29 +74,6 @@ export function sourceSelectTest() { ...@@ -75,29 +74,6 @@ export function sourceSelectTest() {
assertEquals(secondSource.name, select.value); assertEquals(secondSource.name, select.value);
}); });
test('sourceSelectDisabled', () => {
const select = sourceSelect.$$('select');
assertTrue(!!select);
let sourceArr =
[createScannerSource(SourceType.FLATBED, 'flatbed', pageSizes)];
sourceSelect.sources = sourceArr;
flush();
// Verify the dropdown is disabled when there's only one option.
assertEquals(1, select.length);
assertTrue(select.disabled);
sourceArr = sourceArr.concat(
[createScannerSource(SourceType.ADF_DUPLEX, 'adf duplex', pageSizes)]);
sourceSelect.sources = sourceArr;
flush();
// Verify the dropdown is enabled when there's more than one option.
assertEquals(2, select.length);
assertFalse(select.disabled);
});
test('sourcesSortedAlphabetically', () => { test('sourcesSortedAlphabetically', () => {
const sources = [ const sources = [
createScannerSource(SourceType.FLATBED, 'C', pageSizes), createScannerSource(SourceType.FLATBED, 'C', pageSizes),
......
...@@ -40,9 +40,7 @@ Polymer({ ...@@ -40,9 +40,7 @@ Polymer({
}, },
}, },
observers: [ observers: ['onColorModesChange_(colorModes.*)'],
'onNumOptionsChange(colorModes.length)', 'onColorModesChange_(colorModes.*)'
],
/** /**
* @param {chromeos.scanning.mojom.ColorMode} mojoColorMode * @param {chromeos.scanning.mojom.ColorMode} mojoColorMode
......
...@@ -29,10 +29,4 @@ Polymer({ ...@@ -29,10 +29,4 @@ Polymer({
notify: true, notify: true,
}, },
}, },
/** @override */
created() {
// The dropdown always contains one option per FileType.
this.onNumOptionsChange(chromeos.scanning.mojom.FileType.MAX_VALUE + 1);
},
}); });
...@@ -40,9 +40,7 @@ Polymer({ ...@@ -40,9 +40,7 @@ Polymer({
}, },
}, },
observers: [ observers: ['onPageSizesChange_(pageSizes.*)'],
'onNumOptionsChange(pageSizes.length)', 'onPageSizesChange_(pageSizes.*)'
],
/** /**
* @param {!chromeos.scanning.mojom.PageSize} pageSize * @param {!chromeos.scanning.mojom.PageSize} pageSize
......
...@@ -40,10 +40,7 @@ Polymer({ ...@@ -40,10 +40,7 @@ Polymer({
}, },
}, },
observers: [ observers: ['onResolutionsChange_(resolutions.*)'],
'onNumOptionsChange(resolutions.length)',
'onResolutionsChange_(resolutions.*)'
],
/** /**
* @param {number} resolution * @param {number} resolution
......
...@@ -44,9 +44,6 @@ Polymer({ ...@@ -44,9 +44,6 @@ Polymer({
// Default option is 'My files'. // Default option is 'My files'.
this.displayText_ = this.i18n('myFilesSelectOption'); this.displayText_ = this.i18n('myFilesSelectOption');
// The dropdown always has 2 options.
this.onNumOptionsChange(2);
this.browserProxy_ = ScanningBrowserProxyImpl.getInstance(); this.browserProxy_ = ScanningBrowserProxyImpl.getInstance();
this.browserProxy_.initialize(); this.browserProxy_.initialize();
}, },
......
...@@ -44,8 +44,7 @@ Polymer({ ...@@ -44,8 +44,7 @@ Polymer({
loaded: Boolean, loaded: Boolean,
}, },
observers: observers: ['onScannersChange_(scanners.*)'],
['onNumOptionsChange(scanners.length)', 'onScannersChange_(scanners.*)'],
/** /**
* @param {!chromeos.scanning.mojom.Scanner} scanner * @param {!chromeos.scanning.mojom.Scanner} scanner
......
...@@ -88,17 +88,17 @@ ...@@ -88,17 +88,17 @@
<h1 id="appTitle">[[i18n('appTitle')]]</h1> <h1 id="appTitle">[[i18n('appTitle')]]</h1>
<scanner-select id="scannerSelect" scanners="[[scanners_]]" <scanner-select id="scannerSelect" scanners="[[scanners_]]"
loaded="[[scannersLoaded_]]" loaded="[[scannersLoaded_]]"
settings-disabled="[[settingsDisabled_]]" disabled="[[settingsDisabled_]]"
selected-scanner-id="{{selectedScannerId}}"></scanner-select> selected-scanner-id="{{selectedScannerId}}"></scanner-select>
<source-select id="sourceSelect" sources="[[capabilities_.sources]]" <source-select id="sourceSelect" sources="[[capabilities_.sources]]"
settings-disabled="[[settingsDisabled_]]" disabled="[[settingsDisabled_]]"
selected-source="{{selectedSource}}"></source-select> selected-source="{{selectedSource}}"></source-select>
<scan-to-select id="scanToSelect" <scan-to-select id="scanToSelect"
settings-disabled="[[settingsDisabled_]]" disabled="[[settingsDisabled_]]"
selected-file-path="{{selectedFilePath}}"> selected-file-path="{{selectedFilePath}}">
</scan-to-select> </scan-to-select>
<file-type-select id="fileTypeSelect" <file-type-select id="fileTypeSelect"
settings-disabled="[[settingsDisabled_]]" disabled="[[settingsDisabled_]]"
selected-file-type="{{selectedFileType}}"></file-type-select> selected-file-type="{{selectedFileType}}"></file-type-select>
<div id="more-settings-line-separator"></div> <div id="more-settings-line-separator"></div>
<cr-button id="moreSettingsButton" on-click="toggleClicked_" <cr-button id="moreSettingsButton" on-click="toggleClicked_"
...@@ -111,17 +111,17 @@ ...@@ -111,17 +111,17 @@
<iron-collapse id="collapse" opened="{{opened}}"> <iron-collapse id="collapse" opened="{{opened}}">
<color-mode-select id="colorModeSelect" <color-mode-select id="colorModeSelect"
color-modes="[[capabilities_.colorModes]]" color-modes="[[capabilities_.colorModes]]"
settings-disabled="[[settingsDisabled_]]" disabled="[[settingsDisabled_]]"
selected-color-mode="{{selectedColorMode}}"> selected-color-mode="{{selectedColorMode}}">
</color-mode-select> </color-mode-select>
<page-size-select id="pageSizeSelect" <page-size-select id="pageSizeSelect"
page-sizes="[[selectedSourcePageSizes_]]" page-sizes="[[selectedSourcePageSizes_]]"
settings-disabled="[[settingsDisabled_]]" disabled="[[settingsDisabled_]]"
selected-page-size="{{selectedPageSize}}"> selected-page-size="{{selectedPageSize}}">
</page-size-select> </page-size-select>
<resolution-select id="resolutionSelect" <resolution-select id="resolutionSelect"
resolutions="[[capabilities_.resolutions]]" resolutions="[[capabilities_.resolutions]]"
settings-disabled="[[settingsDisabled_]]" disabled="[[settingsDisabled_]]"
selected-resolution="{{selectedResolution}}"> selected-resolution="{{selectedResolution}}">
</resolution-select> </resolution-select>
</iron-collapse> </iron-collapse>
......
...@@ -4,9 +4,6 @@ ...@@ -4,9 +4,6 @@
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
/** @type {number} */
const REQUIRED_NUM_OPTIONS = 2;
/** /**
* Helper functions for custom elements that implement a scan setting using a * Helper functions for custom elements that implement a scan setting using a
* single select element. * single select element.
...@@ -14,48 +11,8 @@ const REQUIRED_NUM_OPTIONS = 2; ...@@ -14,48 +11,8 @@ const REQUIRED_NUM_OPTIONS = 2;
*/ */
export const SelectBehavior = { export const SelectBehavior = {
properties: { properties: {
/** Controls whether the select element is disabled. */ /** @type {boolean} */
disabled: { disabled: Boolean,
type: Boolean,
computed: 'computeDisabled_(numOptions_, settingsDisabled)',
},
/**
* Indicates whether all scan settings have been disabled by the parent
* element.
*/
settingsDisabled: Boolean,
/**
* The number of options in the select element.
* @type {number}
* @private
*/
numOptions_: {
type: Number,
value: 0,
},
},
/**
* Called by the custom element when the number of options in its select
* element changes.
* @param {number} numOptions
*/
onNumOptionsChange(numOptions) {
this.numOptions_ = numOptions;
},
/**
* Determines whether the select element should be disabled based on its
* number of options and whether settings are disabled.
* @param {number} numOptions
* @param {boolean} settingsDisabled
* @return {boolean}
* @private
*/
computeDisabled_(numOptions, settingsDisabled) {
return numOptions < REQUIRED_NUM_OPTIONS || settingsDisabled;
}, },
/** /**
......
...@@ -37,10 +37,7 @@ Polymer({ ...@@ -37,10 +37,7 @@ Polymer({
}, },
}, },
observers: [ observers: ['onSourcesChange_(sources.*)'],
'onNumOptionsChange(sources.length)',
'onSourcesChange_(sources.*)',
],
/** /**
* @param {chromeos.scanning.mojom.SourceType} mojoSourceType * @param {chromeos.scanning.mojom.SourceType} mojoSourceType
......
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