Omnibox UI Refresh: Make 16 elevation shadow that matches specs

This makes the 16 elevation shadow for the Omnibox match the specs
given for MD Refresh.

This CL also divorces the Omnibox shadows from the Aura window shadow
drawing logic.

Bug: 845305, 823535
Change-Id: Ibbda26b465b528805a1be591a23a20cc09df7643
Reviewed-on: https://chromium-review.googlesource.com/1100006Reviewed-by: Scott Violet <sky@chromium.org>
Commit-Queue: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568489}

chrome/browser/ui/views/omnibox/omnibox_popup_contents_view.cc

@@ -173,7 +173,7 @@ class OmniboxPopupContentsView::AutocompletePopupWidget
     params.context = parent_widget->GetNativeWindow();
 
     if (LocationBarView::IsRounded())
-      RoundedOmniboxResultsFrame::OnBeforeWidgetInit(&params);
+      RoundedOmniboxResultsFrame::OnBeforeWidgetInit(&params, this);
     else
       animator_ = std::make_unique<WidgetShrinkAnimation>(this, bounds);
 
@@ -519,10 +519,12 @@ gfx::Rect OmniboxPopupContentsView::UpdateMarginsAndGetTargetBounds() {
   if (LocationBarView::IsRounded()) {
     // The rounded popup is always offset the same amount from the omnibox.
     gfx::Rect content_rect = location_bar_view_->GetBoundsInScreen();
-    gfx::Insets popup_insets =
-        -RoundedOmniboxResultsFrame::GetLocationBarAlignmentInsets();
-    content_rect.Inset(popup_insets);
+    content_rect.Inset(
+        -RoundedOmniboxResultsFrame::GetLocationBarAlignmentInsets());
     content_rect.set_height(CalculatePopupHeight());
+
+    // Finally, expand the widget to accomodate the custom-drawn shadows.
+    content_rect.Inset(-RoundedOmniboxResultsFrame::GetShadowInsets());
     return content_rect;
   }
 

chrome/browser/ui/views/omnibox/omnibox_popup_contents_view_browsertest.cc

@@ -176,6 +176,7 @@ IN_PROC_BROWSER_TEST_P(OmniboxPopupContentsViewTest, PopupAlignment) {
     gfx::Rect alignment_rect = location_bar()->GetBoundsInScreen();
     alignment_rect.Inset(
         -RoundedOmniboxResultsFrame::GetLocationBarAlignmentInsets());
+    alignment_rect.Inset(-RoundedOmniboxResultsFrame::GetShadowInsets());
     // Top, left and right should align. Bottom depends on the results.
     gfx::Rect popup_rect = popup->GetRestoredBounds();
     EXPECT_EQ(popup_rect.y(), alignment_rect.y());

chrome/browser/ui/views/omnibox/rounded_omnibox_results_frame.cc

@@ -11,6 +11,8 @@
 #include "chrome/browser/ui/views/location_bar/location_bar_view.h"
 #include "ui/base/material_design/material_design_controller.h"
 #include "ui/compositor/layer.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/views/bubble/bubble_border.h"
 #include "ui/views/painter.h"
 
 #if defined(USE_AURA)
@@ -18,6 +20,10 @@
 #include "ui/aura/window_targeter.h"
 #endif
 
+#if defined(OS_WIN)
+#include "ui/views/widget/native_widget_aura.h"
+#endif
+
 namespace {
 
 // Value from the spec controlling appearance of the shadow.
@@ -61,9 +67,10 @@ RoundedOmniboxResultsFrame::RoundedOmniboxResultsFrame(views::View* contents,
   // selection highlights.
   // TODO(tapted): Remove this and have the contents paint a half-rounded rect
   // for the background, and when selecting the bottom row.
+  int corner_radius = GetLayoutConstant(LOCATION_BAR_BUBBLE_CORNER_RADIUS);
   contents_mask_ = views::Painter::CreatePaintedLayer(
-      views::Painter::CreateSolidRoundRectPainter(
-          SK_ColorBLACK, GetLayoutConstant(LOCATION_BAR_BUBBLE_CORNER_RADIUS)));
+      views::Painter::CreateSolidRoundRectPainter(SK_ColorBLACK,
+                                                  corner_radius));
   contents_mask_->layer()->SetFillsBoundsOpaquely(false);
   contents_host_->layer()->SetMaskLayer(contents_mask_->layer());
 
@@ -71,6 +78,14 @@ RoundedOmniboxResultsFrame::RoundedOmniboxResultsFrame(views::View* contents,
   contents_host_->AddChildView(top_background_);
   contents_host_->AddChildView(contents_);
 
+  // Initialize the shadow.
+  auto border = std::make_unique<views::BubbleBorder>(
+      views::BubbleBorder::Arrow::NONE, views::BubbleBorder::Shadow::BIG_SHADOW,
+      gfx::kPlaceholderColor);
+  border->SetCornerRadius(corner_radius);
+  border->set_md_shadow_elevation(kElevation);
+  SetBorder(std::move(border));
+
   AddChildView(contents_host_);
 }
 
@@ -78,11 +93,23 @@ RoundedOmniboxResultsFrame::~RoundedOmniboxResultsFrame() = default;
 
 // static
 void RoundedOmniboxResultsFrame::OnBeforeWidgetInit(
-    views::Widget::InitParams* params) {
-  params->shadow_type = views::Widget::InitParams::SHADOW_TYPE_DROP;
-  params->corner_radius = GetLayoutConstant(LOCATION_BAR_BUBBLE_CORNER_RADIUS);
-  params->shadow_elevation = kElevation;
+    views::Widget::InitParams* params,
+    views::Widget* widget) {
+#if defined(OS_WIN)
+  // On Windows, use an Aura window instead of a native window, because the
+  // native window does not support clicking through translucent shadows to the
+  // underyling content. Linux and ChromeOS do not need this because they
+  // already use Aura for the suggestions dropdown.
+  //
+  // TODO(sdy): Mac does not support Aura at the moment, and needs a different
+  // platform-specific solution.
+  params->native_widget = new views::NativeWidgetAura(widget);
+#endif
   params->name = "RoundedOmniboxResultsFrameWindow";
+
+  // Since we are drawing the shadow in Views via the BubbleBorder, we never
+  // want our widget to have its own window-manager drawn shadow.
+  params->shadow_type = views::Widget::InitParams::ShadowType::SHADOW_TYPE_NONE;
 }
 
 // static
@@ -97,6 +124,11 @@ gfx::Insets RoundedOmniboxResultsFrame::GetLocationBarAlignmentInsets() {
                                                      : gfx::Insets(4);
 }
 
+// static
+gfx::Insets RoundedOmniboxResultsFrame::GetShadowInsets() {
+  return views::BubbleBorder::GetBorderAndShadowInsets(kElevation);
+}
+
 const char* RoundedOmniboxResultsFrame::GetClassName() const {
   return "RoundedOmniboxResultsFrame";
 }
@@ -106,16 +138,16 @@ void RoundedOmniboxResultsFrame::Layout() {
   // the Widget is fast on ChromeOS, but slow on other platforms, and can't be
   // animated smoothly.
   // TODO(tapted): Investigate using a static Widget size.
-  const gfx::Rect bounds = GetLocalBounds();
+  const gfx::Rect bounds = GetContentsBounds();
   contents_host_->SetBoundsRect(bounds);
   contents_mask_->layer()->SetBounds(bounds);
 
-  gfx::Rect top_bounds(bounds);
+  gfx::Rect top_bounds(contents_host_->GetContentsBounds());
   top_bounds.set_height(GetNonResultSectionHeight());
   top_bounds.Inset(GetLocationBarAlignmentInsets());
   top_background_->SetBoundsRect(top_bounds);
 
-  gfx::Rect results_bounds(bounds);
+  gfx::Rect results_bounds(contents_host_->GetContentsBounds());
   results_bounds.Inset(GetContentInsets());
   contents_->SetBoundsRect(results_bounds);
 }
@@ -125,7 +157,7 @@ void RoundedOmniboxResultsFrame::AddedToWidget() {
   // Use a ui::EventTargeter that allows mouse and touch events in the top
   // portion of the Widget to pass through to the omnibox beneath it.
   auto results_targeter = std::make_unique<aura::WindowTargeter>();
-  results_targeter->SetInsets(GetContentInsets());
+  results_targeter->SetInsets(GetInsets() + GetContentInsets());
   GetWidget()->GetNativeWindow()->SetEventTargeter(std::move(results_targeter));
 #endif
 }

chrome/browser/ui/views/omnibox/rounded_omnibox_results_frame.h

@@ -20,7 +20,8 @@ class RoundedOmniboxResultsFrame : public views::View {
   ~RoundedOmniboxResultsFrame() override;
 
   // Hook to customize Widget initialization.
-  static void OnBeforeWidgetInit(views::Widget::InitParams* params);
+  static void OnBeforeWidgetInit(views::Widget::InitParams* params,
+                                 views::Widget* widget);
 
   // The height of the location bar view part of the omnibox popup.
   static int GetNonResultSectionHeight();
@@ -28,6 +29,9 @@ class RoundedOmniboxResultsFrame : public views::View {
   // How the Widget is aligned relative to the location bar.
   static gfx::Insets GetLocationBarAlignmentInsets();
 
+  // Returns the blur region taken up by the Omnibox popup shadows.
+  static gfx::Insets GetShadowInsets();
+
   // views::View:
   const char* GetClassName() const override;
   void Layout() override;

ui/gfx/shadow_value.cc

@@ -77,6 +77,12 @@ ShadowValues ShadowValue::MakeRefreshShadowValues(int elevation) {
   // Refresh uses hand-tweaked shadows corresponding to a small set of
   // elevations. Use the Refresh spec and designer input to add missing shadow
   // values.
+
+  // To match the CSS notion of blur (spread outside the bounding box) to the
+  // Skia notion of blur (spread outside and inside the bounding box), we have
+  // to double the designer-provided blur values.
+  const int kBlurCorrection = 2;
+
   switch (elevation) {
     case 3: {
       ShadowValue key = {gfx::Vector2d(0, 1), 12,
@@ -85,6 +91,13 @@ ShadowValues ShadowValue::MakeRefreshShadowValues(int elevation) {
                              SkColorSetA(shadow_base_color, 0x40)};
       return {key, ambient};
     }
+    case 16: {
+      gfx::ShadowValue key = {gfx::Vector2d(0, 0), kBlurCorrection * 16,
+                              SkColorSetA(shadow_base_color, 0x1a)};
+      gfx::ShadowValue ambient = {gfx::Vector2d(0, 12), kBlurCorrection * 16,
+                                  SkColorSetA(shadow_base_color, 0x3d)};
+      return {key, ambient};
+    }
     default:
       // This surface has not been updated for Refresh. Fall back to the
       // deprecated style.