OOBE: Switch container to flex layout

TBR=antrim@chromium.org

Bug: 1000606
Change-Id: I456f4cf60ae6a3ce2c6c9c6462d5555b27c6bfc1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1859958Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#705833}

chrome/browser/resources/chromeos/login/md_screen_container.css

@@ -8,25 +8,33 @@
   --oobe-dialog-host-width: 100%;
 }
 
-#outer-container {
-  align-items: center;
-  bottom: var(--shelf-area-height);  /* Leave space for the shelf */
-  display: flex;
-  justify-content: center;
-  left: 0;
-  perspective: 1px; /* Workaround, see http://crbug.com/360567 */
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
-}
+ #outer-container {
+   align-items: center;
+   box-sizing: border-box;
+   height: 100%;
+   justify-content: center;
+   min-height: calc(var(--oobe-dialog-min-height) + var(--shelf-area-height));
+   padding-bottom: var(--shelf-area-height);  /* Leave space for the shelf */
+   padding-inline-end: var(--oobe-dialog-side-margin);
+   padding-inline-start: var(--oobe-dialog-side-margin);
+   position: absolute;
+   width: 100%;
+   z-index: 1;
+ }
+
+ .oobe-vertical-margin {
+   align-self: stretch;
+   flex: 0 1 auto; /* grow shrink basis */
+   height: var(--oobe-dialog-side-margin);
+   min-height: 0;
+ }
 
 .oobe-display #outer-container {
   perspective: 600px;
 }
 
 #scroll-container {
-  bottom: 0;        /* Allows content overlap with control bar. */
+  bottom: 0;        /* Allows content overlap with the shelf. */
   left: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -110,15 +118,10 @@ html:not([full-screen-dialog]) #oobe.tpm-error-message #inner-container {
 }
 
 #oobe {
-  box-sizing: border-box;
-  height: 100%;
-  max-height: 864px; /* 768 + 48*2 */
-  max-width: 864px; /* 768 + 48*2 */
-  min-height: 560px; /* 464 + 48*2 */
-  padding-bottom: 48px;
-  padding-inline-end: 48px;
-  padding-inline-start: 48px;
-  padding-top: 48px;
+  flex: 1 0 auto; /* grow shrink basis */
+  height: var(--oobe-dialog-min-height);
+  max-height: 768px;
+  max-width: 768px;
   width: 100%;
 }
 

chrome/browser/resources/chromeos/login/md_screen_container.html

 <div id="background" class="background-initial"></div>
 <include src="api_keys_notice.html">
 <div id="scroll-container">
-  <div id="outer-container">
+  <div id="outer-container" class="layout vertical">
+    <div class="oobe-vertical-margin"></div>
     <div id="oobe" class="faded">
       <div id="inner-container" class="down">
         <include src="[OOBE]_screens.html">
       </div>
     </div>
+    <div class="oobe-vertical-margin"></div>
   </div>
 </div>
 <div id="bubble-persistent" class="bubble faded" hidden></div>

ui/login/display_manager.js

@@ -789,10 +789,6 @@ cr.define('cr.ui.login', function() {
 
       if (this.showingViewsLogin) {
         chrome.send('updateOobeDialogSize', [width, height]);
-        $('scroll-container').classList.toggle('disable-scroll', true);
-        $('inner-container').classList.toggle('disable-scroll', true);
-        $('inner-container').style.top =
-            cr.ui.toCssPx($('scroll-container').scrollTop);
       }
     },
 

ui/login/oobe.css

@@ -23,7 +23,8 @@ html {
 
 html[virtual-keyboard=true],
 html[screen=gaia-signin] {
-  --shelf-area-height: 0;
+  /* has to be with px suffix to be used in calc */
+  --shelf-area-height: 0px;
 }
 
 body {
@@ -46,6 +47,13 @@ html {
   --oobe-dialog-footer-height: 96px;
   --oobe-dialog-footer-padding: 32px;
   --oobe-dialog-content-padding: 64px;
+  --oobe-dialog-min-height: 464px;
+  --oobe-dialog-side-margin: 48px;
+}
+
+html[screen=gaia-signin] {
+  /* has to be with px suffix to be used in calc */
+  --oobe-dialog-side-margin: 0px;
 }
 
 @media screen and (max-width: 864px) {