Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
Tab Center Reborn
Tab Center Reborn
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 15
    • Issues 15
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 2
    • Merge Requests 2
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • ariasuni
  • Tab Center RebornTab Center Reborn
  • Wiki
  • Home

Last edited by ariasuni Jan 07, 2021
Page history

Home

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 Reborn Options 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).

Change styling of unread tabs #283

Show/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

Demonstration of less-bright icon/border colors on a dark theme

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;
}

Hide tab close button #363

Show/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);
}

Sidebar border improvements for dark theme #244

Show/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;
}

Floating auto-shrinking sidebar #103 (video preview)

Warning: 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;
}

Themes

See themes.

Clone repository
  • Themes
  • Home