From 42edc89181fc5d76bfc6c57feec1b39e53623d50 Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Wed, 6 Jul 2022 14:48:20 +1000 Subject: [PATCH 1/6] Prevent Firefox from creating an opaque iframe --- src/console/index.tsx | 4 ++++ src/content/presenters/ConsoleFramePresenter.ts | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/console/index.tsx b/src/console/index.tsx index 5b979176..020d3824 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -5,6 +5,10 @@ import { AppProvider } from "./app/provider"; import App from "./App"; import "./index.css"; +const colorScheme = (new URLSearchParams(window.location.search)).get('colorScheme') +/* @ts-ignore */ +window.document.documentElement.style.colorScheme = colorScheme + window.addEventListener("DOMContentLoaded", () => { const wrapper = document.getElementById("vimvixen-console"); ReactDOM.render( diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts index 0db58f0b..559b3cf3 100644 --- a/src/content/presenters/ConsoleFramePresenter.ts +++ b/src/content/presenters/ConsoleFramePresenter.ts @@ -19,8 +19,10 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter { return; } + /* @ts-ignore */ + const colorScheme = getComputedStyle(document.getElementsByTagName('body')[0]).colorScheme const iframe = document.createElement("iframe"); - iframe.src = browser.runtime.getURL("build/console.html"); + iframe.src = browser.runtime.getURL("build/console.html?colorScheme=" + colorScheme); iframe.id = ConsoleFramePresenterImpl.IframeId; iframe.className = "vimvixen-console-frame"; document.body.append(iframe); From 226b3b75599317f116d19f477bad547798b7dd12 Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Wed, 6 Jul 2022 14:48:50 +1000 Subject: [PATCH 2/6] Prevent console from initally flashing white before content is loaded --- src/content/presenters/ConsoleFramePresenter.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts index 559b3cf3..b1925ce7 100644 --- a/src/content/presenters/ConsoleFramePresenter.ts +++ b/src/content/presenters/ConsoleFramePresenter.ts @@ -25,6 +25,7 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter { iframe.src = browser.runtime.getURL("build/console.html?colorScheme=" + colorScheme); iframe.id = ConsoleFramePresenterImpl.IframeId; iframe.className = "vimvixen-console-frame"; + iframe.style.height = '0px'; document.body.append(iframe); } From 5fe832462554a875db7e6579552e980e9b96709d Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Wed, 6 Jul 2022 14:49:05 +1000 Subject: [PATCH 3/6] Shrink console on blur --- src/content/presenters/ConsoleFramePresenter.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts index b1925ce7..acdd173b 100644 --- a/src/content/presenters/ConsoleFramePresenter.ts +++ b/src/content/presenters/ConsoleFramePresenter.ts @@ -42,6 +42,7 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter { if (!ele) { return; } + this.resize(0, 0) ele.blur(); } From f2b60e501ee1e0fa0324c2941984ad8283a82aa5 Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Wed, 6 Jul 2022 21:28:32 +1000 Subject: [PATCH 4/6] Always set colorScheme to a string --- src/console/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/console/index.tsx b/src/console/index.tsx index 020d3824..cb332434 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -7,7 +7,7 @@ import "./index.css"; const colorScheme = (new URLSearchParams(window.location.search)).get('colorScheme') /* @ts-ignore */ -window.document.documentElement.style.colorScheme = colorScheme +window.document.documentElement.style.colorScheme = colorScheme ?? '' window.addEventListener("DOMContentLoaded", () => { const wrapper = document.getElementById("vimvixen-console"); From f52ec6f451d43b63f50a43dfe778c34b4eef861f Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Mon, 25 Jul 2022 09:33:19 +1000 Subject: [PATCH 5/6] Use better API for accessing body --- src/content/presenters/ConsoleFramePresenter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts index acdd173b..532c2551 100644 --- a/src/content/presenters/ConsoleFramePresenter.ts +++ b/src/content/presenters/ConsoleFramePresenter.ts @@ -20,7 +20,7 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter { } /* @ts-ignore */ - const colorScheme = getComputedStyle(document.getElementsByTagName('body')[0]).colorScheme + const colorScheme = getComputedStyle(document.body).colorScheme const iframe = document.createElement("iframe"); iframe.src = browser.runtime.getURL("build/console.html?colorScheme=" + colorScheme); iframe.id = ConsoleFramePresenterImpl.IframeId; From ad05b6ba44566256b551958f0f69d75f939254be Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Mon, 1 Aug 2022 10:02:13 +1000 Subject: [PATCH 6/6] Improve handling of unknown type property Co-authored-by: Benny Powers --- src/console/index.tsx | 2 +- src/content/presenters/ConsoleFramePresenter.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/console/index.tsx b/src/console/index.tsx index cb332434..17dfcb58 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -6,7 +6,7 @@ import App from "./App"; import "./index.css"; const colorScheme = (new URLSearchParams(window.location.search)).get('colorScheme') -/* @ts-ignore */ +/* @ts-expect-error: The colorScheme property is not on the CSSStyleDeclaration type in TypeScript v4.3.5 */ window.document.documentElement.style.colorScheme = colorScheme ?? '' window.addEventListener("DOMContentLoaded", () => { diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts index 532c2551..793efc26 100644 --- a/src/content/presenters/ConsoleFramePresenter.ts +++ b/src/content/presenters/ConsoleFramePresenter.ts @@ -19,7 +19,7 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter { return; } - /* @ts-ignore */ + /* @ts-expect-error: The colorScheme property is not on the CSSStyleDeclaration type in TypeScript v4.3.5 */ const colorScheme = getComputedStyle(document.body).colorScheme const iframe = document.createElement("iframe"); iframe.src = browser.runtime.getURL("build/console.html?colorScheme=" + colorScheme);