From bb6e01148807504b1c5eadd8e5fcc8b1bbc12926 Mon Sep 17 00:00:00 2001
From: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
Date: Mon, 27 Nov 2023 18:13:28 -0500
Subject: [PATCH] Disable draggable regions when context menu is open

---
 stylesheets/_mixins.scss                      |  7 +++
 stylesheets/_titlebar.scss                    |  2 -
 .../CallingScreenSharingController.scss       |  2 +-
 .../components/ConversationHeader.scss        | 53 +------------------
 stylesheets/components/NavSidebar.scss        |  2 +-
 ts/components/ContextMenu.tsx                 | 15 ++++++
 6 files changed, 25 insertions(+), 56 deletions(-)

diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index bd9eff5c9802..235a47ead3e2 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -876,3 +876,10 @@ $rtl-icon-map: (
     }
   }
 }
+
+@mixin draggable-region {
+  -webkit-app-region: drag;
+  body.context-menu-open & {
+    -webkit-app-region: no-drag;
+  }
+}
diff --git a/stylesheets/_titlebar.scss b/stylesheets/_titlebar.scss
index b635c120fd5e..7e5dc3885dbc 100644
--- a/stylesheets/_titlebar.scss
+++ b/stylesheets/_titlebar.scss
@@ -10,10 +10,8 @@ body {
   // It'd be great if we could use the `:fullscreen` selector here, but that does not seem
   //   to work with Electron, at least on macOS.
   --title-bar-drag-area-height: 0px; // Needs to have a unit to work with `calc()`.
-  --draggable-app-region: initial;
   &.os-macos:not(.full-screen) {
     --title-bar-drag-area-height: calc(28px / var(--zoom-factor));
-    --draggable-app-region: drag;
   }
 
   --window-height: 100vh;
diff --git a/stylesheets/components/CallingScreenSharingController.scss b/stylesheets/components/CallingScreenSharingController.scss
index bc18991328bd..c9fb47fb1ab4 100644
--- a/stylesheets/components/CallingScreenSharingController.scss
+++ b/stylesheets/components/CallingScreenSharingController.scss
@@ -7,7 +7,7 @@
   justify-content: space-between;
   padding-block: 4px;
   padding-inline: 16px;
-  -webkit-app-region: drag;
+  @include draggable-region;
 
   &__text {
     @include font-body-2;
diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss
index 85f3f8ad9884..3eed13e8c354 100644
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@@ -32,8 +32,7 @@
     --button-spacing: 4px;
   }
 
-  -webkit-app-region: var(--draggable-app-region);
-
+  @include draggable-region;
   // In Electron v23+, clicking on a `drag` region in an unfocused window may not
   // propagate clicks to no-drag elements that have a higher CSS order; this avoids that
   // scenario for interactive elements (e.g. IncomingCallBar) which overlap the
@@ -57,56 +56,6 @@
     background-color: $color-gray-95;
   }
 
-  &__back-icon {
-    $transition: 250ms ease-out;
-
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    margin-inline-start: -20px;
-    vertical-align: text-bottom;
-    border: none;
-    opacity: 0;
-    // while it is invisible, allow it to be draggable
-    -webkit-app-region: drag;
-    transition: margin-inline-start $transition, opacity $transition;
-
-    &:disabled {
-      cursor: default;
-    }
-
-    &--show {
-      opacity: 1;
-      margin-inline: 24px 6px;
-      -webkit-app-region: no-drag;
-    }
-
-    @include light-theme {
-      @include color-svg(
-        '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-90
-      );
-    }
-    @include dark-theme {
-      @include color-svg(
-        '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-02
-      );
-    }
-
-    @include keyboard-mode {
-      &:focus {
-        background-color: $color-ultramarine;
-      }
-    }
-    @include dark-keyboard-mode {
-      &:focus {
-        background-color: $color-ultramarine-light;
-      }
-    }
-  }
-
   &__header {
     $padding: 4px 12px;
 
diff --git a/stylesheets/components/NavSidebar.scss b/stylesheets/components/NavSidebar.scss
index 1b2a010d3ead..8bbee5a53e78 100644
--- a/stylesheets/components/NavSidebar.scss
+++ b/stylesheets/components/NavSidebar.scss
@@ -25,7 +25,7 @@
   align-items: start;
   flex-shrink: 0;
   padding-bottom: 6px;
-  -webkit-app-region: drag;
+  @include draggable-region;
 
   .NavTabs__Toggle {
     width: $NavTabs__width;
diff --git a/ts/components/ContextMenu.tsx b/ts/components/ContextMenu.tsx
index 496f73c6ab9d..2f072f496a6c 100644
--- a/ts/components/ContextMenu.tsx
+++ b/ts/components/ContextMenu.tsx
@@ -97,6 +97,21 @@ export function ContextMenu<T>({
     }
   );
 
+  // In Electron v23+, new elements added to the DOM may not trigger a recalculation of
+  // draggable regions, so if a ContextMenu is shown on top of a draggable region, its
+  // buttons may be unclickable. We add a class so that we can disable those draggable
+  // regions while the context menu is shown. It has the added benefit of ensuring that
+  // click events outside of the context menu onto an otherwise draggable region are
+  // propagated and trigger the menu to close.
+  useEffect(() => {
+    document.body.classList.toggle('context-menu-open', isMenuShowing);
+  }, [isMenuShowing]);
+
+  useEffect(() => {
+    // Remove it on unmount in case the component is unmounted when the menu is open
+    return () => document.body.classList.remove('context-menu-open');
+  }, []);
+
   useEffect(() => {
     if (onMenuShowingChanged) {
       onMenuShowingChanged(isMenuShowing);