Mobile-Friendly Firefox Customizations for Librem 5

Hardware Librem 5
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