Resize console dynamically

2 files changed, 19 insertions, 0 deletions

diff --git a/src/console/clients/ConsoleFrameClient.ts b/src/console/clients/ConsoleFrameClient.ts
new file mode 100644
index 0000000..954e518
--- /dev/null
+++ b/src/console/clients/ConsoleFrameClient.ts
@@ -0,0 +1,11 @@
+import * as messages from "../../shared/messages";
+
+export default class ConsoleFrameClient {
+  async resize(width: number, height: number): Promise<void> {
+    await browser.runtime.sendMessage({
+      type: messages.CONSOLE_RESIZE,
+      width,
+      height,
+    });
+  }
+}
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index 1c673fa..18a6632 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -13,6 +13,7 @@ import ColorScheme from "../../shared/ColorScheme";
 import { LightTheme, DarkTheme } from "./Theme";
 import styled from "./Theme";
 import { ThemeProvider } from "styled-components";
+import ConsoleFrameClient from "../clients/ConsoleFrameClient";
 
 const ConsoleWrapper = styled.div`
   border-top: 1px solid gray;
@@ -30,6 +31,7 @@ class Console extends React.Component<Props> {
   private input: React.RefObject<Input>;
 
   private commandLineParser: CommandLineParser = new CommandLineParser();
+  private consoleFrameClient = new ConsoleFrameClient();
 
   constructor(props: Props) {
     super(props);
@@ -130,6 +132,12 @@ class Console extends React.Component<Props> {
     } else if (prevProps.mode !== "find" && this.props.mode === "find") {
       this.focus();
     }
+
+    const {
+      scrollWidth: width,
+      scrollHeight: height,
+    } = document.getElementById("vimvixen-console")!;
+    this.consoleFrameClient.resize(width, height);
   }
 
   render() {