OOBE: Adapt offline gaia for smaller screens

* Fix width of the dialog
* Move the next button to the bottom
* Adapt fonts according to specs
* Make content paddings adaptive

Bug: 1002102
Change-Id: Iad0a84d11ae20104685e4768a8c3805617b8978f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1893880Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712127}

chrome/browser/chromeos/login/test/offline_gaia_test_mixin.cc

@@ -116,7 +116,7 @@ void OfflineGaiaTestMixin::SubmitGaiaAuthOfflineForm(
   test::OobeJS().TypeIntoPath(user_email,
                               {"gaia-signin", "offline-gaia", "emailInput"});
   test::OobeJS().ClickOnPath(
-      {"gaia-signin", "offline-gaia", "email-input-form", "button"});
+      {"gaia-signin", "offline-gaia", "next-button"});
   test::OobeJS()
       .CreateDisplayedWaiter(false,
                              {"gaia-signin", "offline-gaia", "email-section"})
@@ -128,7 +128,7 @@ void OfflineGaiaTestMixin::SubmitGaiaAuthOfflineForm(
   test::OobeJS().TypeIntoPath(password,
                               {"gaia-signin", "offline-gaia", "passwordInput"});
   test::OobeJS().ClickOnPath(
-      {"gaia-signin", "offline-gaia", "password-input-form", "button"});
+      {"gaia-signin", "offline-gaia", "next-button"});
 }
 
 }  // namespace chromeos

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

@@ -3,15 +3,10 @@
  * found in the LICENSE file. */
 
 :host {
-  --title-font-size: 28px;
-  --title-font-distance-to-baseline: 7px;
-  --subtitle-font-size: 13px;
-  --subtitle-font-distance-to-baseline: 3px;
-  --subtitle-line-height: 18px;
-  --offline-gaia-dialog-width: 768px;
+  --offline-gaia-dialog-width: 100%;
+  --offline-gaia-animation-margin: 50%;
   display: flex;
   flex-direction: column;
-  font-size: 18px;
   min-height: 0;
   overflow: hidden;
   position: relative;
@@ -33,31 +28,23 @@
 }
 
 #title-container {
-  min-height: calc(64px + var(--title-font-distance-to-baseline));
+  padding-top: 20px;
 }
 
 h1 {
-  color: var(--google-grey-900);
-  font-size: var(--title-font-size);
-  font-weight: normal;
+  color: var(--oobe-header-text-color);
+  @apply --oobe-header-font;
   margin: 0;
 }
 
 #subtitle-container {
-  min-height: calc(64px - var(--title-font-distance-to-baseline));
+  padding-top: 8px;
 }
 
 #subtitle-container * {
-  color: var(--google-grey-900);
-  font-size: var(--subtitle-font-size);
+  color: var(--oobe-subheader-text-color);
   line-height: var(--subtitle-line-height);
-  /* margin 12px = 32 - line-height
-                   - 5 (line height - font size)
-                   + 3 (distance to baseline 13px)
-                 =  32 + font size + distance to baseline 13px */
-  margin: calc(32px - var(--subtitle-line-height)
-               - (var(--subtitle-line-height) - var(--subtitle-font-size))
-               + var(--subtitle-font-distance-to-baseline)) 0 0 0;
+  margin: 0;
 }
 
 /** ******** Animations ******* */
@@ -78,10 +65,10 @@ h1 {
 }
 
 .section {
-  --section-padding: 64px;
-  --section-width: calc(var(--offline-gaia-dialog-width)
-                         - 2 * var(--section-padding));
+  --section-padding: var(--oobe-dialog-content-padding);
+  --section-width: var(--offline-gaia-animation-margin);
   animation-duration: 700ms;
+  box-sizing: border-box;
   display: none;
   /** For sliding to work correctly we need fixed size of moving objects. */
   max-width: var(--section-width);
@@ -91,7 +78,7 @@ h1 {
 
 @keyframes show-from-left {
   from {
-    margin-left: -768px; /** Full dialog width negative. */
+    margin-left: calc(-1 * var(--offline-gaia-animation-margin));
   }
   to {
     margin-left: 0;
@@ -100,7 +87,7 @@ h1 {
 
 @keyframes show-from-right {
   from {
-    margin-left: var(--offline-gaia-dialog-width);
+    margin-left: var(--offline-gaia-animation-margin);
   }
   to {
     margin-left: 0;
@@ -112,7 +99,7 @@ h1 {
     margin-left: 0;
   }
   to {
-    margin-left: calc(-1 * var(--offline-gaia-dialog-width));
+    margin-left: calc(-1 * var(--offline-gaia-animation-margin));
   }
 }
 
@@ -121,7 +108,7 @@ h1 {
     margin-left: 0;
   }
   to {
-    margin-left: var(--offline-gaia-dialog-width);
+    margin-left: var(--offline-gaia-animation-margin);
   }
 }
 

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

@@ -65,9 +65,7 @@
                   [[i18nDynamic(locale, 'enterpriseInfoMessage', domain)]]
               </div>
             </div>
-            <gaia-input-form id="email-input-form" on-submit="onEmailSubmitted_"
-                disabled="[[disabled]]"
-                button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
+            <gaia-input-form id="email-input-form" disabled="[[disabled]]">
               <gaia-input slot="inputs" id="emailInput" type="email" required
                   domain="[[emailDomain]]">
                 <div slot="label">
@@ -85,9 +83,7 @@
             </div>
             <div id="subtitle-container">
             </div>
-            <gaia-input-form id="password-input-form" disabled="[[disabled]]"
-                on-submit="onPasswordSubmitted_"
-                button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
+            <gaia-input-form id="password-input-form" disabled="[[disabled]]">
               <gaia-input slot="inputs" id="passwordInput" type="password"
                   required>
                 <div slot="label">
@@ -104,11 +100,10 @@
           </div>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal">
-        <oobe-back-button id="offline-gaia-back-button"
-            on-click="onBackButtonClicked_"></oobe-back-button>
-        <div class="flex">
-        </div>
+      <div slot="bottom-buttons" class="flex layout horizontal justified">
+        <oobe-back-button on-tap="onBackButtonClicked_"></oobe-back-button>
+        <oobe-next-button id="next-button"
+            on-tap="onNextButtonClicked_"></oobe-next-button>
       </div>
     </oobe-dialog>
     <cr-dialog id="forgotPasswordDlg"

chrome/browser/resources/chromeos/login/offline_gaia.js

@@ -146,5 +146,13 @@
         this.fire('offline-gaia-cancel');
       }
     },
+
+    onNextButtonClicked_: function() {
+      if (this.isEmailSectionActive_()) {
+        this.onEmailSubmitted_();
+        return;
+      }
+      this.onPasswordSubmitted_();
+    },
   });
 }

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

@@ -7,7 +7,6 @@
   --subtitle-font-size: --oobe-default-font-size;
   --subtitle-font-distance-to-baseline: 3px;
   --subtitle-line-height: 18px;
-  --offline-gaia-dialog-width: 768px;
   @apply --oobe-default-font;
 }