Fix toolbar button insets for Touch and Refresh

This change accomplishes a couple of things:

* Unifies Touchable and Refresh layout inkdrop behavior.
* Gets 8dp inkdrop corners for Touchable
* Removes hard-coded inkdrop sizes and insets.
* Makes the flood-fill inkdrop work with extended edges (toolbar edges).
  This was not a problem for touchable as they removed extended edges.
* Changes Refresh inkdrop size to 28dps instead of inkdrop-default 24dp.
* Uses flood-fill inkdrop for Refresh.
* Increases toolbar horizontal padding to 8dp per specs.

Bug: chromium:822069, chromium:834511
Change-Id: I458fecfb14ca2d21dcf9513756182b2bf8e9320e
Reviewed-on: https://chromium-review.googlesource.com/1033962
Commit-Queue: Peter Boström <pbos@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554884}

chrome/browser/ui/layout_constants.cc

@@ -83,8 +83,10 @@ int GetLayoutConstant(LayoutConstant constant) {
       return touch_optimized_material ? 68 : 120;
     case TAB_STANDARD_WIDTH:
       return touch_optimized_material ? 245 : 193;
-    case TOOLBAR_ELEMENT_PADDING:
-      return hybrid ? 8 : 0;
+    case TOOLBAR_ELEMENT_PADDING: {
+      constexpr int kPadding[] = {0, 8, 0, 4};
+      return kPadding[mode];
+    }
     case TOOLBAR_STANDARD_SPACING: {
       constexpr int kSpacings[] = {4, 8, 12, 8};
       return kSpacings[mode];

chrome/browser/ui/layout_constants.h

@@ -106,7 +106,6 @@ enum LayoutConstant {
 
   // The horizontal space between most items in the toolbar.
   TOOLBAR_STANDARD_SPACING,
-
 };
 
 enum LayoutInset {

chrome/browser/ui/views/toolbar/browser_app_menu_button.cc

@@ -74,8 +74,12 @@ BrowserAppMenuButton::BrowserAppMenuButton(ToolbarView* toolbar_view)
     set_ink_drop_visible_opacity(kTouchToolbarInkDropVisibleOpacity);
 
   if (ui::MaterialDesignController::IsNewerMaterialUi()) {
-    const int radii =
-        ChromeLayoutProvider::Get()->GetCornerRadiusMetric(EMPHASIS_MEDIUM);
+    // TODO(pbos): Remove conditional once Touchable uses the same corner
+    // metrics as Refresh.
+    const int radii = ui::MaterialDesignController::IsTouchOptimizedUiEnabled()
+                          ? 8
+                          : ChromeLayoutProvider::Get()->GetCornerRadiusMetric(
+                                EMPHASIS_MEDIUM);
     set_ink_drop_corner_radii(radii, radii);
   }
 }

chrome/browser/ui/views/toolbar/toolbar_action_view.cc

@@ -78,8 +78,12 @@ ToolbarActionView::ToolbarActionView(
     set_ink_drop_visible_opacity(kTouchToolbarInkDropVisibleOpacity);
 
   if (ui::MaterialDesignController::IsNewerMaterialUi()) {
-    const int radii =
-        ChromeLayoutProvider::Get()->GetCornerRadiusMetric(EMPHASIS_MEDIUM);
+    // TODO(pbos): Remove conditional once Touchable uses the same corner
+    // metrics as Refresh.
+    const int radii = ui::MaterialDesignController::IsTouchOptimizedUiEnabled()
+                          ? 8
+                          : ChromeLayoutProvider::Get()->GetCornerRadiusMetric(
+                                EMPHASIS_MEDIUM);
     set_ink_drop_corner_radii(radii, radii);
   }
 

chrome/browser/ui/views/toolbar/toolbar_button.cc

@@ -43,8 +43,12 @@ ToolbarButton::ToolbarButton(Profile* profile,
     set_ink_drop_visible_opacity(kTouchToolbarInkDropVisibleOpacity);
 
   if (ui::MaterialDesignController::IsNewerMaterialUi()) {
-    const int radii =
-        ChromeLayoutProvider::Get()->GetCornerRadiusMetric(EMPHASIS_MEDIUM);
+    // TODO(pbos): Remove conditional once Touchable uses the same corner
+    // metrics as refresh.
+    const int radii = ui::MaterialDesignController::IsTouchOptimizedUiEnabled()
+                          ? 8
+                          : ChromeLayoutProvider::Get()->GetCornerRadiusMetric(
+                                EMPHASIS_MEDIUM);
     set_ink_drop_corner_radii(radii, radii);
   }
 }

chrome/browser/ui/views/toolbar/toolbar_ink_drop_util.h

@@ -17,17 +17,6 @@
 #include "ui/views/animation/ink_drop_mask.h"
 #include "ui/views/animation/ink_drop_ripple.h"
 
-namespace {
-
-// Dimentions specific to the ink drop on the Browser's toolbar buttons when
-// the Touch-optimized UI is being used.
-constexpr int kTouchInkDropCornerRadius = 18;
-constexpr gfx::Size kTouchInkDropHighlightSize{2 * kTouchInkDropCornerRadius,
-                                               2 * kTouchInkDropCornerRadius};
-constexpr gfx::Insets kTouchInkDropInsets{6};
-
-}  // namespace
-
 constexpr float kTouchToolbarInkDropVisibleOpacity = 0.06f;
 constexpr float kTouchToolbarHighlightVisibleOpacity = 0.08f;
 
@@ -39,6 +28,31 @@ constexpr float kTouchToolbarHighlightVisibleOpacity = 0.08f;
 // TODO: Consider making ToolbarButton and AppMenuButton share a common base
 // class https://crbug.com/819854.
 
+// Creates insets for a host view so that when insetting from the host view
+// the resulting mask or inkdrop has the desired inkdrop size.
+template <class BaseInkDropHostView>
+gfx::Insets GetInkDropInsets(BaseInkDropHostView* host_view) {
+  gfx::Insets inkdrop_insets;
+  const gfx::Insets host_insets = host_view->GetInsets();
+  // If content is not centered (leftmost or rightmost toolbar button), inset
+  // the inkdrop mask accordingly.
+  if (host_insets.left() > host_insets.right()) {
+    inkdrop_insets +=
+        gfx::Insets(0, host_insets.left() - host_insets.right(), 0, 0);
+  } else if (host_insets.right() > host_insets.left()) {
+    inkdrop_insets +=
+        gfx::Insets(0, 0, 0, host_insets.right() - host_insets.left());
+  }
+
+  // Inset the inkdrop insets so that the end result matches the target inkdrop
+  // dimensions.
+  const gfx::Size host_size = host_view->size();
+  const int inkdrop_dimensions = GetLayoutConstant(LOCATION_BAR_HEIGHT);
+  inkdrop_insets += gfx::Insets((host_size.height() - inkdrop_dimensions) / 2);
+
+  return inkdrop_insets;
+}
+
 // Creates the appropriate ink drop for the calling button. When the touch-
 // optimized UI is not enabled, it uses the default implementation of the
 // calling button's base class (the template argument BaseInkDropHostView).
@@ -47,7 +61,7 @@ constexpr float kTouchToolbarHighlightVisibleOpacity = 0.08f;
 template <class BaseInkDropHostView>
 std::unique_ptr<views::InkDrop> CreateToolbarInkDrop(
     BaseInkDropHostView* host_view) {
-  if (!ui::MaterialDesignController::IsTouchOptimizedUiEnabled())
+  if (!ui::MaterialDesignController::IsNewerMaterialUi())
     return host_view->BaseInkDropHostView::CreateInkDrop();
 
   auto ink_drop =
@@ -66,11 +80,11 @@ template <class BaseInkDropHostView>
 std::unique_ptr<views::InkDropRipple> CreateToolbarInkDropRipple(
     const BaseInkDropHostView* host_view,
     const gfx::Point& center_point) {
-  if (!ui::MaterialDesignController::IsTouchOptimizedUiEnabled())
+  if (!ui::MaterialDesignController::IsNewerMaterialUi())
     return host_view->BaseInkDropHostView::CreateInkDropRipple();
 
   return std::make_unique<views::FloodFillInkDropRipple>(
-      host_view->size(), kTouchInkDropInsets, center_point,
+      host_view->size(), GetInkDropInsets(host_view), center_point,
       host_view->GetInkDropBaseColor(), host_view->ink_drop_visible_opacity());
 }
 
@@ -82,11 +96,14 @@ template <class BaseInkDropHostView>
 std::unique_ptr<views::InkDropHighlight> CreateToolbarInkDropHighlight(
     const BaseInkDropHostView* host_view,
     const gfx::Point& center_point) {
-  if (!ui::MaterialDesignController::IsTouchOptimizedUiEnabled())
+  if (!ui::MaterialDesignController::IsNewerMaterialUi())
     return host_view->BaseInkDropHostView::CreateInkDropHighlight();
 
+  const int highlight_dimensions = GetLayoutConstant(LOCATION_BAR_HEIGHT);
+  const gfx::Size highlight_size(highlight_dimensions, highlight_dimensions);
+
   auto highlight = std::make_unique<views::InkDropHighlight>(
-      kTouchInkDropHighlightSize, kTouchInkDropCornerRadius,
+      highlight_size, host_view->ink_drop_large_corner_radius(),
       gfx::PointF(center_point), host_view->GetInkDropBaseColor());
   highlight->set_visible_opacity(kTouchToolbarHighlightVisibleOpacity);
   return highlight;
@@ -101,11 +118,12 @@ std::unique_ptr<views::InkDropHighlight> CreateToolbarInkDropHighlight(
 template <class BaseInkDropHostView>
 std::unique_ptr<views::InkDropMask> CreateToolbarInkDropMask(
     const BaseInkDropHostView* host_view) {
-  if (!ui::MaterialDesignController::IsTouchOptimizedUiEnabled())
+  if (!ui::MaterialDesignController::IsNewerMaterialUi())
     return host_view->BaseInkDropHostView::CreateInkDropMask();
 
   return std::make_unique<views::RoundRectInkDropMask>(
-      host_view->size(), kTouchInkDropInsets, kTouchInkDropCornerRadius);
+      host_view->size(), GetInkDropInsets(host_view),
+      host_view->ink_drop_large_corner_radius());
 }
 
 #endif  // CHROME_BROWSER_UI_VIEWS_TOOLBAR_TOOLBAR_INK_DROP_UTIL_H_

chrome/browser/ui/views/toolbar/toolbar_view.cc

@@ -97,7 +97,7 @@ int GetToolbarHorizontalPadding() {
   // button starts from the beginning of the view, and the app menu button ends
   // at the end of the view.
   using Md = ui::MaterialDesignController;
-  constexpr int kPaddings[] = {4, 8, 0, 4};
+  constexpr int kPaddings[] = {4, 8, 0, 8};
   return kPaddings[Md::GetMode()];
 }