Add drop shadow to popups on Mac.

This change adds drop shadow to popups for FormControlsRefresh by using
the [NSWindow hasShadow] property.

Since the Mac window shadow also has its own border, the HTML provided
border for the popups [1] is changed to be transparent to avoid having a
weird UI.

[1]: https://chromium-review.googlesource.com/c/chromium/src/+/2036250

Bug: 1000898
Change-Id: Iadf89e7a122614b6dba95b745be2af79476da98d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2052264
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: ccameron <ccameron@chromium.org>
Reviewed-by: Robert Sesek <rsesek@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#741588}

content/app_shim_remote_cocoa/popup_window_mac.h

@@ -21,6 +21,7 @@ namespace remote_cocoa {
 class PopupWindowMac {
  public:
   PopupWindowMac(const gfx::Rect& content_rect,
+                 bool has_shadow,
                  RenderWidgetHostViewCocoa* cocoa_view);
   ~PopupWindowMac();
 

content/app_shim_remote_cocoa/popup_window_mac.mm

@@ -83,6 +83,7 @@ - (void)stopObservingClicks {
 namespace remote_cocoa {
 
 PopupWindowMac::PopupWindowMac(const gfx::Rect& content_rect,
+                               bool has_shadow,
                                RenderWidgetHostViewCocoa* cocoa_view)
     : cocoa_view_(cocoa_view) {
   [cocoa_view_ setCloseOnDeactivate:YES];
@@ -93,6 +94,7 @@ - (void)stopObservingClicks {
                 styleMask:NSBorderlessWindowMask
                   backing:NSBackingStoreBuffered
                     defer:NO]);
+  [popup_window_ setHasShadow:has_shadow];
   [popup_window_ setLevel:NSPopUpMenuWindowLevel];
   [popup_window_ setReleasedWhenClosed:NO];
   [popup_window_ makeKeyAndOrderFront:nil];

content/app_shim_remote_cocoa/render_widget_host_ns_view_bridge.h

@@ -41,7 +41,7 @@ class RenderWidgetHostNSViewBridge : public mojom::RenderWidgetHostNSView,
   RenderWidgetHostViewCocoa* GetNSView();
 
   // mojom::RenderWidgetHostNSView implementation.
-  void InitAsPopup(const gfx::Rect& content_rect) override;
+  void InitAsPopup(const gfx::Rect& content_rect, bool has_shadow) override;
   void SetParentWebContentsNSView(uint64_t parent_ns_view_id) override;
   void DisableDisplay() override;
   void MakeFirstResponder() override;

content/app_shim_remote_cocoa/render_widget_host_ns_view_bridge.mm

@@ -59,8 +59,10 @@
   return cocoa_view_;
 }
 
-void RenderWidgetHostNSViewBridge::InitAsPopup(const gfx::Rect& content_rect) {
-  popup_window_ = std::make_unique<PopupWindowMac>(content_rect, cocoa_view_);
+void RenderWidgetHostNSViewBridge::InitAsPopup(const gfx::Rect& content_rect,
+                                               bool has_shadow) {
+  popup_window_ =
+      std::make_unique<PopupWindowMac>(content_rect, has_shadow, cocoa_view_);
 }
 
 void RenderWidgetHostNSViewBridge::SetParentWebContentsNSView(

content/browser/renderer_host/render_widget_host_view_mac.mm

@@ -350,7 +350,10 @@
   popup_parent_host_view_->popup_child_host_view_ = this;
 
   // This path is used by the time/date picker.
-  ns_view_->InitAsPopup(pos);
+  // When FormControlsRefresh is enabled the popup window should use
+  // the native shadow.
+  bool has_shadow = features::IsFormControlsRefreshEnabled();
+  ns_view_->InitAsPopup(pos, has_shadow);
 }
 
 void RenderWidgetHostViewMac::InitAsFullscreen(

content/common/render_widget_host_ns_view.mojom

@@ -21,7 +21,7 @@ import "ui/gfx/range/mojom/range.mojom";
 interface RenderWidgetHostNSView {
   // Specify that the NSView will a popup (e.g, date/time picker) that will
   // create its own NSWindow.
-  InitAsPopup(gfx.mojom.Rect content_rect);
+  InitAsPopup(gfx.mojom.Rect content_rect, bool has_shadow);
 
   // Set this to be a child NSView of the NSView mapped to by
   // |parent_ns_view_id|.

third_party/blink/renderer/core/html/forms/color_chooser_popup_ui_controller.cc

@@ -25,6 +25,7 @@
 
 #include "third_party/blink/renderer/core/html/forms/color_chooser_popup_ui_controller.h"
 
+#include "build/build_config.h"
 #include "third_party/blink/public/platform/platform.h"
 #include "third_party/blink/public/strings/grit/blink_strings.h"
 #include "third_party/blink/renderer/core/frame/local_frame.h"
@@ -99,7 +100,6 @@ void ColorChooserPopupUIController::WriteColorPickerDocument(
       "<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data);
   data->Append(ChooserResourceLoader::GetPickerCommonStyleSheet());
   data->Append(ChooserResourceLoader::GetColorPickerStyleSheet());
-
   PagePopupClient::AddString(
       "</style></head><body>\n"
       "<div id='main'>Loading...</div><script>\n"
@@ -110,6 +110,10 @@ void ColorChooserPopupUIController::WriteColorPickerDocument(
   AddProperty("anchorRectInScreen", anchor_rect_in_screen, data);
   AddProperty("zoomFactor", ScaledZoomFactor(), data);
   AddProperty("shouldShowColorSuggestionPicker", false, data);
+#if defined(OS_MACOSX)
+  AddProperty("isBorderTransparent", features::IsFormControlsRefreshEnabled(),
+              data);
+#endif
   PagePopupClient::AddString("};\n", data);
   data->Append(ChooserResourceLoader::GetPickerCommonJS());
   data->Append(ChooserResourceLoader::GetColorPickerJS());
@@ -131,9 +135,6 @@ void ColorChooserPopupUIController::WriteColorSuggestionPickerDocument(
       "<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data);
   data->Append(ChooserResourceLoader::GetPickerCommonStyleSheet());
   data->Append(ChooserResourceLoader::GetColorSuggestionPickerStyleSheet());
-  if (features::IsFormControlsRefreshEnabled())
-    data->Append(ChooserResourceLoader::GetColorPickerStyleSheet());
-
   PagePopupClient::AddString(
       "</style></head><body>\n"
       "<div id='main'>Loading...</div><script>\n"
@@ -152,6 +153,10 @@ void ColorChooserPopupUIController::WriteColorSuggestionPickerDocument(
   AddProperty("shouldShowColorSuggestionPicker", true, data);
   AddProperty("isFormControlsRefreshEnabled",
               features::IsFormControlsRefreshEnabled(), data);
+#if defined(OS_MACOSX)
+  AddProperty("isBorderTransparent", features::IsFormControlsRefreshEnabled(),
+              data);
+#endif
   PagePopupClient::AddString("};\n", data);
   data->Append(ChooserResourceLoader::GetPickerCommonJS());
   data->Append(ChooserResourceLoader::GetColorSuggestionPickerJS());

third_party/blink/renderer/core/html/forms/date_time_chooser_impl.cc

@@ -30,6 +30,7 @@
 
 #include "third_party/blink/renderer/core/html/forms/date_time_chooser_impl.h"
 
+#include "build/build_config.h"
 #include "third_party/blink/public/mojom/choosers/date_time_chooser.mojom-blink.h"
 #include "third_party/blink/public/platform/platform.h"
 #include "third_party/blink/public/strings/grit/blink_strings.h"
@@ -177,6 +178,10 @@ void DateTimeChooserImpl::WriteDocument(SharedBuffer* data) {
   AddProperty("isRTL", parameters_->is_anchor_element_rtl, data);
   AddProperty("isFormControlsRefreshEnabled",
               features::IsFormControlsRefreshEnabled(), data);
+#if defined(OS_MACOSX)
+  AddProperty("isBorderTransparent", features::IsFormControlsRefreshEnabled(),
+              data);
+#endif
   AddProperty("mode", parameters_->type.GetString(), data);
   AddProperty("isAMPMFirst", parameters_->is_ampm_first, data);
   AddProperty("hasAMPM", parameters_->has_ampm, data);

third_party/blink/renderer/core/html/forms/resources/calendarPicker.js

@@ -59,6 +59,7 @@ var global = {
     ],
     isLocaleRTL: false,
     isFormControlsRefreshEnabled: false,
+    isBorderTransparent: false,
     mode: 'date',
     isAMPMFirst: false,
     hasAMPM: false,
@@ -4325,7 +4326,9 @@ CalendarTableView.prototype.throwAwayWeekNumberCell = function(weekNumberCell) {
 function CalendarPicker(type, config) {
   View.call(this, createElement('div', CalendarPicker.ClassNameCalendarPicker));
   this.element.classList.add(CalendarPicker.ClassNamePreparing);
-
+  if (global.params.isBorderTransparent) {
+    this.element.style.borderColor = 'transparent';
+  }
   /**
    * @type {!string}
    * @const

third_party/blink/renderer/core/html/forms/resources/color_picker.js

@@ -424,6 +424,10 @@ class ColorPicker extends HTMLElement {
   constructor(initialColor) {
     super();
 
+    if (global.params.isBorderTransparent) {
+      this.style.borderColor = 'transparent';
+    }
+
     this.selectedColor_ = initialColor;
     this.colorWhenOpened_ = initialColor;
 

third_party/blink/renderer/core/html/forms/resources/color_picker_common.js

@@ -43,6 +43,9 @@ function initialize(args) {
       document.body.classList.add('controls-refresh');
     }
     main.classList.add('color-suggestion-picker-main');
+    if (global.params.isBorderTransparent) {
+      main.style.borderColor = 'transparent';
+    }
     errorString = validateColorSuggestionPickerArguments(args);
   } else {
     main.classList.add('color-picker-main');

third_party/blink/renderer/core/html/forms/resources/month_picker.js

@@ -11,6 +11,9 @@ function initializeMonthPicker(config) {
   global.picker = new MonthPicker(config);
   main.append(global.picker);
   main.style.border = '1px solid #bfbfbf';
+  if (global.params.isBorderTransparent) {
+    main.style.borderColor = 'transparent';
+  }
   main.style.height = (MonthPicker.Height - 2) + 'px';
   main.style.width = (MonthPicker.Width - 2) + 'px';
   resizeWindow(MonthPicker.Width, MonthPicker.Height);

third_party/blink/renderer/core/html/forms/resources/suggestionPicker.js

@@ -200,6 +200,9 @@ SuggestionPicker.prototype._layout = function() {
   if (this._config.isLocaleRTL)
     this._element.classList.add('locale-rtl');
   this._containerElement = createElement('ul', 'suggestion-list');
+  if (global.params.isBorderTransparent) {
+    this._containerElement.style.borderColor = 'transparent';
+  }
   this._containerElement.addEventListener(
       'click', this._handleEntryClick.bind(this), false);
   for (var i = 0; i < this._config.suggestionValues.length; ++i) {

third_party/blink/renderer/core/html/forms/resources/time_picker.js

@@ -216,6 +216,9 @@ class TimePicker extends HTMLElement {
     super();
 
     this.className = TimePicker.ClassName;
+    if (global.params.isBorderTransparent) {
+      this.style.borderColor = 'transparent';
+    }
     this.initializeFromConfig_(config);
 
     this.timeColumns_ = new TimeColumns(this);