From 0b632445a933644c7eb10015eb04b7c21d562900 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 24 Apr 2022 17:01:25 +0200
Subject: refactor: reduce service switcher tearing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We render the location bar and notification banners separately for each
service and keep track of the BrowserView size separately for each
service to reduce the tearing that appears when people switch services.
The tearing cannot be eliminated completely, because it comes from the
separation between the main and renderer processes. But we can at least
try and reduce the IPC round-tripping and layout calculations required
to accurately position the services.

This approach has an overhead compared to the single
BrowserViewPlaceholder approach, because the renderer process has to
layout the location bar and notification for all services, not only the
selected one. The number of IPC messages during windows resize is also
increased. To compensate, we increase the throttle interval for resize
IPC messages and let electron itself resize the BrowserView between IPC
updates. (We must still keep pumping IPC messages during window resize,
because, e.g., changes in notification banner size due to re-layouting
will still affect the required BrowserView size).

If further reduction of IPC traffic is needed, we could implement
batching for resize IPC messages and more intelligent throttling via a
token bucker mechanism.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>
---
 .../renderer/src/components/BrowserViewPlaceholder.tsx     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages/renderer/src/components/BrowserViewPlaceholder.tsx')

diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 9bd1176..2bfc9b0 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -22,29 +22,29 @@ import Box from '@mui/material/Box';
 import throttle from 'lodash-es/throttle';
 import React, { ReactNode, useCallback, useRef } from 'react';
 
-import { useStore } from './StoreProvider';
+import Service from '../stores/Service';
 
 function BrowserViewPlaceholder({
+  service,
   children,
 }: {
+  service: Service;
   children?: ReactNode;
 }): JSX.Element {
-  const store = useStore();
-
   // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`.
   const onResize = useCallback(
     throttle(([entry]: ResizeObserverEntry[]) => {
       if (entry) {
         const { x, y, width, height } = entry.target.getBoundingClientRect();
-        store.setBrowserViewBounds({
+        service.setBrowserViewBounds({
           x: Math.round(x),
           y: Math.round(y),
           width: Math.round(width),
           height: Math.round(height),
         });
       }
-    }, 40),
-    [store],
+    }, 100),
+    [service],
   );
 
   const resizeObserverRef = useRef<ResizeObserver | undefined>();
@@ -61,7 +61,7 @@ function BrowserViewPlaceholder({
       resizeObserverRef.current = new ResizeObserver(onResize);
       resizeObserverRef.current.observe(element);
     },
-    [onResize, resizeObserverRef],
+    [onResize],
   );
 
   return (
-- 
cgit v1.2.3-54-g00ecf

