commit
b5a6a2cb6a
3 changed files with 105 additions and 94 deletions
29
.eslintrc.js
29
.eslintrc.js
|
@ -1,8 +1,25 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
"extends": "nightmare-mode",
|
"env": {
|
||||||
"installedESLint": true,
|
"browser": true,
|
||||||
"rules": {
|
"es6": true
|
||||||
// Consider moving to this as is FF default
|
},
|
||||||
// "quotes": ["error", "double"]
|
"extends": "eslint:recommended",
|
||||||
}
|
"rules": {
|
||||||
|
"indent": [
|
||||||
|
"error",
|
||||||
|
2
|
||||||
|
],
|
||||||
|
"linebreak-style": [
|
||||||
|
"error",
|
||||||
|
"unix"
|
||||||
|
],
|
||||||
|
"quotes": [
|
||||||
|
"error",
|
||||||
|
"double"
|
||||||
|
],
|
||||||
|
"semi": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
]
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
92
index.js
92
index.js
|
@ -3,19 +3,17 @@ const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||||
/* global require */
|
/* global require */
|
||||||
|
|
||||||
const { attachTo } = require("sdk/content/mod");
|
const { attachTo } = require("sdk/content/mod");
|
||||||
const { Cc, Ci, Cu, Cr } = require('chrome');
|
const {ContextualIdentityService} = require("resource://gre/modules/ContextualIdentityService.jsm");
|
||||||
const {ContextualIdentityService} = require('resource://gre/modules/ContextualIdentityService.jsm');
|
const self = require("sdk/self");
|
||||||
const self = require('sdk/self');
|
|
||||||
const { Style } = require("sdk/stylesheet/style");
|
const { Style } = require("sdk/stylesheet/style");
|
||||||
const tabs = require('sdk/tabs');
|
const tabs = require("sdk/tabs");
|
||||||
const tabsUtils = require('sdk/tabs/utils');
|
const tabsUtils = require("sdk/tabs/utils");
|
||||||
const { viewFor } = require("sdk/view/core");
|
const { viewFor } = require("sdk/view/core");
|
||||||
const webExtension = require('sdk/webextension');
|
const webExtension = require("sdk/webextension");
|
||||||
const windows = require("sdk/windows");
|
const windows = require("sdk/windows");
|
||||||
const windowUtils = require('sdk/window/utils');
|
const windowUtils = require("sdk/window/utils");
|
||||||
|
|
||||||
let ContainerService =
|
let ContainerService = {
|
||||||
{
|
|
||||||
_identitiesState: {},
|
_identitiesState: {},
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
|
@ -38,12 +36,12 @@ let ContainerService =
|
||||||
// only these methods are allowed. We have a 1:1 mapping between messages
|
// only these methods are allowed. We have a 1:1 mapping between messages
|
||||||
// and methods. These methods must return a promise.
|
// and methods. These methods must return a promise.
|
||||||
let methods = [
|
let methods = [
|
||||||
'hideTabs',
|
"hideTabs",
|
||||||
'showTabs',
|
"showTabs",
|
||||||
'sortTabs',
|
"sortTabs",
|
||||||
'openTab',
|
"openTab",
|
||||||
'queryIdentities',
|
"queryIdentities",
|
||||||
'getIdentity',
|
"getIdentity",
|
||||||
];
|
];
|
||||||
|
|
||||||
// Map of identities.
|
// Map of identities.
|
||||||
|
@ -57,7 +55,7 @@ let ContainerService =
|
||||||
// It can happen that this jsm is loaded after the opening a container tab.
|
// It can happen that this jsm is loaded after the opening a container tab.
|
||||||
for (let tab of tabs) {
|
for (let tab of tabs) {
|
||||||
let xulTab = viewFor(tab);
|
let xulTab = viewFor(tab);
|
||||||
let userContextId = parseInt(xulTab.getAttribute('usercontextid') || 0, 10);
|
let userContextId = parseInt(xulTab.getAttribute("usercontextid") || 0, 10);
|
||||||
if (userContextId) {
|
if (userContextId) {
|
||||||
++this._identitiesState[userContextId].openTabs;
|
++this._identitiesState[userContextId].openTabs;
|
||||||
}
|
}
|
||||||
|
@ -65,7 +63,7 @@ let ContainerService =
|
||||||
|
|
||||||
tabs.on("open", tab => {
|
tabs.on("open", tab => {
|
||||||
let xulTab = viewFor(tab);
|
let xulTab = viewFor(tab);
|
||||||
let userContextId = parseInt(xulTab.getAttribute('usercontextid') || 0, 10);
|
let userContextId = parseInt(xulTab.getAttribute("usercontextid") || 0, 10);
|
||||||
if (userContextId) {
|
if (userContextId) {
|
||||||
++this._identitiesState[userContextId].openTabs;
|
++this._identitiesState[userContextId].openTabs;
|
||||||
}
|
}
|
||||||
|
@ -73,7 +71,7 @@ let ContainerService =
|
||||||
|
|
||||||
tabs.on("close", tab => {
|
tabs.on("close", tab => {
|
||||||
let xulTab = viewFor(tab);
|
let xulTab = viewFor(tab);
|
||||||
let userContextId = parseInt(xulTab.getAttribute('usercontextid') || 0, 10);
|
let userContextId = parseInt(xulTab.getAttribute("usercontextid") || 0, 10);
|
||||||
if (userContextId && this._identitiesState[userContextId].openTabs) {
|
if (userContextId && this._identitiesState[userContextId].openTabs) {
|
||||||
--this._identitiesState[userContextId].openTabs;
|
--this._identitiesState[userContextId].openTabs;
|
||||||
}
|
}
|
||||||
|
@ -132,8 +130,7 @@ let ContainerService =
|
||||||
color = "green";
|
color = "green";
|
||||||
} else if (identity.color == "#ee5195") {
|
} else if (identity.color == "#ee5195") {
|
||||||
color = "pink";
|
color = "pink";
|
||||||
} else if (["blue", "turquoise", "green", "yellow", "orange", "red",
|
} else if (["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"].indexOf(identity.color) != -1) {
|
||||||
"pink", "purple"].indexOf(identity.color) != -1) {
|
|
||||||
color = identity.color;
|
color = identity.color;
|
||||||
} else {
|
} else {
|
||||||
color = "";
|
color = "";
|
||||||
|
@ -152,10 +149,10 @@ let ContainerService =
|
||||||
// Tabs management
|
// Tabs management
|
||||||
|
|
||||||
hideTabs(args) {
|
hideTabs(args) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise(resolve => {
|
||||||
for (let tab of tabs) {
|
for (let tab of tabs) {
|
||||||
let xulTab = viewFor(tab);
|
let xulTab = viewFor(tab);
|
||||||
let userContextId = parseInt(xulTab.getAttribute('usercontextid') || 0, 10);
|
let userContextId = parseInt(xulTab.getAttribute("usercontextid") || 0, 10);
|
||||||
|
|
||||||
if ("userContextId" in args && args.userContextId != userContextId) {
|
if ("userContextId" in args && args.userContextId != userContextId) {
|
||||||
continue;
|
continue;
|
||||||
|
@ -181,8 +178,8 @@ let ContainerService =
|
||||||
return Promise.all(promises);
|
return Promise.all(promises);
|
||||||
},
|
},
|
||||||
|
|
||||||
sortTabs(args) {
|
sortTabs() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise(resolve => {
|
||||||
for (let window of windows.browserWindows) {
|
for (let window of windows.browserWindows) {
|
||||||
// From model to XUL window.
|
// From model to XUL window.
|
||||||
window = viewFor(window);
|
window = viewFor(window);
|
||||||
|
@ -191,7 +188,7 @@ let ContainerService =
|
||||||
|
|
||||||
let pos = 0;
|
let pos = 0;
|
||||||
|
|
||||||
// Let's collect UCIs/tabs for this window.
|
// Let"s collect UCIs/tabs for this window.
|
||||||
let map = new Map;
|
let map = new Map;
|
||||||
for (let tab of tabs) {
|
for (let tab of tabs) {
|
||||||
if (tabsUtils.isPinned(tab)) {
|
if (tabsUtils.isPinned(tab)) {
|
||||||
|
@ -200,22 +197,22 @@ let ContainerService =
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
let userContextId = parseInt(tab.getAttribute('usercontextid') || 0, 10);
|
let userContextId = parseInt(tab.getAttribute("usercontextid") || 0, 10);
|
||||||
if (!map.has(userContextId)) {
|
if (!map.has(userContextId)) {
|
||||||
map.set(userContextId, []);
|
map.set(userContextId, []);
|
||||||
}
|
}
|
||||||
map.get(userContextId).push(tab);
|
map.get(userContextId).push(tab);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Let's sort the map.
|
// Let"s sort the map.
|
||||||
let sortMap = new Map([...map.entries()].sort((a, b) => a[0] > b[0]));
|
let sortMap = new Map([...map.entries()].sort((a, b) => a[0] > b[0]));
|
||||||
|
|
||||||
// Let's move tabs.
|
// Let"s move tabs.
|
||||||
for (let [userContextId, tabs] of sortMap) {
|
sortMap.forEach(tabs => {
|
||||||
for (let tab of tabs) {
|
for (let tab of tabs) {
|
||||||
window.gBrowser.moveTabTo(tab, pos++);
|
window.gBrowser.moveTabTo(tab, pos++);
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
resolve(null);
|
resolve(null);
|
||||||
|
@ -223,7 +220,7 @@ let ContainerService =
|
||||||
},
|
},
|
||||||
|
|
||||||
openTab(args) {
|
openTab(args) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise(resolve => {
|
||||||
let browserWin = windowUtils.getMostRecentBrowserWindow();
|
let browserWin = windowUtils.getMostRecentBrowserWindow();
|
||||||
|
|
||||||
// This should not really happen.
|
// This should not really happen.
|
||||||
|
@ -232,12 +229,11 @@ let ContainerService =
|
||||||
}
|
}
|
||||||
|
|
||||||
let userContextId = 0;
|
let userContextId = 0;
|
||||||
if ('userContextId' in args) {
|
if ("userContextId" in args) {
|
||||||
userContextId = args.userContextId;
|
userContextId = args.userContextId;
|
||||||
}
|
}
|
||||||
|
|
||||||
let tab = browserWin.gBrowser.addTab(args.url || null,
|
let tab = browserWin.gBrowser.addTab(args.url || null, { userContextId });
|
||||||
{ userContextId: userContextId })
|
|
||||||
browserWin.gBrowser.selectedTab = tab;
|
browserWin.gBrowser.selectedTab = tab;
|
||||||
resolve(true);
|
resolve(true);
|
||||||
});
|
});
|
||||||
|
@ -245,8 +241,8 @@ let ContainerService =
|
||||||
|
|
||||||
// Identities management
|
// Identities management
|
||||||
|
|
||||||
queryIdentities(args) {
|
queryIdentities() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise(resolve => {
|
||||||
let identities = [];
|
let identities = [];
|
||||||
|
|
||||||
ContextualIdentityService.getIdentities().forEach(identity => {
|
ContextualIdentityService.getIdentities().forEach(identity => {
|
||||||
|
@ -266,29 +262,29 @@ let ContainerService =
|
||||||
// Styling the window
|
// Styling the window
|
||||||
|
|
||||||
configureWindow(window) {
|
configureWindow(window) {
|
||||||
var tabsElement = window.document.getElementById('tabbrowser-tabs');
|
var tabsElement = window.document.getElementById("tabbrowser-tabs");
|
||||||
var button = window.document.getAnonymousElementByAttribute(tabsElement, 'anonid', 'tabs-newtab-button')
|
var button = window.document.getAnonymousElementByAttribute(tabsElement, "anonid", "tabs-newtab-button");
|
||||||
|
|
||||||
while (button.firstChild) {
|
while (button.firstChild) {
|
||||||
button.removeChild(button.firstChild);
|
button.removeChild(button.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.setAttribute('type', 'menu');
|
button.setAttribute("type", "menu");
|
||||||
let popup = window.document.createElementNS(XUL_NS, 'menupopup');
|
let popup = window.document.createElementNS(XUL_NS, "menupopup");
|
||||||
|
|
||||||
popup.setAttribute('anonid', 'newtab-popup');
|
popup.setAttribute("anonid", "newtab-popup");
|
||||||
popup.className = 'new-tab-popup';
|
popup.className = "new-tab-popup";
|
||||||
popup.setAttribute('position', 'after_end');
|
popup.setAttribute("position", "after_end");
|
||||||
|
|
||||||
ContextualIdentityService.getIdentities().forEach(identity => {
|
ContextualIdentityService.getIdentities().forEach(identity => {
|
||||||
identity = this._convert(identity);
|
identity = this._convert(identity);
|
||||||
|
|
||||||
var menuItem = window.document.createElementNS(XUL_NS, 'menuitem');
|
var menuItem = window.document.createElementNS(XUL_NS, "menuitem");
|
||||||
menuItem.setAttribute('class', 'menuitem-iconic');
|
menuItem.setAttribute("class", "menuitem-iconic");
|
||||||
menuItem.setAttribute('label', identity.name);
|
menuItem.setAttribute("label", identity.name);
|
||||||
menuItem.setAttribute('image', self.data.url('usercontext.svg') + '#' + identity.image);
|
menuItem.setAttribute("image", self.data.url("usercontext.svg") + "#" + identity.image);
|
||||||
|
|
||||||
menuItem.addEventListener('command', (event) => {
|
menuItem.addEventListener("command", (event) => {
|
||||||
this.openTab({userContextId: identity.userContextId});
|
this.openTab({userContextId: identity.userContextId});
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,22 +1,22 @@
|
||||||
/* global browser, window, document, localStorage */
|
/* global browser, window, document, localStorage */
|
||||||
const CONTAINER_HIDE_SRC = '/img/container-hide.svg';
|
const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
|
||||||
const CONTAINER_UNHIDE_SRC = '/img/container-unhide.svg';
|
const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
|
||||||
|
|
||||||
function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
|
function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
|
||||||
// Let's show/hide the tabs
|
// Let"s show/hide the tabs
|
||||||
return browser.runtime.sendMessage({
|
return browser.runtime.sendMessage({
|
||||||
method: hasHiddenTabs ? 'showTabs' : 'hideTabs',
|
method: hasHiddenTabs ? "showTabs" : "hideTabs",
|
||||||
userContextId: userContextId
|
userContextId: userContextId
|
||||||
})
|
})
|
||||||
// We need to retrieve the new identity configuration in order to choose the
|
// We need to retrieve the new identity configuration in order to choose the
|
||||||
// correct icon.
|
// correct icon.
|
||||||
.then(() => {
|
.then(() => {
|
||||||
return browser.runtime.sendMessage({
|
return browser.runtime.sendMessage({
|
||||||
method: 'getIdentity',
|
method: "getIdentity",
|
||||||
userContextId: userContextId
|
userContextId: userContextId
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
// Let's update the icon.
|
// Let"s update the icon.
|
||||||
.then((identity) => {
|
.then((identity) => {
|
||||||
let hideorshowIcon = document.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
|
let hideorshowIcon = document.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
|
||||||
if (!identity.hasHiddenTabs && !identity.hasOpenTabs) {
|
if (!identity.hasHiddenTabs && !identity.hasOpenTabs) {
|
||||||
|
@ -32,34 +32,34 @@ function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (localStorage.getItem('onboarded2')) {
|
if (localStorage.getItem("onboarded2")) {
|
||||||
for (let element of document.querySelectorAll('.onboarding')) {
|
for (let element of document.querySelectorAll(".onboarding")) {
|
||||||
element.classList.add('hide');
|
element.classList.add("hide");
|
||||||
}
|
}
|
||||||
document.querySelector('#container-panel').classList.remove('hide');
|
document.querySelector("#container-panel").classList.remove("hide");
|
||||||
} else if (localStorage.getItem('onboarded1')) {
|
} else if (localStorage.getItem("onboarded1")) {
|
||||||
document.querySelector('.onboarding-panel-1').classList.add('hide');
|
document.querySelector(".onboarding-panel-1").classList.add("hide");
|
||||||
document.querySelector('#container-panel').classList.add('hide');
|
document.querySelector("#container-panel").classList.add("hide");
|
||||||
} else {
|
} else {
|
||||||
document.querySelector('.onboarding-panel-2').classList.add('hide');
|
document.querySelector(".onboarding-panel-2").classList.add("hide");
|
||||||
document.querySelector('#container-panel').classList.add('hide');
|
document.querySelector("#container-panel").classList.add("hide");
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelector('#onboarding-next-button').addEventListener('click', () => {
|
document.querySelector("#onboarding-next-button").addEventListener("click", () => {
|
||||||
localStorage.setItem('onboarded1', true);
|
localStorage.setItem("onboarded1", true);
|
||||||
document.querySelector('.onboarding-panel-2').classList.remove('hide');
|
document.querySelector(".onboarding-panel-2").classList.remove("hide");
|
||||||
document.querySelector('.onboarding-panel-1').classList.add('hide');
|
document.querySelector(".onboarding-panel-1").classList.add("hide");
|
||||||
document.querySelector('#container-panel').classList.add('hide');
|
document.querySelector("#container-panel").classList.add("hide");
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('#onboarding-done-button').addEventListener('click', () => {
|
document.querySelector("#onboarding-done-button").addEventListener("click", () => {
|
||||||
localStorage.setItem('onboarded2', true);
|
localStorage.setItem("onboarded2", true);
|
||||||
document.querySelector('.onboarding-panel-1').classList.add('hide');
|
document.querySelector(".onboarding-panel-1").classList.add("hide");
|
||||||
document.querySelector('.onboarding-panel-2').classList.add('hide');
|
document.querySelector(".onboarding-panel-2").classList.add("hide");
|
||||||
document.querySelector('#container-panel').classList.remove('hide');
|
document.querySelector("#container-panel").classList.remove("hide");
|
||||||
});
|
});
|
||||||
|
|
||||||
browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities => {
|
browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
|
||||||
let fragment = document.createDocumentFragment();
|
let fragment = document.createDocumentFragment();
|
||||||
|
|
||||||
identities.forEach(identity => {
|
identities.forEach(identity => {
|
||||||
|
@ -69,9 +69,9 @@ browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities => {
|
||||||
hideOrShowIconSrc = CONTAINER_UNHIDE_SRC;
|
hideOrShowIconSrc = CONTAINER_UNHIDE_SRC;
|
||||||
}
|
}
|
||||||
|
|
||||||
let tr = document.createElement('tr');
|
let tr = document.createElement("tr");
|
||||||
fragment.appendChild(tr);
|
fragment.appendChild(tr);
|
||||||
tr.setAttribute('data-identity-cookie-store-id', identity.userContextId);
|
tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
|
||||||
tr.innerHTML = `
|
tr.innerHTML = `
|
||||||
<td>
|
<td>
|
||||||
<div class="userContext-icon"
|
<div class="userContext-icon"
|
||||||
|
@ -103,16 +103,14 @@ browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities => {
|
||||||
hideorshowIcon.style.display = "none";
|
hideorshowIcon.style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.addEventListener('click', e => {
|
tr.addEventListener("click", e => {
|
||||||
if (e.target.matches('.hideorshow-icon')) {
|
if (e.target.matches(".hideorshow-icon")) {
|
||||||
showOrHideContainerTabs(identity.userContextId,
|
showOrHideContainerTabs(identity.userContextId,
|
||||||
identity.hasHiddenTabs).then(i => {
|
identity.hasHiddenTabs).then(i => { identity = i; });
|
||||||
identity = i
|
} else if (e.target.matches(".newtab-icon")) {
|
||||||
});
|
|
||||||
} else if (e.target.matches('.newtab-icon')) {
|
|
||||||
showOrHideContainerTabs(identity.userContextId, true).then(() => {
|
showOrHideContainerTabs(identity.userContextId, true).then(() => {
|
||||||
browser.runtime.sendMessage({
|
browser.runtime.sendMessage({
|
||||||
method: 'openTab',
|
method: "openTab",
|
||||||
userContextId: identity.userContextId,
|
userContextId: identity.userContextId,
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
window.close();
|
window.close();
|
||||||
|
@ -122,21 +120,21 @@ browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('.identities-list').appendChild(fragment);
|
document.querySelector(".identities-list").appendChild(fragment);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('#edit-containers-link').addEventListener('click', () => {
|
document.querySelector("#edit-containers-link").addEventListener("click", () => {
|
||||||
browser.runtime.sendMessage({
|
browser.runtime.sendMessage({
|
||||||
method: 'openTab',
|
method: "openTab",
|
||||||
url: "about:preferences#containers"
|
url: "about:preferences#containers"
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
window.close();
|
window.close();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector('#sort-containers-link').addEventListener('click', () => {
|
document.querySelector("#sort-containers-link").addEventListener("click", () => {
|
||||||
browser.runtime.sendMessage({
|
browser.runtime.sendMessage({
|
||||||
method: 'sortTabs'
|
method: "sortTabs"
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
window.close();
|
window.close();
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Reference in a new issue