OOBE Dialog: Add buttons overlay

As we introduced paddings of the buttons inside oobe dialog - external overlay
is not displayed properly (see bug for screenshots).

Also use the overlay on the enrollment screen

Fixed: 1013337, b/143346960
Test: manual on the device
Change-Id: I22a1cf67c39221c378b0a5a6f0c7d5ab978287af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1892963Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712618}

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

@@ -15,7 +15,8 @@
       <div id="step-signin" hidden$="[[!eq_(currentStep_, 'signin')]]">
         <oobe-dialog class="gaia-dialog" role="dialog"
                      id="enrollment-gaia-dialog" has-buttons no-header
-                     no-footer-padding>
+                     no-footer-padding
+                     show-buttons-overlay="[[authenticatorDialogDisplayed_]]">
           <div slot="footer" class="flex layout vertical">
             <webview id="oauth-enroll-auth-view"
                      name="oauth-enroll-auth-view">

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

@@ -232,13 +232,11 @@ Polymer({
     this.authenticator_.addEventListener(
         'dialogShown', (function(e) {
                          this.authenticatorDialogDisplayed_ = true;
-                         // TODO(alemate): update the visual style.
                        }).bind(this));
 
     this.authenticator_.addEventListener(
         'dialogHidden', (function(e) {
                           this.authenticatorDialogDisplayed_ = false;
-                          // TODO(alemate): update the visual style.
                         }).bind(this));
 
     this.authenticator_.insecureContentBlockedCallback =

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

@@ -71,6 +71,10 @@
   z-index: 1;
 }
 
+#buttons-overlay {
+  background: rgba(var(--google-grey-900-rgb), 0.6);
+}
+
 :host #oobe-bottom[no-buttons-padding] {
   padding: unset;
 }

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

@@ -84,6 +84,8 @@
       <div id="oobe-bottom" hideShadow$="[[hideShadow]]"
           class="slot-container layout horizontal center">
         <slot name="bottom-buttons"></slot>
+        <div id="buttons-overlay" class="fit" hidden="[[!showButtonsOverlay]]">
+        </div>
       </div>
     </template>
   </template>

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

@@ -55,6 +55,14 @@ Polymer({
       reflectToAttribute: true,
       observer: 'onfullScreenDialogChanged_',
     },
+
+    /**
+     * Shows overlay on top of the bottom buttons.
+     */
+    showButtonsOverlay: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   focus: function() {

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

@@ -120,7 +120,3 @@
 :host(.saml) #signin-frame-container {
   padding-top: 44px;
 }
-
-#gaia-screen-buttons-overlay {
-  background: rgba(0, 0, 0, 0.6);
-}

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

@@ -10,6 +10,7 @@
   <template>
     <oobe-dialog id="signin-frame-dialog" class="gaia-dialog" role="dialog"
         has-buttons no-header no-footer-padding
+        show-buttons-overlay="[[!navigationEnabled_]]"
         hidden="[[!isSigninFrameDialogVisible_(screenMode_,
                                                pinDialogParameters_)]]">
       <div slot="footer" class="flex layout vertical">
@@ -36,9 +37,6 @@
               disabled="[[!secondaryActionButtonEnabled_]]"
               >[[secondaryActionButtonLabel_]]</oobe-text-button>
         </div>
-        <div id="gaia-screen-buttons-overlay" class="fit"
-            hidden="[[navigationEnabled_]]">
-        </div>
       </div>
     </oobe-dialog>
     <offline-gaia id="offline-gaia" class="gaia-dialog"