skip to content
Jiaxin的仓库

Firefox侧边栏标签栏

/ 8 min read

View more blogs with the tag firefox , View more blogs with the tag css
Table of Contents

之前一直用Surface 3:2 的屏幕，网页竖向显示的内容相比较mac要稍微多一些内容。最近刚好下载了Arc浏览器，发现cmd+s可以直接关闭侧边栏。这样网页基本就是一个全屏化，观感非常的好。所以想看看有没有办法在Firefox上实现这个功能。

正好在Firefox插件中心看到了Tree Style Tab这个插件，可以将标签页全部显示在右侧，但是还是需要稍微调整CSS参数才能完全关闭顶部标签栏。

image.png

之前分享过一个方法， 但是那个方法还需要自己对参数修改一下。 这里直接分享一个完整的，复制就可以用的方法。

开启userChrome配置

首先要打开你的浏览器，在地址栏中填入about:config进入配置中心 image.png

直接接受并继续，然后搜索toolkit.legacyUserProfileCustomizations.stylesheets，然后双击将值修改为`true。 image.png

创建userChrome.css文件

第二步，在地址栏搜索about:profiles并回车 image.png

在下边的文件中找到当前正在使用的配置文件 image.png

然后在访达中查看文件夹，你应该可以在文件夹中找到一个名为chrome的子文件夹 image.png

双击进入这个文件夹，你应该会在这个文件夹中看到一个名为userChrome.css的文件 image.png

如果你的文件夹没有这个文件，你只需要自己创建一个。然后将下列代码复制进文件就可以了

这个文件中包含了另外一个插件Tab Center Reborn的配置信息。这个插件和上边提到的插件功能类似可以根据个人的喜好来选择。

:root {
    /* delay before expanding tabs, set to '0' for no delay */
    --delay: 0.2s;
    --transition-time: 0.2s;
    --positionX1: 48px; /* '48px' for left, '0px' for right sidebar */
    --positionX2: absolute; /* 'absolute' for left, 'none' for right sidebar */
    /* width of the collapsed sidebar in fullscreen mode ('1px' or '48px') */
    --fullscreen-sidebar-width: 1px;
}


/* macOS specific styles */
@media (-moz-platform: macos) {
    #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
    #sidebar-header {
        display: none;
    }


    #sidebar-box {
        max-width: 200 !important;
        min-width: 0px !important;
    }


    #TabsToolbar:not([customizing="true"]) {
        visibility: collapse !important;
    }


    :root:not([customizing="true"]) #nav-bar:not([inFullscreen]) {
        padding-left: 80px;
    }


    :root:not([customizing="true"]) #TabsToolbar .titlebar-buttonbox-container {
        visibility: visible !important;
        position: absolute;
        top: 12px;
        left: 0px;
        display: block;
    }
}


/* Linux/GTK specific styles */
@media (-moz-gtk-csd-available),
       (-moz-platform: linux) {
    .browser-toolbar:not(.titlebar-color){ /* Fixes wrong coloring applied with --toolbar-bgcolor by Firefox (#101) */
        background-color: transparent !important;
        box-shadow: none !important;
    }


    #TabsToolbar:not([customizing="true"]) {
        visibility: collapse !important;
    }


    #toolbar-menubar {
        padding-top: 0px !important;
    }


    :root:not([customizing="true"]) #toolbar-menubar[inactive]+#TabsToolbar .titlebar-buttonbox-container {
        visibility: visible !important;
        position: absolute;
        top: var(--uc-win-ctrl-vertical-offset);
        display: block;
        z-index: 101;
    }


    /* enable rounded top corners */
    :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]):not([customizing="true"]) #nav-bar {
        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
    }


    /* window control padding values (these don't change the size of the actual buttons, only the padding for the navbar) */
    :root[tabsintitlebar]:not([customizing="true"]) {
        /* default button/padding size based on adw-gtk3 theme */
        --uc-win-ctrl-btn-width: 38px;
        --uc-win-ctrl-padding: 12px;
        /* vertical offset from the top of the window, calculation: (1/2 * (NAVBAR_HEIGHT - BUTTON_HEIGHT)) */
        --uc-win-ctrl-vertical-offset: 8px;
        /* extra window drag space */
        --uc-win-ctrl-drag-space: 20px;
    }


    :root[tabsintitlebar][lwtheme]:not([customizing="true"]) {
        /* seperate values for when using a theme, based on the Firefox defaults */
        --uc-win-ctrl-btn-width: 30px;
        --uc-win-ctrl-padding: 12px;
        /* vertical offset from the top of the window, calculation: (1/2 * (NAVBAR_HEIGHT - BUTTON_HEIGHT)) */
        --uc-win-ctrl-vertical-offset: 5px;
        /* extra window drag space */
        --uc-win-ctrl-drag-space: 20px;
    }


    /* setting the padding value for all button combinations */
    @media (-moz-gtk-csd-minimize-button),
    (-moz-gtk-csd-maximize-button),
    (-moz-gtk-csd-close-button) {
        #nav-bar {
            --uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 1);
        }
    }


    @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
    (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
    (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
        #nav-bar {
            --uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 2);
        }
    }


    @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
        #nav-bar {
            --uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 3);
        }
    }


    /* only applies padding/positioning if there is 1 or more buttons */
    @media (-moz-gtk-csd-minimize-button),
    (-moz-gtk-csd-maximize-button),
    (-moz-gtk-csd-close-button) {
        /* window controls on the right */
        @media not (-moz-gtk-csd-reversed-placement) {
            #nav-bar {
                padding-inline: 0 calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding) + var(--uc-win-ctrl-drag-space)) !important;
            }


            .titlebar-buttonbox-container {
                right: 0;
            }
        }


        /* window controls on the left */
        @media (-moz-gtk-csd-reversed-placement) {
            #nav-bar {
                padding-inline: calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding) + var(--uc-win-ctrl-drag-space)) 0 !important;
            }


            .titlebar-buttonbox-container {
                left: 0;
            }
        }
    }


    /* Hide window buttons in fullscreen */
    #navigator-toolbox[style*="margin-top: -"] .titlebar-buttonbox-container,
    [inDOMFullscreen="true"] .titlebar-buttonbox-container {
        transform: translateY(-100px)
    }




}


/* Windows specific styles */
@media (-moz-platform: windows),
       (-moz-platform: windows-win10) {
    /* Hide main tabs toolbar */
    :root[tabsintitlebar]{
        --uc-window-control-width: 137px; /* Space at the right of nav-bar for window controls */
        /* --uc-window-drag-space-width: 24px; */  /* To add extra window drag space in nav-bar */
    }


    #nav-bar{
        border-inline: var(--uc-window-drag-space-width,80px) solid var(--toolbar-bgcolor) ;
        border-inline-style: solid !important;
        border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px));


        padding-top: .5px !important; /* This makes it possible to drag the maximized window. */
        margin-left: -80px; /* Removes the space left when hiding .titlebar-buttonbox-container */
    }


    #back-button {
    margin-top: -.5px !important;
  }


  #forward-button {
    margin-top: -.5px !important;
  }


  #reload-button {
    margin-top: -.5px !important;
  }


  #PanelUI-button {
    margin-top: -.5px !important;
  }


  #nav-bar-overflow-button{
    margin-top: -.5px !important;
  }


    :root {
        --uc-toolbar-height: 32px;
        --chrome-content-separator-color: none !important;
    }


    :root:not([uidensity="compact"]) {
        --uc-toolbar-height: 38px;
    }


    #TabsToolbar {
        visibility: collapse !important;
    }


    /* Hide the Windows controls on the left side. */
    #TabsToolbar .titlebar-buttonbox-container {
        visibility: hidden !important;
    }
    /* Line up the Windows controls with the rest of the icons in the toolbar. */
    :root:not([sizemode="maximized"]) .titlebar-buttonbox-container {
        margin-top: 3px;
    }




    :root:not([inFullscreen]) #nav-bar {
        margin-top: calc(0px - var(--uc-toolbar-height));
        z-index: 2;
    }


    #toolbar-menubar {
        min-height: unset !important;
        height: var(--uc-toolbar-height) !important;
        position: relative;
    }


    /* For a rounded button design, uncomment both lines in .titlebar-buttonbox. */
    .titlebar-buttonbox {
        z-index:3 !important;
        /* padding-right:3px; */
    }


    .titlebar-buttonbox * {
        /* border-radius: 5px; */
        width:35px;
        height:38px;
    }


    #main-menubar {
        -moz-box-flex: 1;
        background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
        background-clip: padding-box;
        border-right: 30px solid transparent;
        border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px;
    }


    #toolbar-menubar:not([inactive]) {
        z-index: 2;
    }


    #toolbar-menubar[inactive] > #menubar-items {
        opacity: 0;
        pointer-events: none;
        margin-left: var(--uc-window-drag-space-width,0px);
    }


    :root[inFullscreen] #nav-bar {
        border-right: none !important;
    }
}




/* General styles */
#browser {
    position: relative;
}


#nav-bar, #urlbar {
    z-index: 100;
}


#sidebar-box:not([lwt-sidebar]){
    appearance: unset !important;
}


#sidebar-box[sidebarcommand*="tabcenter"] {
    z-index: 1;
}


#sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
    visibility: collapse;
    display: none;
}


[sidebarcommand*="tabcenter"] #sidebar,
#sidebar-box[sidebarcommand*="tabcenter"] {
    display: block !important;
    min-width: 48px !important;
    max-width: 48px !important;
    width: 48px;
}


#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
    display: block;
    position: var(--positionX2);
    min-width: 48px;
    max-width: 48px;
    overflow: hidden;
    border-right: 1px solid var(--sidebar-border-color);
    z-index: 1;
    top: 0;
    bottom: 0;
}


/* use :where() selector to lower specificity */
:where(#main-window[inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
    min-width: var(--fullscreen-sidebar-width) !important;
    max-width: var(--fullscreen-sidebar-width) !important;
}


#sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
#sidebar-box[sidebarcommand*="tabcenter"]:hover {
    min-width: 10vw !important;
    width: 30vw !important;
    max-width: 200px !important;
    z-index: 1 !important;
    transition: all var(--transition-time) ease var(--delay);
}


/* used for delay function */
#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
    transition: all var(--transition-time) ease 0s;
}


@media (width >= 1200px) {
    #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
    #sidebar-box[sidebarcommand*="tabcenter"]:hover {
        max-width: 250px !important;
    }
}


[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
    display: none;
}


[sidebarcommand*="tabcenter"] #sidebar {
    max-height: 100%;
    height: 100%;
}


#main-window:not([inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
    margin-left: var(--positionX1);
}


#main-window[inFullscreen]:not([inDOMFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
    margin-left: var(--fullscreen-sidebar-width);
}


#main-window[inFullscreen] #sidebar {
    height: 100vh;
}


[sidebarcommand*="tabcenter"] #sidebar-header {
    background: #0C0C0D;
    border-bottom: none !important;
}


[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
    border-right-color: #0C0C0D !important;
    border-left-color: #0C0C0D !important;
}


[sidebarcommand*="tabcenter"] #sidebar-switcher-target,
[sidebarcommand*="tabcenter"] #sidebar-close {
    filter: invert(100%);
}


@media (max-width: 630px) {
    #urlbar-container {
        min-width: 100% !important;
    }


    #menubar-items {
        display: none !important;
    }
}

配置好之后，重启Firefox浏览器，就可以愉快使用侧边标签栏了。

image.png

朴素方法

Firefox: Hide Native Tabs and Titlebar

这个方法的第一步就是在about:config 中将 toolkit.legacyUserProfileCustomizations.stylesheets 修改为true。

然后在个人资料的文件夹中创建一个名为userChrome.css 的文件，然后在里边添加如下代码：

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}
/* leaves space for the window buttons */
#nav-bar {
    margin-top: -8px;
    margin-right: 74px;
    margin-bottom: -4px;
}

然后就可以关闭标签栏了。