Commit 7b354f76 authored by Roman Aleksandrov's avatar Roman Aleksandrov Committed by Chromium LUCI CQ

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: default avatarDenis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: default avatarRoman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Cr-Commit-Position: refs/heads/master@{#837100}
parent 2b716a94
...@@ -796,10 +796,8 @@ void LoginDisplayHostWebUI::OnDisplayMetricsChanged( ...@@ -796,10 +796,8 @@ void LoginDisplayHostWebUI::OnDisplayMetricsChanged(
} }
if (GetOobeUI()) { if (GetOobeUI()) {
const gfx::Size& size = primary_display.size(); GetOobeUI()->GetCoreOobeView()->UpdateClientAreaSize(
GetOobeUI()->GetCoreOobeView()->SetClientAreaSize(size.width(), primary_display.size());
size.height());
if (changed_metrics & DISPLAY_METRIC_PRIMARY) if (changed_metrics & DISPLAY_METRIC_PRIMARY)
GetOobeUI()->OnDisplayConfigurationChanged(); GetOobeUI()->OnDisplayConfigurationChanged();
} }
......
...@@ -7,22 +7,33 @@ ...@@ -7,22 +7,33 @@
namespace chromeos { 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 { namespace {
constexpr int kDialogHeightForWidePadding = 640; constexpr int kDialogHeightForWidePadding = 640;
constexpr double kEightPrecent = 0.08;
} // namespace } // 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, int shelf_height,
gfx::Rect* result, bool is_horizontal,
OobeDialogPaddingMode* result_padding) { bool is_new_oobe_layout_enabled) {
// Area to position dialog. if (is_new_oobe_layout_enabled) {
return CalculateOobeDialogSize(host_bounds.size(), shelf_height,
is_horizontal);
}
gfx::Rect available_area = host_bounds; gfx::Rect available_area = host_bounds;
available_area.Inset(0, 0, 0, shelf_height); available_area.Inset(0, 0, 0, shelf_height);
...@@ -37,9 +48,40 @@ void CalculateOobeDialogBounds(const gfx::Rect& host_bounds, ...@@ -37,9 +48,40 @@ void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
// Still, dialog should fit into available area. // Still, dialog should fit into available area.
dialog_size.SetToMin(available_area.size()); 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. // Center dialog within an available area.
*result = available_area; result->ClampToCenteredSize(CalculateOobeDialogSizeForWebDialog(
result->ClampToCenteredSize(dialog_size); host_bounds, shelf_height, is_horizontal, is_new_oobe_layout_enabled));
if (!result_padding) if (!result_padding)
return; return;
if ((result->width() >= kMaxDialogSize.width()) && if ((result->width() >= kMaxDialogSize.width()) &&
......
...@@ -26,12 +26,25 @@ enum class OobeDialogPaddingMode { ...@@ -26,12 +26,25 @@ enum class OobeDialogPaddingMode {
extern const gfx::Size kMaxDialogSize; extern const gfx::Size kMaxDialogSize;
extern const gfx::Size kMinDialogSize; extern const gfx::Size kMinDialogSize;
extern const gfx::Insets kMinMargins; 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. // Position OOBE dialog according to specs inside `host_bounds` excluding shelf.
// `host_bounds` is in coordinates of oobe dialog widget. `result` is // `host_bounds` is in coordinates of oobe dialog widget. `result` is
// in the same coordinates of `host_bounds`. // in the same coordinates of `host_bounds`.
void CalculateOobeDialogBounds(const gfx::Rect& host_bounds, void CalculateOobeDialogBounds(const gfx::Rect& host_bounds,
int shelf_height, int shelf_height,
bool is_horizontal,
bool is_new_oobe_layout_enabled,
gfx::Rect* result, gfx::Rect* result,
OobeDialogPaddingMode* result_padding); OobeDialogPaddingMode* result_padding);
......
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
#include "chrome/browser/ui/webui/chromeos/login/core_oobe_handler.h" #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/gaia_screen_handler.h"
#include "chrome/browser/ui/webui/chromeos/login/oobe_ui.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 "components/web_modal/web_contents_modal_dialog_manager.h"
#include "content/public/browser/web_contents.h" #include "content/public/browser/web_contents.h"
#include "ui/aura/window.h" #include "ui/aura/window.h"
...@@ -154,7 +155,11 @@ class LayoutWidgetDelegateView : public views::WidgetDelegateView { ...@@ -154,7 +155,11 @@ class LayoutWidgetDelegateView : public views::WidgetDelegateView {
gfx::Rect bounds; gfx::Rect bounds;
const int shelf_height = const int shelf_height =
has_shelf_ ? ash::ShelfConfig::Get()->shelf_size() : 0; 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_); &padding_);
for (views::View* child : children()) { for (views::View* child : children()) {
...@@ -505,6 +510,8 @@ void OobeUIDialogDelegate::OnViewBoundsChanged(views::View* observed_view) { ...@@ -505,6 +510,8 @@ void OobeUIDialogDelegate::OnViewBoundsChanged(views::View* observed_view) {
return; return;
GetOobeUI()->GetCoreOobeView()->SetDialogPaddingMode( GetOobeUI()->GetCoreOobeView()->SetDialogPaddingMode(
ConvertDialogPaddingMode(layout_view_->padding())); ConvertDialogPaddingMode(layout_view_->padding()));
GetOobeUI()->GetCoreOobeView()->UpdateClientAreaSize(
layout_view_->GetContentsBounds().size());
} }
void OobeUIDialogDelegate::OnKeyboardVisibilityChanged(bool visible) { void OobeUIDialogDelegate::OnKeyboardVisibilityChanged(bool visible) {
......
...@@ -390,6 +390,15 @@ cr.define('cr.ui', function() { ...@@ -390,6 +390,15 @@ cr.define('cr.ui', function() {
Oobe.getInstance().setOrientation(isHorizontal); 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. * Sets the hint for calculating OOBE dialog margins.
* @param {OobeTypes.DialogPaddingMode} mode. * @param {OobeTypes.DialogPaddingMode} mode.
......
...@@ -19,8 +19,6 @@ ...@@ -19,8 +19,6 @@
html[new-layout] #outer-container { html[new-layout] #outer-container {
height: 100%; height: 100%;
margin-inline-end: var(--oobe-dialog-side-margin);
margin-inline-start: var(--oobe-dialog-side-margin);
z-index: 1; z-index: 1;
} }
......
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
#include "chrome/browser/chromeos/login/lock/screen_locker.h" #include "chrome/browser/chromeos/login/lock/screen_locker.h"
#include "chrome/browser/chromeos/login/screens/reset_screen.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/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/login/wizard_controller.h"
#include "chrome/browser/chromeos/system/input_device_settings.h" #include "chrome/browser/chromeos/system/input_device_settings.h"
#include "chrome/browser/ui/ash/ash_util.h" #include "chrome/browser/ui/ash/ash_util.h"
...@@ -124,7 +125,8 @@ void CoreOobeHandler::Initialize() { ...@@ -124,7 +125,8 @@ void CoreOobeHandler::Initialize() {
version_info_updater_.StartUpdate(false); version_info_updater_.StartUpdate(false);
#endif #endif
UpdateKeyboardState(); UpdateKeyboardState();
UpdateClientAreaSize(); UpdateClientAreaSize(
display::Screen::GetScreen()->GetPrimaryDisplay().size());
} }
void CoreOobeHandler::GetAdditionalParameters(base::DictionaryValue* dict) { void CoreOobeHandler::GetAdditionalParameters(base::DictionaryValue* dict) {
...@@ -219,6 +221,10 @@ void CoreOobeHandler::SetOrientation(bool is_horizontal) { ...@@ -219,6 +221,10 @@ void CoreOobeHandler::SetOrientation(bool is_horizontal) {
CallJS("cr.ui.Oobe.setOrientation", 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() { void CoreOobeHandler::HandleInitialized() {
VLOG(3) << "CoreOobeHandler::HandleInitialized"; VLOG(3) << "CoreOobeHandler::HandleInitialized";
GetOobeUI()->InitializeHandlers(); GetOobeUI()->InitializeHandlers();
...@@ -353,13 +359,18 @@ void CoreOobeHandler::OnTabletModeEnded() { ...@@ -353,13 +359,18 @@ void CoreOobeHandler::OnTabletModeEnded() {
CallJS("cr.ui.Oobe.setTabletModeState", false); CallJS("cr.ui.Oobe.setTabletModeState", false);
} }
void CoreOobeHandler::UpdateClientAreaSize() { void CoreOobeHandler::UpdateClientAreaSize(const gfx::Size& size) {
const gfx::Size size =
display::Screen::GetScreen()->GetPrimaryDisplay().size();
SetClientAreaSize(size.width(), size.height()); SetClientAreaSize(size.width(), size.height());
SetShelfHeight(ash::ShelfConfig::Get()->shelf_size()); SetShelfHeight(ash::ShelfConfig::Get()->shelf_size());
if (features::IsNewOobeLayoutEnabled()) if (features::IsNewOobeLayoutEnabled()) {
SetOrientation(/*is_horizontal= */ size.width() > size.height()); 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( void CoreOobeHandler::SetDialogPaddingMode(
......
...@@ -68,6 +68,8 @@ class CoreOobeView { ...@@ -68,6 +68,8 @@ class CoreOobeView {
virtual void UpdateKeyboardState() = 0; virtual void UpdateKeyboardState() = 0;
virtual void FocusReturned(bool reverse) = 0; virtual void FocusReturned(bool reverse) = 0;
virtual void SetOrientation(bool is_horizontal) = 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. // The core handler for Javascript messages related to the "oobe" view.
...@@ -140,6 +142,9 @@ class CoreOobeHandler : public BaseWebUIHandler, ...@@ -140,6 +142,9 @@ class CoreOobeHandler : public BaseWebUIHandler,
void ShowDeviceResetScreen() override; void ShowDeviceResetScreen() override;
void FocusReturned(bool reverse) override; void FocusReturned(bool reverse) override;
void SetOrientation(bool is_horizontal) 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; void UpdateKeyboardState() override;
...@@ -184,9 +189,6 @@ class CoreOobeHandler : public BaseWebUIHandler, ...@@ -184,9 +189,6 @@ class CoreOobeHandler : public BaseWebUIHandler,
// Updates label with specified id with specified text. // Updates label with specified id with specified text.
void UpdateLabel(const std::string& id, const std::string& 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. // True if we should show OOBE instead of login.
bool show_oobe_ui_ = false; bool show_oobe_ui_ = false;
......
...@@ -294,6 +294,13 @@ cr.define('cr.ui.login', function() { ...@@ -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. * Sets the hint for calculating OOBE dialog inner padding.
* @param {OobeTypes.DialogPaddingMode} mode. * @param {OobeTypes.DialogPaddingMode} mode.
......
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
:root { :root {
--google-grey-700: rgb(95, 99, 104); --google-grey-700: rgb(95, 99, 104);
--shelf-area-height-base: 57px; --shelf-area-height-base: 57px;
--oobe-oobe-dialog-height-base: 504px;
--oobe-oobe-dialog-width-base: 461px;
} }
html, html,
...@@ -45,86 +47,35 @@ html[screen=oobe] body { ...@@ -45,86 +47,35 @@ html[screen=oobe] body {
} }
/* New default paddings and constants */ /* New default paddings and constants */
html[orientation=horizontal] { html {
--oobe-adaptive-dialog-content-direction: row; --oobe-adaptive-dialog-width: var(--oobe-oobe-dialog-width-base);
--oobe-adaptive-dialog-width: 808px; --oobe-adaptive-dialog-height: var(--oobe-oobe-dialog-height-base);
--oobe-adaptive-dialog-height: 508px;
--oobe-adaptive-dialog-header-width: 302px;
--oobe-adaptive-dialog-item-alignment: unset;
--oobe-adaptive-dialog-content-padding: 40px; --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] { 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( --oobe-adaptive-dialog-content-width: calc(
var(--oobe-adaptive-dialog-width) - var(--oobe-adaptive-dialog-width) -
4 * var(--oobe-adaptive-dialog-content-padding) - 4 * var(--oobe-adaptive-dialog-content-padding) -
var(--oobe-adaptive-dialog-header-width)); 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] { html[orientation=vertical] {
--oobe-adaptive-dialog-content-width: calc( --oobe-adaptive-dialog-content-direction: column;
var(--oobe-adaptive-dialog-width) - --oobe-adaptive-dialog-item-alignment: center;
2 * var(--oobe-adaptive-dialog-content-padding)); --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 */ /* Padding defaults */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment