Scanning: Show help text when scanners are not available

http://screen/6qQmdsFTNNFnfcv

Bug: 1059779
Test: browser_tests --gtest_filter=Scanning*
Change-Id: I3706aebdfbdfa18e495e114767984758c81c3086
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2521231
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825636}

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

@@ -47,6 +47,11 @@ export function scannerSelectTest() {
     assertTrue(!!throbber);
     assertFalse(throbber.hidden);
 
+    // Verify that scanner connection help text is not visible before load.
+    const helpLink = scannerSelect.$$('#scanHelp');
+    assertTrue(!!helpLink);
+    assertTrue(helpLink.hidden);
+
     const scannerArr = [
       createScanner(firstScannerId, firstScannerName),
       createScanner(secondScannerId, secondScannerName)
@@ -60,6 +65,7 @@ export function scannerSelectTest() {
     assertFalse(select.disabled);
     assertFalse(select.hidden);
     assertTrue(throbber.hidden);
+    assertTrue(helpLink.hidden);
     assertEquals(2, select.length);
     assertEquals(firstScannerName, select.options[0].textContent.trim());
     assertEquals(secondScannerName, select.options[1].textContent.trim());
@@ -92,10 +98,15 @@ export function scannerSelectTest() {
   test('noScanners', () => {
     const select = scannerSelect.$$('select');
     assertTrue(!!select);
+    const helpLink = scannerSelect.$$('#scanHelp');
+    assertTrue(!!helpLink);
 
     scannerSelect.loaded = true;
     flush();
 
+    // Verify that scanner connection help text is visible.
+    assertFalse(helpLink.hidden);
+
     // Verify the dropdown is disabled and displays the default option when no
     // scanners are available.
     assertEquals(1, select.length);

chromeos/chromeos_strings.grd

@@ -468,6 +468,12 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_SCANNER_DROPDOWN_LABEL" desc="The label for the dropdown that displays connected scanners.">
         Scanner
       </message>
+      <message name="IDS_SCANNING_APP_NO_SCANNERS_HELP_LINK_LABEL" desc="The help label link displayed below the scanner dropdown when no scanners are available.">
+        Learn more
+      </message>
+      <message name="IDS_SCANNING_APP_NO_SCANNERS_HELP_TEXT" desc="The help text displayed below the scanner dropdown when no scanners are available.">
+        Can't connect to scanners?
+      </message>
       <message name="IDS_SCANNING_APP_NO_SCANNERS_TEXT" desc="The text displayed in the scanner dropdown when no scanners are available.">
         No available scanners
       </message>

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_NO_SCANNERS_HELP_LINK_LABEL.png.sha1

+b41fec481f16698eabe7f1a1a997e68fd4d67b38
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_NO_SCANNERS_HELP_TEXT.png.sha1

+b41fec481f16698eabe7f1a1a997e68fd4d67b38
\ No newline at end of file

chromeos/components/scanning/resources/scanner_select.html

-<style include="throbber scanning-shared"></style>
+<style include="throbber scanning-shared">
+  #scanHelp {
+    color: var(--google-grey-700);
+    font-size: 10px;
+    padding-top: 8px;
+  }
+
+  #scanHelpLink {
+    color: var(--google-blue-600);
+    font-size: 10px;
+    text-decoration: none;
+  }
+</style>
 <scan-settings-section>
   <span id="scannerLabel" slot="label">[[i18n('scannerDropdownLabel')]]</span>
   <div slot="settings">
@@ -22,5 +34,10 @@
         </option>
       </template>
     </select>
+    <span id="scanHelp" hidden$="[[shouldHideScanHelpLink_(loaded, scanners)]]">
+      [[i18n('noScannersHelpText')]]
+      <!-- TODO(joonbug): Add href to the help link when available -->
+      <a id="scanHelpLink" href="#">[[i18n('noScannersHelpLinkLabel')]]</a>
+    </span>
   </div>
 </scan-settings-section>

chromeos/components/scanning/resources/scanner_select.js

@@ -66,4 +66,12 @@ Polymer({
   getTokenAsString_(scanner) {
     return tokenToString(scanner.id);
   },
+
+  /**
+   * Helper function to decide whether to hide the scanner connection help link.
+   * @protected
+   */
+  shouldHideScanHelpLink_() {
+    return !this.loaded || this.scanners.length !== 0;
+  }
 });

chromeos/components/scanning/scanning_ui.cc

@@ -59,6 +59,8 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"jpgOptionText", IDS_SCANNING_APP_JPG_OPTION_TEXT},
       {"moreSettings", IDS_SCANNING_APP_MORE_SETTINGS},
       {"myFilesSelectOption", IDS_SCANNING_APP_MY_FILES_SELECT_OPTION},
+      {"noScannersHelpLinkLabel", IDS_SCANNING_APP_NO_SCANNERS_HELP_LINK_LABEL},
+      {"noScannersHelpText", IDS_SCANNING_APP_NO_SCANNERS_HELP_TEXT},
       {"noScannersText", IDS_SCANNING_APP_NO_SCANNERS_TEXT},
       {"pdfOptionText", IDS_SCANNING_APP_PDF_OPTION_TEXT},
       {"pngOptionText", IDS_SCANNING_APP_PNG_OPTION_TEXT},