HELP: combined_tabs_and_main_toolbars.css

[EstherMoellman]

Hi there!

I'm finishing my brand new customized model, which has as dorsal-spine your combined_tabs_and_main_toolbars.css.

And if doable, please I would like to test the following experiments:

1. Keep one unpinned tab always visible, even when it is not selected (current behavior: unpinned tabs always are hidden when not-selected).

2. For the unpinned tab mentioned above, I would like to incorporate the #tabbrowser-arrowscrollbox (right and left) allowing to scroll between unpinned tabs.

3. Same "1)" and "2)" above, but with 3 unpinned tabs.

As usual, before asking I tried by myself, and I had big progress. But literally I destroyed your code (due to my CSS ignorance). And I'm sure you always have a much better way to make what I made, but without destroying your code. So please, any help will be great!

The logic behind my requests has to do with the fact that now there are not many visible tabs, so there is free space to be used. And adding 3 tabs + #tabbrowser-arrowscrollbox only occupies just a few centimeters. In return, these 3 tabs + #tabbrowser-arrowscrollbox may add a lot of functionality / productivity.

Thanks a lot in advance and big hug! : )

PS: The use of combined_tabs_and_main_toolbars.css definitely is not for everybody. It's for a particular user profile, like me (needing to manage more than 3000 tabs under more than 50 tab-groups). And it took me a while to get habituated to this combined_tabs_and_main_toolbars.css code. But I confess you that I'm starting to be addicted, after training, it's amazing what this code can do in terms of functionality/productivity (on the right-side pop-up, vertically I can put 300% more tabs than in one horizontal row tabbar). And it keeps the visual totally clean (no visual distractions). However, I terrible miss the button autohide function for the tabs pop-up. I hope you will build the JS button. If not possible, I hope the CSS "sidebar #statechecker" will work on this tab pop-up.

[MrOtherGuy]

Keep one unpinned tab always visible, even when it is not selected (current behavior: unpinned tabs always are hidden when not-selected).

Unfortunately that cannot be done in sane manner. Well, in my opinion the only sane behavior would be to show the last selected unpinned tab but this is impossible. What you could do is to show the first unpinned tab (or any tab with a specific index).

Not sure about the scrollbox things at the moment. However, I do find it a bit weird that this is the style you would use to manage a great number of tabs. That seems very backwards and even the normal tab strip of Firefox should do a much better job, let alone tree style tabs.

The target audience is those who have just a few tabs. Scrollbox should be doable though I expect it would have issues that can't be resolved (likely related to scroll arrows not becoming hidden when there isn't anything to scroll), but I don't really want to add it to the style since its very purpose is to minimize the space that tabs are going to take.

If not possible, I hope the CSS "sidebar #statechecker" will work on this tab pop-up.

It won't work. The two scenarios are pretty different. I admit that it does look like they are similar but they really are not.

[EstherMoellman]

@MrOtherGuy thanks for your answer! I understood your replay. Below I'm going to make new questions and comments, but if your answer is "not possible", then please feel free to close this issue. However firstly, I want to make clear that my request is not a change but an addition to my logic of using your combined_tabs_and_main_toolbars.css code as an alternative for vertical tabs on right-side. I understand that for you this code is meant for users having few tabs. But for me is the opposite, because this your code for me always was an alternative for vertical tabs on right-side.

Unfortunately that cannot be done in sane manner. Well, in my opinion the only sane behavior would be to show the last selected unpinned tab but this is impossible. What you could do is to show the first unpinned tab (or any tab with a specific index).

I would like to have 3 unpinned tabs, always visible, even when not selected. If possible please, one of these 3 tabs always is going to be the last accessed unpinned tab (let's call it "tab#1" in TabBar). The other 2 tabs in TabBar simply are going to be the previous/posterior ones of the "tab#1" inside the tab pop-up. For example, let's said that the "tab#1" is tab number 20 inside the tab pop-up. Then in this example, "tab#2" and "tab#3" in the TabBar, are going to be tab 18 and 19 or 21 and 22 or 19 and 21 inside the tab pop-up. In the TabBar I also would like to have the "scrollbox thing" to navigate among all unpinned tabs (not just 3 tabs). And as I said above, for me these "3 tabs + scrollbox thing" at TabBar are meant to work together with the tab pop-up, as a vertical tab right-side alternative. These "3 tabs + scrollbox thing" are a complement of the tab pop-up, meant to help mainly with tabs (for example) using links. Normally when I use a tab and I click a link, the current behavior puts the new tab inside the tab pop-up. So, if I want to read this link/tab, I need to go inside the tab pop-up. Doing that is not the end of the world, but it takes me a couple of mouse-clicks and some mind distraction. It would be much more natural for me, if I can have at least 3 unpinned tabs always shown. So, if I click a link, the opened tab always will be visible, with direct access (no tab pop-up) in the TabBar. PS: I don't want to change the "open link behavior". It's fine to open links always in new tabs (and in background). I just want the new opened tab (selected or not) visible in the TabBar and not inside the tab pop-up. I hope you can rethink and give again a second thought about this, finding an alternative for my request. If you can do that, then it'll be very functional and useful for my day-to-day work/studies. Important to say that any solution doesn't need to be "global" (for customized universal models). This request is specific for my personal use.

Not sure about the scrollbox things at the moment. However, I do find it a bit weird that this is the style you would use to manage a great number of tabs. That seems very backwards and even the normal tab strip of Firefox should do a much better job, let alone tree style tabs.

I believe my clarifications above already explained my intentions. Currently I'm using:

• Tabs pop-up on the right-side (capable to show almost 300% more tabs than one horizontal tab row)
• Now I'm requesting you the "3 tabs + scrollbox thing" to deal only with those tabs that I need quick and direct (opened links etc) access, and I don't wan to go inside the tab pop-up.
• I'm using TabsToBookmarkGroups, an amazing tab-manager add-on, which among other functions also converts tabs in bookmarks. I have its icon-button in the right-side, and this button allows me to jump between tab-groups. But the great thing here is that I also have all my tab-bookmarks (created by TabsToBookmarkGroups) merged with my MenuBar (appearing on "alt-x"). And this tab-bookmarks folder also is in the rightmost-side-corner.
• I'm training myself to use keyboard-shortcuts with tabs. So you can see that I managed to have everything on the right side! And this is tremendously useful to me, they're 3 different ways for dealing with lot of tabs. Everything works together as an alternative for vertical tabs on the right-side.

If not possible, I hope the CSS "sidebar #statechecker" will work on this tab pop-up.

It won't work. The two scenarios are pretty different. I admit that it does look like they are similar but they really are not.

I understand. But in order to have instant access to the tab pop-up, I need some hovering function or similar (to open the tab pop-up without needing mouse-click). I don't care if it can be done with JS or CSS. I also don't care if it is a button or a hovered space etc. Is it possible to build something for opening tab pop-up on mouse-hovering?

Once again zillion of thanks in advance! : )

[MrOtherGuy]

one of these 3 tabs always is going to be the last accessed unpinned tab

Yes, this is what is impossible. The "identity" of last accessed tab is simply not stored anywhere in the UI.

However, you can just replace the last line with #TabsToolbar{ max-width: 300px } to set some maximum width for tabs container. It would then basically behave just like tabs toolbar in a super narrow window would.

But in order to have instant access to the tab pop-up, I need some hovering function or similar (to open the tab pop-up without needing mouse-click). I don't care if it can be done with JS or CSS.

It will definitely not be possible with CSS. As such, you might want to bring that request to somewhere more fitting and to someone more capable than me. This is a CSS repository.

[EstherMoellman]

... very sad to heard about the final "no go" for the tab pop-up open function. But in the other hand, your "#TabsToolbar{ max-width: 300px }" solved exactly what I wanted with regards to the "3 tabs + scrollbox thing". Thank you a lot! I consider the issue solved, so please, feel free to close it.

As final question, I just take the opportunity to ask something else, but indirectly about same combined_tabs_and_main_toolbars.cs code: I was capable to customize margins/paddings/height/weight of the tab pop-up (#allTabsMenu). But I'm having difficulties to customize different tab states inside this tab pop up. For example, I would like:

• Tab-background-color of a loaded tab.
• Tab-background-color of a loading tab.
• Tab-background-color of an unloaded tab.
• Tab-background-color of a selected tab.
• Close-button on tab hovering.

Is that doable? In brief, I would like to see inside tab pop-up, similar behavior I already have for my tabs on TabBar (here is my small pastebin for tabs).

Thanks once again!

[MrOtherGuy]

These should work as selectors:

.all-tabs-button[busy]
.all-tabs-button[selected]

loaded is basically always except if its not [busy] or unloaded, however I don't think items in all-tabs-menu have any knowledge if the linked tab is unloaded or not.

[EstherMoellman]

Sorry, I couldn't make work your two selectors. But after lot of testings, I was capable to make work just the following selectors:

/* Loading tab */ .all-tabs-item > .all-tabs-button[busy]:not([selected]) { background-color: lime !important }

/* Selected tab */ .all-tabs-item[selected="true"] > .all-tabs-button { background-color: red !important }

Please, if possible, I still would like your help with the last two I need:

• Tab-background-color of a loaded tab and not selected.
• Close-button on tab hovering (is it possible?)

[MrOtherGuy]

You can just set the background-color for all items with .all-tabs-item{ background-color: red } (not sure why .all-tabs-button doesn't work for you - it works fine for me but whatever). And then specifically for the selected tab and loading tabs with the css that you posted.

But no, you will totally need JS if you want to create close buttons there. Remember, those items are not some view of tabs, they are just buttons that are sort-of linked to tabs. And that link only implements some of the interactions, such as right-click opens the same menu as right-clicking a tab.

[EstherMoellman]

Sorry to bother you, unfortunately I still can't make work: "tab-background-color of a loaded tab and not selected".

For bad or for good, this is my best until now:

/* Untouched */ .all-tabs-item { background-color: yellow !important }

/* Still loading */ .all-tabs-item > .all-tabs-button[busy]:not([selected]) { background-color: lime !important }

/* Selected */ .all-tabs-item[selected="true"] { background-color: red !important }

This basically makes all backgrounds yellow, until tab is loading (lime) or selected (red). And I tried tons of combinations, but I can't make work the last tab status I need, when a tab already loaded but it's not selected.

With regards to your selectors (.all-tabs-button[busy] and .all-tabs-button[selected]), I wasn't clear, my apologies, I tried to said that I couldn't make work them for the tab status I needed, and .all-tabs-button[selected]) I couldn't make work in any case or status.

[MrOtherGuy]

Ok, then I have no clue what "loaded tab" even means? I thought it just meant a tab that isn't loading.

Like I said before, all-tabs list does not know if a tab is "pending" (ie. not restored yet during session restore) and probably does not know about some other states either.