Multiple features broken on FF 70

[ItsKipz]

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.

[davidchoo12]

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

[seascape]

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

[NomDeMorte]

Fix for the security dropdown is here: https://github.com/overdodactyl/ShadowFox/issues/279#issuecomment-519782105

[Doorstop2]

Yup got the same

[chinook77]

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

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

[SavageCore]

+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 (9ce619818857fa5b596761a4ef8cd3d38e7ded17)

[davidchoo12]

+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]

+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]

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.

[davidchoo12]

#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]

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]

#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]

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 😄

[w3bb]

I've also noticed the scrollbar is back to the default, and the screen goes white before a page loads. I'm running Gentoo 64-bit and I've uninstalled, and reinstalled to no avail.

[NomDeMorte]

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]

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]

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]

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]

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]

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

[krystian3w]

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]

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

[krystian3w]

4 months? maybe collaborators die in accident on party?

[overdodactyl]

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]

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.

[sharethewisdom]

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).

https://github.com/overdodactyl/ShadowFox/pull/304

[tsunami2311]

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

[lukewlms]

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

1. Firefox -> Help -> Troubleshooting Information -> Profile Folder (Show in Finder)
2. 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]

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]

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