Scanning: App container styles

Screenshot: http://shortn/_mzhvW5izxD

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

chromeos/components/scanning/resources/scanning_app.html

-<h1 id="appTitle">[[i18n('appTitle')]]</h1>
-<scanner-select id="scannerSelect" scanners="[[scanners_]]" loaded="[[loaded_]]"
-    settings-disabled="[[settingsDisabled_]]"
-    selected-scanner-id="{{selectedScannerId}}"></scanner-select>
-<source-select id="sourceSelect" sources="[[capabilities_.sources]]"
-    settings-disabled="[[settingsDisabled_]]"
-    selected-source="{{selectedSource}}"></source-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>
-<!-- TODO(jschettler): Replace button label with finalized i18n string. -->
-<cr-button id="scanButton" on-click="onScanClick_"
-    disabled$="[[scanButtonDisabled_]]">
-  Scan
-</cr-button>
-<p id="statusText">[[statusText_]]</p>
+<style include="cr-shared-style scanning-shared">
+  #scanningContainer {
+    box-sizing: border-box;
+    display: block;
+    margin: 0 auto;
+    min-height: 480px;
+    min-width: 600px;
+    position: relative;
+    width: var(--container-width);
+  }
+</style>
+<div id="scanningContainer">
+  <h1 id="appTitle">[[i18n('appTitle')]]</h1>
+  <scanner-select id="scannerSelect" scanners="[[scanners_]]" loaded="[[loaded_]]"
+      settings-disabled="[[settingsDisabled_]]"
+      selected-scanner-id="{{selectedScannerId}}"></scanner-select>
+  <source-select id="sourceSelect" sources="[[capabilities_.sources]]"
+      settings-disabled="[[settingsDisabled_]]"
+      selected-source="{{selectedSource}}"></source-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>
+  <!-- TODO(jschettler): Replace button label with finalized i18n string. -->
+  <cr-button id="scanButton" on-click="onScanClick_"
+      disabled$="[[scanButtonDisabled_]]">
+    Scan
+  </cr-button>
+  <p id="statusText">[[statusText_]]</p>
+</div>

chromeos/components/scanning/resources/scanning_app.js

@@ -11,6 +11,7 @@ import './file_type_select.js';
 import './page_size_select.js';
 import './resolution_select.js';
 import './scanner_select.js';
+import './scanning_shared_css.js';
 import './source_select.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -4,6 +4,10 @@
 <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
 <template>
   <style include="cr-shared-style">
+    :host {
+      --container-width: 960px;
+    }
+
     html {
       background-color: var(--cros-bg-color);
     }