From 04ebd1e5331d29b2413c174ae0fe9d73566b3b8d Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 14 Mar 2021 22:57:56 +0900 Subject: Resize console dynamically --- src/background/controllers/ConsoleController.ts | 11 ++++++++ src/background/controllers/ConsoleFrameClient.ts | 15 +++++++++++ src/background/controllers/ConsoleUseCase.ts | 21 +++++++++++++++ src/background/di.ts | 2 ++ .../infrastructures/ContentMessageListener.ts | 30 +++++++++++++--------- src/console/clients/ConsoleFrameClient.ts | 11 ++++++++ src/console/components/Console.tsx | 8 ++++++ src/content/Application.ts | 2 ++ src/content/controllers/ConsoleFrameController.ts | 4 +++ src/content/presenters/ConsoleFramePresenter.ts | 10 ++++++++ src/content/site-style.ts | 1 - src/content/usecases/ConsoleFrameUseCase.ts | 4 +++ src/shared/messages.ts | 11 +++++++- 13 files changed, 116 insertions(+), 14 deletions(-) create mode 100644 src/background/controllers/ConsoleController.ts create mode 100644 src/background/controllers/ConsoleFrameClient.ts create mode 100644 src/background/controllers/ConsoleUseCase.ts create mode 100644 src/console/clients/ConsoleFrameClient.ts (limited to 'src') 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; +} + +export class ConsoleFrameClientImpl implements ConsoleFrameClient { + async resize(tabId: number, width: number, height: number): Promise { + 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 { + 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 { + return this.consoleController.resize(width, height); + } + async onSettingsQuery(): Promise { 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 { + 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 { private input: React.RefObject; private commandLineParser: CommandLineParser = new CommandLineParser(); + private consoleFrameClient = new ConsoleFrameClient(); constructor(props: Props) { super(props); @@ -130,6 +132,12 @@ class Console extends React.Component { } 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); }; -- cgit v1.2.3