oobe: New layout login webdialog support.

Move size calculation of oobe-adaptive-dialog to C++ which enables
better fit for on-login OOBE dialog and unifying sizes between
fullscreen and on-login screen versions.

Recalculate all of the needed CSS vars based on dialog size.
Since the dialog is centered no need to provide paddings around dialog
for fullscreen OOBE.

Bug: 1151292
Change-Id: Icd6fad02255abf105c940ad610caad5b578c06ad
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567008Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Cr-Commit-Position: refs/heads/master@{#837100}

chrome/browser/chromeos/login/ui/login_display_host_webui.cc

@@ -796,10 +796,8 @@ void LoginDisplayHostWebUI::OnDisplayMetricsChanged(
   }
 
   if (GetOobeUI()) {
-    const gfx::Size& size = primary_display.size();
-    GetOobeUI()->GetCoreOobeView()->SetClientAreaSize(size.width(),
-                                                      size.height());
-
+    GetOobeUI()->GetCoreOobeView()->UpdateClientAreaSize(
+        primary_display.size());
     if (changed_metrics & DISPLAY_METRIC_PRIMARY)
       GetOobeUI()->OnDisplayConfigurationChanged();
   }

chrome/browser/chromeos/login/ui/oobe_dialog_size_utils.cc

@@ -7,22 +7,33 @@
 
 namespace chromeos {
 
-constexpr gfx::Size kMaxDialogSize{768, 768};
-// Min height should match --oobe-dialog-min-height;
-constexpr gfx::Size kMinDialogSize{464, 384};
-constexpr gfx::Insets kMinMargins{48, 48};
-
 namespace {
 
 constexpr int kDialogHeightForWidePadding = 640;
+constexpr double kEightPrecent = 0.08;
 
 }  // namespace
 
-void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
-                               int shelf_height,
-                               gfx::Rect* result,
-                               OobeDialogPaddingMode* result_padding) {
-  // Area to position dialog.
+constexpr gfx::Size kMaxDialogSize{768, 768};
+// Min height should match --oobe-dialog-min-height;
+constexpr gfx::Size kMinDialogSize{464, 384};
+constexpr gfx::Insets kMinMargins{48, 48};
+
+// Sizes come from specs except min widths which are taken as maximal zoomed
+// display widths of smallest device ChromeTab (960x600).
+constexpr gfx::Size kMaxLandscapeDialogSize{1040, 680};
+constexpr gfx::Size kMinLandscapeDialogSize{738, 504};
+constexpr gfx::Size kMaxPortraitDialogSize{680, 1040};
+constexpr gfx::Size kMinPortraitDialogSize{461, 704};
+
+gfx::Size CalculateOobeDialogSizeForWebDialog(const gfx::Rect& host_bounds,
+                                              int shelf_height,
+                                              bool is_horizontal,
+                                              bool is_new_oobe_layout_enabled) {
+  if (is_new_oobe_layout_enabled) {
+    return CalculateOobeDialogSize(host_bounds.size(), shelf_height,
+                                   is_horizontal);
+  }
   gfx::Rect available_area = host_bounds;
   available_area.Inset(0, 0, 0, shelf_height);
 
@@ -37,9 +48,40 @@ void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
   // Still, dialog should fit into available area.
   dialog_size.SetToMin(available_area.size());
 
+  return dialog_size;
+}
+
+gfx::Size CalculateOobeDialogSize(const gfx::Size& host_size,
+                                  int shelf_height,
+                                  bool is_horizontal) {
+  gfx::Size margin = ScaleToCeiledSize(host_size, kEightPrecent);
+  gfx::Size margins = margin + margin;
+  margins.SetToMax(kMinMargins.size());
+  margins.Enlarge(0, shelf_height);
+  gfx::Size result = host_size - margins;
+  if (is_horizontal) {
+    result.SetToMin(kMaxLandscapeDialogSize);
+    result.SetToMax(kMinLandscapeDialogSize);
+  } else {
+    result.SetToMin(kMaxPortraitDialogSize);
+    result.SetToMax(kMinPortraitDialogSize);
+  }
+  return result;
+}
+
+void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
+                               int shelf_height,
+                               bool is_horizontal,
+                               bool is_new_oobe_layout_enabled,
+                               gfx::Rect* result,
+                               OobeDialogPaddingMode* result_padding) {
+  // Area to position dialog.
+  *result = host_bounds;
+  result->Inset(0, 0, 0, shelf_height);
+
   // Center dialog within an available area.
-  *result = available_area;
-  result->ClampToCenteredSize(dialog_size);
+  result->ClampToCenteredSize(CalculateOobeDialogSizeForWebDialog(
+      host_bounds, shelf_height, is_horizontal, is_new_oobe_layout_enabled));
   if (!result_padding)
     return;
   if ((result->width() >= kMaxDialogSize.width()) &&

chrome/browser/chromeos/login/ui/oobe_dialog_size_utils.h

@@ -26,12 +26,25 @@ enum class OobeDialogPaddingMode {
 extern const gfx::Size kMaxDialogSize;
 extern const gfx::Size kMinDialogSize;
 extern const gfx::Insets kMinMargins;
+extern const gfx::Size kMaxLandscapeDialogSize;
+extern const gfx::Size kMinLandscapeDialogSize;
+extern const gfx::Size kMaxPortraitDialogSize;
+extern const gfx::Size kMinPortraitDialogSize;
+
+// Calculated the size of OOBE dialog for particular host_size. It is expected
+// that `host_size` is the hosting display size for fullscreen OOBE dialog and
+// available remainig size for on-login OOBE.
+gfx::Size CalculateOobeDialogSize(const gfx::Size& host_size,
+                                  int shelf_height,
+                                  bool is_horizontal);
 
 // Position OOBE dialog according to specs inside `host_bounds` excluding shelf.
 // `host_bounds` is in coordinates of oobe dialog widget. `result` is
 // in the same coordinates of `host_bounds`.
 void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
                                int shelf_height,
+                               bool is_horizontal,
+                               bool is_new_oobe_layout_enabled,
                                gfx::Rect* result,
                                OobeDialogPaddingMode* result_padding);
 

chrome/browser/chromeos/login/ui/oobe_ui_dialog_delegate.cc

@@ -24,6 +24,7 @@
 #include "chrome/browser/ui/webui/chromeos/login/core_oobe_handler.h"
 #include "chrome/browser/ui/webui/chromeos/login/gaia_screen_handler.h"
 #include "chrome/browser/ui/webui/chromeos/login/oobe_ui.h"
+#include "chromeos/constants/chromeos_features.h"
 #include "components/web_modal/web_contents_modal_dialog_manager.h"
 #include "content/public/browser/web_contents.h"
 #include "ui/aura/window.h"
@@ -154,7 +155,11 @@ class LayoutWidgetDelegateView : public views::WidgetDelegateView {
     gfx::Rect bounds;
     const int shelf_height =
         has_shelf_ ? ash::ShelfConfig::Get()->shelf_size() : 0;
-    CalculateOobeDialogBounds(GetContentsBounds(), shelf_height, &bounds,
+    const gfx::Size display_size =
+        display::Screen::GetScreen()->GetPrimaryDisplay().size();
+    const bool is_horizontal = display_size.width() > display_size.height();
+    CalculateOobeDialogBounds(GetContentsBounds(), shelf_height, is_horizontal,
+                              features::IsNewOobeLayoutEnabled(), &bounds,
                               &padding_);
 
     for (views::View* child : children()) {
@@ -505,6 +510,8 @@ void OobeUIDialogDelegate::OnViewBoundsChanged(views::View* observed_view) {
     return;
   GetOobeUI()->GetCoreOobeView()->SetDialogPaddingMode(
       ConvertDialogPaddingMode(layout_view_->padding()));
+  GetOobeUI()->GetCoreOobeView()->UpdateClientAreaSize(
+      layout_view_->GetContentsBounds().size());
 }
 
 void OobeUIDialogDelegate::OnKeyboardVisibilityChanged(bool visible) {

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

@@ -390,6 +390,15 @@ cr.define('cr.ui', function() {
     Oobe.getInstance().setOrientation(isHorizontal);
   };
 
+  /**
+   * Sets the required size of the oobe dialog.
+   * @param {number} width oobe dialog width
+   * @param {number} height oobe dialog height
+   */
+  Oobe.setDialogSize = function(width, height) {
+    Oobe.getInstance().setDialogSize(width, height);
+  };
+
   /**
    * Sets the hint for calculating OOBE dialog margins.
    * @param {OobeTypes.DialogPaddingMode} mode.

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

@@ -19,8 +19,6 @@
 
 html[new-layout] #outer-container {
   height: 100%;
-  margin-inline-end: var(--oobe-dialog-side-margin);
-  margin-inline-start: var(--oobe-dialog-side-margin);
   z-index: 1;
 }
 

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

@@ -26,6 +26,7 @@
 #include "chrome/browser/chromeos/login/lock/screen_locker.h"
 #include "chrome/browser/chromeos/login/screens/reset_screen.h"
 #include "chrome/browser/chromeos/login/ui/login_display_host.h"
+#include "chrome/browser/chromeos/login/ui/oobe_dialog_size_utils.h"
 #include "chrome/browser/chromeos/login/wizard_controller.h"
 #include "chrome/browser/chromeos/system/input_device_settings.h"
 #include "chrome/browser/ui/ash/ash_util.h"
@@ -124,7 +125,8 @@ void CoreOobeHandler::Initialize() {
   version_info_updater_.StartUpdate(false);
 #endif
   UpdateKeyboardState();
-  UpdateClientAreaSize();
+  UpdateClientAreaSize(
+      display::Screen::GetScreen()->GetPrimaryDisplay().size());
 }
 
 void CoreOobeHandler::GetAdditionalParameters(base::DictionaryValue* dict) {
@@ -219,6 +221,10 @@ void CoreOobeHandler::SetOrientation(bool is_horizontal) {
   CallJS("cr.ui.Oobe.setOrientation", is_horizontal);
 }
 
+void CoreOobeHandler::SetDialogSize(int width, int height) {
+  CallJS("cr.ui.Oobe.setDialogSize", width, height);
+}
+
 void CoreOobeHandler::HandleInitialized() {
   VLOG(3) << "CoreOobeHandler::HandleInitialized";
   GetOobeUI()->InitializeHandlers();
@@ -353,13 +359,18 @@ void CoreOobeHandler::OnTabletModeEnded() {
   CallJS("cr.ui.Oobe.setTabletModeState", false);
 }
 
-void CoreOobeHandler::UpdateClientAreaSize() {
-  const gfx::Size size =
-      display::Screen::GetScreen()->GetPrimaryDisplay().size();
+void CoreOobeHandler::UpdateClientAreaSize(const gfx::Size& size) {
   SetClientAreaSize(size.width(), size.height());
   SetShelfHeight(ash::ShelfConfig::Get()->shelf_size());
-  if (features::IsNewOobeLayoutEnabled())
-    SetOrientation(/*is_horizontal= */ size.width() > size.height());
+  if (features::IsNewOobeLayoutEnabled()) {
+    const gfx::Size display_size =
+        display::Screen::GetScreen()->GetPrimaryDisplay().size();
+    const bool is_horizontal = display_size.width() > display_size.height();
+    SetOrientation(is_horizontal);
+    const gfx::Size dialog_size = CalculateOobeDialogSize(
+        size, ash::ShelfConfig::Get()->shelf_size(), is_horizontal);
+    SetDialogSize(dialog_size.width(), dialog_size.height());
+  }
 }
 
 void CoreOobeHandler::SetDialogPaddingMode(

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

@@ -68,6 +68,8 @@ class CoreOobeView {
   virtual void UpdateKeyboardState() = 0;
   virtual void FocusReturned(bool reverse) = 0;
   virtual void SetOrientation(bool is_horizontal) = 0;
+  virtual void SetDialogSize(int width, int height) = 0;
+  virtual void UpdateClientAreaSize(const gfx::Size& size) = 0;
 };
 
 // The core handler for Javascript messages related to the "oobe" view.
@@ -140,6 +142,9 @@ class CoreOobeHandler : public BaseWebUIHandler,
   void ShowDeviceResetScreen() override;
   void FocusReturned(bool reverse) override;
   void SetOrientation(bool is_horizontal) override;
+  void SetDialogSize(int width, int height) override;
+  // Updates client area size based on the primary screen size.
+  void UpdateClientAreaSize(const gfx::Size& size) override;
 
   void UpdateKeyboardState() override;
 
@@ -184,9 +189,6 @@ class CoreOobeHandler : public BaseWebUIHandler,
   // Updates label with specified id with specified text.
   void UpdateLabel(const std::string& id, const std::string& text);
 
-  // Updates client area size based on the primary screen size.
-  void UpdateClientAreaSize();
-
   // True if we should show OOBE instead of login.
   bool show_oobe_ui_ = false;
 

ui/login/display_manager.js

@@ -294,6 +294,13 @@ cr.define('cr.ui.login', function() {
       }
     },
 
+    setDialogSize: function(width, height) {
+      document.documentElement.style.setProperty(
+        '--oobe-oobe-dialog-height-base', height + 'px');
+      document.documentElement.style.setProperty(
+        '--oobe-oobe-dialog-width-base', width + 'px');
+    },
+
     /**
      * Sets the hint for calculating OOBE dialog inner padding.
      * @param {OobeTypes.DialogPaddingMode} mode.

ui/login/oobe.css

@@ -9,6 +9,8 @@
 :root {
   --google-grey-700: rgb(95, 99, 104);
   --shelf-area-height-base: 57px;
+  --oobe-oobe-dialog-height-base: 504px;
+  --oobe-oobe-dialog-width-base: 461px;
 }
 
 html,
@@ -45,86 +47,35 @@ html[screen=oobe] body {
 }
 
 /* New default paddings and constants */
-html[orientation=horizontal] {
-  --oobe-adaptive-dialog-content-direction: row;
-  --oobe-adaptive-dialog-width: 808px;
-  --oobe-adaptive-dialog-height: 508px;
-  --oobe-adaptive-dialog-header-width: 302px;
-  --oobe-adaptive-dialog-item-alignment: unset;
+html {
+  --oobe-adaptive-dialog-width: var(--oobe-oobe-dialog-width-base);
+  --oobe-adaptive-dialog-height: var(--oobe-oobe-dialog-height-base);
   --oobe-adaptive-dialog-content-padding: 40px;
-  --oobe-subtitle-text-alignment: start;
-}
-
-@media screen and (min-width: 1080px) and (min-height: 675px) {
-  html[orientation=horizontal] {
-    --oobe-adaptive-dialog-width: 908px;
-    --oobe-adaptive-dialog-height: 547px;
-    --oobe-adaptive-dialog-header-width: 302px;
-  }
-}
-
-@media screen and (min-width: 1200px) and (min-height: 800px) {
-  html[orientation=horizontal] {
-    --oobe-adaptive-dialog-width: 1008px;
-    --oobe-adaptive-dialog-height: 656px;
-    --oobe-adaptive-dialog-header-width: 340px;
-  }
-}
-
-@media screen and (min-width: 1333px) and (min-height: 888px) {
-  html[orientation=horizontal] {
-    --oobe-adaptive-dialog-width: 1040px;
-    --oobe-adaptive-dialog-height: 680px;
-    --oobe-adaptive-dialog-header-width: 346px;
-  }
-}
-
-html[orientation=vertical] {
-  --oobe-adaptive-dialog-content-direction: column;
-  --oobe-adaptive-dialog-width: 504px;
-  --oobe-adaptive-dialog-height: 796px;
-  --oobe-adaptive-dialog-header-width: 302px;
-  --oobe-adaptive-dialog-item-alignment: center;
-  --oobe-adaptive-dialog-content-padding: 40px;
-  --oobe-subtitle-text-alignment: center;
-}
-
-
-@media screen and (min-width: 675px) and (min-height: 1080px) {
-  html[orientation=vertical] {
-    --oobe-adaptive-dialog-width: 567px;
-    --oobe-adaptive-dialog-height: 902px;
-    --oobe-adaptive-dialog-header-width: 302px;
-  }
-}
-
-@media screen and (min-width: 800px) and (min-height: 1200px) {
-  html[orientation=vertical] {
-    --oobe-adaptive-dialog-width: 672px;
-    --oobe-adaptive-dialog-height: 1008px;
-    --oobe-adaptive-dialog-header-width: 336px;
-  }
-}
-
-@media screen and (min-width: 888px) and (min-height: 1333px) {
-  html[orientation=vertical] {
-    --oobe-adaptive-dialog-width: 746px;
-    --oobe-adaptive-dialog-height: 1040px;
-    --oobe-adaptive-dialog-header-width: 347px;
-  }
 }
 
 html[orientation=horizontal] {
+  --oobe-adaptive-dialog-content-direction: row;
+  --oobe-adaptive-dialog-item-alignment: unset;
+  --oobe-subtitle-text-alignment: start;
   --oobe-adaptive-dialog-content-width: calc(
       var(--oobe-adaptive-dialog-width) -
       4 * var(--oobe-adaptive-dialog-content-padding) -
       var(--oobe-adaptive-dialog-header-width));
+  /* Header width takes 40% of the width remaining after applying padding */
+  --oobe-adaptive-dialog-header-width: clamp(302px,
+      calc(0.4 * (var(--oobe-adaptive-dialog-width) -
+      4 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
 }
 
 html[orientation=vertical] {
-  --oobe-adaptive-dialog-content-width: calc(
-      var(--oobe-adaptive-dialog-width) -
-      2 * var(--oobe-adaptive-dialog-content-padding));
+  --oobe-adaptive-dialog-content-direction: column;
+  --oobe-adaptive-dialog-item-alignment: center;
+  --oobe-subtitle-text-alignment: center;
+  --oobe-adaptive-dialog-content-width: 100%;
+  /* Header width takes 40% of the width remaining after applying padding */
+  --oobe-adaptive-dialog-header-width: clamp(302px,
+      calc(0.4 * (var(--oobe-adaptive-dialog-width) -
+      2 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
 }
 
 /* Padding defaults */