Mobile-Friendly Firefox Customizations for Librem 5

[Emma]

@FranklyFlawless

If you are interested, I have a VPS on OVHcloud I can use for hosting a Forgejo instance, among other public services.
…
The condition is that it is gratis until June 4th, 2025, as that is when the VPS contract ends.

Sorry, but I am not interested. This forum is a simple place to post my code for others, and I don’t want to complicate things with repos and hosting fees. I made this code for myself and decided to share it here for other Librem 5 users. Everyone is free to share or host this code wherever they want.

I agree with some others that have said this code should be merged into the firefox-esr-mobile-config used by PureOS. @nicole.faerber, I know there is a lot of code (and lots of comments), but it would be nice to know that someone from Purism is at least considering reviewing it so it can be merged into (or outright replace) firefox-esr-mobile-config for Librem 5.

@FranklyFlawless

Also, this thread is very slow to load using Firefox ESR on the Librem 5, probably due to all the code.

It’s actually due to javascript. If you disable javascript in your browser, this thread loads very quickly, just like all the other posts on this and other forums (and most other sites). The only reason you need to enable javascript on this site is to login, but you don’t need to login to view any of my posts as they are all publicly accessible.

@tomoqv

I have downloaded and copied fenix-one.css and userContent.css to my FF account folder.

There are two important things to note:

1. These CSS files must be placed into a folder called chrome. This chrome folder must be placed inside your Firefox profile folder.

2. You must have a file named userContent.css and a file named userChrome.css in the chrome folder.

There are two ways that you can use the fenix_one.css file:

1. Rename the fenix_one.css file to userChrome.css in order to have a single file for all userChrome code.

2. Create a userChrome.css file that imports the fenix_one.css file:

userChrome.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Source file available here:
   https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/

@import "fenix_one.css";

So you either placed these files directly into your Firefox profile folder instead of a chrome folder within your Firefox profile folder, or you didn’t create a userChrome.css file, or you misspelled one or more files (in your comment, you used fenix-one.css instead of fenix_one.css) Either way, PureOS is configured to automatically create a userChrome.css file in your Firefox profile’s chrome folder if one does not exist, but it uses the very basic firefox-esr-mobile-config file, which doesn’t yet contain my code.

So to answer your questions:

@tomoqv

1. Addon-menu flickers and is not usable on mobile

Naming the files correctly and placing them into the correct folders will solve this.

@tomoqv

2. The addon I use the most, “Mobile View Switcher”, which I have placed left most of all my addons is not visible on mobile, just the button in 1)

I originally designed the true_mobile_mode and fenix files assuming that there are no pinned extensions/addons. Your comment has reminded me that this is possible now that extension popups use a dedicated popup instead of relying on the Widget Overflow Menu popup. I have fixed this and will add it soon have updated all true_mobile and fenix files to include it. Check the October 2023 Halloween Update (post 55) for updates.

Note that I have just now updated all true_mobile and fenix files again to properly allow space for the Tab Manager Menu button and pinned toolbar items. The previous method was not good enough. This new one works much better.

This allows for pinned toolbar items (like extensions/addons), while preventing the overlapping issue noted by @tomoqv (thanks for pointing this out so that I could fix it).

@tomoqv

3. Text on forums.puri.sm (maybe other sites too, but none that I know of) is white on white background, i.e. unreadable

I’m not seeing this issue on my end, and you’re not using my code yet (as explained earlier), so I don’t know what is causing this for you.

@tomoqv

I also have the url bar at the top of the screen and not at the bottom, that was however the same before I upgraded FF and installed the Mobile-Friendly customizations.

This is because you are not yet using my Mobile-Friendly customization, as explained earlier.

@tomoqv

One more thing. I have some difficulty finding the most recent css files. So far I have copied them from this thread.

Since I am not hosting this code on any repo or similar, this thread is where all of my code is located. As I explained to the other user, if you disable javascript, this thread loads quickly and is much easier to navigate. Each post is numbered, making it easier to find specific posts.

My most recent update post begins with the October 2023 Halloween Update (post 55), and the final post from that multi-post update is Styles & Screenshots (post 61). All of my most recent code is in the posts from that update (posts 55-61), and there is no need to use code from earlier posts.