Using Sidebery instead of FF-ULTIMA Vertical Tabs #9

asadmash · 2024-03-30T03:03:18Z

asadmash
Mar 30, 2024

I love your theme! It's very well-designed.

I currently use Sidebery for managing my tabs, but it utilizes the sidebar area. Your v2 tabs extension also uses the sidebar, creating a conflict. Ideally, I'd like to use Sidebery in place of your vertical tabs functionality.

Is it possible to configure Sidebery to work within the tab bar area that your extension creates? This would allow me to combine the benefits of your theme with Sidebery's tab management features.

soulhotel · 2024-03-30T03:28:00Z

soulhotel
Mar 30, 2024
Maintainer

Unfortunately its not possible. The Sidebery DOM IS the sidebar, and firefox only has one sidebar.

Extensions in firefox are really limited in that, "view in two tab" extensions require the sidebar to sit their content (web frame) in. the other option is to view the extension through a popup, and even that is limited in size (i think 800x600). And on top of that, the popups are closed when active window status changes.

Thats why I made the theme in the first place, I had to sacrifice using sidebery which i now use for bookmark management, so that i can keep the sidebar and use it for split screening also.

Ive even considered moving over to Floorp for these reasons, the developer there is doing an amazing job.

1 reply

asadmash Mar 30, 2024
Author

Thanks for your reply! It would be fantastic if there was a way to use both extensions simultaneously. Sidebery offers so many valuable features, and as far as I know, there aren't any great built-in tab splitting features or extensions in Firefox based browsers. While Floop's tab split seems like a good option, it doesn't work well with Sidebery. Currently, I have to rely on the multi-window functionality of Windows to view tabs side-by-side.

I attempted to modify your configuration slightly to match my existing setup, and everything worked perfectly except for two issues:

Border around Sidebery:  The rounded border appears not only around websites but also around the right side of Sidebery, where my pinned tabs and panels reside. When I hover over this area, it expands to display all my tabs. How can I remove the border specifically on the left and right sides of Sidebery?

Missing Hover Transition:  In my current configuration, there's no transition effect when I hover over the Sidebery area to expand it. Could you please advise on how to enable a transition effect for this hover interaction?

Your suggestions for resolving these issues would be greatly appreciated!

here is my config:

CODE INSIDE (collapsed by SoulHotel for easier read)

`/* hide tabs */ .tabbrowser-tab { display: none; }

#tabs-newtab-button {
display: none;
}

.titlebar-spacer {
display: none !important;
}

/* hides the native tabs */
#TabsToolbar {
overflow: hidden;
}

/* leaves space for the window buttons */
#titlebar {
margin-bottom: -32px !important;
}

#nav-bar {
margin-top: -5px;
margin-right: 138px;
margin-bottom: 0px;
}

/added from here in ff-ultima/
#sidebar-header {
display: none;
}

#sidebar-box {
overflow: hidden;
height: calc(100% + 6px);
position: absolute;
right: 0px;
/* max-width: 30em !important; /
max-width: 32em !important;
/ max-width: 35em !important; */
display: block;
transition: all 450ms ease-in-out;
padding-bottom: 46px;
width: 100% !important;
}

#sidebar-box:hover {
padding-bottom: 46px;
position: absolute;
z-index: 1;
}

#sidebar {
/* width: calc(359px) !important; /
width: calc(384px) !important;
/ width: calc(420px) !important; */
max-width: 100vw !important;
height: 100%;
transition: width 150ms ease-in-out;
padding-right: 0px;
}

#sidebar:hover {
max-width: 100% !important;
}

#appcontent {
margin-right: 31px;
}

@media(-moz-platform: windows) {[sizemode=fullscreen] #appcontent {margin-right: 0px !important} }
`

soulhotel · 2024-03-30T18:49:27Z

soulhotel
Mar 30, 2024
Maintainer

Alright It took a while to comprehend what you were trying to accomplish SO... I assume you simply want to get rid of the tabs, and keep using Sidebery for tabs. But now you want to autohide the Sidebar.

The best way to do that with my theme would be to rewrite position-verttab.css completely. Ive rewritten it for you, including autohiding the sidebar, I think i learned how to handle the autohiding from MrOtherGuy so just follow the logic:

Replace everything in position-verttab.css with the code below, you can style the sidebar, margins, border, after.
You can set the width (when hovered) to be 50% of the screen or 100% of the screen using 50vw or 100vw, etc.
style sidebery to fit the theme, center the icons with tiny margins-left, and fix colors, etc
and to get rid of those buttons on the side of firefox, just as you normally would, go to customize toolbar page and drag them out.
you can choose to display none the Side Bar Header BUT you will lose the ability to switch the sidebar from left to right. you may still want to do it though, its up to you.
see functionality in the GIFs and the code is below 👇

50vw version

youll have to style sidebery

(CLICK ME) FULL CODE IS HERE

/*--tabs gone--*/

:root:not([customizing],[chromehidden~="menubar"]){
--uc-vertical-tabs-width: 0px;
--uc-vertical-tabs-width-revert: 0px;
--uc-navbar-height: 40px; /*-- define your desired height --*/
--uc-collapsed-tabs-width: 0px;}


/*--adjust browser content spacing, margin.--*/

#tab-notification-deck, .global-notificationbox, #main-window:not([inDOMFullscreen]) #browser
{ margin-left: 0 !important; }


/*--adjust spacing, margins for everything--*/

:root, body, * {

/*bookmarkbar height*/
--uc-bookbar-height: 22px;

/*rounded corners*/
--uc-all-border-radius: 10px;

--uc-all-margins: 3px 6px 6px 6px; 

/*--sidebar margins--*/
--uc-sb-margin-leftside: 3px 3px 6px 6px;
--uc-sb-margin-rightside: 3px 6px 6px 0px;
}


/*-------------------------------------------------------------------------------*/
/*--adjustments. dont display none title bar, just remove siblings individually--*/

#titlebar
{will-change: none !important;transition: none !important;opacity: 1 !important;z-index: 1 !important;}

#alltabs-button, #new-tab-button, #tabs-newtab-button
{display: none !important;}

#tabbrowser-arrowscrollbox * /*--<--should cover everything but we'll do more below--*/
{display: none !important; width: 0 !important;}

tabbrowser-arrowscrollbox-periphery,
#tabbrowser-arrowscrollbox {&::part(scrollbutton-up), &::part(scrollbutton-down)
{display: none !important; width: 0 !important;}}

:root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser tabs, 
:root[privatebrowsingmode]:not([firefoxviewhidden]) :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) + #tabbrowser-tabs
{ border-inline-start: 0px; padding-inline-start: 0px; margin-inline-start: 0px; }

/*------------------------------------------------------------------------------*/

/*using the toolbar bg color will support themes, and dark/light modes*/
#sidebar, #sidebar-header
{ background-color: var(--toolbar-bgcolor) !important; }

/*--autohide sidebar--*/

/*--remove header--*/
/*--although it may be wiser to style the header instead,
so you can keep the ability to switch from left to right--*/

/*#sidebar-header { display: none !important; }*/
#sidebar-splitter { display:none !important; }

/*--use variables. one for collapsed width, one for hover width--*/
/*--sidebar is a sibling to the browser content, no need to make it absolute--*/

#sidebar-box {
--uc-sidebar-width: 43px; /*width when not in view*/
--uc-sidebar-hover-width: 230px; /*width when in full view*/
--uc-autohide-sidebar-delay: 300ms;
--uc-autohide-transition-duration: 80ms;
--uc-autohide-transition-type: linear;
position: relative;
min-width: var(--uc-sidebar-width) !important;
width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-width) !important;
z-index:1;}

#sidebar-box[positionend] { direction: rtl }
#sidebar-box[positionend] > * { direction: ltr }

#sidebar-box[positionend]:-moz-locale-dir(rtl) { direction: ltr }
#sidebar-box[positionend]:-moz-locale-dir(rtl) > * { direction: rtl }

/*--on full screen collapse to 1px NOT 0--*/

#main-window[sizemode="fullscreen"] #sidebar-box { --uc-sidebar-width: 1px; }
#main-window[sizemode="fullscreen"] #sidebar-box { margin-inline:0px !important; }
#main-window[sizemode="fullscreen"] #sidebar { margin-inline:0px !important; }

#sidebar-header
{ overflow: hidden; padding-inline: 0 !important; }

#sidebar-header::before,
#sidebar-header::after
{ content: ""; display: flex; padding-left: 1px; }

#sidebar-header, #sidebar {
transition:
min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
min-width: var(--uc-sidebar-width) !important;
will-change: min-width;
}
  
#sidebar-box:hover > #sidebar-header, #sidebar-box:hover > #sidebar {
min-width: var(--uc-sidebar-hover-width) !important;
transition-delay: 0ms !important;}

.sidebar-panel {
background-color: transparent !important;
color: var(--newtab-text-primary-color) !important;}

.sidebar-panel #search-box {
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important; 
  color: inherit !important;}

/* Visible Divider for the sidebar to window I set it to 0px */

#sidebar, #sidebar-header{
border-inline: 1px solid rgba(0,0,0,0);border-inline-width: 0px 0px;}
#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{ border-inline-width: 1px 0px;}

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
inset-inline: auto 0px !important;}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
margin-inline: 0px !important;border-left-style: solid !important; }

(CLICK ME) example of squaring up the sidebar:


#sidebar-header {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
#sidebar {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#sidebar-box { border-radius: 0px !important; }

1 reply

asadmash Mar 31, 2024
Author

I truly appreciate your continued assistance! The integration is working fantastically after I made adjustments based on your guidance. I've achieved the desired functionality, but there's one critical issue that remains.

When I hover over the sidebar to reveal my tabs, the sidebar itself expands as expected. However, the sidebox housing my pinned tabs, panels, and settings exhibits unexpected behavior (refer to video 2). During the hover interaction, the sidebox also unexpectedly moves right to left, then jumps back to the right to its original position. Ideally, I'd like this sidebox to remain fixed in place, similar to its previous behavior (see video 1).

I've dedicated some time to troubleshooting this myself, but any modifications I've attempted have resulted in unintended consequences. Your expertise would be invaluable in resolving this final hurdle and ensuring the pinned tab sidebox stays put during the hover interaction.

before(video1)

video 1

after(video2)

video 2

soulhotel · 2024-03-31T02:12:07Z

soulhotel
Mar 31, 2024
Maintainer

I played around debugging sidebery, filtered some elements to see what was causing the jumping behavior

its specific to tabs that are pinned on the right* side, doesn't happen when pinned left or top of tabs, so you may have to either settle on having them top or left, or spend some time with it in remote debugger.

this is a sidebery issue with how they handle their pinned tabs transitions

2 replies

soulhotel Mar 31, 2024
Maintainer

asadmash Mar 31, 2024
Author

moved both pinned tabs and panels from right to left. still, there is something jumps right to left and then goes back right when hovering the sidebox. i am really bad at understanding those css selectors. your video looks ok, don't know what going wrong with my setup. my previous code was ok. but there was no transition effect.

(https://drive.google.com/file/d/1N_BIGUkLct4shoSf7k_Aloi27fRQ2b1N/view?usp=sharing)

i think something wrong with this section

`
#sidebar-box {
/width when not in view 43px/
--uc-sidebar-width: 30px;/width when not in view 43px/
--uc-sidebar-hover-width: 384px; /width when in full view 230px/
--uc-autohide-sidebar-delay: 300ms;
--uc-autohide-transition-duration: 80ms;
--uc-autohide-transition-type: linear;
position: relative;

  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;}
  
  #sidebar-box[positionend] { direction: rtl }
  #sidebar-box[positionend] > * { direction: ltr }
  
  #sidebar-box[positionend]:-moz-locale-dir(rtl) { direction: ltr }
  #sidebar-box[positionend]:-moz-locale-dir(rtl) > * { direction: rtl }
  
  /*--on full screen collapse to 1px NOT 0--*/
  
  #main-window[sizemode="fullscreen"] #sidebar-box { --uc-sidebar-width: 1px; }
  #main-window[sizemode="fullscreen"] #sidebar-box { margin-inline:0px !important; }
  #main-window[sizemode="fullscreen"] #sidebar { margin-inline:0px !important; }
  
  #sidebar-header
  { overflow: hidden; padding-inline: 0 !important; }
  
  #sidebar-header::before,
  #sidebar-header::after
  { content: ""; display: flex; padding-left: 1px; }
  
  #sidebar-header, #sidebar {
  transition:
  min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
  }
    
  #sidebar-box:hover > #sidebar-header, #sidebar-box:hover > #sidebar {
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;}

`

i replace those code in your position-verttab.css with my previous code

` #sidebar-header {
display: none;
}

#sidebar-box {
overflow: hidden;
height: calc(100% + 6px);
position: absolute;
right: 0px;
/* max-width: 30em !important; /
max-width: 32em !important;
/ max-width: 35em !important; */
display: block;
transition: all 450ms ease-in-out;
padding-bottom: 46px;
width: 100% !important;
}

#sidebar-box:hover {
padding-bottom: 46px;
position: absolute;
z-index: 1;
}

#sidebar {
/* width: calc(359px) !important; /
width: calc(384px) !important;
/ width: calc(420px) !important; */
max-width: 100vw !important;
height: 100%;
transition: width 150ms ease-in-out;
padding-right: 0px;
}

#sidebar:hover {
max-width: 100% !important;
}

#appcontent {
margin-right: 31px;
}

@media(-moz-platform: windows) {[sizemode=fullscreen] #appcontent {margin-right: 0px !important} }`

and everthing works well. but the problem with my code is transition effect not works😓

soulhotel · 2024-03-31T03:45:44Z

soulhotel
Mar 31, 2024
Maintainer

well you have a transition targetting the sidebar-box*
but try to play out the transition on the sidebar*
if you want to transition only the sidebar ignoring the box then:

#sidebar{
width... --uc-a-variable
min-width... --uc-a-variable
max-width... --uc-a-variable
transition... 
will-change: min-width;
}

use a simple format for transition: min-width, duration, type, delay

and when you establish the transition youre establishing the change (min-width)

#sidebar:hover {
min-width: var(--uc-another-variable) !important;
transition-delay: 0ms !important;
}

Using variables will let you target widths and change them later easily, its for your benefit, you can create variables for numbers, colors, you just give it a --title, and use them like i have it above ^ and below v

:root, * {
--uc-a-variable: 35px;
--uc-another-variable: 300px;
}

Although ive given "fixes" in this comment, I still see a lot of flaws in this approach. Im not an expert at all, Ive just spent a lot of time trying to fix my own mistakes and learning.

1 reply

asadmash Mar 31, 2024
Author

I'm incredibly grateful for your help! Your detailed explanations and suggestions were very insightful, and I'll definitely be implementing them to fix the sidebox issue. Thanks again for your time and expertise!

soulhotel · 2024-03-31T03:51:01Z

soulhotel
Mar 31, 2024
Maintainer

also you can definitely just remove the transition lines from the very FIRST code I gave you, if all else fails.
hovering will become sensitive, but the tabs wont jump anymore.

1 reply

asadmash Mar 31, 2024
Author

Thanks a lot!

asadmash · 2024-03-31T08:36:59Z

asadmash
Mar 31, 2024
Author

hey @soulhotel, Just figured something out. The border-radius doesn't work on many websites (e.g., react.dev, tailwindcss.com)..

0 replies

soulhotel · 2024-04-02T20:35:20Z

soulhotel
Apr 2, 2024
Maintainer

fixed two days ago #10 🫡

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using Sidebery instead of FF-ULTIMA Vertical Tabs #9

{{title}}

Replies: 7 comments 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Using Sidebery instead of FF-ULTIMA Vertical Tabs #9

asadmash Mar 30, 2024

Replies: 7 comments · 6 replies

soulhotel Mar 30, 2024 Maintainer

asadmash Mar 30, 2024 Author

soulhotel Mar 30, 2024 Maintainer

asadmash Mar 31, 2024 Author

soulhotel Mar 31, 2024 Maintainer

soulhotel Mar 31, 2024 Maintainer

asadmash Mar 31, 2024 Author

soulhotel Mar 31, 2024 Maintainer

asadmash Mar 31, 2024 Author

soulhotel Mar 31, 2024 Maintainer

asadmash Mar 31, 2024 Author

asadmash Mar 31, 2024 Author

soulhotel Apr 2, 2024 Maintainer

asadmash
Mar 30, 2024

Replies: 7 comments 6 replies

soulhotel
Mar 30, 2024
Maintainer

asadmash Mar 30, 2024
Author

soulhotel
Mar 30, 2024
Maintainer

asadmash Mar 31, 2024
Author

soulhotel
Mar 31, 2024
Maintainer

soulhotel Mar 31, 2024
Maintainer

asadmash Mar 31, 2024
Author

soulhotel
Mar 31, 2024
Maintainer

asadmash Mar 31, 2024
Author

soulhotel
Mar 31, 2024
Maintainer

asadmash Mar 31, 2024
Author

asadmash
Mar 31, 2024
Author

soulhotel
Apr 2, 2024
Maintainer