scanning: Use hidden attribute to hide settings option

When the first option in the select is hidden, even though the option
won't be shown in the dropdown list, its text still appears as the
selected option in the dropdown. Moving the |noScannersText| option to
after the list of scanners allows the first scanner to replace
|noScannersText| as the selected value when loaded.

Bug: 1059779
Change-Id: Ic06363e55d082fe758a6ae04ddbe4e7206841f86
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2622894
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842614}

chrome/test/data/webui/chromeos/scanning/scanner_select_test.js

@@ -66,7 +66,9 @@ export function scannerSelectTest() {
     assertFalse(select.hidden);
     assertTrue(throbber.hidden);
     assertTrue(helpLink.hidden);
-    assertEquals(2, select.length);
+    // The expected options are the 2 scanners + the hidden 'No scanners'
+    // option.
+    assertEquals(3, select.length);
     assertEquals(firstScannerName, select.options[0].textContent.trim());
     assertEquals(secondScannerName, select.options[1].textContent.trim());
     assertEquals(tokenToString(firstScannerId), select.value);

chrome/test/data/webui/chromeos/scanning/source_select_test.js

@@ -48,11 +48,12 @@ export function sourceSelectTest() {
   });
 
   test('initializeSourceSelect', () => {
-    // Before options are added, the dropdown should be enabled and empty.
+    // Before options are added, the dropdown should be enabled and display the
+    // default option.
     const select = sourceSelect.$$('select');
     assertTrue(!!select);
     assertFalse(select.disabled);
-    assertEquals(0, select.length);
+    assertEquals(1, select.length);
 
     const firstSource =
         createScannerSource(SourceType.ADF_SIMPLEX, 'adf simplex', pageSizes);
@@ -63,8 +64,9 @@ export function sourceSelectTest() {
     flush();
 
     // Verify that adding sources results in the dropdown displaying the correct
-    // options.
-    assertEquals(2, select.length);
+    // options. The expected options are simplex, flatbed, and the hidden
+    // default option.
+    assertEquals(3, select.length);
     assertEquals(
         getSourceTypeString(firstSource.type),
         select.options[0].textContent.trim());

chromeos/components/scanning/resources/scanner_select.html

@@ -20,18 +20,14 @@
     <select id="scannerSelect" class="md-select"
         value="{{selectedScannerId::change}}" hidden$="[[!loaded]]"
         disabled="[[disabled]]" aria-labelledby="scannerLabel">
-      <!-- TODO(jschettler): Figure out why hiding/disabling the option doesn't
-          remove it from the dropdown. -->
-      <template is="dom-if" if="[[!scanners.length]]" restamp>
-        <option value="">
-          [[i18n('noScannersText')]]
-        </option>
-      </template>
       <template is="dom-repeat" items="[[scanners]]" as="scanner">
         <option value="[[getTokenAsString_(scanner)]]">
           [[getScannerDisplayName_(scanner)]]
         </option>
       </template>
+      <option value="" hidden="[[scanners.length]]">
+        [[i18n('noScannersText')]]
+      </option>
     </select>
   </div>
   <div id="scanHelp" slot="error"

chromeos/components/scanning/resources/source_select.html

@@ -7,17 +7,15 @@
     <select id="sourceSelect" class="md-select"
         value="{{selectedSource::change}}" disabled="[[disabled]]"
         aria-labelledby="sourceLabel">
-      <template is="dom-if" if="[[!sources.length]]" restamp>
-        <option value="">
-          [[i18n('defaultSourceOptionText')]]
-        </option>
-      </template>
       <template is="dom-repeat" items="[[sources]]" as="source">
         <option value="[[source.name]]"
             selected$='[[isDefaultSource_(source.type)]]'>
           [[getSourceTypeString_(source.type)]]
         </option>
       </template>
+      <option value="" hidden="[[sources.length]]">
+        [[i18n('defaultSourceOptionText')]]
+      </option>
     </select>
   </div>
 </scan-settings-section>