├── src ├── _locales │ ├── ar │ │ └── messages.json │ ├── id │ │ └── messages.json │ ├── zh_CN │ │ └── messages.json │ ├── ja │ │ └── messages.json │ ├── zh_TW │ │ └── messages.json │ ├── it │ │ └── messages.json │ ├── es │ │ └── messages.json │ ├── cs │ │ └── messages.json │ ├── tr │ │ └── messages.json │ ├── pt │ │ └── messages.json │ ├── pl │ │ └── messages.json │ ├── ru │ │ └── messages.json │ ├── uk │ │ └── messages.json │ ├── eo │ │ └── messages.json │ ├── nl │ │ └── messages.json │ ├── el │ │ └── messages.json │ ├── en │ │ └── messages.json │ ├── fr │ │ └── messages.json │ └── de │ │ └── messages.json ├── sidebar │ ├── index.js │ ├── img │ │ ├── filters.svg │ │ ├── glyph-new-16.svg │ │ ├── panelarrow-vertical-themed.svg │ │ ├── find-icon.svg │ │ ├── close-icon.svg │ │ ├── tab-attention.svg │ │ ├── glyph-pin-pinned-12.svg │ │ ├── loading-burst.svg │ │ ├── extensions.svg │ │ ├── settings.svg │ │ ├── thumbnail-blank.svg │ │ ├── defaultFavicon.svg │ │ ├── tab-audio-small.svg │ │ ├── loading-spinner.svg │ │ └── usercontext.svg │ ├── lib │ │ └── contextmenu │ │ │ ├── contextmenu.css │ │ │ └── contextmenu.js │ ├── tabcenter.html │ ├── topmenu │ │ ├── newtabpopup.js │ │ └── topmenu.js │ ├── tabcontextmenu.js │ ├── tabcenter.js │ ├── tab.js │ ├── tablist.js │ └── tabcenter.css ├── test │ ├── index.js │ └── tabs-position.test.js ├── options │ ├── img │ │ └── help.svg │ ├── options.css │ ├── options.html │ └── options.js ├── background │ └── background.js ├── icons │ └── tabcenter.svg └── manifest.json ├── .eslintignore ├── .gitignore ├── .travis.yml ├── crowdin.yml ├── webpack.config.js ├── package.json ├── .eslintrc.js ├── README.md └── LICENSE.md /src/_locales/ar/messages.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /src/_locales/id/messages.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/sidebar/dist 2 | src/test/vendor 3 | src/sidebar/lib/fuzzysort.js 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | src/sidebar/dist 3 | web-ext-artifacts 4 | node_modules 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | branches: 5 | only: 6 | - master 7 | script: 8 | - npm run lint 9 | -------------------------------------------------------------------------------- /src/sidebar/index.js: -------------------------------------------------------------------------------- 1 | import TabCenter from "./tabcenter.js"; 2 | 3 | // Start-it up! 4 | const tabCenter = new TabCenter(); 5 | tabCenter.init(); 6 | 7 | // For testing! 8 | window.tabCenter = tabCenter; 9 | -------------------------------------------------------------------------------- /crowdin.yml: -------------------------------------------------------------------------------- 1 | files: 2 | - source: /src/_locales/en/ 3 | translation: /src/_locales/%two_letters_code%/%original_file_name% 4 | languages_mapping: 5 | two_letters_code: 6 | zh-CN: zh_CN 7 | zh-TW: zh_TW 8 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* global __dirname:true */ 2 | /* global module:true */ 3 | 4 | module.exports = { 5 | entry: "./src/sidebar/index.js", 6 | output: { 7 | filename: "bundle.js", 8 | path: `${__dirname}/src/sidebar/dist` 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /src/sidebar/img/filters.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/sidebar/img/glyph-new-16.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sidebar/img/panelarrow-vertical-themed.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/sidebar/img/find-icon.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sidebar/img/close-icon.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sidebar/img/tab-attention.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/test/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-env mocha */ 2 | function loadScript(src) { 3 | return new Promise((resolve, reject) => { 4 | const script = document.createElement("script"); 5 | script.src = src; 6 | script.onload = resolve; 7 | script.onerror = reject; 8 | document.head.appendChild(script); 9 | }); 10 | } 11 | 12 | (async () => { 13 | await Promise.all([ 14 | loadScript("../test/vendor/mocha.js"), 15 | loadScript("../test/vendor/chai.js") 16 | ]); 17 | mocha.setup({ui: "tdd", timeout: 10000}).reporter("spec"); 18 | 19 | await loadScript("../test/tabs-position.test.js"); 20 | 21 | mocha.run(); 22 | })(); 23 | -------------------------------------------------------------------------------- /src/sidebar/img/glyph-pin-pinned-12.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sidebar/img/loading-burst.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/options/img/help.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sidebar/lib/contextmenu/contextmenu.css: -------------------------------------------------------------------------------- 1 | ul.contextmenu { 2 | display: inline-block; 3 | position: absolute; 4 | border: solid 1px #CCCCCC; 5 | margin: 0; 6 | padding: 0; 7 | color: black; 8 | background-color: #f2f2f2; 9 | box-shadow: 1px 1px 1px #888888; 10 | z-index: 100; 11 | } 12 | 13 | .contextmenu > hr { 14 | display: block; 15 | height: 1px; 16 | background-color: #D7D7D7; 17 | border: 0; 18 | margin: 0; 19 | margin-left: 23px; 20 | margin-right: 2px; 21 | } 22 | 23 | .contextmenu > li { 24 | display: block; 25 | font: -moz-pull-down-menu; 26 | padding: 3px 20px 3px 23px; 27 | -moz-user-select: none; 28 | } 29 | 30 | .contextmenu > li:hover { 31 | background-color: #3E93F9; 32 | color: white; 33 | } 34 | 35 | .contextmenu > li.disabled { 36 | pointer-events: none; 37 | color: grey; 38 | } 39 | -------------------------------------------------------------------------------- /src/background/background.js: -------------------------------------------------------------------------------- 1 | function TabCenterBackground() { 2 | browser.runtime.onMessage.addListener((msg) => this.onMessage(msg)); 3 | browser.browserAction.onClicked.addListener((tab) => this.onClick(tab)); 4 | } 5 | TabCenterBackground.prototype = { 6 | openedSidebarWindows: new Set(), 7 | onMessage({event, windowId}) { 8 | if (event === "sidebar-open") { 9 | this.openedSidebarWindows.add(windowId); 10 | } else { 11 | this.openedSidebarWindows.delete(windowId); 12 | } 13 | }, 14 | onClick({windowId}) { 15 | if (this.openedSidebarWindows.has(windowId)) { 16 | // TODO: Remove this once "beforeunload" actually works. 17 | this.openedSidebarWindows.delete(windowId); 18 | browser.sidebarAction.close(); 19 | } else { 20 | browser.sidebarAction.open(); 21 | } 22 | } 23 | }; 24 | 25 | new TabCenterBackground(); 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tabcenter-redux", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "lint": "eslint .", 6 | "build": "webpack --mode production", 7 | "watch": "webpack --mode development --watch", 8 | "webext": "web-ext run --start-url about:debugging -s src", 9 | "dev": "npm-run-all --parallel watch webext" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/eoger/tabcenter-redux.git" 14 | }, 15 | "author": "Edouard Oger", 16 | "license": "MPL-2.0", 17 | "bugs": { 18 | "url": "https://github.com/eoger/tabcenter-redux/issues" 19 | }, 20 | "homepage": "https://github.com/eoger/tabcenter-redux#readme", 21 | "devDependencies": { 22 | "eslint": "5.0.1", 23 | "npm-run-all": "4.1.3", 24 | "web-ext": "2.7.0", 25 | "webpack": "4.14.0", 26 | "webpack-command": "0.3.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/sidebar/img/extensions.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sidebar/img/settings.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "es6": true, 4 | "browser": true, 5 | "webextensions": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "parserOptions": { 9 | "ecmaVersion": 8, 10 | "sourceType": "module" 11 | }, 12 | "rules": { 13 | "brace-style": ["error", "1tbs"], 14 | "curly": ["error"], 15 | "eqeqeq": ["error"], 16 | "indent-legacy": ["error", 2], 17 | "key-spacing": ["error"], 18 | "keyword-spacing": ["error", { 19 | "before": true, 20 | "after": true 21 | } 22 | ], 23 | "no-console": [0], 24 | "no-multi-spaces": ["error"], 25 | "no-trailing-spaces": ["error"], 26 | "no-var": ["error"], 27 | "object-curly-spacing": ["error", "never"], 28 | "prefer-template": ["error"], 29 | "quotes": ["error", "double"], 30 | "semi": ["error", "always"], 31 | "space-before-blocks": ["error"] 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /src/options/options.css: -------------------------------------------------------------------------------- 1 | html { 2 | font: message-box; 3 | color: #333; 4 | } 5 | 6 | body { 7 | font-size: 1.25rem; 8 | } 9 | 10 | h1 { 11 | font-size: 2rem; 12 | font-weight: normal; 13 | margin: 0; 14 | padding-bottom: 4px; 15 | margin-bottom: 4px; 16 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); 17 | } 18 | 19 | a, a:visited { 20 | color: rgb(10, 141, 255); 21 | } 22 | 23 | .options { 24 | display: grid; 25 | align-items: center; 26 | grid-template-columns: 260px auto; 27 | margin-bottom : 10px; 28 | } 29 | 30 | .options > div { 31 | padding: 5px; 32 | } 33 | 34 | #primaryOptions { 35 | grid-auto-rows: 1fr; 36 | } 37 | 38 | input[type="checkbox"] { 39 | margin-left: 0; 40 | } 41 | 42 | #customCSS { 43 | width: 250px; 44 | height: 100px; 45 | } 46 | 47 | #help { 48 | margin-left: 5px; 49 | vertical-align: middle; 50 | display: inline-block; 51 | width: 16px; 52 | height: 16px; 53 | background-image: url("img/help.svg"); 54 | } 55 | -------------------------------------------------------------------------------- /src/icons/tabcenter.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/sidebar/img/thumbnail-blank.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/sidebar/img/defaultFavicon.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tab Center Redux 2 | 3 | Your favorite vertical tabbed browsing add-on, now compatible with Firefox 57+. 4 | [Install the extension](https://addons.mozilla.org/firefox/addon/tab-center-redux/). 5 | 6 | ## Usage 7 | Open the sidebar by clicking on the toolbar icon or with the following hotkeys: 8 | - `Ctrl`+`Shift`+`O` on Windows 9 | - `⌘`+`Shift`+`O` on macOS 10 | - `F1` on Linux 11 | 12 | ## Help localize the project! 13 | You can contribute by helping translate Tab Center Redux [on Crowdin](https://crowdin.com/project/tab-center-redux). 14 | Can't find your own language? [Open an issue!](https://github.com/eoger/tabcenter-redux/issues/new) 15 | 16 | [![Crowdin](https://d322cqt584bo4o.cloudfront.net/tab-center-redux/localized.svg)](https://crowdin.com/project/tab-center-redux) 17 | 18 | ## How can I contribute? 19 | 20 | You need to have a recent version of node. 21 | 1. Clone this repository 22 | 2. Install the dependencies with `npm i`. 23 | 3. Run `npm run dev` and start hacking! [Here is a list of some things](https://github.com/eoger/tabcenter-redux/issues?q=is%3Aopen+is%3Aissue+label%3AA-P2) you could work on. 24 | 25 | If you don’t have Firefox Release installed, `WEB_EXT_FIREFOX=nightly npm run dev` or `WEB_EXT_FIREFOX=beta npm run dev` should work much better. 26 | 27 | ## Tests 28 | 29 | Basic functional tests can be run by opening the extension's debug console (in `about:debugging`) and executing `tabCenter.startTests()` (in the sidebar document). 30 | -------------------------------------------------------------------------------- /src/options/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 21 |
22 |
23 |
24 |
25 |

26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Tab Center Redux", 3 | "description": "__MSG_extensionDescription__", 4 | "homepage_url": "https://github.com/eoger/tabcenter-redux", 5 | "manifest_version": 2, 6 | "version": "0.7.0", 7 | "default_locale": "en", 8 | "sidebar_action": { 9 | "default_title": "__MSG_sidebarTitle__", 10 | "default_panel": "sidebar/tabcenter.html", 11 | "default_icon": "icons/tabcenter.svg" 12 | }, 13 | "icons": { 14 | "48": "icons/tabcenter.svg", 15 | "96": "icons/tabcenter.svg" 16 | }, 17 | "permissions": [ 18 | "", 19 | "browserSettings", 20 | "contextualIdentities", 21 | "cookies", 22 | "sessions", 23 | "storage", 24 | "tabHide", 25 | "tabs", 26 | "theme", 27 | "webNavigation" 28 | ], 29 | "browser_action": { 30 | "browser_style": true, 31 | "default_icon": { 32 | "16": "icons/tabcenter.svg", 33 | "32": "icons/tabcenter.svg" 34 | }, 35 | "default_title": "__MSG_browserActionTitle__", 36 | "theme_icons": [{ 37 | "dark": "icons/tabcenter.svg#dark", 38 | "light": "icons/tabcenter.svg#light", 39 | "size": 16 40 | }, { 41 | "dark": "icons/tabcenter.svg#dark", 42 | "light": "icons/tabcenter.svg#light", 43 | "size": 32 44 | }] 45 | }, 46 | "background": { 47 | "scripts": ["background/background.js"] 48 | }, 49 | "commands": { 50 | "_execute_sidebar_action": { 51 | "suggested_key": { 52 | "default": "Ctrl+Shift+O", 53 | "mac": "Command+Shift+O", 54 | "linux": "F1" 55 | } 56 | } 57 | }, 58 | "options_ui": { 59 | "page": "options/options.html" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/sidebar/tabcenter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 | 15 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 | 52 | 53 | -------------------------------------------------------------------------------- /src/sidebar/lib/contextmenu/contextmenu.js: -------------------------------------------------------------------------------- 1 | // Make sure the menu doesn't stick to the sides of the sidebar 2 | const OVERFLOW_MENU_MARGIN = 6; 3 | 4 | function ContextMenu(clickPosX, clickPosY) { 5 | this.clickPosX = clickPosX; 6 | this.clickPosY = clickPosY; 7 | this.rootNode = null; 8 | } 9 | 10 | ContextMenu.prototype = { 11 | show(items) { 12 | this.rootNode = document.createElement("ul"); 13 | this.rootNode.classList = "contextmenu"; 14 | const fragment = document.createDocumentFragment(); 15 | for (let {label, isEnabled, onCommandFn} of items) { 16 | let item; 17 | if (label === "separator") { 18 | item = document.createElement("hr"); 19 | } else { 20 | item = document.createElement("li"); 21 | item.textContent = label; 22 | 23 | if (onCommandFn) { 24 | item.addEventListener("click", e => onCommandFn(e)); 25 | } 26 | 27 | if (isEnabled) { 28 | (async () => { 29 | if (!(await isEnabled())) { 30 | item.classList.add("disabled"); 31 | } 32 | })(); 33 | } 34 | } 35 | fragment.appendChild(item); 36 | } 37 | this.rootNode.appendChild(fragment); 38 | document.body.appendChild(this.rootNode); 39 | this.positionMenu(); 40 | }, 41 | positionMenu() { 42 | const menuWidth = this.rootNode.offsetWidth + OVERFLOW_MENU_MARGIN; 43 | const menuHeight = this.rootNode.offsetHeight + OVERFLOW_MENU_MARGIN; 44 | const winWidth = window.innerWidth; 45 | const winHeight = window.innerHeight; 46 | 47 | const top = this.clickPosY + menuHeight > winHeight ? 48 | (winHeight - menuHeight) : 49 | this.clickPosY; 50 | const left = this.clickPosX + menuWidth > winWidth ? 51 | (winWidth - menuWidth) : 52 | this.clickPosX; 53 | 54 | this.rootNode.style.top = `${top}px`; 55 | this.rootNode.style.left = `${left}px`; 56 | }, 57 | hide() { 58 | if (this.rootNode) { 59 | this.rootNode.remove(); 60 | } 61 | } 62 | }; 63 | 64 | export default ContextMenu; 65 | -------------------------------------------------------------------------------- /src/_locales/zh_CN/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "标签页中心旨在解决人们使用标签页（尤其是太多标签页）时遇到的一些问题，并为未来的创新功能提供更多的基础。此 Firefox 附加组件以垂直方式而非水平方式排列标签页。它的灵感极大来源于附加组件 VerticalTabs 的想法。" 4 | }, 5 | "sidebarTitle": { 6 | "message": "标签页", 7 | "description": "Label shown in the sidebar selector." 8 | }, 9 | "newTabBtnLabel": { 10 | "message": "新标签页", 11 | "description": "Label of the New Tab button in the top menu." 12 | }, 13 | "newTabBtnTooltip": { 14 | "message": "打开新标签页" 15 | }, 16 | "closeTabButtonTooltip": { 17 | "message": "关闭标签页" 18 | }, 19 | "allTabsLabel": { 20 | "message": "显示所有标签页…", 21 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 22 | }, 23 | "contextMenuReloadTab": { 24 | "message": "重新载入标签页", 25 | "description": "Reload Tab context menu item label." 26 | }, 27 | "contextMenuPinTab": { 28 | "message": "固定标签页", 29 | "description": "Pin Tab context menu item label." 30 | }, 31 | "contextMenuUnpinTab": { 32 | "message": "取消固定标签页", 33 | "description": "Unpin Tab context menu item label." 34 | }, 35 | "contextMenuMuteTab": { 36 | "message": "静音标签页", 37 | "description": "Mute Tab context menu item label." 38 | }, 39 | "contextMenuUnmuteTab": { 40 | "message": "取消静音标签页", 41 | "description": "Unmute Tab context menu item label." 42 | }, 43 | "contextMenuCloseTab": { 44 | "message": "关闭标签页" 45 | }, 46 | "contextMenuMoveTabToNewWindow": { 47 | "message": "移动到新窗口" 48 | }, 49 | "contextMenuReloadAllTabs": { 50 | "message": "重新载入全部标签页" 51 | }, 52 | "contextMenuCloseTabsUnderneath": { 53 | "message": "关闭下方标签页" 54 | }, 55 | "contextMenuCloseOtherTabs": { 56 | "message": "关闭其他标签页" 57 | }, 58 | "settingsBtnTooltip": { 59 | "message": "打开设置" 60 | }, 61 | "optionsTitle": { 62 | "message": "设置" 63 | }, 64 | "optionsCompactModeTooltip": { 65 | "message": "紧凑模式通过减少标签页的高度显示更多标签页。在动态模式下，它将在没有足够显示空间时自动激活。" 66 | }, 67 | "optionsDarkTheme": { 68 | "message": "黑夜主题" 69 | }, 70 | "optionsCustomCSS": { 71 | "message": "自定义CSS" 72 | }, 73 | "optionsCustomCSSWikiLink": { 74 | "message": "点击查看CSS调整的说明（英文）" 75 | }, 76 | "optionsSaveCustomCSS": { 77 | "message": "保存CSS" 78 | } 79 | } -------------------------------------------------------------------------------- /src/options/options.js: -------------------------------------------------------------------------------- 1 | function TabCenterOptions() { 2 | this.setupLabels(); 3 | this.setupStateAndListeners(); 4 | } 5 | 6 | TabCenterOptions.prototype = { 7 | setupLabels() { 8 | const options = ["optionsTitle", "optionsCompactMode", 9 | "optionsCompactModeStrict", "optionsCompactModeDynamic", 10 | "optionsCompactModeOff", "optionsCompactPins", "optionsDarkTheme", 11 | "optionsThemeIntegration", "optionsAdvancedTitle", "optionsCustomCSS", 12 | "optionsCustomCSSWikiLink", "optionsSaveCustomCSS"]; 13 | for (let opt of options) { 14 | this._setupTextContentLabel(opt); 15 | } 16 | let helpImg = document.createElement("div"); 17 | helpImg.id = "help"; 18 | helpImg.title = browser.i18n.getMessage("optionsCompactModeTooltip"); 19 | document.getElementById("optionsCompactMode").appendChild(helpImg); 20 | }, 21 | _setupTextContentLabel(opt) { 22 | document.getElementById(opt).textContent = browser.i18n.getMessage(opt); 23 | }, 24 | setupStateAndListeners() { 25 | this._setupCheckboxOption("darkTheme", "darkTheme"); 26 | this._setupCheckboxOption("themeIntegration", "themeIntegration"); 27 | this._setupDropdownOption("compactMode", "compactModeMode"); 28 | this._setupCheckboxOption("compactPins", "compactPins", true); 29 | 30 | // Custom CSS 31 | browser.storage.local.get({ 32 | ["customCSS"]: "" 33 | }).then(prefs => { 34 | document.getElementById("customCSS").value = prefs["customCSS"]; 35 | }); 36 | document.getElementById("optionsSaveCustomCSS").addEventListener("click", () => { 37 | browser.storage.local.set({ 38 | "customCSS": document.getElementById("customCSS").value 39 | }); 40 | }); 41 | }, 42 | _setupCheckboxOption(checkboxId, optionName, defaultValue = false) { 43 | const checkbox = document.getElementById(checkboxId); 44 | browser.storage.local.get({ 45 | [optionName]: defaultValue 46 | }).then(prefs => { 47 | checkbox.checked = prefs[optionName]; 48 | }); 49 | 50 | checkbox.addEventListener("change", e => { 51 | browser.storage.local.set({ 52 | [optionName]: e.target.checked 53 | }); 54 | }); 55 | }, 56 | _setupDropdownOption(drowdownId, optionName) { 57 | const dropdown = document.getElementById(drowdownId); 58 | browser.storage.local.get({ 59 | [optionName]: 1 60 | }).then(prefs => { 61 | dropdown.value = prefs[optionName]; 62 | }); 63 | 64 | dropdown.addEventListener("change", e => { 65 | browser.storage.local.set({ 66 | [optionName]: e.target.value 67 | }); 68 | }); 69 | } 70 | }; 71 | 72 | new TabCenterOptions(); 73 | -------------------------------------------------------------------------------- /src/sidebar/topmenu/newtabpopup.js: -------------------------------------------------------------------------------- 1 | /* @arg {props} 2 | * openTab 3 | * onClose 4 | */ 5 | function NewTabPopup(props) { 6 | this._props = props; 7 | this._newTabMenu = document.getElementById("newtab-menu"); 8 | this._setupListeners(); 9 | } 10 | 11 | NewTabPopup.prototype = { 12 | show(identities) { 13 | const fragment = document.createDocumentFragment(); 14 | for (let identity of identities) { 15 | const identityItem = document.createElement("div"); 16 | identityItem.className = "newtab-menu-identity"; 17 | identityItem.setAttribute("cookieStoreId", identity.cookieStoreId); 18 | const identityIcon = document.createElement("div"); 19 | identityIcon.classList.add("newtab-menu-identity-icon"); 20 | identityIcon.setAttribute("data-identity-color", identity.color); 21 | identityIcon.setAttribute("data-identity-icon", identity.icon); 22 | identityItem.appendChild(identityIcon); 23 | const identityLabel = document.createElement("div"); 24 | identityLabel.className = "newtab-menu-identity-label"; 25 | identityLabel.textContent = identity.name; 26 | identityItem.appendChild(identityLabel); 27 | fragment.appendChild(identityItem); 28 | } 29 | this._newTabMenu.appendChild(fragment); 30 | this._newTabMenu.classList.remove("hidden"); 31 | }, 32 | _setupListeners() { 33 | this._onBlur = this.close.bind(this); 34 | this._onMouseDown = (e) => { 35 | if (!e.target.classList.contains("newtab-menu-identity")) { 36 | this.close(); 37 | } 38 | }; 39 | this._onMouseUp = this._handleClick.bind(this, 0, false); 40 | this._onAuxClick = this._handleClick.bind(this, 1, true); 41 | window.addEventListener("blur", this._onBlur); 42 | window.addEventListener("mousedown", this._onMouseDown); 43 | this._newTabMenu.addEventListener("mouseup", this._onMouseUp); 44 | this._newTabMenu.addEventListener("auxclick", this._onAuxClick); 45 | }, 46 | _removeListeners() { 47 | window.removeEventListener("blur", this._onBlur); 48 | window.removeEventListener("mousedown", this._onMouseDown); 49 | this._newTabMenu.removeEventListener("mouseup", this._onMouseUp); 50 | this._newTabMenu.removeEventListener("auxclick", this._onAuxClick); 51 | }, 52 | _handleClick(btn, openTabAfterCurrent, e) { 53 | if (e.button !== btn) { 54 | return; 55 | } 56 | const cookieStoreId = e.target.getAttribute("cookieStoreId"); 57 | this.close(); 58 | this._props.openTab({afterCurrent: openTabAfterCurrent, cookieStoreId}); 59 | }, 60 | close() { 61 | this._removeListeners(); 62 | this._newTabMenu.classList.add("hidden"); 63 | 64 | // Clear the menu. 65 | while (this._newTabMenu.firstChild) { 66 | this._newTabMenu.removeChild(this._newTabMenu.firstChild); 67 | } 68 | this._props.onClose(); 69 | } 70 | }; 71 | 72 | export default NewTabPopup; 73 | -------------------------------------------------------------------------------- /src/_locales/ja/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center は、ユーザーのタブの使い方から生じるいくつかの問題 (特に「タブを開きすぎてしまう」状況) を解決し、将来の革新に向けてより自在な UI の基礎を提供しようとする試みです。この Firefox アドオンの初回版では、タブを水平ではなく垂直に配置してみました。これは素晴らしい VerticalTabs アドオンに強く触発され、そのアイデアを借用したものです。" 4 | }, 5 | "sidebarTitle": { 6 | "message": "タブ", 7 | "description": "Label shown in the sidebar selector." 8 | }, 9 | "newTabBtnLabel": { 10 | "message": "新しいタブ", 11 | "description": "Label of the New Tab button in the top menu." 12 | }, 13 | "newTabBtnTooltip": { 14 | "message": "新しいタブを開きます" 15 | }, 16 | "searchPlaceholder": { 17 | "message": "タブを探索" 18 | }, 19 | "closeTabButtonTooltip": { 20 | "message": "タブを閉じます" 21 | }, 22 | "allTabsLabel": { 23 | "message": "すべてのタブを表示...", 24 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 25 | }, 26 | "contextMenuReloadTab": { 27 | "message": "タブを再読み込み", 28 | "description": "Reload Tab context menu item label." 29 | }, 30 | "contextMenuPinTab": { 31 | "message": "タブをピン留め", 32 | "description": "Pin Tab context menu item label." 33 | }, 34 | "contextMenuUnpinTab": { 35 | "message": "タブのピン留めを外す", 36 | "description": "Unpin Tab context menu item label." 37 | }, 38 | "contextMenuMuteTab": { 39 | "message": "タブをミュート", 40 | "description": "Mute Tab context menu item label." 41 | }, 42 | "contextMenuUnmuteTab": { 43 | "message": "タブのミュートを解除", 44 | "description": "Unmute Tab context menu item label." 45 | }, 46 | "contextMenuCloseTab": { 47 | "message": "タブを閉じる" 48 | }, 49 | "contextMenuUndoCloseTab": { 50 | "message": "閉じたタブを元に戻す" 51 | }, 52 | "contextMenuDuplicateTab": { 53 | "message": "タブを複製" 54 | }, 55 | "contextMenuMoveTabToNewWindow": { 56 | "message": "新しいウィンドウへ移動" 57 | }, 58 | "contextMenuReloadAllTabs": { 59 | "message": "すべてのタブを再読み込み" 60 | }, 61 | "contextMenuCloseTabsUnderneath": { 62 | "message": "下のタブをすべて閉じる" 63 | }, 64 | "contextMenuCloseOtherTabs": { 65 | "message": "他のタブをすべて閉じる" 66 | }, 67 | "settingsBtnTooltip": { 68 | "message": "設定を変更します" 69 | }, 70 | "optionsTitle": { 71 | "message": "設定" 72 | }, 73 | "optionsCompactMode": { 74 | "message": "コンパクトモード" 75 | }, 76 | "optionsCompactModeTooltip": { 77 | "message": "コンパクトモードではタブの高さを減らし、より多くのタブを表示します。ダイナミック設定では一定のスペースが残っていないと動作しません。" 78 | }, 79 | "optionsCompactModeOff": { 80 | "message": "無効" 81 | }, 82 | "optionsCompactModeDynamic": { 83 | "message": "動的" 84 | }, 85 | "optionsCompactModeStrict": { 86 | "message": "常時" 87 | }, 88 | "optionsCompactPins": { 89 | "message": "ピン留めタブをアイコン表示" 90 | }, 91 | "optionsDarkTheme": { 92 | "message": "暗いテーマ" 93 | }, 94 | "optionsAdvancedTitle": { 95 | "message": "上級者設定" 96 | }, 97 | "optionsCustomCSS": { 98 | "message": "CSSを保存" 99 | }, 100 | "optionsSaveCustomCSS": { 101 | "message": "CSSを保存" 102 | } 103 | } -------------------------------------------------------------------------------- /src/_locales/zh_TW/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "分頁中心試圖解決人們使用分頁（尤其是太多分頁）時遇到的一些問題，並為未來的創新功能提供更多的基礎。此 Firefox 附加組件以垂直方式而非水平方式排列分頁。它的靈感極大來源於附加組件 VerticalTabs 的想法。" 4 | }, 5 | "browserActionTitle": { 6 | "message": "切換到 Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "分頁", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "新分頁", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "開啟新分頁" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "搜尋分頁" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "關閉分頁" 25 | }, 26 | "allTabsLabel": { 27 | "message": "顯示所有分頁…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "重新載入分頁", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "固定分頁", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "取消固定分頁", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "分頁靜音", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "取消分頁靜音", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "關閉分頁" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "復原已關閉分頁" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "複製分頁" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "移動到新視窗" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "重新載入全部分頁" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "關閉下方分頁" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "關閉其他分頁" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "開啟設定" 73 | }, 74 | "optionsTitle": { 75 | "message": "設定" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "精簡模式" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "精簡模式降低分頁的高度以顯示更多的分頁。在「動態」設定中，一旦發現沒有足夠的空間就會自動啟用。" 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "停用" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "動態" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "總是" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "精簡已釘選分頁" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "深色主題" 97 | }, 98 | "optionsThemeIntegration": { 99 | "message": "與當前主題整合" 100 | }, 101 | "optionsAdvancedTitle": { 102 | "message": "進階" 103 | }, 104 | "optionsCustomCSS": { 105 | "message": "自訂樣式表" 106 | }, 107 | "optionsCustomCSSWikiLink": { 108 | "message": "CSS 調整 Wiki 文章" 109 | }, 110 | "optionsSaveCustomCSS": { 111 | "message": "儲存 CSS" 112 | } 113 | } -------------------------------------------------------------------------------- /src/sidebar/topmenu/topmenu.js: -------------------------------------------------------------------------------- 1 | const LONG_PRESS_DELAY = 500; 2 | 3 | import NewTabPopup from "./newtabpopup.js"; 4 | 5 | /* @arg {props} 6 | * openTab 7 | * search 8 | */ 9 | function TopMenu(props) { 10 | this._props = props; 11 | this._newTabButtonView = document.getElementById("newtab"); 12 | this._settingsView = document.getElementById("settings"); 13 | this._searchBoxInput = document.getElementById("searchbox-input"); 14 | this._newTabLabelView = document.getElementById("newtab-label"); 15 | this._setupLabels(); 16 | this._setupListeners(); 17 | } 18 | 19 | TopMenu.prototype = { 20 | updateSearch(val) { 21 | this._searchBoxInput.value = val; 22 | }, 23 | _setupListeners() { 24 | this._settingsView.addEventListener("click", () => { 25 | browser.runtime.openOptionsPage(); 26 | }); 27 | 28 | const searchbox = document.getElementById("searchbox"); 29 | this._searchBoxInput.addEventListener("input", (e) => { 30 | this._props.search(e.target.value); 31 | }); 32 | this._searchBoxInput.addEventListener("focus", () => { 33 | searchbox.classList.add("focused"); 34 | this._newTabLabelView.classList.add("hidden"); 35 | }); 36 | this._searchBoxInput.addEventListener("blur", () => { 37 | searchbox.classList.remove("focused"); 38 | this._newTabLabelView.classList.remove("hidden"); 39 | }); 40 | 41 | this._newTabButtonView.addEventListener("click", () => { 42 | if (!this._newTabPopup) { 43 | this._props.openTab(); 44 | } 45 | }); 46 | this._newTabButtonView.addEventListener("auxclick", e => { 47 | if (e.button === 1) { 48 | this._props.openTab({afterCurrent: true}); 49 | } else if (e.button === 2) { 50 | this._showNewTabPopup(); 51 | } 52 | }); 53 | this._newTabButtonView.addEventListener("mousedown", () => { 54 | this._longPressTimer = setTimeout(() => { 55 | this._showNewTabPopup(); 56 | }, LONG_PRESS_DELAY); 57 | }); 58 | this._newTabButtonView.addEventListener("mouseup", () => { 59 | clearTimeout(this._longPressTimer); 60 | }); 61 | 62 | window.addEventListener("keyup", (e) => { 63 | if (e.key === "Escape") { 64 | this._props.search(""); 65 | } 66 | }); 67 | }, 68 | _setupLabels() { 69 | this._newTabLabelView.textContent = browser.i18n.getMessage("newTabBtnLabel"); 70 | this._newTabLabelView.title = browser.i18n.getMessage("newTabBtnTooltip"); 71 | this._settingsView.title = browser.i18n.getMessage("settingsBtnTooltip"); 72 | this._searchBoxInput.placeholder = browser.i18n.getMessage("searchPlaceholder"); 73 | }, 74 | async _showNewTabPopup() { 75 | if (!browser.contextualIdentities) { 76 | return; 77 | } 78 | const identities = await browser.contextualIdentities.query({}); 79 | if (!identities || !identities.length) { 80 | return; 81 | } 82 | const openTab = this._props.openTab.bind(this); 83 | const onClose = this._onNewTabPopupClosed.bind(this); 84 | this._newTabPopup = new NewTabPopup({openTab, onClose}); 85 | this._newTabPopup.show(identities); 86 | this._newTabButtonView.classList.add("menuopened"); 87 | }, 88 | _onNewTabPopupClosed() { 89 | this._newTabPopup = null; 90 | this._newTabButtonView.classList.remove("menuopened"); 91 | } 92 | }; 93 | 94 | export default TopMenu; 95 | -------------------------------------------------------------------------------- /src/_locales/it/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center è un tentativo di risolvere alcuni dei problemi che sono emersi dal modo in cui le persone usano le schede (paricolarmente il problema delle troppe schede contemporaneamente) e di provvedere una base di interfaccia utente più versatile per future innovazioni. La prima versione di questo Add-On dispone le schede in un ordine verticale piuttosto che orizzontale. L'Add-On è pesantemente ispirato e ha preso in prestito idee dall'eccellente estensione VerticalTabs." 4 | }, 5 | "sidebarTitle": { 6 | "message": "Schede", 7 | "description": "Label shown in the sidebar selector." 8 | }, 9 | "newTabBtnLabel": { 10 | "message": "Nuova Scheda", 11 | "description": "Label of the New Tab button in the top menu." 12 | }, 13 | "newTabBtnTooltip": { 14 | "message": "Apri una nuova scheda" 15 | }, 16 | "searchPlaceholder": { 17 | "message": "Cerca nelle schede" 18 | }, 19 | "closeTabButtonTooltip": { 20 | "message": "Chiudi la scheda" 21 | }, 22 | "allTabsLabel": { 23 | "message": "Mostra tutte le schede…", 24 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 25 | }, 26 | "contextMenuReloadTab": { 27 | "message": "Ricarica la scheda", 28 | "description": "Reload Tab context menu item label." 29 | }, 30 | "contextMenuPinTab": { 31 | "message": "Fissa la scheda in alto", 32 | "description": "Pin Tab context menu item label." 33 | }, 34 | "contextMenuUnpinTab": { 35 | "message": "Rimuovi dall'alto", 36 | "description": "Unpin Tab context menu item label." 37 | }, 38 | "contextMenuMuteTab": { 39 | "message": "Muta la scheda", 40 | "description": "Mute Tab context menu item label." 41 | }, 42 | "contextMenuUnmuteTab": { 43 | "message": "Riattiva volume", 44 | "description": "Unmute Tab context menu item label." 45 | }, 46 | "contextMenuCloseTab": { 47 | "message": "Chiudi la scheda" 48 | }, 49 | "contextMenuUndoCloseTab": { 50 | "message": "Annulla la chiusura" 51 | }, 52 | "contextMenuDuplicateTab": { 53 | "message": "Duplica la scheda" 54 | }, 55 | "contextMenuMoveTabToNewWindow": { 56 | "message": "Sposta in una nuova finestra" 57 | }, 58 | "contextMenuReloadAllTabs": { 59 | "message": "Ricarica tutte le schede" 60 | }, 61 | "contextMenuCloseTabsUnderneath": { 62 | "message": "Chiudi le schede al di sotto" 63 | }, 64 | "contextMenuCloseOtherTabs": { 65 | "message": "Chiudi le altre schede" 66 | }, 67 | "settingsBtnTooltip": { 68 | "message": "Apri le impostazioni" 69 | }, 70 | "optionsTitle": { 71 | "message": "Impostazioni" 72 | }, 73 | "optionsCompactMode": { 74 | "message": "Modalità compatta" 75 | }, 76 | "optionsCompactModeTooltip": { 77 | "message": "La modalità compatta riduce l'altezza delle schede per mostrarne di più. Nella modalità dinamica, si attiverà in mancanza di spazio." 78 | }, 79 | "optionsCompactModeOff": { 80 | "message": "Disabilitato" 81 | }, 82 | "optionsCompactModeDynamic": { 83 | "message": "Dinamico" 84 | }, 85 | "optionsCompactModeStrict": { 86 | "message": "Sempre" 87 | }, 88 | "optionsCompactPins": { 89 | "message": "Compatta schede fissate" 90 | }, 91 | "optionsDarkTheme": { 92 | "message": "Tema Notturno" 93 | }, 94 | "optionsAdvancedTitle": { 95 | "message": "Avanzate" 96 | }, 97 | "optionsCustomCSS": { 98 | "message": "Foglio di Stile Personalizzato" 99 | }, 100 | "optionsCustomCSSWikiLink": { 101 | "message": "Modifica CSS articolo wiki" 102 | }, 103 | "optionsSaveCustomCSS": { 104 | "message": "Salvare il CSS" 105 | } 106 | } -------------------------------------------------------------------------------- /src/_locales/es/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center pretende solucionar alguno de los problemas que han surgido a raíz del uso de las pestañas por parte de los usuarios (principalmente el de tener \"demasiadas pestañas abiertas\") y proporcionar una base más versátil para futuras innovaciones de la interfaz.\nLa primera versión de este add-on de Firefox organiza las pestañas de una manera vertical en lugar de horizontal. Está profundamente inspirado y toma prestadas ideas del excelente add-on VerticalTabs." 4 | }, 5 | "sidebarTitle": { 6 | "message": "Pestañas", 7 | "description": "Label shown in the sidebar selector." 8 | }, 9 | "newTabBtnLabel": { 10 | "message": "Nueva pestaña", 11 | "description": "Label of the New Tab button in the top menu." 12 | }, 13 | "newTabBtnTooltip": { 14 | "message": "Abrir una nueva pestaña" 15 | }, 16 | "searchPlaceholder": { 17 | "message": "Buscar pestañas" 18 | }, 19 | "closeTabButtonTooltip": { 20 | "message": "Cerrar pestaña" 21 | }, 22 | "allTabsLabel": { 23 | "message": "Mostrar todas las pestañas…", 24 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 25 | }, 26 | "contextMenuReloadTab": { 27 | "message": "Recargar pestaña", 28 | "description": "Reload Tab context menu item label." 29 | }, 30 | "contextMenuPinTab": { 31 | "message": "Fijar pestaña", 32 | "description": "Pin Tab context menu item label." 33 | }, 34 | "contextMenuUnpinTab": { 35 | "message": "Soltar pestaña", 36 | "description": "Unpin Tab context menu item label." 37 | }, 38 | "contextMenuMuteTab": { 39 | "message": "Silenciar pestaña", 40 | "description": "Mute Tab context menu item label." 41 | }, 42 | "contextMenuUnmuteTab": { 43 | "message": "Restaurar sonido en pestaña", 44 | "description": "Unmute Tab context menu item label." 45 | }, 46 | "contextMenuCloseTab": { 47 | "message": "Cerrar pestaña" 48 | }, 49 | "contextMenuUndoCloseTab": { 50 | "message": "Restaurar pestaña cerrada" 51 | }, 52 | "contextMenuDuplicateTab": { 53 | "message": "Duplicar pestaña" 54 | }, 55 | "contextMenuMoveTabToNewWindow": { 56 | "message": "Mover a una nueva ventana" 57 | }, 58 | "contextMenuReloadAllTabs": { 59 | "message": "Recargar todas las pestañas" 60 | }, 61 | "contextMenuCloseTabsUnderneath": { 62 | "message": "Cerrar pestañas bajo ésta" 63 | }, 64 | "contextMenuCloseOtherTabs": { 65 | "message": "Cerrar las demás pestañas" 66 | }, 67 | "settingsBtnTooltip": { 68 | "message": "Abrir ajustes" 69 | }, 70 | "optionsTitle": { 71 | "message": "Ajustes" 72 | }, 73 | "optionsCompactMode": { 74 | "message": "Modo compacto" 75 | }, 76 | "optionsCompactModeTooltip": { 77 | "message": "El Modo compacto reduce la altura de las pestañas para mostrar más. En Ajustes dinámicos, se activará automáticamente cuando no quede más espacio." 78 | }, 79 | "optionsCompactModeOff": { 80 | "message": "Desactivado" 81 | }, 82 | "optionsCompactModeDynamic": { 83 | "message": "Dinámico" 84 | }, 85 | "optionsCompactModeStrict": { 86 | "message": "Siempre" 87 | }, 88 | "optionsCompactPins": { 89 | "message": "Compactar pestañas fijas" 90 | }, 91 | "optionsDarkTheme": { 92 | "message": "Tema oscuro" 93 | }, 94 | "optionsAdvancedTitle": { 95 | "message": "Ajustes avanzados" 96 | }, 97 | "optionsCustomCSS": { 98 | "message": "Hoja de estilo personalizada" 99 | }, 100 | "optionsCustomCSSWikiLink": { 101 | "message": "Artículo Wiki de trucos CSS" 102 | }, 103 | "optionsSaveCustomCSS": { 104 | "message": "Guardar CSS" 105 | } 106 | } -------------------------------------------------------------------------------- /src/_locales/cs/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center je pokus vyřešit některé problémy, které vznikly kvůli tomu, jak lidé panely používají (především problém s příliš velkým počtem otevřených panelů) a snaží se poskytnout univerzální základ uživatelského rozhraní pro další inovace. První verze tohoto doplňku řadí panely vertikálně a ne horizontálně. Byla inspirována skvělým doplňkem VerticalTabs, odkud přejímá některé nápady." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Přepnout Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Panely", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Nový panel", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Otevře nový panel" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Vyhledávat v záložkách" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Zavře panel" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Zobrazit všechny panely…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Obnovit panel", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Připnout panel", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Odepnout panel", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Vypnout zvuk panelu", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Zapnout zvuk panelu", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Zavřít panel" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Vrátit zavření panelu" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Duplikovat kartu" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Přesunout do nového okna" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Obnovit všechny panely" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Zavřít panely níže" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Zavřít ostatní panely" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Otevřít nastavení" 73 | }, 74 | "optionsTitle": { 75 | "message": "Nastavení" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Kompaktní režim" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "Kompaktní režim snižuje výšku záložek aby jich bylo zobrazeno více. Dynamické nastavení aktivuje kompaktní režim když bude málo místa." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Deaktivováno" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dynamický" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Pokaždé" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Kompaktní připnuté karty" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Tmavý vzhled" 97 | }, 98 | "optionsAdvancedTitle": { 99 | "message": "Pokročilé" 100 | }, 101 | "optionsCustomCSS": { 102 | "message": "Vlastní šablona stylů" 103 | }, 104 | "optionsCustomCSSWikiLink": { 105 | "message": "Wiki článek o CSS vylepšeních" 106 | }, 107 | "optionsSaveCustomCSS": { 108 | "message": "Uložit CSS" 109 | } 110 | } -------------------------------------------------------------------------------- /src/_locales/tr/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center insanların sekmeleri kullanma şeklinden kaynaklanan bazı sorunları (en dikkat çekeni \"çok fazla sekme\" sorunu) çözme ve gelecek yeniliklerin temeli için daha kullanışlı bir arayüz sağlama girişimidir. Firefox eklentisinin ilk sürümü, sekmeleri moda olduğu şekliyle yatay değil dikey olarak düzenler. Bu, muhteşem VerticalTabs eklentisinden ödünç alınmış bir fikir ve ondan yoğun bir şekilde ilham alır." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Tab Center Redux'a Geç", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Sekmeler", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Yeni Sekme", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Yeni bir sekme aç" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Sekmeleri ara" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Sekmeyi kapat" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Tüm sekmeleri göster…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Sekmeyi Yeniden Yükle", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Sekmeyi İğnele", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Sekmeden İğneyi Kaldır", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Sekmenin Sesini Kapat", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Sekmenin Sesini Aç", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Sekmeyi Kapat" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Kapatılan Sekmeyi Yeniden Aç" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Sekmeyi Çoğalt" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Yeni Pencereye Geç" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Tüm Sekmeleri Yeniden Yükle" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Alttaki Sekmeleri Kapat" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Diğer Sekmeleri Kapat" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Ayarları aç" 73 | }, 74 | "optionsTitle": { 75 | "message": "Ayarlar" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Kısa Mod" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "Kısa Mod daha fazla göstermek için sekmelerin yüksekliğini azaltır. Dinamik ayarda, boş alanımız kalmayınca devreye girecek." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Devre dışı" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dinamik" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Daima" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Kısa İğnelenmiş Sekmeler" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Koyu Tema" 97 | }, 98 | "optionsAdvancedTitle": { 99 | "message": "Gelişmiş" 100 | }, 101 | "optionsCustomCSS": { 102 | "message": "Özel Tarz Sayfası" 103 | }, 104 | "optionsCustomCSSWikiLink": { 105 | "message": "Wiki Maddesinden Alıntı CSS" 106 | }, 107 | "optionsSaveCustomCSS": { 108 | "message": "CSS Kaydet" 109 | } 110 | } -------------------------------------------------------------------------------- /src/_locales/pt/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center é uma tentativa de resolver alguns dos problemas que surgiram a partir da forma como as pessoas usam abas (notavelmente o problema de \"abas demais\") e fornecer uma base de interface de usuário mais versátil para inovação futura. A primeira versão desta extensão para o Firefox organiza abas verticalmente, em vez de horizontalmente. Ela é fortemente inspirada e toma emprestado ideias da excelente extensão VerticalTabs." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Alternar Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Abas", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Nova aba", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Abrir uma nova aba" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Buscar abas" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Fechar aba" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Mostrar todas as abas…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Recarregar aba", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Fixar aba", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Desafixar aba", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Silenciar aba", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Não silenciar aba", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Fechar aba" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Reabrir aba" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Duplicar aba" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Mover para nova janela" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Recarregar todas as abas" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Fechar abas abaixo" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Fechar outras abas" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Abrir opções" 73 | }, 74 | "optionsTitle": { 75 | "message": "Opções" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Modo compacto" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "O modo compacto reduz a altura das abas para mostrar mais delas. Na configuração dinâmica, este modo será\nacionado quando não houver espaço disponível." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Desativado" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dinâmico" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Sempre" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Compactar abas fixadas" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Tema escuro" 97 | }, 98 | "optionsAdvancedTitle": { 99 | "message": "Avançado" 100 | }, 101 | "optionsCustomCSS": { 102 | "message": "Folha de estilos personalizada" 103 | }, 104 | "optionsCustomCSSWikiLink": { 105 | "message": "Artigo Wiki sobre ajustes CSS" 106 | }, 107 | "optionsSaveCustomCSS": { 108 | "message": "Salvar CSS" 109 | } 110 | } -------------------------------------------------------------------------------- /src/_locales/pl/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center jest próbą rozwiązania problemów, które pojawiły się w wyniku tego jak ludzie używają kart (szczególnie zbyt wielu kart) i wprowadza wszechstronny interfejs użytkownika dla przyszłych innowacji. Pierwsza wersja tej wtyczki układa karty pionowo, a nie poziomo. Ta wtyczka jest mocno zainspirowana wspaniałą wtyczką VerticalTabs." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Przełącz Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Karty", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Nowa karta", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Otwórz nową kartę" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Szukaj karty" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Zamknij kartę" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Pokaż wszystkie karty…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Odśwież kartę", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Przypnij kartę", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Odepnij kartę", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Wycisz kartę", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Włącz dźwięk", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Zamknij kartę" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Przywróć zamkniętą kartę" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Duplikuj kartę" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Przenieś do nowego okna" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Odśwież wszystkie karty" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Zamknij karty poniżej" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Zamknij inne karty" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Otwórz ustawienia" 73 | }, 74 | "optionsTitle": { 75 | "message": "Ustawienia" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Tryb kompaktowy" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "Tryb kompaktowy zmniejsza wysokość kart, aby pokazać ich więcej. W ustawieniu dynamicznym uaktywni się, kiedy zabraknie miejsca." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Wyłączony" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dynamiczny" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Zawsze" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Kompaktuj przypięte karty" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Ciemny motyw" 97 | }, 98 | "optionsThemeIntegration": { 99 | "message": "Zintegruj z bieżącym motywem" 100 | }, 101 | "optionsAdvancedTitle": { 102 | "message": "Zaawansowane" 103 | }, 104 | "optionsCustomCSS": { 105 | "message": "Niestandardowy arkusz stylów" 106 | }, 107 | "optionsCustomCSSWikiLink": { 108 | "message": "Strona Wiki o dostosowaniu CSS" 109 | }, 110 | "optionsSaveCustomCSS": { 111 | "message": "Zapisz CSS" 112 | } 113 | } -------------------------------------------------------------------------------- /src/_locales/ru/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center — это попытка решить некоторые проблемы, возникшие из-за того, что люди используют вкладки (точнее “слишком много вкладок”) и предоставить более универсальный интерфейс для будущих инноваций. Первая версия этого дополнения для Firefox, упорядочивает вкладки вертикально, а не горизонтально. Вдохновение и идеи были заимствованы из отличного расширения VerticalTabs." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Панель Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Вкладки", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Новая вкладка", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Открыть новую вкладку" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Найти вкладку" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Закрыть вкладку" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Показать все вкладки…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Перезагрузить вкладку", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Закрепить вкладку", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Открепить вкладку", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Убрать звук во вкладке", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Восстановить звук во вкладке", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Закрыть вкладку" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Вернуть закрытую вкладку" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Дублировать вкладку" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Переместить в новое окно" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Перезагрузить все вкладки" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Закрыть вкладки ниже" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Закрыть другие вкладки" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Открыть настройки" 73 | }, 74 | "optionsTitle": { 75 | "message": "Настройки" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Компактный режим" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "Компактный режим уменьшает высоту вкладок, позволяя отобразить их большее количество. Опция \"Динамический\" активирует компактный режим автоматически, когда заканчивается свободное место." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Отключен" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Автоматическая подстройка" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Всегда" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Компактные закрепленные вкладки" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Темная тема" 97 | }, 98 | "optionsAdvancedTitle": { 99 | "message": "Расширенные настройки" 100 | }, 101 | "optionsCustomCSS": { 102 | "message": "Пользовательские стили" 103 | }, 104 | "optionsCustomCSSWikiLink": { 105 | "message": "Вики-статья CSS Tweaks" 106 | }, 107 | "optionsSaveCustomCSS": { 108 | "message": "Сохранить CSS" 109 | } 110 | } -------------------------------------------------------------------------------- /src/_locales/uk/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center це спроба вирішити деякі проблеми, які виникли у зв'язку із тим, як люди використовують вкладки (особливо проблема надто великої кількості вкладок), і надати більш гнучку базу для майбутніх іновацій. Перша версія цього доповнення для Firefox розташовує вкладки вертикально, а не горизонтально. Натхнення та запозичені ідеї взято із чудового доповнення VerticalTabs." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Показати\/Сховати Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Вкладки", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Нова вкладка", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Відкрити нову вкладку" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Пошук" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Закрити вкладку" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Показати всі вкладки…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Оновити вкладку", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Прикріпити вкладку", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Відкріпити вкладку", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Вимкнути звук вкладки", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Увімкнути звук вкладки", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Закрити вкладку" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Відновити закриту вкладку" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Дублювати вкладку" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Перенести в нове вікно" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Оновити всі вкладки" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Закрити вкладки знизу" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Закрити інші вкладки" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Відкрити налаштування" 73 | }, 74 | "optionsTitle": { 75 | "message": "Налаштування" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Компактний режим" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "У компактному режимі вкладки займають менше місця. Якщо ввімкнено динамічне переключення, то компактний режим буде активовано у випадку відсутності вільного простору." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Вимкнено" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Динамічно" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Завжди" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Компактні прикріплені вкладки" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Темна тема" 97 | }, 98 | "optionsThemeIntegration": { 99 | "message": "Інтегрувати з поточною темою" 100 | }, 101 | "optionsAdvancedTitle": { 102 | "message": "Додаткові" 103 | }, 104 | "optionsCustomCSS": { 105 | "message": "Власна таблиця стилів" 106 | }, 107 | "optionsCustomCSSWikiLink": { 108 | "message": "Довідка про CSS" 109 | }, 110 | "optionsSaveCustomCSS": { 111 | "message": "Зберегти CSS" 112 | } 113 | } -------------------------------------------------------------------------------- /src/_locales/eo/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center estas provo solvi kelkajn problemojn kiuj aperigis el kiel homoj uzas langetojn (pli fame, la «tro da langetoj» problemo) kaj provizi pli diversutilan fasadan bazon por estontaj novaĵoj. La unua versio de ĉi tiu Firefox-a aldonaĵo aranĝas la langetojn vertikale anstataŭ horizontale. Ĝi forte inspiriĝis kaj prenis ideon el la bonega aldonaĵo VerticalTabs." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Ŝalti Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Langetoj", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Nova langeto", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Malfermas novan langeton" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Serĉi langetojn" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Fermi la langeton" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Montri ĉiujn langetojn…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Reŝargi la langeton", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Fiksi la langeton", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Malfiksi la langeton", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Silentigi la langeton", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Malsilentigi la langeton", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Fermi la langeton" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Malfari fermon de la langeto" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Duobligi la langeton" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Movi al nova fenestro" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Reŝargi ĉiujn langetojn" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Fermi la subajn langetojn" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Fermi aliajn langetojn" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Malfermi agordojn" 73 | }, 74 | "optionsTitle": { 75 | "message": "Agordoj" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Kompakta modo" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "La kompakta modo malgrandiĝas la alto de la langetojn por montri pli da ili. En dinamika agordo, ĝi validiĝas kiam oni ne plu havas ceteran spacon." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Malvalidigita" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dinamika" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Ĉiam" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Kompaktaj fiksitaj langetoj" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Malhela etoso" 97 | }, 98 | "optionsThemeIntegration": { 99 | "message": "Integriĝi aktualan temon" 100 | }, 101 | "optionsAdvancedTitle": { 102 | "message": "Altnivela" 103 | }, 104 | "optionsCustomCSS": { 105 | "message": "Propra stilfolio" 106 | }, 107 | "optionsCustomCSSWikiLink": { 108 | "message": "Vikia artikolo pri stilfiliaj adaptoj" 109 | }, 110 | "optionsSaveCustomCSS": { 111 | "message": "Konservi la stilfolion" 112 | } 113 | } -------------------------------------------------------------------------------- /src/_locales/nl/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center is een poging om sommige problemen op te lossen die ontstaan zijn uit de manier waarop mensen tabbladen gebruiken (vooral het “teveel tabbladen“ probleem) en een veelzijdigere gebruikersinterface te bieden voor toekomstige innovatie. De eerste versie van deze Firefox-add-on schikt tabbladen verticaal in plaats van horizontaal. Het is hevig geïnspireerd op en leent ideeën van de uitstekende VerticalTabs-add-on." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Tab Center Redux weergeven\/verbergen", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Tabbladen", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Nieuw tabblad", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Open een nieuw tabblad" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Zoek tabbladen" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Tabblad sluiten" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Alle tabbladen tonen…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Tabblad vernieuwen", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Tabblad vastmaken", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Tabblad losmaken", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Tabblad dempen", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Tabblad dempen opheffen", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Tabblad sluiten" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Tabblad sluiten ongedaan maken" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Tabblad dupliceren" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Verplaatsen naar nieuw venster" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Alle tabbladen vernieuwen" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Onderliggende tabbladen sluiten" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Overige tabbladen sluiten" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Instellingen openen" 73 | }, 74 | "optionsTitle": { 75 | "message": "Instellingen" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Compacte modus" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "De compacte modus vermindert de hoogte van de tabbladen zodat er meer getoond kunnen worden. In de dynamische modus zal dit ingeschakeld worden wanneer er geen ruimte meer over is." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Uitgeschakeld" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dynamisch" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Altijd" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Compacte vastgemaakte tabbladen" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Donker thema" 97 | }, 98 | "optionsAdvancedTitle": { 99 | "message": "Geavanceerd" 100 | }, 101 | "optionsCustomCSS": { 102 | "message": "Aangepaste CSS-stijlen" 103 | }, 104 | "optionsCustomCSSWikiLink": { 105 | "message": "CSS-aanpassingen wikipagina" 106 | }, 107 | "optionsSaveCustomCSS": { 108 | "message": "CSS opslaan" 109 | } 110 | } -------------------------------------------------------------------------------- /src/_locales/el/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Το Tab Center είναι μια προσπάθεια επίλυσης ορισμένων προβλημάτων που προέκυψαν από τον τρόπο με τον οποίο οι χρήστες χρησιμοποιούν τις καρτέλες (κυρίως το πρόβλημα «πάρα πολλών καρτελών») και παρέχει μια πιο ευέλικτη και καινοτομική βάση UI. Η πρώτη έκδοση αυτού του πρόσθετου του Firefox ταξινομεί τις καρτέλες καθέτως και όχι σε οριζοντίως. Είναι έντονα εμπνευσμένο από τις ιδέες του εξαιρετικού προσθέτου VerticalTabs." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Ενεργοποίηση\\\/Απενεργοποίηση Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Καρτέλες", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Νέα Καρτέλα", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Άνοιγμα Νέας Καρτέλας" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Αναζήτηση Καρτελών" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Κλείσιμο Καρτέλας" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Εμφάνιση όλων των καρτελών…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Ανανέωση Καρτέλας", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Καρφίτσωμα Καρτέλας", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Ξεκαρφίτσωμα Καρτέλας", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Σίγαση Καρτέλας", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Αναίρεση Σίγασης Καρτέλας", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Κλείσιμο Καρτέλας" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Αναίρεση Κλεισίματος Καρτέλας" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Κλωνοποίηση Καρτέλας" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Μετακίνηση σε νέο παράθυρο" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Ανανέωση όλων των καρτελών" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Κλείσιμο των κάτωθι καρτελών" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Κλείσιμο των άλλων καρτελών" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Άνοιγμα Ρυθμίσεων" 73 | }, 74 | "optionsTitle": { 75 | "message": "Ρυθμίσεις" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Συμπαγής Λειτουργία" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "Η Συμπαγής Λειτουργία μειώνει το ύψος των καρτελών για την εμφάνιση περισσοτέρων αυτών. Στη Δυναμική Ρύθμιση ενεργοποιείτε όταν δεν υπάρχει άλλος χώρος." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Απενεργοποιημένη" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Δυναμική" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Πάντα" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Συμπαγής καρφιτσωμένες καρτέλες" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Σκούρο θέμα" 97 | }, 98 | "optionsAdvancedTitle": { 99 | "message": "Για προχωρημένους" 100 | }, 101 | "optionsCustomCSS": { 102 | "message": "Προσαρμογή Stylesheet" 103 | }, 104 | "optionsCustomCSSWikiLink": { 105 | "message": "Αρθρογραφία Wiki - Βελτιώσεις CSS" 106 | }, 107 | "optionsSaveCustomCSS": { 108 | "message": "Αποθήκευση CSS" 109 | } 110 | } -------------------------------------------------------------------------------- /src/_locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center is an attempt to solve some of the issues that have emerged from the way people use tabs (most notably the “too many tabs” problem) and provide a more versatile UI basis for future innovation. The first version of this Firefox add-on arranges tabs in a vertical rather than horizontal fashion. It is heavily inspired by and borrows ideas from the excellent VerticalTabs add-on." 4 | }, 5 | 6 | "browserActionTitle": { 7 | "message": "Toggle Tab Center Redux", 8 | "description": "Tooltip shown when hovering the toolbar button." 9 | }, 10 | 11 | "sidebarTitle": { 12 | "message": "Tabs", 13 | "description": "Label shown in the sidebar selector." 14 | }, 15 | 16 | "newTabBtnLabel": { 17 | "message": "New Tab", 18 | "description": "Label of the New Tab button in the top menu." 19 | }, 20 | 21 | "newTabBtnTooltip": { 22 | "message": "Open a new tab" 23 | }, 24 | 25 | "searchPlaceholder": { 26 | "message": "Search tabs" 27 | }, 28 | 29 | "closeTabButtonTooltip": { 30 | "message": "Close tab" 31 | }, 32 | 33 | "allTabsLabel": { 34 | "message": "Show all tabs…", 35 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 36 | }, 37 | 38 | "contextMenuReloadTab": { 39 | "message": "Reload Tab", 40 | "description": "Reload Tab context menu item label." 41 | }, 42 | 43 | "contextMenuPinTab": { 44 | "message": "Pin Tab", 45 | "description": "Pin Tab context menu item label." 46 | }, 47 | 48 | "contextMenuUnpinTab": { 49 | "message": "Unpin Tab", 50 | "description": "Unpin Tab context menu item label." 51 | }, 52 | 53 | "contextMenuMuteTab": { 54 | "message": "Mute Tab", 55 | "description": "Mute Tab context menu item label." 56 | }, 57 | 58 | "contextMenuUnmuteTab": { 59 | "message": "Unmute Tab", 60 | "description": "Unmute Tab context menu item label." 61 | }, 62 | 63 | "contextMenuCloseTab": { 64 | "message": "Close Tab" 65 | }, 66 | 67 | "contextMenuUndoCloseTab": { 68 | "message": "Undo Close Tab" 69 | }, 70 | 71 | "contextMenuDuplicateTab": { 72 | "message": "Duplicate Tab" 73 | }, 74 | 75 | "contextMenuMoveTabToNewWindow": { 76 | "message": "Move to New Window" 77 | }, 78 | 79 | "contextMenuReloadAllTabs": { 80 | "message": "Reload All Tabs" 81 | }, 82 | 83 | "contextMenuCloseTabsUnderneath": { 84 | "message": "Close Tabs Underneath" 85 | }, 86 | 87 | "contextMenuCloseOtherTabs": { 88 | "message": "Close Other Tabs" 89 | }, 90 | 91 | "settingsBtnTooltip": { 92 | "message": "Open settings" 93 | }, 94 | 95 | "optionsTitle": { 96 | "message": "Settings" 97 | }, 98 | 99 | "optionsCompactMode": { 100 | "message": "Compact Mode" 101 | }, 102 | 103 | "optionsCompactModeTooltip": { 104 | "message": "The Compact Mode reduces the height of tabs to show more of them. In the Dynamic setting, it will engage once we have no space left." 105 | }, 106 | 107 | "optionsCompactModeOff":{ 108 | "message": "Disabled" 109 | }, 110 | 111 | "optionsCompactModeDynamic":{ 112 | "message": "Dynamic" 113 | }, 114 | 115 | "optionsCompactModeStrict":{ 116 | "message": "Always" 117 | }, 118 | 119 | "optionsCompactPins": { 120 | "message": "Compact Pinned Tabs" 121 | }, 122 | 123 | "optionsDarkTheme": { 124 | "message": "Dark Theme" 125 | }, 126 | 127 | "optionsThemeIntegration": { 128 | "message": "Integrate with current theme" 129 | }, 130 | 131 | "optionsAdvancedTitle": { 132 | "message": "Advanced" 133 | }, 134 | 135 | "optionsCustomCSS": { 136 | "message": "Custom Stylesheet" 137 | }, 138 | 139 | "optionsCustomCSSWikiLink": { 140 | "message": "CSS Tweaks Wiki Article" 141 | }, 142 | 143 | "optionsSaveCustomCSS": { 144 | "message": "Save CSS" 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /src/_locales/fr/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center essaie de résoudre certains des problèmes suite à l'utilisation des onglets (principalement, le problème « j'ai trop d'onglets ») et propose une base d'interface utilisateur plus souple pour innover. Cette première version propose un arrangement vertical des onglets. Ce module est fortement inspiré et emprunte des idées à l'excellent module VerticalTabs." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Activer\/désactiver Tab Center Redux", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Onglets", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Nouvel onglet", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Ouvrir un nouvel onglet" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Rechercher dans les onglets" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Fermer l'onglet" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Afficher tous les onglets…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Actualiser l'onglet", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Épingler cet onglet", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Relâcher l'onglet", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Rendre l'onglet muet", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Réactiver le son de l'onglet", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Fermer l'onglet" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Annuler la fermeture de l'onglet" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Dupliquer l'onglet" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "Déplacer vers une nouvelle fenêtre" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Actualiser tous les onglets" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Fermer les onglets en dessous" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Fermer les autres onglets" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Ouvrir les paramètres" 73 | }, 74 | "optionsTitle": { 75 | "message": "Paramètres" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Mode compact" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "Le Mode compact réduit la hauteur des onglets afin d'en afficher davantage. En réglage Dynamique, il s'active automatiquement lorsqu'il n'y a plus d'espace disponible." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Désactivé" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dynamique" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Toujours" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Onglets épinglés compacts" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Thème sombre" 97 | }, 98 | "optionsThemeIntegration": { 99 | "message": "Intégrer avec le thème actuel" 100 | }, 101 | "optionsAdvancedTitle": { 102 | "message": "Avancé" 103 | }, 104 | "optionsCustomCSS": { 105 | "message": "Feuille de style personnalisée" 106 | }, 107 | "optionsCustomCSSWikiLink": { 108 | "message": "Article Wiki CSS Tweaks (en Anglais)" 109 | }, 110 | "optionsSaveCustomCSS": { 111 | "message": "Enregistrer la CSS" 112 | } 113 | } -------------------------------------------------------------------------------- /src/_locales/de/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionDescription": { 3 | "message": "Tab Center versucht, einige Probleme zu lösen, die häufig bei der Verwendung von Tabs auftreten (insbesondere das \"zu viele Tabs\"-Problem). Außerdem soll es eine flexiblere Basis für zukünftige Innovationen der Benutzeroberfläche bieten. Die erste Version dieses AddOns für Firefox ordnet die offenen Tabs vertikal an anstelle von horizontal. Es wurde stark inspiriert durch das exzellente AddOn VerticalTabs und übernimmt viele Ideen von diesem." 4 | }, 5 | "browserActionTitle": { 6 | "message": "Tab Center Redux aktivieren\/deaktivieren", 7 | "description": "Tooltip shown when hovering the toolbar button." 8 | }, 9 | "sidebarTitle": { 10 | "message": "Tabs", 11 | "description": "Label shown in the sidebar selector." 12 | }, 13 | "newTabBtnLabel": { 14 | "message": "Neuer Tab", 15 | "description": "Label of the New Tab button in the top menu." 16 | }, 17 | "newTabBtnTooltip": { 18 | "message": "Einen neuen Tab öffnen" 19 | }, 20 | "searchPlaceholder": { 21 | "message": "Tabs durchsuchen" 22 | }, 23 | "closeTabButtonTooltip": { 24 | "message": "Tab schließen" 25 | }, 26 | "allTabsLabel": { 27 | "message": "Alle Tabs anzeigen…", 28 | "description": "Shown at the bottom of the list of tabs if some tabs are filtered by the current search query." 29 | }, 30 | "contextMenuReloadTab": { 31 | "message": "Tab neu laden", 32 | "description": "Reload Tab context menu item label." 33 | }, 34 | "contextMenuPinTab": { 35 | "message": "Tab anheften", 36 | "description": "Pin Tab context menu item label." 37 | }, 38 | "contextMenuUnpinTab": { 39 | "message": "Tab ablösen", 40 | "description": "Unpin Tab context menu item label." 41 | }, 42 | "contextMenuMuteTab": { 43 | "message": "Tab stummschalten", 44 | "description": "Mute Tab context menu item label." 45 | }, 46 | "contextMenuUnmuteTab": { 47 | "message": "Stummschaltung für Tab aufheben", 48 | "description": "Unmute Tab context menu item label." 49 | }, 50 | "contextMenuCloseTab": { 51 | "message": "Tab schließen" 52 | }, 53 | "contextMenuUndoCloseTab": { 54 | "message": "Tab wiederherstellen" 55 | }, 56 | "contextMenuDuplicateTab": { 57 | "message": "Tab klonen" 58 | }, 59 | "contextMenuMoveTabToNewWindow": { 60 | "message": "In neues Fenster verschieben" 61 | }, 62 | "contextMenuReloadAllTabs": { 63 | "message": "Alle Tabs neu laden" 64 | }, 65 | "contextMenuCloseTabsUnderneath": { 66 | "message": "Schließe alle Tabs unter diesem" 67 | }, 68 | "contextMenuCloseOtherTabs": { 69 | "message": "Andere Tabs schließen" 70 | }, 71 | "settingsBtnTooltip": { 72 | "message": "Einstellungen öffnen" 73 | }, 74 | "optionsTitle": { 75 | "message": "Einstellungen" 76 | }, 77 | "optionsCompactMode": { 78 | "message": "Kompakte Darstellung" 79 | }, 80 | "optionsCompactModeTooltip": { 81 | "message": "Die kompakte Darstellung reduziert die Höhe der Tabs und zeigt so mehr von ihnen an. Bei der Einstellung \"Dynamisch\", wird die Höhe reduziert, sobald nicht mehr genügend Platz zur Verfügung steht." 82 | }, 83 | "optionsCompactModeOff": { 84 | "message": "Deaktiviert" 85 | }, 86 | "optionsCompactModeDynamic": { 87 | "message": "Dynamisch" 88 | }, 89 | "optionsCompactModeStrict": { 90 | "message": "Immer" 91 | }, 92 | "optionsCompactPins": { 93 | "message": "Kompakte angeheftete Tabs" 94 | }, 95 | "optionsDarkTheme": { 96 | "message": "Dunkle Darstellung" 97 | }, 98 | "optionsThemeIntegration": { 99 | "message": "Ins aktuelle Theme integrieren" 100 | }, 101 | "optionsAdvancedTitle": { 102 | "message": "Weitere Einstellungen" 103 | }, 104 | "optionsCustomCSS": { 105 | "message": "Benutzerdefinierte Stylesheet" 106 | }, 107 | "optionsCustomCSSWikiLink": { 108 | "message": "Wiki-Artikel über CSS Anpassungen" 109 | }, 110 | "optionsSaveCustomCSS": { 111 | "message": "Stylesheet speichern" 112 | } 113 | } -------------------------------------------------------------------------------- /src/sidebar/tabcontextmenu.js: -------------------------------------------------------------------------------- 1 | import ContextMenu from "./lib/contextmenu/contextmenu.js"; 2 | 3 | /* @arg {props} 4 | * tab 5 | * posX 6 | * poxY 7 | * onClose 8 | * canMoveToNewWindow 9 | * reloadAllTabs 10 | * canCloseTabsAfter 11 | * closeTabsAfter 12 | * closeOtherTabs 13 | * canUndoCloseTab 14 | * undoCloseTab 15 | */ 16 | function TabContextMenu(props) { 17 | this._props = props; 18 | this._contextMenu = new ContextMenu(props.posX, props.posY); 19 | } 20 | TabContextMenu.prototype = { 21 | show() { 22 | const items = this._createContextMenuItems(this._props.tab); 23 | this._contextMenu.show(items); 24 | this._setupListeners(); 25 | }, 26 | _setupListeners() { 27 | const closeIf = (predicateFun, e) => { 28 | if (predicateFun(e)) { 29 | this.close(); 30 | } 31 | }; 32 | this._onKeyUp = closeIf.bind(this, e => e.key === "Escape"); 33 | this._onClick = closeIf.bind(this, e => e.button === 0); 34 | this._onBlur = closeIf.bind(this, () => true); 35 | window.addEventListener("keyup", this._onKeyUp); 36 | window.addEventListener("click", this._onClick); 37 | window.addEventListener("blur", this._onBlur); 38 | }, 39 | _removeListeners() { 40 | window.removeEventListener("keyup", this._onKeyUp); 41 | window.removeEventListener("click", this._onClick); 42 | window.removeEventListener("blur", this._onBlur); 43 | }, 44 | close() { 45 | this._removeListeners(); 46 | this._contextMenu.hide(); 47 | this._props.onClose(); 48 | }, 49 | _createContextMenuItems(tab) { 50 | const items = []; 51 | items.push({ 52 | label: browser.i18n.getMessage("contextMenuReloadTab"), 53 | onCommandFn: () => { 54 | browser.tabs.reload(tab.id); 55 | } 56 | }); 57 | items.push({ 58 | label: browser.i18n.getMessage(tab.muted ? "contextMenuUnmuteTab" : 59 | "contextMenuMuteTab"), 60 | onCommandFn: () => { 61 | browser.tabs.update(tab.id, {"muted": !tab.muted}); 62 | } 63 | }); 64 | items.push({ 65 | label: "separator" 66 | }); 67 | items.push({ 68 | label: browser.i18n.getMessage(tab.pinned ? "contextMenuUnpinTab" : 69 | "contextMenuPinTab"), 70 | onCommandFn: () => { 71 | browser.tabs.update(tab.id, {"pinned": !tab.pinned}); 72 | } 73 | }); 74 | items.push({ 75 | label: browser.i18n.getMessage("contextMenuDuplicateTab"), 76 | onCommandFn: () => { 77 | browser.tabs.duplicate(tab.id); 78 | } 79 | }); 80 | if (this._props.canMoveToNewWindow) { 81 | items.push({ 82 | label: browser.i18n.getMessage("contextMenuMoveTabToNewWindow"), 83 | onCommandFn: () => { 84 | browser.windows.create({tabId: tab.id}); 85 | } 86 | }); 87 | } 88 | items.push({ 89 | label: "separator" 90 | }); 91 | items.push({ 92 | label: browser.i18n.getMessage("contextMenuReloadAllTabs"), 93 | onCommandFn: this._props.reloadAllTabs 94 | }); 95 | if (!tab.pinned) { 96 | if (this._props.canCloseTabsAfter) { 97 | items.push({ 98 | label: browser.i18n.getMessage("contextMenuCloseTabsUnderneath"), 99 | onCommandFn: this._props.closeTabsAfter 100 | }); 101 | } 102 | items.push({ 103 | label: browser.i18n.getMessage("contextMenuCloseOtherTabs"), 104 | onCommandFn: this._props.closeOtherTabs 105 | }); 106 | } 107 | items.push({ 108 | label: "separator" 109 | }); 110 | items.push({ 111 | label: browser.i18n.getMessage("contextMenuUndoCloseTab"), 112 | isEnabled: this._props.canUndoCloseTab, 113 | onCommandFn: this._props.undoCloseTab 114 | }); 115 | items.push({ 116 | label: browser.i18n.getMessage("contextMenuCloseTab"), 117 | onCommandFn: () => { 118 | browser.tabs.remove(tab.id); 119 | } 120 | }); 121 | return items; 122 | }, 123 | }; 124 | 125 | export default TabContextMenu; 126 | -------------------------------------------------------------------------------- /src/sidebar/img/tab-audio-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/sidebar/tabcenter.js: -------------------------------------------------------------------------------- 1 | import TabList from "./tablist.js"; 2 | import TopMenu from "./topmenu/topmenu.js"; 3 | 4 | function TabCenter() { 5 | } 6 | TabCenter.prototype = { 7 | async init() { 8 | const search = this._search.bind(this); 9 | const openTab = this._openTab.bind(this); 10 | this._topMenu = new TopMenu({openTab, search}); 11 | // Do other work while the promises are pending. 12 | const prefsPromise = this._readPrefs(); 13 | const windowPromise = browser.windows.getCurrent(); 14 | 15 | this._setupListeners(); 16 | 17 | const {id: windowId} = await windowPromise; 18 | this._windowId = windowId; 19 | const prefs = await prefsPromise; 20 | this._applyPrefs(prefs); 21 | this._tabList = new TabList({openTab, search, prefs}); 22 | // There's no real need to await on populate(). 23 | this._tabList.populate(windowId); 24 | 25 | browser.runtime.sendMessage({ 26 | event: "sidebar-open", 27 | windowId 28 | }); 29 | 30 | browser.runtime.getPlatformInfo().then((platform) => { 31 | document.body.setAttribute("platform", platform.os); 32 | }); 33 | }, 34 | async _openTab(props = {}) { 35 | if (props.afterCurrent) { 36 | let currentIndex = (await browser.tabs.query({windowId: this._windowId, active: true}))[0].index; 37 | props.index = currentIndex + 1; 38 | } 39 | delete props.afterCurrent; 40 | browser.tabs.create(props); 41 | }, 42 | _search(val) { 43 | this._tabList.filter(val); 44 | this._topMenu.updateSearch(val); 45 | }, 46 | _setupListeners() { 47 | window.addEventListener("beforeunload", () => { 48 | browser.runtime.sendMessage({ 49 | event: "sidebar-closed", 50 | windowId: this._windowId 51 | }); 52 | }); 53 | window.addEventListener("contextmenu", (e) => { 54 | const target = e.target; 55 | // Let the searchbox input have a context menu. 56 | if (!(target && target.tagName === "INPUT" && target.type === "text")) { 57 | e.preventDefault(); 58 | } 59 | }, false); 60 | browser.storage.onChanged.addListener(changes => this._applyPrefs(unwrapChanges(changes))); 61 | this._themeListener = ({theme, windowId}) => { 62 | if (!windowId || windowId === this._windowId) { 63 | this._applyTheme(theme); 64 | } 65 | }; 66 | }, 67 | set _customCSS(cssText) { 68 | document.getElementById("customCSS").innerHTML = cssText; 69 | }, 70 | set _darkTheme(isDarkTheme) { 71 | if (isDarkTheme) { 72 | document.body.classList.add("dark-theme"); 73 | } else { 74 | document.body.classList.remove("dark-theme"); 75 | } 76 | }, 77 | set _themeIntegration(enabled) { 78 | if (!browser.theme.onUpdated) { 79 | return; 80 | } 81 | if (!enabled) { 82 | this._resetTheme(); 83 | if (browser.theme.onUpdated.hasListener(this._themeListener)) { 84 | browser.theme.onUpdated.removeListener(this._themeListener); 85 | } 86 | } else { 87 | browser.theme.onUpdated.addListener(this._themeListener); 88 | browser.theme.getCurrent(this._windowId).then(this._applyTheme); 89 | } 90 | }, 91 | _readPrefs() { 92 | return browser.storage.local.get({ 93 | customCSS: "", 94 | darkTheme: false, 95 | compactModeMode: 1/* COMPACT_MODE_DYNAMIC */, 96 | compactPins: true, 97 | themeIntegration: false, 98 | }); 99 | }, 100 | _applyPrefs(prefs) { 101 | if (prefs.hasOwnProperty("customCSS")) { 102 | this._customCSS = prefs.customCSS; 103 | } 104 | if (prefs.hasOwnProperty("darkTheme")) { 105 | this._darkTheme = prefs.darkTheme; 106 | } 107 | if (prefs.hasOwnProperty("themeIntegration")) { 108 | this._themeIntegration = prefs.themeIntegration; 109 | } 110 | }, 111 | _applyTheme(theme) { 112 | const setVariable = (cssVar, themeProps) => { 113 | for (const prop of themeProps) { 114 | if (theme.colors && theme.colors[prop]) { 115 | document.body.style.setProperty(cssVar, theme.colors[prop]); 116 | return; 117 | } 118 | } 119 | document.body.style.removeProperty(cssVar); 120 | }; 121 | setVariable("--tab-background-normal", ["accentcolor"]); 122 | setVariable("--menu-background", ["accentcolor"]); 123 | setVariable("--primary-text-color", ["textcolor"]); 124 | setVariable("--tab-background-active", ["tab_selected", "toolbar"]); 125 | setVariable("--tab-text-color-active", ["tab_text", "toolbar_text"]); 126 | setVariable("--default-tab-line-color", ["tab_line", "accentcolor"]); 127 | setVariable("--searchbox-background", ["toolbar_field"]); 128 | setVariable("--searchbox-text-color", ["toolbar_field_text"]); 129 | setVariable("--tab-border-color", ["toolbar_top_separator"]); 130 | }, 131 | _resetTheme() { 132 | this._applyTheme({}); 133 | }, 134 | startTests() { 135 | const script = document.createElement("script"); 136 | script.src = "../test/index.js"; 137 | document.head.appendChild(script); 138 | } 139 | }; 140 | 141 | function unwrapChanges(changes) { 142 | const unwrapped = {}; 143 | for (const [pref, change] of Object.entries(changes)) { 144 | unwrapped[pref] = change.newValue; 145 | } 146 | return unwrapped; 147 | } 148 | 149 | export default TabCenter; 150 | -------------------------------------------------------------------------------- /src/test/tabs-position.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env mocha */ 2 | /* global chai, tabCenter */ 3 | 4 | suite("tabs positions and indexes", () => { 5 | const {assert} = chai; 6 | 7 | function assertDOMOrderCorrect(ffTabs) { 8 | const ffTabsIds = ffTabs.filter(t => !t.hidden).map(t => t.id); 9 | const domTabsIds = [...document.querySelectorAll(".tab")] 10 | .map(e => parseInt(e.getAttribute("data-tab-id"))); 11 | assert.deepEqual(domTabsIds, ffTabsIds, "Order of tabs in the DOM is correct."); 12 | } 13 | 14 | function assertIndexesCorrect(ffTabs) { 15 | const tcTabs = tabCenter._tabList._tabs; 16 | assert.equal(tcTabs.size, ffTabs.length, "TabList number of tabs is correct."); 17 | 18 | for (const ffTab of ffTabs) { 19 | const tcTab = tcTabs.get(ffTab.id); 20 | assert.ok(tcTab, "found the TC tab"); 21 | assert.equal(tcTab.index, ffTab.index, "Tab index is correct."); 22 | } 23 | } 24 | 25 | async function assertOrderAndIndexes() { 26 | const ffTabs = await browser.tabs.query({windowId: ourWindowId}); 27 | assertDOMOrderCorrect(ffTabs); 28 | assertIndexesCorrect(ffTabs); 29 | } 30 | 31 | let ourWindowId; 32 | suiteSetup(async () => { 33 | const ourWindow = await browser.windows.getCurrent(); 34 | ourWindowId = ourWindow.id; 35 | }); 36 | 37 | async function cleanState() { 38 | const windows = await browser.windows.getAll(); 39 | for (const win of windows) { 40 | if (win.id !== ourWindowId) { 41 | await browser.windows.remove(win.id); 42 | } 43 | } 44 | const tabs = (await browser.tabs.query({windowId: ourWindowId})).map(t => t.id); 45 | await browser.tabs.create({windowId: ourWindowId}); 46 | await browser.tabs.remove(tabs); 47 | } 48 | 49 | setup(() => cleanState()); 50 | suiteTeardown(() => cleanState()); 51 | 52 | test("sanity check", async () => { 53 | const ffTabs = await browser.tabs.query({windowId: ourWindowId}); 54 | assertDOMOrderCorrect(ffTabs); 55 | assertIndexesCorrect(ffTabs); 56 | }); 57 | test("insertions/deletions", async () => { 58 | await browser.tabs.create({}); 59 | const {id: tabID1} = await browser.tabs.create({}); 60 | await browser.tabs.create({}); 61 | await assertOrderAndIndexes(); 62 | await browser.tabs.remove(tabID1); 63 | await assertOrderAndIndexes(); 64 | await browser.tabs.create({index: 1}); 65 | await assertOrderAndIndexes(); 66 | await browser.tabs.create({}); 67 | await assertOrderAndIndexes(); 68 | }); 69 | test("moves", async () => { 70 | await browser.tabs.create({}); 71 | const {id: tabID1} = await browser.tabs.create({}); 72 | await browser.tabs.create({}); 73 | await browser.tabs.create({}); 74 | await browser.tabs.create({}); 75 | await browser.tabs.move(tabID1, {index: 3}); 76 | await assertOrderAndIndexes(); 77 | await browser.tabs.move(tabID1, {index: -1}); 78 | await assertOrderAndIndexes(); 79 | await browser.tabs.move(tabID1, {index: 0}); 80 | await assertOrderAndIndexes(); 81 | }); 82 | test("attach from other window", async () => { 83 | await browser.tabs.create({}); 84 | await browser.tabs.create({}); 85 | await browser.tabs.create({}); 86 | const {id: otherWindowId} = await browser.windows.create(); 87 | await assertOrderAndIndexes(); 88 | const {id: otherTabId1} = (await browser.tabs.query({windowId: otherWindowId}))[0]; 89 | const {id: otherTabId2} = await browser.tabs.create({windowId: otherWindowId}); 90 | const {id: otherTabId3} = await browser.tabs.create({windowId: otherWindowId}); 91 | 92 | await browser.tabs.move(otherTabId1, {windowId: ourWindowId, index: -1}); 93 | await assertOrderAndIndexes(); 94 | await browser.tabs.move(otherTabId2, {windowId: ourWindowId, index: 0}); 95 | await assertOrderAndIndexes(); 96 | await browser.tabs.move(otherTabId3, {windowId: ourWindowId, index: 2}); 97 | await assertOrderAndIndexes(); 98 | }); 99 | test("detach to other window", async () => { 100 | const {id: tabID1} = await browser.tabs.create({}); 101 | await browser.tabs.create({}); 102 | const {id: tabID3} = await browser.tabs.create({}); 103 | await browser.tabs.create({}); 104 | const {id: otherWindowId} = await browser.windows.create({tabId: tabID3}); 105 | await assertOrderAndIndexes(); 106 | await browser.tabs.move(tabID1, {windowId: otherWindowId, index: -1}); 107 | await assertOrderAndIndexes(); 108 | }); 109 | test("hidding/un-hidding", async () => { 110 | const {id: tabID1} = await browser.tabs.create({}); 111 | await browser.tabs.hide(tabID1); 112 | const {id: tabID2} = await browser.tabs.create({}); 113 | const {id: tabID3} = await browser.tabs.create({}); 114 | await assertOrderAndIndexes(); 115 | await browser.tabs.move(tabID3, {index: 0}); 116 | await assertOrderAndIndexes(); 117 | await browser.tabs.hide(tabID2); 118 | await assertOrderAndIndexes(); 119 | await browser.tabs.show(tabID1); 120 | await assertOrderAndIndexes(); 121 | }); 122 | test("hidden + move (#347)", async () => { 123 | const {id: tabID1} = await browser.tabs.create({}); 124 | const {id: tabID2} = await browser.tabs.create({}); 125 | const {id: tabID3} = await browser.tabs.create({}); 126 | await browser.tabs.hide(tabID1); 127 | await browser.tabs.hide(tabID2); 128 | await browser.tabs.hide(tabID3); 129 | await assertOrderAndIndexes(); 130 | await browser.tabs.move(tabID1, {index: 2}); 131 | await browser.tabs.move(tabID3, {index: 0}); 132 | await assertOrderAndIndexes(); 133 | }); 134 | }); 135 | -------------------------------------------------------------------------------- /src/sidebar/img/loading-spinner.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/sidebar/img/usercontext.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 16 | 23 | 26 | 27 | 32 | 45 | 50 | 53 | 56 | 61 | 64 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/sidebar/tab.js: -------------------------------------------------------------------------------- 1 | /* global CSSAnimation */ 2 | 3 | function SideTab() { 4 | this.id = null; 5 | this.url = null; 6 | this.title = null; 7 | this.muted = null; 8 | this.pinned = null; 9 | this.visible = true; 10 | } 11 | 12 | SideTab.prototype = { 13 | init(tabInfo) { 14 | this.id = tabInfo.id; 15 | this.index = tabInfo.index; 16 | this._buildViewStructure(); 17 | 18 | this.view.id = `tab-${this.id}`; 19 | this.view.setAttribute("data-tab-id", this.id); 20 | 21 | this.hidden = tabInfo.hidden; 22 | this._updateTitle(tabInfo.title); 23 | this._updateURL(tabInfo.url); 24 | this._updateAudible(tabInfo.audible); 25 | this._updatedMuted(tabInfo.mutedInfo.muted); 26 | this._updateIcon(tabInfo.favIconUrl); 27 | this._updatePinned(tabInfo.pinned); 28 | this._updateDiscarded(tabInfo.discarded); 29 | if (tabInfo.cookieStoreId && tabInfo.cookieStoreId.startsWith("firefox-container-")) { 30 | // This work is done in the background on purpose: making create() async 31 | // creates all sorts of bugs, because it is called in observers (which 32 | // cannot be async). 33 | browser.contextualIdentities.get(tabInfo.cookieStoreId).then(context => { 34 | if (!context) { 35 | return; 36 | } 37 | this.view.classList.add("hasContext"); 38 | this.view.setAttribute("data-identity-color", context.color); 39 | }); 40 | } 41 | this.updateThumbnail = debounce(() => this._updateThumbnail(), 500); 42 | }, 43 | _buildViewStructure() { 44 | const template = document.getElementById("tab-template"); 45 | const tab = template.content.children[0].cloneNode(true); 46 | this.view = tab; 47 | this._burstView = tab.querySelector(".tab-loading-burst"); 48 | this._contextView = tab.querySelector(".tab-context"); 49 | this._iconOverlayView = tab.querySelector(".tab-icon-overlay"); 50 | this._metaImageView = tab.querySelector(".tab-meta-image"); 51 | this._iconView = tab.querySelector(".tab-icon"); 52 | this._titleView = tab.querySelector(".tab-title"); 53 | this._hostView = tab.querySelector(".tab-host"); 54 | const close = tab.querySelector(".tab-close"); 55 | close.title = browser.i18n.getMessage("closeTabButtonTooltip"); 56 | this.thumbnailCanvas = tab.querySelector("canvas"); 57 | this.thumbnailCanvas.id = `thumbnail-canvas-${this.id}`; 58 | this.thumbnailCanvasCtx = this.thumbnailCanvas.getContext("2d", {alpha: false}); 59 | }, 60 | onUpdate(changeInfo) { 61 | if (changeInfo.hasOwnProperty("hidden")) { 62 | this.hidden = changeInfo.hidden; 63 | } 64 | if (changeInfo.hasOwnProperty("title")) { 65 | this._updateTitle(changeInfo.title); 66 | } 67 | if (changeInfo.hasOwnProperty("favIconUrl")) { 68 | this._updateIcon(changeInfo.favIconUrl); 69 | } 70 | if (changeInfo.hasOwnProperty("url")) { 71 | this._updateURL(changeInfo.url); 72 | } 73 | if (changeInfo.hasOwnProperty("audible")) { 74 | this._updateAudible(changeInfo.audible); 75 | } 76 | if (changeInfo.hasOwnProperty("mutedInfo")) { 77 | this._updatedMuted(changeInfo.mutedInfo.muted); 78 | } 79 | if (changeInfo.hasOwnProperty("discarded")) { 80 | this._updateDiscarded(changeInfo.discarded); 81 | } 82 | if (changeInfo.hasOwnProperty("status")) { 83 | if (changeInfo.status === "loading") { 84 | this._updateLoading(true); 85 | } else if (changeInfo.status === "complete") { 86 | this._updateLoading(false); 87 | } 88 | } 89 | if (changeInfo.hasOwnProperty("pinned")) { 90 | this._updatePinned(changeInfo.pinned); 91 | } 92 | }, 93 | get host() { 94 | return new URL(this.url).host || this.url; 95 | }, 96 | _updateTitle(title) { 97 | if (this.title && this.title !== title) { 98 | if (!this.view.classList.contains("active")) { 99 | this.view.classList.add("wants-attention"); 100 | } 101 | } 102 | this.title = title; 103 | this._titleView.innerText = title; 104 | this.view.title = title; 105 | }, 106 | _updateIcon(favIconUrl) { 107 | if (favIconUrl) { 108 | this._setIcon(favIconUrl); 109 | } else { 110 | this._resetIcon(); 111 | } 112 | }, 113 | _updateURL(url) { 114 | this.url = url; 115 | this._hostView.innerText = this.host; 116 | }, 117 | _updateAudible(audible) { 118 | toggleClass(this._iconOverlayView, "sound", audible); 119 | }, 120 | _updatedMuted(muted) { 121 | this.muted = muted; 122 | toggleClass(this._iconOverlayView, "muted", muted); 123 | }, 124 | _updateLoading(isLoading) { 125 | toggleClass(this.view, "loading", isLoading); 126 | if (isLoading) { 127 | SideTab._syncThrobberAnimations(); 128 | this._notselectedsinceload = !this.view.classList.contains("active"); 129 | } else { 130 | if (this._notselectedsinceload) { 131 | this.view.setAttribute("notselectedsinceload", "true"); 132 | } else { 133 | this.view.removeAttribute("notselectedsinceload"); 134 | } 135 | } 136 | }, 137 | burst() { 138 | this._burstView.classList.add("bursting"); 139 | }, 140 | updateActive(active) { 141 | toggleClass(this.view, "active", active); 142 | if (active) { 143 | this._notselectedsinceload = false; 144 | this.view.removeAttribute("notselectedsinceload"); 145 | this.view.classList.remove("wants-attention"); 146 | } 147 | }, 148 | scrollIntoView() { 149 | // Pinned tabs are always into view! 150 | if (this.pinned) { 151 | return; 152 | } 153 | // Avoid an expensive sync reflow (scrolling). 154 | requestAnimationFrame(() => { 155 | this._scrollIntoView(); 156 | }); 157 | }, 158 | _scrollIntoView() { 159 | const {top: parentTop, height} = this.view.parentNode.parentNode.getBoundingClientRect(); 160 | let {top, bottom} = this.view.getBoundingClientRect(); 161 | top -= parentTop; 162 | bottom -= parentTop; 163 | if (top < 0) { 164 | this.view.scrollIntoView({block: "start", behavior: "smooth"}); 165 | } else if (bottom > height) { 166 | this.view.scrollIntoView({block: "end", behavior: "smooth"}); 167 | } 168 | }, 169 | updateVisibility(show) { 170 | this.visible = show; 171 | toggleClass(this.view, "hidden", !show); 172 | }, 173 | _setIcon(favIconUrl) { 174 | // https://bugzilla.mozilla.org/show_bug.cgi?id=1462948 175 | if (favIconUrl === "chrome://mozapps/skin/extensions/extensionGeneric-16.svg") { 176 | favIconUrl = "img/extensions.svg"; 177 | } 178 | if (favIconUrl.startsWith("chrome://") && favIconUrl.endsWith(".svg")) { 179 | this._iconView.classList.add("chrome-icon"); 180 | } else { 181 | this._iconView.classList.remove("chrome-icon"); 182 | } 183 | this._iconView.style.backgroundImage = `url("${favIconUrl}")`; 184 | const imgTest = document.createElement("img"); 185 | imgTest.src = favIconUrl; 186 | imgTest.onerror = () => { 187 | this._resetIcon(); 188 | }; 189 | }, 190 | _resetIcon() { 191 | this._iconView.style.backgroundImage = ""; 192 | this._iconView.classList.add("chrome-icon"); 193 | }, 194 | _updatePinned(pinned) { 195 | this.pinned = pinned; 196 | toggleClass(this.view, "pinned", pinned); 197 | }, 198 | _updateDiscarded(discarded) { 199 | toggleClass(this.view, "discarded", discarded); 200 | }, 201 | _updateThumbnail() { 202 | requestIdleCallback(async () => { 203 | const thumbnailBase64 = await browser.tabs.captureTab(this.id, { 204 | format: "png" 205 | }); 206 | await this._updateThumbnailCanvas(thumbnailBase64); 207 | 208 | this._metaImageView.style.backgroundImage = `-moz-element(#${this.thumbnailCanvas.id})`; 209 | this._metaImageView.classList.add("has-thumbnail"); 210 | }); 211 | }, 212 | _updateThumbnailCanvas(base64Str) { 213 | const desiredHeight = 192; 214 | return new Promise(resolve => { 215 | const img = new Image(); 216 | img.onload = () => { 217 | // Resize the image to lower the memory consumption. 218 | const width = Math.floor(img.width * desiredHeight / img.height); 219 | this.thumbnailCanvas.width = width; 220 | this.thumbnailCanvas.height = desiredHeight; 221 | this.thumbnailCanvasCtx.drawImage(img, 0, 0, width, desiredHeight); 222 | resolve(); 223 | }; 224 | img.src = base64Str; 225 | }); 226 | }, 227 | resetThumbnail() { 228 | this._metaImageView.style.backgroundImage = ""; 229 | this._metaImageView.classList.remove("has-thumbnail"); 230 | }, 231 | onAnimationEnd(e) { 232 | if (e.target.classList.contains("tab-loading-burst")) { 233 | this._burstView.classList.remove("bursting"); 234 | } 235 | }, 236 | resetHighlights() { 237 | this._titleView.innerText = this.title; 238 | this._hostView.innerText = this.host; 239 | }, 240 | highlightTitle(newTitle) { 241 | this._titleView.innerHTML = newTitle; 242 | }, 243 | highlightHost(newHost) { 244 | this._hostView.innerHTML = newHost; 245 | }, 246 | resetOrder() { 247 | this.setOrder(null); 248 | }, 249 | setOrder(idx) { 250 | this.view.style.order = idx; 251 | } 252 | }; 253 | 254 | // Static methods 255 | Object.assign(SideTab, { 256 | // If strict is true, this will return false for subviews (e.g the close button). 257 | isTabEvent(e, strict = true) { 258 | let el = e.target; 259 | if (!el) { 260 | return false; 261 | } 262 | const isTabNode = (node) => node && node.classList.contains("tab"); 263 | if (isTabNode(el)) { 264 | return true; 265 | } 266 | if (strict) { 267 | return false; 268 | } 269 | while ((el = el.parentElement)) { 270 | if (isTabNode(el)) { 271 | return true; 272 | } 273 | } 274 | return false; 275 | }, 276 | isCloseButtonEvent(e) { 277 | return e.target && e.target.classList.contains("tab-close"); 278 | }, 279 | isIconOverlayEvent(e) { 280 | return e.target && e.target.classList.contains("tab-icon-overlay"); 281 | }, 282 | tabIdForView(el) { 283 | if (!el) { 284 | return null; 285 | } 286 | return parseInt(el.getAttribute("data-tab-id")); 287 | }, 288 | tabIdForEvent(e) { 289 | let el = e.target; 290 | // eslint-disable-next-line curly 291 | while (!SideTab.tabIdForView(el) && (el = el.parentElement)); 292 | return SideTab.tabIdForView(el); 293 | }, 294 | _syncThrobberAnimations() { 295 | requestAnimationFrame(() => { 296 | if (!document.body.getAnimations) { // this API is available only in Nightly so far 297 | return; 298 | } 299 | setTimeout(() => { 300 | const icons = document.querySelectorAll(".tab.loading .tab-icon"); 301 | if (!icons.length) { 302 | return; 303 | } 304 | const animations = [...icons] 305 | .map(tabIcon => tabIcon.getAnimations({subtree: true})) 306 | .reduce((a, b) => a.concat(b)) 307 | .filter(anim => 308 | anim instanceof CSSAnimation && 309 | anim.animationName === "tab-throbber-animation" && 310 | (anim.playState === "running" || anim.playState === "pending")); 311 | 312 | // Synchronize with the oldest running animation, if any. 313 | const firstStartTime = Math.min( 314 | ...animations.map(anim => anim.startTime === null ? Infinity : anim.startTime) 315 | ); 316 | if (firstStartTime === Infinity) { 317 | return; 318 | } 319 | requestAnimationFrame(() => { 320 | for (let animation of animations) { 321 | // If |animation| has been cancelled since this rAF callback 322 | // was scheduled we don't want to set its startTime since 323 | // that would restart it. We check for a cancelled animation 324 | // by looking for a null currentTime rather than checking 325 | // the playState, since reading the playState of 326 | // a CSSAnimation object will flush style. 327 | if (animation.currentTime !== null) { 328 | animation.startTime = firstStartTime; 329 | } 330 | } 331 | }); 332 | }, 0); 333 | }); 334 | }, 335 | }); 336 | 337 | function debounce(fn, delay) { 338 | let timeoutID; 339 | return (...args) => { 340 | if (timeoutID) { 341 | clearTimeout(timeoutID); 342 | } 343 | timeoutID = setTimeout(() => { 344 | timeoutID = null; 345 | fn(...args); 346 | }, delay); 347 | }; 348 | } 349 | 350 | function toggleClass(node, className, boolean) { 351 | boolean ? node.classList.add(className) : node.classList.remove(className); 352 | } 353 | 354 | export default SideTab; 355 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | ### 1. Definitions 5 | 6 | **1.1. “Contributor”** 7 | means each individual or legal entity that creates, contributes to 8 | the creation of, or owns Covered Software. 9 | 10 | **1.2. “Contributor Version”** 11 | means the combination of the Contributions of others (if any) used 12 | by a Contributor and that particular Contributor's Contribution. 13 | 14 | **1.3. “Contribution”** 15 | means Covered Software of a particular Contributor. 16 | 17 | **1.4. “Covered Software”** 18 | means Source Code Form to which the initial Contributor has attached 19 | the notice in Exhibit A, the Executable Form of such Source Code 20 | Form, and Modifications of such Source Code Form, in each case 21 | including portions thereof. 22 | 23 | **1.5. “Incompatible With Secondary Licenses”** 24 | means 25 | 26 | * **(a)** that the initial Contributor has attached the notice described 27 | in Exhibit B to the Covered Software; or 28 | * **(b)** that the Covered Software was made available under the terms of 29 | version 1.1 or earlier of the License, but not also under the 30 | terms of a Secondary License. 31 | 32 | **1.6. “Executable Form”** 33 | means any form of the work other than Source Code Form. 34 | 35 | **1.7. “Larger Work”** 36 | means a work that combines Covered Software with other material, in 37 | a separate file or files, that is not Covered Software. 38 | 39 | **1.8. “License”** 40 | means this document. 41 | 42 | **1.9. “Licensable”** 43 | means having the right to grant, to the maximum extent possible, 44 | whether at the time of the initial grant or subsequently, any and 45 | all of the rights conveyed by this License. 46 | 47 | **1.10. “Modifications”** 48 | means any of the following: 49 | 50 | * **(a)** any file in Source Code Form that results from an addition to, 51 | deletion from, or modification of the contents of Covered 52 | Software; or 53 | * **(b)** any new file in Source Code Form that contains any Covered 54 | Software. 55 | 56 | **1.11. “Patent Claims” of a Contributor** 57 | means any patent claim(s), including without limitation, method, 58 | process, and apparatus claims, in any patent Licensable by such 59 | Contributor that would be infringed, but for the grant of the 60 | License, by the making, using, selling, offering for sale, having 61 | made, import, or transfer of either its Contributions or its 62 | Contributor Version. 63 | 64 | **1.12. “Secondary License”** 65 | means either the GNU General Public License, Version 2.0, the GNU 66 | Lesser General Public License, Version 2.1, the GNU Affero General 67 | Public License, Version 3.0, or any later versions of those 68 | licenses. 69 | 70 | **1.13. “Source Code Form”** 71 | means the form of the work preferred for making modifications. 72 | 73 | **1.14. “You” (or “Your”)** 74 | means an individual or a legal entity exercising rights under this 75 | License. For legal entities, “You” includes any entity that 76 | controls, is controlled by, or is under common control with You. For 77 | purposes of this definition, “control” means **(a)** the power, direct 78 | or indirect, to cause the direction or management of such entity, 79 | whether by contract or otherwise, or **(b)** ownership of more than 80 | fifty percent (50%) of the outstanding shares or beneficial 81 | ownership of such entity. 82 | 83 | 84 | ### 2. License Grants and Conditions 85 | 86 | #### 2.1. Grants 87 | 88 | Each Contributor hereby grants You a world-wide, royalty-free, 89 | non-exclusive license: 90 | 91 | * **(a)** under intellectual property rights (other than patent or trademark) 92 | Licensable by such Contributor to use, reproduce, make available, 93 | modify, display, perform, distribute, and otherwise exploit its 94 | Contributions, either on an unmodified basis, with Modifications, or 95 | as part of a Larger Work; and 96 | * **(b)** under Patent Claims of such Contributor to make, use, sell, offer 97 | for sale, have made, import, and otherwise transfer either its 98 | Contributions or its Contributor Version. 99 | 100 | #### 2.2. Effective Date 101 | 102 | The licenses granted in Section 2.1 with respect to any Contribution 103 | become effective for each Contribution on the date the Contributor first 104 | distributes such Contribution. 105 | 106 | #### 2.3. Limitations on Grant Scope 107 | 108 | The licenses granted in this Section 2 are the only rights granted under 109 | this License. No additional rights or licenses will be implied from the 110 | distribution or licensing of Covered Software under this License. 111 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 112 | Contributor: 113 | 114 | * **(a)** for any code that a Contributor has removed from Covered Software; 115 | or 116 | * **(b)** for infringements caused by: **(i)** Your and any other third party's 117 | modifications of Covered Software, or **(ii)** the combination of its 118 | Contributions with other software (except as part of its Contributor 119 | Version); or 120 | * **(c)** under Patent Claims infringed by Covered Software in the absence of 121 | its Contributions. 122 | 123 | This License does not grant any rights in the trademarks, service marks, 124 | or logos of any Contributor (except as may be necessary to comply with 125 | the notice requirements in Section 3.4). 126 | 127 | #### 2.4. Subsequent Licenses 128 | 129 | No Contributor makes additional grants as a result of Your choice to 130 | distribute the Covered Software under a subsequent version of this 131 | License (see Section 10.2) or under the terms of a Secondary License (if 132 | permitted under the terms of Section 3.3). 133 | 134 | #### 2.5. Representation 135 | 136 | Each Contributor represents that the Contributor believes its 137 | Contributions are its original creation(s) or it has sufficient rights 138 | to grant the rights to its Contributions conveyed by this License. 139 | 140 | #### 2.6. Fair Use 141 | 142 | This License is not intended to limit any rights You have under 143 | applicable copyright doctrines of fair use, fair dealing, or other 144 | equivalents. 145 | 146 | #### 2.7. Conditions 147 | 148 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 149 | in Section 2.1. 150 | 151 | 152 | ### 3. Responsibilities 153 | 154 | #### 3.1. Distribution of Source Form 155 | 156 | All distribution of Covered Software in Source Code Form, including any 157 | Modifications that You create or to which You contribute, must be under 158 | the terms of this License. You must inform recipients that the Source 159 | Code Form of the Covered Software is governed by the terms of this 160 | License, and how they can obtain a copy of this License. You may not 161 | attempt to alter or restrict the recipients' rights in the Source Code 162 | Form. 163 | 164 | #### 3.2. Distribution of Executable Form 165 | 166 | If You distribute Covered Software in Executable Form then: 167 | 168 | * **(a)** such Covered Software must also be made available in Source Code 169 | Form, as described in Section 3.1, and You must inform recipients of 170 | the Executable Form how they can obtain a copy of such Source Code 171 | Form by reasonable means in a timely manner, at a charge no more 172 | than the cost of distribution to the recipient; and 173 | 174 | * **(b)** You may distribute such Executable Form under the terms of this 175 | License, or sublicense it under different terms, provided that the 176 | license for the Executable Form does not attempt to limit or alter 177 | the recipients' rights in the Source Code Form under this License. 178 | 179 | #### 3.3. Distribution of a Larger Work 180 | 181 | You may create and distribute a Larger Work under terms of Your choice, 182 | provided that You also comply with the requirements of this License for 183 | the Covered Software. If the Larger Work is a combination of Covered 184 | Software with a work governed by one or more Secondary Licenses, and the 185 | Covered Software is not Incompatible With Secondary Licenses, this 186 | License permits You to additionally distribute such Covered Software 187 | under the terms of such Secondary License(s), so that the recipient of 188 | the Larger Work may, at their option, further distribute the Covered 189 | Software under the terms of either this License or such Secondary 190 | License(s). 191 | 192 | #### 3.4. Notices 193 | 194 | You may not remove or alter the substance of any license notices 195 | (including copyright notices, patent notices, disclaimers of warranty, 196 | or limitations of liability) contained within the Source Code Form of 197 | the Covered Software, except that You may alter any license notices to 198 | the extent required to remedy known factual inaccuracies. 199 | 200 | #### 3.5. Application of Additional Terms 201 | 202 | You may choose to offer, and to charge a fee for, warranty, support, 203 | indemnity or liability obligations to one or more recipients of Covered 204 | Software. However, You may do so only on Your own behalf, and not on 205 | behalf of any Contributor. You must make it absolutely clear that any 206 | such warranty, support, indemnity, or liability obligation is offered by 207 | You alone, and You hereby agree to indemnify every Contributor for any 208 | liability incurred by such Contributor as a result of warranty, support, 209 | indemnity or liability terms You offer. You may include additional 210 | disclaimers of warranty and limitations of liability specific to any 211 | jurisdiction. 212 | 213 | 214 | ### 4. Inability to Comply Due to Statute or Regulation 215 | 216 | If it is impossible for You to comply with any of the terms of this 217 | License with respect to some or all of the Covered Software due to 218 | statute, judicial order, or regulation then You must: **(a)** comply with 219 | the terms of this License to the maximum extent possible; and **(b)** 220 | describe the limitations and the code they affect. Such description must 221 | be placed in a text file included with all distributions of the Covered 222 | Software under this License. Except to the extent prohibited by statute 223 | or regulation, such description must be sufficiently detailed for a 224 | recipient of ordinary skill to be able to understand it. 225 | 226 | 227 | ### 5. Termination 228 | 229 | **5.1.** The rights granted under this License will terminate automatically 230 | if You fail to comply with any of its terms. However, if You become 231 | compliant, then the rights granted under this License from a particular 232 | Contributor are reinstated **(a)** provisionally, unless and until such 233 | Contributor explicitly and finally terminates Your grants, and **(b)** on an 234 | ongoing basis, if such Contributor fails to notify You of the 235 | non-compliance by some reasonable means prior to 60 days after You have 236 | come back into compliance. Moreover, Your grants from a particular 237 | Contributor are reinstated on an ongoing basis if such Contributor 238 | notifies You of the non-compliance by some reasonable means, this is the 239 | first time You have received notice of non-compliance with this License 240 | from such Contributor, and You become compliant prior to 30 days after 241 | Your receipt of the notice. 242 | 243 | **5.2.** If You initiate litigation against any entity by asserting a patent 244 | infringement claim (excluding declaratory judgment actions, 245 | counter-claims, and cross-claims) alleging that a Contributor Version 246 | directly or indirectly infringes any patent, then the rights granted to 247 | You by any and all Contributors for the Covered Software under Section 248 | 2.1 of this License shall terminate. 249 | 250 | **5.3.** In the event of termination under Sections 5.1 or 5.2 above, all 251 | end user license agreements (excluding distributors and resellers) which 252 | have been validly granted by You or Your distributors under this License 253 | prior to termination shall survive termination. 254 | 255 | 256 | ### 6. Disclaimer of Warranty 257 | 258 | > Covered Software is provided under this License on an “as is” 259 | > basis, without warranty of any kind, either expressed, implied, or 260 | > statutory, including, without limitation, warranties that the 261 | > Covered Software is free of defects, merchantable, fit for a 262 | > particular purpose or non-infringing. The entire risk as to the 263 | > quality and performance of the Covered Software is with You. 264 | > Should any Covered Software prove defective in any respect, You 265 | > (not any Contributor) assume the cost of any necessary servicing, 266 | > repair, or correction. This disclaimer of warranty constitutes an 267 | > essential part of this License. No use of any Covered Software is 268 | > authorized under this License except under this disclaimer. 269 | 270 | ### 7. Limitation of Liability 271 | 272 | > Under no circumstances and under no legal theory, whether tort 273 | > (including negligence), contract, or otherwise, shall any 274 | > Contributor, or anyone who distributes Covered Software as 275 | > permitted above, be liable to You for any direct, indirect, 276 | > special, incidental, or consequential damages of any character 277 | > including, without limitation, damages for lost profits, loss of 278 | > goodwill, work stoppage, computer failure or malfunction, or any 279 | > and all other commercial damages or losses, even if such party 280 | > shall have been informed of the possibility of such damages. This 281 | > limitation of liability shall not apply to liability for death or 282 | > personal injury resulting from such party's negligence to the 283 | > extent applicable law prohibits such limitation. Some 284 | > jurisdictions do not allow the exclusion or limitation of 285 | > incidental or consequential damages, so this exclusion and 286 | > limitation may not apply to You. 287 | 288 | 289 | ### 8. Litigation 290 | 291 | Any litigation relating to this License may be brought only in the 292 | courts of a jurisdiction where the defendant maintains its principal 293 | place of business and such litigation shall be governed by laws of that 294 | jurisdiction, without reference to its conflict-of-law provisions. 295 | Nothing in this Section shall prevent a party's ability to bring 296 | cross-claims or counter-claims. 297 | 298 | 299 | ### 9. Miscellaneous 300 | 301 | This License represents the complete agreement concerning the subject 302 | matter hereof. If any provision of this License is held to be 303 | unenforceable, such provision shall be reformed only to the extent 304 | necessary to make it enforceable. Any law or regulation which provides 305 | that the language of a contract shall be construed against the drafter 306 | shall not be used to construe this License against a Contributor. 307 | 308 | 309 | ### 10. Versions of the License 310 | 311 | #### 10.1. New Versions 312 | 313 | Mozilla Foundation is the license steward. Except as provided in Section 314 | 10.3, no one other than the license steward has the right to modify or 315 | publish new versions of this License. Each version will be given a 316 | distinguishing version number. 317 | 318 | #### 10.2. Effect of New Versions 319 | 320 | You may distribute the Covered Software under the terms of the version 321 | of the License under which You originally received the Covered Software, 322 | or under the terms of any subsequent version published by the license 323 | steward. 324 | 325 | #### 10.3. Modified Versions 326 | 327 | If you create software not governed by this License, and you want to 328 | create a new license for such software, you may create and use a 329 | modified version of this License if you rename the license and remove 330 | any references to the name of the license steward (except to note that 331 | such modified license differs from this License). 332 | 333 | #### 10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses 334 | 335 | If You choose to distribute Source Code Form that is Incompatible With 336 | Secondary Licenses under the terms of this version of the License, the 337 | notice described in Exhibit B of this License must be attached. 338 | 339 | ## Exhibit A - Source Code Form License Notice 340 | 341 | This Source Code Form is subject to the terms of the Mozilla Public 342 | License, v. 2.0. If a copy of the MPL was not distributed with this 343 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 344 | 345 | If it is not possible or desirable to put the notice in a particular 346 | file, then You may include the notice in a location (such as a LICENSE 347 | file in a relevant directory) where a recipient would be likely to look 348 | for such a notice. 349 | 350 | You may add additional accurate notices of copyright ownership. 351 | 352 | ## Exhibit B - “Incompatible With Secondary Licenses” Notice 353 | 354 | This Source Code Form is "Incompatible With Secondary Licenses", as 355 | defined by the Mozilla Public License, v. 2.0. 356 | 357 | 358 | -------------------------------------------------------------------------------- /src/sidebar/tablist.js: -------------------------------------------------------------------------------- 1 | import SideTab from "./tab.js"; 2 | import TabContextMenu from "./tabcontextmenu.js"; 3 | import fuzzysort from "./lib/fuzzysort.js"; 4 | 5 | const COMPACT_MODE_OFF = 0; 6 | /*const COMPACT_MODE_DYNAMIC = 1;*/ 7 | const COMPACT_MODE_STRICT = 2; 8 | 9 | /* @arg {props} 10 | * openTab 11 | * search 12 | * prefs 13 | */ 14 | function TabList(props) { 15 | this._props = props; 16 | this._tabs = new Map(); 17 | this._active = null; 18 | this.__compactPins = true; 19 | this.__tabsShrinked = false; 20 | this._windowId = null; 21 | this._filterActive = false; 22 | this._view = document.getElementById("tablist"); 23 | this._pinnedview = document.getElementById("pinnedtablist"); 24 | this._wrapperView = document.getElementById("tablist-wrapper"); 25 | this._spacerView = document.getElementById("spacer"); 26 | this._moreTabsView = document.getElementById("moretabs"); 27 | 28 | this._compactModeMode = parseInt(this._props.prefs.compactModeMode); 29 | this._compactPins = this._props.prefs.compactPins; 30 | this._setupListeners(); 31 | 32 | if (browser.browserSettings.closeTabsByDoubleClick) { // Introduced in Firefox 61. 33 | browser.browserSettings.closeTabsByDoubleClick.get({}).then(({value}) => { 34 | this.closeTabsByDoubleClick = value; 35 | }); 36 | } 37 | } 38 | 39 | TabList.prototype = { 40 | _setupListeners() { 41 | // Tab events 42 | browser.tabs.onCreated.addListener(tab => this._onBrowserTabCreated(tab)); 43 | browser.tabs.onActivated.addListener(({tabId}) => this._onBrowserTabActivated(tabId)); 44 | browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => this._onBrowserTabUpdated(tabId, changeInfo, tab)); 45 | browser.tabs.onRemoved.addListener(tabId => this._onBrowserTabRemoved(tabId)); 46 | browser.tabs.onMoved.addListener((tabId, moveInfo) => this._onBrowserTabMoved(tabId, moveInfo)); 47 | browser.tabs.onAttached.addListener((tabId, attachInfo) => this._onBrowserTabAttached(tabId, attachInfo)); 48 | browser.tabs.onDetached.addListener(tabId => this._onBrowserTabRemoved(tabId)); 49 | browser.webNavigation.onCompleted.addListener(details => this._webNavigationOnCompleted(details)); 50 | 51 | // Global ("event-bubbling") listeners 52 | // Because defining event listeners for each tab is a terrible idea. 53 | // Read more here: https://davidwalsh.name/event-delegate 54 | for (let view of [this._view, this._pinnedview]) { 55 | view.addEventListener("click", e => this._onClick(e)); 56 | view.addEventListener("dblclick", e => this._onDblClick(e)); 57 | view.addEventListener("auxclick", e => this._onAuxClick(e)); 58 | view.addEventListener("mousedown", e => this._onMouseDown(e)); 59 | view.addEventListener("contextmenu", e => this._onContextMenu(e)); 60 | view.addEventListener("animationend", e => this._onAnimationEnd(e)); 61 | } 62 | 63 | this._spacerView.addEventListener("dblclick", () => this._onSpacerDblClick()); 64 | this._spacerView.addEventListener("auxclick", e => this._onSpacerAuxClick(e)); 65 | this._moreTabsView.addEventListener("click", () => this._clearSearch()); 66 | this._view.addEventListener("scroll", () => this.onScroll()); 67 | 68 | // Drag-and-drop. 69 | document.addEventListener("dragstart", e => this._onDragStart(e)); 70 | document.addEventListener("dragover", e => this._onDragOver(e)); 71 | document.addEventListener("drop", e => this._onDrop(e)); 72 | 73 | // Disable zooming. 74 | document.addEventListener("wheel", e => { 75 | if (e.metaKey || e.ctrlKey) { 76 | e.preventDefault(); 77 | } 78 | }); 79 | 80 | // Pref changes 81 | browser.storage.onChanged.addListener(changes => this._onPrefsChanged(changes)); 82 | }, 83 | _onPrefsChanged(changes) { 84 | if (changes.compactModeMode) { 85 | this._compactModeMode = parseInt(changes.compactModeMode.newValue); 86 | } 87 | if (changes.compactPins) { 88 | this._compactPins = changes.compactPins.newValue; 89 | } 90 | this._maybeShrinkTabs(); 91 | }, 92 | _onBrowserTabCreated(tab) { 93 | if (!this._checkWindow(tab)) { 94 | return; 95 | } 96 | this._shiftTabsIndexes(1, tab.index); 97 | this._create(tab); 98 | }, 99 | async _onBrowserTabAttached(tabId, {newWindowId, newPosition}) { 100 | if (newWindowId !== this._windowId) { 101 | return; 102 | } 103 | this._shiftTabsIndexes(1, newPosition); 104 | let tab = await browser.tabs.get(tabId); 105 | tab.id = tabId; // Replace the ID by the new tab ID (they are different!). 106 | this._create(tab); 107 | }, 108 | _onBrowserTabRemoved(tabId) { 109 | let sidetab = this._getTabById(tabId); 110 | if (!sidetab) { // Could be null because different window. 111 | return; 112 | } 113 | this._shiftTabsIndexes(-1, sidetab.index); 114 | this._remove(sidetab); 115 | }, 116 | _onBrowserTabActivated(tabId) { 117 | const sidetab = this._getTabById(tabId); 118 | if (!sidetab) { // Could be null because different window. 119 | return; 120 | } 121 | this._setActive(sidetab); 122 | this._maybeUpdateTabThumbnail(sidetab); 123 | sidetab.scrollIntoView(); 124 | }, 125 | _onBrowserTabMoved(tabId, moveInfo) { 126 | const tab = this._getTabById(tabId); 127 | if (!tab) { // Could be null because different window. 128 | return; 129 | } 130 | 131 | const {fromIndex, toIndex} = moveInfo; 132 | const direction = fromIndex < toIndex ? -1 : 1; 133 | const start = direction > 0 ? toIndex : fromIndex + 1; 134 | const end = direction > 0 ? fromIndex : toIndex + 1; 135 | this._shiftTabsIndexes(direction, start, end); 136 | tab.index = toIndex; 137 | 138 | if (tab.hidden) { 139 | return; 140 | } 141 | 142 | this._appendTabView(tab); 143 | tab.scrollIntoView(); 144 | }, 145 | _onBrowserTabUpdated(tabId, changeInfo, tab) { 146 | if (!this._checkWindow(tab)) { 147 | return; 148 | } 149 | const sidetab = this._getTabById(tab.id); 150 | if (!sidetab) { 151 | return; 152 | } 153 | if (changeInfo.hasOwnProperty("hidden")) { 154 | if (changeInfo.hidden) { 155 | this._removeTabView(sidetab); 156 | } else { 157 | this._appendTabView(sidetab); 158 | } 159 | } 160 | if (changeInfo.hasOwnProperty("status") && changeInfo.status === "complete") { 161 | this._maybeUpdateTabThumbnail(sidetab); 162 | } 163 | 164 | sidetab.onUpdate(changeInfo); 165 | if (changeInfo.hasOwnProperty("pinned")) { 166 | this._onTabPinned(sidetab, tab); 167 | } 168 | }, 169 | // Shift tabs indexes with indexes between |start| and |end| (|end| not included) 170 | // by |offset| (can be a negative number). 171 | _shiftTabsIndexes(offset, start, end = null) { 172 | for (const tab of this._tabs.values()) { 173 | if (tab.index >= start && (end === null || tab.index < end)) { 174 | tab.index += offset; 175 | } 176 | } 177 | }, 178 | _webNavigationOnCompleted({tabId, frameId}) { 179 | if (frameId !== 0) { // We only care about top-level frames. 180 | return; 181 | } 182 | let sidetab = this._getTabById(tabId); 183 | if (!sidetab) { // Could be null because different window. 184 | return; 185 | } 186 | sidetab.burst(); 187 | }, 188 | _onMouseDown(e) { 189 | // Don't put preventDefault here or drag-and-drop won't work 190 | if (e.button === 0 && SideTab.isTabEvent(e)) { 191 | browser.tabs.update(SideTab.tabIdForEvent(e), {active: true}); 192 | this._props.search(""); 193 | return; 194 | } 195 | // Prevent autoscrolling on middle click 196 | if (e.button === 1) { 197 | e.preventDefault(); 198 | return; 199 | } 200 | }, 201 | _onAuxClick(e) { 202 | if (e.button === 1 && SideTab.isTabEvent(e, false)) { 203 | browser.tabs.remove(SideTab.tabIdForEvent(e)); 204 | e.preventDefault(); 205 | return; 206 | } 207 | }, 208 | _closeContextMenu() { 209 | if (this._contextMenu) { 210 | this._contextMenu.close(); 211 | } 212 | }, 213 | _onContextMenuHidden() { 214 | this._contextMenu = null; 215 | }, 216 | _onContextMenu(e) { 217 | this._closeContextMenu(); 218 | e.preventDefault(); 219 | if (!SideTab.isTabEvent(e, false)) { 220 | return; 221 | } 222 | const tabId = SideTab.tabIdForEvent(e); 223 | const tab = this._getTabById(tabId); 224 | this._contextMenu = new TabContextMenu({ 225 | tab, 226 | posX: e.clientX, posY: e.clientY, 227 | onClose: this._onContextMenuHidden.bind(this), 228 | canMoveToNewWindow: this._tabs.size > 1, 229 | reloadAllTabs: this._reloadAllTabs.bind(this), 230 | canCloseTabsAfter: !this._filterActive, 231 | closeTabsAfter: this._closeTabsAfter.bind(this, tab.index), 232 | closeOtherTabs: this._closeAllTabsExcept.bind(this, tabId), 233 | canUndoCloseTab: this._hasRecentlyClosedTabs.bind(this), 234 | undoCloseTab: this._undoCloseTab.bind(this) 235 | }); 236 | this._contextMenu.show(); 237 | }, 238 | _closeTabsAfter(tabIndex) { 239 | const toClose = [...this._tabs.values()] 240 | .filter(tab => tab.index > tabIndex && !tab.hidden) 241 | .map(tab => tab.id); 242 | browser.tabs.remove(toClose); 243 | }, 244 | _closeAllTabsExcept(tabId) { 245 | const toClose = [...this._tabs.values()] 246 | .filter(tab => tab.id !== tabId && !tab.pinned && !tab.hidden) 247 | .map(tab => tab.id); 248 | browser.tabs.remove(toClose); 249 | }, 250 | _reloadAllTabs() { 251 | for (let tab of this._tabs.values()) { 252 | if (!tab.hidden) { 253 | browser.tabs.reload(tab.id); 254 | } 255 | } 256 | }, 257 | async _hasRecentlyClosedTabs() { 258 | const undoTabs = await this._getRecentlyClosedTabs(); 259 | return !!undoTabs.length; 260 | }, 261 | async _getRecentlyClosedTabs() { 262 | const sessions = await browser.sessions.getRecentlyClosed(); 263 | return sessions.reduce((acc, session) => { 264 | if (session.tab && this._checkWindow(session.tab)) { 265 | acc.push(session.tab); 266 | } 267 | return acc; 268 | }, []); 269 | }, 270 | async _undoCloseTab() { 271 | const undoTabs = await this._getRecentlyClosedTabs(); 272 | if (undoTabs.length) { 273 | browser.sessions.restore(undoTabs[0].sessionId); 274 | } 275 | }, 276 | onScroll() { 277 | if (this._view.scrollTop === 0) { 278 | this._wrapperView.classList.remove("scrolled"); 279 | } else { 280 | this._wrapperView.classList.add("scrolled"); 281 | } 282 | }, 283 | _onClick(e) { 284 | if (SideTab.isCloseButtonEvent(e)) { 285 | const tabId = SideTab.tabIdForEvent(e); 286 | browser.tabs.remove(tabId); 287 | } else if (SideTab.isIconOverlayEvent(e)) { 288 | const tabId = SideTab.tabIdForEvent(e); 289 | const tab = this._getTabById(tabId); 290 | browser.tabs.update(tabId, {"muted": !tab.muted}); 291 | } 292 | }, 293 | _onDblClick(e) { 294 | if (SideTab.isTabEvent(e) && this.closeTabsByDoubleClick) { 295 | browser.tabs.remove(SideTab.tabIdForEvent(e)); 296 | } 297 | }, 298 | _onDragStart(e) { 299 | if (!SideTab.isTabEvent(e) || this._filterActive) { 300 | return; 301 | } 302 | const tabId = SideTab.tabIdForEvent(e); 303 | const tab = this._getTabById(tabId); 304 | e.dataTransfer.setData("text/x-tabcenter-tab", JSON.stringify({ 305 | tabId: parseInt(SideTab.tabIdForEvent(e)), 306 | origWindowId: this._windowId 307 | })); 308 | e.dataTransfer.setData("text/x-moz-place", JSON.stringify({ 309 | type: "text/x-moz-place", 310 | title: tab.title, 311 | uri: tab.url 312 | })); 313 | e.dataTransfer.dropEffect = "move"; 314 | }, 315 | _onDragOver(e) { 316 | e.preventDefault(); 317 | }, 318 | _findMozURL(dataTransfer) { 319 | const urlData = dataTransfer.getData("text/x-moz-url-data"); // page link 320 | if (urlData) { 321 | return urlData; 322 | } 323 | const mozPlaceData = dataTransfer.getData("text/x-moz-place"); // bookmark 324 | if (mozPlaceData) { 325 | return JSON.parse(mozPlaceData).uri; 326 | } 327 | return null; 328 | }, 329 | _onDrop(e) { 330 | if (!SideTab.isTabEvent(e, false) && 331 | e.target !== this._spacerView && 332 | e.target !== this._moreTabsView) { 333 | return; 334 | } 335 | e.preventDefault(); 336 | 337 | const dt = e.dataTransfer; 338 | const tabStr = dt.getData("text/x-tabcenter-tab"); 339 | if (tabStr) { 340 | return this._handleDroppedTabCenterTab(e, JSON.parse(tabStr)); 341 | } 342 | const mozURL = this._findMozURL(dt); 343 | if (!mozURL) { 344 | console.warn("Unknown drag-and-drop operation. Aborting."); 345 | return; 346 | } 347 | this._props.openTab({ 348 | url: mozURL, 349 | windowId: this._windowId 350 | }); 351 | return; 352 | }, 353 | _handleDroppedTabCenterTab(e, tab) { 354 | let {tabId, origWindowId} = tab; 355 | let currentWindowId = this._windowId; 356 | if (currentWindowId !== origWindowId) { 357 | browser.tabs.move(tabId, {windowId: currentWindowId, index: -1}); 358 | return; 359 | } 360 | 361 | let curTab = this._getTabById(tabId); 362 | 363 | if (e.target === this._spacerView || e.target === this._moreTabsView) { 364 | this._moveTabToBottom(curTab); 365 | return; 366 | } 367 | 368 | let dropTabId = SideTab.tabIdForEvent(e); 369 | 370 | if (tabId === dropTabId) { 371 | return; 372 | } 373 | 374 | let dropTab = this._getTabById(dropTabId); 375 | 376 | if (curTab.pinned !== dropTab.pinned) { // They can't mix 377 | if (curTab.pinned) { 378 | // We tried to move a pinned tab to the non-pinned area, move it to the last 379 | // position of the pinned tabs. 380 | this._moveTabToBottom(curTab); 381 | } else { 382 | // Reverse of the previous statement 383 | this._moveTabToTop(curTab); 384 | } 385 | return; 386 | } 387 | 388 | let curTabPos = curTab.index; 389 | let dropTabPos = dropTab.index; 390 | let newPos = curTabPos < dropTabPos ? Math.min(this._tabs.size, dropTabPos) : 391 | Math.max(0, dropTabPos); 392 | browser.tabs.move(tabId, {index: newPos}); 393 | }, 394 | _onSpacerDblClick() { 395 | this._props.openTab(); 396 | }, 397 | _onSpacerAuxClick(e) { 398 | if (e.button === 1) { 399 | this._props.openTab(); 400 | } 401 | }, 402 | _onAnimationEnd(e) { 403 | const tabId = SideTab.tabIdForEvent(e); 404 | const tab = this._getTabById(tabId); 405 | tab.onAnimationEnd(e); 406 | }, 407 | async _moveTabToBottom(tab) { 408 | let sameCategoryTabs = await browser.tabs.query({ 409 | hidden: false, 410 | pinned: tab.pinned, 411 | windowId: this._windowId 412 | }); 413 | let lastIndex = sameCategoryTabs[sameCategoryTabs.length - 1].index; 414 | await browser.tabs.move(tab.id, {index: lastIndex + 1}); 415 | }, 416 | async _moveTabToTop(tab) { 417 | let sameCategoryTabs = await browser.tabs.query({ 418 | hidden: false, 419 | pinned: tab.pinned, 420 | windowId: this._windowId 421 | }); 422 | let lastIndex = sameCategoryTabs[0].index; 423 | await browser.tabs.move(tab.id, {index: lastIndex}); 424 | }, 425 | _clearSearch() { 426 | // _clearSearch() is called every time we open a new tab (see _create()), 427 | // which subsequently calls the expensive filter() method. 428 | // _filterActive provides a fast-path for the common-case where there is 429 | // no search going on. 430 | if (!this._filterActive) { 431 | return; 432 | } 433 | this._props.search(""); 434 | }, 435 | filter(query) { 436 | this._filterActive = query.length > 0; 437 | 438 | const tabs = [...this._tabs.values()]; 439 | let notShown = 0; 440 | if (query.length) { 441 | let results = fuzzysort.go(query, tabs, { 442 | keys: ["title", "host"], 443 | allowTypo: false, 444 | threshold: -1000, 445 | }) 446 | .sort((r1, r2) => r2.score - r1.score) 447 | .reduce((acc, tabResult, index) => { 448 | tabResult.order = index; 449 | acc[tabResult.obj.id] = tabResult; 450 | return acc; 451 | }, {}); 452 | for (const tab of tabs) { 453 | const result = results[tab.id]; 454 | const show = !!result; 455 | tab.updateVisibility(show); 456 | tab.resetHighlights(); 457 | tab.resetOrder(); 458 | if (show) { 459 | if (result[0]) { // title 460 | tab.highlightTitle(fuzzysort.highlight(result[0], "", "")); 461 | } 462 | if (result[1]) { // host 463 | tab.highlightHost(fuzzysort.highlight(result[1], "", "")); 464 | } 465 | tab.setOrder(result.order); 466 | } else { 467 | notShown += 1; 468 | } 469 | } 470 | } else { 471 | for (const tab of tabs) { 472 | tab.updateVisibility(true); 473 | tab.resetHighlights(); 474 | tab.resetOrder(); 475 | } 476 | } 477 | if (notShown > 0) { 478 | // Sadly browser.i18n doesn't support plurals, which is why we 479 | // only show a boring "Show all tabs…" message. 480 | this._moreTabsView.textContent = browser.i18n.getMessage("allTabsLabel"); 481 | this._moreTabsView.setAttribute("hasMoreTabs", true); 482 | } else { 483 | this._moreTabsView.removeAttribute("hasMoreTabs"); 484 | } 485 | this._maybeShrinkTabs(); 486 | }, 487 | async populate(windowId) { 488 | if (windowId && this._windowId === null) { 489 | this._windowId = windowId; 490 | } 491 | const tabs = await browser.tabs.query({windowId}); 492 | // Sort the tabs by index so we can insert them in sequence. 493 | tabs.sort((a, b) => a.index - b.index); 494 | const pinnedFragment = document.createDocumentFragment(); 495 | const unpinnedFragment = document.createDocumentFragment(); 496 | let activeTab; 497 | for (let tab of tabs) { 498 | const sidetab = this.__create(tab); 499 | if (tab.active) { 500 | activeTab = sidetab; 501 | } 502 | let fragment = tab.pinned ? pinnedFragment : unpinnedFragment; 503 | if (!tab.hidden) { 504 | fragment.appendChild(sidetab.view); 505 | } 506 | } 507 | this._pinnedview.appendChild(pinnedFragment); 508 | this._view.appendChild(unpinnedFragment); 509 | this._maybeShrinkTabs(); 510 | if (activeTab) { 511 | this._maybeUpdateTabThumbnail(activeTab); 512 | activeTab.scrollIntoView(); 513 | } 514 | }, 515 | _checkWindow(tab) { 516 | return (tab.windowId === this._windowId); 517 | }, 518 | _getTabById(tabId) { 519 | return this._tabs.get(tabId, null); 520 | }, 521 | get _compactPins() { 522 | return this.__compactPins; 523 | }, 524 | set _compactPins(compact) { 525 | this.__compactPins = compact; 526 | if (compact) { 527 | this._pinnedview.classList.add("compact"); 528 | } else { 529 | this._pinnedview.classList.remove("compact"); 530 | } 531 | }, 532 | get _tabsShrinked() { 533 | return this.__tabsShrinked; 534 | }, 535 | set _tabsShrinked(shrinked) { 536 | this.__tabsShrinked = shrinked; 537 | if (shrinked) { 538 | this._wrapperView.classList.add("shrinked"); 539 | } else { 540 | this._wrapperView.classList.remove("shrinked"); 541 | } 542 | }, 543 | _maybeShrinkTabs() { 544 | // Avoid an expensive sync reflow (offsetHeight). 545 | requestAnimationFrame(() => { 546 | this.__maybeShrinkTabs(); 547 | }); 548 | }, 549 | __maybeShrinkTabs() { 550 | if (this._compactModeMode === COMPACT_MODE_STRICT || 551 | this._compactModeMode === COMPACT_MODE_OFF) { 552 | this._tabsShrinked = this._compactModeMode === COMPACT_MODE_STRICT; 553 | return; 554 | } 555 | 556 | const spaceLeft = this._spacerView.offsetHeight; 557 | if (!this._tabsShrinked && spaceLeft === 0) { 558 | this._tabsShrinked = true; 559 | return; 560 | } 561 | if (!this._tabsShrinked) { 562 | return; 563 | } 564 | // Could we fit everything if we switched back to the "normal" mode? 565 | const wrapperHeight = this._wrapperView.offsetHeight; 566 | const estimatedTabHeight = 56; // Not very scientific, but it "mostly" works. 567 | 568 | // TODO: We are not accounting for the "More Tabs" element displayed when 569 | // filtering tabs. 570 | let estimatedHeight = 0; 571 | let numPinnedTabs = 0; 572 | for (const tab of this._tabs.values()) { 573 | if (tab.visible) { 574 | if (!tab.pinned) { 575 | estimatedHeight += estimatedTabHeight; 576 | } else { 577 | numPinnedTabs++; 578 | } 579 | } 580 | } 581 | estimatedHeight += this._compactPins && numPinnedTabs > 0 ? 582 | this._pinnedview.offsetHeight : 583 | numPinnedTabs * estimatedTabHeight; 584 | 585 | if (estimatedHeight <= wrapperHeight) { 586 | this._tabsShrinked = false; 587 | } 588 | }, 589 | __create(tabInfo) { 590 | let tab = new SideTab(); 591 | this._tabs.set(tabInfo.id, tab); 592 | tab.init(tabInfo); 593 | if (tabInfo.active) { 594 | this._setActive(tab); 595 | } 596 | return tab; 597 | }, 598 | _create(tabInfo, scrollTo = true) { 599 | const sidetab = this.__create(tabInfo); 600 | // Bail early and don't insert the tab in the DOM: we'll do it later 601 | // if the tab becomes visible. 602 | if (tabInfo.hidden) { 603 | return; 604 | } 605 | this._clearSearch(); 606 | this._appendTabView(sidetab); 607 | this._maybeShrinkTabs(); 608 | if (scrollTo) { 609 | sidetab.scrollIntoView(); 610 | } 611 | }, 612 | _setActive(sidetab) { 613 | if (this._active) { 614 | this._getTabById(this._active).updateActive(false); 615 | } 616 | sidetab.updateActive(true); 617 | this._active = sidetab.id; 618 | }, 619 | _remove(sidetab) { 620 | if (this._active === sidetab.id) { 621 | this._active = null; 622 | } 623 | sidetab.view.remove(); 624 | this._tabs.delete(sidetab.id); 625 | this._maybeShrinkTabs(); 626 | }, 627 | _appendTabView(sidetab) { 628 | let element = sidetab.view; 629 | let parent = sidetab.pinned ? this._pinnedview : this._view; 630 | // Can happen with browser.tabs.closeWindowWithLastTab set to true or during 631 | // session restore. 632 | if (!this._tabs.size) { 633 | parent.appendChild(element); 634 | return; 635 | } 636 | const allTabs = [...this._tabs.values()] 637 | .filter(tab => tab.pinned === sidetab.pinned && !tab.hidden) 638 | .sort((a, b) => a.index - b.index); 639 | const tabAfter = allTabs.find(tab => tab.index > sidetab.index); 640 | if (!tabAfter) { 641 | parent.appendChild(element); 642 | return; 643 | } 644 | parent.insertBefore(element, tabAfter.view); 645 | }, 646 | _removeTabView(sidetab) { 647 | let element = sidetab.view; 648 | let parent = sidetab.pinned ? this._pinnedview : this._view; 649 | parent.removeChild(element); 650 | }, 651 | _onTabPinned(sidetab, tab) { 652 | if (tab.pinned && this._compactPins) { 653 | sidetab.resetThumbnail(); 654 | } 655 | 656 | this._appendTabView(sidetab); 657 | 658 | this._maybeShrinkTabs(); 659 | }, 660 | _maybeUpdateTabThumbnail(sidetab) { 661 | if (this._compactModeMode === COMPACT_MODE_STRICT) { 662 | return; 663 | } 664 | if (sidetab.pinned && this._compactPins) { 665 | return; 666 | } 667 | sidetab.updateThumbnail(); 668 | } 669 | }; 670 | 671 | export default TabList; 672 | -------------------------------------------------------------------------------- /src/sidebar/tabcenter.css: -------------------------------------------------------------------------------- 1 | @import url("lib/contextmenu/contextmenu.css"); 2 | 3 | :root { 4 | --tab-background-normal: hsl(0, 0%, 99%); 5 | --tab-background-pinned: hsla(0, 0%, 80%, .15); 6 | --tab-background-active: hsl(0, 0%, 87%); 7 | --tab-background-hover: hsla(0, 0%, 80%, .25); 8 | --tab-border-color: hsla(0, 0%, 0%, 0.06); 9 | --default-tab-line-color: #1aa1ff; 10 | --searchbox-background: #fff; 11 | --primary-text-color: #18191a; 12 | --icons-fill-color: #5a5b5c; 13 | --close-button-hover: hsla(0, 0%, 0%, 0.16); 14 | --close-button-active: hsla(0, 0%, 0%, 0.2); 15 | --menu-background: hsl(0, 0%, 99%); 16 | --menu-button-text-shadow: 0 1px rgba(255, 255, 255, .4); 17 | --menu-button-hover: hsla(240, 5%, 5%, .1); 18 | --menu-button-active: hsla(240, 5%, 5%, .15); 19 | --border-radius: 4px; 20 | } 21 | 22 | body[platform="win"] { 23 | --border-radius: 2px; 24 | } 25 | 26 | html, body { 27 | height: 100%; 28 | } 29 | 30 | body { 31 | background-color: var(--tab-background-normal); 32 | font: message-box; 33 | color: var(--primary-text-color); 34 | display: flex; 35 | flex-direction: column; 36 | } 37 | 38 | #spacer { 39 | flex: 1; 40 | } 41 | 42 | #topmenu { 43 | display: flex; 44 | padding: 6px 4px; 45 | height: 35px; 46 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); 47 | background-color: var(--menu-background); 48 | } 49 | 50 | #newtab { 51 | margin: 0 4px; 52 | box-sizing: border-box; 53 | display: flex; 54 | flex: 0 20 auto; 55 | min-width: 26px; 56 | align-items: center; 57 | padding: 2px 4px; 58 | text-shadow: var(--menu-button-text-shadow); 59 | } 60 | 61 | canvas { 62 | display: none; 63 | } 64 | 65 | /* This is important for event bubbling: when we click a tab, e.target 66 | will be the tab, and not one of its child elements */ 67 | img, .tab *:not(.clickable) { 68 | pointer-events: none; 69 | } 70 | 71 | #newtab-label { 72 | margin-left: 2px; 73 | white-space: nowrap; 74 | overflow: hidden; 75 | text-overflow: ellipsis; 76 | } 77 | 78 | @media screen and (max-width: 190px) { 79 | #newtab-label { 80 | display: none; 81 | } 82 | } 83 | 84 | #newtab-menu { 85 | display: flex; 86 | z-index: 2; 87 | position: absolute; 88 | top: 36px; 89 | left: 3px; 90 | padding-bottom: 5px; 91 | flex-direction: column; 92 | background: linear-gradient(hsla(0,0%,99%,1), hsla(0,0%,99%,.975) 10%, hsla(0,0%,98%,.975)); 93 | box-shadow: 0 3px 5px hsla(210,4%,10%,.1), 94 | 0 0 7px hsla(210,4%,10%,.1); 95 | border: 1px solid ThreeDShadow; 96 | } 97 | 98 | body[platform="mac"] #newtab-menu { 99 | border-radius: 3.5px; 100 | } 101 | 102 | #newtab-menu::before { 103 | content: ""; 104 | background-image: url("img/panelarrow-vertical-themed.svg"); 105 | width: 20px; 106 | height: 10px; 107 | background-size: contain; 108 | position: relative; 109 | top: -10px; 110 | left: 9px; 111 | } 112 | 113 | .newtab-menu-identity:hover { 114 | background-color: hsla(210,4%,10%,.07); 115 | } 116 | 117 | .newtab-menu-identity:hover:active { 118 | background-color: hsla(210,4%,10%,.12); 119 | box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; 120 | } 121 | 122 | .newtab-menu-identity:first-child { 123 | margin-top: -5px; 124 | } 125 | 126 | .newtab-menu-identity { 127 | display: flex; 128 | align-items: center; 129 | padding: 7px 0 7px 18px; 130 | } 131 | 132 | .newtab-menu-identity-label { 133 | pointer-events: none; 134 | padding-left: 6px; 135 | padding-right: 16px; 136 | } 137 | 138 | [data-identity-color="blue"] { 139 | --identity-tab-color: #0996f8; 140 | --identity-icon-color: #00a7e0; 141 | } 142 | 143 | [data-identity-color="turquoise"] { 144 | --identity-tab-color: #01bdad; 145 | --identity-icon-color: #01bdad; 146 | } 147 | 148 | [data-identity-color="green"] { 149 | --identity-tab-color: #57bd35; 150 | --identity-icon-color: #7dc14c; 151 | } 152 | 153 | [data-identity-color="yellow"] { 154 | --identity-tab-color: #ffcb00; 155 | --identity-icon-color: #ffcb00; 156 | } 157 | 158 | [data-identity-color="orange"] { 159 | --identity-tab-color: #ff9216; 160 | --identity-icon-color: #ff9216; 161 | } 162 | 163 | [data-identity-color="red"] { 164 | --identity-tab-color: #d92215; 165 | --identity-icon-color: #d92215; 166 | } 167 | 168 | [data-identity-color="pink"] { 169 | --identity-tab-color: #ea385e; 170 | --identity-icon-color: #ee5195; 171 | } 172 | 173 | [data-identity-color="purple"] { 174 | --identity-tab-color: #7a2f7a; 175 | --identity-icon-color: #7a2f7a; 176 | } 177 | 178 | [data-identity-icon="fingerprint"] { 179 | --identity-icon: url("img/usercontext.svg#fingerprint"); 180 | } 181 | 182 | [data-identity-icon="briefcase"] { 183 | --identity-icon: url("img/usercontext.svg#briefcase"); 184 | } 185 | 186 | [data-identity-icon="dollar"] { 187 | --identity-icon: url("img/usercontext.svg#dollar"); 188 | } 189 | 190 | [data-identity-icon="cart"] { 191 | --identity-icon: url("img/usercontext.svg#cart"); 192 | } 193 | 194 | [data-identity-icon="circle"] { 195 | --identity-icon: url("img/usercontext.svg#circle"); 196 | } 197 | 198 | [data-identity-icon="gift"] { 199 | --identity-icon: url("img/usercontext.svg#gift"); 200 | } 201 | 202 | [data-identity-icon="vacation"] { 203 | --identity-icon: url("img/usercontext.svg#vacation"); 204 | } 205 | 206 | [data-identity-icon="food"] { 207 | --identity-icon: url("img/usercontext.svg#food"); 208 | } 209 | 210 | [data-identity-icon="fruit"] { 211 | --identity-icon: url("img/usercontext.svg#fruit"); 212 | } 213 | 214 | [data-identity-icon="pet"] { 215 | --identity-icon: url("img/usercontext.svg#pet"); 216 | } 217 | 218 | [data-identity-icon="tree"] { 219 | --identity-icon: url("img/usercontext.svg#tree"); 220 | } 221 | 222 | [data-identity-icon="chill"] { 223 | --identity-icon: url("img/usercontext.svg#chill"); 224 | } 225 | 226 | .newtab-menu-identity-icon { 227 | pointer-events: none; 228 | width: 16px; 229 | height: 16px; 230 | background-image: var(--identity-icon); 231 | -moz-context-properties: fill; 232 | fill: var(--identity-icon-color); 233 | filter: url("img/filters.svg#fill"); 234 | background-size: contain; 235 | background-repeat: no-repeat; 236 | background-position: center center; 237 | } 238 | 239 | .topmenu-button { 240 | border: 1px solid transparent; /* When we show a border on hover it won't move */ 241 | border-radius: var(--border-radius); 242 | } 243 | 244 | #newtab.menuopened, 245 | .topmenu-button:hover { 246 | background-color: var(--menu-button-hover); 247 | } 248 | 249 | .topmenu-button:hover:active { 250 | background-color: var(--menu-button-active); 251 | } 252 | 253 | #newtab-icon { 254 | min-width: 16px; 255 | min-height: 16px; 256 | background-size: 16px 16px; 257 | background-repeat: no-repeat; 258 | background-position: center; 259 | background-image: url("img/glyph-new-16.svg#standard"); 260 | -moz-context-properties: fill; 261 | fill: var(--icons-fill-color); 262 | filter: url("img/filters.svg#fill"); 263 | } 264 | 265 | #searchbox { 266 | background-color: var(--searchbox-background); 267 | display: flex; 268 | margin: 0 4px; 269 | padding: 1px; 270 | flex: 20 0 auto; 271 | min-width: 45px; 272 | border-radius: var(--border-radius); 273 | border: 1px solid hsla(240,5%,5%,.25); 274 | box-shadow: 0 1px 4px rgba(0,0,0,.05); 275 | transition: border-color 0.1s, box-shadow 0.1s; 276 | cursor: text; 277 | } 278 | 279 | body[platform="win"] #searchbox { 280 | border-radius: 0; 281 | } 282 | 283 | #searchbox:hover { 284 | border-color: hsla(240,5%,5%,.35); 285 | box-shadow: 0 1px 6px rgba(0,0,0,.1); 286 | } 287 | 288 | #searchbox.focused { 289 | border: 1px solid Highlight; 290 | } 291 | 292 | body[platform="mac"] #searchbox.focused { 293 | border: 1px solid -moz-mac-focusring; 294 | box-shadow: 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring; 295 | } 296 | 297 | #searchbox-icon { 298 | min-width: 20px; 299 | background-size: 20px 20px; 300 | background-repeat: no-repeat; 301 | background-position: center; 302 | background-image: url("img/find-icon.svg"); 303 | -moz-context-properties: fill; 304 | fill: var(--icons-fill-color); 305 | filter: url("img/filters.svg#fill"); 306 | border-radius: var(--border-radius) 0 0 var(--border-radius); 307 | } 308 | 309 | #searchbox-input { 310 | flex: 1; 311 | font: inherit; /* needed for windows */ 312 | padding: 0; 313 | box-shadow: none; 314 | border: 0; 315 | border-radius: 0 var(--border-radius) var(--border-radius) 0; 316 | } 317 | 318 | body[platform="mac"] #searchbox-input { 319 | font-size: 12px; 320 | } 321 | 322 | body[platform="win"] #searchbox-input:placeholder-shown { 323 | font-style: italic; 324 | } 325 | 326 | #searchbox-input { 327 | background-color: var(--searchbox-background); 328 | color: var(--searchbox-text-color); 329 | } 330 | 331 | #settings { 332 | flex-shrink: 0; 333 | min-width: 18px; 334 | padding: 0 12px; 335 | background-size: 16px 16px; 336 | background-repeat: no-repeat; 337 | background-position: center; 338 | background-image: url("img/settings.svg#standard"); 339 | -moz-context-properties: fill; 340 | fill: var(--icons-fill-color); 341 | filter: url("img/filters.svg#fill"); 342 | } 343 | 344 | #tablist { 345 | display: flex; 346 | flex-direction: column; 347 | } 348 | 349 | .tab { 350 | flex-shrink: 0; 351 | } 352 | 353 | #tablist-wrapper { 354 | height: 100%; 355 | display: flex; 356 | flex-direction: column; 357 | overflow-y: auto; 358 | } 359 | 360 | #tablist, 361 | #pinnedtablist:not(.compact) { 362 | overflow-x: hidden; 363 | } 364 | 365 | #pinnedtablist:not(.compact) .tab, 366 | .tab:not(.pinned) { 367 | display: flex; 368 | align-items: center; 369 | height: 56px; 370 | border-bottom: 1px solid var(--tab-border-color); 371 | position: relative; 372 | } 373 | 374 | #pinnedtablist.compact:not(:empty) { 375 | border-bottom: 1px solid var(--tab-border-color); 376 | } 377 | 378 | #topshadow { 379 | flex-shrink: 0; 380 | position: relative; 381 | width: 100%; 382 | height: 10px; 383 | margin-bottom: -10px; 384 | z-index: 1; 385 | pointer-events: none; 386 | transition: box-shadow 0.3s cubic-bezier(.07,.95,0,1); 387 | } 388 | 389 | #tablist-wrapper.scrolled #topshadow { 390 | box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.3); 391 | } 392 | 393 | .tab.active { 394 | background-color: var(--tab-background-active); 395 | color: var(--tab-text-color-active, var(--primary-text-color)); 396 | } 397 | 398 | .tab:not(.active):hover { 399 | background-color: var(--tab-background-hover); 400 | } 401 | 402 | .tab-loading-burst { 403 | position: absolute; 404 | overflow: hidden; 405 | height: 100%; 406 | width: 100%; 407 | top: 0; 408 | left: 0; 409 | } 410 | 411 | .tab-loading-burst::before { 412 | position: absolute; 413 | content: ""; 414 | /* We set the width to be a percentage of the tab's width so that we can use 415 | the `scale` transform to scale it up to the full size of the tab when the 416 | burst occurs. We also need to set margin-top/margin-left so that the 417 | center of the burst matches the center of the favicon. */ 418 | width: 5%; 419 | height: 100%; 420 | margin-left: 17px; 421 | margin-top: 10px; 422 | } 423 | 424 | #tablist-wrapper.shrinked .tab-loading-burst::before { 425 | margin-left: 10px; 426 | margin-top: 0px; 427 | } 428 | 429 | .tab-loading-burst.bursting::before { 430 | background-image: url("img/loading-burst.svg#standard"); 431 | background-position: center center; 432 | background-size: 100% auto; 433 | background-repeat: no-repeat; 434 | animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1); 435 | } 436 | 437 | .tab-loading-burst.bursting[notselectedsinceload]::before { 438 | animation-name: tab-burst-animation-light; 439 | } 440 | 441 | .tab:not(.active) .tab-loading-burst.bursting::before { 442 | background-image: url("img/loading-burst.svg#light"); 443 | } 444 | 445 | @keyframes tab-burst-animation { 446 | 0% { 447 | opacity: 0.4; 448 | transform: scale(1); 449 | } 450 | 100% { 451 | opacity: 0; 452 | transform: scale(40); 453 | } 454 | } 455 | 456 | @keyframes tab-burst-animation-light { 457 | 0% { 458 | opacity: 0.2; 459 | transform: scale(1); 460 | } 461 | 100% { 462 | opacity: 0; 463 | transform: scale(40); 464 | } 465 | } 466 | 467 | .tab:not(.hasContext) { 468 | --identity-tab-color: var(--default-tab-line-color); 469 | } 470 | 471 | .tab-context { 472 | min-width: 6px; 473 | height: 100%; 474 | background-image: 475 | linear-gradient(to right, hsla(0, 0%, 0%, 0.25) 17%, hsla(0, 0%, 0%, 0.1) 17%, transparent 67%), 476 | linear-gradient(to right, var(--identity-tab-color), var(--identity-tab-color)); 477 | background-position: 0 0; 478 | background-repeat: no-repeat; 479 | transition: background-position 150ms ease-out; 480 | } 481 | 482 | .tab.hasContext:not(.active) > .tab-context { 483 | background-position: -3px 0; 484 | } 485 | 486 | .tab:not(.hasContext):not(.active) > .tab-context { 487 | background-position: -6px 0; 488 | } 489 | 490 | #pinnedtablist.compact .tab.pinned.hasContext > .tab-context { 491 | /* Specify all these at once also overrides the gradient background, 492 | * Which looks wrong since these are vertical (we could define a 493 | * vertical background, but they're 2px high so it doesn't matter). 494 | * Note that this also (intentionally) overrides background-position 495 | * set by `.tab:not(.active)` with `0 0`. 496 | */ 497 | background: var(--identity-tab-color) no-repeat 0 0; 498 | height: 2px; 499 | width: 20px; 500 | position: absolute; 501 | left: 0; 502 | right: 0; 503 | bottom: 0; 504 | margin: auto; 505 | } 506 | 507 | .tab-icon-overlay { 508 | display: none; 509 | z-index: 1; 510 | position: relative; 511 | width: 16px; 512 | height: 16px; 513 | margin-left: -16px; 514 | left: 16px; 515 | top: -19px; 516 | border-radius: 50%; 517 | background-color: white; 518 | background-size: contain; 519 | background-clip: padding-box; 520 | border: 1px solid hsla(0, 0%, 0%, 0.2); 521 | box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.5); 522 | } 523 | 524 | #tablist-wrapper.shrinked .tab-icon-overlay { 525 | width: 13px; 526 | height: 13px; 527 | margin: 0 0 -13px -13px; 528 | left: auto; 529 | top: auto; 530 | bottom: 0px; 531 | right: -22px; 532 | } 533 | 534 | .tab-icon-overlay.sound { 535 | display: block; 536 | background-image: url("img/tab-audio-small.svg#tab-audio"); 537 | } 538 | 539 | .tab-icon-overlay.muted { 540 | display: block; 541 | background-image: url("img/tab-audio-small.svg#tab-audio-muted"); 542 | } 543 | 544 | #tablist-wrapper:not(.shrinked) #tablist .tab-meta-image, 545 | #tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image { 546 | margin: 6px; 547 | min-width: 54px; 548 | height: 40px; 549 | border: 0; 550 | background-image: url("img/thumbnail-blank.svg"); 551 | background-size: contain; 552 | background-color: white; 553 | background-repeat: no-repeat; 554 | box-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.02), 0 2px 0 hsla(0, 0%, 0%, 0.05), 0 0 0 1px hsla(0, 0%, 0%, 0.2); 555 | } 556 | 557 | #tablist-wrapper.shrinked #tablist .tab-meta-image, 558 | #tablist-wrapper.shrinked #pinnedtablist:not(.compact) .tab-meta-image { 559 | background: none !important; /* Because the JS script sets it manually */ 560 | /* Make it the same size as the favicon it contains */ 561 | height: 20px; 562 | width: 20px; 563 | } 564 | 565 | #tablist-wrapper:not(.shrinked) #tablist .tab-meta-image.has-thumbnail, 566 | #tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image.has-thumbnail { 567 | border: 2px solid white; 568 | } 569 | 570 | #tablist-wrapper:not(.shrinked) #tablist .tab-meta-image.has-thumbnail > .tab-icon-wrapper, 571 | #tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image.has-thumbnail > .tab-icon-wrapper { 572 | margin-left: -2px; 573 | margin-top: 18px; 574 | } 575 | 576 | .tab-icon-wrapper { 577 | height: 20px; 578 | width: 20px; 579 | padding: 2px; 580 | } 581 | 582 | #tablist-wrapper:not(.shrinked) #tablist .tab-icon-wrapper, 583 | #tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-icon-wrapper { 584 | margin-left: 0px; 585 | margin-top: 20px; 586 | border-radius: var(--border-radius); 587 | background-color: white; 588 | box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.08), 0 0 0 1px hsla(0, 0%, 0%, 0.08); 589 | } 590 | 591 | .tab-icon { 592 | width: 16px; 593 | height: 16px; 594 | background-image: url("img/defaultFavicon.svg"); 595 | background-repeat: no-repeat; 596 | background-position: center; 597 | background-size: contain; 598 | background-origin: content-box; 599 | image-rendering: pixelated; 600 | } 601 | 602 | .tab-icon.chrome-icon { 603 | -moz-context-properties: fill; 604 | fill: var(--icons-fill-color); 605 | filter: url("img/filters.svg#fill"); 606 | } 607 | 608 | #tablist-wrapper:not(.shrinked) #tablist .tab-icon.chrome-icon, 609 | #pinnedtablist:not(.compact) .tab-icon.chrome-icon { 610 | fill: #5a5b5c; 611 | } 612 | 613 | .tab.loading .tab-icon { 614 | position: relative; 615 | overflow: hidden; 616 | background-image: none !important; 617 | } 618 | 619 | .tab.loading .tab-icon::before { 620 | content: ""; 621 | position: absolute; 622 | background-image: url("img/loading-spinner.svg#standard"); 623 | background-position: left center; 624 | background-repeat: no-repeat; 625 | width: 960px; 626 | height: 100%; 627 | animation: tab-throbber-animation 1.05s steps(60) infinite; 628 | -moz-context-properties: fill; 629 | 630 | /* XXX: It would be nice to transition between the "connecting" color and the 631 | "loading" color (see the `.tab-throbber[progress]::before` rule below); 632 | however, that currently forces main thread painting. When this is fixed 633 | (after WebRender lands), we can do something like 634 | `transition: fill 0.333s, opacity 0.333s;` */ 635 | 636 | fill: currentColor; 637 | opacity: 0.7; 638 | } 639 | 640 | @keyframes tab-throbber-animation { 641 | 0% { transform: translateX(0); } 642 | 100% { transform: translateX(-100%); } 643 | } 644 | 645 | @keyframes tab-throbber-animation-rtl { 646 | 0% { transform: translateX(0); } 647 | 100% { transform: translateX(100%); } 648 | } 649 | 650 | .tab-title-wrapper { 651 | flex: 1; 652 | display: flex; 653 | min-width: 0; 654 | flex-direction: column; 655 | } 656 | 657 | #tablist-wrapper.shrinked .tab-title-wrapper { 658 | margin-left: 6px; 659 | } 660 | 661 | .tab.discarded .tab-title { 662 | opacity: 0.5; 663 | } 664 | 665 | .tab.discarded .tab-meta-image { 666 | opacity: 0.45; 667 | } 668 | 669 | .tab-title, .tab-host { 670 | white-space: nowrap; 671 | overflow: hidden; 672 | } 673 | 674 | .tab-host { 675 | opacity: 0.5; 676 | } 677 | 678 | #tablist-wrapper.shrinked .tab-host { 679 | display: none; 680 | } 681 | 682 | .tab-title-wrapper { 683 | mask-image: linear-gradient(to left, transparent 0, black 2em); 684 | } 685 | 686 | .tab:hover:not(.pinned) > .tab-title-wrapper { 687 | mask-image: linear-gradient(to left, transparent 28px, black calc(2em + 28px)); 688 | } 689 | 690 | .tab-pin { 691 | display: none; 692 | } 693 | 694 | #pinnedtablist:not(.compact) .tab.pinned .tab-pin { 695 | min-width: 16px; 696 | height: 16px; 697 | margin-right: 12px; 698 | display: block; 699 | background-image: url("img/glyph-pin-pinned-12.svg#standard"); 700 | -moz-context-properties: fill; 701 | fill: var(--icons-fill-color); 702 | filter: url("img/filters.svg#fill"); 703 | background-position: center center; 704 | background-repeat: no-repeat; 705 | background-size: 12px; 706 | z-index: 0; 707 | } 708 | 709 | .tab-close { 710 | position: absolute; 711 | display: block; 712 | width: 20px; 713 | height: 20px; 714 | top: 0; 715 | bottom: 0; 716 | right: 6px; 717 | margin: auto; 718 | background-image: url("img/close-icon.svg"); 719 | -moz-context-properties: fill; 720 | fill: var(--icons-fill-color); 721 | filter: url("img/filters.svg#fill"); 722 | background-position: center; 723 | background-repeat: no-repeat; 724 | border-radius: var(--border-radius); 725 | opacity: 0; 726 | } 727 | 728 | .tab:hover > .tab-close { 729 | opacity: 1; 730 | } 731 | 732 | .tab-close:hover { 733 | background-color: var(--close-button-hover) !important; 734 | } 735 | .tab-close:hover:active { 736 | background-color: var(--close-button-active) !important; 737 | } 738 | 739 | #tablist-wrapper.shrinked #tablist .tab, 740 | #tablist-wrapper.shrinked #pinnedtablist:not(.compact) .tab { 741 | height: 35px; 742 | } 743 | 744 | .tab.pinned .tab-loading-burst::before { 745 | margin-left: 12px; 746 | margin-top: 0px; 747 | } 748 | 749 | #tablist-wrapper #pinnedtablist { 750 | background-color: var(--tab-background-pinned); 751 | flex-shrink: 0; 752 | } 753 | 754 | #tablist-wrapper #pinnedtablist.compact { 755 | display: flex; 756 | flex-wrap: wrap; 757 | } 758 | 759 | #pinnedtablist:empty { 760 | display: none; 761 | } 762 | 763 | #pinnedtablist.compact .tab.pinned { 764 | position: relative; 765 | padding: 4px; 766 | } 767 | 768 | #pinnedtablist.compact .tab.pinned > .tab-icon-overlay { 769 | width: 13px; 770 | height: 13px; 771 | margin: 0 0 -13px 0; 772 | left: auto; 773 | top: auto; 774 | bottom: -12px; 775 | right: -11px; 776 | } 777 | 778 | #pinnedtablist.compact .tab.pinned > .tab-meta-image { 779 | background-image: none !important; /* Because the JS script sets it manually */ 780 | display: flex; 781 | justify-content: center; 782 | align-items: center; 783 | } 784 | 785 | #pinnedtablist.compact .tab.pinned .tab-icon-wrapper { 786 | height: 24px; 787 | width: 24px; 788 | } 789 | 790 | #pinnedtablist.compact .tab.pinned .tab-icon { 791 | margin: 2px; 792 | } 793 | 794 | #pinnedtablist.compact .tab.pinned:not(.loading) .tab-icon { 795 | width: 16px; 796 | height: 16px; 797 | } 798 | 799 | #pinnedtablist.compact .tab.pinned:not(.hasContext) > .tab-context, 800 | #pinnedtablist.compact .tab.pinned > .tab-title-wrapper, 801 | .tab.pinned > .tab-close { 802 | display: none; 803 | } 804 | 805 | #pinnedtablist .tab.pinned.wants-attention { 806 | background-image: url("img/tab-attention.svg"); 807 | background-repeat: no-repeat; 808 | } 809 | 810 | #pinnedtablist.compact .tab.pinned.wants-attention { 811 | background-position: center bottom; 812 | } 813 | 814 | #pinnedtablist:not(.compact) .tab.pinned.wants-attention { 815 | background-position: left center; 816 | } 817 | 818 | #moretabs:not([hasMoreTabs]) { 819 | display: none; 820 | } 821 | 822 | #moretabs { 823 | display: flex; 824 | align-items: center; 825 | height: 36px; 826 | padding-left: 31px; 827 | } 828 | 829 | #moretabs:hover { 830 | background-color: hsla(0, 0%, 0%, 0.1); 831 | } 832 | 833 | .hidden { 834 | display: none !important; 835 | } 836 | 837 | /* DARK THEME CUSTOMIZATIONS */ 838 | body.dark-theme { 839 | --tab-background-normal: hsl(240, 4%, 5%); 840 | --tab-background-pinned: hsla(240, 4%, 20%, 0.15); 841 | --tab-background-active: hsl(240, 2%, 20%); 842 | --tab-background-hover: hsl(240, 5%, 30%, 0.25); 843 | --tab-border-color: #38383D; 844 | --searchbox-background: rgb(71, 71, 73); 845 | --primary-text-color: rgb(255, 255, 255); 846 | --icons-fill-color: #bebebe; 847 | --close-button-hover: rgba(238, 238, 241, .1); 848 | --close-button-active: rgba(238, 238, 241, .2); 849 | --menu-background: #323234; 850 | --menu-button-text-shadow: 0 1px rgba(0, 0, 0, .4); 851 | --menu-button-hover: hsla(240, 10%, 94%, 0.2); 852 | --menu-button-active: hsla(240, 10%, 94%, 0.3); 853 | } 854 | 855 | body.dark-theme #newtab-menu { 856 | color: black; 857 | } 858 | --------------------------------------------------------------------------------