Commit 4e320ad3 authored by Tommy C. Li's avatar Tommy C. Li Committed by Commit Bot

Omnibox UI Refresh: Add right-padding to the match cell of suggestions.

This CL adds an 8dp right-padding to the match cell of suggestions.

This CL also makes the right-padding of the tab-switch to be the same as
the match cell. Previously it was set to be the same as the vertical
padding.

That should also increase layout predictability in the face of very
tall glyphs.

Bug: 863982
Change-Id: I1bdbfc0062d1ddeba57d21cc2813ed30d42548c7
Reviewed-on: https://chromium-review.googlesource.com/1141288
Commit-Queue: Tommy Li <tommycli@chromium.org>
Reviewed-by: default avatarJustin Donnelly <jdonnelly@chromium.org>
Cr-Commit-Position: refs/heads/master@{#576162}
parent ba46e33a
......@@ -74,15 +74,12 @@ int HorizontalPadding() {
// Omnibox icon. The alignment offset (labeled "a" in the diagram below) and
// padding (p) are used thusly:
//
// +---+---+------+---+-------------------------------+----+
// | a | p | icon | p | "result text" | p* |
// +---+---+------+---+-------------------------------+----+
// +---+---+------+---+-------------------------------+---+
// | a | p | icon | p | "result text" | p |
// +---+---+------+---+-------------------------------+---+
//
// I.e. the icon alignment offset is only used on the starting edge as a
// workaround to get the text input bar and the drop down contents to line up.
//
// *The last padding is not present.
// TODO(dschuyler): add end margin/padding.
int GetIconAlignmentOffset() {
// The horizontal bounds of a result is the width of the selection highlight
// (i.e. the views::Background). The traditional popup is designed with its
......@@ -103,13 +100,13 @@ int GetIconAlignmentOffset() {
// |is_two_line| indicates whether the vertical margin is for a omnibox
// result displaying an answer to the query.
gfx::Insets GetMarginInsets(int text_height, bool is_two_line) {
// TODO(dschuyler): Consider adding a right-hand margin to each |return|.
// Non-Refresh layouts use a window-width dropdown, so they don't need the
// right-hand margin.
if (ui::MaterialDesignController::IsRefreshUi()) {
return is_two_line
? gfx::Insets(kRefreshTwoLineRowMarginHeight, kRefreshMarginLeft,
kRefreshTwoLineRowMarginHeight, 0)
: gfx::Insets(kRefreshOneLineRowMarginHeight, kRefreshMarginLeft,
kRefreshOneLineRowMarginHeight, 0);
int vertical_margin = is_two_line ? kRefreshTwoLineRowMarginHeight
: kRefreshOneLineRowMarginHeight;
return gfx::Insets(vertical_margin, kRefreshMarginLeft, vertical_margin,
OmniboxMatchCellView::kRefreshMarginRight);
}
// Regardless of the text size, we ensure a minimum size for the content line
......
......@@ -37,6 +37,9 @@ class OmniboxMatchCellView : public views::View {
gfx::Size CalculatePreferredSize() const override;
bool CanProcessEventsWithinSubtree() const override;
// The right-hand margin used for rows with the refresh UI.
static constexpr int kRefreshMarginRight = 8;
protected:
// views::View:
void Layout() override;
......
......@@ -254,12 +254,15 @@ void OmniboxResultView::Layout() {
if (ts_button_size.width() > 0) {
suggestion_tab_switch_button_->SetSize(ts_button_size);
// It looks nice to have the same margin on top, bottom and right side.
const int margin =
// Give the tab switch button a right margin matching the text.
suggestion_width -=
ts_button_size.width() + OmniboxMatchCellView::kRefreshMarginRight;
// Center the button vertically.
const int vertical_margin =
(suggestion_view_->height() - ts_button_size.height()) / 2;
suggestion_width -= ts_button_size.width() + margin;
suggestion_tab_switch_button_->SetPosition(
gfx::Point(suggestion_width, margin));
gfx::Point(suggestion_width, vertical_margin));
suggestion_tab_switch_button_->SetVisible(true);
} else {
suggestion_tab_switch_button_->SetVisible(false);
......
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