cros: Show overlay during 3rd-party SAML Enrollment.

* Show overlay for the 3rd-party SAML page.
* Hide bottom buttons for the 3rd-party SAML page.

Unfortunately my refactoring CL:2046174 is still in-flight. So I
followed the model from CL:2000938 in the meantime. As this is needed
for M82.

Fixed: 1001281
Change-Id: Ia8f2d8cbabb2f44e387ad5f76b6a83997654ae9a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2089734Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Maksim Ivanov <emaxx@chromium.org>
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747307}

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

@@ -6,14 +6,6 @@
   padding: 0;
 }
 
-:host(.saml) #oauth-enroll-step-contents {
-  padding-top: 44px;
-}
-
-:host(:not(.saml)) #oauth-saml-notice-container {
-  display: none;
-}
-
 #oauth-enroll-step-contents,
 #oauth-enroll-step-contents > div {
   height: 100%;
@@ -32,11 +24,8 @@
 
 #oauth-enroll-auth-view {
   display: block;
-  height: 100%;
   overflow: hidden;
-  padding: 0;
-  width: 100%;
-  z-index: 10;
+  position: static;
 }
 
 #oauth-enroll-learn-more-link {
@@ -55,21 +44,13 @@
   vertical-align: top;
 }
 
-.oauth-enroll-button {
-  display: none;
-}
-
 #oauth-saml-notice-container {
   align-items: center;
+  background: rgb(241, 243, 244); /* #F1F3F4 */
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
   display: flex;
   height: 44px;
-  justify-content: center;
-  left: 0;
   min-height: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
 }
 
 #oauth-saml-notice-message {
@@ -93,3 +74,12 @@
   top: 0;
   z-index: 1;
 }
+
+#signin-frame-container {
+  z-index: 10;
+}
+
+#saml-close-button {
+  --cr-icon-button-margin-end: 0;
+  --cr-icon-button-margin-start: 0;
+}

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

@@ -17,10 +17,21 @@
       <!-- OATH GAIA DIALOG -->
       <div id="step-signin" hidden$="[[!eq_(currentStep_, 'signin')]]">
         <oobe-dialog class="gaia-dialog" role="dialog"
-            id="enrollment-gaia-dialog" has-buttons no-header
+            id="enrollment-gaia-dialog" no-header
+            has-buttons="[[!isSamlSsoVisible_]]"
             no-footer-padding footer-shrinkable>
-          <div slot="footer" class="flex layout vertical">
-            <webview id="oauth-enroll-auth-view"
+          <div slot="footer" id="signin-frame-container"
+              class="flex layout vertical">
+            <div id="oauth-saml-notice-container" class="layout horizontal"
+                hidden="[[!isSamlSsoVisible_]]">
+              <div class="flex layout horizontal center-justified">
+                <span id="oauth-saml-notice-message"></span>
+              </div>
+              <cr-icon-button id="saml-close-button" iron-icon="cr:close"
+                  on-click="cancel">
+              </cr-icon-button>
+            </div>
+            <webview id="oauth-enroll-auth-view" class="flex"
                 name="oauth-enroll-auth-view">
             </webview>
           </div>
@@ -196,14 +207,12 @@
         </oobe-dialog>
       </div>
     </div>
-    <div id="oauth-saml-notice-container">
-      <span id="oauth-saml-notice-message"></span>
-    </div>
     <navigation-bar id="oauth-enroll-navigation"
         disabled="[[authenticatorDialogDisplayed_]]"
         on-close="cancel" on-refresh="cancel"></navigation-bar>
     <div class="popup-overlay"
-        hidden="[[!authenticatorDialogDisplayed_]]">
+        hidden="[[!showPopupOverlay_(authenticatorDialogDisplayed_,
+                                     isSamlSsoVisible_)]]">
     </div>
   </template>
 </dom-module>

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

@@ -137,6 +137,15 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /**
+     * Whether the SAML SSO page is visible.
+     * @private
+     */
+    isSamlSsoVisible_: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /**
@@ -246,7 +255,7 @@ Polymer({
                                       'samlNotice',
                                       this.authenticator_.authDomain);
                             }
-                            this.classList.toggle('saml', isSAML);
+                            this.isSamlSsoVisible_ = isSAML;
                             if (Oobe.getInstance().currentScreen == this)
                               Oobe.getInstance().updateScreenSize(this);
                             this.lastBackMessageValue_ = false;
@@ -310,7 +319,7 @@ Polymer({
 
     this.authenticator_.setWebviewPartition(data.webviewPartitionName);
 
-    this.classList.remove('saml');
+    this.isSamlSsoVisible_ = false;
 
     var gaiaParams = {};
     gaiaParams.gaiaUrl = data.gaiaUrl;
@@ -621,4 +630,14 @@ Polymer({
     this.showStep(ENROLLMENT_STEP.AD_JOIN);
   },
 
+  /**
+   * Whether to show popup overlay under the dialog
+   * @param {boolean} authenticatorDialogDisplayed
+   * @param {boolean} isSamlSsoVisible
+   * @return {boolean} True iff overlay popup should be displayed
+   * @private
+   */
+  showPopupOverlay_(authenticatorDialogDisplayed, isSamlSsoVisible) {
+    return authenticatorDialogDisplayed || isSamlSsoVisible;
+  },
 });