├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── assets ├── after-header.png ├── before-header.png ├── black-icon.png └── screenshot.png ├── package-lock.json ├── package.json └── src ├── _locales ├── en │ └── messages.json ├── nl │ └── messages.json └── pl │ └── messages.json ├── assets ├── audio-muted.svg ├── audio.svg ├── contextual-identities │ ├── README │ ├── briefcase.svg │ ├── cart.svg │ ├── chill.svg │ ├── circle.svg │ ├── dollar.svg │ ├── fence.svg │ ├── fingerprint.svg │ ├── food.svg │ ├── fruit.svg │ ├── gift.svg │ ├── pet.svg │ ├── tree.svg │ └── vacation.svg ├── icon98.png ├── no-favicon.svg ├── sidebar-icon.svg ├── temporary-containers.png └── throbber.png ├── background ├── background.html └── background.js ├── constants.js ├── manifest.json ├── options ├── options.html ├── options.js └── style.css ├── settings.js └── sidebar ├── containers ├── container.js ├── contextual.js ├── pinned.js ├── temporary.js └── vertical.js ├── contextmenu ├── base.js ├── container.js └── tab.js ├── interop ├── container_moving.js └── temporary_containers.js ├── sidebar.html ├── sidebar.js ├── style.css ├── tab └── tab.js ├── tab_order_keeper.js └── theme ├── appearance.js ├── dark.css ├── grey.css └── light.css /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | }, 5 | ignorePatterns: ["node_modules/"], 6 | extends: ["plugin:prettier/recommended", "prettier"], 7 | parserOptions: { 8 | ecmaVersion: 2018, 9 | sourceType: "module", 10 | }, 11 | plugins: ["prettier"], 12 | rules: { 13 | "prettier/prettier": "error", 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | web-ext-artifacts 3 | addon.xpi 4 | .eslintcache 5 | .idea/ 6 | .husky/ -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | useTabs: false, 3 | semi: false, 4 | tabWidth: 4, 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Container Tabs Sidebar 2 | 3 | A firefox addon that shows currently opened tabs in a sidebar grouped by a privacy container. 4 | 5 | ![Promotional screenshot](./assets/screenshot.png) 6 | 7 | ## How to use 8 | 9 | In order to use this addon it's recommended to have firefox version >=59 installed. It might work with a version as low as 54, but there were no tests done with these builds. You can download the latest firefox from [firefox.com](https://www.mozilla.org/en-US/firefox/new/) 10 | 11 | ### Installing from [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/addon/container-tabs-sidebar/?src=github) 12 | 13 | 1. Visit [Container Tabs Sidebar on mozilla.org](https://addons.mozilla.org/en-US/firefox/addon/container-tabs-sidebar/?src=github) 14 | 2. Click Add to Firefox button 15 | 16 | ### Manually installing the addon for development purposes 17 | 18 | #### Debugging via npm: 19 | 1. If you have `npm` installed, you can execute the following command: `npm run dev`. A Firefox window should open. 20 | 21 | #### Installing as temporary add-on 22 | 1. Clone or download a zip of this repository. 23 | 3. Navigate to `about:debugging`. 24 | 4. Click _Load Temporary Add-on_. 25 | 5. Select manifest.json inside `src` directory. 26 | 27 | ### Opening the sidebar 28 | 29 | In order to open the sidebar click __F2__ button on your keyboard. If it doesn't work then open any sidebar (eg. using __Ctrl+b__), and change the sidebar via dropdown menu. 30 | 31 | ### Customizing containers 32 | 33 | In order to add/remove containers navigate to `about:preferences#containers`. 34 | 35 | ## Appearance modifications 36 | 37 | Summary of [How to Create a userChrome.css File on userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) 38 | 1. Create a file called 'userChrome.css' in a directory called 'chrome' inside your user profile directory 39 | 1. Add the below data to the file 40 | 41 | **Warning:** Starting with Firefox 69 you have to enable *toolkit.legacyUserProfileCustomizations.stylesheets* in *about:config* in order to use modifications listed below. 42 | 43 | **Note:** For Firefox <72 you also need a `@namespace` directive at the beginning of the file. 44 | 45 | **Note:** the `@namespace` directive only has to appear once in that file. 46 | 47 | ```css 48 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 49 | ``` 50 | 51 | See [this discussion thread](https://bugzilla.mozilla.org/show_bug.cgi?id=1605208) for details. 52 | 53 | ### Hiding the Sidebar Header 54 | 55 | In order to hide the sidebar header you need to append to the `userChrome.css` file the following code: 56 | 57 | ```css 58 | #sidebar-box[sidebarcommand^="containertabs"] #sidebar-header { 59 | display: none; 60 | } 61 | ``` 62 | 63 | |Before|After| 64 | |----|---| 65 | |![Before hiding](./assets/before-header.png) | ![After hiding](./assets/after-header.png) 66 | 67 | ### Hiding the Tab Bar 68 | 69 | In order to hide the Tab Bar you need to append to the `userChrome.css` the following code: 70 | 71 | ```css 72 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 73 | 74 | #main-window:not([tabsintitlebar="true"]) #TabsToolbar { 75 | visibility: collapse !important; 76 | } 77 | ``` 78 | 79 | 80 | ```css 81 | /* for Firefox 72 and beyond */ 82 | /* credit to stapuft at https://github.com/piroor/treestyletab/issues/2207#issuecomment-478288590 */ 83 | 84 | #tabbrowser-tabs, #TabsToolbar { 85 | visibility: collapse !important; 86 | } 87 | ``` 88 | 89 | 90 | ### Change Icon into Black from White 91 | This userChrome.css rule will make the icon become black on Toolbar, Sidebar, and Pop up menu 92 | 93 | ![Black Icon for white Template](./assets/black-icon.png) 94 | ```css 95 | #sidebar-box[sidebarcommand^="containertabs"] #sidebar-header #sidebar-icon, 96 | #sidebarMenu-popup #button_containertabssidebar_maciekmm_net-sidebar-action .toolbarbutton-icon, 97 | #nav-bar-customization-target #containertabssidebar_maciekmm_net-browser-action .toolbarbutton-icon { 98 | filter: invert(100%); 99 | } 100 | ``` 101 | -------------------------------------------------------------------------------- /assets/after-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maciekmm/container-tabs-sidebar/0488f65a327c75959353b92e49e3c900d3cb5928/assets/after-header.png -------------------------------------------------------------------------------- /assets/before-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maciekmm/container-tabs-sidebar/0488f65a327c75959353b92e49e3c900d3cb5928/assets/before-header.png -------------------------------------------------------------------------------- /assets/black-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maciekmm/container-tabs-sidebar/0488f65a327c75959353b92e49e3c900d3cb5928/assets/black-icon.png -------------------------------------------------------------------------------- /assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maciekmm/container-tabs-sidebar/0488f65a327c75959353b92e49e3c900d3cb5928/assets/screenshot.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "container-tabs-sidebar", 3 | "version": "0.0.0", 4 | "description": "A firefox addon that show tabs in a tree style structure in a sidebar. Inspired by Tree Style Tabs.", 5 | "main": "index.js", 6 | "scripts": { 7 | "lint": "eslint ./src && web-ext lint --source-dir ./src", 8 | "build": "cd src && web-ext build --overwrite-dest", 9 | "package": "rm -rf src/web-ext-artifacts && npm run build && mv src/web-ext-artifacts/container_tabs_sidebar-*.zip addon.xpi", 10 | "dev": "web-ext run --source-dir ./src", 11 | "dev:tc": "web-ext run --source-dir ./src -p TemporaryContainers" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/maciekmm/container-tabs-sidebar.git" 16 | }, 17 | "keywords": [ 18 | "firefox", 19 | "addon", 20 | "containers", 21 | "container", 22 | "tab", 23 | "privacy" 24 | ], 25 | "author": "Maciej Mionskowski", 26 | "license": "MPL-2.0", 27 | "bugs": { 28 | "url": "https://github.com/maciekmm/container-tabs-sidebar/issues" 29 | }, 30 | "homepage": "https://github.com/maciekmm/container-tabs-sidebar#readme", 31 | "devDependencies": { 32 | "@types/firefox-webext-browser": "^120.0.3", 33 | "addons-linter": "^6.14.0", 34 | "eslint": "^8.0.0", 35 | "eslint-config-prettier": "^8.3.0", 36 | "eslint-plugin-prettier": "^4.0.0", 37 | "husky": "^8.0.1", 38 | "lint-staged": "^13.0.0", 39 | "prettier": "^2.0.5", 40 | "web-ext": "^7.8.0" 41 | }, 42 | "husky": { 43 | "hooks": { 44 | "pre-commit": "lint-staged" 45 | } 46 | }, 47 | "lint-staged": { 48 | "*.js": "eslint ./src --cache --fix" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/_locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": { 3 | "message": "Display your tabs in the sidebar grouped by privacy containers" 4 | }, 5 | "browserAction_title": { 6 | "message": "Open ContainerTabsSidebar" 7 | }, 8 | "containerIncognito": { 9 | "message": "Incognito" 10 | }, 11 | "containerDefault": { 12 | "message": "Default" 13 | }, 14 | "sidebar_show": { 15 | "message": "Show sidebar" 16 | }, 17 | "sidebar_dragToPin": { 18 | "message": "Drag a tab here to pin it!" 19 | }, 20 | "sidebar_menu_closeAll": { 21 | "message": "&Close all" 22 | }, 23 | "sidebar_menu_reloadAll": { 24 | "message": "&Reload all" 25 | }, 26 | "sidebar_menu_reloadTab": { 27 | "message": "&Reload Tab" 28 | }, 29 | "sidebar_menu_muteTab": { 30 | "message": "&Mute Tab" 31 | }, 32 | "sidebar_menu_unmuteTab": { 33 | "message": "Un&mute Tab" 34 | }, 35 | "sidebar_menu_newTab": { 36 | "message": "Ne&w Tab" 37 | }, 38 | "sidebar_menu_pinTab": { 39 | "message": "&Pin Tab" 40 | }, 41 | "sidebar_menu_unpinTab": { 42 | "message": "Un&pin Tab" 43 | }, 44 | "sidebar_menu_duplicateTab": { 45 | "message": "&Duplicate Tab" 46 | }, 47 | "sidebar_menu_moveTabToStart": { 48 | "message": "Move to &Start" 49 | }, 50 | "sidebar_menu_moveTabToEnd": { 51 | "message": "Move to &End" 52 | }, 53 | "sidebar_menu_moveTabToNewWindow": { 54 | "message": "Move to New &Window" 55 | }, 56 | "sidebar_menu_moveTabTo": { 57 | "message": "Mo&ve Tab" 58 | }, 59 | "sidebar_menu_closeMultipleTabs": { 60 | "message": "Close &Multiple Tabs" 61 | }, 62 | "sidebar_menu_closeOtherTabs": { 63 | "message": "Cl&ose Other Tabs" 64 | }, 65 | "sidebar_menu_closeTabsAbove": { 66 | "message": "Close Tabs &Above" 67 | }, 68 | "sidebar_menu_closeTabsBelow": { 69 | "message": "Close Tabs &Below" 70 | }, 71 | "sidebar_menu_closeTab": { 72 | "message": "&Close Tab" 73 | }, 74 | "sidebar_menu_reopenInContainer": { 75 | "message": "Op&en in New Container Type" 76 | }, 77 | "sidebar_menu_reopenInContainer_noContainer": { 78 | "message": "No container" 79 | }, 80 | "sidebar_menu_undoClosedTab": { 81 | "message": "&Undo Close Tab" 82 | }, 83 | "options": { 84 | "message": "Options" 85 | }, 86 | "options_title": { 87 | "message": "Container Tabs Sidebar Options" 88 | }, 89 | "options_containerConfiguration": { 90 | "message": "In order to configure containers type about:preferences in the address bar." 91 | }, 92 | "options_theme": { 93 | "message": "Theme" 94 | }, 95 | "options_theme_description": { 96 | "message": "Customise the color scheme" 97 | }, 98 | "options_theme_dark": { 99 | "message": "Dark" 100 | }, 101 | "options_theme_grey": { 102 | "message": "Grey" 103 | }, 104 | "options_theme_light": { 105 | "message": "Light" 106 | }, 107 | "options_wrapTabTitles": { 108 | "message": "Wrap tab titles" 109 | }, 110 | "options_wrapTabTitles_description": { 111 | "message": "Show whole tab title by using multiple lines" 112 | }, 113 | "options_collapseContainers": { 114 | "message": "Collapse containers on tab change" 115 | }, 116 | "options_collapseContainers_description": { 117 | "message": "Only active container will be visible" 118 | }, 119 | "options_hideEmptyContainers": { 120 | "message": "Hide empty containers" 121 | }, 122 | "options_hideEmptyContainers_description": { 123 | "message": "Containers with no tabs will not appear" 124 | }, 125 | "options_hideEmptyPinned": { 126 | "message": "Hide empty pinned tabs header" 127 | }, 128 | "options_hideEmptyPinned_description": { 129 | "message": "Pinned tabs header will reappear when dragging tabs" 130 | }, 131 | "options_focusTabsInOrder": { 132 | "message": "Focus tabs in container order" 133 | }, 134 | "options_focusTabsInOrder_description": { 135 | "message": "Closing current tab will focus the one above" 136 | }, 137 | "options_cycleTabsInOrder": { 138 | "message": "Cycle tabs in view order" 139 | }, 140 | "options_cycleTabsInOrder_description": { 141 | "message": "Will sort firefox tabs to reflect the view order in the sidebar" 142 | }, 143 | "options_css_description": { 144 | "message": "Inject custom CSS for customisation" 145 | }, 146 | "options_shortcut": { 147 | "message": "Shortcut" 148 | }, 149 | "options_shortcut_description": { 150 | "message": "Shortcut for opening the sidebar (format)" 151 | }, 152 | "options_save": { 153 | "message": "Save" 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /src/_locales/nl/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": { 3 | "message": "Toon uw tabbladen in de zijbalk, gegroepeerd in privacy-containers" 4 | }, 5 | "browserAction_title": { 6 | "message": "ContainerTabsSidebar openen" 7 | }, 8 | "containerIncognito": { 9 | "message": "Privé" 10 | }, 11 | "containerDefault": { 12 | "message": "Standaard" 13 | }, 14 | "sidebar_show": { 15 | "message": "Zijbalk tonen" 16 | }, 17 | "sidebar_dragToPin": { 18 | "message": "Sleep een tabblad hierheen om het vast te maken!" 19 | }, 20 | "sidebar_menu_closeAll": { 21 | "message": "&Alles sluiten" 22 | }, 23 | "sidebar_menu_reloadAll": { 24 | "message": "Alles he&rladen" 25 | }, 26 | "sidebar_menu_reloadTab": { 27 | "message": "Tabblad he&rladen" 28 | }, 29 | "sidebar_menu_muteTab": { 30 | "message": "Tabblad de&mpen" 31 | }, 32 | "sidebar_menu_unmuteTab": { 33 | "message": "Tabblad ont&dempen" 34 | }, 35 | "sidebar_menu_pinTab": { 36 | "message": "Tabblad &vastmaken" 37 | }, 38 | "sidebar_menu_unpinTab": { 39 | "message": "Tab&blad losmaken" 40 | }, 41 | "sidebar_menu_duplicateTab": { 42 | "message": "Tabbla&d klonen" 43 | }, 44 | "sidebar_menu_moveTabToNewWindow": { 45 | "message": "Tabblad verplaatsen naar nieu&w venster" 46 | }, 47 | "sidebar_menu_closeOtherTabs": { 48 | "message": "Andere t&abbladen sluiten" 49 | }, 50 | "sidebar_menu_closeTabsAbove": { 51 | "message": "T&abbladen hierboven sluiten" 52 | }, 53 | "sidebar_menu_closeTabsBelow": { 54 | "message": "Ta&bbladen hieronder sluiten" 55 | }, 56 | "sidebar_menu_closeTab": { 57 | "message": "&Tabblad sluiten" 58 | }, 59 | "sidebar_menu_reopenInContainer": { 60 | "message": "H&eropenen in container" 61 | }, 62 | "sidebar_menu_reopenInContainer_noContainer": { 63 | "message": "Geen container" 64 | }, 65 | "sidebar_menu_undoClosedTab": { 66 | "message": "Recentste tabbla&d heropenen" 67 | }, 68 | "options": { 69 | "message": "Opties" 70 | }, 71 | "options_title": { 72 | "message": "Container Tabs Sidebar-opties" 73 | }, 74 | "options_containerConfiguration": { 75 | "message": "Typ about:preferences in de adresbalk om containers in te kunnen stellen." 76 | }, 77 | "options_theme": { 78 | "message": "Thema" 79 | }, 80 | "options_theme_description": { 81 | "message": "Pas het kleurenschema aan" 82 | }, 83 | "options_theme_dark": { 84 | "message": "Donker" 85 | }, 86 | "options_theme_grey": { 87 | "message": "Grijs" 88 | }, 89 | "options_theme_light": { 90 | "message": "Licht" 91 | }, 92 | "options_wrapTabTitles": { 93 | "message": "Tabbladnamen afbreken" 94 | }, 95 | "options_wrapTabTitles_description": { 96 | "message": "Toon de gehele tabbladnaam, verspreid over meerdere regels" 97 | }, 98 | "options_collapseContainers": { 99 | "message": "Containers inklappen na wijzigen van tabblad" 100 | }, 101 | "options_collapseContainers_description": { 102 | "message": "Toon alleen de actieve container" 103 | }, 104 | "options_hideEmptyContainers": { 105 | "message": "Lege containers verbergen" 106 | }, 107 | "options_hideEmptyContainers_description": { 108 | "message": "Verberg containers zonder tabbladen" 109 | }, 110 | "options_hideEmptyPinned": { 111 | "message": "Kop 'Vastgemaakte tabbladen' verbergen" 112 | }, 113 | "options_hideEmptyPinned_description": { 114 | "message": "De kop wordt pas getoond bij het verslepen van tabbladen" 115 | }, 116 | "options_focusTabsInOrder": { 117 | "message": "Tabbladen focussen in containervolgorde" 118 | }, 119 | "options_focusTabsInOrder_description": { 120 | "message": "Sluit het het huidige tabblad om die erboven te focussen" 121 | }, 122 | "options_cycleTabsInOrder": { 123 | "message": "Tabbladen sorteren op weergavemodus" 124 | }, 125 | "options_cycleTabsInOrder_description": { 126 | "message": "Sorteer Firefox-tabbladen op basis van de weergavemodus in de zijbalk" 127 | }, 128 | "options_css_description": { 129 | "message": "Pas aangepaste css toe om uitgebreidere aanpassingen te maken" 130 | }, 131 | "options_shortcut": { 132 | "message": "Sneltoets" 133 | }, 134 | "options_shortcut_description": { 135 | "message": "Sneltoets voor het openen van de zijbalk (opmaak)" 136 | }, 137 | "options_save": { 138 | "message": "Opslaan" 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /src/_locales/pl/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": { 3 | "message": "Display your tabs in the sidebar grouped by privacy containers" 4 | }, 5 | "browserAction_title": { 6 | "message": "Otwórz ContainerTabsSidebar" 7 | }, 8 | "containerIncognito": { 9 | "message": "Prywatny" 10 | }, 11 | "containerDefault": { 12 | "message": "Domyślny" 13 | }, 14 | "sidebar_show": { 15 | "message": "Pokaż panel boczny" 16 | }, 17 | "sidebar_dragToPin": { 18 | "message": "Przeciągnij kartę aby przypiąć!" 19 | }, 20 | "sidebar_menu_closeAll": { 21 | "message": "&Zamknij wszystkie" 22 | }, 23 | "sidebar_menu_reloadAll": { 24 | "message": "&Przeładuj wszystkie" 25 | }, 26 | "sidebar_menu_reloadTab": { 27 | "message": "&Przeładuj kartę" 28 | }, 29 | "sidebar_menu_muteTab": { 30 | "message": "&Wycisz kartę" 31 | }, 32 | "sidebar_menu_unmuteTab": { 33 | "message": "&Odcisz kartę" 34 | }, 35 | "sidebar_menu_pinTab": { 36 | "message": "&Przypnij kartę" 37 | }, 38 | "sidebar_menu_unpinTab": { 39 | "message": "Ode&pnij kartę" 40 | }, 41 | "sidebar_menu_duplicateTab": { 42 | "message": "&Duplikuj kartę" 43 | }, 44 | "sidebar_menu_moveTabToNewWindow": { 45 | "message": "Przenieś kartę do &nowego okna" 46 | }, 47 | "sidebar_menu_closeOtherTabs": { 48 | "message": "Zamknij &inne karty" 49 | }, 50 | "sidebar_menu_closeTabsAbove": { 51 | "message": "Zamknij karty po&wyżej" 52 | }, 53 | "sidebar_menu_closeTabsBelow": { 54 | "message": "Zamknij karty po&niżej" 55 | }, 56 | "sidebar_menu_closeTab": { 57 | "message": "&Zamknij kartę" 58 | }, 59 | "sidebar_menu_reopenInContainer": { 60 | "message": "&Otwórz w innym kontenerze" 61 | }, 62 | "sidebar_menu_reopenInContainer_noContainer": { 63 | "message": "&Bez kontenera" 64 | }, 65 | "sidebar_menu_undoClosedTab": { 66 | "message": "Przywróć &zamkniętą kartę" 67 | }, 68 | "options": { 69 | "message": "Opcje" 70 | }, 71 | "options_title": { 72 | "message": "Opcje Container Tabs Sidebar" 73 | }, 74 | "options_containerConfiguration": { 75 | "message": "W celu konfiguracji kontenerów wpisz about:preferences w pasku adresu." 76 | }, 77 | "options_theme": { 78 | "message": "Skórka" 79 | }, 80 | "options_theme_description": { 81 | "message": "" 82 | }, 83 | "options_theme_dark": { 84 | "message": "Ciemna" 85 | }, 86 | "options_theme_grey": { 87 | "message": "Szary" 88 | }, 89 | "options_theme_light": { 90 | "message": "Jasna" 91 | }, 92 | "options_wrapTabTitles": { 93 | "message": "Zawijaj tytuły kart" 94 | }, 95 | "options_wrapTabTitles_description": { 96 | "message": "Pokazuj całe tytuły kart" 97 | }, 98 | "options_collapseContainers": { 99 | "message": "Zwiń nieaktywne kontenery podczas zmiany karty" 100 | }, 101 | "options_collapseContainers_description": { 102 | "message": "Tylko aktywny kontener będzie widoczny" 103 | }, 104 | "options_hideEmptyContainers": { 105 | "message": "Schowaj puste kontenery" 106 | }, 107 | "options_hideEmptyContainers_description": { 108 | "message": "Kontenery bez kart nie będą widoczne" 109 | }, 110 | "options_hideEmptyPinned": { 111 | "message": "Schowaj obszar przypiętych kart gdy jest pusty" 112 | }, 113 | "options_hideEmptyPinned_description": { 114 | "message": "Obszar przypiętych kart wysunie się gdy przeciągniesz kartę" 115 | }, 116 | "options_focusTabsInOrder": { 117 | "message": "Włączaj karty w kolejności" 118 | }, 119 | "options_focusTabsInOrder_description": { 120 | "message": "Zamknięcie obecnej karty włączy kartę wyżej w kontenerze" 121 | }, 122 | "options_cycleTabsInOrder": { 123 | "message": "Przełączaj karty według kolejności na panelu bocznym" 124 | }, 125 | "options_cycleTabsInOrder_description": { 126 | "message": "Dodatek ułoży karty w przeglądarce tak aby odpowiadały kolejności panelu bocznego." 127 | }, 128 | "options_shortcut": { 129 | "message": "Skrót klawiszowy" 130 | }, 131 | "options_shortcut_description": { 132 | "message": "Skrót klawiszowy by otworzyć panel boczny (format)" 133 | }, 134 | "options_css_description": { 135 | "message": "Wstrzyknij dodatkowe style" 136 | }, 137 | "options_save": { 138 | "message": "Zapisz" 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /src/assets/audio-muted.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/audio.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/README: -------------------------------------------------------------------------------- 1 | This is here thanks to https://github.com/piroor/treestyletab -------------------------------------------------------------------------------- /src/assets/contextual-identities/briefcase.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/cart.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/chill.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/circle.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/dollar.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/fence.svg: -------------------------------------------------------------------------------- 1 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/fingerprint.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/food.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/fruit.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/gift.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/pet.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/tree.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/contextual-identities/vacation.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/icon98.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maciekmm/container-tabs-sidebar/0488f65a327c75959353b92e49e3c900d3cb5928/src/assets/icon98.png -------------------------------------------------------------------------------- /src/assets/no-favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/sidebar-icon.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/assets/temporary-containers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maciekmm/container-tabs-sidebar/0488f65a327c75959353b92e49e3c900d3cb5928/src/assets/temporary-containers.png -------------------------------------------------------------------------------- /src/assets/throbber.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maciekmm/container-tabs-sidebar/0488f65a327c75959353b92e49e3c900d3cb5928/src/assets/throbber.png -------------------------------------------------------------------------------- /src/background/background.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/background/background.js: -------------------------------------------------------------------------------- 1 | import { getConfig, getSidebarAction } from "../settings.js" 2 | 3 | function toggleSidebar(tab) { 4 | browser.sidebarAction.toggle() 5 | } 6 | 7 | browser.browserAction.onClicked.addListener(toggleSidebar) 8 | 9 | getConfig().then(async (settings) => { 10 | if ( 11 | !("shortcut" in settings) || 12 | typeof browser.commands.update != "function" 13 | ) 14 | return 15 | let action = await getSidebarAction() 16 | action.shortcut = settings["shortcut"] 17 | return browser.commands.update(action) 18 | }) 19 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const TEMPORARY_CONTAINER_COOKIE_STORE_ID = 2 | "__CTS__temporary_container__" 3 | export const PINNED_CONTAINER_COOKIE_STORE_ID = "__CTS__pinned_container__" 4 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Container Tabs Sidebar", 4 | "version": "1.2.0", 5 | "description": "__MSG_description__", 6 | "homepage_url": "https://github.com/maciekmm/container-tabs-sidebar", 7 | "default_locale": "en", 8 | "sidebar_action": { 9 | "default_title": "Container Tabs", 10 | "default_panel": "sidebar/sidebar.html", 11 | "default_icon": "assets/sidebar-icon.svg", 12 | "browser_style": true 13 | }, 14 | "browser_action": { 15 | "default_icon": "assets/sidebar-icon.svg", 16 | "default_title": "__MSG_browserAction_title__" 17 | }, 18 | "background": { 19 | "page": "background/background.html" 20 | }, 21 | "options_ui": { 22 | "page": "options/options.html", 23 | "browser_style": true 24 | }, 25 | "commands": { 26 | "_execute_sidebar_action": { 27 | "suggested_key": { 28 | "default": "F2" 29 | }, 30 | "description": "__MSG_sidebar_show__" 31 | } 32 | }, 33 | "browser_specific_settings": { 34 | "gecko": { 35 | "id": "containertabssidebar@maciekmm.net", 36 | "strict_min_version": "73.0" 37 | } 38 | }, 39 | "icons": { 40 | "98": "assets/icon98.png" 41 | }, 42 | "permissions": [ 43 | "tabs", 44 | "contextualIdentities", 45 | "cookies", 46 | "menus", 47 | "menus.overrideContext", 48 | "storage", 49 | "sessions" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /src/options/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Container Tabs Sidebar Options 9 | 10 | 11 | 12 |
13 |
14 |

Options

15 |

In order to configure containers type about:preferences in the address bar.

16 |
17 | 22 | 26 |
27 |
28 | 29 | 33 |
34 |
35 | 36 | 40 |
41 |
42 | 43 | 47 |
48 |
49 | 50 | 54 |
55 |
56 | 57 | 61 |
62 |
63 | 64 | 68 |
69 | 76 |
77 | 78 | 82 |
83 |
84 | 88 | 92 |
93 | 97 |
98 |
99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /src/options/options.js: -------------------------------------------------------------------------------- 1 | import { getSidebarAction, getConfig } from "../settings.js" 2 | 3 | { 4 | const options = document.querySelectorAll("[name]") 5 | const form = document.querySelector("form") 6 | form.addEventListener("submit", (e) => { 7 | e.preventDefault() 8 | let settings = {} 9 | for (let option of options) { 10 | if (option.type.toLowerCase() == "checkbox") { 11 | settings[option.name] = option.checked 12 | } else { 13 | settings[option.name] = option.value 14 | } 15 | } 16 | browser.storage.local.set(settings).then((e) => { 17 | if (typeof browser.commands.update != "function") { 18 | return 19 | } 20 | getSidebarAction().then((action) => { 21 | action.shortcut = settings["shortcut"] 22 | return browser.commands.update(action) 23 | }) 24 | }) 25 | }) 26 | 27 | getConfig().then((c) => { 28 | for (let option of options) { 29 | if (!c[option.name]) { 30 | continue 31 | } 32 | if (option.type.toLowerCase() == "checkbox") { 33 | option.checked = c[option.name] 34 | } else { 35 | option.value = c[option.name] 36 | } 37 | } 38 | }) 39 | 40 | // internalization 41 | document.querySelectorAll("[data-i18n]").forEach((el) => { 42 | let key = el.getAttribute("data-i18n") 43 | let message = browser.i18n.getMessage(key) 44 | if (!message) { 45 | console.warn("no translation key " + key + " found") 46 | } else { 47 | let attribute = el.hasAttribute("data-i18n-attr") 48 | ? el.getAttribute("data-i18n-attr") 49 | : "innerText" 50 | el[attribute] = message 51 | } 52 | }) 53 | } 54 | -------------------------------------------------------------------------------- /src/options/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, body { 6 | background: #fefefe; 7 | color: #333; 8 | padding: 5px; 9 | } 10 | 11 | body { 12 | max-width: 800px; 13 | margin: 0 auto; 14 | } 15 | 16 | fieldset { 17 | border: 1px solid #eee; 18 | width: 80%; 19 | background: #fff; 20 | margin: 0 auto; 21 | outline: 0; 22 | padding: 0; 23 | box-shadow: 5px 5px 5px rgba(0,0,0,0.05); 24 | border-radius: 5px; 25 | } 26 | 27 | fieldset > * { 28 | padding: 10px 10px 0 10px; 29 | } 30 | 31 | h2 { 32 | margin: 0; 33 | padding: 10px; 34 | color: #aaa; 35 | width: 100%; 36 | font-weight: 400; 37 | border-bottom: 1px solid #eee; 38 | } 39 | 40 | form footer { 41 | width: 100%; 42 | background: #eee; 43 | text-align: right; 44 | } 45 | 46 | input[type="submit"], input[type="reset"] { 47 | background: none; 48 | border: 0; 49 | outline: 0; 50 | padding: 5px; 51 | border-radius: 5px; 52 | min-width: 100px; 53 | text-align: center; 54 | } 55 | 56 | form div * { 57 | vertical-align: middle; 58 | } 59 | 60 | input[type="submit"] { 61 | background: rgba(0, 167, 0, 0.656); 62 | color: #eee; 63 | } 64 | 65 | .item { 66 | display: inline-flex; 67 | justify-content: middle; 68 | align-content: center; 69 | align-items: center; 70 | justify-items: center; 71 | width: 100%; 72 | } 73 | 74 | .item label { 75 | margin-left: 5px; 76 | } 77 | 78 | .item p { 79 | padding: 0; 80 | margin: 0; 81 | color: #999; 82 | } 83 | 84 | .item textarea { 85 | width: 100%; 86 | height: 15ch; 87 | } 88 | 89 | .container-configuration { 90 | margin: 0; 91 | line-height: 1.5; 92 | } -------------------------------------------------------------------------------- /src/settings.js: -------------------------------------------------------------------------------- 1 | const defaults = { 2 | theme: "dark", 3 | } 4 | 5 | export async function getSidebarAction() { 6 | return (await browser.commands.getAll()).filter( 7 | (e) => e.name === "_execute_sidebar_action" 8 | )[0] 9 | } 10 | 11 | export async function getConfig() { 12 | let cfg = await browser.storage.local.get() 13 | for (let key in defaults) { 14 | if (!(key in cfg)) { 15 | cfg[key] = defaults[key] 16 | } 17 | } 18 | let sidebarAction = await getSidebarAction() 19 | cfg["shortcut"] = sidebarAction.shortcut 20 | return cfg 21 | } 22 | 23 | var sessionStorage 24 | 25 | function sessionProxyHandler(windowId, sessionStorage) { 26 | return { 27 | get: function (obj, key) { 28 | if (key == "isProxy") { 29 | return true 30 | } 31 | let val = obj[key] 32 | if (typeof val == "object" && !val.isProxy) { 33 | val = new Proxy( 34 | val, 35 | sessionProxyHandler(windowId, sessionStorage) 36 | ) 37 | } 38 | return val 39 | }, 40 | set: function (obj, key, value) { 41 | obj[key] = value 42 | browser.sessions.setWindowValue( 43 | windowId, 44 | "containers", 45 | proxyToPOJO(sessionStorage) 46 | ) 47 | return true 48 | }.bind(this), 49 | } 50 | } 51 | 52 | function proxyToPOJO(proxy) { 53 | let res = {} 54 | for (let key of Object.keys(proxy)) { 55 | let val = proxy[key] 56 | if (typeof val == "object" && proxy[key].isProxy) { 57 | res[key] = proxyToPOJO(val) 58 | } else { 59 | res[key] = val 60 | } 61 | } 62 | return res 63 | } 64 | 65 | export async function getSessionStorage(window) { 66 | if (!!sessionStorage) { 67 | return sessionStorage 68 | } 69 | let storage = await browser.sessions.getWindowValue(window.id, "containers") 70 | if (!storage) { 71 | storage = {} 72 | } 73 | return (sessionStorage = new Proxy( 74 | storage, 75 | sessionProxyHandler(window.id, storage) 76 | )) 77 | } 78 | -------------------------------------------------------------------------------- /src/sidebar/containers/container.js: -------------------------------------------------------------------------------- 1 | import ContainerTab from "../tab/tab.js" 2 | 3 | export default class AbstractTabContainer { 4 | constructor(id, window, config, element) { 5 | this.id = id 6 | this._config = config 7 | this.element = element 8 | this._window = window 9 | this.tabs = new Map() 10 | } 11 | 12 | init() { 13 | browser.tabs.onActivated.addListener((activeInfo) => { 14 | if (activeInfo.windowId !== this._window.id) return 15 | this._handleTabActivated(activeInfo) 16 | }) 17 | 18 | browser.tabs.onCreated.addListener((newTab) => { 19 | if (newTab.windowId !== this._window.id) return 20 | 21 | this._handleTabCreated(newTab) 22 | }) 23 | 24 | browser.tabs.onRemoved.addListener((tabId, removeInfo) => { 25 | if (removeInfo.isWindowClosing) return 26 | if (removeInfo.windowId !== this._window.id) return 27 | if (!this.tabs.has(tabId)) return 28 | this.removeTab(tabId) 29 | }) 30 | 31 | browser.tabs.onMoved.addListener((tabId) => { 32 | if (!this.tabs.has(tabId)) return 33 | this.render(true) 34 | }) 35 | 36 | browser.tabs.onAttached.addListener((tabId, attachInfo) => { 37 | if (attachInfo.newWindowId !== this._window.id) { 38 | if (!this.tabs.has(tabId)) return 39 | this.removeTab(tabId) 40 | } else { 41 | this.render(true) 42 | } 43 | }) 44 | 45 | browser.tabs.onUpdated.addListener((tabId, change, tab) => { 46 | if ("pinned" in change) { 47 | this._handleTabPinned(tabId, change, tab) 48 | } 49 | }) 50 | 51 | // Dragging 52 | this.element.addEventListener("dragleave", (e) => { 53 | if (!e.currentTarget || !e.currentTarget.classList) return 54 | e.currentTarget.classList.remove("container-dragged-over") 55 | }) 56 | 57 | this.element.addEventListener("dragend", (e) => { 58 | if (!e.currentTarget || !e.currentTarget.classList) return 59 | e.currentTarget.classList.remove("container-dragged-over") 60 | }) 61 | 62 | this.element.addEventListener("dragover", (e) => { 63 | if (!e.dataTransfer.types.includes("tab/move")) { 64 | return 65 | } 66 | e.preventDefault() 67 | e.dataTransfer.dropEffect = "move" 68 | this.element.classList.add("container-dragged-over") 69 | return false 70 | }) 71 | 72 | this.element.addEventListener("drop", async (e) => { 73 | if (!e.dataTransfer.types.includes("tab/move")) { 74 | return 75 | } 76 | e.preventDefault() 77 | e.stopImmediatePropagation() 78 | this.element.classList.remove("container-dragged-over") 79 | let [tabId, contextualIdentity, pinned] = e.dataTransfer 80 | .getData("tab/move") 81 | .split("/") 82 | tabId = parseInt(tabId) 83 | pinned = pinned !== "false" 84 | 85 | let index = -1 86 | 87 | let dropTabId = this._getDropTab(e.target) 88 | let tab = await browser.tabs.get(tabId) 89 | if (dropTabId) { 90 | let dropTab = await browser.tabs.get(parseInt(dropTabId)) 91 | index = dropTab.index + 1 92 | } else if (this.tabs.size > 0) { 93 | index = ( 94 | await browser.tabs.get( 95 | this.tabs.values().next().value.tab.id 96 | ) 97 | ).index 98 | } 99 | await this._handleDrop(tab, pinned, contextualIdentity, index) 100 | }) 101 | 102 | this.render(true) 103 | } 104 | 105 | async _handleDrop(tab, pinned, tabCtxId, index) {} 106 | 107 | _getDropTab(target) { 108 | let tab = target.closest(".container-tab") 109 | return tab ? tab.getAttribute("data-tab-id") : null 110 | } 111 | 112 | _handleTabActivated(activeInfo) { 113 | this.tabs.forEach((tab, tabId) => { 114 | if (tabId == activeInfo.tabId) { 115 | tab.activate() 116 | } else if (tab.tab.active) { 117 | tab.deactivate() 118 | } 119 | }) 120 | } 121 | 122 | _handleTabCreated(newTab) { 123 | this.render(true) 124 | } 125 | 126 | _handleTabPinned(tabId, change, tab) {} 127 | 128 | _handleDragOver(event, tabId, contextualId, pinned) {} 129 | 130 | /** 131 | * Removes all tabs except one 132 | * @param {integer} tabId to not remove from this container 133 | */ 134 | closeOthers(tabId) { 135 | browser.tabs.remove( 136 | Array.from(this.tabs.keys()).filter((key) => key != tabId) 137 | ) 138 | } 139 | 140 | /** 141 | * Removes a tab from DOM, does not remove it from a browser 142 | * @param {integer} tabId 143 | */ 144 | removeTab(tabId) { 145 | if (!this.tabs.has(tabId)) return 146 | const tab = this.tabs.get(tabId) 147 | tab.destroy() 148 | this.tabs.delete(tabId) 149 | tab.element.parentNode.removeChild(tab.element) 150 | this.render(false) 151 | } 152 | 153 | async render(updateTabs) { 154 | this.element.setAttribute("data-container-id", this.id) 155 | this.element.setAttribute("data-tabs-count", this.tabs.size) 156 | } 157 | 158 | renderTabs(tabContainer, tabs) { 159 | // clear children 160 | while (tabContainer.lastChild) { 161 | tabContainer.removeChild(tabContainer.lastChild) 162 | } 163 | this.tabs.forEach((tab) => { 164 | tab.destroy() 165 | }) 166 | this.tabs.clear() 167 | 168 | for (let firefoxTab of tabs) { 169 | const tab = new ContainerTab(this._window, this, firefoxTab) 170 | this.tabs.set(tab.id, tab) 171 | tab.init() 172 | tabContainer.appendChild(tab.element) 173 | } 174 | // when closing a tab, focus one above 175 | if (!!this._config["focus_tabs_in_order"] && tabs.length > 1) { 176 | browser.tabs.moveInSuccession(tabs.map((tab) => tab.id).reverse()) 177 | // if closing the first one, focus the second one 178 | browser.tabs.update(tabs[0].id, { successorTabId: tabs[1].id }) 179 | } 180 | } 181 | 182 | supportsCookieStore(cookieStoreId) {} 183 | 184 | getBrowserTabs() { 185 | return Array.from(this.tabs.values()).map((tab) => tab.tab) 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /src/sidebar/containers/contextual.js: -------------------------------------------------------------------------------- 1 | import VerticalContainer from "./vertical.js" 2 | import { 3 | CONTAINER_MOVED_EVENT, 4 | IS_CONTAINER_MOVING_ENABLED, 5 | } from "../interop/container_moving.js" 6 | 7 | export default class ContextualIdentityContainer extends VerticalContainer { 8 | constructor(id, window, config, sessionStorage, contextualIdentity) { 9 | super(id, window, config, sessionStorage) 10 | this.contextualIdentity = contextualIdentity 11 | } 12 | 13 | init() { 14 | super.init() 15 | 16 | if (IS_CONTAINER_MOVING_ENABLED) { 17 | this._initContainerMoving() 18 | } 19 | } 20 | 21 | _initContainerMoving() { 22 | // the default container is always the first one and cannot be dragged/moved 23 | const isDraggable = 24 | this.id !== "firefox-default" && this.id !== "firefox-private" 25 | 26 | if (isDraggable) { 27 | this.element.setAttribute("draggable", true) 28 | 29 | this.element.addEventListener("dragstart", (e) => { 30 | e.dataTransfer.effectAllowed = "move" 31 | e.dataTransfer.setData("container/move", this.id) 32 | this.element.classList.add("container-dragged") 33 | }) 34 | } 35 | 36 | this.element.addEventListener("dragover", (e) => { 37 | if (!e.dataTransfer.types.includes("container/move")) { 38 | return 39 | } 40 | e.preventDefault() 41 | e.stopPropagation() 42 | e.dataTransfer.dropEffect = "move" 43 | this.element.classList.add("container-identity-dragged-over") 44 | return false 45 | }) 46 | 47 | this.element.addEventListener("drop", async (e) => { 48 | if (!e.dataTransfer.types.includes("container/move")) { 49 | return false 50 | } 51 | e.preventDefault() 52 | e.stopImmediatePropagation() 53 | this.element.classList.remove("container-identity-dragged-over") 54 | let [movedCookieStoreId] = e.dataTransfer 55 | .getData("container/move") 56 | .split("/") 57 | 58 | let identities = await browser.contextualIdentities.query({}) 59 | let targetIndex = identities.findIndex( 60 | (cookieStore) => cookieStore.cookieStoreId === this.id 61 | ) 62 | 63 | let previousIndex = identities.findIndex( 64 | (cookieStore) => 65 | cookieStore.cookieStoreId === movedCookieStoreId 66 | ) 67 | 68 | if (previousIndex > targetIndex) { 69 | targetIndex++ 70 | } 71 | 72 | if (previousIndex === targetIndex) { 73 | return false 74 | } 75 | 76 | await browser.contextualIdentities.move( 77 | movedCookieStoreId, 78 | targetIndex 79 | ) 80 | 81 | // contextualIdentities move unfortunately does not fire any event, we need to fire one ourselves 82 | const event = new CustomEvent(CONTAINER_MOVED_EVENT, { 83 | bubbles: true, 84 | detail: { 85 | contextualIdentity: movedCookieStoreId, 86 | after: this.id, 87 | }, 88 | }) 89 | this.element.dispatchEvent(event) 90 | return true 91 | }) 92 | 93 | this.element.addEventListener("dragleave", (e) => { 94 | this.element.classList.remove("container-identity-dragged-over") 95 | }) 96 | 97 | this.element.addEventListener("dragend", (e) => { 98 | this.element.classList.remove("container-identity-dragged-over") 99 | document.body.classList.remove("container-dragged") 100 | }) 101 | } 102 | 103 | _handleTabCreated(newTab) { 104 | if (newTab.cookieStoreId !== this.id) return 105 | super._handleTabCreated(newTab) 106 | } 107 | 108 | async _actionNewTab(options = {}) { 109 | await super._actionNewTab(options) 110 | await browser.tabs.create({ 111 | ...options, 112 | cookieStoreId: this.id, 113 | }) 114 | } 115 | 116 | refresh(contextualIdentity) { 117 | this.contextualIdentity = contextualIdentity 118 | this.render(false) 119 | } 120 | 121 | async _queryTabs() { 122 | return await browser.tabs.query({ 123 | currentWindow: true, 124 | cookieStoreId: this.id, 125 | pinned: false, 126 | }) 127 | } 128 | 129 | get title() { 130 | return this.contextualIdentity.name 131 | } 132 | 133 | get _faviconURL() { 134 | return `/assets/contextual-identities/${this.contextualIdentity.icon}.svg#${this.contextualIdentity.color}` 135 | } 136 | 137 | async render(renderTabs) { 138 | this.elements.containerHeader.style.borderLeftColor = 139 | this.contextualIdentity.colorCode 140 | this.elements.icon.style.fill = this.contextualIdentity.colorCode 141 | return await super.render(renderTabs) 142 | } 143 | 144 | supportsCookieStore(cookieStoreId) { 145 | return this.id === cookieStoreId 146 | } 147 | 148 | async updateContextualIdentity(contextualIdentity) { 149 | this.contextualIdentity = contextualIdentity 150 | await this.render(false) 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /src/sidebar/containers/pinned.js: -------------------------------------------------------------------------------- 1 | import AbstractTabContainer from "./container.js" 2 | 3 | export default class PinnedTabsContainer extends AbstractTabContainer { 4 | constructor(id, window, config, sessionStore, element) { 5 | super(id, window, config, element) 6 | } 7 | 8 | async _handleDrop(tab, pinned, tabCtxId, index) { 9 | if (!pinned) { 10 | await browser.tabs.update(tab.id, { 11 | pinned: true, 12 | }) 13 | } 14 | browser.tabs.move(tab.id, { 15 | windowId: this._window.id, 16 | index: index, 17 | }) 18 | } 19 | 20 | _handleTabCreated(newTab) { 21 | if (!newTab.pinned) return 22 | super._handleTabCreated(newTab) 23 | } 24 | 25 | _handleTabPinned(tabId, change, tab) { 26 | if (!tab.pinned) { 27 | this.removeTab(tabId) 28 | } else { 29 | this.render(true) 30 | } 31 | } 32 | 33 | async render(updateTabs) { 34 | super.render(updateTabs) 35 | if (updateTabs) { 36 | let tabs = await browser.tabs.query({ 37 | currentWindow: true, 38 | pinned: true, 39 | }) 40 | this.renderTabs(this.element, tabs) 41 | this.render(false) 42 | } 43 | } 44 | 45 | supportsCookieStore(cookieStoreId) { 46 | return true 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/sidebar/containers/temporary.js: -------------------------------------------------------------------------------- 1 | import VerticalContainer from "./vertical.js" 2 | import { 3 | openTabInTemporaryContainer, 4 | isInstalled, 5 | } from "../interop/temporary_containers.js" 6 | 7 | export default class TemporaryContainer extends VerticalContainer { 8 | constructor(id, window, config, sessionStorage) { 9 | super(id, window, config, sessionStorage) 10 | this.cookieStoreIds = [] 11 | } 12 | 13 | attachContextualIdentity(cookieStoreId) { 14 | this.cookieStoreIds.push(cookieStoreId) 15 | this.render(true) 16 | } 17 | 18 | detachContextualIdentity(cookieStoreId) { 19 | let idx = this.cookieStoreIds.indexOf(cookieStoreId) 20 | this.cookieStoreIds.splice(idx, 1) 21 | if (idx !== -1) { 22 | this.render(true) 23 | } 24 | } 25 | 26 | async _actionNewTab(options = {}) { 27 | await super._actionNewTab(options) 28 | await openTabInTemporaryContainer(options.url || "") 29 | } 30 | 31 | async _queryTabs() { 32 | let tabs = await browser.tabs.query({ 33 | currentWindow: true, 34 | pinned: false, 35 | }) 36 | return tabs.filter( 37 | (tab) => this.cookieStoreIds.indexOf(tab.cookieStoreId) != -1 38 | ) 39 | } 40 | 41 | get _faviconURL() { 42 | return `/assets/temporary-containers.png` 43 | } 44 | 45 | get title() { 46 | return `Temporary containers` 47 | } 48 | 49 | async render(renderTabs) { 50 | if (this.cookieStoreIds.length === 0 && !(await isInstalled())) { 51 | this.element.style.display = "none" 52 | return 53 | } 54 | this.element.style.display = "initial" 55 | return await super.render(renderTabs) 56 | } 57 | 58 | supportsCookieStore(cookieStoreId) { 59 | return this.cookieStoreIds.indexOf(cookieStoreId) !== -1 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/sidebar/containers/vertical.js: -------------------------------------------------------------------------------- 1 | import AbstractTabContainer from "./container.js" 2 | 3 | function _createRootElement() { 4 | return document 5 | .getElementById("vertical-container-template") 6 | .content.cloneNode(true) 7 | .querySelector("li") 8 | } 9 | 10 | export default class VerticalContainer extends AbstractTabContainer { 11 | constructor(id, window, config, sessionStorage) { 12 | super(id, window, config, _createRootElement()) 13 | this._sessionStorage = sessionStorage 14 | } 15 | 16 | init() { 17 | this.elements = { 18 | containerHeader: this.element.querySelector(".container-header"), 19 | icon: this.element.querySelector(".container-icon"), 20 | title: this.element.querySelector(".container-title"), 21 | tabCount: this.element.querySelector(".container-tab-count"), 22 | actions: this.element.querySelector(".container-actions"), 23 | newTab: this.element.querySelector(".container-action--newtab"), 24 | collapse: this.element.querySelector(".container-action--collapse"), 25 | tabsContainer: this.element.querySelector(".container-tabs"), 26 | } 27 | super.init() 28 | this.elements.newTab.addEventListener("click", (evt) => { 29 | evt.stopPropagation() 30 | this._actionNewTab() 31 | }) 32 | this.elements.containerHeader.addEventListener("click", () => 33 | this.collapsed(!this.collapsed()) 34 | ) 35 | 36 | this.elements.containerHeader.addEventListener("contextmenu", (e) => 37 | browser.menus.overrideContext({ 38 | showDefaults: false, 39 | }) 40 | ) 41 | } 42 | 43 | async _handleDrop(tab, pinned, tabCtxId, index) { 44 | let tabId = tab.id 45 | if (this.supportsCookieStore(tabCtxId)) { 46 | if (pinned) { 47 | let updated = await browser.tabs.update(tabId, { 48 | pinned: false, 49 | }) 50 | index += updated.index < index ? 0 : 1 51 | } else { 52 | index += tab.index < index ? -1 : 0 53 | } 54 | browser.tabs.move(tabId, { 55 | windowId: this._window.id, 56 | index: index, 57 | }) 58 | } else { 59 | let tab = await browser.tabs.get(tabId) 60 | // moving tabs between containers 61 | let tabInfo = { 62 | // pinned: tab.pinned, 63 | openInReaderMode: tab.isInReaderMode, 64 | cookieStoreId: this.id, 65 | } 66 | 67 | if (index !== -1) { 68 | tabInfo["index"] = index 69 | } 70 | 71 | // firefox treats about:newtab as privileged url, but not setting the url allows us to create that page 72 | if (tab.url !== "about:newtab") { 73 | tabInfo.url = tab.url 74 | } 75 | await this._actionNewTab(tabInfo) 76 | await browser.tabs.remove(tabId) 77 | } 78 | } 79 | 80 | async _handleTabActivated(change) { 81 | if (this.tabs.has(change.tabId)) { 82 | await this.collapsed(false) 83 | } else if (!!this._config["collapse_container"]) { 84 | await this.collapsed(true) 85 | } 86 | super._handleTabActivated(change) 87 | } 88 | 89 | async _handleTabCreated(newTab) { 90 | if (newTab.windowId !== this._window.id) return 91 | await this.render(true) 92 | const renderedTab = this.tabs.get(newTab.id) 93 | if (renderedTab) { 94 | if (newTab.active) { 95 | await this.collapsed(false) 96 | } 97 | renderedTab.scrollIntoView() 98 | } 99 | } 100 | 101 | _handleTabPinned(tabId, change, tab) { 102 | if (tab.pinned) { 103 | this.removeTab(tabId) 104 | } else { 105 | this.render(true) 106 | } 107 | } 108 | 109 | async _actionNewTab(options) {} 110 | 111 | collapsed(val) { 112 | if (typeof val === "undefined") { 113 | return this._sessionStorage["collapsed"] 114 | } 115 | 116 | if (this._sessionStorage["collapsed"] === val) return 117 | this._sessionStorage["collapsed"] = val 118 | return this.render(false) 119 | } 120 | 121 | async _queryTabs() { 122 | throw "_queryTabs() not implemented" 123 | } 124 | 125 | get _faviconURL() { 126 | return this.contextualIdentity.iconUrl 127 | } 128 | 129 | get title() { 130 | throw "get title() not implemented" 131 | } 132 | 133 | async render(updateTabs) { 134 | if (updateTabs) { 135 | let tabs = await this._queryTabs() 136 | this.renderTabs(this.elements.tabsContainer, tabs) 137 | } 138 | await super.render(updateTabs) 139 | // styling (border according to container config) 140 | const containerHeader = this.elements.containerHeader 141 | 142 | // favicon 143 | this.elements.icon.src = this._faviconURL 144 | 145 | // title 146 | const titleElement = this.elements.title 147 | titleElement.innerText = this.title 148 | 149 | // tab count 150 | this.elements.tabCount.innerText = this.tabs.size 151 | 152 | // collapse 153 | const collapsed = this.collapsed() 154 | this.elements.collapse.innerText = collapsed ? "▴" : "▾" 155 | if (collapsed) { 156 | this.element.classList.add("collapsed") 157 | } else { 158 | this.element.classList.remove("collapsed") 159 | } 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /src/sidebar/contextmenu/base.js: -------------------------------------------------------------------------------- 1 | const SIDEBAR_URL_PATTERN = `moz-extension://${location.host}/*` 2 | export const DEFAULT_MENU_ITEM_OPTIONS = { 3 | viewTypes: ["sidebar"], 4 | documentUrlPatterns: [SIDEBAR_URL_PATTERN], 5 | } 6 | const optionHandlers = new Map() 7 | 8 | export function addOption(options, clickHandler, openHandler) { 9 | if (!("id" in options)) { 10 | throw new Error("item options should include id field") 11 | } 12 | let item = { 13 | ...DEFAULT_MENU_ITEM_OPTIONS, 14 | ...options, 15 | } 16 | optionHandlers.set(item.id, { 17 | contexts: options.contexts, 18 | click: clickHandler, 19 | open: openHandler, 20 | }) 21 | browser.menus.create(item) 22 | } 23 | 24 | function includesAny(arr, incl) { 25 | for (let searched of incl) { 26 | if (arr.includes(searched)) { 27 | return true 28 | } 29 | } 30 | return false 31 | } 32 | var lastMenuInstanceId = 0 33 | var nextMenuInstanceId = 1 34 | 35 | async function init() { 36 | await browser.menus.removeAll() 37 | 38 | browser.menus.onClicked.addListener(async (info, tab) => { 39 | let window = await browser.windows.getCurrent() 40 | if (!!tab && tab.windowId !== window.id) return 41 | if (optionHandlers.has(info.menuItemId)) { 42 | await optionHandlers.get(info.menuItemId).click(info, tab) 43 | } 44 | }) 45 | 46 | browser.menus.onShown.addListener(async (info, tab) => { 47 | if (info.viewType != "sidebar") { 48 | return 49 | } 50 | 51 | var menuInstanceId = nextMenuInstanceId++ 52 | lastMenuInstanceId = menuInstanceId 53 | 54 | if (menuInstanceId !== lastMenuInstanceId) { 55 | return 56 | } 57 | 58 | for (let menuId of optionHandlers.keys()) { 59 | let menuItem = optionHandlers.get(menuId) 60 | // more checks 61 | if (!includesAny(info.contexts, menuItem.contexts)) { 62 | continue 63 | } 64 | 65 | if (!menuItem || !(typeof menuItem.open == "function")) { 66 | continue 67 | } 68 | let update = await menuItem.open(info, tab) 69 | if (update) { 70 | await browser.menus.update(menuId, update) 71 | } 72 | } 73 | 74 | browser.menus.refresh() 75 | }) 76 | 77 | browser.menus.onHidden.addListener(async (info, tab) => { 78 | lastMenuInstanceId = 0 79 | }) 80 | } 81 | 82 | if (typeof browser.menus.overrideContext == "function") { 83 | init() 84 | } 85 | -------------------------------------------------------------------------------- /src/sidebar/contextmenu/container.js: -------------------------------------------------------------------------------- 1 | import { addOption } from "./base.js" 2 | 3 | export async function init(sidebar) { 4 | function addContainerOption(options, handler) { 5 | addOption( 6 | { 7 | contexts: ["page"], 8 | ...options, 9 | }, 10 | async (info) => { 11 | handler(await getTabIdsFromInfo(info)) 12 | }, 13 | async (info) => { 14 | const tabs = await getTabIdsFromInfo(info) 15 | return { 16 | visible: !!tabs, 17 | enabled: !!tabs && tabs.length > 0, 18 | } 19 | } 20 | ) 21 | } 22 | 23 | async function getTabIdsFromInfo(info) { 24 | let element = browser.menus.getTargetElement(info.targetElementId) 25 | if (!element) { 26 | return null 27 | } 28 | 29 | let containerElement = element.closest(".container") 30 | if (!containerElement) { 31 | return null 32 | } 33 | 34 | let cookieStoreId = containerElement.getAttribute("data-container-id") 35 | if (!cookieStoreId) { 36 | return null 37 | } 38 | 39 | const container = sidebar.getContainerByCookieStoreId(cookieStoreId) 40 | if (!container) { 41 | return null 42 | } 43 | 44 | return container.getBrowserTabs().map((tab) => tab.id) 45 | } 46 | 47 | addContainerOption( 48 | { 49 | id: "reload-all", 50 | title: browser.i18n.getMessage("sidebar_menu_reloadAll"), 51 | }, 52 | async (tabIds) => { 53 | tabIds.forEach((tabId) => browser.tabs.reload(tabId)) 54 | } 55 | ) 56 | 57 | addContainerOption( 58 | { 59 | id: "close-all", 60 | title: browser.i18n.getMessage("sidebar_menu_closeAll"), 61 | }, 62 | async (tabIds) => { 63 | browser.tabs.remove(tabIds) 64 | } 65 | ) 66 | } 67 | -------------------------------------------------------------------------------- /src/sidebar/contextmenu/tab.js: -------------------------------------------------------------------------------- 1 | import { addOption, DEFAULT_MENU_ITEM_OPTIONS } from "./base.js" 2 | 3 | function addTabOption(options, clickHandler, openHandler) { 4 | addOption( 5 | { 6 | contexts: ["tab"], 7 | ...options, 8 | }, 9 | (info, tab) => clickHandler(tab), 10 | openHandler 11 | ) 12 | } 13 | 14 | function addReopenInContainerOption(container) { 15 | let itemOptions = { 16 | parentId: "reopen-in-container", 17 | id: `reopen-in-container:${container.cookieStoreId}`, 18 | title: `&${container.name}`, 19 | } 20 | if (container.icon) { 21 | itemOptions.icons = { 22 | 16: `/assets/contextual-identities/${container.icon}.svg#${container.color}`, 23 | } 24 | } 25 | addTabOption( 26 | itemOptions, 27 | (tab) => { 28 | let tabInfo = { 29 | pinned: tab.pinned, 30 | openInReaderMode: tab.isInReaderMode, 31 | cookieStoreId: container.cookieStoreId, 32 | } 33 | // firefox treats about:newtab as privileged url, but not setting the url allows us to create that page 34 | if (tab.url !== "about:newtab") { 35 | tabInfo.url = tab.url 36 | } 37 | browser.tabs.create(tabInfo).then(() => { 38 | browser.tabs.remove(tab.id) 39 | }) 40 | }, 41 | (info, tab) => { 42 | return { 43 | visible: container.cookieStoreId != tab.cookieStoreId, 44 | } 45 | } 46 | ) 47 | } 48 | 49 | const contextualIdentities = new Set() 50 | async function updateContextualIdentities() { 51 | contextualIdentities.forEach((i) => 52 | browser.menus.remove(`reopen-in-container:${i.cookieStoreId}`) 53 | ) 54 | contextualIdentities.clear() 55 | 56 | let containers = await browser.contextualIdentities.query({}) 57 | 58 | containers.unshift({ 59 | cookieStoreId: browser.extension.inIncognitoContext 60 | ? "firefox-private" 61 | : "firefox-default", 62 | icon: "briefcase", 63 | color: "white", 64 | name: browser.i18n.getMessage( 65 | "sidebar_menu_reopenInContainer_noContainer" 66 | ), 67 | }) 68 | 69 | for (let container of containers) { 70 | addReopenInContainerOption(container) 71 | contextualIdentities.add(container) 72 | } 73 | } 74 | 75 | async function initReopenInContainer() { 76 | addTabOption({ 77 | id: "reopen-in-container", 78 | title: browser.i18n.getMessage("sidebar_menu_reopenInContainer"), 79 | }) 80 | 81 | browser.contextualIdentities.onRemoved.addListener( 82 | updateContextualIdentities 83 | ) 84 | browser.contextualIdentities.onCreated.addListener( 85 | updateContextualIdentities 86 | ) 87 | browser.contextualIdentities.onUpdated.addListener( 88 | updateContextualIdentities 89 | ) 90 | await updateContextualIdentities() 91 | } 92 | 93 | export async function init(sidebar) { 94 | addTabOption( 95 | { 96 | id: "new-tab", 97 | title: browser.i18n.getMessage("sidebar_menu_newTab"), 98 | }, 99 | (tab) => 100 | browser.tabs.create({ 101 | cookieStoreId: tab.cookieStoreId, 102 | }) 103 | ) 104 | 105 | addTabOption({ 106 | id: "new-tab-separator", 107 | type: "separator", 108 | }) 109 | 110 | addTabOption( 111 | { 112 | id: "reload-tab", 113 | title: browser.i18n.getMessage("sidebar_menu_reloadTab"), 114 | }, 115 | (tab) => browser.tabs.reload(tab.id) 116 | ) 117 | 118 | addTabOption( 119 | { 120 | id: "mute-tab", 121 | title: browser.i18n.getMessage("sidebar_menu_muteTab"), 122 | }, 123 | (tab) => 124 | browser.tabs.update(tab.id, { 125 | muted: !(tab.mutedInfo && tab.mutedInfo.muted), 126 | }), 127 | (info, tab) => { 128 | return { 129 | title: 130 | tab.mutedInfo && tab.mutedInfo.muted 131 | ? browser.i18n.getMessage("sidebar_menu_unmuteTab") 132 | : browser.i18n.getMessage("sidebar_menu_muteTab"), 133 | } 134 | } 135 | ) 136 | 137 | addTabOption( 138 | { 139 | id: "pin-tab", 140 | title: browser.i18n.getMessage("sidebar_menu_pinTab"), 141 | }, 142 | (tab) => 143 | browser.tabs.update(tab.id, { 144 | pinned: !tab.pinned, 145 | }), 146 | (info, tab) => { 147 | return { 148 | title: !tab.pinned 149 | ? browser.i18n.getMessage("sidebar_menu_pinTab") 150 | : browser.i18n.getMessage("sidebar_menu_unpinTab"), 151 | } 152 | } 153 | ) 154 | 155 | addTabOption( 156 | { 157 | id: "duplicate-tab", 158 | title: browser.i18n.getMessage("sidebar_menu_duplicateTab"), 159 | }, 160 | (tab) => browser.tabs.duplicate(tab.id) 161 | ) 162 | 163 | addTabOption({ 164 | id: "duplicate-tab-separator", 165 | type: "separator", 166 | }) 167 | 168 | addTabOption({ 169 | id: "move-to", 170 | title: browser.i18n.getMessage("sidebar_menu_moveTabTo"), 171 | }) 172 | 173 | addTabOption( 174 | { 175 | id: "move-to-start", 176 | title: browser.i18n.getMessage("sidebar_menu_moveTabToStart"), 177 | parentId: "move-to", 178 | }, 179 | (tab) => 180 | browser.tabs.move(tab.id, { 181 | index: 0, 182 | }) 183 | ) 184 | 185 | addTabOption( 186 | { 187 | id: "move-to-end", 188 | title: browser.i18n.getMessage("sidebar_menu_moveTabToEnd"), 189 | parentId: "move-to", 190 | }, 191 | (tab) => 192 | browser.tabs.move(tab.id, { 193 | index: -1, 194 | }) 195 | ) 196 | 197 | addTabOption( 198 | { 199 | id: "move-to-new-window", 200 | title: browser.i18n.getMessage("sidebar_menu_moveTabToNewWindow"), 201 | parentId: "move-to", 202 | }, 203 | (tab) => 204 | browser.windows.create({ 205 | tabId: tab.id, 206 | }) 207 | ) 208 | 209 | await initReopenInContainer() 210 | 211 | addTabOption({ 212 | id: "open-in-new-separator", 213 | type: "separator", 214 | }) 215 | 216 | addTabOption( 217 | { 218 | id: "close-tab", 219 | title: browser.i18n.getMessage("sidebar_menu_closeTab"), 220 | }, 221 | (tab) => browser.tabs.remove(tab.id) 222 | ) 223 | 224 | addTabOption({ 225 | id: "close-multiple-tabs", 226 | title: browser.i18n.getMessage("sidebar_menu_closeMultipleTabs"), 227 | }) 228 | 229 | addTabOption( 230 | { 231 | id: "close-tabs-above", 232 | parentId: "close-multiple-tabs", 233 | title: browser.i18n.getMessage("sidebar_menu_closeTabsAbove"), 234 | }, 235 | async (tab) => { 236 | const container = sidebar.getContainerByCookieStoreId( 237 | tab.cookieStoreId 238 | ) 239 | const tabs = container 240 | .getBrowserTabs() 241 | .filter((t) => t.index < tab.index) 242 | await browser.tabs.remove(tabs.map((t) => t.id)) 243 | }, 244 | async (info, tab) => { 245 | const container = sidebar.getContainerByCookieStoreId( 246 | tab.cookieStoreId 247 | ) 248 | const tabs = container 249 | .getBrowserTabs() 250 | .filter((t) => t.index < tab.index) 251 | 252 | return { 253 | enabled: tabs.length > 0, 254 | visible: !tab.pinned, 255 | } 256 | } 257 | ) 258 | 259 | addTabOption( 260 | { 261 | id: "close-tabs-below", 262 | parentId: "close-multiple-tabs", 263 | title: browser.i18n.getMessage("sidebar_menu_closeTabsBelow"), 264 | }, 265 | async (tab) => { 266 | const container = sidebar.getContainerByCookieStoreId( 267 | tab.cookieStoreId 268 | ) 269 | const tabs = container 270 | .getBrowserTabs() 271 | .filter((t) => t.index > tab.index) 272 | await browser.tabs.remove(tabs.map((t) => t.id)) 273 | }, 274 | async (info, tab) => { 275 | const container = sidebar.getContainerByCookieStoreId( 276 | tab.cookieStoreId 277 | ) 278 | const tabs = container 279 | .getBrowserTabs() 280 | .filter((t) => t.index > tab.index) 281 | 282 | return { 283 | enabled: tabs.length > 0, 284 | visible: !tab.pinned, 285 | } 286 | } 287 | ) 288 | 289 | addTabOption( 290 | { 291 | id: "close-others", 292 | parentId: "close-multiple-tabs", 293 | title: browser.i18n.getMessage("sidebar_menu_closeOtherTabs"), 294 | }, 295 | async (tab) => { 296 | const container = sidebar.getContainerByCookieStoreId( 297 | tab.cookieStoreId 298 | ) 299 | const tabs = container 300 | .getBrowserTabs() 301 | .filter((t) => t.id !== tab.id) 302 | await browser.tabs.remove(tabs.map((t) => t.id)) 303 | }, 304 | async (info, tab) => { 305 | const container = sidebar.getContainerByCookieStoreId( 306 | tab.cookieStoreId 307 | ) 308 | const tabs = container 309 | .getBrowserTabs() 310 | .filter((t) => t.id !== tab.id) 311 | 312 | return { 313 | enabled: tabs.length > 1, 314 | visible: !tab.pinned, 315 | } 316 | } 317 | ) 318 | 319 | addTabOption( 320 | { 321 | id: "undo-closed-tab", 322 | title: browser.i18n.getMessage("sidebar_menu_undoClosedTab"), 323 | }, 324 | async () => { 325 | let sessions = await browser.sessions.getRecentlyClosed({ 326 | maxResults: 1, 327 | }) 328 | if (!sessions.length) return 329 | let sessionInfo = sessions[0] 330 | if (sessionInfo.tab) { 331 | browser.sessions.restore(sessionInfo.tab.sessionId) 332 | } 333 | }, 334 | async () => { 335 | let sessions = await browser.sessions.getRecentlyClosed({ 336 | maxResults: 1, 337 | }) 338 | return { 339 | enabled: !!sessions.length && !!sessions[0].tab, 340 | } 341 | } 342 | ) 343 | } 344 | -------------------------------------------------------------------------------- /src/sidebar/interop/container_moving.js: -------------------------------------------------------------------------------- 1 | export const CONTAINER_MOVED_EVENT = "contextualIdentityMoved" 2 | 3 | export const IS_CONTAINER_MOVING_ENABLED = 4 | typeof browser.contextualIdentities.move === "function" 5 | -------------------------------------------------------------------------------- /src/sidebar/interop/temporary_containers.js: -------------------------------------------------------------------------------- 1 | async function sendMessage(message) { 2 | return await browser.runtime.sendMessage( 3 | "{c607c8df-14a7-4f28-894f-29e8722976af}", 4 | message 5 | ) 6 | } 7 | 8 | export async function isTemporaryContainer(cookieStoreId) { 9 | try { 10 | return await sendMessage({ 11 | method: "isTempContainer", 12 | cookieStoreId: cookieStoreId, 13 | }) 14 | } catch (e) { 15 | return false 16 | } 17 | } 18 | 19 | export async function openTabInTemporaryContainer(url) { 20 | try { 21 | return await sendMessage({ 22 | method: "createTabInTempContainer", 23 | url: url, 24 | active: true, 25 | }) 26 | } catch (e) { 27 | return undefined 28 | } 29 | } 30 | 31 | export async function isInstalled() { 32 | try { 33 | await sendMessage({ method: "isTempContainer" }) 34 | return true 35 | } catch (e) { 36 | return false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/sidebar/sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 11 |
12 |
13 | 15 |
16 | 29 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/sidebar/sidebar.js: -------------------------------------------------------------------------------- 1 | import { 2 | TEMPORARY_CONTAINER_COOKIE_STORE_ID, 3 | PINNED_CONTAINER_COOKIE_STORE_ID, 4 | } from "../constants.js" 5 | import { getConfig, getSessionStorage } from "../settings.js" 6 | import { loadAppearance } from "./theme/appearance.js" 7 | import PinnedTabsContainer from "./containers/pinned.js" 8 | import ContextualIdentityContainer from "./containers/contextual.js" 9 | import { init as initContainerContextMenu } from "./contextmenu/container.js" 10 | import { init as initTabContextMenu } from "./contextmenu/tab.js" 11 | import TemporaryContainer from "./containers/temporary.js" 12 | import { isTemporaryContainer } from "./interop/temporary_containers.js" 13 | import { 14 | IS_CONTAINER_MOVING_ENABLED, 15 | CONTAINER_MOVED_EVENT, 16 | } from "./interop/container_moving.js" 17 | import { enable as enableTabOrderKeeping } from "./tab_order_keeper.js" 18 | 19 | export const ContainerTabsSidebar = { 20 | containers: new Map(), 21 | elements: {}, 22 | 23 | // There exists a browser.windows.WINDOW_ID_CURRENT, but it yields some negative value 24 | // It's impossible to compare with ids some events are providing in callbacks, therefore 25 | // you should get the current window id by browser.windows.getCurrent and provide the value to this function 26 | init(window, config, sessionStorage) { 27 | this.config = config 28 | this.sessionStorage = sessionStorage 29 | this.window = window 30 | const containersList = document.getElementById("containers") 31 | this.elements.containersList = containersList 32 | 33 | loadAppearance(config) 34 | initContainerContextMenu(this) 35 | initTabContextMenu(this) 36 | 37 | // Setup Special Containers 38 | this.pinnedTabs = this.createContainer( 39 | PinnedTabsContainer, 40 | PINNED_CONTAINER_COOKIE_STORE_ID, 41 | document.getElementById("pinned-tabs") 42 | ) 43 | 44 | this.temporaryContainer = this.createContainer( 45 | TemporaryContainer, 46 | TEMPORARY_CONTAINER_COOKIE_STORE_ID 47 | ) 48 | this.elements.containersList.appendChild( 49 | this.temporaryContainer.element 50 | ) 51 | 52 | this._initContextualIdentities() 53 | }, 54 | 55 | _initContextualIdentities() { 56 | browser.contextualIdentities.onRemoved.addListener((evt) => 57 | this.removeContextualIdentity(evt.contextualIdentity.cookieStoreId) 58 | ) 59 | 60 | browser.contextualIdentities.onCreated.addListener((evt) => 61 | this.addContextualIdentity(evt.contextualIdentity) 62 | ) 63 | 64 | browser.contextualIdentities.onUpdated.addListener((evt) => 65 | this.updateContextualIdentity(evt.contextualIdentity) 66 | ) 67 | 68 | if (!!this.config["cycle_tabs_in_order"]) { 69 | enableTabOrderKeeping() 70 | } 71 | 72 | browser.contextualIdentities.query({}).then((res) => { 73 | // Incognito does not support containers 74 | if (browser.extension.inIncognitoContext) { 75 | res.length = 0 76 | } 77 | this.render([ 78 | { 79 | cookieStoreId: browser.extension.inIncognitoContext 80 | ? "firefox-private" 81 | : "firefox-default", 82 | name: browser.i18n.getMessage( 83 | browser.extension.inIncognitoContext 84 | ? "containerIncognito" 85 | : "containerDefault" 86 | ), 87 | iconUrl: "resource://usercontext-content/briefcase.svg", 88 | icon: "briefcase", 89 | color: "white", 90 | colorCode: "#ffffff", 91 | }, 92 | ...res, 93 | ]) 94 | this.pinnedTabs.init() 95 | }) 96 | 97 | if (IS_CONTAINER_MOVING_ENABLED) { 98 | this.elements.containersList.addEventListener( 99 | CONTAINER_MOVED_EVENT, 100 | (e) => { 101 | const moved = this.containers.get( 102 | e.detail.contextualIdentity 103 | ) 104 | const movedAfter = this.containers.get(e.detail.after) 105 | moved.element.parentNode.removeChild(moved.element) 106 | this.elements.containersList.insertBefore( 107 | moved.element, 108 | movedAfter.element.nextSibling 109 | ) 110 | } 111 | ) 112 | } 113 | }, 114 | 115 | /** 116 | * Removes a container from DOM, does not remove it from a browser 117 | * @param {string} cookieStoreId - contextual identity id 118 | */ 119 | async removeContextualIdentity(cookieStoreId) { 120 | this.temporaryContainer.detachContextualIdentity(cookieStoreId) 121 | 122 | if (!this.containers.has(cookieStoreId)) return 123 | const container = this.containers.get(cookieStoreId) 124 | this.containers.delete(cookieStoreId) 125 | container.element.parentNode.removeChild(container.element) 126 | }, 127 | 128 | /** 129 | * Adds contextual identity to DOM 130 | * @param {string} contextualIdentity 131 | */ 132 | async addContextualIdentity(contextualIdentity) { 133 | if (await isTemporaryContainer(contextualIdentity.cookieStoreId)) { 134 | this.temporaryContainer.attachContextualIdentity( 135 | contextualIdentity.cookieStoreId 136 | ) 137 | return 138 | } 139 | const ctsContainer = this.createContainer( 140 | ContextualIdentityContainer, 141 | contextualIdentity.cookieStoreId, 142 | contextualIdentity 143 | ) 144 | this.elements.containersList.insertBefore( 145 | ctsContainer.element, 146 | this.temporaryContainer.element 147 | ) 148 | }, 149 | 150 | async updateContextualIdentity(contextualIdentity) { 151 | const isInTemporary = this.temporaryContainer.supportsCookieStore( 152 | contextualIdentity.cookieStoreId 153 | ) 154 | const isTemporary = await isTemporaryContainer( 155 | contextualIdentity.cookieStoreId 156 | ) 157 | 158 | if (isInTemporary && !isTemporary) { 159 | this.temporaryContainer.detachContextualIdentity( 160 | contextualIdentity.cookieStoreId 161 | ) 162 | this.addContextualIdentity(contextualIdentity) 163 | } else if (!isInTemporary && isTemporary) { 164 | this.removeContextualIdentity(contextualIdentity.cookieStoreId) 165 | this.temporaryContainer.attachContextualIdentity( 166 | contextualIdentity.cookieStoreId 167 | ) 168 | } else if (!isTemporary) { 169 | this.containers 170 | .get(contextualIdentity.cookieStoreId) 171 | .updateContextualIdentity(contextualIdentity) 172 | } 173 | }, 174 | 175 | render(containers) { 176 | for (let firefoxContainer of containers) { 177 | this.addContextualIdentity(firefoxContainer) 178 | } 179 | }, 180 | 181 | createContainer(containerClass, containerId, ...args) { 182 | const sessionStorage = this.getSessionStorage(containerId) 183 | const container = new containerClass( 184 | containerId, 185 | this.window, 186 | this.config, 187 | sessionStorage, 188 | ...args 189 | ) 190 | container.init() 191 | this.containers.set(containerId, container) 192 | return container 193 | }, 194 | 195 | getSessionStorage(id) { 196 | if (!this.sessionStorage[id]) { 197 | this.sessionStorage[id] = {} 198 | } 199 | return this.sessionStorage[id] 200 | }, 201 | 202 | getContainerByCookieStoreId(cookieStoreId) { 203 | const isTemporaryContainer = 204 | this.temporaryContainer.supportsCookieStore(cookieStoreId) 205 | 206 | if (isTemporaryContainer) { 207 | return this.temporaryContainer 208 | } 209 | 210 | return this.containers.get(cookieStoreId) 211 | }, 212 | } 213 | 214 | async function init() { 215 | let window = await browser.windows.getCurrent() 216 | let config = await getConfig() 217 | let sessionStorage = await getSessionStorage(window) 218 | ContainerTabsSidebar.init(window, config, sessionStorage) 219 | } 220 | 221 | browser.storage.onChanged.addListener(() => { 222 | window.location.reload() 223 | }) 224 | 225 | init() 226 | -------------------------------------------------------------------------------- /src/sidebar/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --padding: 0.45em; 3 | } 4 | body, 5 | html { 6 | box-sizing: border-box; 7 | background: var(--color-background); 8 | color: var(--color-text); 9 | overflow: hidden; 10 | height: 100%; 11 | } 12 | 13 | a, a:link, a:visited { 14 | color: inherit; 15 | text-decoration: none; 16 | } 17 | 18 | #pinned-tabs { 19 | display: flex; 20 | flex-wrap: wrap; 21 | margin: 0; 22 | padding: 0; 23 | transition: 0.1s ease-in min-height; 24 | width: 100%; 25 | } 26 | 27 | #pinned-tabs[data-tabs-count~="0"] { 28 | min-height: 29px; 29 | } 30 | 31 | body.hide-empty-pinned:not(.tab-dragged) #pinned-tabs[data-tabs-count="0"] { 32 | height: 0; 33 | min-height: 0; 34 | } 35 | 36 | .tab-dragged #pinned-tabs:empty::after, body:not(.hide-empty-pinned) #pinned-tabs:empty::after { 37 | transform: translateY(0); 38 | } 39 | 40 | #pinned-tabs:empty::after { 41 | content: '__MSG_sidebar_dragToPin__'; 42 | transition: 0.05s ease-in transform; 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | transform: translateY(-100%); 47 | width: 100%; 48 | text-align: center; 49 | color: var(--color-accent); 50 | line-height: 29px; 51 | } 52 | 53 | #pinned-tabs .container-tab { 54 | flex-basis: 20x; 55 | border-top: 3px solid var(--color-default-container); 56 | } 57 | 58 | main { 59 | height: 100%; 60 | width: 100%; 61 | overflow-y: auto; 62 | } 63 | 64 | #containers { 65 | padding: 0; 66 | margin: 0; 67 | } 68 | 69 | .container { 70 | width: 100%; 71 | line-height: 1.3em; 72 | vertical-align: middle; 73 | color: var(--color-text); 74 | } 75 | 76 | li { 77 | list-style: none; 78 | } 79 | 80 | .container-header { 81 | width: 100%; 82 | padding: calc(var(--padding) / 3); 83 | background: var(--color-container-background); 84 | display: flex; 85 | align-items: center; 86 | align-content: center; 87 | border-left-width: 0.3em; 88 | border-left-style: solid; 89 | } 90 | 91 | .container-header .container-icon { 92 | width: 25px; 93 | min-width: 25px; 94 | padding: 0 calc(var(--padding) / 2); 95 | margin: 0; 96 | } 97 | 98 | .container-header:hover { 99 | cursor: pointer; 100 | } 101 | 102 | .container-tabs { 103 | width: 100%; 104 | display: block; 105 | padding-inline-start: 0.3em; 106 | } 107 | 108 | .container-tab { 109 | background: var(--color-tab-background); 110 | list-style: none; 111 | display: flex; 112 | align-items: center; 113 | align-content: center; 114 | position: relative; 115 | padding: var(--padding); 116 | } 117 | 118 | .container-tabs li:not(:last-child) .container-tab{ 119 | border-bottom: 1px solid var(--color-background); 120 | } 121 | 122 | .container-tab:hover { 123 | cursor: pointer; 124 | background: var(--color-hover) 125 | } 126 | 127 | .container-tab .favicon { 128 | flex-basis: 16px; 129 | max-width: 16px; 130 | height: 16px; 131 | } 132 | 133 | .container.collapsed ul { 134 | display: none; 135 | visibility: collapse; 136 | } 137 | 138 | .container-actions { 139 | display: flex; 140 | justify-content: center; 141 | margin-left: auto; 142 | color: var(--color-text); 143 | } 144 | 145 | .container-actions .container-action { 146 | margin: 2px; 147 | padding: 5px; 148 | border-radius: 3px; 149 | background: var(--color-container-background) 150 | } 151 | 152 | .container-actions .container-action:hover, 153 | .container-tab-close:hover, .container-tab-action:hover { 154 | background: rgba(255, 255, 255, 0.1); 155 | } 156 | 157 | .container-tab-title { 158 | margin-left: 0.2em; 159 | flex-basis: 100%; 160 | } 161 | 162 | body:not(.wrap-titles) .container-tab-title, .container-title { 163 | overflow: hidden; 164 | white-space: nowrap; 165 | text-overflow: ellipsis; 166 | } 167 | 168 | .container-actions .container-action--newtab { 169 | font-size: 20px; 170 | } 171 | 172 | .tab-active, 173 | .tab-active:hover { 174 | background: var(--color-focus) 175 | } 176 | 177 | .container-tab:hover .container-tab-close { 178 | display: flex; 179 | } 180 | 181 | .container-tab-close, .container-tab-action { 182 | padding: 0em; 183 | margin-left: 0.1em; 184 | display: none; 185 | color: var(--color-close); 186 | font-size: 1.5em; 187 | align-items: center; 188 | border-radius: 3px; 189 | align-self: stretch; 190 | text-align: center; 191 | } 192 | 193 | .container-tab-action--mute { 194 | margin-left: auto; 195 | opacity: 0.7; 196 | flex-basis: 16px; 197 | min-width: 16px; 198 | height: 16px; 199 | display: none; 200 | } 201 | 202 | .container-tab-count { 203 | padding-left: 0.5ch; 204 | } 205 | 206 | .container-tab-count::before { 207 | content: '('; 208 | } 209 | 210 | .container-tab-count::after { 211 | content: ')'; 212 | } 213 | 214 | .audible.container-tab-action--mute { 215 | display: inline-block; 216 | } 217 | 218 | :not(.tab-pinned).container-tab-dragged-over, 219 | .container-dragged-over .container-header, .container-identity-dragged-over { 220 | border-bottom: 1px solid var(--color-text) !important; 221 | } 222 | 223 | #pinned-tabs .container-tab-dragged-over { 224 | border-right: 1px solid var(--color-text); 225 | } 226 | 227 | #pinned-tabs.container-dragged-over { 228 | border-left: 1px solid var(--color-text); 229 | } 230 | 231 | 232 | .tab-pinned .container-tab-action--mute { 233 | position: absolute; 234 | width: 8px; 235 | height: 12px; 236 | right: 0; 237 | top: 0; 238 | } 239 | 240 | .tab-pinned :not(.favicon):not(.container-tab-action--mute) { 241 | display: none !important; 242 | } 243 | 244 | .hide-empty [data-tabs-count="0"] { 245 | display: none; 246 | } 247 | -------------------------------------------------------------------------------- /src/sidebar/tab/tab.js: -------------------------------------------------------------------------------- 1 | const ICON_AUDIBLE = "../assets/audio.svg" 2 | const ICON_MUTED = "../assets/audio-muted.svg" 3 | const FAVICON_LOADING = "../assets/throbber.png" 4 | const FAVICON_FALLBACK = "../assets/no-favicon.svg" 5 | const FAVICON_FALLBACK_CLASS = "favicon-fallback" 6 | 7 | function createRootElement() { 8 | return document 9 | .getElementById("tab-template") 10 | .content.cloneNode(true) 11 | .querySelector("li") 12 | } 13 | 14 | export default class ContainerTab { 15 | constructor(window, container, tab) { 16 | this.tab = tab 17 | this.id = tab.id 18 | this.element = createRootElement() 19 | this._container = container 20 | this._window = window 21 | this._listeners = {} 22 | } 23 | 24 | init() { 25 | this._createElements() 26 | this.render() 27 | 28 | browser.tabs.onUpdated.addListener( 29 | (this._listeners.update = (id, change, tab) => { 30 | this.tab = tab 31 | this.render() 32 | }), 33 | { 34 | tabId: this.id, 35 | windowId: this._window.id, 36 | properties: [ 37 | "title", 38 | "favIconUrl", 39 | "status", 40 | "mutedInfo", 41 | "audible", 42 | ], 43 | } 44 | ) 45 | 46 | this.element.setAttribute("draggable", true) 47 | this.element.addEventListener("contextmenu", (e) => 48 | browser.menus.overrideContext({ 49 | context: "tab", 50 | tabId: this.id, 51 | }) 52 | ) 53 | 54 | this.element.addEventListener("dragstart", (e) => { 55 | e.dataTransfer.effectAllowed = "move" 56 | e.dataTransfer.setData( 57 | "tab/move", 58 | this.id + "/" + this.tab.cookieStoreId + "/" + this.tab.pinned 59 | ) 60 | this.element.classList.add("container-tab-dragged") 61 | document.body.classList.add("tab-dragged") 62 | }) 63 | 64 | this.element.addEventListener("dragover", (e) => { 65 | if (!e.dataTransfer.types.includes("tab/move")) { 66 | return 67 | } 68 | e.preventDefault() 69 | e.stopPropagation() 70 | e.dataTransfer.dropEffect = "move" 71 | this.elements["link"].classList.add("container-tab-dragged-over") 72 | return false 73 | }) 74 | 75 | this.element.addEventListener("dragleave", (e) => { 76 | this.elements["link"].classList.remove("container-tab-dragged-over") 77 | }) 78 | 79 | this.element.addEventListener("dragend", (e) => { 80 | this.elements["link"].classList.remove("container-tab-dragged-over") 81 | document.body.classList.remove("tab-dragged") 82 | }) 83 | } 84 | 85 | destroy() { 86 | browser.tabs.onUpdated.removeListener(this._listeners.update) 87 | } 88 | 89 | _createElements() { 90 | this.elements = { 91 | link: this.element.querySelector(".container-tab"), 92 | favicon: this.element.querySelector(".favicon"), 93 | title: this.element.querySelector(".container-tab-title"), 94 | audible: this.element.querySelector(".container-tab-action--mute"), 95 | close: this.element.querySelector(".container-tab-close"), 96 | } 97 | this.elements["link"].setAttribute("data-tab-id", this.tab.id) 98 | this.elements["link"].setAttribute("data-ci-id", this.tab.cookieStoreId) 99 | 100 | this.elements.favicon.addEventListener("error", () => { 101 | this.elements.favicon.src = FAVICON_FALLBACK 102 | this.elements.favicon.classList.add(FAVICON_FALLBACK_CLASS) 103 | }) 104 | 105 | this.elements.audible.addEventListener("click", (e) => { 106 | e.stopPropagation() 107 | e.preventDefault() 108 | browser.tabs.update(this.id, { 109 | muted: !(this.tab.mutedInfo && this.tab.mutedInfo.muted), 110 | }) 111 | }) 112 | 113 | this.elements.close.addEventListener( 114 | "click", 115 | this._removeCloseClick.bind(this) 116 | ) 117 | 118 | this.element.addEventListener("click", (e) => { 119 | // prevent reloading tab 120 | e.preventDefault() 121 | e.stopPropagation() 122 | if (e.button !== 0) return 123 | browser.tabs.update(this.id, { 124 | active: true, 125 | }) 126 | }) 127 | 128 | this.element.addEventListener("auxclick", (e) => { 129 | if (e.button !== 1) return 130 | this._removeCloseClick(e) 131 | }) 132 | 133 | if (this.tab.pinned) { 134 | browser.contextualIdentities 135 | .get(this.tab.cookieStoreId) 136 | .then((ci) => { 137 | this.elements["link"].style.borderColor = ci.colorCode 138 | }) 139 | } 140 | } 141 | 142 | _removeCloseClick(event) { 143 | event.stopPropagation() 144 | event.preventDefault() 145 | browser.tabs.remove(this.id) 146 | } 147 | 148 | activate() { 149 | if (this.tab.active) return 150 | this.tab.active = true 151 | this.render() 152 | this.scrollIntoView() 153 | } 154 | 155 | deactivate() { 156 | if (!this.tab.active) return 157 | this.tab.active = false 158 | this.render() 159 | } 160 | 161 | /** 162 | * Scrolls the tab element into view if it's outside 163 | */ 164 | scrollIntoView() { 165 | const box = this.element.getBoundingClientRect() 166 | if (box.top < 0 || box.bottom > window.innerHeight) { 167 | this.element.scrollIntoView({ 168 | block: "end", 169 | behavior: "auto", 170 | }) 171 | } 172 | } 173 | 174 | render() { 175 | let favIconUrl = FAVICON_FALLBACK 176 | if (this.tab.status === "loading") { 177 | favIconUrl = FAVICON_LOADING 178 | } else if (this.tab.favIconUrl) { 179 | favIconUrl = this.tab.favIconUrl 180 | } 181 | if (favIconUrl !== this.elements.favicon.src) { 182 | if (favIconUrl !== FAVICON_FALLBACK) { 183 | this.elements.favicon.classList.remove(FAVICON_FALLBACK_CLASS) 184 | } else { 185 | this.elements.favicon.classList.add(FAVICON_FALLBACK_CLASS) 186 | } 187 | this.elements.favicon.src = favIconUrl 188 | } 189 | 190 | let link = this.elements["link"] 191 | 192 | if (!this.tab.url.startsWith("about:")) { 193 | link.href = this.tab.url 194 | } 195 | this.elements.title.innerText = this.tab.title //+ ` - (${this.tab.index})` 196 | link.title = this.tab.title 197 | 198 | if (this.tab.active) { 199 | link.classList.add("tab-active") 200 | } else { 201 | link.classList.remove("tab-active") 202 | } 203 | if (this.tab.pinned) { 204 | link.classList.add("tab-pinned") 205 | } else { 206 | link.classList.remove("tab-pinned") 207 | } 208 | if (this.tab.mutedInfo && this.tab.mutedInfo.muted) { 209 | this.elements.audible.src = ICON_MUTED 210 | } else if (this.tab.audible) { 211 | this.elements.audible.src = ICON_AUDIBLE 212 | } 213 | if ( 214 | this.tab.audible || 215 | (this.tab.mutedInfo && this.tab.mutedInfo.muted) 216 | ) { 217 | this.elements.audible.classList.add("audible") 218 | } else { 219 | this.elements.audible.classList.remove("audible") 220 | } 221 | } 222 | } 223 | -------------------------------------------------------------------------------- /src/sidebar/tab_order_keeper.js: -------------------------------------------------------------------------------- 1 | import { isTemporaryContainer } from "./interop/temporary_containers.js" 2 | 3 | var tid 4 | function scheduleSortTabs() { 5 | if (!!tid) clearTimeout(tid) 6 | tid = setTimeout(sortTabs, 200) 7 | } 8 | 9 | async function getDesiredTabsOrder() { 10 | let tabs = await browser.tabs.query({ currentWindow: true, pinned: false }) 11 | let contextualIdentities = await Promise.all( 12 | ( 13 | await browser.contextualIdentities.query({}) 14 | ).map(async (ctx, index) => { 15 | const cookieStoreId = ctx.cookieStoreId 16 | // temporary containers are treated visually as a single container but report different cookieStoreIds 17 | // this will treat them as a single one 18 | const desiredOrder = (await isTemporaryContainer(cookieStoreId)) 19 | ? Number.MAX_SAFE_INTEGER 20 | : index + 1 21 | 22 | return { 23 | cookieStoreId: cookieStoreId, 24 | order: desiredOrder, 25 | } 26 | }) 27 | ) 28 | 29 | let getDesiredContextualIdentityPosition = (cookieStoreId) => { 30 | const containerInformation = contextualIdentities.find( 31 | (ci) => ci.cookieStoreId === cookieStoreId 32 | ) 33 | if (!containerInformation) { 34 | return 0 35 | } 36 | return containerInformation.order 37 | } 38 | 39 | let comparator = (tab1, tab2) => { 40 | let tab1ContainerOrder = getDesiredContextualIdentityPosition( 41 | tab1.cookieStoreId 42 | ) 43 | let tab2ContainerOrder = getDesiredContextualIdentityPosition( 44 | tab2.cookieStoreId 45 | ) 46 | if (tab1ContainerOrder !== tab2ContainerOrder) { 47 | return tab1ContainerOrder - tab2ContainerOrder 48 | } 49 | return tab1.index - tab2.index 50 | } 51 | 52 | let sorted = tabs 53 | .slice(1) 54 | .every((item, i) => comparator(tabs[i], item) <= 0) 55 | if (!sorted) { 56 | tabs.sort(comparator) 57 | } 58 | return { tabs: tabs, sorted: sorted } 59 | } 60 | 61 | async function sortTabs() { 62 | let { tabs, sorted } = await getDesiredTabsOrder() 63 | if (sorted) return 64 | await browser.tabs.move( 65 | tabs.map((tab) => tab.id), 66 | { index: -1 } 67 | ) 68 | } 69 | 70 | export function enable() { 71 | browser.tabs.onCreated.addListener(scheduleSortTabs) 72 | browser.tabs.onMoved.addListener(scheduleSortTabs) 73 | browser.tabs.onAttached.addListener(scheduleSortTabs) 74 | 75 | sortTabs() 76 | } 77 | -------------------------------------------------------------------------------- /src/sidebar/theme/appearance.js: -------------------------------------------------------------------------------- 1 | const DEFAULT_THEME = "dark" 2 | 3 | function injectStylesheet(file) { 4 | let link = document.createElement("link") 5 | link.href = file 6 | link.rel = "stylesheet" 7 | document.head.appendChild(link) 8 | } 9 | 10 | function injectCSS(css) { 11 | let style = document.createElement("style") 12 | style.type = "text/css" 13 | style.innerText = css 14 | document.head.appendChild(style) 15 | } 16 | 17 | export function loadAppearance(config) { 18 | if (!("theme" in config)) { 19 | config.theme = DEFAULT_THEME 20 | } 21 | injectStylesheet("theme/" + config.theme + ".css") 22 | 23 | if (!!config["wrap_titles"]) { 24 | document.body.classList.add("wrap-titles") 25 | } 26 | 27 | if (!!config["hide_empty"]) { 28 | document.body.classList.add("hide-empty") 29 | } 30 | 31 | if (!!config["hide_empty_pinned"]) { 32 | document.body.classList.add("hide-empty-pinned") 33 | } 34 | 35 | if (!!config["css"]) { 36 | injectCSS(config["css"]) 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/sidebar/theme/dark.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-background: #333; 3 | --color-text: #eee; 4 | --color-accent: #555; 5 | --color-hover:rgb(24, 24, 24); 6 | --color-focus: rgba(255, 255, 255, 0.116); 7 | --color-default-container: #fff; 8 | --color-container-background: #111; 9 | --color-container-border: #222; 10 | --color-tab-background: #222; 11 | --color-close: #ccc; 12 | --color-icon: #eee; 13 | } 14 | 15 | .tab-pinned .container-tab-action--mute:hover { 16 | filter: grayscale(1) invert(0); 17 | background: rgba(255,255,255,0.9) !important; 18 | opacity: 1; 19 | } 20 | 21 | :not(.tab-pinned) .container-tab-action--mute:hover { 22 | background: rgba(0, 0, 0,0.1); 23 | } 24 | 25 | .container-tab-action--mute { 26 | filter: grayscale(1) invert(100%); 27 | } 28 | 29 | .container-icon[src$=".png"] { 30 | filter: invert(); 31 | } -------------------------------------------------------------------------------- /src/sidebar/theme/grey.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-size: 12px; 3 | --color-hover: #2E2E2E; 4 | --color-focus: #424242; 5 | --color-text: #eee; 6 | --color-accent: #555; 7 | --color-background: #333; 8 | --color-tab-background: #333; 9 | --color-container-background: #2B2D30; 10 | --color-default-container: #fff; 11 | --color-container-border: #222; 12 | --color-close: #ccc; 13 | --color-icon: #eee; 14 | } 15 | .container-header { 16 | font-size: 10px; 17 | border-left-width: 0.4em; 18 | } 19 | .container-header .container-icon { 20 | display: none; 21 | } 22 | .container-header .container-title { 23 | text-transform: uppercase; 24 | margin-left: 0.8em; 25 | color: #999; 26 | padding: 8px 0px; 27 | } 28 | .container-header:last-of-type { 29 | border-color: green; 30 | } 31 | li.container:last-of-type .container-title { 32 | visibility: hidden; 33 | position: relative; 34 | } 35 | li.container:last-of-type .container-title:after { 36 | visibility: visible; 37 | position: absolute; 38 | left: 0; 39 | content: "tmp"; 40 | } 41 | .container-tab-count { 42 | padding-left: 0; 43 | margin-left: auto; 44 | color: #ccc; 45 | } 46 | .container-tab-count::before, .container-tab-count::after { 47 | content: ''; 48 | } 49 | .container-actions { 50 | margin-left: 0.3em; 51 | margin-right: 0.3em; 52 | } 53 | .container-actions .container-action { 54 | margin: 0; 55 | padding: 5px; 56 | font-size: 14px; 57 | } 58 | .container-tabs { 59 | width: 100%; 60 | display: block; 61 | padding-inline-start: 0; 62 | } 63 | .container-tabs .favicon { 64 | margin-right: 0.5em; 65 | order: 0; 66 | } 67 | .container-tab-title { 68 | text-transform: lowercase; 69 | flex-basis: 100%; 70 | color: #999; 71 | padding: 5px 0px; 72 | order: 2; 73 | } 74 | .tab-active .container-tab-title { 75 | text-transform: none; 76 | color: #fff; 77 | } 78 | .container-tab-action--mute { 79 | height: 12px; 80 | margin: auto 0; 81 | filter: grayscale(1) invert(100%); 82 | order: 1; 83 | } 84 | .tab-pinned .container-tab-action--mute:hover { 85 | filter: grayscale(1) invert(0); 86 | background: rgba(255,255,255,0.9) !important; 87 | opacity: 1; 88 | } 89 | :not(.tab-pinned) .container-tab-action--mute:hover { 90 | background: rgba(0, 0, 0,0.1); 91 | } 92 | .container-tab-close { 93 | padding: 0em 0.2em; 94 | margin-left: 0.3em; 95 | font-size: 14px; 96 | order: 3; 97 | } 98 | .container-icon[src$=".png"] { 99 | filter: invert(); 100 | } 101 | -------------------------------------------------------------------------------- /src/sidebar/theme/light.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-background: #e3e4e6; 3 | --color-text: rgb(24,25,26); 4 | --color-accent: #555; 5 | --color-hover: #e3e4e6; 6 | --color-focus: rgba(0, 0, 0, 0.1); 7 | --color-default-container: #fff; 8 | --color-container-background: #ffffff; 9 | --color-container-border: #e3e4e6; 10 | --color-tab-background: #ececec; 11 | --color-close: var(--color-icon); 12 | --color-icon: rgba(24, 25, 26, 0.35); 13 | } 14 | 15 | .favicon-fallback { 16 | filter: invert(); 17 | } 18 | 19 | .tab-pinned .container-tab-action--mute:hover { 20 | filter: grayscale(1) invert(1); 21 | background: rgba(255,255,255,0.9) !important; 22 | } 23 | 24 | :not(.tab-pinned) .container-tab-action--mute:hover { 25 | background: rgba(0, 0, 0,0.1); 26 | } 27 | 28 | .container-actions .container-action:hover, 29 | .container-tab-close:hover, .container-tab-action:hover { 30 | background: rgba(0,0,0, 0.1); 31 | } --------------------------------------------------------------------------------