Chrome OS: Fix layout of Offline Gaia screen.

This Cl fixes Offline Gaia layout to match new OOBE style from
https://chromium-review.googlesource.com/c/chromium/src/+/1111025 .


BUG: 863266,  852034
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ibef139a3a685b1be7f8dea52fb9c5f6a5ab73b76
Reviewed-on: https://chromium-review.googlesource.com/1136380
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Roman Sorokin <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575511}

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

+/* Copyright 2018 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/* Offline AD login page mostly uses styles from offline_gaia.css.
+ * Only changes to offline gaia style are defined here.
+ */
+
+.advanced-option-subtitle {
+  color: rgba(0, 0, 0, 0.54);
+  font: 13px Roboto, sans-serif;
+}
+
+iron-icon[icon='warning'] {
+  -webkit-margin-end: 15px;
+  -webkit-margin-start: 0;
+  color: var(--google-yellow-500);
+  margin-bottom: 0;
+  margin-top: 0;
+}

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

@@ -47,6 +47,7 @@ TODO(rsorokin): Switch to the new UI (see https://crbug.com/811556)
   <link rel="stylesheet" href="offline_gaia.css">
   <link rel="stylesheet" href="oobe_flex_layout.css">
   <link rel="stylesheet" href="gaia_card_parameters.css">
+  <link rel="stylesheet" href="offline_ad_login.css">
   <template>
     <style include="md-select"></style>
     <gaia-card id="gaiaCard" class="fit">

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

@@ -3,6 +3,12 @@
  * 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;
   display: flex;
   flex-direction: column;
   font-size: 18px;
@@ -18,68 +24,72 @@
   }
 }
 
-/*
- * Due to |margin-right| of e-mail section required for animations, containers
- * store oversized items.
- */
-#headerContainer,
-#footerContainer {
-  max-width: 640px;
-  min-width: 640px;
+/* icon, title, subtitle styles must approximate current Gaia style. */
+
+#icon {
+  height: 32px;
+  margin: 60px 64px 0 64px;
 }
 
-/*
- * e-mail and password section headers have slightly different size.
- * To make animations move same size objects, fix it here.
- */
-#headerContainer {
-  min-height: 90px;
+#title-container {
+  min-height: calc(64px + var(--title-font-distance-to-baseline));
 }
 
-/** ******** Animations ******* */
+h1 {
+  color: var(--google-grey-900);
+  font-size: var(--title-font-size);
+  font-weight: normal;
+  margin: 0;
+}
+
+#subtitle-container {
+  min-height: calc(64px - var(--title-font-distance-to-baseline));
+}
 
+#subtitle-container * {
+  color: var(--google-grey-900);
+  font-size: var(--subtitle-font-size);
+  line-height: var(--subtitle-line-height);
+  /* margin 12px = 32 - line-height
+                   - 5 (lihe height - font size)
+                   + 3 (distance to baseline 13px)
+                 =  32 + font size + distance to baseline 13px */
+  margin: calc(32 + var(--subtitle-font-size)
+               + var(--subtitle-font-distance-to-baseline)) 0 0 0;
+}
+
+/** ******** Animations ******* */
 
 /*
  * Normally, only e-mail section is animated, pushing password section to the
  * right outside of visible area.
  */
 
-/*
- * Animation of e-mail parts (to the 'start' to hide, and to the 'end' to show)
- * allows password section to either slide-in (from the right) or slide-out
- * (to the right).
- *
- * --webkit-margin-start doesn't work with animations, so use conventional
- * left/right margins.
- */
-
-:host(:not([rtl])) .email-section {
-  /*
-   * OOBE dialog header/footer width is less than oobe-dialog width.
-   * To make sure password section is completely shifted out of visible area,
-   * we need right margin that matches dialog margins.
-   */
-  margin-left: 0;
-  margin-right: 128px; /** double dialog margin = 2 * (768 - 640) / 2 */
+/* Fixed window over sliding content in #animation-inner-container. */
+#animation-outer-container {
+  overflow: hidden;
+  width: var(--offline-gaia-dialog-width);
 }
 
-:host([rtl]) .email-section {
-  margin-left: 128px; /** double dialog margin = 2 * (768 - 640) / 2 */
-  margin-right: 0;
+#animation-inner-container {
+  width: calc(2 * var(--offline-gaia-dialog-width));
 }
 
-
 .section {
+  --section-padding: 64px;
+  --section-width: calc(var(--offline-gaia-dialog-width)
+                         - 2 * var(--section-padding));
   animation-duration: 700ms;
   display: none;
   /** For sliding to work correctly we need fixed size of moving objects. */
-  max-width: 640px;
-  min-width: 640px;
+  max-width: var(--section-width);
+  min-width: var(--section-width);
+  padding: 0 var(--section-padding);
 }
 
 @keyframes show-from-left {
   from {
-    margin-left: -768px; /** container width + double margin = 640 + 2 * 64 */
+    margin-left: -768px; /** Full dialog width negative. */
   }
   to {
     margin-left: 0;
@@ -88,10 +98,10 @@
 
 @keyframes show-from-right {
   from {
-    margin-right: -768px; /** container width + double margin = 640 + 2 * 64 */
+    margin-left: var(--offline-gaia-dialog-width);
   }
   to {
-    margin-right: 0;
+    margin-left: 0;
   }
 }
 
@@ -100,21 +110,21 @@
     margin-left: 0;
   }
   to {
-    margin-left: -768px; /** container width + double margin = 640 + 2 * 64 */
+    margin-left: calc(-1 * var(--offline-gaia-dialog-width));
   }
 }
 
 @keyframes hide-to-right {
   from {
-    margin-right: 0;
+    margin-left: 0;
   }
   to {
-    margin-right: -768px; /** container width + double margin = 640 + 2 * 64 */
+    margin-left: var(--offline-gaia-dialog-width);
   }
 }
 
-oobe-dialog[selected='emailSection'] .email-section,
-oobe-dialog[selected='passwordSection'] .password-section {
+oobe-dialog[selected='emailSection'] #email-section,
+oobe-dialog[selected='passwordSection'] #password-section {
   display: block;
 }
 
@@ -123,19 +133,19 @@ oobe-dialog[selected='passwordSection'] .password-section {
  * Dialog always starts with e-mail section visible, so only "show" animation
  * depends on |animation-in-progress| attribute.
  */
-oobe-dialog[animation-in-progress] .email-section {
+oobe-dialog[animation-in-progress] #email-section {
   animation-name: show-from-left;
 }
 
-oobe-dialog[selected='passwordSection'] .email-section {
+oobe-dialog[selected='passwordSection'] #email-section {
   animation-name: hide-to-left;
 }
 
-:host([rtl]) oobe-dialog[animation-in-progress] .email-section {
+:host([rtl]) oobe-dialog[animation-in-progress] #email-section {
   animation-name: show-from-right;
 }
 
-:host([rtl]) oobe-dialog[selected='passwordSection'] .email-section {
+:host([rtl]) oobe-dialog[selected='passwordSection'] #email-section {
   animation-name: hide-to-right;
 }
 
@@ -143,16 +153,3 @@ oobe-dialog[selected='passwordSection'] .email-section {
 oobe-dialog[animation-in-progress] .section {
   display: block;
 }
-
-.advanced-option-subtitle {
-  color: rgba(0, 0, 0, 0.54);
-  font: 13px Roboto, sans-serif;
-}
-
-iron-icon[icon='warning'] {
-  -webkit-margin-end: 15px;
-  -webkit-margin-start: 0;
-  color: var(--google-yellow-500);
-  margin-bottom: 0;
-  margin-top: 0;
-}

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

@@ -53,27 +53,25 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="gaia_card_parameters.css">
-    <template is="dom-if" if="[[glifMode]]" restamp>
-      <oobe-dialog role="dialog" has-buttons selected$="[[activeSection]]"
-          animation-in-progress$="[[animationInProgress]]">
-        <img src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
-            slot="oobe-icon" alt="">
-        <div id="headerContainer" slot="header" class="layout horizontal"
-            on-animationend="onSlideAnimationEnd_">
-          <div id="emailSectionHeader" class="section email-section">
-            <h1 class="title">
-              [[i18nDynamic(locale, 'loginWelcomeMessage')]]
-            </h1>
-            <p id="managedBy" class="enterprise-info"
-                hidden$="[[!showEnterpriseMessage]]">
-            </p>
-          </div>
-          <div id="passwordSectionHeader" class="section password-section">
-            <gaia-header class="title" id="passwordHeader"></gaia-header>
-          </div>
-        </div>
-        <div id="footerContainer" slot="footer" class="layout horizontal">
-          <div id="emailSectionFooter" class="section email-section">
+    <oobe-dialog role="dialog" has-buttons selected$="[[activeSection]]"
+        animation-in-progress$="[[animationInProgress]]" no-header
+        no-footer-padding>
+      <div slot="footer">
+        <img id="icon" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
+      </div>
+      <div id="animation-outer-container" slot="footer">
+        <div id="animation-inner-container" class="flex layout horizontal">
+          <div id="email-section" class="section"
+              on-animationend="onSlideAnimationEnd_">
+            <div id="title-container">
+              <h1>[[i18nDynamic(locale, 'loginWelcomeMessage')]]</h1>
+            </div>
+            <div id="subtitle-container">
+              <div id="managedBy" class="enterprise-info"
+                  hidden$="[[!domain]]">
+                  [[i18nDynamic(locale, 'enterpriseInfoMessage', domain)]]
+              </div>
+            </div>
             <gaia-input-form on-submit="onEmailSubmitted_"
                 disabled="[[disabled]]"
                 button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
@@ -84,8 +82,13 @@
               </gaia-input>
             </gaia-input-form>
           </div>
-          <div id="passwordSectionFooter" class="section password-section">
-            <gaia-input-form slot="footer" disabled="[[disabled]]"
+          <div id="password-section" class="section">
+            <div id="title-container">
+              <gaia-header id="passwordHeader"></gaia-header>
+            </div>
+            <div id="subtitle-container">
+            </div>
+            <gaia-input-form disabled="[[disabled]]"
                 on-submit="onPasswordSubmitted_"
                 button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
               <gaia-input slot="inputs" id="passwordInput" type="password"
@@ -100,67 +103,14 @@
             </gaia-input-form>
           </div>
         </div>
-        <div slot="bottom-buttons" class="flex layout horizontal">
-          <oobe-back-button id="offline-gaia-back-button"
-              on-tap="onBackButtonClicked_"></oobe-back-button>
-          <div class="flex">
-          </div>
+      </div>
+      <div slot="bottom-buttons" class="flex layout horizontal">
+        <oobe-back-button id="offline-gaia-back-button"
+            on-tap="onBackButtonClicked_"></oobe-back-button>
+        <div class="flex">
         </div>
-      </oobe-dialog>
-    </template>
-
-    <template is="dom-if" if="[[!glifMode]]" restamp>
-      <neon-animated-pages id="animatedPages" class="fit" attr-for-selected="id"
-          entry-animation="slide-from-right-animation"
-          exit-animation="slide-to-left-animation"
-          on-neon-animation-finish="onAnimationFinish_" selected="emailSection">
-
-        <neon-animatable id="emailSection" class="fit">
-            <gaia-card class="fit">
-              <div slot="header"
-                  class="flex vertical layout end-justified start">
-                <h1 class="welcome-message" i18n-content="loginWelcomeMessage">
-                </h1>
-                <p id="managedBy" class="enterprise-info"
-                    hidden$="[[!showEnterpriseMessage]]">
-                </p>
-              </div>
-              <div slot="footer" class="flex vertical layout justified">
-                <gaia-input-form on-submit="onEmailSubmitted_"
-                    disabled="[[disabled]]"
-                    i18n-values="button-text:offlineLoginNextBtn">
-                  <gaia-input slot="inputs" id="emailInput" type="email"
-                      domain="[[emailDomain]]"
-                      i18n-values="error:offlineLoginInvalidEmail;
-                                   label:offlineLoginEmail" required>
-                  </gaia-input>
-                </gaia-input-form>
-                <img src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
-                    class="self-center" alt="">
-              </div>
-            </gaia-card>
-        </neon-animatable>
-
-        <neon-animatable id="passwordSection" class="fit">
-            <gaia-card id="passwordCard" class="fit">
-              <gaia-header slot="header" class="flex" id="passwordHeader">
-              </gaia-header>
-              <gaia-input-form slot="footer" disabled="[[disabled]]"
-                  on-submit="onPasswordSubmitted_"
-                  i18n-values="button-text:offlineLoginNextBtn">
-                <gaia-input slot="inputs" id="passwordInput" type="password"
-                    i18n-values="error:offlineLoginInvalidPassword;
-                                 label:offlineLoginPassword" required>
-                </gaia-input>
-                <gaia-button type="link" on-tap="onForgotPasswordClicked_"
-                    i18n-content="offlineLoginForgotPasswordBtn">
-                </gaia-button>
-              </gaia-input-form>
-            </gaia-card>
-        </neon-animatable>
-      </neon-animated-pages>
-    </template>
-
+      </div>
+    </oobe-dialog>
     <cr-dialog id="forgotPasswordDlg"
         on-close="onDialogOverlayClosed_">
       <div slot="body"

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

@@ -18,14 +18,8 @@ Polymer((function() {
         value: false,
       },
 
-      showEnterpriseMessage: {
-        type: Boolean,
-        value: false,
-      },
-
       domain: {
         type: String,
-        observer: 'onDomainChanged_',
       },
 
       emailDomain: String,
@@ -36,14 +30,6 @@ Polymer((function() {
       },
 
       animationInProgress: Boolean,
-
-      /**
-       * Controls GLIF MM mode.
-       */
-      glifMode: {
-        type: Boolean,
-        value: false,
-      },
     },
 
     attached: function() {
@@ -62,12 +48,6 @@ Polymer((function() {
       this.switchToEmailCard(true /* animated */);
     },
 
-    onDomainChanged_: function() {
-      this.$$('#managedBy').textContent =
-          loadTimeData.getStringF('enterpriseInfoMessage', this.domain);
-      this.showEnterpriseMessage = !!this.domain.length;
-    },
-
     onAnimationFinish_: function() {
       this.fire('backButton', !this.isEmailSectionActive_());
       this.focus();
@@ -77,7 +57,6 @@ Polymer((function() {
       this.disabled = true;
       this.fire('dialogShown');
       this.$$('#forgotPasswordDlg').showModal();
-      this.$$('#passwordCard').classList.add('full-disabled');
     },
 
     onForgotPasswordCloseTap_: function() {
@@ -87,7 +66,6 @@ Polymer((function() {
     onDialogOverlayClosed_: function() {
       this.fire('dialogHidden');
       this.disabled = false;
-      this.$$('#passwordCard').classList.remove('full-disabled');
     },
 
     setEmail: function(email) {

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

@@ -716,14 +716,12 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
         $('signin-frame-container-v2').appendChild($('signin-frame'));
         $('gaia-signin')
             .insertBefore($('offline-gaia'), $('gaia-step-contents'));
-        $('offline-gaia').glifMode = true;
         $('offline-gaia').removeAttribute('not-a-dialog');
         $('offline-gaia').classList.toggle('fit', false);
       } else {
         $('gaia-signin-form-container').appendChild($('signin-frame'));
         $('gaia-signin-form-container')
             .appendChild($('offline-gaia'), $('gaia-step-contents'));
-        $('offline-gaia').glifMode = false;
         $('offline-gaia').setAttribute('not-a-dialog', true);
         $('offline-gaia').classList.toggle('fit', true);
       }