Scanning: Add more settings expandable section

Screenshots:
 Expanded: http://shortn/_ozPsFShPLu
 Closed: http://shortn/_810zjzDQgC

Bug: 1059779
Test: browser_tests --gtest_filter=ScanningAppBrowserTest.All
Change-Id: Ia9ad13ae2e8baf09e4c0a42fb9bc2b2a9942e297
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2506392
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#823250}

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

@@ -189,6 +189,33 @@ suite('ScanningAppTest', () => {
     return fakeScanService_.whenCalled('getScanners');
   }
 
+  /**
+   * Returns the "More settings" button.
+   * @return {!CrButtonElement}
+   */
+  function getMoreSettingsButton() {
+    const button = scanningApp.$$('#moreSettingsButton');
+    assertTrue(!!button);
+    return button;
+  }
+
+  /**
+   * Clicks the "More settings" button.
+   * @return {!Promise}
+   */
+  function clickMoreSettingsButton() {
+    getMoreSettingsButton().click();
+    return flushTasks();
+  }
+
+  /**
+   * Returns whether the "More settings" section is expanded or not.
+   * @return {boolean}
+   */
+  function isSettingsOpen() {
+    return scanningApp.$.collapse.opened;
+  }
+
   test('Scan', () => {
     const firstScannerId = {high: 0, low: 1};
     const firstScannerName = 'Scanner 1';
@@ -311,6 +338,26 @@ suite('ScanningAppTest', () => {
       assertTrue(!!rightPanel);
     });
   });
+
+  test('MoreSettingsToggle', () => {
+    const scanners = [];
+    const capabilities = new Map();
+    return initializeScanningApp(scanners, capabilities)
+        .then(() => {
+          // Verify that expandable section is closed by default.
+          assertFalse(isSettingsOpen());
+          // Expand more settings section.
+          return clickMoreSettingsButton();
+        })
+        .then(() => {
+          assertTrue(isSettingsOpen());
+          // Close more settings section.
+          return clickMoreSettingsButton();
+        })
+        .then(() => {
+          assertFalse(isSettingsOpen());
+        });
+  });
 });
 
 suite('ScannerSelectTest', () => {

chromeos/chromeos_strings.grd

@@ -510,6 +510,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_SELECT_DIALOG_TITLE" desc="The text used as the title of the select dialog used for choosing the folder to save completed scans.">
         Select a folder to save to
       </message>
+      <message name="IDS_SCANNING_APP_MORE_SETTINGS" desc="The text displayed for the button that shows and hides additional settings.">
+        More settings
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_MORE_SETTINGS.png.sha1

+22d618a6641a48182075d332a045ff81cea071db
\ No newline at end of file

chromeos/components/scanning/resources/scanning_app.html

-<style include="cr-shared-style scanning-shared">
+<style include="cr-shared-style scanning-shared scanning-fonts">
+  #moreSettingsButton {
+    --ink-color: var(--menu-text-color);
+    --paper-ripple-opacity: 0;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: initial;
+    box-shadow: none;
+    color: var(--menu-text-color);
+    display: flex;
+    font-weight: unset;
+    height: unset;
+    margin: 18px 0px;
+    padding-inline: 0;
+    text-transform: none;
+    width: 289px;
+  }
+
+  #moreSettingsButton:focus {
+    outline: none;
+  }
+
+  #moreSettingsButton > iron-icon {
+    color: var(--scanning-chevron-icon-color);
+    font-size: var(--scanning-chevron-icon-font-size);
+  }
+
+  #moreSettingsButton > span {
+    flex: 1;
+  }
+
+  #more-settings-line-separator {
+    border-bottom: var(--cr-separator-line);
+    margin-bottom: 8px;
+    margin-top: 16px;
+    width: 289px;
+  }
+
   #scanningContainer {
     box-sizing: border-box;
     display: block;
@@ -38,17 +76,30 @@
       </scan-to-select>
       <file-type-select id="fileTypeSelect" settings-disabled="[[settingsDisabled_]]"
           selected-file-type="{{selectedFileType}}"></file-type-select>
-      <color-mode-select id="colorModeSelect"
-          color-modes="[[capabilities_.colorModes]]"
-          settings-disabled="[[settingsDisabled_]]"
-          selected-color-mode="{{selectedColorMode}}"></color-mode-select>
-      <page-size-select id="pageSizeSelect" page-sizes="[[selectedSourcePageSizes_]]"
-          settings-disabled="[[settingsDisabled_]]"
-          selected-page-size="{{selectedPageSize}}"></page-size-select>
-      <resolution-select id="resolutionSelect"
-          resolutions="[[capabilities_.resolutions]]"
-          settings-disabled="[[settingsDisabled_]]"
-          selected-resolution="{{selectedResolution}}"></resolution-select>
+      <div id="more-settings-line-separator"></div>
+      <cr-button id="moreSettingsButton" on-click="toggleClicked_"
+          aria-expanded$="[[opened]]">
+        <span>[[i18n('moreSettings')]]</span>
+        <iron-icon icon="[[getArrowIcon_(opened)]]">
+        </iron-icon>
+      </cr-button>
+      <iron-collapse id="collapse" opened="{{opened}}">
+        <color-mode-select id="colorModeSelect"
+            color-modes="[[capabilities_.colorModes]]"
+            settings-disabled="[[settingsDisabled_]]"
+            selected-color-mode="{{selectedColorMode}}">
+        </color-mode-select>
+        <page-size-select id="pageSizeSelect"
+            page-sizes="[[selectedSourcePageSizes_]]"
+            settings-disabled="[[settingsDisabled_]]"
+            selected-page-size="{{selectedPageSize}}">
+        </page-size-select>
+        <resolution-select id="resolutionSelect"
+            resolutions="[[capabilities_.resolutions]]"
+            settings-disabled="[[settingsDisabled_]]"
+            selected-resolution="{{selectedResolution}}">
+        </resolution-select>
+      </iron-collapse>
       <!-- TODO(jschettler): Replace button label with finalized i18n string. -->
       <cr-button id="scanButton" on-click="onScanClick_"
           disabled$="[[scanButtonDisabled_]]">

chromeos/components/scanning/resources/scanning_app.js

@@ -3,9 +3,12 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom-lite.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
+import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './file_path.mojom-lite.js';
 import './color_mode_select.js';
 import './file_type_select.js';
@@ -14,6 +17,7 @@ import './resolution_select.js';
 import './scan_preview.js';
 import './scan_to_select.js';
 import './scanner_select.js';
+import './scanning_fonts_css.js';
 import './scanning_shared_css.js';
 import './source_select.js';
 
@@ -267,4 +271,18 @@ Polymer({
     this.settingsDisabled_ = false;
     this.scanButtonDisabled_ = false;
   },
+
+  /** @private */
+  toggleClicked_() {
+    this.$.collapse.toggle();
+  },
+
+  /**
+   * @param {boolean} opened Whether the section is expanded or not.
+   * @return {string} Icon name.
+   * @private
+   */
+  getArrowIcon_(opened) {
+    return opened ? 'cr:expand-less' : 'cr:expand-more';
+  },
 });

chromeos/components/scanning/resources/scanning_fonts_css.html

 <template>
   <style>
     :host {
+      --scanning-more-settings-font-family: Roboto;
       --scanning-select-font-family: Roboto;
+
+      --scanning-chevron-icon-font-size: 20px;
+      --scanning-more-settings-font-size: 12px;
       --scanning-select-font-size: 13px;
 
+      --scanning-chevron-icon-color: var(--google-grey-700);
+      --scanning-more-settings-text-color: var(--google-grey-700);
       --scanning-select-text-color: var(--google-grey-900);
 
       --scanning-select-font: {

chromeos/components/scanning/scanning_ui.cc

@@ -53,6 +53,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"colorModeDropdownLabel", IDS_SCANNING_APP_COLOR_MODE_DROPDOWN_LABEL},
       {"fileTypeDropdownLabel", IDS_SCANNING_APP_FILE_TYPE_DROPDOWN_LABEL},
       {"jpgOptionText", IDS_SCANNING_APP_JPG_OPTION_TEXT},
+      {"moreSettings", IDS_SCANNING_APP_MORE_SETTINGS},
       {"myFilesSelectOption", IDS_SCANNING_APP_MY_FILES_SELECT_OPTION},
       {"noScannersText", IDS_SCANNING_APP_NO_SCANNERS_TEXT},
       {"pdfOptionText", IDS_SCANNING_APP_PDF_OPTION_TEXT},