From 635aab838f5620cd2913224fce2737e9d49f8d01 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Thu, 16 Jun 2022 16:49:59 -0700
Subject: [PATCH] Counteract zoom-level changes in custom titlebar

---
 package.json                                  |  2 +-
 stylesheets/_titlebar.scss                    | 13 ++++++++-----
 stylesheets/components/TitleBarContainer.scss |  4 +++-
 ts/background.ts                              | 11 ++++++++++-
 ts/components/TitleBarContainer.tsx           |  6 ++++++
 yarn.lock                                     |  8 ++++----
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 4c49b2da8..e06306c4f 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "fs-xattr": "0.3.0"
   },
   "dependencies": {
-    "@indutny/frameless-titlebar": "2.2.0",
+    "@indutny/frameless-titlebar": "2.3.0-rc.1",
     "@popperjs/core": "2.9.2",
     "@react-spring/web": "9.4.5",
     "@signalapp/libsignal-client": "0.17.0",
diff --git a/stylesheets/_titlebar.scss b/stylesheets/_titlebar.scss
index 3cda13aa6..f41d079f5 100644
--- a/stylesheets/_titlebar.scss
+++ b/stylesheets/_titlebar.scss
@@ -2,27 +2,30 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 body {
+  // Overriden by ts/background.ts
+  --zoom-factor: 1;
+
   // These should match the logic in `ts/types/Settings.ts`'s `getTitleBarVisibility`.
   //
   // 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: 28px;
+  &.os-windows:not(.full-screen) {
+    --title-bar-drag-area-height: calc(28px / var(--zoom-factor));
     --draggable-app-region: drag;
   }
 
   --window-height: 100vh;
   --titlebar-height: 0px;
 
-  &.os-windows:not(.full-screen) {
-    --titlebar-height: 28px;
+  &.os-macos:not(.full-screen) {
+    --titlebar-height: calc(28px / var(--zoom-factor));
 
     // Account for border eating one pixel out of the titlebar and making it
     // look unbalanced
     &.os-windows-11 {
-      --titlebar-height: calc(28px + 1px);
+      --titlebar-height: calc((28px + 1px) / var(--zoom-factor));
     }
 
     --window-height: calc(100vh - var(--titlebar-height));
diff --git a/stylesheets/components/TitleBarContainer.scss b/stylesheets/components/TitleBarContainer.scss
index fbdfcd402..2ad010720 100644
--- a/stylesheets/components/TitleBarContainer.scss
+++ b/stylesheets/components/TitleBarContainer.scss
@@ -10,8 +10,10 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
+    width: calc(100vw * var(--zoom-factor));
     z-index: $z-index-window-controls;
+    transform: scale(calc(1 / var(--zoom-factor)));
+    transform-origin: 0 0;
 
     // This matches the inline styles of frameless-titlebar
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
diff --git a/ts/background.ts b/ts/background.ts
index 6ac47cdb3..231b11a94 100644
--- a/ts/background.ts
+++ b/ts/background.ts
@@ -700,7 +700,16 @@ export async function startApp(): Promise<void> {
       },
     });
 
-    webFrame.setZoomFactor(window.Events.getZoomFactor());
+    const zoomFactor = window.Events.getZoomFactor();
+    webFrame.setZoomFactor(zoomFactor);
+    document.body.style.setProperty('--zoom-factor', zoomFactor.toString());
+
+    window.addEventListener('resize', () => {
+      document.body.style.setProperty(
+        '--zoom-factor',
+        webFrame.getZoomFactor().toString()
+      );
+    });
 
     // How long since we were last running?
     const lastHeartbeat = toDayMillis(window.storage.get('lastHeartbeat', 0));
diff --git a/ts/components/TitleBarContainer.tsx b/ts/components/TitleBarContainer.tsx
index 065d66fed..43b20d84a 100644
--- a/ts/components/TitleBarContainer.tsx
+++ b/ts/components/TitleBarContainer.tsx
@@ -171,6 +171,12 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
         opacity: 0,
       },
     },
+
+    // Zoom support
+    enableOverflow: false,
+    scalingFunction(value: string) {
+      return `calc(${value} * var(--zoom-factor))`;
+    },
   };
 
   return (
diff --git a/yarn.lock b/yarn.lock
index 77d1e297c..6cdc6ed84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1378,10 +1378,10 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@indutny/frameless-titlebar@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.2.0.tgz#600ad754dda50105d2c4fe0de8bb25837eca1a8c"
-  integrity sha512-TJQ3ZJyUdtOAVIdGSV8GxXPPpt6WdlFtqwDAvgV2SbOXng5/uioSBd7iySyDA48suR7XCaa41V4/xp/E/5uVpg==
+"@indutny/frameless-titlebar@2.3.0-rc.1":
+  version "2.3.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.3.0-rc.1.tgz#95b11a29aecec025605a77b283f9494724566217"
+  integrity sha512-QT8sZyjQ1fqeSon7Oop1uf5Zl2CmaXE82HD+b2QtkUUsNFpvwTD705hRSeaxjIkdnLOr0Q9FD5EgWqq72qP6+A==
   dependencies:
     classnames "^2.2.6"
     deepmerge "^4.2.2"