Show Off Your Config

A document inspired by Powerlevel9k/Show-Off-Your-Config.

If you have a special configuration show it here!
When you entered the editing mode, I prepared the template and video-> gif sample code using ffmpeg.

Rules

Provide an awesome screenshot.
Provide your configuration.
Share your theme & addon.

Configurations

One Liner with Tabs on bottom

Theme: Dracula Dark Theme

Configs

userChrome.tabbar.one_liner to true
userChrome.tabbar.one_liner.responsive to true
userChrome.tabbar.on_bottom to true
userChrome.autohide.forward_button to true (Option)
userChrome.hidden.urlbar_iconbox to true (Option)

Vertical Tab

Addon: Tree Style Tab
- Or Tab Center Reborn, Sidebar Tabs

Configs

userChrome.tabbar.as_titlebar to true
- Or userChrome.hidden.tabbar to true
userChrome.centered.tab to true
userChrome.autohide.sidebar to true
userChrome.sidebar.overlap to true
userChrome.hidden.sidebar_header to true (Option)
- userChrome.hidden.sidebar_header.vertical_tab_only to true (Option)
widget.gtk.ignore-bogus-leave-notify to 1 (Only linux, show #742)

Autohide Toolbar

Configs

userChrome.autohide.tab to true
userChrome.autohide.tab.blur to true
userChrome.autohide.navbar to true
userChrome.autohide.toolbar_overlap to true
userChrome.centered.tab to true
userChrome.centered.tab.label to true
userChrome.centered.urlbar to true
userChrome.centered.bookmarkbar to true

Keyboard browsing

Inspired by qutebrowser.

You can browse only with the keyboard using the Vim shortcut and Caret Browsing.

keyboard_browsing

If you want Status Bar, use Waterfox

Theme: Matte Black (Green)
Addon: Vim Vixen
- Or Tridactyl, Vimium-FF, Saka Key, Surfingkeys

user.js

// ** Browser Options **********************************************************
user_pref("browser.uidensity",                            1); // and urlbar spacing. The possible values are 0=normal, 1=compact, 2=touch.
user_pref("browser.tabs.inTitlebar",                      0); // no (0), yes (1), or default (2), which is true everywhere except Linux.
user_pref("accessibility.browsewithcaret",             true);

// Waterfox only
user_pref("browser.statusbar.enabled",                 true);
user_pref("browser.statusbar.appendStatusText",        true);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",         false); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator",              true); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",            true);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.theme.monospace",                     true);

user_pref("userChrome.hidden.navbar",                       true);

user_pref("userChrome.counter.tab",                         true);
user_pref("userChrome.counter.bookmark_menu",               true);

user_pref("userChrome.tabbar.fill_width",                   true);

// -- User Content -------------------------------------------------------------
user_pref("userContent.page.monospace",                     true);

Photon with multirow

Photon style to support multirow.

photon_with_multirow

user.js

// ** Browser Options **********************************************************
user_pref("browser.search.widget.inNavBar",            true);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",       false); // Original
user_pref("userChrome.tab.photon_like_padding",        true); // Photon

user_pref("userChrome.tab.dynamic_separator",         false); // Original, Proton
user_pref("userChrome.tab.static_separator",           true); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",               false); // Original, Proton
user_pref("userChrome.icon.panel_photon",              true); // Photon

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",    true);
user_pref("userChrome.rounding.square_tab",            true);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.decoration.panel_button_separator",   true);
user_pref("userChrome.decoration.panel_arrow",              true);

user_pref("userChrome.combined.nav_button",                 true);
user_pref("userChrome.combined.sub_button.as_normal",       true);

user_pref("userChrome.padding.urlView_expanding",           true);
user_pref("userChrome.padding.urlView_result",              true);
user_pref("userChrome.padding.toolbar_button.compact",      true);

user_pref("userChrome.urlView.always_show_page_actions",    true);
user_pref("userChrome.urlView.move_icon_to_left",           true);

user_pref("userChrome.rounding.square_panel",               true);
user_pref("userChrome.rounding.square_panelitem",           true);

user_pref("userChrome.panel.full_width_separator",          true);
user_pref("userChrome.panel.full_width_padding",            true);

user_pref("userChrome.tabbar.multi_row",                    true);
user_pref("userChrome.bookmarkbar.multi_row",               true);

Australis like theme

Set up combined UI like Australis.
At the same time, it applies a gaming feeling like Opera GX.

australis_like_theme

Theme: Beautiful Opera GX Fucsia

user.js

// ** Browser Options **********************************************************
user_pref("browser.tabs.inTitlebar",                      1); // no (0), yes (1), or default (2), which is true everywhere except Linux.
user_pref("browser.search.widget.inNavBar",            true);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator",             false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",     true); // Original
user_pref("userChrome.tab.newtab_button_smaller",     false); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                 true);
user_pref("userChrome.tab.bottom_rounded_corner",      true);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.autohide.forward_button",             true);

user_pref("userChrome.combined.urlbar.nav_button",          true);
user_pref("userChrome.combined.urlbar.reload_button",       true);

user_pref("userChrome.tab.bottom_rounded_corner.all",       true);
user_pref("userChrome.tab.bottom_rounded_corner.australis", true);

user_pref("userChrome.urlbar.iconbox_with_separator",       true);

// Option
// user_pref("userChrome.combined.urlbar.home_button",         true);

userChrome.css

/* Original:
At :root
  --toolbar-field-focus-border-color: rgba(0, 0, 0, 0);
  --buttons-destructive-active-bgcolor: #810220;
  --toolbar-field-background-color: rgba(0, 0, 0, 0);
  --arrowpanel-background: rgba(28, 23, 38, 0.9959999918937683);

At #navigator-toolbox
  --lwt-tabs-border-color: rgba(208, 26, 67, 0.6669999957084656);

At #TabsToolbar, Need hardcoded
  --lwt-tab-line-color: rgb(208, 26, 67);
  */

#nav-bar {
  --toolbar-field-focus-border-color: var(--buttons-destructive-active-bgcolor);
  --toolbar-field-background-color: var(--arrowpanel-background);
  --lwt-tabs-border-color: rgb(208, 26, 67);
}

Chrome like theme

Minimal settings to get a look and fill for Chrome.

chrome_like_theme

Theme: Google Chrome Dark
- Or Google Chrome Light, Chrome Just Black

user.js

// ** Browser Options **********************************************************
user_pref("browser.tabs.inTitlebar",                      1); // no (0), yes (1), or default (2), which is true everywhere except Linux.

// Experimental settings for `userChrome.tabbar.unscroll`
user_pref("layout.css.container-queries.enabled",      true);
user_pref("layout.css.overflow-moz-hidden-unscrollable.enabled", true);
user_pref("browser.tabs.tabMinWidth",                     0);

// == Theme Distribution Settings ==============================================
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator",             false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                 true);
user_pref("userChrome.tab.bottom_rounded_corner",      true);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.rounding.square_urlView_item",        true);

user_pref("userChrome.urlView.full_width_padding",          true);
user_pref("userChrome.urlView.focus_item_border",           true);

user_pref("userChrome.tab.bottom_rounded_corner.all",       true);
user_pref("userChrome.tab.bottom_rounded_corner.chrome",    true);

user_pref("userChrome.tabbar.unscroll",                     true);

user_pref("userChrome.urlbar.iconbox_with_separator",       true);

user_pref("userChrome.findbar.floating_on_top",             true);

Arc Browser like theme

Concept of proof for UI similar to Arc Browser.

It can be experimental and buggy.

arc_browser_like_theme

First, Open Customize toolbar, then activate Title Bar or Menu Bar.

Addon: Sidebar Tabs
- Or Tree Style Tab, Tab Center Reborn

Configs

userChrome.hidden.tabbar to true
userChrome.hidden.urlbar_iconbox to true
userChrome.hidden.urlbar_iconbox.label_only to true
userChrome.navbar.as_sidebar to true
userChrome.urlView.as_commandbar to true

te6-in / lepton-custom

Repo: https://github.com/te6-in/lepton-custom
Limit: Only the Mac works as intended.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show Off Your Config

Rules

Configurations

One Liner with Tabs on bottom

Vertical Tab

Autohide Toolbar

Keyboard browsing

Photon with multirow

Australis like theme

Chrome like theme

Arc Browser like theme

te6-in / lepton-custom

Clone this wiki locally