Scanning: Align panels

 - Add custom css vars that can be updated at different
   breakpoints to conform to the spec.
 - Align scan preview and dropdown section.
 - Update html markup to support panel layout.

Screenshot: http://shortn/_vmZWXoAuiQ

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

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

@@ -330,6 +330,21 @@ suite('ScanningAppTest', () => {
               scanningApp.$$('#statusText').textContent.trim());
         });
   });
+
+  test('PanelContainerContent', () => {
+    const scanners = [];
+    const capabilities = new Map();
+    return initializeScanningApp(scanners, capabilities).then(() => {
+      const panelContainer = scanningApp.$$('.panel-container');
+      assertTrue(!!panelContainer);
+
+      const leftPanel = scanningApp.$$('.panel-container > #leftPanel');
+      const rightPanel = scanningApp.$$('.panel-container > #rightPanel');
+
+      assertTrue(!!leftPanel);
+      assertTrue(!!rightPanel);
+    });
+  });
 });
 
 suite('ScannerSelectTest', () => {

chromeos/components/scanning/resources/scan_preview.html

@@ -2,6 +2,9 @@
   .preview {
     border: 1px solid var(--google-grey-200);
     border-radius: 4px;
+    /* TODO(michaelcheco): Replace with correct height for
+     * preview container. */
+    height: 420px;
   }
 </style>
 <div class="preview"></div>
\ No newline at end of file

chromeos/components/scanning/resources/scanning_app.html

@@ -8,32 +8,50 @@
     position: relative;
     width: var(--container-width);
   }
+
+  .panel {
+    padding-inline: var(--panel-padding);
+    width: var(--panel-width);
+  }
+
+  .panel-container {
+    display: flex;
+    margin-bottom: var(--panel-container-margin-bottom);
+    margin-top: var(--panel-container-margin-top);
+  }
 </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 class="panel-container">
+    <div id="leftPanel" class="panel">
+      <scan-preview></scan-preview>
+    </div>
+    <div id="rightPanel" class="panel">
+      <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>
+  </div>
 </div>

chromeos/components/scanning/resources/scanning_app.js

@@ -10,6 +10,7 @@ import './color_mode_select.js';
 import './file_type_select.js';
 import './page_size_select.js';
 import './resolution_select.js';
+import './scan_preview.js';
 import './scanner_select.js';
 import './scanning_shared_css.js';
 import './source_select.js';

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -4,8 +4,14 @@
 <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
 <template>
   <style include="cr-shared-style">
+    /* TODO(michaelcheco): Add media queries that update css vars to match the
+     * values found in the spec. */
     :host {
       --container-width: 960px;
+      --panel-container-margin-bottom: 32px;
+      --panel-container-margin-top: 20px;
+      --panel-padding: 48px;
+      --panel-width: 384px;
     }
 
     html {