drannex42 / firefoxsidebar Goto Github PK
View Code? Open in Web Editor NEWVertical tab design for Firefox with dynamic indentation:: Sidebery and TreeStyleTabs (Legacy) themes available!
Vertical tab design for Firefox with dynamic indentation:: Sidebery and TreeStyleTabs (Legacy) themes available!
I've updated to v2024.05.15 today.
Before, the URL bar used to use the full width:
Now, the sidebar takes the full height:
How could I get the old behavior back?
I tried to enable superbox_removal.css again in userChrome.css
:
@import url("./extensions/superbox_removal.css");
but it doesn't make any difference. I noticed that the extension was not just commented but actually removed from userChrome.css
so I guess it's no longer compatible with v2024.05.15 (not sure why superbox_removal.css file is still in the repo though).
Thanks!
As in the screenshot , the "close button is not visible".
`/*
Title: Drannex42's FirefoxSidebar / Vertical Tabs
Description: Vertical tab design for Firefox with dynamic indentation::
Sideberry and TreeStyleTabs (Legacy) themes available!
Repository URL: https://github.com/drannex42/FirefoxSidebar
Version: 12022.04.17
*/
/*
Preferences / Settings ::
Use this file to set your preferences this will save them in one place for easier future updating
=========================================================================
*/
@import url("./prefs.css");
/* ========================================================================= */
/* Sidebar (Core) :: This file is for the sidebar implementation */
@import url("./extensions/sidebar.css");
/*
Extensions ::
To enable/disable specific extensions just comment/uncomment the line below.
=========================================================================
*/
/* CSD / Window Controls */
@import url("./extensions/window_controls.css");
/* Bookmark Arrows :: add a little arrow next to folders in bookmarks toolbar */
@import url("./extensions/bookmark_arrow.css");
/* Superbox Removal :: heavily customize superbox (flat look, colors, smaller entries,...) */
@import url("./extensions/superbox_removal.css");
/* Avatar Size :: change the avatar size for the Firefox Account to what makes sense */
@import url("./extensions/avatar_size.css");
/* fix sidebar switcher if bookmarks toolbar is hidden */
@import url("./extensions/fix_hidden_bookmarks.css");
/* hide sidebar switcher */
@import url("./extensions/hide_sidebar_switcher.css");
/* END EXTENSIONS ========================================================== */
/*
Themes ::
To enable/disable specific theme just comment/uncomment the line below.
Please enable only one theme at a time!
=========================================================================
*/
/* GTK Adwaita */
/* @import url("./themes/gtk_adwaita.css"); */
/* GTK Breeze */
/* @import url("./themes/gtk_breeze.css"); */
/* END THEMES ========================================================== */
/*
Custom tweaks ::
If you have any custom CSS for Firefox, place them in this file.
=========================================================================
*/
/* @import url("./custom.css"); */
/* ========================================================================= */
`
Currently i am using https://github.com/ranmaru22/firefox-vertical-tabs userChrome.css file contents which i pasted in your custom.css file.
i will post this screenshot below as i will have to restart this browser.
Using the current version of this extension, and the newest version of Firefox. With FirefoxSidebar set to left (default), when hovering mouse over sidebar and it overlaps beginning of left side of browser, the browser then overlaps the sidebar. In other words, I can't use the sidebar refresh, back, forward, home, etc. buttons as the browser then overlaps the sidebar. The sidebar margins (?) may need to be expanded right so that the sidebar buttons can be clicked on. I can't seem to set margins for this in the css that works.
Sidebery 5.0.0 was released today. Several things are broken when Sidebery is collapsed:
Ctrl+E
to open/close sidebar panel no longer works (tested on a blank profile without FirefoxSidebar
, works)This one took a bit to figure out, but clicking on the Sidebery Navigation panel can at times be buggy, this is due to the browser window GUI taking over the blank spots, for some reason.
I haven't had time to investigate further, but I am pleased with finally finding a cause. This hasn't been a problem since I use “scroll over navigation” in Sidebery to switch, but having a clickable action would be ideal.
Making this an issue for remembering.
Possible solution: Set the Z-index of the sidebar much higher than the browser elements, and if that doesn't work (as I expect it won't), set the Z-index of other elements in the general area much lower when the Sidebar is hovered.
Not sure what's causing this but I didn't have these issues before. I believe it started occurring since Firefox 110.
Ctrl+E
temporarily fixes this issue (but not 1.):I'm using stock settings and I'm only loading these two additionals css files:
fix_hidden_bookmarks.css
hide_sidebar_switcher.css
On MacOS 14.5 Sonoma, after updating my chrome folder to the latest revisions to fix an annoying but that I had with the address bar being covered by the search bar, I no longer see the icons to the left like in Edge in full screen mode!
Now the thing is, this used to work great and in my previous version I could use FF in full screen mode with the vertical scroll icons down the left. Now I'm not sure if this is a bug as it is behaving 100% like Edge does but it was a feature I really enjoyed using.
Could you help me understand what I need to add/remove so I can get this behaviour back?
FF Version 127.0
chrome folder at latest: commit 1cb9d37 (HEAD -> main, origin/main, origin/HEAD)
(1 commit past v2024.05.15
Thanks a lot for making this! I just installed it with Sidebery, following the instructions here
After one restart, everything looked perfect, but after another restart of Firefox, I ended up with this:
The black button that allows to switch to other uses of the sidebar is hidden - but I have/want the titlebar disabled (and it worked fine at first), somehow it slipped up there...
I should mention that I'm using KDE PLasma under Garuda Linux, and have the desktop set to use a global menu bar, i.e. the panel at the top becomes the current application's menu bar like in MacOS
Any idea how to fix?
Sidebery version is 5.0.0., Firefox 122.0
Using the latest version of this repo: d99c437
and sideberry v 5.0.0
PFA the screenshot: as you can see the 2nd pinned tab (primevideo) is flowing to the right (as a row)
In the example video in README, the navigation displays the tab panel icon when folded. However, here a arrow overrides it and the transition is weired.
I am using Sidebery 5.0.1 with the newest fixes in #41.
When I hover over sidebery I see white background for a second. I've set the appearance as dark. what might be the case?
Hey, love your work.
I usually don't use the title bar, so it will be nice if I can get it back when I'm using this customization [like the way flyingfox had implemented this] how does one go about doing this?
Hello,
first of all thank you very much for your work. I love this repo. Exactly what I wanted: sidebars like edge, but much better.
Works great, but I have some minor issues. (Win10, FF 98.0.1).
When I switch to a light firefox theme, the background of the sidebar turns transparent, but only when showing bookmarks or history (no problem when sideberry is selected). No problem with a dark FF theme.
I noticed that the "close window" button seems to be hidden on the far right side, but you can still reach it. I dont' know, if this is intended. Really no big issue, but I can't figure out, how to change this.
There is some weird empty spacing in the toolbar on the far right side, so I can't move the icons to the right side.
Doesn't bother me much, but I would like to know how to change it.
The only changes I made in userchrome.css is enabling @import url("./extensions/fix_hidden_bookmarks.css")
Thanks again
The sidebar from a3a5927#diff-4cbb4b9e9856fc97f6d8196971717a50131f57bd9d5ab461d0987ff609b641c5 breaks multiple things
The most noticeable is
This part makes the sidebar always active
FirefoxSidebar/extensions/sidebar.css
Lines 19 to 22 in a692058
Lines 24 to 26 in a692058
Hey, I am having trouble with the dark mode appearance, I can change the settings to dark mode but the sidebar remains in light mode for some reason, haven't modified the config at all.
I've noticed that when reordering tabs, the blue line which indicates where the tab will go is off-centre when using the custom CSS, making it tough to make new tab trees.
I did a bit of experimentation, and found that this is due to the margin: 4px 10px;
line in the custom Sidebery JSON file, under .Tab, .PinnedTab {...}
.
I changed the 4px to 0px, and then enabled the setting 'Tabs Height' in the Sidebury Styles Editor, increasing the height to 40px, which results in the tab spacing looking nearly identical to the regular behavior, but the blue line now lines up with the tabs. I think it might be not perfectly centered, but it works well enough for me.
See this video:
https://0x0.st/HQKM.mkv
I'm using LibreWolf Firefox 114.0.1-2
Thank you for this project. After trying lots of alternatives, I think i found the best :)
I small request is that it would be awesome to have an option for always extend mode just like microsoft edge. In the current version, it just expands on hover.
I followed the steps from the README and ran a killall firefox
just to be safe but it seems like this isn't working as expected because in the screenshot below you can see that I still have the tabs on the top and my sidebar doesn't collapse. I am running the most up to date version of Firefox and just clone the repo this morning. I also double checked that the settings were changed in about:config
.
Hi there! First of all, I absolutely love your modification ❤️ , I've been searching for something like this for so long!
However, I have a little problem with it: notice how there's a little gap between the sidebar and the top bar
To be clear: I used bookmarks bar on new-tab only, but it wrecked the whole thing, because the panel was moving down every time I opened a new tab, so I disabled it and applied the fix mentioned in the readme (-40px). If you need any additional info, feel free to ping back :)
Thank you, overall it's working like a charm, I appreciate that you've gone through the effort to polish it that much!
P.S somehow, the dark theme didn't apply automatically, not sure what have gone wrong here, but I think that's because I'm using Librewolf
I have performed all the steps as mentioned in the README.md
and yet the appearance is nothing like yours in terms of spacing etc. They look too crammed. I am not good at CSS. Could you please say why it appears like this and the remedy? I mean, which style block and the property must I change? I directly cloned yours into Chrome and imported Sidebery settings
Another problem is that I don't get the options you get when you clicked on the Sidebery icon.
I am using the below css in the sideberry settings to improve the scrollbar size and position. It can be useful to add this in the sideberry data file.
.scroll-container{ direction: rtl }
.scroll-container > .scrollable{ direction: ltr }
.scroll-container { scrollbar-width: thin }
It would be nice to have an option to have hide the titlebar and have the window controll buttons on the same line as the urlbar, extensions, and menu button.
Firefox Nightly 105.0a1, with default Firefox Sidebar extensions.
Sideberry only displays it as 1px
Before | After |
---|---|
![]() |
![]() |
Relevant patch:
.container {
margin: 0 auto auto 11px !important;
}
Also fix container indicator.
Before | After |
---|---|
![]() |
![]() |
Relevant patch:
.PinnedTabsBar .tab-wrapper {
margin: 0-1px 0 11px !important;
}
Close icon is pushed further away.
See #22
Hi,
I really like what you did with Tree Style Tab ! An issue I have with your configuration is that when I collapsed a tree the space beneath it where the children tabs are doesn't collapsed, It is an empty space now. Can you tell me how I can disable this please ? In this case, I would like to have the default behavior of Tree Style Tab meaning collapsing the tree without an empty space under the parent tab.
Thank you.
Hello, i have some issue: tab text is still visible and i think the sidebar take to much space
Apparently I forgot that 'berry' has more than one 'R' in the filename, I don't want to write a release for that. So, this issue is a reminder to future me (Hi Friend) that on the next major release to fix that spelling.
OS:Windows 10
When not using the title bar this is what it appears to be like:
https://imgur.com/a/Rp0nxXt
Additionaly the url bar disappear as does the url/history box when selected.
I'm trying to change the width so I can use vertical containers layout.
Here's a video:
I'm currenly using Sidebery v5 with your custom styles.
On Mac, the sidebar Needs some padding, however I'm not sure how that'll effect other OSs.
#sidebar-header {
padding-top: 30px !important;
}
I would love to have a right sidebar! By far the cleanest setup with Sideberry that I have tried 🚀
I am using the exact same config for both LibreWolf and Waterfox, including Sideberry styles:
Librewolf
EDIT: Now it's broken in Librewolf as well. And I am also facing #39 issue.
Hey I created this issue on your Vivaldi mod drannex42/vivaldi-mods#5. Can you please provide a version with only visual changes, thanks.
This should read important
instead of !imortant
https://github.com/drannex42/linux-utils/blob/4dbe57a29b00576d731694995d7eb203c9926320/firefox/userChrome.css#L176
Hello,
Just found out about your project and it seems really nice. I followed the instructions and manage to setup in my Firefox, but the new tab button (that is shown in the video) is missing.
Do I need to append a custom CSS to render this button?
Best regards,
Gabriel Moreira
In the most recent version, 2021.12.14, when applying the Sidebery settings, the functionality to expand/collapse tree tabs breaks, with the fold arrows refusing to appear.
I have tracked the issue down to the z-index: 9
entry in the custom CSS segment of the sidebery-data.json file. Removing this line fixes the issue, and I see no other effects on the styling, though I'm not much of a CSS expert, myself.
It looks like the sidebar does not detect the mouse properly, which does not trigger the opening of tabs properly. There is also some 'flickering' when my mouse is on top of a tab, like it keeps detecting and un-detecting the mouse.
sidebar.css may need some modifications to fix this.
I am not sure how to change the tab text font size in sidebery. I am only able to change the font size of 'count of descendant fonts' using the left styles menu. Changing the font size under appearance setting also does not change the tab font size.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.