Skip to content
This repository has been archived by the owner on Apr 11, 2023. It is now read-only.

Fix opaque console iframe overlaying some websites #1437

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Fix opaque console iframe overlaying some websites #1437

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
42edc89
Prevent Firefox from creating an opaque iframe
jessarcher Jul 6, 2022
226b3b7
Prevent console from initally flashing white before content is loaded
jessarcher Jul 6, 2022
5fe8324
Shrink console on blur
jessarcher Jul 6, 2022
f2b60e5
Always set colorScheme to a string
jessarcher Jul 6, 2022
f52ec6f
Use better API for accessing body
jessarcher Jul 24, 2022
ad05b6b
Improve handling of unknown type property
jessarcher Aug 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/console/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
jessarcher marked this conversation as resolved.
Show resolved Hide resolved
window.document.documentElement.style.colorScheme = colorScheme
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colorScheme property is not on the CSSStyleDeclaration type in the project's TypeScript version, which is currently pinned to 4.3.5.

We can remove the @ts-ignore by upgrading to TypeScript 4.4+, but I wasn't sure if there was a specific reason that it was pinned to 4.3.5.


window.addEventListener("DOMContentLoaded", () => {
const wrapper = document.getElementById("vimvixen-console");
ReactDOM.render(
Expand Down
6 changes: 5 additions & 1 deletion src/content/presenters/ConsoleFramePresenter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,13 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
return;
}

/* @ts-ignore */
jessarcher marked this conversation as resolved.
Show resolved Hide resolved
const colorScheme = getComputedStyle(document.getElementsByTagName('body')[0]).colorScheme
jessarcher marked this conversation as resolved.
Show resolved Hide resolved
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";
iframe.style.height = '0px';
document.body.append(iframe);
}

Expand All @@ -39,6 +42,7 @@ export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
if (!ele) {
return;
}
this.resize(0, 0)
ele.blur();
}

Expand Down