Mobile-Friendly Firefox Customizations for Librem 5

Hardware Librem 5
,
81

Almost perfect:

I wonder what is the difference between having a Sourcehut account or not in this case.

Also:

Alpha caveats

However, we also hold some caveats regarding the alpha.

Payment will be required later

From the beta onwards, unpaid accounts will be limited to read-only access to their own projects. Affected users will be emailed at least 60 days in advance of the transition. Users who host their own instance of Sourcehut, on their own servers, will be unaffected by this. Additionally, financial aid will be provided to those who cannot pay; no one is going to be priced out.

The exact details of any billing changes will be discussed extensively with the community well in advance, and you are welcome to make yourself heard in these discussions.

See the billing FAQ for details.

Some services are incomplete

Some of our services are not complete, and you may notice conspicuously absent features. However, if you find the current featureset meets your needs, it may already be suitable for your use. Our documentation is also incomplete.

Some notable features which are still under development in the alpha period include:

  • First-class support for user groups/organizations
  • A web-based workflow for submitting and reviewing patches on lists.sr.ht
  • Full data autonomy, including account data import & export, account deletion, and username changes

The ā€œbetaā€ label is used on our bug trackers to indicate tickets which are prioritized for the beta.

The API is subject to change

We are developing a new GraphQL API which we intend to support onwards into the future. Users of the legacy API will be notified of any deprecations in advance, and assistance in migrating your software will be offered. The new API, once finalized, will be supported for at least 5 years.

Goals for the beta and beyond

The beta will be considered feature complete, but may be lacking in docs and polish, or have minor known bugs. ā€œFeature completeā€ is defined as ā€œmeeting the basic goals in a stable and consistent packageā€, but doesnā€™t necessarily mean that no new features will be developed in the post-beta period. The beta period will be short, we will settle any issues which arise from the payment model changing, polish and document everything, and promote it to the production phase shortly thereafter.

2 Likes
82

I know I said that I was done updating files for a while now, but I did manage to fix the last minor issue, noted in the Final Updates (post 70).

1 Like
83

user0, Thank you for these latest changes, will try!

Going back in time:

I know, it totally is, git has a steep learning curve. But IMHO, getting into it is totally worth it (not just for employability), as version control is really powerful, even if you never intend to share what you do with someone else.

You edit a file, then git add FILENAME it and can then do git commit -m "In this commit message I describe what I changed and why". If you change something where youā€™re not really sure whether itā€™s a good idea (or that will take a while and is a distinct feature), you can open a new branch for it with git checkout -b this-is-my-new-branch-where-I-do-awesome stuff and do things there, while always being able to go back to main.

The commit history thing is great, as it allows you to go back, and, if you bothered to write good commit messages, remember why you did some tiny change years later. Itā€™s quite handy.

(Yes, you can do the almost same with tons of copies of a file in multiple folders and, e.g., daily backups - but then you have no idea why you changed something.)

AFAIK whatā€™s meant by this is that you can contribute to projects hosted on sourcehut via git and git-send-email without needing to register - basically by sending a patch to a mailing list that can then get discussed via email and merged.

2 Likes
84

Is there a way to use the context menu for tabs in Firefox mobile? Tap and hold used to bring up a menu where I could, among other things, send the tab to another device. That is very useful at times.

Tap and hold in the tabs list doesnā€™t bring up any menu at all.

1 Like
85

Question:

Answer:

If you would like to be able to tap & hold on a tab in order to use the context menu to do things like send the tab to another device, this is not currently possible using the Tab Manager Menu. You will need the Tab Bar for this functionality.

Solutions:

  1. For anyone interested, I have added a new fenix_theme.css file that is designed to be used with a mobile style in order to have the Firefox for Android (fenix) theme while preventing the Tab Bar from being hidden (in portrait mode).

  2. For those of you that prefer the simplicity of using one of the fenix_fox or fenix_one files, you can modify whichever one you are using in order to prevent the Tab Bar from being hidden. Note that I adjusted these files for this purpose, but the adjustment was not absolutely necessary. Check the Final Updates (post 70).

Steps for Option 1:

Follow the instructions in Styles & Screenshots (post 61) to enable a mobile style (not true mobile style) and make sure to enable fenix_theme.css if you want the Firefox for Android (fenix) theme applied.

Steps for Option 2:

For the following steps, you can ignore any modifications to files that you are not using.

  • To unhide the Tab Bar, comment out the following:

    • Line 508 of fenix_fox-alt.css
    • Line 537 of fenix_fox.css
    • Line 729 of fenix_one-alt.css
    • Line 758 of fenix_one.css

This:

    #tabbrowser-tabs,

Becomes this:

    /*#tabbrowser-tabs,*/

  • Then change 4px to 48px in the following:

    • Line 443 of fenix_fox-alt.css
    • Line 664 of fenix_one-alt.css

  • Then change 5px to 54px in the following:

    • Line 450 of fenix_fox-alt.css
    • Line 671 of fenix_one-alt.css

  • If you want, you can then add the single_tab_mode.css file or the single_tab_mode-alt.css file to your userChrome folder (depending on whether or not you are using an alt version of fenix_fox or fenix_one) and add the following to the top of your userChrome.css file:

@import "single_tab_mode.css";

or

@import "single_tab_mode-alt.css";
  • Or you can paste the contents of the single_tab_mode.css file or the single_tab_mode-alt.css file to the top of your userChrome.css file, but I recommend the previous option.

For the alt files, you are done.

For the other files, the Tab Bar will be at the top of the screen, while the Nav Bar is at the bottom of the screen.

  • If you want the Tab Bar & Nav Bar at the bottom of the screen, then delete the / at the end of the following:

    • Line 551 of fenix_fox.css
    • Line 772 of fenix_one.css

This:

    /* Move Nav Bar to bottom */

Becomes this:

    /* Move Nav Bar to bottom *

  • Then change 3.5px to 4.5px in the following:

    • Line 469 of fenix_fox.css
    • Line 690 of fenix_one.css

  • Then change 4.5px to 5.5px in the following:

    • Line 481 of fenix_fox.css
    • Line 702 of fenix_one.css

  • Then add the browser.css file to your userChrome folder and add the following to the bottom of your userChrome.css file:

@import "browser.css";
  • Or you can paste the contents of the browser.css file to the bottom of your userChrome.css file, but I recommend the previous option.

Conclusion:

And that is how you can use the Firefox for Android (fenix) theme with a mobile style or modify the fenix_fox and fenix_one files to unhide the Tab Bar, thereby converting a true mobile style into a mobile style.

1 Like
86

I realy appreciate your work!!!
the method you are providing all your hard work is, sorry for this, a mess for me. imagine a user without computer (like me) trying to style firefox-esr with your amazing work directly on the linux phoneā€¦ see whereā€¦ so,however, since nobody did anything for it and you said its FOSS, i moved everything into a huge deploy script:

https://gist.githubusercontent.com/magdesign/9d832dbffc2a2311224dd2cc8f3a454c/raw/8b995d3371f27a8c596483793d5bc0c8b57e48a6/gistfile1.txt

it should, as far as i could see on my small screen, create all needed files with all the content.
however, my firefox-esr looks still exactly the same and I am sure I missed a tiny little steps. so can please, some of you nerds with 2 big screens and a propper keyboard solve this quest and provide the missing piece so we have a fully automated deploy for fenix_firefox.

THANKS

edit:
so, i am on postmarketos, sxmo and i think the reason the styles do not apply is the ~/.mozilla/firefox/installs.ini file.

3 Likes
87

@Emma:

Please replace @media (max-width: 700px) with @media (orientation: portrait) (or landscape for the other orientation). This way the modification is not device or scale specific, it works for every device and every scale.

The 700px for example doesnā€™t even work on Librem 5 100% screen scale, because it has a width of 720px. But 720px is already landscape on 200% scale. I think you understand the issue.

I found it out by trying to make some further improvements (I will share if results are better).

And maybe a minor improvement for better usablility:
Instead of creating 20 userChrome.css files for different styles itā€™s may better to create 20 different [stylename].css, combine all styles in userChrome and mark the lines as commentaries. The only line without commentary mark is the activated style. This way people do not need to replace anything and just need to choose which one should not be a commentary. Itā€™s also easier to add new styles.

3 Likes
88

ok, i updated the script and Locked=1 the .init files, now it works.
thanks to everyone involved.

or raw:
https://gist.githubusercontent.com/magdesign/9d832dbffc2a2311224dd2cc8f3a454c/raw/5fb977ed9421f82fb70ef959288a04a56c7cbc0f/gistfile1.txt

2 Likes
89

Thank you for the appreciation! I really do love that so many people are enjoying my code.

Yes, I am aware that many users find this to be a less-than-optimal way to share my code. For now, this is how it is.

If you disable javascript in your browser, it is much easier to browse this thread, and I have reorganized the multi-post to be easier to follow:

All posts before post 55 can be ignored, though you should read the first post if you donā€™t know how any of this works.

All of my most recent code is in the posts from this update (posts 55-61).

I donā€™t need to imagine; I do all of this editing directly on my phone. I only use a laptop to make or edit posts here on the forum. I personally donā€™t find it difficult to copy/paste text from this thread into a text file onto my Librem 5 and have done it myself several times in order to verify everything was formatted properly.

Actually, @Lliure has created a mirror for my code on Codeberg, which was announced in this post.

I have looked at the script, and there are a few problems with it (though you fixed some of them just now).

  1. You do not check for the existence of a user.js file before creating one, which could overwrite a userā€™s existing user.js file.

  2. You create a userChrome.css file for the fenix_fox style without including the dynamic_popups_pro.css file.

  3. You used files from posts that are older than the October 2023 Halloween Update (post 55).

Please, start with the October 2023 Halloween Update (post 55), and ignore older posts.

You only need the files for the style that you want to use.

For instance, for the fenix_fox style, besides the userChrome.css file and one of the userContent.css files from the Styles & Screenshots (post 61), you only need the fenix_fox.css file.

The various dynamic_popups files are all optional, as is the fenix_colors.css file.

If you want the fenix_colors, then you should use the fenix_one.css file instead of fenix_fox.css

Also note that I just updated several files, which you can see in the Final Updates (post 70).

Thank you for bringing this to my attention. I totally forgot about different Display Scales. The way I decided to implement this change was to incorporate both orientation and max-width in order to prevent these various mobile styles from being enabled when using an external monitor with a resolution of 1080 or greater.

There are way more possibilities than 20. The few userChrome.css files that I provided in the Styles & Screenshots (post 61) are just some examples showing what can be done. And I figured lots of people would not bother to make their own, so I used my best judgement to provide the main options that I thought the most people might want.

I really intended for people to read the posts in order to understand how this works, but so many people seem to think that they need to have all of the files instead of just whatā€™s necessary for their desired style.

2 Likes
90

1080p is vertical and means 1920 pixel width. Also 720p has 1280 pixel width. But it should definitely be raised - for L5 at least to 720px. But orientation should be there in any case (you can combine with and-argument).

I also thought about other devices. Linux systems are not only used for L5 and PP, but also for some Android devices that get a custom system with Phosh. And some of those devices have up to 4k resolution (donā€™t ask me why someone would need it). Iā€™m looking into other media queries to have something better than width (currently thinking about aspect ratio or dpi, but need to test it).

You have 7 in total, so I already raised it to something above. :stuck_out_tongue_winking_eye: Of course, there are nearly infinity possibilities to modify FF, but I wanted to write a not too unrealistic number.

1 Like
91

Thank you very much for this. I have now implemented this in all of the previously edited files, since this is a better approach.

I am definitely interested in whatever you can do to make this work better for other devices. I couldnā€™t really think of anything other than the height/width method, so I look forward to seeing other options.

I understand your suggestion, but my reasoning is that I want this to be simple, and I think it would complicate things to have a really long list of styles. I am opting to show a few examples and allow users to either choose one or make their own. Iā€™ve further optimized the October 2023 Halloween Update multi-post to be better organized and informative, including important notes for users to remember when saving files.

For new users that stumble upon this thread and go straight to the most recent posts:

  • All of my most recent code is in the posts from the October 2023 Halloween Update multi-post (posts 55-61), and there is no need to use code from earlier posts.

  • The first post is the October 2023 Halloween Update (post 55)

  • The last post is the Styles & Screenshots (post 61).

  • For a summary of the updates that were applied to the October 2023 Halloween Update, see the Final Updates (post 70).

  • For info about a limitation of the true mobile styles and how to address it, see the Question & Answer (post 85).

  • Remember that you donā€™t need to save all of the files in this thread; you only need the ones for the styles that you intend to use. Some example styles are provided in Styles & Screenshots (post 61).

3 Likes
92

I was reading documentations and we really have just a limited playground. Thereā€™s may some space for improvements, but it needs further work. For now and for us I guess we have a good solution, but I donā€™t call it a final solution yet.

I just spoke about your already created styles. One reason is to make the userChrome.css as empty as possible. It would be like this:

/*@import url("desktop.css"); /* --- Desktop Style --- */
/*@import url("mobile.css"); /* --- Mobile Style --- */
/*@import url("trueMobile.css"); /* --- True Mobile Style --- */
[...]

And all people need to do is removing the first /* from any line to select what they want to try out instead of replacing the whole file over and over again. However, if you still donā€™t like it, itā€™s also okay - this was just an idea.

2 Likes
93

@Emma , I agree with everyoneā€™s thanks to you. What you have done is an amazing job and I am so thankful. Iā€™m really surprised this wasnā€™t done by Purism or someone else already, so thank you so much!

That being said, I concur with your points @Ick. The challenge Iā€™m having is iā€™m not sure which of the different files youā€™ve developed gets me the UX Iā€™m desiring. For instance, which of the files puts the nav bar at the bottom, which lets me have a button for a new tab vs. clicking the menu option, etc. So, Iā€™ve sort of taken a manual approach to what @Ick suggests above. I downloaded all of the files. Then I have each of the userChrome.css and userContent.css files (with descriptors in the file name). Then, I save each one as the userChrome.css and userContent.css to test them out. But, none of them are getting me exactly what I am looking for, so then I get myself confused. your file names are really good, Iā€™m just amazed at how much config is required to get firefox to deliver the desired UX. There are too many combinations of possibilities. Ideally, this would be integrated into the firefox UI, and is an easy selection to make. But, for the time being, if there is a way to simplify the tree heirarchy to be able to select the features user want?

I might dig into this myself, but looking over the css files, it is pretty daunting to understand the coding and how to apply it towards what Iā€™m looking for.

Regardless of whether it is possible to make this simpler or not, I do want to offer my sincere thanks and congratulations on the remarkable body of work you have provided here! It is amazing!

1 Like
94

Thank you! I hope that Purism eventually packages some of my code into PureOS, but they seem busy right now getting things ready for the migration to Crimson release.

Edit:

Most files should be self-explanitory; the new-tab-button.css file displays the New-Tab Button.

I have added and consolidated additional information in the Important section of the October 2023 Halloween Update (post 55) and the Styles & Screenshots (post 61).

Please also look at the example styles under the userChrome section. You can see which files can be used with each type of style and see the screenshots that demonstrate the differences between the styles.

1 Like
96

Thanks. Iā€™ll take a look now.

1 Like
97

I was working on solutions, but on some edges its really hard to make some progress. @Emma the media query pointer or any-pointer does not work correctly on Librem 5 (and seems to be false for some smartphones, too). This could be the way to decide between touch-mode and mouse-mode (aka convergence/docked). There are 3 possible values: none, coarse and fine and Librem 5 is always with both query ā€œfineā€ (mouse-input), but should be ā€œcoarseā€ (touch-input).

While researching I found a way to easy test things and some people also used the hover query to fix this, but it also doesnā€™t work on L5 correctly. https://hoverpointer-media-query.glitch.me/ It would be cool if you (or others) could help to find out how Firefox is setting those values. Than we could see if we could do something further (work around or bug report or anything else).

I also tried to improve my own CSS-solution. Thanks to Fenix I could recolor my whole FF easily to match my Phosh styling (which I should also finish and release btw). But the main time I tried to make the addon-panel adaptive. I donā€™t want to fill the whole screen if I donā€™t need to, but I also want to scroll if I have to. Right now I did not find a solution for both together ā€¦ only the one thing or the other thing. Itā€™s kinda frustrating.

1 Like
98

@Emma thanks for the great work you did here! Iā€™ve started with integrating some of your changes into mobile-config-firefox: Start integrating user0's customizations (!40) Ā· Merge requests Ā· postmarketOS / mobile-config-firefox Ā· GitLab ā€“ having it in there should make it possible to get this into various distributions by default like PureOS, postmarketOS, mobian etc.

I also pinged you on the fediverse. But then I realized that you have a kbin account and I pinged you from mastodon, so not sure if you got that at all :sweat_smile:

4 Likes
99

@ollieparanoid Thanks for the appreciation, and also thanks for the work youā€™ve done!

I typically browse kbin and forums without logging in, so I didnā€™t notice your mention. Iā€™ll respond to it there in a little while.

1 Like
100

December 2023 Update:

I have made a repo for my code on Codeberg:

https://codeberg.org/user0/Mobile-Friendly-Firefox

I plan to create a few branches for the postmarketOS mobile-config-firefox repo for styles to consider merging.

Thanks to @linmob and others for urging me to setup a repo.

This thread can now be used for discussions.

Happy Holidays everyone!

10 Likes
101

Thank you for your sacrifice.

So, what was your webmail provider of choice?

1 Like