[Picture in Picture] Darken video when media controls are shown.

On light colored videos, the white media controls are hard to see or
invisible. This change adds a transparent, dark layer between the video
and the media controls to make them more visible.

BUG: 836389
Change-Id: I3f0a959c2d0a9fec83dbc71ae1cbcf2335a24566
Reviewed-on: https://chromium-review.googlesource.com/1045091
Commit-Queue: apacible <apacible@chromium.org>
Reviewed-by: Alex Moshchuk <alexmos@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#557010}

chrome/browser/ui/views/overlay/overlay_window_views.cc

@@ -110,6 +110,7 @@ OverlayWindowViews::OverlayWindowViews(
     content::PictureInPictureWindowController* controller)
     : controller_(controller),
       video_view_(new views::View()),
+      controls_background_view_(new views::View()),
       close_controls_view_(new views::ImageButton(nullptr)),
       play_pause_controls_view_(new views::ToggleImageButton(nullptr)) {
   views::Widget::InitParams params(views::Widget::InitParams::TYPE_WINDOW);
@@ -173,6 +174,14 @@ gfx::Rect OverlayWindowViews::CalculateAndUpdateBounds() {
 }
 
 void OverlayWindowViews::SetUpViews() {
+  // Set up views::View that slightly darkens the video so the media controls
+  // appear more prominently. This is especially important in cases with a
+  // very light background.
+  controls_background_view_->SetSize(GetBounds().size());
+  controls_background_view_->SetPaintToLayer(ui::LAYER_SOLID_COLOR);
+  GetControlsBackgroundLayer()->SetColor(SK_ColorBLACK);
+  GetControlsBackgroundLayer()->SetOpacity(0.2f);
+
   // Set up views::View that closes the window.
   close_controls_view_->SetSize(kCloseIconSize);
   close_controls_view_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
@@ -202,6 +211,7 @@ void OverlayWindowViews::SetUpViews() {
   play_pause_controls_view_->SetPaintToLayer(ui::LAYER_TEXTURED);
 
   // Don't show the controls until the mouse hovers over the window.
+  GetControlsBackgroundLayer()->SetVisible(false);
   GetCloseControlsLayer()->SetVisible(false);
   GetPlayPauseControlsLayer()->SetVisible(false);
 }
@@ -250,6 +260,10 @@ ui::Layer* OverlayWindowViews::GetVideoLayer() {
   return video_view_->layer();
 }
 
+ui::Layer* OverlayWindowViews::GetControlsBackgroundLayer() {
+  return controls_background_view_->layer();
+}
+
 ui::Layer* OverlayWindowViews::GetCloseControlsLayer() {
   return close_controls_view_->layer();
 }
@@ -292,11 +306,13 @@ void OverlayWindowViews::OnMouseEvent(ui::MouseEvent* event) {
   switch (event->type()) {
     // Only show the media controls when the mouse is hovering over the window.
     case ui::ET_MOUSE_ENTERED:
+      GetControlsBackgroundLayer()->SetVisible(true);
       GetCloseControlsLayer()->SetVisible(true);
       GetPlayPauseControlsLayer()->SetVisible(true);
       break;
 
     case ui::ET_MOUSE_EXITED:
+      GetControlsBackgroundLayer()->SetVisible(false);
       GetCloseControlsLayer()->SetVisible(false);
       GetPlayPauseControlsLayer()->SetVisible(false);
       break;

chrome/browser/ui/views/overlay/overlay_window_views.h

@@ -34,6 +34,7 @@ class OverlayWindowViews : public content::OverlayWindow, public views::Widget {
   gfx::Rect GetBounds() const override;
   void UpdateVideoSize(const gfx::Size& natural_size) override;
   ui::Layer* GetVideoLayer() override;
+  ui::Layer* GetControlsBackgroundLayer() override;
   ui::Layer* GetCloseControlsLayer() override;
   ui::Layer* GetPlayPauseControlsLayer() override;
   gfx::Rect GetCloseControlsBounds() override;
@@ -77,6 +78,7 @@ class OverlayWindowViews : public content::OverlayWindow, public views::Widget {
 
   // Views to be shown.
   std::unique_ptr<views::View> video_view_;
+  std::unique_ptr<views::View> controls_background_view_;
   std::unique_ptr<views::ImageButton> close_controls_view_;
   std::unique_ptr<views::ToggleImageButton> play_pause_controls_view_;
 

content/browser/picture_in_picture/overlay_surface_embedder.cc

@@ -40,15 +40,21 @@ void OverlaySurfaceEmbedder::SetPrimarySurfaceId(
 void OverlaySurfaceEmbedder::UpdateLayerBounds() {
   // Update the size and position of the video to stretch on the entire window.
   gfx::Size window_size = window_->GetBounds().size();
-  video_layer_->SetBounds(gfx::Rect(gfx::Point(0, 0), window_size));
+  gfx::Rect window_bounds = gfx::Rect(gfx::Point(0, 0), window_size);
+  video_layer_->SetBounds(window_bounds);
   video_layer_->SetSurfaceSize(window_size);
 
   // Update the size and position of controls.
+  controls_background_layer_->SetBounds(window_bounds);
   close_controls_layer_->SetBounds(window_->GetCloseControlsBounds());
   play_pause_controls_layer_->SetBounds(window_->GetPlayPauseControlsBounds());
 }
 
 void OverlaySurfaceEmbedder::AddControlsLayers() {
+  controls_background_layer_ = window_->GetControlsBackgroundLayer();
+  controls_background_layer_->SetBounds(
+      gfx::Rect(gfx::Point(0, 0), window_->GetBounds().size()));
+
   close_controls_layer_ = window_->GetCloseControlsLayer();
   close_controls_layer_->SetFillsBoundsOpaquely(false);
   close_controls_layer_->SetBounds(window_->GetCloseControlsBounds());
@@ -57,6 +63,7 @@ void OverlaySurfaceEmbedder::AddControlsLayers() {
   play_pause_controls_layer_->SetFillsBoundsOpaquely(false);
   play_pause_controls_layer_->SetBounds(window_->GetPlayPauseControlsBounds());
 
+  window_->GetLayer()->Add(controls_background_layer_);
   window_->GetLayer()->Add(close_controls_layer_);
   window_->GetLayer()->Add(play_pause_controls_layer_);
 }

content/browser/picture_in_picture/overlay_surface_embedder.h

@@ -37,6 +37,7 @@ class OverlaySurfaceEmbedder {
 
   // Owned by the OverlayWindow implementation.
   ui::Layer* video_layer_ = nullptr;
+  ui::Layer* controls_background_layer_ = nullptr;
   ui::Layer* close_controls_layer_ = nullptr;
   ui::Layer* play_pause_controls_layer_ = nullptr;
 

content/public/browser/overlay_window.h

@@ -48,6 +48,7 @@ class OverlayWindow {
 
   // Retrieve the ui::Layers corresponding to the video and controls.
   virtual ui::Layer* GetVideoLayer() = 0;
+  virtual ui::Layer* GetControlsBackgroundLayer() = 0;
   virtual ui::Layer* GetCloseControlsLayer() = 0;
   virtual ui::Layer* GetPlayPauseControlsLayer() = 0;