Skip to content

Commit

Permalink
v2-2025-01-07 :: Updated for experimental Firefox 133-35 vertical tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@drannex
drannex committed Jan 7, 2025
1 parent 6485f6f commit c852c15
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 247 deletions.
10 changes: 1 addition & 9 deletions custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
/* Custom Styles */

#titlebar {
appearance: none !important;
}

#nav-bar {
padding-top: 2px !important;
}
/* Your custom modifications here */
166 changes: 63 additions & 103 deletions extensions/sidebar.css
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,90 @@
/*
Extension (Core): Sidebar
Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar.
Repository URL: https://github.com/drannex42/FirefoxSidebar
Version: v12024.05.15 (YYYYY.MM.DD)
Description: This is the core implementation of the sidebar used in wizrdsh's FirefoxSidebar.
Repository URL: https://github.com/wizrdsh/FirefoxSidebar
Version: v2-2025.01.07 (YYYYY.MM.DD)
*/

#main-window #TabsToolbar {
visibility: collapse;
/* Hide default vertical tabs */
#vertical-tabs {
display: none !important;
}

/* As of v12024.05.15 we updated to using this one by MrOtherGuy, with modifications */
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 */

/* Show sidebar only when the cursor is over it */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box{
--uc-sidebar-width: 50px;
--uc-sidebar-hover-width: 260px;
--uc-autohide-sidebar-delay: 10ms; /* Wait 0.6s before hiding sidebar */
--uc-autohide-transition-duration: 115ms;
--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;
margin-top: -73px;
z-index:999999;
}


#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 }

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

#sidebar-splitter{ display: none }

#sidebar-header{
overflow: hidden;
color: var(--chrome-color, inherit) !important;
padding-inline: 0 !important;
background: var(--custom-sidebar-header-bg, inherit) !important;
padding: 8px 12px !important;
padding-top: 9px !important;
border-bottom: none !Important;
}

#sidebar-header::before,
#sidebar-header::after{
content: "";
display: flex;
padding-left: 0px;
/* Remove the border radius on the webview */
#browser {
border-radius: 0px !important;
}

#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 switcher toolbar */
#sidebar-main {
order: 1 !important;
z-index: 999;
border: medium;
width: 50px !important;
max-width: 50px !important;
flex-direction: column-reverse;
position: absolute;
bottom: 0px;
overflow: hidden !important;
height: 50px;
}

#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar{
min-width: var(--uc-sidebar-hover-width) !important;
width: var(--uc-sidebar-hover-width) !important;
transition-delay: 0ms !important;
#sidebar-main:hover {
z-index: 99;
height: fit-content;
background: var(--arrowpanel-background);
}

#sidebar-box > #sidebar-header #sidebar-title {
opacity: 0;
/* Sidebar extension */
#sidebar-box {
width: 50px !important;
min-width: 50px !important;
z-index: 98 !important;
box-shadow: none !important;
position: absolute !important;
height: 100% !important;
padding: 0px !important;
border-right: 1px solid var(--chrome-content-separator-color);
}

#sidebar-box:hover > #sidebar-header #sidebar-title {
opacity: 1;
#sidebar-box:hover {
width: 260px !important;
}

.sidebar-panel{
background-color: transparent !important;
color: var(--newtab-text-primary-color) !important;
#sidebar-box #sidebar {
padding-bottom: 50px;
border: medium !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}

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

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
background-color: inherit !important;
border-right: 1px solid var(--sidebar-border-color);
border-inline-width: 0px 1px;
/* Web view container */
#tabbrowser-tabbox {
padding-left: 0px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
border-inline-width: 1px 0px;
#tabbrowser-tabbox[sidebar-shown] {
border-radius: 0px !important;
padding-left: 50px;
border: medium !important;
box-shadow: none !important;
}


/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
inset-inline: auto 0px !important;
/* Fix the dreaded verticalalignment on the new buttons... */
#sidebar-button {
padding-left: 9px;
margin-right: -3px;
padding-top: 1px;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
margin-inline: 0px !important;
border-left-style: solid !important;
}


.browser-toolbar {
padding-left: var(--sidebar-width) !important;
position: relative !important;
#alltabs-button {
padding-top: 1px;
}

#PersonalToolbar {
padding: 2px 5px !important;
padding-top: 0px !important;
margin-top: 0px !important;
padding-left: calc(var(--sidebar-width) + 6px) !important;
/* Spacing adjustment for bookmark bar */
#PlacesToolbarItems {
padding-left: 4px;
padding-top: 0px;
padding-bottom: 6px;
}
47 changes: 1 addition & 46 deletions prefs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,4 @@
=========================================================================
*/

:root {
--sidebar-width: 50px;
--toolbar-height: -50px;
--menubar-height: -74px;
--sidebar-padding: calc(var(--sidebar-width) + 5px);
--toolbar-start-end-padding: 5px !important;

/* Custom Sidebar/Header Backround ::
This sets the background for the other sidebar options (bookmarks, history, in case it is transparent from a theme that is not set up properly
*/
/* --custom-sidebar-bg: Field; /* Default: Field (Disabled) */
/* --custom-sidebar-header-bg: #000; */

/* ====== Extension Settings ====== */

/* Window Control / Client Side Display Settings ===
If you are putting this on the left or right side uncomment the side
preferences below and comment the other
=========================================================================
*/
--csd-width: 100px;
--csd-top: 8px;

/*
CSD - Left Side ===
Default: --csd-left: 50px; --csd-margin-left: 92px;
*/

/*
--csd-left: 50px;
--csd-margin-left: 92px;
*/

/*
CSD - Right Side ===
Defaults: --csd-right: 0px; --csd-margin-right: 95px;
*/

--csd-right: 36px;
--csd-margin-right: 130px;

/* === END: Window Control / Client Side Display Settings === */

/* === END: Extension Settings === */

}
/* At this time there are no preferences available */
102 changes: 51 additions & 51 deletions readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,82 @@
# Firefox Sidebar / Edge-like Vertical Tabs (but better!)
# Firefox Sidebar (Edge-Like Vertical Tabs)

**Note:** This repo was originally a subdirectory of [drannex42/linux-utils](https://github.com/drannex42//linux-utils/), but has now become a standalone repo for my Firefox Sidebar CSS and Utilities. The original linux-utils files can be found [here](https://github.com/drannex42/utils).
**Note as of v2-2025.01.07:**

- This is now using (and replaces!) the new built in Firefox 133/134/135 vertical tabs, make sure you are updated.
- This allows you to replace it with any of your preferred vertical tab extension options:
- Sidebery (preferred), TreeStyleTabs, etc.
- If you are still on an older version of Firefox, please check the releases page for the older versions.

## Example
Video of the extension in action: [https://i.imgur.com/HaLvkFc.mp4](https://i.imgur.com/HaLvkFc.mp4)

https://user-images.githubusercontent.com/4322153/205100497-f56637c4-1d46-4c15-b349-d0b53f2838a0.mp4

Note: This is an older version, but the effect and design is still roughly the same.

## Features:

- Edge-like vertical tab design
- Tree style tab layout support (works with Sideberry & TST (legacy) version)
- Dynamic Indentation
- Tree style tab layout support (works with Sideberry & TST)
- *Dynamic Indentation*
- Automatic theme configuration for light and dark themes
- Custom theme configuration using Sideberry
- Custom theme configuration using Sidebery, or any other.
- Support for tab groups
- Support for Tab Containers with visual identification
- Pinned tabs (right click to close)
- Built in CSS Extension Management

# How to use

To use FirefoxSidebar you will need to clone this repo into your firefox profile as the `chrome` folder and then follow the Sideberry section below. Both are outlined below in how to do so.

## 1. userChrome.css

Follow the instructions for adding this repository to your Firefox Profile.

1. Navigate to `about:profiles` in your address bar
2. Click on the 'open root folder` button for your current profile
3. Open this folder in your terminal
4. Clone this repo with the following command: `git clone https://github.com/drannex42/FirefoxSidebar.git "chrome"`
5. In Firefox navigate to `about:config` in your address bar
6. change the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
7. Restart Firefox
- Simplified design (smallest compared to any other) by using Firefox 133, for older versions.
- Longest lasting and oldest (and first?) major dynamic firefox sidebar extension w/ regular updates.

# Instructions (setup)

To use FirefoxSidebar you will need to clone this repo into your Firefox profile as the `chrome` folder and then follow the Sideberry section below. Both are outlined below in how to do so.

1. Activate experimental sidebar
1. Navigate to the Firefox Labs section in [Settings](about:preferences#experimental) `(about:preferences#experimental)`
2. Activate "Sidebar"
3. Activate "Vertical Tabs"

2. Update userChrome.css
1. Navigate to [about:profiles](about:profiles) `(about:profiles)`in your address bar
2. Click on the 'open root folder` button for your current profile
3. Open this folder in your terminal
4. Clone this repo with the following command: `git clone https://github.com/wizrdsh/FirefoxSidebar.git "chrome"`

3. Activate userChrome.css modification flag
1. In Firefox navigate to [about:config](about:config) in your address bar
2. Search for the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets`
3. Double click, or change this to `true`
4. Restart Firefox

You could skip the clone step entirely if you manually add the FirefoxSidebar files to the "chrome" folder in your Firefox Profile (you will need to make a `chrome` folder if it doesn't exist!).

Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you are confused or have any questions.
Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you have any questions.

## 2. Sidebery (Sideberry)

Load the `sidebery-data.json` file into your Sidebery addon by using the 'import' section under 'Help'.
4. Load the custom sidebery theme and settings (optional, suggested!)
1. Navigate to sidebery settings - [moz-extension://d6dfc617-d672-45b6-8293-f37e07a55dce/page.setup/setup.html#settings_appearance](moz-extension://d6dfc617-d672-45b6-8293-f37e07a55dce/page.setup/setup.html#settings_appearance)
2. Click on "Help" in the sidebar
3. Click on "Import addon data"
4. Load the `sidebery-data.json` file

If you dislike any of the theme presets for dark or light themes, or you have a particular color scheme in mind then navigate to Sideberry Settings > Style Editor (found at the end of the settings sidebar). The preference is to replace the values in the right panel, not in the theme editor to the left - this way you can easily update to newer versions in the future.

### Extensions

All extensions can be found in `/extensions`.

In version 2022.02.23 we broke up the components into extensions using css imports. This makes adding and removing features incredibly easy.

**The following extensions are added by default:**

- [Window Controls / Client Side Decorations (CSD)](/extensions/window_controls.css)
- This adds the window controls to be inline with your address bar.

There are a number of additional 'extensions' added in that folder.

## User Settings

Please backup the `prefs.css` and the `custom.css` files before updating to a new versionof FirefoxSidebar. There may be new additions to these files, so you will need to re-add your preferencess to the file accordingly. These files should be updated *far less* than the other files, but just to make sure please save them.
## How to use

### Preferences
1. Follow the installation instructions above
2. To switch your sidebar choice, hover over the bottom "settings" icon in the sidebar.

There are a number of preferences you can enable or disable in the `prefs.css` file. There are examples and descriptions of the different preferences within that file.

### Custom Tweaks
## Custom Modifications

For ease of use I suggest using the `custom.css` file to for your personal tweaks.
Add any additional Firefox modifications into `custom.css`, these will not be overwritten on future sidebar updates.

### If you use FF without the bookmarks bar
## Extensions & Preferences

Then the sidebar switcher will be missing, edit `userChrome.css` and uncomment the relevant section.
These have been removed as of v2.2025.01.07.

## TreeStyleTabs (Legacy)

Either add the firefox/treestyletabs.css to your TST addon preferences or import the treestyletabs-\*.json preferences to your TST addon (_prefered_)
Either add the firefox/treestyletabs.css to your TST addon preferences or import the treestyletabs-\*.json preferences to your TST addon.

## Updates

Release notes have migrated to [here](https://github.com/drannex42/FirefoxSidebar/releases). You can find prior release notes before v12021.12.22 [here](https://github.com/drannex42/FirefoxSidebar/releases/tag/v12021.12.22).
Release notes have migrated to [here](https://github.com/wizrdsh/FirefoxSidebar/releases). You can find prior release notes before v12021.12.22 [here](https://github.com/wizrdsh/FirefoxSidebar/releases/tag/v12021.12.22).
Loading

0 comments on commit c852c15

Please sign in to comment.