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,
+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,
-                               gfx::Rect* result,
-                               OobeDialogPaddingMode* result_padding) {
-  // Area to position dialog.
+                                              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_dialog_size_utils_unittest.cc

@@ -7,6 +7,8 @@
 #include <stddef.h>
 
 #include "base/macros.h"
+#include "base/test/scoped_feature_list.h"
+#include "chromeos/constants/chromeos_features.h"
 #include "testing/gtest/include/gtest/gtest.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/geometry/rect.h"
@@ -76,7 +78,9 @@ TEST_F(OobeDialogSizeUtilsTest, Chromebook) {
   gfx::Rect dialog;
   OobeDialogPaddingMode padding;
 
-  CalculateOobeDialogBounds(usual_device, kShelfHeight, &dialog, &padding);
+  CalculateOobeDialogBounds(
+      usual_device, kShelfHeight, /* is_horizontal = */ false,
+      /* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
   ValidateDialog(SizeWithoutShelf(usual_device), dialog);
   EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_WIDE);
 }
@@ -87,7 +91,9 @@ TEST_F(OobeDialogSizeUtilsTest, ChromebookVirtualKeyboard) {
   gfx::Rect dialog;
   OobeDialogPaddingMode padding;
 
-  CalculateOobeDialogBounds(usual_device_with_keyboard, 0, &dialog, &padding);
+  CalculateOobeDialogBounds(
+      usual_device_with_keyboard, 0, /* is_horizontal = */ false,
+      /* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
   ValidateDialog(usual_device_with_keyboard, dialog);
   EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
 }
@@ -98,7 +104,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontal) {
   gfx::Rect dialog;
   OobeDialogPaddingMode padding;
 
-  CalculateOobeDialogBounds(tablet_device, kShelfHeight, &dialog, &padding);
+  CalculateOobeDialogBounds(
+      tablet_device, kShelfHeight, /* is_horizontal = */ false,
+      /* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
   ValidateDialog(SizeWithoutShelf(tablet_device), dialog);
   EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
 }
@@ -110,7 +118,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontalVirtualKeyboard) {
   gfx::Rect dialog;
   OobeDialogPaddingMode padding;
 
-  CalculateOobeDialogBounds(tablet_device, 0, &dialog, &padding);
+  CalculateOobeDialogBounds(tablet_device, 0, /* is_horizontal = */ false,
+                            /* is_new_oobe_layout_enabled = */ false, &dialog,
+                            &padding);
   ValidateDialog(tablet_device, dialog);
   EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
 }
@@ -122,7 +132,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontalDockedMagnifier) {
   gfx::Rect dialog;
   OobeDialogPaddingMode padding;
 
-  CalculateOobeDialogBounds(tablet_device, 0, &dialog, &padding);
+  CalculateOobeDialogBounds(tablet_device, 0, /* is_horizontal = */ false,
+                            /* is_new_oobe_layout_enabled = */ false, &dialog,
+                            &padding);
   ValidateDialog(tablet_device, dialog);
   EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
 }
@@ -136,7 +148,9 @@ TEST_F(OobeDialogSizeUtilsTest, TabletHorizontalVirtualKeyboardMagnifier) {
   gfx::Rect dialog;
   OobeDialogPaddingMode padding;
 
-  CalculateOobeDialogBounds(tablet_device, 0, &dialog, &padding);
+  CalculateOobeDialogBounds(tablet_device, 0, /* is_horizontal = */ false,
+                            /* is_new_oobe_layout_enabled = */ false, &dialog,
+                            &padding);
   ValidateDialog(tablet_device, dialog);
   EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
 }
@@ -147,9 +161,198 @@ TEST_F(OobeDialogSizeUtilsTest, TabletVertical) {
   gfx::Rect dialog;
   OobeDialogPaddingMode padding;
 
-  CalculateOobeDialogBounds(tablet_device, kShelfHeight, &dialog, &padding);
+  CalculateOobeDialogBounds(
+      tablet_device, kShelfHeight, /* is_horizontal = */ false,
+      /* is_new_oobe_layout_enabled = */ false, &dialog, &padding);
   ValidateDialog(SizeWithoutShelf(tablet_device), dialog);
   EXPECT_EQ(padding, OobeDialogPaddingMode::PADDING_NARROW);
 }
 
+class OobeDialogSizeUtilsTestNewLayout : public testing::Test {
+ public:
+  OobeDialogSizeUtilsTestNewLayout() = default;
+
+  ~OobeDialogSizeUtilsTestNewLayout() override = default;
+
+  void ValidateDialog(const gfx::Rect& display,
+                      const gfx::Rect& area,
+                      const gfx::Rect& dialog) {
+    // Dialog should fully fit into the area.
+    EXPECT_TRUE(area.Contains(dialog));
+
+    // Dialog is centered in area.
+    EXPECT_EQ(area.CenterPoint(), dialog.CenterPoint());
+
+    const gfx::Size min_dialog_size = GetMinDialogSize(display);
+    const gfx::Size max_dialog_size = GetMaxDialogSize(display);
+    EXPECT_LE(dialog.width(), max_dialog_size.width());
+    EXPECT_LE(dialog.height(), max_dialog_size.height());
+
+    // If there is at least some space, we should have margins.
+    const gfx::Size margins = ExpectedMargins(display.size());
+    if (dialog.width() > min_dialog_size.width()) {
+      EXPECT_EQ(dialog.x() + (area.right() - dialog.right()), margins.width());
+    }
+    if (dialog.height() > min_dialog_size.height()) {
+      EXPECT_EQ(dialog.y() + (area.bottom() - dialog.bottom()),
+                margins.height());
+    }
+    // If dialog size is lesser than minimum size, there should be no margins
+    if (dialog.width() < min_dialog_size.width()) {
+      EXPECT_EQ(dialog.x(), area.x());
+      EXPECT_EQ(dialog.right(), area.right());
+    }
+    if (dialog.height() < min_dialog_size.height()) {
+      EXPECT_EQ(dialog.y(), area.y());
+      EXPECT_EQ(dialog.bottom(), area.bottom());
+    }
+  }
+
+  gfx::Size GetMinDialogSize(const gfx::Rect& display) {
+    if (IsHorizontal(display)) {
+      return kMinLandscapeDialogSize;
+    }
+    return kMinPortraitDialogSize;
+  }
+
+  gfx::Size GetMaxDialogSize(const gfx::Rect& display) {
+    if (IsHorizontal(display)) {
+      return kMaxLandscapeDialogSize;
+    }
+    return kMaxPortraitDialogSize;
+  }
+
+  gfx::Size ExpectedMargins(const gfx::Size& display_size) {
+    gfx::Size margin = ScaleToCeiledSize(display_size, 0.08);
+    gfx::Size margins = margin + margin;
+    margins.SetToMax(kMinMargins.size());
+    return margins;
+  }
+
+  gfx::Rect SizeWithoutShelf(const gfx::Rect& area) const {
+    return gfx::Rect(area.width(), area.height() - kShelfHeight);
+  }
+
+  gfx::Rect SizeWithoutKeyboard(const gfx::Rect& area) const {
+    return gfx::Rect(area.width(), area.height() - kVirtualKeyboardHeight);
+  }
+
+  gfx::Rect SizeWithoutDockedMagnifier(const gfx::Rect& area) const {
+    return gfx::Rect(area.width(), area.height() - kDockedMagnifierHeight);
+  }
+
+  bool IsHorizontal(const gfx::Rect& area) const {
+    return area.width() > area.height();
+  }
+
+ private:
+  base::test::ScopedFeatureList feature_list_;
+  DISALLOW_COPY_AND_ASSIGN(OobeDialogSizeUtilsTestNewLayout);
+};
+
+// We have plenty of space on the screen.
+TEST_F(OobeDialogSizeUtilsTestNewLayout, Chromebook) {
+  gfx::Rect usual_device(1200, 800);
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      usual_device, kShelfHeight, IsHorizontal(usual_device),
+      /* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
+  ValidateDialog(usual_device, SizeWithoutShelf(usual_device), dialog);
+}
+
+// We have plenty of space on the screen, but virtual keyboard takes some space.
+TEST_F(OobeDialogSizeUtilsTestNewLayout, ChromebookVirtualKeyboard) {
+  gfx::Rect usual_device(1200, 800);
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      SizeWithoutKeyboard(usual_device), 0, IsHorizontal(usual_device),
+      /* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
+  ValidateDialog(usual_device, SizeWithoutKeyboard(usual_device), dialog);
+}
+
+// Tablet device can have smaller screen size.
+TEST_F(OobeDialogSizeUtilsTestNewLayout, TabletHorizontal) {
+  gfx::Rect tablet_device(1080, 675);
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      tablet_device, kShelfHeight, IsHorizontal(tablet_device),
+      /* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
+  ValidateDialog(tablet_device, SizeWithoutShelf(tablet_device), dialog);
+}
+
+// Tablet device in horizontal mode with virtual keyboard have restricted
+// vertical space.
+TEST_F(OobeDialogSizeUtilsTestNewLayout, TabletHorizontalVirtualKeyboard) {
+  gfx::Rect tablet_device(1080, 675);
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      SizeWithoutKeyboard(tablet_device), 0, IsHorizontal(tablet_device),
+      /* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
+  ValidateDialog(tablet_device, SizeWithoutKeyboard(tablet_device), dialog);
+}
+
+// Tablet device in horizontal mode with docked magnifier have restricted
+// vertical space.
+TEST_F(OobeDialogSizeUtilsTestNewLayout, TabletHorizontalDockedMagnifier) {
+  gfx::Rect tablet_device(1080, 675);
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      SizeWithoutDockedMagnifier(tablet_device), 0, IsHorizontal(tablet_device),
+      /* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
+  ValidateDialog(tablet_device, SizeWithoutDockedMagnifier(tablet_device),
+                 dialog);
+}
+
+// Tablet device in horizontal mode with virtual keyboard and docked
+// magnifier results in very few vertical space.
+TEST_F(OobeDialogSizeUtilsTestNewLayout,
+       TabletHorizontalVirtualKeyboardMagnifier) {
+  gfx::Rect tablet_device(1080, 675);
+
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      SizeWithoutDockedMagnifier(SizeWithoutKeyboard(tablet_device)), 0,
+      IsHorizontal(tablet_device), /* is_new_oobe_layout_enabled = */ true,
+      &dialog, &padding);
+  ValidateDialog(tablet_device,
+                 SizeWithoutDockedMagnifier(SizeWithoutKeyboard(tablet_device)),
+                 dialog);
+}
+
+// Tablet in vertical mode puts some strain on dialog width.
+TEST_F(OobeDialogSizeUtilsTestNewLayout, ChromeTabVertical) {
+  gfx::Rect tablet_device(461, 738);
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      tablet_device, kShelfHeight, IsHorizontal(tablet_device),
+      /* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
+  ValidateDialog(tablet_device, SizeWithoutShelf(tablet_device), dialog);
+}
+
+// Tablet in horziontal mode puts some strain on dialog width.
+TEST_F(OobeDialogSizeUtilsTestNewLayout, ChromeTabHorizontal) {
+  gfx::Rect tablet_device(738, 461);
+  gfx::Rect dialog;
+  OobeDialogPaddingMode padding;
+
+  CalculateOobeDialogBounds(
+      tablet_device, kShelfHeight, IsHorizontal(tablet_device),
+      /* is_new_oobe_layout_enabled = */ true, &dialog, &padding);
+  ValidateDialog(tablet_device, SizeWithoutShelf(tablet_device), dialog);
+}
+
 }  // namespace chromeos

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 */