Repository: electron/electron (language: cpp)

Issue:
[Bug]: red background on hover to PiP
### Preflight Checklist

- [X] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [X] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a bug report that matches the one I want to file, without success.

### Electron Version

19.0.1

### What operating system are you using?

Windows

### Operating System Version

Windows 10 Pro Version 19044.1706

### What arch are you using?

x64

### Last Known Working Electron version

18.1.0

### Expected Behavior

when hovering over pip, there is no red background and controls are visible

### Actual Behavior

when hovering over pip, there is a red background and no controls are visible

### Testcase Gist URL

_No response_

### Additional Information

![image](https://user-images.githubusercontent.com/11525479/171402617-11d4444d-fe18-4711-b5c5-a0773f9993b1.png)



Discussion / hints:
Thanks for reporting this and helping to make Electron better!

Would it be possible for you to make a standalone testcase with only the code necessary to reproduce the issue? For example, Electron Fiddle is a great tool for making small test cases and makes it easy to publish your test case to a gist that Electron maintainers can use. Stand-alone test cases make fixing issues go more smoothly: it ensure everyone's looking at the same issue, it removes all unnecessary variables from the equation, and it can also provide the basis for automated regression tests.

I'm adding the blocked/need-repro label for this reason. After you make a test case, please link to it in a followup comment.

Thanks in advance!
https://gist.github.com/Genexys/c25b1f230a3b84436c983c67986420ab/revisions test from electron fiddle
![image](https://user-images.githubusercontent.com/11525479/172145775-4b430c85-b412-4a2c-b0b9-1ec9650fd93f.png)

Experiencing this on [min browser](https://github.com/minbrowser/min) (master) using 19.0.1.
@Genexys The latest stable version of electron that doesn't have the red background issue is 18.3.0.

This is bugging me but I am by no means an electron expert, just a tinkerer of many things. My first hunch is that it isn't loading the `picture-in-picture.html` resource properly. But I have had a look at the .ts based changes that call for this between v18.3.0 and v19.0.0 and there seems to be no appreciable difference with Picture in Picture.

Electron files I had a look at:

[electron-18.3.0/spec-main/api-web-contents-spec.ts L1891](https://github.com/electron/electron/blob/v18.3.0/spec-main/api-web-contents-spec.ts#L1891)
[electron-19.0.0/spec-main/api-web-contents-spec.ts L1891](https://github.com/electron/electron/blob/v19.0.0/spec-main/api-web-contents-spec.ts#L1891)

[electron-18.3.0/spec/fixtures/api/picture-in-picture.html](https://github.com/electron/electron/blob/v18.3.0/spec/fixtures/api/picture-in-picture.html)
[electron-19.0.0/spec/fixtures/api/picture-in-picture.html](https://github.com/electron/electron/blob/v19.0.0/spec/fixtures/api/picture-in-picture.html)

However the buttons actually work even though they are hidden by the red. Where there does seem to be an appreciable difference is in the chromium patches to implement PiP.

[electron-18.3.0/patches/chromium/picture-in-picture.patch](https://github.com/electron/electron/blob/v18.3.0/patches/chromium/picture-in-picture.patch)
[electron-19.0.0/patches/chromium/picture-in-picture.patch](https://github.com/electron/electron/blob/v19.0.0/patches/chromium/picture-in-picture.patch)

@VerteDinde I am on macOS so could you please update the tag to include this platform tag. Unsure about linux at this stage.
Hello from [Teamflow](https://www.teamflowhq.com) − we are also seeing this issue on our side after upgrading to 19.0.3 from 18.x.x. As @flightmansam mentioned, this issue is present on macOS as well!
I can confirm, that we tested on 19.0.7 both in windows 10 and MacOS Monterrey and we got the red bug. 
Rollbacking our app to 18.3.5 fixed the problem.
Chrome 102 doesn't show this bug if this gives more info.

Fix patch:
diff --git a/chromium_src/BUILD.gn b/chromium_src/BUILD.gn
index bfd971e576a85..2ec068f21e809 100644
--- a/chromium_src/BUILD.gn
+++ b/chromium_src/BUILD.gn
@@ -55,6 +55,14 @@ static_library("chrome") {
     "//chrome/browser/process_singleton.h",
     "//chrome/browser/process_singleton_internal.cc",
     "//chrome/browser/process_singleton_internal.h",
+    "//chrome/browser/themes/browser_theme_pack.cc",
+    "//chrome/browser/themes/browser_theme_pack.h",
+    "//chrome/browser/themes/custom_theme_supplier.cc",
+    "//chrome/browser/themes/custom_theme_supplier.h",
+    "//chrome/browser/themes/theme_properties.cc",
+    "//chrome/browser/themes/theme_properties.h",
+    "//chrome/browser/ui/color/chrome_color_mixers.cc",
+    "//chrome/browser/ui/color/chrome_color_mixers.h",
     "//chrome/browser/ui/exclusive_access/exclusive_access_bubble_type.cc",
     "//chrome/browser/ui/exclusive_access/exclusive_access_bubble_type.h",
     "//chrome/browser/ui/exclusive_access/exclusive_access_controller_base.cc",
@@ -69,7 +77,11 @@ static_library("chrome") {
     "//chrome/browser/ui/exclusive_access/keyboard_lock_controller.h",
     "//chrome/browser/ui/exclusive_access/mouse_lock_controller.cc",
     "//chrome/browser/ui/exclusive_access/mouse_lock_controller.h",
+    "//chrome/browser/ui/frame/window_frame_util.cc",
+    "//chrome/browser/ui/frame/window_frame_util.h",
     "//chrome/browser/ui/native_window_tracker.h",
+    "//chrome/browser/ui/ui_features.cc",
+    "//chrome/browser/ui/ui_features.h",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper.cc",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper.h",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper_view.cc",
@@ -110,6 +122,8 @@ static_library("chrome") {
       "//chrome/browser/ui/view_ids.h",
       "//chrome/browser/win/chrome_process_finder.cc",
       "//chrome/browser/win/chrome_process_finder.h",
+      "//chrome/browser/win/titlebar_config.cc",
+      "//chrome/browser/win/titlebar_config.h",
       "//chrome/browser/win/titlebar_config.h",
       "//chrome/child/v8_crashpad_support_win.cc",
       "//chrome/child/v8_crashpad_support_win.h",
@@ -131,6 +145,7 @@ static_library("chrome") {
 
   public_deps = [
     "//chrome/browser:dev_ui_browser_resources",
+    "//chrome/browser/ui/color:mixers",
     "//chrome/common",
     "//chrome/common:version_header",
     "//components/keyed_service/content",
diff --git a/shell/browser/electron_browser_main_parts.cc b/shell/browser/electron_browser_main_parts.cc
index b422d930769f8..59d09e8730652 100644
--- a/shell/browser/electron_browser_main_parts.cc
+++ b/shell/browser/electron_browser_main_parts.cc
@@ -17,6 +17,7 @@
 #include "base/strings/string_number_conversions.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/icon_manager.h"
+#include "chrome/browser/ui/color/chrome_color_mixers.h"
 #include "chrome/common/chrome_paths.h"
 #include "chrome/common/chrome_switches.h"
 #include "components/os_crypt/key_storage_config_linux.h"
@@ -224,6 +225,9 @@ int ElectronBrowserMainParts::PreEarlyInitialization() {
   screen_ = std::make_unique<display::ScopedNativeScreen>();
 #endif
 
+  ui::ColorProviderManager::Get().AppendColorProviderInitializer(
+      base::BindRepeating(AddChromeColorMixers));
+
   return GetExitCode();
 }
 


Test patch: