scanning: Enable scrolling for settings section

At smaller window sizes, parts of the settings section become hidden
from view. Allow users to scroll through the settings section when this
occurs.

Screenshot: http://shortn/_kQ7nVMKigV

Bug: 1059779
Change-Id: I1e118760c8dfa6a191163416028681b3644d6869
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2596170Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#838260}

chromeos/components/scanning/resources/BUILD.gn

@@ -128,6 +128,7 @@ js_library("scanning_app") {
     ":scanning_browser_proxy",
     ":source_select",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements:cr_container_shadow_behavior.m",
     "//ui/webui/resources/cr_elements/cr_toast:cr_toast.m",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]

chromeos/components/scanning/resources/scanning_app.html

@@ -76,13 +76,34 @@
     margin-inline-start: var(--right-panel-margin-inline-start);
     padding-inline-end: var(--right-panel-padding-inline-end);
     padding-inline-start: var(--right-panel-padding-inline-start);
-    width: var(--right-panel-width);
+    width: 352px;
+  }
+
+  /* Align with Print Preview and use lighter box-shadows compared to the
+   * default styling. */
+  #cr-container-shadow-top,
+  #cr-container-shadow-bottom {
+    box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, .2);
+    margin-inline-end: 40px;
+    margin-inline-start: 32px;
+  }
+
+  #settingsSection {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--panel-container-margin-top));
+  }
+
+  #container {
+    flex: 1;
+    max-height: 445px;
+    overflow: overlay;
   }
 
   .scan-button-container {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: 0;
+    margin-bottom: 32px;
     margin-inline-end: 40px;
     margin-inline-start: 32px;
     margin-top: 32px;
@@ -144,47 +165,51 @@
           progress-percent="[[progressPercent_]]"></scan-preview>
     </div>
     <div class="right-panel">
-      <template is="dom-if" if="[[!showDoneSection_]]">
+      <div id="settingsSection" hidden="[[showDoneSection_]]">
         <h1 id="appTitle">[[i18n('appTitle')]]</h1>
-        <scanner-select id="scannerSelect" scanners="[[scanners_]]"
-            loaded="[[scannersLoaded_]]"
-            disabled="[[settingsDisabled_]]"
-            selected-scanner-id="{{selectedScannerId}}"></scanner-select>
-        <source-select id="sourceSelect" sources="[[capabilities_.sources]]"
-            disabled="[[settingsDisabled_]]"
-            selected-source="{{selectedSource}}"></source-select>
-        <scan-to-select id="scanToSelect"
-            disabled="[[settingsDisabled_]]"
-            selected-file-path="{{selectedFilePath}}">
-        </scan-to-select>
-        <file-type-select id="fileTypeSelect"
-            disabled="[[settingsDisabled_]]"
-            selected-file-type="{{selectedFileType}}"></file-type-select>
-        <div id="more-settings-line-separator"></div>
-        <cr-button id="moreSettingsButton" on-click="toggleClicked_"
-            aria-expanded$="[[opened]]"
-            disabled="[[settingsDisabled_]]">
-          <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]]"
-              disabled="[[settingsDisabled_]]"
-              selected-color-mode="{{selectedColorMode}}">
-          </color-mode-select>
-          <page-size-select id="pageSizeSelect"
-              page-sizes="[[selectedSourcePageSizes_]]"
-              disabled="[[settingsDisabled_]]"
-              selected-page-size="{{selectedPageSize}}">
-          </page-size-select>
-          <resolution-select id="resolutionSelect"
-              resolutions="[[capabilities_.resolutions]]"
-              disabled="[[settingsDisabled_]]"
-              selected-resolution="{{selectedResolution}}">
-          </resolution-select>
-        </iron-collapse>
+        <div id="container" show-bottom-shadow>
+          <template is="dom-if" if="[[!showDoneSection_]]">
+            <scanner-select id="scannerSelect" scanners="[[scanners_]]"
+                loaded="[[scannersLoaded_]]"
+                disabled="[[settingsDisabled_]]"
+                selected-scanner-id="{{selectedScannerId}}"></scanner-select>
+            <source-select id="sourceSelect" sources="[[capabilities_.sources]]"
+                disabled="[[settingsDisabled_]]"
+                selected-source="{{selectedSource}}"></source-select>
+            <scan-to-select id="scanToSelect"
+                disabled="[[settingsDisabled_]]"
+                selected-file-path="{{selectedFilePath}}">
+            </scan-to-select>
+            <file-type-select id="fileTypeSelect"
+                disabled="[[settingsDisabled_]]"
+                selected-file-type="{{selectedFileType}}"></file-type-select>
+            <div id="more-settings-line-separator"></div>
+            <cr-button id="moreSettingsButton" on-click="toggleClicked_"
+                aria-expanded$="[[opened]]"
+                disabled="[[settingsDisabled_]]">
+              <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]]"
+                  disabled="[[settingsDisabled_]]"
+                  selected-color-mode="{{selectedColorMode}}">
+              </color-mode-select>
+              <page-size-select id="pageSizeSelect"
+                  page-sizes="[[selectedSourcePageSizes_]]"
+                  disabled="[[settingsDisabled_]]"
+                  selected-page-size="{{selectedPageSize}}">
+              </page-size-select>
+              <resolution-select id="resolutionSelect"
+                  resolutions="[[capabilities_.resolutions]]"
+                  disabled="[[settingsDisabled_]]"
+                  selected-resolution="{{selectedResolution}}">
+              </resolution-select>
+            </iron-collapse>
+          </template>
+        </div>
         <div class="scan-button-container">
           <cr-button id="scanButton" class="action-button" on-click="onScanClick_"
               disabled$="[[settingsDisabled_]]"
@@ -197,7 +222,7 @@
             [[i18n('cancelButtonText')]]
           </cr-button>
         </div>
-      </template>
+      </div>
       <template is="dom-if" if="[[showDoneSection_]]">
         <scan-done-section page-number="[[pageNumber_]]"
             on-done-click="onDoneClick_" on-file-not-found="onFileNotFound_"

chromeos/components/scanning/resources/scanning_app.js

@@ -25,6 +25,7 @@ import './scanning_fonts_css.js';
 import './scanning_shared_css.js';
 import './source_select.js';
 
+import {CrContainerShadowBehavior} from 'chrome://resources/cr_elements/cr_container_shadow_behavior.m.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {afterNextRender, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -49,7 +50,7 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  behaviors: [I18nBehavior],
+  behaviors: [CrContainerShadowBehavior, I18nBehavior],
 
   /**
    * Receives scan job notifications.

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -38,7 +38,6 @@
         --right-panel-margin-inline-start: 0;
         --right-panel-padding-inline-end: 8px;
         --right-panel-padding-inline-start: 8px;
-        --right-panel-width: 370px;
       }
     }
 
@@ -53,7 +52,6 @@
         --right-panel-margin-inline-start: 0;
         --right-panel-padding-inline-end: 16px;
         --right-panel-padding-inline-start: 16px;
-        --right-panel-width: 384px;
       }
     }
 
@@ -68,7 +66,6 @@
         --right-panel-margin-inline-start: 48px;
         --right-panel-padding-inline-end: 16px;
         --right-panel-padding-inline-start: 16px;
-        --right-panel-width: 384px;
       }
     }
 
@@ -83,7 +80,6 @@
         --right-panel-margin-inline-start: 60px;
         --right-panel-padding-inline-end: 32px;
         --right-panel-padding-inline-start: 32px;
-        --right-panel-width: 416px;
       }
     }
   </style>