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,8 +8,24 @@
     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">
+  <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_]]"
@@ -36,4 +52,6 @@
         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 {