{"id":28602868,"url":"https://github.com/lucaspar/firefox-vertical-tabs","last_synced_at":"2025-06-11T16:12:34.619Z","repository":{"id":213602730,"uuid":"734497070","full_name":"lucaspar/firefox-vertical-tabs","owner":"lucaspar","description":" Stylesheets for collapsible vertical tabs for Firefox.","archived":false,"fork":false,"pushed_at":"2025-05-07T23:24:37.000Z","size":921,"stargazers_count":28,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-08T00:27:01.857Z","etag":null,"topics":["firefox-userchrome","firefox-userchrome-stylesheet","sidebery","vertical-tabs"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucaspar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-21T20:49:36.000Z","updated_at":"2025-05-07T23:24:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"d1c38201-95b3-4222-ac18-a9317cce8485","html_url":"https://github.com/lucaspar/firefox-vertical-tabs","commit_stats":null,"previous_names":["lucaspar/firefox-vertical-tabs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lucaspar/firefox-vertical-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaspar%2Ffirefox-vertical-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaspar%2Ffirefox-vertical-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaspar%2Ffirefox-vertical-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaspar%2Ffirefox-vertical-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucaspar","download_url":"https://codeload.github.com/lucaspar/firefox-vertical-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaspar%2Ffirefox-vertical-tabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259294348,"owners_count":22835784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firefox-userchrome","firefox-userchrome-stylesheet","sidebery","vertical-tabs"],"created_at":"2025-06-11T16:12:31.652Z","updated_at":"2025-06-11T16:12:34.614Z","avatar_url":"https://github.com/lucaspar.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Firefox vertical tabs\n\n![vertical-tabs-demo-cut](https://github.com/lucaspar/firefox-vertical-tabs/assets/7535699/62239850-2f2a-4a06-86f4-59019a976900)\n\n\u003e [!TIP]\n\u003e\n\u003e If using Firefox 137, upgrade it to 138. Alternatively, go to `about:config`, set `sidebar.visibility` to `expand-on-hover`.\n\n## Setting it up\n\n0. Install the [Sidebery extension](https://addons.mozilla.org/en-US/firefox/addon/sidebery/).\n1. In Sidebery settings:\n    1. Set the title preface must as `\"[S] \"` (without quotes, trailing space is optional but makes titles more readable).\n        This is used by CSS rules below to identify when Sidebery is active.\n    2. Set 'Tabs tree structure' to `false` -- this stylesheet doesn't adapt to\n        multiple tab levels, but feel free to tweak it!\n    3. Copy and paste the `SIDEBERY STYLES` section in the [userChrome.css](./userChrome.css) to\n        Sidebery's Styles Editor → Sidebar.\n    4. Optionally sync Sidebery settings to Firefox account to get other customizations.\n2. Go to `about:support` → copy the 'Profile Directory' location, setting it as the variable `FF_USER_DIR`: `FF_USER_DIR=\"/path/to/profile/dir\"`.\n3. Move CSS files to FF user location:\n    + `mkdir -p \"${FF_USER_DIR}/chrome\"`\n    + `mv userChrome.css \"${FF_USER_DIR}/chrome/userChrome.css\"`\n    + `mv userContent.css \"${FF_USER_DIR}/chrome/userContent.css\"`\n4. Go to `about:config` → `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`.\n5. Restart Firefox (`about:restartrequired` to reopen your current tabs).\n\n## Tweaking and Debugging\n\n### How to inspect the browser interface\n\n\u003e [Source](https://superuser.com/questions/1608096/how-to-inspect-firefoxs-ui)\n\n1. Enable the Browser Toolbox\n\n    Press `F12` to open the Page Inspector.\n\n    \u003e Alternate: Right click the page then `Inspect Element (Q)`.\n\n    Press `F1` to open the Page Inspector Settings.\n\n    \u003e Alternate: In the top right of the Page Inspector next to the close button; press the `⋯` button, then `Settings`.\n\n    Ensure the following settings are checked:\n\n    + `Enable Browser chrome and add-on debugging toolbox`\n    + `Enable remote debugging`\n\n2. Open the Browser Toolbox\n\n    Press `Ctrl`+`Alt`+`Shift`+`I`\n\n    \u003e Alternate: Press `Alt` on the keyboard to bring the window menu → `Tools` → `Web Developer` → `Browser Toolbox`.\n\n### How to inspect extensions interface\n\nYou can use the [Browser Toolbox](#how-to-inspect-the-browser-interface) to inspect extensions, or do it through `about:debugging`:\n\n1. Navigate to `about:debugging`.\n2. Go to the `This Firefox` page.\n3. Find the extension you want to inspect.\n4. Press `Inspect` and a console window should open.\n5. Change *`targeted iframe`* if needed by clicking the blue \"layout\" icon\n    in the upper right corner, located close to the ellipsis menu icon.\n\n## Resources\n\n+ [Firefox release notes](https://www.mozilla.org/en-US/firefox/releasenotes/)\n+ [Firefox source code (GitHub mirror)](https://github.com/mozilla/gecko-dev/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucaspar%2Ffirefox-vertical-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucaspar%2Ffirefox-vertical-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucaspar%2Ffirefox-vertical-tabs/lists"}