Chrome OS Gaia: UI specific changes to implement MinuteMaid flow.

Gaia takes full window
Show guest button on gaia screen
Show more settings button for creation supervised users
Hide enterprise container

BUG=451959
TBR=oshima@chromium.org

Review URL: https://codereview.chromium.org/930953002

Cr-Commit-Position: refs/heads/master@{#317088}

chrome/app/theme/theme_resources.grd

@@ -392,6 +392,7 @@
       </if>
       <if expr="chromeos">
         <structure type="chrome_scaled_image" name="IDR_ICON_ADD_USER_WHITE" file="cros/icon_add_user_white.png" />
+        <structure type="chrome_scaled_image" name="IDR_ICON_MORE_VERT_WHITE" file="cros/icon_more_vert_white.png" />
         <structure type="chrome_scaled_image" name="IDR_ICON_GUEST_WHITE" file="cros/icon_guest_white.png" />
         <structure type="chrome_scaled_image" name="IDR_ICON_POWER_WHITE" file="cros/icon_power_white.png" />
       </if>

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

@@ -65,6 +65,22 @@ html[screen=oobe] .login-header-bar-animate-slow {
   height: 34px;
 }
 
+.add-supervised-user-menu {
+  display: none;
+}
+
+#more-settings-header-bar-item.active .add-supervised-user-menu {
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+  bottom: 15px;
+  display: block;
+  font-size: 13px;
+  left: 15px;
+  position: absolute;
+  width: 220px;
+}
+
 html[dir=rtl] .header-bar-item {
   background-position: right center;
 }
@@ -73,6 +89,7 @@ html[dir=rtl] .header-bar-item {
 #login-header-bar #restart-button,
 #login-header-bar #add-user-button,
 #login-header-bar #guest-user-button,
+#login-header-bar #more-settings-button,
 #login-header-bar #cancel-multiple-sign-in-button {
   -webkit-padding-start: 24px;
   background-position: left center;
@@ -83,11 +100,16 @@ html[dir=rtl] .header-bar-item {
 html[dir=rtl] #login-header-bar #shutdown-button,
 html[dir=rtl] #login-header-bar #restart-button,
 html[dir=rtl] #login-header-bar #add-user-button,
+html[dir=rtl] #login-header-bar #more-settings-button,
 html[dir=rtl] #login-header-bar #guest-user-button,
 html[dir=rtl] #login-header-bar #cancel-multiple-sign-in-button {
   background-position: right center;
 }
 
+#login-header-bar #more-settings-header-bar-item {
+  position: relative;
+}
+
 #login-header-bar #shutdown-button {
   background-image: url(chrome://theme/IDR_ICON_POWER_WHITE);
 }
@@ -100,6 +122,10 @@ html[dir=rtl] #login-header-bar #cancel-multiple-sign-in-button {
   background-image: url(chrome://theme/IDR_ICON_ADD_USER_WHITE);
 }
 
+#login-header-bar #more-settings-button {
+  background-image: url(chrome://theme/IDR_ICON_MORE_VERT_WHITE);
+}
+
 #login-header-bar #guest-user-button {
   background-image: url(chrome://theme/IDR_ICON_GUEST_WHITE);
 }

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

@@ -11,15 +11,21 @@
     <button id="show-apps-button" class="custom-appearance"
         i18n-content="showApps"></button>
   </div>
+  <div id="guest-user-header-bar-item" class="header-bar-item" hidden>
+    <button id="guest-user-button" class="custom-appearance"
+        i18n-content="browseAsGuest"></button>
+  </div>
   <div id="add-user-header-bar-item" class="header-bar-item" hidden>
     <button id="add-user-button" class="custom-appearance"
         i18n-content="addUser"></button>
     <button id="cancel-add-user-button" class="custom-appearance"
         i18n-content="cancel" hidden></button>
   </div>
-  <div id="guest-user-header-bar-item" class="header-bar-item" hidden>
-    <button id="guest-user-button" class="custom-appearance"
-        i18n-content="browseAsGuest"></button>
+  <div id="more-settings-header-bar-item" class="header-bar-item">
+    <button id="more-settings-button" class="custom-appearance"></button>
+    <div class="add-supervised-user-menu" aria-label="Add supervised user">
+      <span class="add-supervised-user-command">Add supervised user</span>
+    </div>
   </div>
   <div id="sign-out-user-item" class="header-bar-item" hidden>
     <button id="sign-out-user-button" class="custom-appearance"

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

@@ -21,6 +21,9 @@ cr.define('login', function() {
     // Whether guest button should be shown when header bar is in normal mode.
     showGuest_: false,
 
+    // Whehter MinuteMaid flow is active.
+    isMinuteMaid_: false,
+
     // Whether the reboot button should be shown the when header bar is in
     // normal mode.
     showReboot_: false,
@@ -29,6 +32,10 @@ cr.define('login', function() {
     // normal mode.
     showShutdown_: true,
 
+    // Whether the create supervised user button should be shown when the header
+    // bar is in normal mode. It will be shown in "More settings" menu.
+    showCreateSupervised_: false,
+
     // Current UI state of the sign-in screen.
     signinUIState_: SIGNIN_UI_STATE.HIDDEN,
 
@@ -37,6 +44,7 @@ cr.define('login', function() {
 
     /** @override */
     decorate: function() {
+      document.addEventListener('click', this.handleClick_.bind(this));
       $('shutdown-header-bar-item').addEventListener('click',
           this.handleShutdownClick_);
       $('shutdown-button').addEventListener('click',
@@ -47,6 +55,8 @@ cr.define('login', function() {
           this.handleShutdownClick_);
       $('add-user-button').addEventListener('click',
           this.handleAddUserClick_);
+      $('more-settings-button').addEventListener('click',
+          this.handleMoreSettingsClick_.bind(this));
       $('cancel-add-user-button').addEventListener('click',
           this.handleCancelAddUserClick_);
       $('guest-user-header-bar-item').addEventListener('click',
@@ -60,6 +70,8 @@ cr.define('login', function() {
       $('cancel-consumer-management-enrollment-button').addEventListener(
           'click',
           this.handleCancelConsumerManagementEnrollmentClick_);
+      this.addSupervisedUserMenu.addEventListener('click',
+          this.handleAddSupervisedUserClick_.bind(this));
       if (Oobe.getInstance().displayType == DISPLAY_TYPE.LOGIN ||
           Oobe.getInstance().displayType == DISPLAY_TYPE.OOBE) {
         if (Oobe.getInstance().newKioskUI)
@@ -94,6 +106,32 @@ cr.define('login', function() {
           button.disabled = value;
     },
 
+    get getMoreSettingsMenu() {
+      return $('more-settings-header-bar-item');
+    },
+
+    get addSupervisedUserMenu() {
+      return this.querySelector('.add-supervised-user-menu');
+    },
+
+    /**
+     * Whether action box button is in active state.
+     * @type {boolean}
+     */
+    get isMoreSettingsActive() {
+      return this.getMoreSettingsMenu.classList.contains('active');
+    },
+    set isMoreSettingsActive(active) {
+      if (active == this.isMoreSettingsActive)
+        return;
+      if (active) {
+        this.getMoreSettingsMenu.classList.add('active');
+      } else {
+        this.getMoreSettingsMenu.classList.remove('active');
+      }
+    },
+
+
     /**
      * Add user button click handler.
      *
@@ -107,6 +145,19 @@ cr.define('login', function() {
       e.stopPropagation();
     },
 
+    handleMoreSettingsClick_: function(e) {
+      this.isMoreSettingsActive = !this.isMoreSettingsActive;
+      e.stopPropagation();
+    },
+
+    handleClick_: function(e) {
+      this.isMoreSettingsActive = false;
+    },
+
+    handleAddSupervisedUserClick_: function(e) {
+      chrome.send('showSupervisedUserCreationScreen');
+      e.preventDefault();
+    },
     /**
      * Cancel add user button click handler.
      *
@@ -188,6 +239,16 @@ cr.define('login', function() {
       this.updateUI_();
     },
 
+    set minuteMaid(value) {
+      this.isMinuteMaid_ = value;
+      this.updateUI_();
+    },
+
+    set showCreateSupervisedButton(value) {
+      this.showCreateSupervised_ = value;
+      this.updateUI_();
+    },
+
     /**
      * If true the "Restart" button is shown.
      *
@@ -267,11 +328,17 @@ cr.define('login', function() {
 
       $('add-user-button').hidden =
           !accountPickerIsActive || isMultiProfilesUI || isLockScreen;
-      $('cancel-add-user-button').hidden = accountPickerIsActive ||
+      $('more-settings-header-bar-item').hidden = !this.isMinuteMaid_ ||
+          !gaiaIsActive ||
+          !this.showCreateSupervised_;
+      $('cancel-add-user-button').hidden =
+          (gaiaIsActive && this.isMinuteMaid_) ||
+          accountPickerIsActive ||
           !this.allowCancel_ ||
           wrongHWIDWarningIsActive ||
           isMultiProfilesUI;
-      $('guest-user-header-bar-item').hidden = gaiaIsActive ||
+      $('guest-user-header-bar-item').hidden =
+          (gaiaIsActive && !this.isMinuteMaid_) ||
           supervisedUserCreationDialogIsActive ||
           !this.showGuest_ ||
           wrongHWIDWarningIsActive ||

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

@@ -13,6 +13,11 @@
   width: 522px;
 }
 
+.minute-maid #gaia-signin {
+  background: rgb(66, 133, 244);
+  padding: 50px 0 0 0;
+  width: 522px;
+}
 #gaia-signin.full-width {
   padding: 75px 0 0;
 }
@@ -37,10 +42,19 @@
   }
 }
 
+.minute-maid #signin-right,
 .no-right-panel #signin-right {
   display: none;
 }
 
+.minute-maid #close-button-item {
+  background: transparent none;
+  background-image: url(chrome://theme/IDR_PANEL_CLOSE);
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 30px;
+}
+
 .signin-text {
   color: #666;
   margin-top: 20px;
@@ -63,6 +77,8 @@
   height: 100%;
 }
 
+.minute-maid #signin-frame,
+.minute-maid #gaia-signin-form-container,
 .full-width #signin-frame,
 .full-width #gaia-signin-form-container {
   width: 100%;
@@ -78,6 +94,8 @@
   width: 1px;
 }
 
+.gaia-signin .minute-maid #step-logo,
+.gaia-signin .minute-maid #gaia-signin-divider,
 .no-right-panel #gaia-signin-divider {
   display: none;
 }
@@ -91,6 +109,7 @@
 
 webview#signin-frame {
   display: block;
+  margin-left: 0;
   overflow: hidden;
   padding: 0;
 }
@@ -117,6 +136,10 @@ webview#signin-frame {
   text-align: center;
 }
 
+.minute-maid #enterprise-info-container {
+  display: none;
+}
+
 #enterprise-info-container #enterprise-info {
   display: inline-block;
 }

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

 <div class="step right hidden" id="gaia-signin" role="group"
     aria-live="polite" hidden>
+  <div id="close-button-item" hidden>
+  </div>
   <div class="step-contents">
     <div id="gaia-signin-form-container">
         <div id="login-box"><!-- Aligned with the login box in iframe --></div>

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

@@ -47,6 +47,12 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
      */
     isLocal_: false,
 
+    /**
+     * Whether MinuteMaid flow is active.
+     * @type {boolean}
+     */
+    isMinuteMaid: false,
+
     /**
      * Email of the user, which is logging in using offline mode.
      * @type {string}
@@ -138,6 +144,11 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
         e.preventDefault();
       });
 
+      $('close-button-item').addEventListener('click', function(e) {
+        this.cancel();
+        e.preventDefault();
+      }.bind(this));
+
       this.updateLocalizedContent();
     },
 
@@ -300,11 +311,20 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
       if (data.localizedStrings)
         params.localizedStrings = data.localizedStrings;
 
-      if (data.gaiaEndpoint) {
+      if (data.useMinuteMaid) {
+        this.isMinuteMaid = true;
+        $('inner-container').classList.add('minute-maid');
+        $('progress-dots').hidden = true;
         data.useEmbedded = false;
-        params.gaiaPath = data.gaiaEndpoint;
+        $('login-header-bar').showGuestButton = true;
       }
 
+      if (data.gaiaEndpoint)
+        params.gaiaPath = data.gaiaEndpoint;
+
+      $('login-header-bar').minuteMaid = this.isMinuteMaid;
+
+
       if (data.useEmbedded)
         params.gaiaPath = 'EmbeddedSignIn';
 
@@ -346,16 +366,21 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
         reasonLabel.hidden = true;
       }
 
-      $('createAccount').hidden = !data.createAccount;
-      $('guestSignin').hidden = !data.guestSignin;
-      $('createSupervisedUserPane').hidden = !data.supervisedUsersEnabled;
-
-      $('createSupervisedUserLinkPlaceholder').hidden =
-          !data.supervisedUsersCanCreate;
-      $('createSupervisedUserNoManagerText').hidden =
-          data.supervisedUsersCanCreate;
-      $('createSupervisedUserNoManagerText').textContent =
-          data.supervisedUsersRestrictionReason;
+      if (this.isMinuteMaid) {
+        $('login-header-bar').showCreateSupervisedButton =
+            data.supervisedUsersCanCreate;
+      } else {
+        $('createAccount').hidden = !data.createAccount;
+        $('guestSignin').hidden = !data.guestSignin;
+        $('createSupervisedUserPane').hidden = !data.supervisedUsersEnabled;
+
+        $('createSupervisedUserLinkPlaceholder').hidden =
+            !data.supervisedUsersCanCreate;
+        $('createSupervisedUserNoManagerText').hidden =
+            data.supervisedUsersCanCreate;
+        $('createSupervisedUserNoManagerText').textContent =
+            data.supervisedUsersRestrictionReason;
+      }
 
       var isEnrollingConsumerManagement = data.isEnrollingConsumerManagement;
       $('consumerManagementEnrollment').hidden = !isEnrollingConsumerManagement;
@@ -384,6 +409,7 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
     updateCancelButtonState: function() {
       this.cancelAllowed_ = this.isShowUsers_ && $('pod-row').pods.length;
       $('login-header-bar').allowCancel = this.cancelAllowed_;
+      $('close-button-item').hidden = !this.cancelAllowed_;
     },
 
     switchToFullTab: function() {
@@ -419,6 +445,7 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
       if (Oobe.getInstance().currentScreen === this) {
         Oobe.getInstance().updateScreenSize(this);
         $('login-header-bar').allowCancel = isSAML || this.cancelAllowed_;
+        $('close-button-item').hidden = !(isSAML || this.cancelAllowed_);
       }
     },
 

chrome/browser/ui/webui/chromeos/login/gaia_screen_handler.cc

@@ -53,6 +53,9 @@ const char kAuthIframeParentName[] = "signin-frame";
 const char kAuthIframeParentOrigin[] =
     "chrome-extension://mfffpogegjflfpflabcdkioaeobkgjik/";
 
+// TODO(rsorokin): Move this to the proper file.
+const char kMinuteMaidPath[] = "ChromeOsEmbeddedSetup";
+
 void UpdateAuthParams(base::DictionaryValue* params,
                       bool has_users,
                       bool is_enrolling_consumer_management) {
@@ -220,6 +223,14 @@ void GaiaScreenHandler::LoadGaia(const GaiaContext& context) {
 
   base::CommandLine* command_line = base::CommandLine::ForCurrentProcess();
 
+  if (StartupUtils::IsWebviewSigninEnabled()) {
+    params.SetBoolean("useMinuteMaid", true);
+    if (!command_line->HasSwitch(switches::kGaiaEndpointChromeOS)) {
+      command_line->AppendSwitchASCII(switches::kGaiaEndpointChromeOS,
+                                      kMinuteMaidPath);
+    }
+  }
+
   const GURL gaia_url =
       command_line->HasSwitch(::switches::kGaiaUrl)
           ? GURL(command_line->GetSwitchValueASCII(::switches::kGaiaUrl))
@@ -711,6 +722,10 @@ void GaiaScreenHandler::ShowGaiaScreenIfReady() {
 }
 
 void GaiaScreenHandler::MaybePreloadAuthExtension() {
+  // TODO(rsorokin): Revert that when issue with hidden webview load will be
+  // fixed.
+  if (StartupUtils::IsWebviewSigninEnabled())
+    return;
   VLOG(1) << "MaybePreloadAuthExtension() call.";
 
   // If cookies clearing was initiated or |dns_clear_task_running_| then auth

ui/login/screen_container.css

@@ -105,6 +105,17 @@
   top: 15px;
 }
 
+#close-button-item {
+  -webkit-margin-start: 17px;
+  display: flex;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  width: 30px;
+  height: 30px;
+  z-index: 1;
+}
+
 #progress-dots {
   -webkit-box-pack: center;
   -webkit-transition: opacity 200ms ease-in-out,