Set iframe background color on neovim's default_colors_set (#1637)

Issue #1637 reports that resizing the underlying textarea of a Firenvim
iframe can result in flashes of color. This can be particularly visible
when using Firenvim with a dark colorscheme on Github in dark mode.

The reason for these flashes of color is that when resizing, the iframe
gets resized first and the Neovim canvas gets resized second, between
these two moments, the iframe's background color can become visible if
the CSS colorscheme of the iframe and of the website do not match.

We fix this by ensuring that the iframe's background color is set to the
background color of the Neovim colorscheme. This breaks the ability of
the iframe to turn transparent when unfocused (the iframe gets dimmed
instead), but given that multiple users complained about this feature,
it may not be such a bad change.

Closes #1637.

src/Neovim.ts

@@ -21,6 +21,11 @@ export async function neovim(
     CanvasRenderer.events.on("frameResize", ({width, height}: any) => {
         page.resizeEditor(width, height);
     });
+    CanvasRenderer.events.on("colorChange", (({background, foreground}: any) => {
+        const e = canvas.ownerDocument.documentElement;
+        e.style.backgroundColor = background;
+        e.style.color = foreground;
+    }));
 
     let prevNotificationPromise = Promise.resolve();
     const socket = new WebSocket(`ws://127.0.0.1:${port}/${password}`);

src/frame.ts

@@ -204,7 +204,7 @@ export const isReady = browser
                 nvim.nvim_command("doautocmd FocusGained");
             });
             window.addEventListener("blur", () => {
-                document.documentElement.style.opacity = "0.5";
+                document.documentElement.style.opacity = "0.7";
                 nvim.nvim_command("doautocmd FocusLost");
             });
             keyHandler.focus();

src/renderer.ts

@@ -6,7 +6,7 @@ type ResizeEvent = {grid: number, width: number, height: number};
 type FrameResizeEvent = {width: number, height: number}
 type ModeChangeEvent = NvimMode;
 type ResizeEventHandler = (e: ResizeEvent | FrameResizeEvent | ModeChangeEvent) => void;
-type EventKind = "resize" | "frameResize" | "modeChange" | "mouseOn" | "mouseOff";
+type EventKind = "colorChange" | "resize" | "frameResize" | "modeChange" | "mouseOn" | "mouseOff";
 export const events = new EventEmitter<EventKind, ResizeEventHandler>();
 
 let glyphCache : any = {};
@@ -420,6 +420,7 @@ const handlers : { [key:string] : (...args: any[])=>void } = {
         if (sp !== undefined && sp !== -1) {
             globalState.highlights[0].special = toHexCss(sp);
         }
+        events.emit("colorChange", globalState.highlights[0]);
         const curGridSize = globalState.gridSizes[getGridId()];
         if (curGridSize !== undefined) {
             pushDamage(getGridId(), DamageKind.Cell, curGridSize.height, curGridSize.width, 0, 0);