From 0b632445a933644c7eb10015eb04b7c21d562900 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy 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 --- .../renderer/src/components/banner/InsecureConnectionBanner.tsx | 7 +------ packages/renderer/src/components/banner/NewWindowBanner.tsx | 7 +------ 2 files changed, 2 insertions(+), 12 deletions(-) (limited to 'packages/renderer/src/components/banner') diff --git a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx index 7a03fce..0b70db6 100644 --- a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx +++ b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx @@ -34,17 +34,12 @@ import NotificationBanner from './NotificationBanner'; function InsecureConnectionBanner({ service, }: { - service: Service | undefined; + service: Service; }): JSX.Element | null { const { t } = useTranslation(undefined, { keyPrefix: 'banner.insecureConnection', }); - if (service === undefined) { - // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering. - return null; - } - const { canReconnectSecurely, hasError, diff --git a/packages/renderer/src/components/banner/NewWindowBanner.tsx b/packages/renderer/src/components/banner/NewWindowBanner.tsx index 478de8e..07fafda 100644 --- a/packages/renderer/src/components/banner/NewWindowBanner.tsx +++ b/packages/renderer/src/components/banner/NewWindowBanner.tsx @@ -32,17 +32,12 @@ import NotificationBanner from './NotificationBanner'; function NewWindowBanner({ service, }: { - service: Service | undefined; + service: Service; }): JSX.Element | null { const { t } = useTranslation(undefined, { keyPrefix: 'banner.newWindow', }); - if (service === undefined) { - // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering. - return null; - } - const { popups, settings: { name }, -- cgit v1.2.3-54-g00ecf