Extensions: Add support for Tab Center Reborn (#455)

README.md

@@ -213,6 +213,12 @@ Optional features can be enabled by creating new `boolean` preferences in `about
 
 	> **Note:** This feature is BUGGED. It can activate the button with unpleasant behavior.
 
+- **Tab center reborn support** `gnomeTheme.extensions.tabCenterReborn`
+
+	Enable the vertical tab trough the extension : [Tab Center Reborn](https://addons.mozilla.org/en-US/firefox/addon/tabcenter-reborn/).
+
+	> **Note:** You also need to copy the contents of the file `configuration/extensions/tab-center-reborn.css` into the settings page of Tabcenter-reborn..
+	
 ## Known bugs
 
 ### CSD have sharp corners

configuration/extensions/tab-center-reborn.css

@@ -0,0 +1,264 @@
+/* CSS to add in tab center reborn Settings pages */
+
+:root {
+    --tab-separator: transparent;
+    --tab-selected-line: transparent;
+    --tablist-separator: #cccccc;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #303030;
+        --icons: rgb(251,251,254);
+        --tab-separator: transparent;
+        --tab-active-background: rgb(62,62,62);
+        --tab-active-text: rgb(251,251,254);
+        --tab-text: #fbfbfe;
+        --toolbar-background: rgb(43,42,51);
+        --toolbar-text: rgb(251, 251, 254);
+        --input-background: rgb(28,27,34);
+        --input-border: transparent;
+        --input-background-focus: rgb(66,65,77);
+        --input-selected-text: rgb(251,251,254);
+        --input-text: rgb(251,251,254);
+        --input-text-focus: rgb(251,251,254);
+        --identity-color-toolbar: rgb(251,251,254);
+        --tablist-separator: #333333;
+    }
+}
+/* fix autoscrolling bug when middle clicking */
+:root,
+body {
+    overflow: hidden;
+}
+
+/* Move topmenu to bottom */
+#topmenu {
+    order: 2;
+    background: transparent;
+    border: none;
+}
+
+#newtab {
+    margin-left: 6px;
+}
+
+#settings {
+    margin-right: 2px;
+}
+
+/* Hide filterbox & settings icon */
+#filterbox-icon,
+#filterbox-input,
+#settings {
+    display: none;
+}
+
+#tablist-wrapper {
+    height: auto;
+    margin-inline: 6px;
+    /* adds margin above tabs to make the spacing even */
+    margin-top: 5px;
+}
+
+/* fix glitch with spacing in-between pinned tabs */
+#pinnedtablist:not(.compact) {
+    display: flex;
+    flex-direction: column;
+}
+
+#tablist-wrapper::after {
+    content: "";
+    margin: 2px 0;
+    border: 1px solid var(--tablist-separator);
+}
+
+#newtab {
+    flex-grow: 1;
+    margin-right: 2px;
+    margin-left: 2px;
+    padding-left: 9px;
+    min-width: 36px;
+    width: 100%;
+}
+
+.tab,
+.tab.active {
+    border-radius: 4px;
+    border-bottom: none !important;
+    margin: 1px 0;
+}
+
+#pinnedtablist:not(.compact) .tab,
+#tablist .tab {
+    padding: 0;
+}
+
+#newtab::after {
+    content: "New tab";
+    margin-left: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+#newtab-icon {
+    min-width: 16px;
+}
+
+
+/* the @media rule only allows these settings apply when the sidebar is expanded */
+@media (min-width: 49px) {
+    /* Move close button to left side */
+    /*.tab-close {
+        left: 0;
+        margin-left: 3px;
+    }*/
+
+    /* Fix title gradient */
+    /*#tablist .tab:hover > .tab-title-wrapper {
+        mask-image: linear-gradient(to left, transparent 0, black 2em);
+    }*/
+
+    /* Move tab text to right when hovering to accomodate for the close button */
+    /*#tablist .tab:hover > .tab-title-wrapper {
+        margin-left: 28px;
+        transition: all 0.2s ease;
+    }*/
+
+    /* Move favicon to right when hovering to accomodate for the close button */
+    /*#tablist .tab:hover > .tab-meta-image {
+        padding-left: 25px;
+        transition: all 0.2s ease;
+    }*/
+}
+
+
+/*** Move container indicators to left ***/
+#tablist-wrapper {
+    margin-left: 0px;
+    padding-left: 6px;
+}
+#tablist,
+#pinnedtablist:not(.compact) {
+    margin-left: -6px;
+    padding-left: 6px;
+}
+.tab {
+    overflow: visible;
+}
+#tablist .tab[data-identity-color] .tab-context,
+#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context {
+    box-shadow: none !important;
+}
+#tablist .tab[data-identity-color] .tab-context::before,
+#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context::before {
+    content: "";
+    position: absolute;
+    top: 6px;
+    left: -6px;
+    bottom: 6px;
+    width: 3px;
+    border-radius: 0 5px 5px 0;
+    background: var(--identity-color);
+    transition: inset .1s;
+}
+#tablist .tab.active[data-identity-color] .tab-context::before,
+#pinnedtablist:not(.compact) .tab.active[data-identity-color] .tab-context::before {
+    top: 1px;
+    bottom: 1px;
+}
+
+/* center favicons within the tab */
+#tablist-wrapper.shrinked>:not(#pinnedtablist.compact) .tab-meta-image {
+    margin-left: 6px !important;
+}
+
+/* hide certain items when collapsed */
+@media (max-width: 64px) {
+    /* using 64px minimum width to give the tab favicons more room during the transition */
+    .tab-close,
+    .tab-pin {
+        visibility: collapse !important;
+    }
+
+    /* hide scrollbar when sidebar is collapsed */
+    #tablist {
+        scrollbar-width: none;
+    }
+}
+
+@media (max-width: 48px) {
+    #settings-icon,
+    #tablist-wrapper .tab-title-wrapper,
+    #newtab::after,
+    #settings {
+        visibility: hidden !important;
+    }
+}
+
+
+/*** Better support for non-compact mode ***/
+#tablist-wrapper:not(.shrinked) .tab-meta-image {
+    display: flex;
+    align-items: center;
+
+    width: 58px;
+    border: 0 !important;
+    margin-right: 4px;
+    border-radius: inherit;
+    background-position: center;
+    min-width: 0px !important;
+    background-color: var(--toolbar-background) !important;
+    transition: margin .4s;
+}
+#tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
+    transition: margin .1s;
+    z-index: 2;
+}
+#tablist-wrapper:not(.shrinked) .tab-icon-overlay {
+    top: unset !important;
+    bottom: 8px;
+    left: 25px !important;
+    z-index: 4;
+    transition: inset .1s;
+}
+
+/* If you want to disable the website previews,
+comment out the @media line below and its closing bracket */
+@media (max-width: 49px) {
+    #tablist-wrapper:not(.shrinked) .tab-meta-image {
+        background-color: inherit !important;
+        border-width: 0 !important;
+        box-shadow: none !important;
+        height: 0 !important;
+        width: 26px;
+        margin-right: 0px;
+    }
+    #tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
+        background-color: transparent !important;
+        margin-top: 0 !important;
+        margin-left: 3px !important;
+        box-shadow: none !important;
+    }
+    #tablist-wrapper:not(.shrinked) .tab-icon-overlay {
+        bottom: 12px;
+        left: 16px !important;
+    }
+}
+
+/* middle click newtab workaround */
+
+/* allows the #spacer element to take up more space */
+#spacer {
+    min-height: 100vh;
+}
+
+/* moves the new tab button to the original position */
+#tablist-wrapper {
+    margin-bottom: -100vh;
+}
+
+/* moves the new tab button separator to the original position */
+#tablist-wrapper::after {
+    transform: translateY(-100vh);
+}

theme/extensions/tab-center-reborn.css

@@ -0,0 +1,119 @@
+@supports -moz-bool-pref("gnomeTheme.extensions.tabCenterReborn") {
+    :root {
+        --delay: 0s;
+        --transition-time: 0.2s;
+        --positionX1: 48px;
+        --positionX2: absolute;
+    }
+
+	#tabbrowser-tabs {
+		display: none !important;
+	}
+
+    #browser {
+        position: relative;
+    }
+
+    #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 {
+        min-width: 48px !important;
+        max-width: 48px !important;
+    }
+
+    #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
+        display: block;
+        position: var(--positionX2);
+        box-sizing: content-box;
+        min-width: 48px;
+        max-width: 48px;
+        overflow: hidden;
+        border-right: 1px solid var(--sidebar-border-color);
+        z-index: 1;
+        top: 0;
+        bottom: 0;
+    }
+
+    #main-window[inFullscreen] #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
+        min-width: 1px;
+        max-width: 1px;
+    }
+
+    #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);
+    }
+
+    #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][inDOMFullscreen] #appcontent {
+        margin-left: 0;
+    }
+
+    #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;
+        }
+    }
+}

theme/gnome-theme.css

@@ -20,6 +20,9 @@
 
 @import "parts/remove-white-flash.css";
 
+/* Extensions support */
+@import "extensions/tab-center-reborn.css";
+
 @import "colors/light.css";
 @import "colors/dark.css";