Gaia sign-in screen: Reimpl visibility via Polymer

Use Polymer data binding in order to compute elements' visibility on the
screen_gaia_signin screen.

This removes most of the imperative manipulation of "hidden" attributes
and other related logic from the JavaScript code.

The only remaining old-style visibility logic is the one for SAML video
recording (saml-notice-recording-indicator) - that one will be
refactored in a follow-up CL.

Bug: 964069
Test: manual
Change-Id: If96b65dd6fb3664b66125b162e09e5d05a7e8dba
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1627383
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Reviewed-by: Denis Kuznetsov <antrim@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664465}

chrome/browser/chromeos/login/saml/saml_browsertest.cc

@@ -401,7 +401,8 @@ class SamlTest : public OobeBaseTest {
         "      $('gaia-signin').authenticator_.removeEventListener("
         "          'authFlowChange', f);"
         "      window.domAutomationController.send("
-        "          $('gaia-signin').isSAML() ? 'SamlLoaded' : 'GaiaLoaded');"
+        "          $('gaia-signin').isSamlForTesting() ?"
+        "              'SamlLoaded' : 'GaiaLoaded');"
         "    });");
   }
 
@@ -1373,7 +1374,7 @@ IN_PROC_BROWSER_TEST_F(SAMLPolicyTest, SAMLInterstitialChangeAccount) {
   WaitForSigninScreen();
 
   ShowSAMLInterstitial();
-  test::OobeJS().ExpectHiddenPath({"gaia-signin", "signin-frame"});
+  test::OobeJS().ExpectHiddenPath({"gaia-signin", "signin-frame-dialog"});
   test::OobeJS().ExpectHiddenPath({"gaia-signin", "offline-gaia"});
   test::OobeJS().ExpectVisiblePath({"gaia-signin", "saml-interstitial"});
 
@@ -1381,8 +1382,9 @@ IN_PROC_BROWSER_TEST_F(SAMLPolicyTest, SAMLInterstitialChangeAccount) {
   ClickChangeAccountOnSAMLInterstitialPage();
 
   // Expects that only the gaia signin frame is visible and shown.
-  test::OobeJS().ExpectHasClass("show", {"gaia-signin", "signin-frame"});
-  test::OobeJS().ExpectVisiblePath({"gaia-signin", "signin-frame"});
+  test::OobeJS().ExpectVisiblePath({"gaia-signin", "signin-frame-dialog"});
+  test::OobeJS().ExpectHasClass("non-transparent",
+                                {"gaia-signin", "signin-frame-container"});
   test::OobeJS().ExpectHiddenPath({"gaia-signin", "offline-gaia"});
   test::OobeJS().ExpectHiddenPath({"gaia-signin", "saml-interstitial"});
 }

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

@@ -104,7 +104,7 @@ void OfflineGaiaTestMixin::SubmitGaiaAuthOfflineForm(
     const std::string& user_email,
     const std::string& password) {
   test::OobeJS().ExpectVisiblePath({"gaia-signin", "offline-gaia"});
-  test::OobeJS().ExpectHiddenPath({"gaia-signin", "signin-frame"});
+  test::OobeJS().ExpectHiddenPath({"gaia-signin", "signin-frame-dialog"});
   test::OobeJS()
       .CreateDisplayedWaiter(true,
                              {"gaia-signin", "offline-gaia", "email-section"})

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

@@ -31,23 +31,26 @@
   width: 100%;
 }
 
+.transparent {
+  opacity: 0;
+  transition: opacity 500ms ease-in;
+}
+
+.non-transparent {
+  opacity: 1;
+  transition: opacity 500ms ease-out;
+}
+
 #signin-frame {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   display: block;
   height: 560px;
-  opacity: 0;
   overflow: hidden;
   position: static;
-  transition: opacity 500ms ease-in;
   width: 768px;
 }
 
-#signin-frame.show {
-  opacity: 1;
-  transition: opacity 500ms ease-out;
-}
-
 :host .step-contents {
   -webkit-box-pack: center;
   display: -webkit-box;
@@ -112,12 +115,6 @@
   visibility: visible;
 }
 
-:host(.loading) .step-contents,
-:host(.loading) .step-controls,
-:host(.loading) .step-extra-controls {
-  visibility: hidden;
-}
-
 :host(.v2) #gaia-step-contents {
   display: none;
 }

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

@@ -10,42 +10,51 @@
   <template>
 
     <oobe-dialog id="signin-frame-dialog" class="gaia-dialog" role="dialog"
-        has-buttons no-header no-footer-padding no-buttons-padding hidden>
-      <div id="signin-frame-container-v2" slot="footer"
-          class="flex layout vertical">
-        <webview id="signin-frame" name="signin-frame" hidden></webview>
+        has-buttons no-header no-footer-padding no-buttons-padding
+        hidden="[[!isSigninFrameDialogVisible_(screenMode_)]]">
+      <div slot="footer" class="flex layout vertical">
+        <div id="signin-frame-container"
+            class$="[[getSigninFrameContainerClass_(isLoadingUiShown_)]]">
+          <webview id="signin-frame" name="signin-frame"></webview>
+        </div>
       </div>
       <div id="gaia-screen-navigation-buttons"
           slot="bottom-buttons" class="relative flex layout horizontal center">
         <div id="buttons-container" class="fit">
-          <oobe-back-button id="signin-back-button"></oobe-back-button>
+          <oobe-back-button id="signin-back-button"
+              disabled="[[!navigationEnabled_]]"></oobe-back-button>
           <div class="flex">
           </div>
         </div>
-        <div id="gaia-screen-buttons-overlay" class="fit" hidden></div>
+        <div id="gaia-screen-buttons-overlay" class="fit"
+            hidden="[[navigationEnabled_]]"></div>
       </div>
     </oobe-dialog>
-    <offline-gaia id="offline-gaia" class="gaia-dialog" hidden>
+    <offline-gaia id="offline-gaia" class="gaia-dialog"
+        hidden="[[!isOfflineGaiaVisible_(screenMode_, isLoadingUiShown_)]]">
     </offline-gaia>
-    <offline-ad-login id="offline-ad-auth" class="gaia-dialog" hidden
+    <offline-ad-login id="offline-ad-auth" class="gaia-dialog"
+        hidden="[[!isOfflineAdAuthVisible_(screenMode_, isLoadingUiShown_)]]"
         i18n-values="ad-welcome-message:loginWelcomeMessage">
     </offline-ad-login>
     <div id="gaia-step-contents" class="step-contents">
       <div id="gaia-signin-form-container">
         <saml-interstitial id="saml-interstitial" class="fit gaia-dialog"
-            hidden>
+            hidden="[[!isSamlInterstitialVisible_(screenMode_,
+                                                  isLoadingUiShown_)]]">
         </saml-interstitial>
       </div>
     </div>
-    <div id="gaia-loading" class="step-loading gaia-dialog" hidden>
+    <div id="gaia-loading" class="step-loading gaia-dialog"
+        hidden="[[!isLoadingUiShown_]]">
       <throbber-notice i18n-values="text:gaiaLoading"></throbber-notice>
     </div>
     <notification-card id="gaia-whitelist-error" type="fail" class="gaia-dialog"
         i18n-values="button-label:tryAgainButton;
                      link-label:learnMoreButton">
     </notification-card>
-    <div id="saml-notice-container" hidden>
-      <span id="saml-notice-recording-indicator" hidden>
+    <div id="saml-notice-container" hidden="[[!isSaml_]]">
+      <span id="saml-notice-recording-indicator" hidden="[[!videoEnabled_]]">
         <img src="chrome://theme/IDR_TAB_RECORDING_INDICATOR">
       </span>
       <span id="saml-notice-message"></span>