Resize console dynamically

13 files changed, 116 insertions, 14 deletions

diff --git a/src/background/controllers/ConsoleController.ts b/src/background/controllers/ConsoleController.ts
new file mode 100644
index 0000000..11ee09d
--- /dev/null
+++ b/src/background/controllers/ConsoleController.ts
@@ -0,0 +1,11 @@
+import { injectable } from "tsyringe";
+import ConsoleUseCase from "./ConsoleUseCase";
+
+@injectable()
+export default class ConsoleController {
+  constructor(private readonly consoleUseCase: ConsoleUseCase) {}
+
+  resize(width: number, height: number) {
+    return this.consoleUseCase.resize(width, height);
+  }
+}
diff --git a/src/background/controllers/ConsoleFrameClient.ts b/src/background/controllers/ConsoleFrameClient.ts
new file mode 100644
index 0000000..170566d
--- /dev/null
+++ b/src/background/controllers/ConsoleFrameClient.ts
@@ -0,0 +1,15 @@
+import * as messages from "../../shared/messages";
+
+export default interface ConsoleFrameClient {
+  resize(tabId: number, width: number, height: number): Promise<void>;
+}
+
+export class ConsoleFrameClientImpl implements ConsoleFrameClient {
+  async resize(tabId: number, width: number, height: number): Promise<void> {
+    await browser.tabs.sendMessage(tabId, {
+      type: messages.CONSOLE_RESIZE,
+      width,
+      height,
+    });
+  }
+}
diff --git a/src/background/controllers/ConsoleUseCase.ts b/src/background/controllers/ConsoleUseCase.ts
new file mode 100644
index 0000000..556aaf8
--- /dev/null
+++ b/src/background/controllers/ConsoleUseCase.ts
@@ -0,0 +1,21 @@
+import { inject, injectable } from "tsyringe";
+import ConsoleFrameClient from "./ConsoleFrameClient";
+import TabPresenter from "../presenters/TabPresenter";
+
+@injectable()
+export default class ConsoleUseCase {
+  constructor(
+    @inject("TabPresenter")
+    private readonly tabPresenter: TabPresenter,
+    @inject("ConsoleFrameClient")
+    private readonly consoleFrameClient: ConsoleFrameClient
+  ) {}
+
+  async resize(width: number, height: number): Promise<void> {
+    const tabId = (await this.tabPresenter.getCurrent()).id;
+    if (typeof tabId === "undefined") {
+      return;
+    }
+    return this.consoleFrameClient.resize(tabId, width, height);
+  }
+}
diff --git a/src/background/di.ts b/src/background/di.ts
index 358ff1e..3c43d2d 100644
--- a/src/background/di.ts
+++ b/src/background/di.ts
@@ -18,6 +18,7 @@ import { BrowserSettingRepositoryImpl } from "./repositories/BrowserSettingRepos
 import { RepeatRepositoryImpl } from "./repositories/RepeatRepository";
 import { ZoomPresenterImpl } from "./presenters/ZoomPresenter";
 import { WindowPresenterImpl } from "./presenters/WindowPresenter";
+import { ConsoleFrameClientImpl } from "./controllers/ConsoleFrameClient";
 
 container.register("LocalSettingRepository", {
   useClass: LocalSettingRepository,
@@ -41,4 +42,5 @@ container.register("TabPresenter", { useClass: TabPresenterImpl });
 container.register("WindowPresenter", { useClass: WindowPresenterImpl });
 container.register("NavigateClient", { useClass: NavigateClientImpl });
 container.register("ConsoleClient", { useClass: ConsoleClientImpl });
+container.register("ConsoleFrameClient", { useClass: ConsoleFrameClientImpl });
 container.register("OperatorFactory", { useClass: OperatorFactoryImpl });
diff --git a/src/background/infrastructures/ContentMessageListener.ts b/src/background/infrastructures/ContentMessageListener.ts
index 26f98ab..ec87938 100644
--- a/src/background/infrastructures/ContentMessageListener.ts
+++ b/src/background/infrastructures/ContentMessageListener.ts
@@ -9,23 +9,23 @@ import LinkController from "../controllers/LinkController";
 import OperationController from "../controllers/OperationController";
 import MarkController from "../controllers/MarkController";
 import CompletionController from "../controllers/CompletionController";
+import ConsoleController from "../controllers/ConsoleController";
 
 @injectable()
 export default class ContentMessageListener {
-  private consolePorts: { [tabId: number]: browser.runtime.Port };
+  private readonly consolePorts: { [tabId: number]: browser.runtime.Port } = {};
 
   constructor(
-    private settingController: SettingController,
-    private commandController: CommandController,
-    private completionController: CompletionController,
-    private findController: FindController,
-    private addonEnabledController: AddonEnabledController,
-    private linkController: LinkController,
-    private operationController: OperationController,
-    private markController: MarkController
-  ) {
-    this.consolePorts = {};
-  }
+    private readonly settingController: SettingController,
+    private readonly commandController: CommandController,
+    private readonly completionController: CompletionController,
+    private readonly findController: FindController,
+    private readonly addonEnabledController: AddonEnabledController,
+    private readonly linkController: LinkController,
+    private readonly operationController: OperationController,
+    private readonly markController: MarkController,
+    private readonly consoleController: ConsoleController
+  ) {}
 
   run(): void {
     browser.runtime.onMessage.addListener(
@@ -80,6 +80,8 @@ export default class ContentMessageListener {
         return this.completionController.getProperties();
       case messages.CONSOLE_ENTER_COMMAND:
         return this.onConsoleEnterCommand(message.text);
+      case messages.CONSOLE_RESIZE:
+        return this.onConsoleResize(message.width, message.height);
       case messages.SETTINGS_QUERY:
         return this.onSettingsQuery();
       case messages.FIND_GET_KEYWORD:
@@ -114,6 +116,10 @@ export default class ContentMessageListener {
     return this.commandController.exec(text);
   }
 
+  onConsoleResize(width: number, height: number): Promise<void> {
+    return this.consoleController.resize(width, height);
+  }
+
   async onSettingsQuery(): Promise<unknown> {
     return (await this.settingController.getSetting()).toJSON();
   }
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() {
diff --git a/src/content/Application.ts b/src/content/Application.ts
index 996bbbc..7c8e588 100644
--- a/src/content/Application.ts
+++ b/src/content/Application.ts
@@ -107,6 +107,8 @@ export default class Application {
           return this.navigateController.openLinkNext(msg);
         case messages.NAVIGATE_LINK_PREV:
           return this.navigateController.openLinkPrev(msg);
+        case messages.CONSOLE_RESIZE:
+          return this.consoleFrameController.resize(msg);
       }
     });
 
diff --git a/src/content/controllers/ConsoleFrameController.ts b/src/content/controllers/ConsoleFrameController.ts
index 84e0ce6..38d3409 100644
--- a/src/content/controllers/ConsoleFrameController.ts
+++ b/src/content/controllers/ConsoleFrameController.ts
@@ -9,4 +9,8 @@ export default class ConsoleFrameController {
   unfocus(_message: messages.Message) {
     this.consoleFrameUseCase.unfocus();
   }
+
+  resize(message: messages.ConsoleResizeMessage) {
+    this.consoleFrameUseCase.resize(message.width, message.height);
+  }
 }
diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts
index 26522c4..ccc196b 100644
--- a/src/content/presenters/ConsoleFramePresenter.ts
+++ b/src/content/presenters/ConsoleFramePresenter.ts
@@ -2,6 +2,8 @@ export default interface ConsoleFramePresenter {
   initialize(): void;
 
   blur(): void;
+
+  resize(width: number, height: number): void;
 }
 
 export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
@@ -20,4 +22,12 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
     }
     ele.blur();
   }
+
+  resize(_width: number, height: number): void {
+    const ele = document.getElementById("vimvixen-console-frame");
+    if (!ele) {
+      return;
+    }
+    ele.style.height = `${height}px`;
+  }
 }
diff --git a/src/content/site-style.ts b/src/content/site-style.ts
index 3748c6b..478de10 100644
--- a/src/content/site-style.ts
+++ b/src/content/site-style.ts
@@ -5,7 +5,6 @@ export default `
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 100%;
   position: fixed;
   z-index: 2147483647;
   border: none !important;
diff --git a/src/content/usecases/ConsoleFrameUseCase.ts b/src/content/usecases/ConsoleFrameUseCase.ts
index b118c7f..7a0891d 100644
--- a/src/content/usecases/ConsoleFrameUseCase.ts
+++ b/src/content/usecases/ConsoleFrameUseCase.ts
@@ -12,4 +12,8 @@ export default class ConsoleFrameUseCase {
     window.focus();
     this.consoleFramePresenter.blur();
   }
+
+  resize(width: number, height: number) {
+    this.consoleFramePresenter.resize(width, height);
+  }
 }
diff --git a/src/shared/messages.ts b/src/shared/messages.ts
index 60d4c9e..59329e7 100644
--- a/src/shared/messages.ts
+++ b/src/shared/messages.ts
@@ -19,6 +19,7 @@ export const CONSOLE_REQUEST_BOOKMARKS = "console.request.bookmarks";
 export const CONSOLE_REQUEST_HISTORY = "console.request.history";
 export const CONSOLE_REQUEST_TABS = "console.request.tabs";
 export const CONSOLE_GET_PROPERTIES = "console.get.properties";
+export const CONSOLE_RESIZE = "console.resize";
 
 export const FOLLOW_START = "follow.start";
 export const FOLLOW_REQUEST_COUNT_TARGETS = "follow.request.count.targets";
@@ -127,6 +128,12 @@ export interface ConsoleGetPropertiesMessage {
   type: typeof CONSOLE_GET_PROPERTIES;
 }
 
+export interface ConsoleResizeMessage {
+  type: typeof CONSOLE_RESIZE;
+  width: number;
+  height: number;
+}
+
 export type ConsoleRequestTabsResponse = {
   index: number;
   flag: TabFlag;
@@ -301,6 +308,7 @@ export type Message =
   | ConsoleRequestHistoryMessage
   | ConsoleRequestTabsMessage
   | ConsoleGetPropertiesMessage
+  | ConsoleResizeMessage
   | ConsoleGetCompletionTypesMessage
   | ConsoleRequestSearchEnginesMessage
   | FollowStartMessage
@@ -363,11 +371,12 @@ export const valueOf = (o: any): Message => {
     case SETTINGS_CHANGED:
     case SETTINGS_QUERY:
     case CONSOLE_FRAME_MESSAGE:
+    case CONSOLE_RESIZE:
     case NAVIGATE_HISTORY_NEXT:
     case NAVIGATE_HISTORY_PREV:
     case NAVIGATE_LINK_NEXT:
     case NAVIGATE_LINK_PREV:
       return o;
   }
-  throw new Error("unknown operation type: " + o.type);
+  throw new Error("unknown message type: " + o.type);
 };