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.
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.
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).
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).
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.
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:
fenix_fox-alt.cssfenix_fox.cssfenix_one-alt.cssfenix_one.cssThis:
#tabbrowser-tabs,
Becomes this:
/*#tabbrowser-tabs,*/
Then change 4px to 48px in the following:
fenix_fox-alt.cssfenix_one-alt.cssThen change 5px to 54px in the following:
fenix_fox-alt.cssfenix_one-alt.cssIf 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";
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:
fenix_fox.cssfenix_one.cssThis:
/* Move Nav Bar to bottom */
Becomes this:
/* Move Nav Bar to bottom *
Then change 3.5px to 4.5px in the following:
fenix_fox.cssfenix_one.cssThen change 4.5px to 5.5px in the following:
fenix_fox.cssfenix_one.cssThen add the browser.css file to your userChrome folder and add the following to the bottom of your userChrome.css file:
@import "browser.css";
browser.css file to the bottom of your userChrome.css file, but I recommend the previous option.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.
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:
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.
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.
ok, i updated the script and Locked=1 the .init files, now it works.
thanks to everyone involved.
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:
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).
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).
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.
You create a userChrome.css file for the fenix_fox style without including the dynamic_popups_pro.css file.
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.
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. 
Of course, there are nearly infinity possibilities to modify FF, but I wanted to write a not too unrealistic number.
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.
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).
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.
@user0 , 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!
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.
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.
Thanks. I’ll take a look now.
I was working on solutions, but on some edges its really hard to make some progress. @user0 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.
@user0 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 
@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.
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!
I went with ProtonMail, which does require javascript, but I did not have to do any captchas or load any 3rd-party javascript. I still don’t intend to use the email address though, as I just don’t like email.
Just an idea here, but after registering for a Codeberg account, it may be possible to change the registered ProtonMail email address with an ephemeral email address instead. That is, at least, what my “infiltration” senses are telling me.
That doesn’t really bother me; I’m fine with it the way it is now.
I did have to enable javascript on Codeberg in order to unsubscribe from all emails, but all other important features are accessible without javascript.