Multiple features broken on FF 70

Question

Multiple features broken on FF 70

ItsKipz opened this issue 5 years ago · comments

A number of browser sections are not styled correctly after updating to FF 70, uninstalling and reinstalling Shadowfox, and updating to the latest version with the updater -

Search suggestions drop-down menu has broken styling around the "this time, search with" box
Site information dropdown has broken backgrounds (appears to be a random icon tiled across the box, makes text unreadable)
New tab page "recommended by pocket" stream has incorrect coloring

This is all on macOS Catalina 10.15, using Firefox 70.0 and the latest Shadowfox updater. If attaching screenshots would help I can do that but all the issues are pretty noticeable assuming they're not just on my end.

David Choo · Answer 1 · Tue Oct 22 2019 23:24:14 GMT+0800 (China Standard Time)

+1 for second point, the icons are repeated all over the dropdown

A.Jane · Answer 2 · Wed Oct 23 2019 06:59:01 GMT+0800 (China Standard Time)

Yes, I see the same on the security dropdown. That's the only thing I've noticed so far under Windows.

NomDeMorte · Answer 3 · Wed Oct 23 2019 12:21:59 GMT+0800 (China Standard Time)

Fix for the security dropdown is here: #279 (comment)

Doorstop2 · Answer 4 · Fri Oct 25 2019 22:26:11 GMT+0800 (China Standard Time)

Yup got the same

chinook77 · Answer 5 · Fri Oct 25 2019 23:17:12 GMT+0800 (China Standard Time)

Fix for the security dropdown is here: #279 (comment)

For those of us that we are not programmers, how exactly should we fix it?

Oliver Sayers · Answer 6 · Sat Oct 26 2019 03:23:17 GMT+0800 (China Standard Time)

+1 for second point, the icons are repeated all over the dropdown

Seems to be Mac only? Not happening in Windows 10. Both FF 70.0 and running latest shadowfox (9ce6198)

David Choo · Answer 7 · Sat Oct 26 2019 03:31:26 GMT+0800 (China Standard Time)

+1 for second point, the icons are repeated all over the dropdown

Seems to be Mac only? Not happening in Windows 10. Both FF 70.0 and running latest shadowfox (9ce6198)

The screenshot was taken on Firefox 70.0 on Windows 10

kuonyuu · Answer 8 · Sat Oct 26 2019 13:52:59 GMT+0800 (China Standard Time)

+1 for second point, the icons are repeated all over the dropdown

Seems to be Mac only? Not happening in Windows 10. Both FF 70.0 and running latest shadowfox (9ce6198)

The screenshot was taken on Firefox 70.0 on Windows 10

Same problem on fx70 with win 7

NomDeMorte · Answer 9 · Sat Oct 26 2019 14:24:47 GMT+0800 (China Standard Time)

Fix for the security dropdown is here: #279 (comment)

For those of us that we are not programmers, how exactly should we fix it?

Step by step:

Highlight this text, then copy it (CTRL+C); you'll need it in a moment: identity-popup-permissions-content

Press CTRL+SHIFT+ALT+I to open the Browser toolbox (alternatively, click the 'hamburger' menu then go to Web Developer... Browser Toolbox)

Change to the 'Style Editor' Tab

In the left pane, scroll down until you see 'userChrome.css' and click on it. You are now editing the userChrome.css file that is ShadowFox.

Press CTRL+F to find text in that file, now press CTRL+V to paste the text you copied above, now press enter to find it. You are now at the part of the code which I linked above. It will look like so:

`

#identity-popup-permissions-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm.................
}

.identity-popup-security-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm..................
}

`
(Note that I have cropped the ends of those very long lines.)

Now, add the two lines of code in my workaround, to each entry, so that it looks like so:

`

#identity-popup-permissions-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm.................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}

.identity-popup-security-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm..................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}

`

You can copy/paste the two additional lines from here. The first line stops the image from being repeated. The second line positions the image appropriately.

Hope that helps.

David Choo · Answer 10 · Sat Oct 26 2019 15:53:27 GMT+0800 (China Standard Time)

#identity-popup-permissions-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm.................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}

.identity-popup-security-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm..................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}

Adding the background-repeat and background-position properties fixes the repeats

Although, since firefox has their own icons, I think it looks better without the extra icons. Here is how it looks with the 2 css selectors #identity-popup-permissions-content and .identity-popup-security-content removed

chinook77 · Answer 11 · Sun Oct 27 2019 07:01:08 GMT+0800 (China Standard Time)

Fix for the security dropdown is here: #279 (comment)

For those of us that we are not programmers, how exactly should we fix it?

Step by step:

Highlight this text, then copy it (CTRL+C); you'll need it in a moment: identity-popup-permissions-content

Press CTRL+SHIFT+ALT+I to open the Browser toolbox (alternatively, click the 'hamburger' menu then go to Web Developer... Browser Toolbox)

Change to the 'Style Editor' Tab

In the left pane, scroll down until you see 'userChrome.css' and click on it. You are now editing the userChrome.css file that is ShadowFox.

Press CTRL+F to find text in that file, now press CTRL+V to paste the text you copied above, now press enter to find it. You are now at the part of the code which I linked above. It will look like so:

`

#identity-popup-permissions-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm.................
}

.identity-popup-security-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm..................
}

`
(Note that I have cropped the ends of those very long lines.)

Now, add the two lines of code in my workaround, to each entry, so that it looks like so:

`

#identity-popup-permissions-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm.................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}

.identity-popup-security-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm..................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}

`

You can copy/paste the two additional lines from here. The first line stops the image from being repeated. The second line positions the image appropriately.

Hope that helps.

Thanks for your support.

chinook77 · Answer 12 · Sun Oct 27 2019 07:02:39 GMT+0800 (China Standard Time)

#identity-popup-permissions-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm.................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}

.identity-popup-security-content {
background-image: url(data:image/svg+xml;base64,PD94bWwgdm..................
background-repeat: no-repeat !important;
background-position: 2px 12px !important;
}
Adding the background-repeat and background-position properties fixes the repeats

Although, since firefox has their own icons, I think it looks better without the extra icons. Here is how it looks with the 2 css selectors #identity-popup-permissions-content and .identity-popup-security-content removed

This do the trick, simpler. Nice 👍

Doorstop2 · Answer 13 · Mon Nov 04 2019 23:59:01 GMT+0800 (China Standard Time)

Ok when i try CTRL+SHIFT+ALT+I it does nothing for firefox-70.0.1 when i open the style editor tools > Web developer > Style editor and scroll on the left it only seems to show stuff related to the website only i see no userchrome.css I'm just going to do it from the Firefox profile and edit userchrome.css there

It was in the smaller size userchrome.css there were two files small one was 95KB seems to have worked 😄

NomDeMorte · Answer 14 · Sun Nov 10 2019 02:59:42 GMT+0800 (China Standard Time)

when i open the style editor tools > Web developer > Style editor and scroll on the left it only seems to show stuff related to the website only i see no userchrome.css I'm just going to do it from the Firefox profile and edit userchrome.css there

That's correct. You'd need to do `tools... web developer... browser toolbox', and then go to the style editor, to see the userchrome. I'm unsure why the CTRL+ALT+SHIFT+I shortcut isn't working. I'm on latest nightly so perhaps it was broken and fixed, but perhaps it's specific to your installation, sorry I can't be sure.

ProfessorStrawberry · Answer 15 · Mon Nov 11 2019 01:17:41 GMT+0800 (China Standard Time)

Ok when i try CTRL+SHIFT+ALT+I it does nothing for firefox-70.0.1 when i open the style editor tools > Web developer > Style editor

go to the burger menu > web developer > toggle tools and check the three dots "..." on the right; click settings and check (enable)
Enable browser chrome and add-on debugging toolbox
Enable remote debugging

now you can click ctrl+alt+shift+i

ProfessorStrawberry · Answer 16 · Mon Nov 11 2019 01:18:46 GMT+0800 (China Standard Time)

when i open the style editor tools > Web developer > Style editor and scroll on the left it only seems to show stuff related to the website only i see no userchrome.css I'm just going to do it from the Firefox profile and edit userchrome.css there

That's correct. You'd need to do `tools... web developer... browser toolbox', and then go to the style editor, to see the userchrome. I'm unsure why the CTRL+ALT+SHIFT+I shortcut isn't working. I'm on latest nightly so perhaps it was broken and fixed, but perhaps it's specific to your installation, sorry I can't be sure.

check my previous answer, was struggling first aswell

NomDeMorte · Answer 17 · Mon Nov 11 2019 05:24:33 GMT+0800 (China Standard Time)

when i open the style editor tools > Web developer > Style editor and scroll on the left it only seems to show stuff related to the website only i see no userchrome.css I'm just going to do it from the Firefox profile and edit userchrome.css there

That's correct. You'd need to do `tools... web developer... browser toolbox', and then go to the style editor, to see the userchrome. I'm unsure why the CTRL+ALT+SHIFT+I shortcut isn't working. I'm on latest nightly so perhaps it was broken and fixed, but perhaps it's specific to your installation, sorry I can't be sure.

check my previous answer, was struggling first aswell

For him, he has those options set already, because he can get at the window - just the keyboard shortcut didn't work.

ProfessorStrawberry · Answer 18 · Tue Nov 12 2019 01:55:45 GMT+0800 (China Standard Time)

For him, he has those options set already, because he can get at the window - just the keyboard shortcut didn't work.

oh i must have misread that

agamemnonjones · Answer 19 · Thu Nov 28 2019 05:21:58 GMT+0800 (China Standard Time)

Any plans to incorporate the manual fix into an updated release?

Κρυςτιαν3ϐ · Answer 20 · Tue Dec 03 2019 03:14:20 GMT+0800 (China Standard Time)

Maybe nope?

Fixes also possible put on end in userChrome.css.

#identity-popup-permissions-content, .identity-popup-security-content {
  background-repeat: no-repeat !important;
  background-position: 2px 12px !important;
}

Laxaria · Answer 21 · Sat Jan 04 2020 07:29:03 GMT+0800 (China Standard Time)

For whatever it's worth, I pointed out these display issues with the "Site Information" panel in a bug report filed in Sept 2019 (#284) and there is an open PR for a fix (#294) pending approval.

Κρυςτιαν3ϐ · Answer 22 · Sat Jan 04 2020 07:41:54 GMT+0800 (China Standard Time)

4 months? maybe collaborators die in accident on party?

Pat Johnson · Answer 23 · Sat Jan 04 2020 08:52:27 GMT+0800 (China Standard Time)

Not dead, just haven't had much time to devote to the project lately.

Looks like PR #294 might contain code to correct the issue, but it's been implemented in the wrong place. userChrome.css is autogenerated from the files in the css directory and shouldn't be edited manually (any changes will just get lost in the next update).

Hopefully will have some time in the next week or so to clean things up and give the project some much needed attention.

tsunami2311 · Answer 24 · Tue Feb 18 2020 11:22:32 GMT+0800 (China Standard Time)

I didnt know that the site information corruption was due to ShadowFox till I randomly check git for updates. that was driving me crazy, was hoping there was shadowfox update with fixed already instead of having to manual do the changes.

Bart De Roy · Answer 25 · Tue Feb 18 2020 22:37:04 GMT+0800 (China Standard Time)

userChrome.css is autogenerated from the files in the css directory and shouldn't be edited manually (any changes will just get lost in the next update).

#304

tsunami2311 · Answer 26 · Wed Feb 19 2020 01:22:42 GMT+0800 (China Standard Time)

I only edit cause the fix was mergered so when update hits it wont mater cause it fixed

Luke Williams · Answer 27 · Sat Feb 22 2020 00:58:17 GMT+0800 (China Standard Time)

I couldn't find anything called Browser Toolbox on Mac Firefox. Here are alternate instructions for pulling up userChrome.css:

Firefox -> Help -> Troubleshooting Information -> Profile Folder (Show in Finder)
Open profile folder -> chrome -> userChrome.css

This is probably a major issue for a lot of users, I was only able to find this thread through a reverse Google image search. Hope this can be fixed quickly.

3371-Alpha · Answer 28 · Mon Mar 02 2020 14:22:02 GMT+0800 (China Standard Time)

I found another part of the UI that has minor a minor cosmetic issue: the search engine list.

It's not suppose to be surrounded by a lighter grey is it?

travankor · Answer 29 · Sat May 02 2020 20:19:52 GMT+0800 (China Standard Time)

would be nice if @overdodactyl adds new maintainer(s) to this project.

Κρυςτιαν3ϐ · Answer 30 · Sat May 02 2020 22:13:00 GMT+0800 (China Standard Time)

If survive cytokine storm, cytokine cascade, cytokine release syndrome.

Pat Johnson · Answer 31 · Tue May 05 2020 07:41:46 GMT+0800 (China Standard Time)

would be nice if @overdodactyl adds new maintainer(s) to this project.

@travankor - if someone wants to take on this role, I'd be happy to help "onboard" them to the project, accept some PRs and eventually add as a maintainer.

Bart De Roy · Answer 32 · Fri Aug 28 2020 22:00:55 GMT+0800 (China Standard Time)

would be nice if @overdodactyl adds new maintainer(s) to this project.

@travankor - if someone wants to take on this role, I'd be happy to help "onboard" them to the project, accept some PRs and eventually add as a maintainer.

Hi @overdodactyl , I hope you're alright. We've been waiting for the acceptance of my PR (#304) for more than six months now and it was suggested to me to reach out. I don't really fancy maintaining this, but I'd accept a few PRs myself if i could.