Propagate shelf height to OOBE/login webui

Bug: 999477
Change-Id: Ifd9586437b8116beb9e61d893f936d8043ce254a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1778544
Commit-Queue: Denis Kuznetsov <antrim@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#694274}

ash/BUILD.gn

@@ -64,6 +64,7 @@ component("ash") {
     "screenshot_delegate.h",
     "session/session_controller_impl.h",
     "shelf/shelf.h",
+    "shelf/shelf_constants.h",
     "shelf/shelf_widget.h",
     "shell.h",
     "shell_delegate.h",
@@ -586,7 +587,6 @@ component("ash") {
     "shelf/shelf_button_delegate.h",
     "shelf/shelf_button_pressed_metric_tracker.cc",
     "shelf/shelf_button_pressed_metric_tracker.h",
-    "shelf/shelf_constants.h",
     "shelf/shelf_container_view.cc",
     "shelf/shelf_container_view.h",
     "shelf/shelf_context_menu_model.cc",

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

@@ -372,6 +372,14 @@ cr.define('cr.ui', function() {
     Oobe.getInstance().setClientAreaSize(width, height);
   };
 
+  /**
+   * Sets the current height of the shelf area.
+   * @param {number} height current shelf height
+   */
+  Oobe.setShelfHeight = function(height) {
+    Oobe.getInstance().setShelfHeight(height);
+  };
+
   /**
    * Get the primary display's name.
    *

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

@@ -5,7 +5,7 @@
 
 #outer-container {
   align-items: center;
-  bottom: 57px;  /* Leave space for the header bar */
+  bottom: var(--shelf-area-height);  /* Leave space for the shelf */
   display: flex;
   justify-content: center;
   left: 0;
@@ -18,7 +18,6 @@
 }
 
 .oobe-display #outer-container {
-  bottom: 47px; /* header-bar is 47 pixels high during OOBE */
   perspective: 600px;
 }
 

chrome/browser/ui/webui/chromeos/login/DEPS

@@ -2,6 +2,7 @@ specific_include_rules = {
   # TODO(mash): Fix. https://crbug.com/856375.
   "core_oobe_handler\.cc": [
     "+ash/shell.h",
+    "+ash/shelf/shelf_constants.h",
   ],
   # Tests.
   "oobe_display_chooser_browsertest\.cc": [

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

@@ -10,6 +10,7 @@
 #include "ash/public/cpp/event_rewriter_controller.h"
 #include "ash/public/cpp/tablet_mode.h"
 #include "ash/public/mojom/constants.mojom.h"
+#include "ash/shelf/shelf_constants.h"
 #include "ash/shell.h"
 #include "base/bind.h"
 #include "base/command_line.h"
@@ -305,6 +306,10 @@ void CoreOobeHandler::SetClientAreaSize(int width, int height) {
   CallJS("cr.ui.Oobe.setClientAreaSize", width, height);
 }
 
+void CoreOobeHandler::SetShelfHeight(int height) {
+  CallJS("cr.ui.Oobe.setShelfHeight", height);
+}
+
 void CoreOobeHandler::HandleInitialized() {
   GetOobeUI()->InitializeHandlers();
   AllowJavascript();
@@ -546,6 +551,7 @@ void CoreOobeHandler::UpdateClientAreaSize() {
   const gfx::Size size =
       display::Screen::GetScreen()->GetPrimaryDisplay().size();
   SetClientAreaSize(size.width(), size.height());
+  SetShelfHeight(ash::ShelfConstants::shelf_size());
 }
 
 void CoreOobeHandler::OnOobeConfigurationChanged() {

chrome/browser/ui/webui/chromeos/login/core_oobe_handler.h

@@ -58,6 +58,7 @@ class CoreOobeView {
   virtual void ReloadEulaContent(const base::DictionaryValue& dictionary) = 0;
   virtual void SetVirtualKeyboardShown(bool shown) = 0;
   virtual void SetClientAreaSize(int width, int height) = 0;
+  virtual void SetShelfHeight(int height) = 0;
   virtual void ShowDeviceResetScreen() = 0;
   virtual void ShowEnableDebuggingScreen() = 0;
   virtual void InitDemoModeDetection() = 0;
@@ -137,6 +138,7 @@ class CoreOobeHandler : public BaseWebUIHandler,
   void ReloadEulaContent(const base::DictionaryValue& dictionary) override;
   void SetVirtualKeyboardShown(bool displayed) override;
   void SetClientAreaSize(int width, int height) override;
+  void SetShelfHeight(int height) override;
   void ShowDeviceResetScreen() override;
   void ShowEnableDebuggingScreen() override;
   void ShowActiveDirectoryPasswordChangeScreen(

ui/login/display_manager.js

@@ -312,6 +312,15 @@ cr.define('cr.ui.login', function() {
       clientArea.style.minHeight = cr.ui.toCssPx(height - bottom);
     },
 
+    /**
+     * Sets the current height of the shelf area.
+     * @param {number} height current shelf height
+     */
+    setShelfHeight: function(height) {
+      document.documentElement.style.setProperty(
+          '--shelf-area-height', height + 'px');
+    },
+
     /**
      * Toggles background of main body between transparency and solid.
      * @param {boolean} solid Whether to show a solid background.

ui/login/oobe.css

@@ -6,6 +6,10 @@
  * sign in and lock screens.
  */
 
+:root {
+  --shelf-area-height: 57px;
+}
+
 html,
 body {
   height: 100%;

ui/login/screen_container.css

@@ -6,7 +6,7 @@
 #outer-container {
   -webkit-box-align: center;
   -webkit-box-pack: center;
-  bottom: 57px;  /* Leave space for the header bar */
+  bottom: var(--shelf-area-height);  /* Leave space for the header bar */
   display: -webkit-box;
   left: 0;
   min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */