Help Wanted: Styling uBO and uMatrix elements on Windows

[overdodactyl]

This is being carried over from problems brought up in #6 and #42.

It appears certain elements in both uBlock Origin and uMatrix are not getting styled on Windows the same way they are on a Mac:

Mac	Windows
Mac	Windows

I've ruled out this being a difference in FF version, and I can only assume it is due to the OS.

Without current access to a Windows computer, there unfortunately isn't a whole lot I can do to fix this myself. If anyone could help figure out what's going on here, I would greatly appreciate the help! :)

[Asteaguinity]

As far as I can tell, you won't be able to fix this problem on your side for the following reasons:

1. Opening the relevant moz-extension url of the popup page in a tab shows a fully styled page, so your styling itself is obviously perfectly fine.
2. The bigger problem is that setting the preference extensions.webextensions.remote to false fixes the styling problem for me.

Somehow, styling seems to be a tad broken in webextension popups when this preference is set, which is why I assume a fix on Mozilla's side is necessary. For reference, have these two images showing both working cases.

Perfectly styled popup loaded in a tab:

Perfectly styled popup with extensions.webextensions.remote=false:

According to Bug 1385403 OOP webextensions are disabled on Mac for the moment, which would explain why you wouldn't have been able to see the problem , assuming Macs would even have the same problem.

I guess the best way to continue in this matter would be to open a bug report on bugzilla and see what the devs have to tell us regarding this issue.

[overdodactyl]

Hi @Asteaguinity, thank you so much for this, I really appreciate the help - I'm not sure I would have thought to look into extensions.webextensions.remote.

It is disabled by default on a Mac, and apparently for a good reason: enabling it rendered most extension popups completely useless and caused FF to crash multiple times. Notably, however, uBO's popup wasn't effected and contained all the proper styling.

I'll file a bug report ASAP...are you ok with me using the screenshots you provided in it?

Thanks again!

[Asteaguinity]

Feel free to use them. Let's hope this get's fixed asap. Firefox is so much easier on the eyes using your theme.

[overdodactyl]

FYI: https://bugzilla.mozilla.org/show_bug.cgi?id=1431962

[overdodactyl]

Bug was labeled as WONTFIX because, "userContent.css is not officially supported." Disappointing to say the least.

Since the FF devs won't look into this, I guess our best bet would be to determine if this is truly isolated as a userContent.css problem, or if it extends beyond that.

I think the following would be the easiest way to test this:

• Create a new profile

• Install uBlock Origin

• Go to your profile directory > extensions

• Change the name of [email protected] to [email protected]

• Open [email protected]

• Open the folder css

• Open popup.css

• Edit #extratools

On a mac, starting at line 170 is the following:

#extraTools {
    background-color: #eee;
    border: 0;
    color: #aaa;
    margin: 0.8em 0 0 0;
    padding: 4px 0;
    text-align: center;
    }

change the background-color to something else...maybe red.

• Save the file

• Add the modified uBO as a temporary addon (about:debugging#addons > select "Load Temporary Add-on" > navigate to the uncompressed [email protected] folder where you made the changes > select manifest.json > open)

• See if the bottom bar is red

@Asteaguinity, would you possibly mind giving this a try and letting me know the results?

[Asteaguinity]

As one can see in the image above, setting the background color via extension internal css works as expected.
I really do wonder though why userContent.css doesn't completely apply its css in a remote extension popup, as there's no really obvious reason for it from an outsider's perspective...

[overdodactyl]

Bummer. I was kind of hoping that wouldn't result in the proper styling, as that probably would have forced the FF devs to re-open the bug.

I'm kind of at a loss for why userContent.css isn't styling a select few items either. Oddly the only 2 issues that have been reported to me are extensions written by gorhill, so perhaps it's worth looking more into the makeup of those extensions/specific elements. But there's certainly no obvious reason that sticks out in popup.css.

[Asteaguinity]

Fortunate update: It seems the bug causing this has been fixed through work on other bugs.
Since the Nightly build of 2018-02-02 the popups are completely styled, even with remote webextensions enabled.
This being fixed was the result of one of the patches in this pushlog, but I didn't bother looking further into it because, hey, as long as the styling works it doesn't really matter anyway.

[overdodactyl]

Thanks for the update!

That's actually really good to hear, I didn't have high hopes of that getting fixed.

I'll update the known issues section of the wiki accordingly