Collapsible vertical tab bar

[migueravila]

Collapsible vertical tab bar

[migueravila]

@Kabouik I'm so sorry, I've just made a fresh install some days ago and I don't have that code anymore ☹️

[migueravila]

Wow, that video was impressive. I'll make some tests with your code I love it the idea of hide almost everything. If there aren't problems I'll tell you lately!

[Kabouik]

Awesome! Please do ping me even if you think it's too complicated.

Again, you'll see that the code is partly broken now with the latest Firefox (especially the address bar on Ctrl+L, but also the tab bar to some extent), but if you can download Firefox 74.0, it still works as expected and you could see how the address bar was working initially:

Address and tool bars hidden and tab bar collapsed

Compared to what is shown in the video with a more recent Firefox version, you can see here that all favicons for inactive tabs are hidden, just the active one is shown. Probably just some padding/margin things that are not working anymore in my code, but that shouldn't be too hard to fix, I just didn't investigate yet.

Address and tool bars shown
This is done with either Ctrl+L or by hovering the top pixels of Firefox after the mouse was outside (it doesn't trigger the bar if the mouse was already inside the window, to allow clicking on content at the top of the window)

This however is more broken with new Firefox versions.

Tab bar expanded

[migueravila]

@Kabouik Hey! I've finished checking this alongside my code and I can say that It could merge very well, I like having all my browser showing me all page I'm in. With some tweaks in the colors, opacity and some rules for the position It could work very well together.

I used the "WithURLBar.css" file and I got this result:

I bet that there's some conflict in the opacity but nothing that can't be handle, also the position is more in the right but that's because of the icons and the calc() functions. It looks very impressive. I'll try to make it work for a "Really Really Simple version"

[Kabouik]

Awesome! Glad you got it working (and that was fast) and I'm happy that you like the idea. I'm not a programmer, my CSS tweaks were probably very dirty, but at least at some point it was working. I would be more than happy if someone more experienced that me in this stuff could put it up in a cleaner way and integrate it in a project like SimplerentFox!

Can you show how tabs are working in this test version? On mine, the tab bar collapses but not 100%, so that the current favicon is still visible, while all other favicons are pushed to the right to keep the tab bar as clean as possible (Edit: note that there's just a few pixels of inactive tabs' background showing, so that one can guess how many other tabs are open, and background colours correspond to domains so it also helps directly targeting the right area with the mouse when hovering the collapsed bar to switch to another tab before the bar is expanded¹). This moves all the content to the right and leaves a black bar, but perhaps it could be improved by making the current favicon show on top of the content, and move the content to the left; I don't know. Other than that, the active favicon shows in colours, while others are greyscale.

Also, I remember I had some trouble with the bookmark bar. It was kinda working but there were some quircks, like a couple empty pixels I didn't manage to get rid of, or a translation that was not as good as when no bookmark bar is shown. Perhaps you saw it in the code. This is what it looks like when the bookmark bar is enabled (and it only shows up together with the address bar, on Ctrl+L or hover movement from outside):

¹ Picture showing the active tab vs inactive tabs, note the few coloured pixels on inactive tabs to hint their domain. Colours are too dark to really see here but it's configurable with the TST Colored Tabs addon:

[migueravila]

I'm so sorry for the late answer, was working in some other projects But I thin I got it working! And looks awesome is an incredible way of using Firefox. I also had the same problems as you and a little different looking of others. I'll add some pictures at the bottom. Even using the code along with mine It works pretty well and I see that the real problem can be with the "New Bar" Added by the add-on. Also the bookmarks bar is a little bit different positioned in mine. Had some problems because It was over my URLBar but with some changes It got working well.

Talking about the right bar, I didn't got to hide it, because if move it (Making its width 0 or translating it) You can't make it hover, And making the opacity change can be really weird because we still have a bar but It doesn't show anything:

(This was made by changing the opacity in the last two rules:

)

My tabs look like this:

And URLBar is like this

(Here I also made a little change in the Bookmarks bar making it not over the URLBar but in the bottom here:

)
For development in Firefox and this kind of stuff I totally recommend you checking the code with the Browser Toolbox Utility and changing the values that works for you. Hope this helps you!

[Kabouik]

That's exciting! I'm very happy you got it working and it was not too cumbersome to integrate with your pre-existing code! Also very glad you liked the concept I tried to achieve with my bad css code (even if the final result worked well in FF 74, I'm sure there was still sub-optimal or even conflicting code).

I see that you managed to fix the right-offset of inactive favicons, that's pretty cool. Some would not understand what it achieves but I'm convinced it helps decluterring the view a lot.

I faced the same issues you faced with collapsed bars: can't really make them 0px or they can't be hovered anymore. Not a huge problem for the tab bar since it's still collapsed to the active favicon's width, but if I remember correctly I had to leave a couple pixels in the URL bar to make it reliably hoverable with a mouse swipe in movement. I was wondering if there would be workarounds for that, but probably not.

A few questions before I can try it myself (can't wait):

• Do you plan on making it a different branch?
• I see that the 5th screenshot that the addon icons are listed vertically; how far can the list extend? I like to put addon icons in the overflow menu so that it's the same for me anyway, just curious.
• The bookmark bar is shown at the top, above the URL bar; does it conflict with hover on collapsed URL bar (i.e., URL bar and book mark bars can only be shown by pressing Ctrl+L, or does hovering with a swipe in movement work too?)?
• Would it be hard to show the Next/Prev/Stop buttons together with the URL bar? I don't use them much, I mostly use the keyboard, but the right click menu on Prev/Next can be useful, and the Stop button helps showing when a page is still loading.
• Your first screenshot shows an empty tab bar if I'm not mistaken, probably because there's only one tab open. Wouldn't it be best to hide the bar in that case? I don't remember and cannot check right now, but this maybe a Firefox option and not CSS magic anyway, so not related to SimplerentFox directly.

[migueravila]

Yeah, the concept is very clean, even simpler than that I think wouldn't be useful.

• I don't know, currently working in some fixes in the project also I'll try to make a Windows version (That's going to be a pain because I don't have a windows PC HAHAHA)

• The list can be extended as you want if you disable the flexible spaces in the "customize" menu. As you can see I disable almost all of the buttons, I don't use them really too much.

• The Bookmark bar (Called Personal Bar in the CSS) doesn't depends a lot in the URLBar as I see the code. I just changed the top rule making it above the URLBar, if you change it for "not hidding" It can work well.

• You can comment the the SimplerentFox code for having the buttons, and they should work pretty well, It just "takes" more space from the URLBar and doesn't have own spaces so, it should work.

• About that I was showing you that you can change the opacity, and make it 0, if you hover, then it shows, But yeah It's totally possible to hide the TabBar if there's only one tab.

I found this project pretty close to what you want project maybe merging the code between both projects can make it for you! If you have some other question, I'll help you!

[Kabouik]

Thanks a lot for the detailed answer.

Interesting, I never heard of that other project, but it's very similar except the URL bar and inactive tabs are always visible. Because of that, it actually looks more like a similar approach I had years ago with Vivaldi (I should have a video of it buried somewhere on Vivaldi forum), but I could make it more minimal with Firefox so I immediately changed browser. Also I prefer using Firefox than anything based on Chromium anyway.

I think what'll best suit my needs will be SimplerentFox + the above code you merged. That other project is surely well suited for new users, but I've been using this for years now so I don't want my URL bar in the way again. :p I really can't wait to try it locally. If you don't mind just posting the Firefox CSS and the TST CSS, I could install SimplerentFox following the Readme and then update the CSS until there's a more official "really-minimal-ui" branch or option.

[migueravila]

You can always adapt some other codes. SimplerentFox first was a really weird merge of some other projects, then I started giving it a minimal look even in the code so, when I realized, I've almost wrote everything. I'll think about making a version totally minimal because I know I'll want something even more simpler. You can always use the code of this project as you want! And as I said, if you have any question, I'll help ya' if I can

[Kabouik]

You can always use the code of this project as you want!

I will but as far as I understand your tests above where you successfully merged both our codes is not pushed to the repository, right? I'd definitely use that in priority since I think you solved some bugs and significantly improved the whole thing!

[Kabouik]

Could you please post here the CSS code you've used for userChrome.css and TST with SimplerentFox in your above test? I'd be happy to try it out, even if not officially implemented in the repository.

[Kabouik]

Oh sad to hear that, I think the result was really great, and exactly what I've been trying to do with my broken code, but nicely done. I'll try to install SimplerentFox when I have some free time and try to reproduce what you did to merge both tricks based on your posts above. Hopefully I can work out something and update here, but I am not setting my hopes too high since you fixed things I had no idea how to fix myself.

[migueravila]

@Kabouik Just got the idea to make another version. I'm going to work on a one line version but where the tabs are going to be the only one showing. I'm beginning the tests and this is how It's going to be:

It's not the same workflow as you had, but definitely is going to be a version that can be useful for you without showing the Url Bar always.

[Kabouik]

Thanks for the follow-up @MiguelRAvila! That will be very nice too, I will be following it. However I'm very attached to the collapsible vertical bar and absence of horizontal bar, so I still want to reproduce and reverse engineer from your post what you did when you merged my CSS into SimplerentFox. I just haven't found the motivation yet because I'm not sure where to start, knowing there are issues in my code that I don't know how to fix, even regardless of the inclusion with SimplerentFox. But it'll start to be a necessity soon: Firefox is now really outdated on one of my machines, and my UI way too broken on the other one where Firefox is up to date.