[views] Add support for click through

OlekWhiteGreen · martin-world1977 · commit fcdfeb3babc9 · 2022-06-24T00:13:45.000-04:00
diff --git a/shell/browser/ui/inspectable_web_contents_view.h b/shell/browser/ui/inspectable_web_contents_view.h
@@ -49,6 +49,7 @@ class InspectableWebContentsView {
   // GetInitiallyFocusedView() to set initial focus to web view.
   virtual views::View* GetWebView() = 0;
   virtual void SetCornerRadii(const gfx::RoundedCornersF& corner_radii) = 0;
+  virtual void SetClickThrough(bool click_through) = 0;
 #else
   virtual gfx::NativeView GetNativeView() const = 0;
 #endif
diff --git a/shell/browser/ui/native_view.cc b/shell/browser/ui/native_view.cc
@@ -35,6 +35,10 @@ void NativeView::SetVisible(bool visible) {
   SetVisibleImpl(visible);
 }
 
+NativeView::RoundedCornersOptions NativeView::GetRoundedCorners() const {
+  return rounded_corners_;
+}
+
 void NativeView::SetParent(NativeView* parent) {
   if (parent) {
     SetWindow(parent->window_);
@@ -68,9 +72,11 @@ int NativeView::GetZIndex() const {
   return z_index_;
 }
 
+#if BUILDFLAG(IS_MAC)
 void NativeView::SetClickThrough(bool click_through) {
   is_click_through_ = click_through;
 }
+#endif  // BUILDFLAG(IS_MAC)
 
 bool NativeView::IsClickThrough() const {
   return is_click_through_;
diff --git a/shell/browser/ui/native_view.h b/shell/browser/ui/native_view.h
@@ -221,6 +221,7 @@ class NativeView : public base::RefCounted<NativeView>,
 #endif
 
   virtual void SetRoundedCorners(const RoundedCornersOptions& options);
+  RoundedCornersOptions GetRoundedCorners() const;
 
   void SetClippingInsets(const ClippingInsetOptions& options);
 
@@ -255,7 +256,7 @@ class NativeView : public base::RefCounted<NativeView>,
   void SetZIndex(int z_index);
   int GetZIndex() const;
 
-  void SetClickThrough(bool click_through);
+  virtual void SetClickThrough(bool click_through);
   bool IsClickThrough() const;
 
   virtual void DetachChildView(NativeView* view);
@@ -322,6 +323,9 @@ class NativeView : public base::RefCounted<NativeView>,
   void OnViewBoundsChanged(views::View* observed_view) override;
   void OnViewRemovedFromWidget(views::View* observed_view) override;
   void OnViewIsDeleting(views::View* observed_view) override;
+  void OnViewHierarchyChanged(
+      views::View* observed_view,
+      const views::ViewHierarchyChangedDetails& details) override;
 #endif
 
   virtual void SetWindowForChildren(NativeWindow* window);
@@ -344,6 +348,7 @@ class NativeView : public base::RefCounted<NativeView>,
   int z_index_ = 1;
 
   bool is_click_through_ = false;
+  RoundedCornersOptions rounded_corners_;
 
 #if defined(TOOLKIT_VIEWS) && !BUILDFLAG(IS_MAC)
   bool delete_view_ = true;
diff --git a/shell/browser/ui/native_view_mac.mm b/shell/browser/ui/native_view_mac.mm
@@ -318,6 +318,7 @@ EventType EventTypeFromNS(NSEvent* event) {
 void NativeView::SetRoundedCorners(
     const NativeView::RoundedCornersOptions& options) {
   if (@available(macOS 10.13, *)) {
+    rounded_corners_ = options;
     SetWantsLayer(true);
     auto* view = GetNative();
     view.layer.masksToBounds = YES;
diff --git a/shell/browser/ui/native_view_views.cc b/shell/browser/ui/native_view_views.cc
@@ -14,6 +14,7 @@ void NativeView::SetNativeView(NATIVEVIEW view) {
     if (delete_view_)
       delete view_;
   }
+
   view_ = view;
   view_->AddObserver(this);
 }
@@ -53,6 +54,13 @@ void NativeView::OnViewIsDeleting(views::View* observed_view) {
   NotifyViewIsDeleting();
 }
 
+void NativeView::OnViewHierarchyChanged(
+      views::View* observed_view,
+      const views::ViewHierarchyChangedDetails& details) {
+  SetRoundedCorners(GetRoundedCorners());
+  SetClickThrough(IsClickThrough());
+}
+
 void NativeView::SetBounds(const gfx::Rect& bounds,
                            const BoundsAnimationOptions& options) {
   if (view_)
@@ -124,7 +132,11 @@ void NativeView::SetBackgroundColor(SkColor color) {
 
 void NativeView::SetRoundedCorners(
     const NativeView::RoundedCornersOptions& options) {
+  rounded_corners_ = options;
   auto* view = GetNative();
+  if (!view)
+    return;
+
   view->SetPaintToLayer();
   view->layer()->SetFillsBoundsOpaquely(false);
 
@@ -137,9 +149,21 @@ void NativeView::SetRoundedCorners(
   view->layer()->SetIsFastRoundedCorner(true);
 }
 
+void NativeView::SetClickThrough(bool click_through) {
+  is_click_through_ = click_through;
+  auto* view = GetNative();
+  if (!view)
+    return;
+
+  view->SetCanProcessEventsWithinSubtree(!click_through);
+}
+
 void NativeView::SetClippingInsets(
     const NativeView::ClippingInsetOptions& options) {
   auto* view = GetNative();
+  if (!view)
+    return;
+
   view->SetPaintToLayer();
   view->layer()->SetFillsBoundsOpaquely(false);
 
diff --git a/shell/browser/ui/native_wrapper_browser_view.h b/shell/browser/ui/native_wrapper_browser_view.h
@@ -28,6 +28,7 @@ class NativeWrapperBrowserView : public NativeView {
 
 #if defined(TOOLKIT_VIEWS) && !BUILDFLAG(IS_MAC)
   void SetRoundedCorners(const RoundedCornersOptions& options) override;
+  void SetClickThrough(bool click_through) override;
 #endif
 
  protected:
diff --git a/shell/browser/ui/native_wrapper_browser_view_views.cc b/shell/browser/ui/native_wrapper_browser_view_views.cc
@@ -30,6 +30,20 @@ void NativeWrapperBrowserView::SetRoundedCorners(
   iwc_view->SetCornerRadii(corner_radii);
 }
 
+void NativeWrapperBrowserView::SetClickThrough(bool click_through) {
+  NativeView::SetClickThrough(click_through);
+
+  if (!api_browser_view_)
+    return;
+
+  InspectableWebContentsView* iwc_view =
+      api_browser_view_->view()->GetInspectableWebContentsView();
+  if (!iwc_view)
+    return;
+
+  iwc_view->SetClickThrough(click_through);
+}
+
 void NativeWrapperBrowserView::InitWrapperBrowserView() {
   SetNativeView(new views::View());
 }
diff --git a/shell/browser/ui/views/inspectable_web_contents_view_views.cc b/shell/browser/ui/views/inspectable_web_contents_view_views.cc
@@ -21,6 +21,7 @@
 #include "ui/views/window/client_view.h"
 
 /***** stack *****/
+#include "ui/aura/window.h"
 #include "ui/base/ui_base_features.h"
 
 #include "electron/shell/browser/ui/views/scroll_with_layers/native_view_host_scroll_with_layers.h"
@@ -153,13 +154,36 @@ void InspectableWebContentsViewViews::SetCornerRadii(
           !inspectable_web_contents_->GetWebContents()->GetNativeView()))
     return;
 
+  if (devtools_web_view_ && devtools_web_view_->GetVisible())
+    return;
+
   auto* holder = static_cast<views::WebView*>(contents_web_view_)->holder();
   if (!holder || !holder->GetNativeViewContainer())
     return;
 
-  if (!devtools_web_view_ || !devtools_web_view_->GetVisible()) {
-    holder->SetCornerRadii(corner_radii);
-  }
+  holder->SetCornerRadii(corner_radii);
+}
+
+void InspectableWebContentsViewViews::SetClickThrough(bool click_through) {
+  if (!contents_web_view_ || !inspectable_web_contents_ ||
+      (inspectable_web_contents_->IsGuest() ||
+          !inspectable_web_contents_->GetWebContents()->GetNativeView()))
+    return;
+
+  if (devtools_web_view_ && devtools_web_view_->GetVisible())
+    return;
+
+  auto* holder = static_cast<views::WebView*>(contents_web_view_)->holder();
+  if (!holder || !holder->GetNativeViewContainer())
+    return;
+
+  aura::Window* native_view_container = holder->GetNativeViewContainer();
+  if (!native_view_container)
+    return;
+
+  native_view_container->SetEventTargetingPolicy(click_through ?
+      aura::EventTargetingPolicy::kNone :
+      aura::EventTargetingPolicy::kTargetAndDescendants);
 }
 
 void InspectableWebContentsViewViews::ShowDevTools(bool activate) {
diff --git a/shell/browser/ui/views/inspectable_web_contents_view_views.h b/shell/browser/ui/views/inspectable_web_contents_view_views.h
@@ -34,6 +34,7 @@ class InspectableWebContentsViewViews : public InspectableWebContentsView,
   views::View* GetView() override;
   views::View* GetWebView() override;
   void SetCornerRadii(const gfx::RoundedCornersF& corner_radii) override;
+  void SetClickThrough(bool click_through) override;
   void ShowDevTools(bool activate) override;
   void CloseDevTools() override;
   bool IsDevToolsViewShowing() override;
diff --git a/test/page_panel.html b/test/page_panel.html
@@ -0,0 +1,11 @@
+<html>
+<body style="background:white">
+<p>This is panel</p>
+<p><form>
+<button>Minimize</button>
+<button>Maximize</button>
+<button>Close</button>
+</form></p>
+</body>
+</html>
+
diff --git a/test/scrollview2_panels_click-through_rounded-corners.js b/test/scrollview2_panels_click-through_rounded-corners.js
@@ -0,0 +1,131 @@
+// BrowserViews in scroll, use setContentBaseView for BrowserWindow
+
+const path = require("path");
+const { app, BrowserView, BaseWindow, BrowserWindow, ContainerView, ScrollView, WrapperBrowserView } = require("electron");
+
+const APP_WIDTH = 600;
+const GAP = 30;
+
+const APPS = [
+  "https://bitbucket.org",
+  "https://github.com",
+  "https://youtube.com",
+  "https://figma.com/",
+  "https://thenextweb.com/",
+  "https://engadget.com/",
+  "https://theverge.com/",
+  "https://mashable.com",
+  "https://www.businessinsider.com",
+  "https://wired.com",
+  "https://macrumors.com",
+  "https://gizmodo.com",
+  "https://maps.google.com/",
+  "https://sheets.google.com/",
+];
+
+global.win = null;
+
+function createWindow () {
+  // Create window.
+  win = new BrowserWindow({ autoHideMenuBar: true, width: 1400, height: 1200 });
+
+  // The content view.
+  const contentView = new ContainerView();
+  //contentView.setStyle({ flexDirection: "row", backgroundColor: "#1F2937" });
+  contentView.setBackgroundColor("#1F2937");
+  contentView.setBounds({x: 0, y: 0, width: 1378, height: 800});
+
+  win.setContentBaseView(contentView);
+
+  // Scroll
+  const scroll = new ScrollView({ smoothScroll: true });
+  //scroll.setStyle({
+    //flex: 1,
+  //});
+  scroll.setBounds({x: 0, y: 0, width: 1377, height: 800});
+  scroll.setHorizontalScrollBarMode("enabled");
+  scroll.setVerticalScrollBarMode("disabled");
+  scroll.setScrollWheelSwapped(true);
+
+  contentView.addChildView(scroll);
+
+  // Scroll content
+  const scrollContent = new ContainerView();
+  //scrollContent.setStyle({
+    //flexDirection: "row",
+    //flex: 1,
+    //padding: 30,
+    //flexShrink: 0,
+  //});
+  scroll.setContentView(scrollContent);
+  scroll.setContentSize({width: APPS.length * (APP_WIDTH + GAP), height: 800});
+  scrollContent.setBackgroundColor("#FF0000");
+
+  // Webview
+  const addWebview = function (scrollContent, url, i) {
+    //chrome.setStyle({ flex: 1 });
+    //const webContentView = gui.Container.create();
+    //webContentView.setStyle({
+      //width: APP_WIDTH,
+      //height: "100%",
+      //backgroundColor: "#ffffff",
+      //marginRight: GAP,
+    //});
+    //webContentView.addChildView(chrome);
+    const panelBrowserView = new BrowserView({
+      webPreferences: {
+        optimizeForScroll : true,
+      }
+    });
+    panelBrowserView.webContents.loadFile(__dirname + '/page_panel.html');
+    panelBrowserView.setBackgroundColor("#ffffff");
+    const panelWrapperBrowserView = new WrapperBrowserView({ 'browserView': panelBrowserView });
+    panelWrapperBrowserView.setBounds({x: 0, y: 0, width: 600, height: 200});
+    panelWrapperBrowserView.setRoundedCorners({ 'radius': 10, 'topLeft': true, 'topRight': true, 'bottomLeft': false, 'bottomRight': false });
+    panelWrapperBrowserView.clickThrough = true;
+
+    const browserView = new BrowserView({
+      webPreferences: {
+        optimizeForScroll : true,
+      }
+    });
+    browserView.webContents.loadURL(url);
+    browserView.setBackgroundColor("#ffffff");
+    const wrapperBrowserView = new WrapperBrowserView({ 'browserView': browserView });
+    wrapperBrowserView.setBounds({x: 0, y: 200, width: 600, height: 540});
+    wrapperBrowserView.setRoundedCorners({ 'radius': 10, 'topLeft': false, 'topRight': false, 'bottomLeft': true, 'bottomRight': true });
+
+    const webContentView = new ContainerView();
+    webContentView.setBounds({x: i*(APP_WIDTH + GAP)+GAP, y: 30, width: 600, height: 740});
+    webContentView.addChildView(panelWrapperBrowserView);
+    webContentView.addChildView(wrapperBrowserView);
+    scrollContent.addChildView(webContentView);
+  };
+
+  var i = 0;
+  APPS.forEach((app) => {
+    addWebview(scrollContent, app, i++);
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+  createWindow();
+
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BaseWindow.getAllWindows().length === 0)
+      createWindow();
+  });
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin')
+    app.quit();
+});

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,10 @@ void NativeView::SetVisible(bool visible) {`
`35`	`35`	`SetVisibleImpl(visible);`
`36`	`36`	`}`
`37`	`37`
	`38`	`+NativeView::RoundedCornersOptions NativeView::GetRoundedCorners() const {`
	`39`	`+ return rounded_corners_;`
	`40`	`+}`
	`41`	`+`
`38`	`42`	`void NativeView::SetParent(NativeView* parent) {`
`39`	`43`	`if (parent) {`
`40`	`44`	`SetWindow(parent->window_);`
`@@ -68,9 +72,11 @@ int NativeView::GetZIndex() const {`
`68`	`72`	`return z_index_;`
`69`	`73`	`}`
`70`	`74`
	`75`	`+#if BUILDFLAG(IS_MAC)`
`71`	`76`	`void NativeView::SetClickThrough(bool click_through) {`
`72`	`77`	`is_click_through_ = click_through;`
`73`	`78`	`}`
	`79`	`+#endif // BUILDFLAG(IS_MAC)`
`74`	`80`
`75`	`81`	`bool NativeView::IsClickThrough() const {`
`76`	`82`	`return is_click_through_;`