diff --git a/webextension/background.js b/webextension/background.js
index 96fff29..d1935f7 100644
--- a/webextension/background.js
+++ b/webextension/background.js
@@ -339,7 +339,7 @@ const backgroundLogic = {
createOrUpdateContainer(options) {
let donePromise;
- if (options.userContextId) {
+ if (options.userContextId !== "new") {
donePromise = browser.contextualIdentities.update(
this.cookieStoreId(options.userContextId),
options.params
diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index e9c7699..e86a7d1 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -91,6 +91,10 @@ table {
opacity: 0;
}
+[hidden] {
+ display: none !important;
+}
+
/* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
.truncate-text {
mask-image: linear-gradient(to left, transparent, black 1em);
@@ -114,6 +118,11 @@ table {
--identity-icon-color: #51cd00;
}
+[data-identity-color="grey"] {
+ /* Only used for the edit panel */
+ --identity-icon-color: #616161;
+}
+
[data-identity-color="yellow"] {
--identity-tab-color: #ffcb00;
--identity-icon-color: #ffcb00;
@@ -757,55 +766,88 @@ span ~ .panel-header-text {
#edit-sites-assigned h3 {
font-size: 14px;
font-weight: normal;
- padding-block-end: 5px;
+ padding-block-end: 6px;
+ padding-block-start: 6px;
padding-inline-end: 16px;
padding-inline-start: 16px;
}
-#edit-sites-assigned table td {
+.assigned-sites-list > div {
display: flex;
- padding-inline-end: 16px;
- padding-inline-start: 16px;
+ padding-block-end: 6px;
+ padding-block-start: 6px;
}
-#edit-sites-assigned .delete-assignment {
+.assigned-sites-list > div > .icon {
+ margin-inline-end: 10px;
+}
+
+.assigned-sites-list > div > .delete-assignment {
display: none;
}
-#edit-sites-assigned tr:hover > td > .delete-assignment {
+.assigned-sites-list > div:hover > .delete-assignment {
display: block;
}
-.column-panel-content form span {
- align-items: center;
- block-size: 44px;
- display: flex;
- flex: 0 0 25%;
- justify-content: center;
+.assigned-sites-list > div > .hostname {
+ flex: 1;
}
-.edit-container-panel label {
+.radio-choice > .radio-container {
+ align-items: center;
+ block-size: 29px;
+ display: flex;
+ flex: 0 0 calc(100% / 8);
+}
+
+.radio-choice > .radio-container > label {
+ background: none;
+ block-size: 23px;
+ border: 0;
+ filter: none;
+ inline-size: 23px;
+ margin-block-end: 0;
+ margin-block-start: 0;
+ margin-inline-end: 0;
+ margin-inline-start: 0;
+ padding-block-end: 0;
+ padding-block-start: 0;
+ padding-inline-end: 0;
+ padding-inline-start: 0;
+}
+
+.radio-choice > .radio-container > label::before {
+ background-color: unset;
background-image: var(--identity-icon);
- background-size: 26px 26px;
- block-size: 34px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ block-size: 23px;
+ border: none;
+ content: "";
+ display: block;
fill: var(--identity-icon-color);
filter: url('/img/filters.svg#fill');
- flex: 0 0 34px;
+ inline-size: 23px;
position: relative;
}
-.edit-container-panel label::before {
- opacity: 0 !important;
-}
-
-.edit-container-panel [type="radio"] {
+.radio-choice > .radio-container > [type="radio"] {
+ -moz-appearance: none;
display: inline;
opacity: 0;
}
-.edit-container-panel [type="radio"]:checked + label {
- outline: 2px solid grey;
- -moz-outline-radius: 50px;
+.radio-choice > .radio-container > [type="radio"]:checked + label {
+ background: #d3d3d3;
+ border-radius: 100%;
+}
+
+/* When focusing the element add a thin blue highlight to match input fields. This gives a distinction to other selected radio items */
+.radio-choice > .radio-container > [type="radio"]:focus + label {
+ outline: 1px solid #1f9ffc;
+ -moz-outline-radius: 100%;
}
.edit-container-panel fieldset {
@@ -842,5 +884,5 @@ span ~ .panel-header-text {
.edit-container-panel legend {
flex: 1 0;
font-size: 14px !important;
- padding-block-end: 5px;
+ padding-block-end: 6px;
}
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 2069560..4f3e391 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -7,6 +7,7 @@ const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
const DEFAULT_COLOR = "blue";
const DEFAULT_ICON = "circle";
+const NEW_CONTAINER_ID = "new";
// List of panels
const P_ONBOARDING_1 = "onboarding1";
@@ -750,10 +751,30 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
this.initializeRadioButtons();
Logic.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => {
+ const formValues = new FormData(this._editForm);
+ if (formValues.get("container-id") !== NEW_CONTAINER_ID) {
+ this._submitForm();
+ } else {
+ Logic.showPreviousPanel();
+ }
+ });
+
+ Logic.addEnterHandler(document.querySelector("#edit-container-cancel-link"), () => {
+ Logic.showPreviousPanel();
+ });
+
+ this._editForm = document.getElementById("edit-container-panel-form");
+ const editLink = document.querySelector("#edit-container-ok-link");
+ Logic.addEnterHandler(editLink, () => {
this._submitForm();
});
- this._editForm = document.getElementById("edit-container-panel-form");
- this._editForm.addEventListener("submit", this._submitForm.bind(this));
+ editLink.addEventListener("submit", () => {
+ this._submitForm();
+ });
+ this._editForm.addEventListener("submit", () => {
+ this._submitForm();
+ });
+
},
@@ -762,7 +783,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
return browser.runtime.sendMessage({
method: "createOrUpdateContainer",
message: {
- userContextId: Logic.currentUserContextId() || false,
+ userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
params: {
name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
icon: formValues.get("container-icon") || DEFAULT_ICON,
@@ -783,7 +804,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
const assignmentKeys = Object.keys(assignments);
assignmentPanel.hidden = !(assignmentKeys.length > 0);
if (assignments) {
- const tableElement = assignmentPanel.querySelector("table > tbody");
+ const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
/* Remove previous assignment list,
after removing one we rerender the list */
while (tableElement.firstChild) {
@@ -791,18 +812,19 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
}
assignmentKeys.forEach((siteKey) => {
const site = assignments[siteKey];
- const trElement = document.createElement("tr");
+ const trElement = document.createElement("div");
/* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
This is pending a better solution for favicons from web extensions */
const assumedUrl = `https://${site.hostname}`;
trElement.innerHTML = escaped`
-  |
- ${site.hostname}
- 
- | `;
+
+
+ ${site.hostname}
+
+ `;
const deleteButton = trElement.querySelector(".delete-assignment");
Logic.addEnterHandler(deleteButton, () => {
const userContextId = Logic.currentUserContextId();
@@ -830,7 +852,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
colors.forEach((containerColor) => {
- const templateInstance = document.createElement("span");
+ const templateInstance = document.createElement("div");
+ templateInstance.classList.add("radio-container");
// eslint-disable-next-line no-unsanitized/property
templateInstance.innerHTML = colorRadioTemplate(containerColor);
colorRadioFieldset.appendChild(templateInstance);
@@ -843,7 +866,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle"];
const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
icons.forEach((containerIcon) => {
- const templateInstance = document.createElement("span");
+ const templateInstance = document.createElement("div");
+ templateInstance.classList.add("radio-container");
// eslint-disable-next-line no-unsanitized/property
templateInstance.innerHTML = iconRadioTemplate(containerIcon);
iconRadioFieldset.appendChild(templateInstance);
@@ -857,8 +881,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
const userContextId = Logic.currentUserContextId();
const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
this.showAssignedContainers(assignments);
+ document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
+ document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
[...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
colorInput.checked = colorInput.value === identity.color;
});
diff --git a/webextension/popup.html b/webextension/popup.html
index b641895..d7a930c 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -115,27 +115,26 @@