Tab Center Reborn tweaks
Synchronize loading indicators animation
The animations of loading indicators of different tabs can be synchronized.
On Firefox Developer Edition and Firefox Nightly only, go to about:config
and make sure dom.animations-api.getAnimations.enabled
is set to true
.
CSS Tweaks
To add custom CSS, open the extension's preferences page by either:
- Clicking on the gear icon in the sidebar.
- Or navigating to
about:addons
then clicking on the Tab Center RebornOptions
button.
You will find the Custom CSS at the bottom of that page.
Warning: when writing your own CSS rules, please try to be specific and avoid using !important
to limit the scope of your changes, so that it avoids most potential breakages (see issue 21).
#283
Change styling of unread tabsShow/Hide CSS
.tab.discarded {
font-style: italic;
}
.tab.discarded .tab-title {
opacity: 0.65; /* default is 0.5 */
}
.tab.discarded .tab-meta-image {
opacity: 0.6; /* default is 0.45 */
}
Reduce height of tabs in compact mode
Show/Hide CSS
:root {
--tab-height-compact: 28px;
}
Add white outline around favicons
Useful with a dark theme.
Show/Hide CSS
body .tab .tab-icon {
filter: url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg"><filter id="s"><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -0.2125 -0.7154 -0.0721 1 0" /><feMorphology operator="dilate" radius="1"/><feComponentTransfer><feFuncA type="gamma" offset="0" amplitude="1" exponent="2"/></feComponentTransfer><feGaussianBlur stdDeviation="0.5"/><feComposite in="SourceGraphic" operator="over"/></filter></svg>#s');
}
Hide favicons and thumbnails
Show/Hide
.tab-meta-image {
display: none;
}
Zoom the screenshot displayed as thumbnail
Show/Hide CSS
#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image {
background-size: 700% !important;
}
Change colors of border and background of icon and thumbnail
Show/Hide CSS
/* color for icon border + transparent icon bg */
#tablist-wrapper:not(.shrinked) #tablist .tab-icon-wrapper,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact){
background-color: silver;
}
/* color for thumbnail border */
#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image.has-thumbnail,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image.has-thumbnail {
border: 2px solid silver;
}
/* color for thumbnail bg color */
#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image {
background-color: #38383D;
}
Hide scrollbar
Show/Hide CSS
#tablist {
scrollbar-width: none;
}
Autohide scrollbar
Show/Hide CSS
.tab {
max-width: 100vw;
}
#tablist {
margin-right: -19px; /* Value from KDE’s Breeze theme; adjust as needed */
transition: margin-right 0.2s 0.3s;
}
#tablist:hover {
margin-right: 0px;
transition: margin-right 0.2s 0.1s;
}
#tablist-wrapper {
overflow-x: hidden;
}
For Firefox 64 and ulterior, with no animation (hiding of scrollbar can’t be animated with scrollbar-width
):
Show/Hide CSS
#tablist {
scrollbar-width: none;
}
#tablist:hover {
scrollbar-width: auto;
}
Move scrollbar to the left
Show/Hide CSS
#tablist {
direction: rtl;
}
.tab {
direction: ltr;
}
Make scrollbar thinner
Show/Hide CSS
#tablist {
scrollbar-width: thin;
}
Disable smooth scrolling
Show/Hide CSS
#tablist {
scroll-behavior: auto;
}
#363
Hide tab close buttonShow/Hide CSS
/* Hide close button */
.tab-close {
display: none;
}
/* Fix title gradient */
#tablist .tab:hover > .tab-title-wrapper {
mask-image: linear-gradient(to left, transparent 0, black 2em);
}
Hide tab loading burst
Show/Hide CSS
.tab-loading-burst {
display: none;
}
Hide attention indicator on pinned tabs
Show/Hide CSS
#pinnedtablist .tab.wants-attention {
background-image: none;
}
Hide muted audio icon
Show/Hide CSS
.tab.muted .tab-icon-overlay-muted {
display: none;
}
Hide top menu (New Tab/Search)
Show/Hide CSS
#topmenu {
display: none;
}
Put top menu (New Tab/Search) at the bottom
Show/Hide CSS
#topmenu {
order: 2;
}
Hide New Tab button
Show/Hide CSS
#newtab {
display: none;
}
Merge active and container indicators on the left
Show/Hide CSS
:root {
/* use a color that’s different enough from the blue of the default “Personal” container */
--tab-selected-line: var(--blue-40);
}
#tablist .tab.active:not([data-identity-color]),
#pinnedtablist:not(.compact) .tab.active:not([data-identity-color]) {
box-shadow: inset 5px 0 0px 0px var(--tab-selected-line);
}
#tablist .tab[data-identity-color],
#pinnedtablist:not(.compact) .tab[data-identity-color] {
box-shadow: inset 3px 0 0px 0px var(--identity-color);
}
#tablist .tab.active[data-identity-color],
#pinnedtablist:not(.compact) .tab.active[data-identity-color] {
box-shadow: inset 5px 0 0px 0px var(--identity-color);
}
body.incognito #tablist .tab:not([data-identity-color]) .tab-context,
body:not(.incognito) #tablist .tab[data-identity-color] .tab-context,
body.incognito #pinnedtablist:not(.compact) .tab:not([data-identity-color]) .tab-context,
body:not(.incognito) #pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context {
box-shadow: unset;
}```
</details>
# [userChrome.css](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin) tweaks
To use the following tweaks, first:
1. Go to `about:config` and set, if it exists, `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`.
2. Navigate to `about:support`. In the first table, search for the line “Profile Directory”, or depending on your OS, “Project Folder”. Then click on the button on the same line, it should be named “Open Directory”, “Open Folder” or “Show in Finder”
3. Create a directory `chrome` there, then open it and create a text file called `userChrome.css` in it.
You can then add your desired tweaks to the file `userChrome.css`. You will need to restart Firefox to apply changes.
## Hide the horizontal tab strip [#15](https://github.com/eoger/tabcenter-redux/issues/15)
With this trick, the menubar is hidden all the time, except the browser is in customizing mode.
First navigate to `about:config` and, if it exists, set `browser.tabs.drawInTitlebar` to `false`.
<details>
<summary>Show/Hide CSS</summary>
```css
#TabsToolbar:not([customizing="true"]) {
visibility: collapse !important;
}
/* if the titlebar is also hidden and your browser is maximized,
* clicking on the top pixel of the screen should trigger menu items (Fitt’s law)
*/
#toolbar-menubar {
padding-top: 0px !important;
}
Hide sidebar with only one tab open
Install the Tab Count in Window Title extension.
Show/Hide CSS
#main-window[titlepreface^="[1] "] #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] {
visibility: collapse;
}
Hide sidebar header
Show/Hide CSS
#sidebar-box #sidebar-header {
visibility: collapse;
}
For Tab center Reborn only:
Show/Hide CSS
#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] #sidebar-header {
visibility: collapse;
}
Reduce height of sidebar header
Show/Hide CSS
#sidebar-box #sidebar-header * {
margin-top: -3px !important;
margin-bottom: -3px !important;
}
Move sidebar header to the bottom
Show/Hide CSS
#sidebar-box {
-moz-box-direction: reverse;
}
#sidebar-switcher-arrow {
transform: rotate(180deg);
}
#244
Sidebar border improvements for dark themeShow/Hide CSS
#sidebar-header {
background: #0C0C0D;
border-bottom: none !important;
}
#sidebar-splitter {
border-right-color: #0C0C0D !important;
border-left-color: #0C0C0D !important;
}
#sidebar-switcher-target,
#sidebar-close {
filter: invert(100%);
}
Set maximum width of the sidebar
Show/Hide CSS
#sidebar-box {
max-width: 192px;
}
#103 (video preview)
Floating auto-shrinking sidebarWarning: this CSS may stop working correctly with major Firefox updates, and may not be fixed right away.
Show/Hide CSS
#sidebar-box:not([hidden]) {
display: block;
position: fixed;
min-width: 4vw;
max-width: 4vw;
overflow: hidden;
transition: min-width 0.2s ease;
border-right: 1px solid #cdc7c2;
z-index:1;
}
#sidebar,
#sidebar-box:hover {
min-width: 20vw !important;
max-width: 20vw !important;
}
#sidebar-splitter {
display: none;
}
/*
* You need to subtract the height of the panels above sidebar: toolbar (with the URL),
* bookmarks bar, etc. -- whichever is enabled/displayed.
* You can see which mode (normal, compact or touch) you’re in by going to:
* Firefox Menu → Customize… (at the bottom of the screen) → Density
*
* | normal | compact | touch
* Menu bar | 27px | 27px | 27px
* Tab bar | 33px | 29px | 41px
* Toolbar | 40px | 32px | 40px
* Bookmarks bar | 23px | 21px | 27px
* Sidebar header | 47px | 47px | 47px
*
* Ex: in compact mode:
* - menu bar, tab bar and sidebar header hidden (0px)
* - nav bar (32px) + bookmarks bar (21px) = 53px
*/
#sidebar {
height: calc(100vh - 120px);
}
#sidebar-box:not([hidden]) ~ #appcontent {
margin-left: 4vw;
}
#main-window[inFullscreen][inDOMFullscreen] #appcontent {
margin-left: 0;
}
#main-window[inFullscreen] #sidebar {
height: 100vh;
}
Hide tab context menu items
Show/Hide CSS
/* Reload Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab,
/* Mute Tab / Unmute Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab,
/* separator */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab + menuseparator,
/* Pin Tab / Unpin Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab,
/* Duplicate Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab,
/* Unload Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab,
/* separator */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab + menuseparator,
/* Reopen in Container */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab,
/* Move Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab,
/* Move to Start */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTabToStart,
/* Move to End */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTabToEnd,
/* Move to New Window */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTabToNewWindow,
/* Close Tabs */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs,
/* Close Tabs Before */
#tabcenter-reborn_ariasuni-menuitem-contextMenuCloseTabsBefore,
/* Close Tabs After */
#tabcenter-reborn_ariasuni-menuitem-contextMenuCloseTabsAfter,
/* Close Other Tabs */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseOtherTabs,
/* separator */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs + menuseparator,
/* Undo Close Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab,
/* Close Tab */
#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab {
display: none;
}