Mobile-Friendly Firefox Customizations for Librem 5

Can you, or someone else who is using the default user agent string, please post the string? I changed mine to some Samsung Android string so that web sites would format their output to view better on L5FF. Of course, thanks to @Emma, that is no longer necessary. Unfortunately, now when I try to add an extension, the FF store thinks I am using Android and won’t serve me the Linux extension! Shamefully, I didn’t document my changes, so I need your help to roll back. :face_with_open_eyes_and_hand_over_mouth:

Thanks in advance.

3 Likes
Mozilla/5.0 (X11; Linux aarch64; rv:109.0) Gecko/20100101 Firefox/115.0
4 Likes

You, Sir, have saved the day! I found the two instances where I had changed the user agent string and saved the string you provided… and BitWarden is installed!

This is now right, proper Firefox – much better than stupid Spydroid Firefox. I can breathe now.

4 Likes

That is awesome and your instructions worked flawlessly. Thank you for putting the automated scripts together, great selections!

4 Likes

@Photon, I recommend unsetting your user-agent, rather than explicitely setting it to the user-agent listed by @FranklyFlawless

If you use the Firefox setting privacy.resistFingerprinting, Firefox will automatically set your user-agent OS to Windows.

For anyone wanting to change your user-agent, instead of using about:config or a user.js file, I recommend using an extension like CanvasBlocker by kkapsner. I also recommend reading 4.1-Extensions from the arkenfox user.js wiki.

Current Tor Browser user-agent for desktop:

Mozilla/5.0 (Windows NT 10.0; rv:109.0) Gecko/20100101 Firefox/115.0

Current Tor Browser user-agent for android:

Mozilla/5.0 (Android 10; Mobile; rv:115.0) Gecko/115.0 Firefox/115.0
2 Likes

Major Update:

  • Added to install and uninstall scripts

    • Support for Librewolf, Mullvad, and Tor browsers

I have not tested Mobile-Friendly-Firefox with these browsers yet, as I am waiting for official arm64 releases before installing them onto my Librem 5. While I think that everything should work, anyone can share issues on the fediverse, on my Mobile-Friendly-Firefox repo, or here on this thread. I’ll try to check all three from time to time so I don’t miss anything.


Minor Update:

  • Added to install and uninstall scripts

    • Support for Librewolf flatpak

I have tested and confirmed that it works perfectly.


To install Librewolf flatpak from Flathub, first download and install the Flathub repository file. Then launch the PureOS Store and enable “Show Incompatible Applications” in the preferences. Now you can install Librewolf in the PureOS Store. Afterwards, you can disable “Show Incompatible Applications” if you want.

Alternatively, you should be able to install Librewolf flatpak using this command:

flatpak install flathub io.gitlab.librewolf-community
3 Likes

You are incredibly prolific… ever thought about Thunderbird?

2 Likes

Since I hate using email, I hadn’t even considered Thunderbird. I would think that some of my code (colors) might be compatible with Thunderbird, but it would likely take lots of time and effort to find all of the elements necessary for full compatibility. I’m not interested in doing that at the moment. Maybe I’ll reconsider eventually.

2 Likes

I hope you do eventually reconsider, but no pressure – I respect your choices and appreciate what you do.

3 Likes

It seems to me that this is an opportunity for Thunderbird users to create and join an organization on codeberg or elewhere with a repository of Thunderbird scripts analogous to the Firefox scripts. Since the applications come from the same place there must be a lot of 1 to 1 mappings.

That way the load could be spread around and no one would have a large burden.

I use mutt myself and have no interest in Thunderbird.

1 Like

The problem is convincing users to migrate platforms. Unfortunately, brand/backing takes precedence over morals.

Now might not be the best time: Enough is enough with Thunderbird

I would guess that commonality between FF and TB will decrease, and also that TB UI customisations could break as the TB changes roll out.

With luck, the end result will be that Thunderbird is mobile-friendly.

1 Like

I have been using these customizations for a while now and I especially like the install script, which makes it easy to install.

I have one request, though, and one bug to report.
Request: I would like the back arrow to be visible instead of the reload button in the toolbar, is there a way to accomplish this?
Bug: I tried to install split toolbars, with the upper one showing tabs. Pinned tabs work fine and are good for quick access to my most used tabs, but any non-pinned tab will continously flicker. Is this a known issue? If not, would you like me to provide more info?

Thanks

3 Likes

Thank you for bringing this to my attention. Long story short, it should now be fixed.

I used to maintain multiple versions of my mobile styles to support different numbers of pinned tabs. I was eventually able to add dynamic support for a single pinned tab, and I dropped support for the separate variations thinking that no one used them.

After seeing your comment, I re-examined the code and found a much better solution that properly sets the active tab width to dynamically fill the available space when there are any number of pinned tabs. It now supports as many pinned tabs as will fit on the screen.

Short answer: This is coming soon as another option to select in the install.sh script. Also, you can manually remove the reload-button by selecting it with a hold gesture (or secondary click with a pointing device) and tapping/clicking “Remove from Toolbar”.

I have been planning to add this as a user-selection prompt, but I would first like to add screenshots to the repo. The problem is that every time I have set out to take screenshots, I have noticed something that needed to be fixed in one or more css files. I think that I have finally fixed everything now and will hopefully be adding screenshots very soon. After I have added screenshots, I will work on adding the show/hide back-button option to the install.sh script.

In the mean time, if you would like to edit the style that you are currently using in your profile to un-hide the back-button, you can use CTRL+F to search the fenix file for this:

/* Remove Back button */

Then you can simply delete the second slash to make it look like this:

/* Remove Back button *

That will comment out that specific section of code without affecting anything else.

Thank you again for your comment bringing attention to the previously mentioned bug and for your interest and appreciation.

1 Like

Done. I have added a user selection prompt to the install.sh script that allows you to show or hide the back-button.

I have also uploaded lots of screenshots. I got a little carried away, and I think I may have uploaded too many. I’ll probably need to deal with that at some point. But for now, I’m happy to have finished all of the things I had originally planned for this repo.

And for now, I recommend deleting the entire images directory on your device after cloning the repo, to free up space.

3 Likes

The main one is enough.

Great work.

1 Like

Hello again, thanks for the prompt action to these items. I cloned and installed the latest version of today, but for me the non-pinned tabs still flicker though.

2 Likes

I haven’t been able to replicate this bug after the update.

  • Are you sure that you are using the newest code?
  • Did you delete the ~/Mobile-Friendly-Firefox/ directory before cloning the repo again?
  • Does the install script ask your preference to show/hide the back-button?
  • What is your customized style? Mobile style with Fenix theme and Split toolbars?

I’ve tried several different style combinations and all display scales but still cannot replicate the bug.

1 Like

Yes, cloned your repo yesterday at around 6pm CET.
Yes, deleted old ~/Mobile-Friendly-Firefox/ when git clone complained about it not being empty
Yes, I was asked to show or hide the back-button, it works
I am not using Fenix, I am using the FF default style and colors with Split toolbars

To be clear what I mean: it is the tab itself (and the text on the actual tab) that flickers.

Here is a screen capture of what I see.

Edit: To add even more clarity, it looks as if the tab is trying to adjust to the width between the right hand side edge of the screen and the pinned tabs to the left. I also now notice, that there is a number on the right hand side in the flickering tab that for some reason says 4 (it displays briefly when the tab size is made smaller and disappears again as the tab widens), while the open tabs button at the bottom says 9.

2 Likes

Could you provide a clean link to the screen capture? The link you provided shows a blank page when javascript is disabled, and I can see that the malicious gstatic domain is present on the page. Javascript is not needed to play video and audio content in Firefox.

Even without a screen capture, I think that I understand the bug. What I don’t understand is why it is affecting your device in such a way that I am unable to reproduce on my device.

Questions:

  1. How many pinned tabs does it take to trigger the bug?
  2. How many unpinned tabs does it take to trigger the bug?
  3. Does the bug occur as soon as you switch to an unpinned tab, or after some other trigger?
  4. Does the bug occur only when tapping or holding on a tab, or does it also occur when you are no longer touching the screen at all?
  5. Does the bug only occur when using Mobile style, or does it also occur when using Desktop style?

Request:

If you don’t mind, please do the following:

  1. Start Firefox and go to the About Profiles page (about:profiles)
  2. Find your default profile and tap/click the top Open Directory button to open the Root Directory of your default Firefox profile in your file manager
  3. Go into the chrome directory and open the alt-single_tab_mode-alt.css file
  4. Make sure that lines 67 through 73 are visible on the screen (if you don’t have line numbers displayed, the section starts with /* Expand unpinned active tab */ and ends just before /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */)
  5. Take a screenshot and post it here, or copy and paste the code itself.

If you copy and paste the code into a comment, you can copy just that section of code, or you could select all text in the file and copy/paste that. If you go that route, please paste the text into a hidden element in your comment.

This is what it would look like if you post the entire file content:

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

/******************************/
/*                            */
/*         IMPORTANT:         */
/*                            */
/* A feature that is present  */
/* in this code is to move    */
/* the Tab Manager button to  */
/* the right of the URL Bar.  */
/*                            */
/* Consider removing toolbar  */
/* items to conserve space.   */
/*                            */
/* To remove toolbar items:   */
/* select item to be removed  */
/* by using a secondary-click */
/* or by using a hold gesture */
/* and tap/click the option   */
/* "Remove from Toolbar".     */
/*                            */
/* To move toolbar items:     */
/* perform hold gesture or    */
/* secondary-click on toolbar */
/* and tap/click the option   */
/* "Customize Toolbar", or    */
/* customize a user.js file   */
/* in your browser profiles.  */
/*                            */
/******************************/

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --PanelUI-menu-button-position: 4px;
        --alltabs-button-height: 32px;
        --alltabs-button-width: 32px;
        --alltabs-button-position: 3.5px;
        --alltabs-button-badge-position: 8px;
        --urlbar-width: calc(100vw - 166px);
    }
    :root[uidensity="touch"] {
        --PanelUI-menu-button-position: 5px;
        --alltabs-button-height: 34px;
        --alltabs-button-width: 34px;
        --alltabs-button-position: 4.5px;
        --alltabs-button-badge-position: 9px;
        --urlbar-width: calc(100vw - 171.5px);
    }

    /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar */
    #nav-bar[inFullscreen],
    #TabsToolbar[inFullscreen],
    .titlebar-buttonbox-container {
        display: none !important;
    }

    /* Hide unpinned inactive tabs */
    .tabbrowser-tab:not([pinned]):not([selected]) {
        visibility: collapse !important;
        min-width: 0 !important;
    }

    /* Expand unpinned active tab */
    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
        min-width: 100% !important;
    }
    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
        max-width: 100% !important;
    }

    /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
    #PanelUI-menu-button {
        position: absolute !important;
        right: 0px !important;
        bottom: var(--PanelUI-menu-button-position) !important;
    }

    /* Move Tab Manager Menu button to right of URL Bar */
    :root {
        --tab-border-radius: var(--toolbarbutton-border-radius) !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack {
        height: var(--alltabs-button-height) !important;
        width: var(--alltabs-button-width) !important;
    }
    #alltabs-button {
        position: absolute;
        bottom: var(--alltabs-button-position) !important;
        right: 41.5px;
        z-index: 2 !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack::before {
        bottom: var(--alltabs-button-badge-position) !important;
    }

    /* Allow room for Tab Manager Menu button */
    #nav-bar {
        padding-right: 67px !important;
    }

    /* Reduce URL Bar width */
    #urlbar-container {
        max-width: var(--urlbar-width) !important;
    }

}

Here is the format to create a hidden element in your comment:

[details=“code”]
```
Paste the code here
```
[/details]

2 Likes