diff --git a/.gitignore b/.gitignore
index 520552f..6914c99 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules
README.html
*.xpi
*.swp
+.vimrc
diff --git a/index.js b/index.js
index a751559..e3181ee 100644
--- a/index.js
+++ b/index.js
@@ -12,6 +12,8 @@ const webExtension = require("sdk/webextension");
const windows = require("sdk/windows");
const windowUtils = require("sdk/window/utils");
+const IDENTITY_COLORS = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"];
+
let ContainerService = {
_identitiesState: {},
@@ -132,7 +134,7 @@ let ContainerService = {
color = "green";
} else if (identity.color === "#ee5195") {
color = "pink";
- } else if (["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"].indexOf(identity.color) !== -1) {
+ } else if (IDENTITY_COLORS.indexOf(identity.color) !== -1) {
color = identity.color;
} else {
color = "";
diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index 2ce5d91..bad469d 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -1,13 +1,32 @@
body {
- background: #FAFAFA;
min-inline-size: 200px;
max-inline-size: 400px;
+ inline-size: 264px;
}
table {
margin-block-end: 0;
}
+.button {
+ background: #248aeb;
+}
+
+.panel {
+ block-size: 100%;
+}
+
+.panel-row {
+ block-size: 100%;
+}
+
+.panel-back-arrow {
+ background: #ebebeb;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+}
+
.onboarding {
margin: 16px;
min-block-size: 480px;
@@ -35,17 +54,29 @@ table {
padding: .5em;
}
-.header-column {
- padding: 0;
+.panel-header {
+ block-size: 54px;
+ display: flex;
+ align-items: center;
+}
+
+.panel-header-text {
+ font-weight: lighter;
+ font-size: 16px;
+ margin-bottom: 0;
+ color: #4a4a4a;
+}
+
+.panel-header-button {
+ justify-content: center;
}
.icon {
max-inline-size: 16px;
block-size: 16px;
- margin: 4px;
}
-.container-panel > table.unstriped tbody tr {
+table.unstriped tbody tr {
border-bottom: 1px solid #f1f1f1;
background-color: #fefefe;
cursor: pointer;
@@ -58,12 +89,15 @@ table {
background-size: contain;
filter: url('/img/filters.svg#fill');
fill: var(--identity-icon-color);
- inline-size: 32px;
- block-size: 32px;
+ inline-size: 20px;
+ block-size: 20px;
+ padding-left: 20px;
+ padding-right: 10px;
}
-.userContext-icon:hover {
- background-image: url('/img/container-add.svg');
+.container-panel-row:hover .userContext-icon {
+ background-image: url('/img/container-newtab.svg');
+ filter: url('/img/filters.svg#fill');
fill: 'gray';
}
@@ -71,9 +105,33 @@ table {
background: #DCDBDC;
}
+.panel-footer {
+ align-items: center;
+ background: #efefef;
+ color: #000000;
+ display: flex;
+ font-size: 13px;
+ block-size: 54px;
+ inline-size: 100%;
+}
+
+.footer-columns {
+ margin: 0;
+ padding: 0;
+}
+
+.footer-button {
+ margin-bottom: 0;
+ border-radius: 0;
+}
+
+.cancel-button {
+ background: #ebebeb;
+}
+
.edit-containers-text {
text-align: center;
- padding: .5em;
+ border-inline-end: solid 1px #d8d8d8;
}
.edit-containers-text a {
@@ -140,6 +198,48 @@ table {
--identity-icon: url("/img/usercontext.svg#circle");
}
-.container-info-has-tabs {
+.container-info-panel-header {
+ block-size: 33px;
+ display: flex;
+ align-items: center;
+ border-block-end: 1px solid #ebebeb;
+ margin-block-end: 10px;
+ padding: 0 20px;
+}
+
+.container-info-panel-hide {
+ margin-bottom: 8px;
+ padding: 0 20px;
+}
+
+.container-info-panel-hideorshow-icon {
+ margin-inline-end: 7px;
+}
+
+.container-info-panel-movetabs {
+ border-block-end: 1px solid #ebebeb;
+ margin-block-end: 10px;
+ padding: 0 20px;
+}
+
+.clickable {
cursor: pointer;
}
+
+.edit-containers-panel-footer a {
+ color: #ffffff;
+}
+
+.edit-containers-exit-text {
+ display: flex;
+ align-items: center;
+ background: #248aeb;
+ block-size: 100%;
+ color: #ffffff;
+ justify-content: center;
+}
+
+.choose-color-icon {
+ padding-inline-start: 17px;
+ padding-inline-end: 7px;
+}
diff --git a/webextension/img/container-newtab.svg b/webextension/img/container-newtab.svg
new file mode 100644
index 0000000..477ace6
--- /dev/null
+++ b/webextension/img/container-newtab.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 278eeb3..51d3ed2 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -2,6 +2,13 @@
const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
+function showPanel(panelSelector) {
+ for (let panelElement of document.querySelectorAll(".panel")) {
+ panelElement.classList.add("hide");
+ }
+ document.querySelector(panelSelector).classList.remove("hide");
+}
+
function showContainerTabsPanel(identity) {
// Populating the panel: name and icon
document.getElementById("container-info-name").innerText = identity.name;
@@ -16,6 +23,9 @@ function showContainerTabsPanel(identity) {
trHasTabs.setAttribute("data-user-context-id", identity.userContextId);
}
+ let hideOrShowRow = document.querySelector("#container-info-hideorshow");
+ hideOrShowRow.setAttribute("data-user-context-id", identity.userContextId);
+
const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
@@ -32,12 +42,14 @@ function showContainerTabsPanel(identity) {
method: "getTabs",
userContextId: identity.userContextId,
}).then(tabs => {
+ console.log('browser.runtime.sendMessage getTabs, tabs: ', tabs);
// For each one, let's create a new line.
let fragment = document.createDocumentFragment();
for (const tab of tabs) {
let tr = document.createElement("tr");
fragment.appendChild(tr);
tr.classList.add("container-info-tab");
+ tr.classList.add("clickable");
tr.innerHTML = `
 |
${tab.title} | `;
@@ -64,38 +76,33 @@ function showContainerTabsPanel(identity) {
}
if (localStorage.getItem("onboarded2")) {
- for (let element of document.querySelectorAll(".onboarding")) {
- element.classList.add("hide");
- }
- document.querySelector("#container-panel").classList.remove("hide");
+ showPanel("#container-panel");
} else if (localStorage.getItem("onboarded1")) {
- document.querySelector(".onboarding-panel-1").classList.add("hide");
- document.querySelector("#container-panel").classList.add("hide");
+ showPanel(".onboarding-panel-2");
} else {
- document.querySelector(".onboarding-panel-2").classList.add("hide");
- document.querySelector("#container-panel").classList.add("hide");
+ showPanel(".onboarding-panel-1");
}
document.querySelector("#onboarding-next-button").addEventListener("click", () => {
localStorage.setItem("onboarded1", true);
- document.querySelector(".onboarding-panel-2").classList.remove("hide");
- document.querySelector(".onboarding-panel-1").classList.add("hide");
- document.querySelector("#container-panel").classList.add("hide");
+ showPanel(".onboarding-panel-2");
});
document.querySelector("#onboarding-done-button").addEventListener("click", () => {
localStorage.setItem("onboarded2", true);
- document.querySelector(".onboarding-panel-1").classList.add("hide");
- document.querySelector(".onboarding-panel-2").classList.add("hide");
- document.querySelector("#container-panel").classList.remove("hide");
+ showPanel("#container-panel");
});
browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
+ console.log('queryIdentities');
let fragment = document.createDocumentFragment();
identities.forEach(identity => {
+ console.log('identities.forEach');
let tr = document.createElement("tr");
fragment.appendChild(tr);
+ tr.classList.add("container-panel-row");
+ tr.classList.add("clickable");
tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
tr.innerHTML = `
@@ -129,13 +136,98 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
document.querySelector(".identities-list").appendChild(fragment);
});
-document.querySelector("#edit-containers-link").addEventListener("click", () => {
- browser.runtime.sendMessage({
- method: "openTab",
- url: "about:preferences#containers"
- }).then(() => {
- window.close();
+function showEditContainersPanel() {
+ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
+ let fragment = document.createDocumentFragment();
+
+ identities.forEach(identity => {
+ let tr = document.createElement("tr");
+ fragment.appendChild(tr);
+ tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
+ tr.classList.add("clickable");
+ tr.innerHTML = `
+ |
+
+
+ |
+ ${identity.name} |
+
+ 
+ |
+
+ 
+ | `;
+
+ tr.addEventListener("click", e => {
+ if (e.target.matches(".edit-container-icon")) {
+ showEditContainerPanel(identity);
+ } else if (e.target.matches(".delete-container-icon")) {
+ showDeleteContainerPanel(identity);
+ }
+ });
+ });
+
+ document.querySelector("#edit-identities-list").innerHTML = "";
+ document.querySelector("#edit-identities-list").appendChild(fragment);
});
+ showPanel("#edit-containers-panel");
+}
+
+function showEditContainerPanel(identity) {
+ document.querySelector("#edit-container-panel-name-input").value = identity.name;
+ showPanel("#edit-container-panel");
+}
+
+function showDeleteContainerPanel(identity) {
+ // Populating the panel: name and icon
+ document.getElementById("delete-container-name").innerText = identity.name;
+
+ let icon = document.getElementById("delete-container-icon");
+ icon.setAttribute("data-identity-icon", identity.image);
+ icon.setAttribute("data-identity-color", identity.color);
+
+ showPanel("#delete-container-panel");
+}
+
+document.querySelector("#add-container-link").addEventListener("click", () => {
+ showPanel("#edit-container-panel");
+});
+
+document.querySelector("#edit-containers-link").addEventListener("click", () => {
+ showEditContainersPanel();
+});
+
+document.querySelector("#exit-edit-mode-link").addEventListener("click", () => {
+ showPanel("#container-panel");
+});
+
+document.querySelector("#edit-container-panel-back-arrow").addEventListener("click", () => {
+ showEditContainersPanel();
+});
+
+document.querySelector("#edit-container-cancel-link").addEventListener("click", () => {
+ showEditContainersPanel();
+});
+
+document.querySelector("#delete-container-panel-back-arrow").addEventListener("click", () => {
+ showEditContainersPanel();
+});
+
+document.querySelector("#delete-container-cancel-link").addEventListener("click", () => {
+ showEditContainersPanel();
});
document.querySelector("#sort-containers-link").addEventListener("click", () => {
diff --git a/webextension/popup.html b/webextension/popup.html
index 5bd8dfc..9316540 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -6,63 +6,158 @@
-
+
+
A better way to manage all the things you do online
Use containers to organize tasks, manage accounts, and keep your focus where you want it.
Learn more
Next
-
+
+
+
Put containers to work for you.
Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.
Done
+
+
-
+ 
+
