From 22a0befacd14d74ab3f35bc75dda5b09aca2260d Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Wed, 25 May 2022 14:06:53 +0300
Subject: [PATCH] fix: refresh terminal font after changing in the preferences
 / keep cluster iframe accessible in DOM while not active/focused

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../components/cluster-manager/cluster-frame-handler.ts   | 7 +++----
 .../components/cluster-manager/cluster-manager.scss       | 8 ++++++++
 src/renderer/components/dock/terminal/terminal.ts         | 2 ++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/cluster-manager/cluster-frame-handler.ts b/src/renderer/components/cluster-manager/cluster-frame-handler.ts
index 9601317140..cf579cdc09 100644
--- a/src/renderer/components/cluster-manager/cluster-frame-handler.ts
+++ b/src/renderer/components/cluster-manager/cluster-frame-handler.ts
@@ -45,7 +45,6 @@ export class ClusterFrameHandler {
 
     iframe.id = `cluster-frame-${cluster.id}`;
     iframe.name = cluster.contextName;
-    iframe.style.display = "none";
     iframe.setAttribute("src", getClusterFrameUrl(clusterId));
     iframe.addEventListener("load", action(() => {
       logger.info(`[LENS-VIEW]: frame for clusterId=${clusterId} has loaded`);
@@ -95,7 +94,7 @@ export class ClusterFrameHandler {
     ipcRenderer.send(clusterVisibilityHandler);
 
     for (const { frame: view } of this.views.values()) {
-      view.style.display = "none";
+      view.classList.add("hidden");
     }
 
     const cluster = clusterId
@@ -113,9 +112,9 @@ export class ClusterFrameHandler {
 
           return undefined;
         },
-        (view) => {
+        (view: LensView) => {
           logger.info(`[LENS-VIEW]: cluster id=${clusterId} should now be visible`);
-          view.frame.style.display = "flex";
+          view.frame.classList.remove("hidden");
           ipcRenderer.send(clusterVisibilityHandler, clusterId);
         },
       );
diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index e6f5bb43e2..582a8f83ea 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/src/renderer/components/cluster-manager/cluster-manager.scss
@@ -35,7 +35,15 @@
     background-color: var(--mainBackground);
 
     iframe {
+      display: flex;
       flex: 1;
+
+      // when updating font settings in the "Preferences -> Terminal" cluster's iframe
+      // must be accessible in DOM (e.g. elem.getBoundingClientRect() must work)
+      &.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
     }
   }
 }
diff --git a/src/renderer/components/dock/terminal/terminal.ts b/src/renderer/components/dock/terminal/terminal.ts
index 76c39764b5..e26aebc26e 100644
--- a/src/renderer/components/dock/terminal/terminal.ts
+++ b/src/renderer/components/dock/terminal/terminal.ts
@@ -208,12 +208,14 @@ export class Terminal {
     logger.info(`[TERMINAL]: set fontSize to ${fontSize}`);
 
     this.xterm.options.fontSize = fontSize;
+    this.fit();
   };
 
   setFontFamily = (fontFamily: string) => {
     logger.info(`[TERMINAL]: set fontFamily to ${fontFamily}`);
 
     this.xterm.options.fontFamily = fontFamily;
+    this.fit();
 
     // provide css-variable within `:root {}`
     document.documentElement.style.setProperty("--font-terminal", fontFamily);