Fix opaque console iframe overlaying some websites #1437

jessarcher · 2022-07-06T11:14:51Z

This PR fixes the following issue where the console iframe is not transparent on sites that specify a color-scheme, such as GitHub:

The issue is caused by a change in Firefox where it will now make iframes opaque if their color-scheme differs from the parent page. The Vim Vixen iframe currently doesn't specify a color-scheme, but sites like GitHub do, hence the issue.

See https://bugzilla.mozilla.org/show_bug.cgi?id=1738380 and https://fvsch.com/transparent-iframes

This PR makes two changes to solve this:

1. Set the appropriate color-scheme on the console.

The ConsoleFramePresenter gets the computed color-scheme for the <body> tag where the <iframe> will be injected and passes it to the console page via a query string parameter.

The console page takes the query string parameter and updates the colorScheme style property on the root element.

While this does fix the issue once the page has loaded, the white overlay is still briefly visible while it's loading.

I tried several methods to set the color-scheme but this was the only way I could set the value with the cross-origin of the <iframe>. I'm open to alternatives.

2. Shrink the <iframe> when not in use.

To hide the white overlay while the page is loading, I've set the initial height of the <iframe> to 0px. The useAutoResize hook already sets the correct height on the <iframe> once the user triggers it.

While not strictly necessary, I've also set the <iframe> height back to 0px when the console is closed. This solves a minor issue I've had during web development where the browser element selector will highlight the invisible Vim Vixen <iframe> at the bottom of the page which makes it hard to select items underneath it.

The shrinking of the <iframe> makes setting the color-scheme almost unnecessary. However, I've left it for a few reasons:

When closing the console, occasionally I was able to see the white background briefly before the resize kicks in.
When the console is open, there is a thin white line visible above it. This could probably be solved with CSS.
Making the background transparent is presumably valuable for those with a semi-opaque console background theme.

Fixes #1424
Fixes #1429
Fixes #1433

jessarcher · 2022-07-06T11:32:22Z

src/console/index.tsx

+/* @ts-ignore */
+window.document.documentElement.style.colorScheme = colorScheme


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.

jessarcher · 2022-07-06T11:48:45Z

For anyone that wants to try this, you can build my branch as follows. You will need Git, Node, Yarn, and a Firefox edition that supports unsigned addons. Make sure you understand the risks before continuing.

git clone [email protected]:jessarcher/vim-vixen.git
cd vim-vixen
git checkout fix-console-bg
yarn install
yarn package

This should create a vim-vixen-1.2.4.zip file in this directory which you can install from about:addons.

Again, only do this if you understand and accept the risks of enabling unsigned addons and always compile from source!

ditsuke · 2022-07-08T06:59:59Z

@ueokande I'm also considering opening a PR for #111. Can you let me know if you're welcoming PRs here?

danjones1618 · 2022-07-08T12:29:55Z

Just installed this patch and it seems to be working. Thanks @jessarcher

jsoo1 · 2022-07-11T17:30:47Z

Also confirm this looks good. I don't really see any other means of communicating the color-scheme to the iframe, either. This LGTM.

cdbrkfxrpt · 2022-07-15T09:32:34Z

Installed and works as intended. Thanks for the fix.

LordPax · 2022-07-18T14:04:59Z

i have a question, when this PR will be merge ?

johalun · 2022-07-21T17:03:28Z

How do you install the add-on? I've disabled xpinstall.signatures.required but still getting not verified error. On latest macOS and Firefox 102.0.1.

LordPax · 2022-07-21T17:06:30Z

@johalun it's because you dont use developer version of firefox

danjones1618 · 2022-07-21T17:07:12Z

You can migrate to the dev version using your normal FF profile by doing firefox -p

johalun · 2022-07-21T17:08:38Z

Thanks for the clarification. I don't wanna mess anything up so I'll just wait for this to be merged.

xeruf · 2022-07-22T11:59:41Z

The developer of this plugin seems to be inactive :/ maybe we need a community fork?

jman-schief · 2022-07-22T12:43:50Z

To all that complain: can we please cut some slack to the project maintainer(s)? Being passionate about this project does not mean that entitled comments are fine either.

There are some workarounds explained in the comments, there is a patch ready for review that can be applied with some legwork. There are even alternatives to this extensions.

This is a FOSS project I've been happily using for free out of the goodwill of the maintainer(s) and by no means I expect them to service me like I'm a paying customer.

applejag · 2022-07-22T13:49:58Z

The developer of this plugin seems to be inactive :/ maybe we need a community fork?

Too soon for calling the repo dead. My guess is that they're prolly on vacation. It is the middle of summer after all.

xeruf · 2022-07-22T14:49:31Z

either way it would be good to have co-maintainers for a project as big and good as this ;)

johalun · 2022-07-22T17:40:28Z

To all that complain: ...

I don't see any complaints, rather suggestions on how to avoid disruptions in development. There's nothing wrong with having multiple maintainers for a project that many depends on in their daily life/work. It would also take stress and burden off the main developer.

src/content/presenters/ConsoleFramePresenter.ts

src/console/index.tsx

src/content/presenters/ConsoleFramePresenter.ts

Co-authored-by: Benny Powers <[email protected]>

fosskers · 2022-09-20T03:47:21Z

We might be at the stage where a fork is necessary.

codeDude64 · 2022-10-13T00:33:06Z

Hey @fosskers is there any news about What's happened with the PR merge status or about the fork that you mentioned?
It's pretty strange that the solution is there but nobody merged it

fosskers · 2022-10-13T01:22:59Z

At this point someone will have to volunteer to manage a fork of the project. I just started a new job and have many other FOSS projects, so it would be irresponsible of me to personally volunteer.

nattyg93 · 2022-10-13T01:32:58Z

I suspect part of the problem is that no single person wants to put their hand up to take on the project. As demonstrated by the comments on this PR, we clearly have an engaged community using this fantastic extension, and many hands make light work, as the expression goes.

Are there people here that would be willing to help co-manage a fork?

Edit: Add a thumbs up here if you'd like to join the wonderful team of volunteers. 🙌

codeDude64 · 2022-10-13T07:11:59Z

@nattyg93 I've been a developer for a lot of time but I've never participated in an open-source project, I think that It's a good opportunity for me. I'm in

nattyg93 · 2022-10-13T22:16:10Z

@LordPax I'll take that thumbs up react to mean you're volunteering?

I'm in much the same position as @codeDude64 - I've never participated in an open-source project (other than contributing an occasional PR). It would be fantastic to have a volunteer with some experience working on a team to manage an open-source project. Any takers?

victorz · 2022-10-13T22:24:49Z

Professional front-end developer for over 5 years now, love open source, I could help with some code review or something if you need me? Sign me up.

LordPax · 2022-10-13T22:28:25Z

@nattyg93 yes i'm volunteer, but my only experience is some PR on little repositories

nattyg93 · 2022-10-13T23:05:58Z

@codeDude64 @LordPax @victorz I've created the organisation vim-vix-remix, forked the project there and invited you all. I've got to get to my day job, so I won't be able to do much more before Sunday.

@jessarcher Would you mind bringing this PR across to vim-vix-remix/vim-vix-remix?

Also, I'm new to all of this, so my apologies if I get any of this wrong - please let me know if there is a better/proper way of doing something. 🙂

jman-schief · 2022-10-14T08:20:36Z

@nattyg93 (and all volunteers): I appreciate your intent to move this project forward with this patch, I am unclear on the goal of the fork.

Do you want to:

a) just package a fork of VIM Vixen with this patch included? As suggested earlier in this comment (and following), a way out would be to repackage the fork from the contributor repo and distribute an unsigned version, which requires some fiddling in Firefox (but I believe it is doable?).

or:

b) publish a fork of VIM Vixen with this patch for everyone on addon.mozilla.org? That procedure needs the following:

a verified Mozilla AMO account (which a trusted party should open and be responsible for)
building and signing the new addon for publishing under a new name (that will be a completely new addon in the store - please be aware that this might create confusion in users)
satisfy the reviewing process (usually not cumbersome) and have the addon finally published

This is not to discourage anyone, just raising awareness about the work and committment that each option requires.

nattyg93 · 2022-10-15T00:40:28Z

@jman-schief Thanks for bringing attention to the commitment and effort required for option b - which is what we are looking to do.

I'm not fully across everything that goes into getting an addon into the Firefox store, but had assumed it would be somewhat along the lines of the procedure you have outlined. It sounds like you have some experience in this area and it would be fantastic and highly appreciated if you'd be willing and able to offer some assistance. 🙂

codeDude64 · 2022-10-15T15:17:50Z

I think we need some platform to communicate us, because I don't know What next? 😂

jman-schief · 2022-10-16T16:37:52Z

@nattyg93 yeah you got me, I have experience with publishing on AMO :) I have quite a lot on my plate but I'll try to help if needed.

Agree on moving further discussion away from this PR (to avoid unnecessary noise). One idea could be using the same Matrix channel that Vim Vixen is using (see the README) as long this is not intended as a takeover of the channel project, but rather as a will to keep all communication channels open with the original project maintainer. Or maybe another new Matrix channel. My personal wish would be to avoid proprietary platforms (slack, discord, etc.)

victorz · 2022-10-22T19:25:03Z

@nattyg93, apologies, Nat, I managed to miss the invite and it expired. Would you mind inviting me again? Thanks, and sorry about that!

kotval · 2022-12-07T09:44:38Z

@nattyg93 What matrix channel are you guys continuing on? I can't seem to find anything. Other than the new repo which hasn't had this changed merged in yet? I am willing to help.

fpf3 · 2022-12-31T19:34:23Z

For the lazy, I have packaged jess arch's branch into an unlisted firefox extension:

https://addons.mozilla.org/firefox/downloads/file/4050499/c8d6b82b1f8a4ef981e4-0.0.1.xpi

Hopefully this plays well with account sync, etc. If you don't trust my build, you can do the same just by following Jess' build instructions above, and following the steps on this page:

https://extensionworkshop.com/documentation/publish/submitting-an-add-on/

Make sure to choose "On your own" when it asks you how you want to distribute it. That way it will get approved in minutes, and it won't be listed publicly.

Hope this helps.

weilbith · 2023-01-02T15:29:55Z

For the lazy, I have packaged jess arch's branch into an unlisted firefox extension:

https://addons.mozilla.org/firefox/downloads/file/4050499/c8d6b82b1f8a4ef981e4-0.0.1.xpi

@fpf3
According to curl an my Firefox network tools, this returns a 404 status code. What is wrong?

fpf3 · 2023-01-03T14:58:03Z

@weilbith Not sure... I can't get at it either. I will try to figure out what's going on later tonight.

fpf3 · 2023-01-03T15:28:14Z

fpf3_vim_vixen_dark_0.0.1.zip

Here, I just uploaded it straight to Github. Definitely doesn't play nice with sync, but better than nothing.

weilbith · 2023-01-03T16:09:51Z

Fu** that is so awesome to have it working properly again. 😍
Thank you very much @fpf3

johalun · 2023-01-03T16:20:35Z

Thank you!!

fpf3 · 2023-01-03T16:32:21Z

Fu** that is so awesome to have it working properly again. 😍 Thank you very much @fpf3

You're welcome, but thank @jessarcher ! It's her PR.

Anyway, I hope @ueokande is alive and this will be merged someday. This extension is a huge productivity saver for me, so if it ceases to be maintained I'm gonna be upset :)

jiriks74 · 2023-01-04T00:32:19Z

fpf3_vim_vixen_dark_0.0.1.zip

Here, I just uploaded it straight to Github. Definitely doesn't play nice with sync, but better than nothing.

Thanks so, so much for this!
I used Tridactyl for some time. While it has some interesting functionality, I hated the keybinds. Mainly the search. Doing CTRL+G to next search and the fact that I'm used to enter after I type the search string was annoying as hell (btw, if it found link and you pressed enter it opened it). I love that I can have it working again! Nice work!

Hopefully someone skilled and driven enough will be able to take this on, as this is, like others said already, the best vim keybinds addon out there. I'd love to help/take it on, but I'm still a dumb beginner in programming so, I'd probably mess it up to an unworkable state LOL. Maybe some time in the future!

Again, thanks for the PR @jessarcher!

codeDude64 · 2023-01-06T00:30:38Z

fpf3_vim_vixen_dark_0.0.1.zip

Here, I just uploaded it straight to Github. Definitely doesn't play nice with sync, but better than nothing.

I don't get it. What Do I need to do with the zip file?
When I follow the instructions of https://extensionworkshop.com/documentation/publish/submitting-an-add-on/
The platform trows an error about the manifest.json

Copied PR ueokande#1437

fpf3 · 2023-01-08T04:58:12Z

@codeDude64 Unzip the file and open the xpi in firefox. It will install automatically.

nattyg93 · 2023-01-30T01:52:56Z

@kotval (and everyone else) - sorry for the late replay, I have started a discussion over on the fork. Please, feel free to start adding to the conversation there. 🙂

jessarcher added 3 commits July 6, 2022 14:48

Prevent Firefox from creating an opaque iframe

42edc89

Prevent console from initally flashing white before content is loaded

226b3b7

Shrink console on blur

5fe8324

jessarcher mentioned this pull request Jul 6, 2022

White Vim Vixen Console frame always visible at bottom of GitHub pages #1424

Open

Always set colorScheme to a string

f2b60e5

sigseg5 mentioned this pull request Jul 6, 2022

Move white iframe deeper with z-index at Firefox 102+ #1436

Closed

jessarcher commented Jul 6, 2022

View reviewed changes

benwaffle mentioned this pull request Jul 12, 2022

Fix white box on sites using dark mode #1434

Closed

toastal reviewed Jul 24, 2022

View reviewed changes

src/content/presenters/ConsoleFramePresenter.ts Outdated Show resolved Hide resolved

Use better API for accessing body

f52ec6f

bennypowers reviewed Jul 31, 2022

View reviewed changes

src/console/index.tsx Outdated Show resolved Hide resolved

bennypowers reviewed Jul 31, 2022

View reviewed changes

src/content/presenters/ConsoleFramePresenter.ts Outdated Show resolved Hide resolved

Improve handling of unknown type property

ad05b6b

Co-authored-by: Benny Powers <[email protected]>

jessarcher force-pushed the fix-console-bg branch from 60f0917 to ad05b6b Compare August 1, 2022 00:05

devoredevelops approved these changes Aug 12, 2022

View reviewed changes

SVNKoch mentioned this pull request Oct 22, 2022

White rectangle at the bottom of the screen #1466

Open

2 tasks

jiriks74 mentioned this pull request Jan 6, 2023

Copied PR ueokande/vim-vixen#1437 vim-vix-remix/vim-vix-remix#2

Merged

LordPax added a commit to vim-vix-remix/vim-vix-remix that referenced this pull request Jan 6, 2023

Merge pull request #2 from jessarcher/fix-console-bg

de853bb

Copied PR ueokande#1437

kotval mentioned this pull request Apr 27, 2023

Ensure there are at least two maintainers of package ueokande/vimmatic#138

Open

		/* @ts-ignore */
		window.document.documentElement.style.colorScheme = colorScheme

Fix opaque console iframe overlaying some websites #1437

Are you sure you want to change the base?

Fix opaque console iframe overlaying some websites #1437

Conversation

jessarcher commented Jul 6, 2022 • edited Loading

jessarcher Jul 6, 2022

Choose a reason for hiding this comment

jessarcher commented Jul 6, 2022 • edited Loading

ditsuke commented Jul 8, 2022

danjones1618 commented Jul 8, 2022

jsoo1 commented Jul 11, 2022

cdbrkfxrpt commented Jul 15, 2022

LordPax commented Jul 18, 2022

johalun commented Jul 21, 2022

LordPax commented Jul 21, 2022

danjones1618 commented Jul 21, 2022

johalun commented Jul 21, 2022

xeruf commented Jul 22, 2022

jman-schief commented Jul 22, 2022

applejag commented Jul 22, 2022

xeruf commented Jul 22, 2022 • edited Loading

johalun commented Jul 22, 2022 • edited Loading

fosskers commented Sep 20, 2022 • edited Loading

codeDude64 commented Oct 13, 2022

fosskers commented Oct 13, 2022 • edited Loading

nattyg93 commented Oct 13, 2022 • edited Loading

codeDude64 commented Oct 13, 2022

nattyg93 commented Oct 13, 2022

victorz commented Oct 13, 2022

LordPax commented Oct 13, 2022

nattyg93 commented Oct 13, 2022 • edited Loading

jman-schief commented Oct 14, 2022 • edited Loading

nattyg93 commented Oct 15, 2022

codeDude64 commented Oct 15, 2022

jman-schief commented Oct 16, 2022

victorz commented Oct 22, 2022

kotval commented Dec 7, 2022

fpf3 commented Dec 31, 2022

weilbith commented Jan 2, 2023 • edited Loading

fpf3 commented Jan 3, 2023

fpf3 commented Jan 3, 2023

weilbith commented Jan 3, 2023

johalun commented Jan 3, 2023

fpf3 commented Jan 3, 2023

jiriks74 commented Jan 4, 2023

codeDude64 commented Jan 6, 2023

fpf3 commented Jan 8, 2023

nattyg93 commented Jan 30, 2023 • edited Loading

jessarcher commented Jul 6, 2022 •

edited

Loading

jessarcher commented Jul 6, 2022 •

edited

Loading

xeruf commented Jul 22, 2022 •

edited

Loading

johalun commented Jul 22, 2022 •

edited

Loading

fosskers commented Sep 20, 2022 •

edited

Loading

fosskers commented Oct 13, 2022 •

edited

Loading

nattyg93 commented Oct 13, 2022 •

edited

Loading

nattyg93 commented Oct 13, 2022 •

edited

Loading

jman-schief commented Oct 14, 2022 •

edited

Loading

weilbith commented Jan 2, 2023 •

edited

Loading

nattyg93 commented Jan 30, 2023 •

edited

Loading