Zen Browser: Getting back "New Tab Below" button on tabs

Patryk AdamczykPatryk Adamczyk
3 min read

Context

In Zen Browser 1.15.1b they added folders. But in addition to that they removed “New Tab Below” button.

This kinda annoyed me because every time I wanted to use it I was making new folder (I use this button a lot). Looking through issues i found Zen Browser/desktop#10054 with explanation (which I really disagree but whatever).

Being a dev I wanted to find a way to get it back because it was this annoying.

Things I considered:

  • Soft forking Zen Browser just to removing this one line (Specifically these lines)

    • This sounded a bit extreme for me and like it needed a lot of time and space for building browser from source.
  • Using extension like this one

    • This option was OK but moved button to bottom of context menu. It’s good fallback though if they ever will fully nuke this button and I would want to still use it.
  • Using userChrome.css

    • This option I went with for now and will write how to do it

How to add it back using userChrome.css

  1. Make userChrome.css work

    • For up to date guide from Zen Browser documentation go to Live Editing Zen Theme Page

    • For current way and my notes

      1. First go to: about:config page and change option toolkit.legacyUserProfileCustomizations.stylesheets to true (by double clicking if its false)

      2. If you want to make your own customizations too and have live editing option

        1. Open DevTools

        2. Click Three Dots menu and Settings or click F1 in DevTools

        3. In Advanced Settings enable: Enable browser chrome and add-on debugging toolboxes and Enable remote debugging

      3. Go to: about:support and click Open Directory button in Profile Directory in Application Basics section

        1. Note if it doesn’t work and you use flatpak do below things instead:

          1. Open ~/.var/app/app.zen_browser.zen/.zen folder using your File Manager

          2. Using information in about:support in Profile Directory find a name of your profile (which last part of the path so for example if in about:support you have /home/user/.zen/xxx00x00.Default (alpha) as your path then name you need is xxx00x00.Default (alpha))

          3. Go to folder with name of your profile and continue next steps from here

      4. Make chrome folder (if it doesn’t exist, it can exist normally if you use zen mods for example)

      5. Make userChrome.css file

  2. Now that you have userChrome.css file make it have these content:

     @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    
     #tabContextMenu #context_openANewTab[hidden="true"] {
         display: flex;
     }
    
    • Notes

      • I don’t know if first line is needed
  3. Restart your browser and check your context menu on tabs. If everything went correctly you should see “New Tab Below” button again.

Additional Notes

  • If someone want to make that as Zen Mod and publish it to Theme Store. You are free to do so. And would probably use that instead (if i will find one for that in future I will try to add it to this post).

Random notes for settings

  • If you would want to have CTRL+T (new tab shortcut) to open new tab below your active tab always. (So something like new tab below button and changing URL) You can set browser.tabs.insertAfterCurrent in about:config to true.
0
Subscribe to my newsletter

Read articles from Patryk Adamczyk directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Patryk Adamczyk
Patryk Adamczyk