Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#303: Reset cookies in site manager #2654

Merged
merged 5 commits into from
Aug 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 55 additions & 9 deletions src/css/popup.css
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ body {

/* Hack for menu icons to use a light color without affecting container icons */
[data-theme="light"] img.delete-assignment,
[data-theme="dark"] img.reset-assignment,
[data-theme="dark"] .trash-button,
[data-theme="dark"] img.menu-icon,
[data-theme="dark"] .menu-icon > img,
Expand All @@ -236,6 +237,7 @@ body {
filter: invert(1);
}

[data-theme="dark"] img.clear-storage-icon,
[data-theme="dark"] img.delete-assignment,
[data-theme="dark"] #edit-sites-assigned .menu-icon,
[data-theme="dark"] #container-info-table .menu-icon {
Expand Down Expand Up @@ -285,9 +287,33 @@ table {
display: none !important;
}

.popup-notification-card {
opacity: 0;
pointer-events: none;
transition: opacity 2s;
border-radius: 4px;
font-size: 12px;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
padding-block: 8px;
padding-inline: 8px;
margin-block: 8px;
margin-inline: 8px;
inline-size: calc(100vw - 25px);
background-color: var(--button-bg-active-color-secondary);
z-index: 3;
}

.is-shown {
pointer-events: auto;
opacity: 1;
transition: opacity 0s;
}

/* effect borrowed from tabs in firefox, ensure that the element flexes to the full width */
.truncate-text {
inline-size: calc(100vw - 80px);
inline-size: calc(100vw - 100px);
overflow: hidden;
position: relative;
white-space: nowrap;
Expand Down Expand Up @@ -1505,8 +1531,9 @@ input[type=text] {
min-block-size: 500px;
}

.delete-container-panel {
min-block-size: 300px;
.delete-container-panel,
.clear-container-storage-panel {
min-block-size: 500px;
}

.panel.onboarding,
Expand Down Expand Up @@ -1794,12 +1821,14 @@ manage things like container crud */
margin-inline-end: 0;
}

.delete-container-confirm {
.delete-container-confirm,
.clear-container-storage-confirm {
padding-inline-end: 20px;
padding-inline-start: 20px;
}

.delete-container-confirm-title {
.delete-container-confirm-title,
.clear-container-storage-confirm-title {
color: var(--text-color-primary);
font-size: var(--font-size-heading);
}
Expand Down Expand Up @@ -2173,6 +2202,11 @@ hr {
text-align: center;
}

.confirmation-destructive-ok-btn {
background-color: var(--button-destructive-bg-color);
color: var(--button-destructive-text-color);
}

.delete-btn {
background-color: var(--button-destructive-bg-color);
block-size: 32px;
Expand Down Expand Up @@ -2303,7 +2337,8 @@ input {
font-weight: bolder;
}

.delete-warning {
.delete-warning,
.clear-container-storage-warning {
padding-block-end: 8px;
padding-block-start: 8px;
padding-inline-end: 0;
Expand All @@ -2314,7 +2349,8 @@ input {
* rules grouped together at the beginning of the file
*/
/* stylelint-disable no-descending-specificity */
.trash-button {
.trash-button,
.reset-button {
display: inline-block;
block-size: 20px;
inline-size: 20px;
Expand All @@ -2323,11 +2359,21 @@ input {
text-align: center;
}

tr > td > .trash-button {
.reset-button {
margin-inline-end: 12px;
}

.tooltip-wrapper:hover .site-settings-tooltip {
display: block;
}

tr > td > .trash-button,
tr > td > .reset-button {
display: none;
}

tr:hover > td > .trash-button {
tr:hover > td > .trash-button,
tr:hover > td > .reset-button {
display: block;
}

Expand Down
10 changes: 10 additions & 0 deletions src/js/background/assignManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
}
const site = siteConfigs[urlKey];
// In hindsight we should have stored this
// TODO file a follow up to clean the storage onLoad

Check warning on line 122 in src/js/background/assignManager.js

View workflow job for this annotation

GitHub Actions / Run tests

Unexpected 'todo' comment: 'TODO file a follow up to clean the...'
site.hostname = urlKey.replace(/^siteContainerMap@@_/, "");
sites[urlKey] = site;
}
Expand Down Expand Up @@ -571,6 +571,16 @@
return true;
},

async _resetCookiesForSite(hostname, cookieStoreId) {
const hostNameTruncated = hostname.replace(/^www\./, ""); // Remove "www." from the hostname
await browser.browsingData.removeCookies({
cookieStoreId: cookieStoreId,
hostnames: [hostNameTruncated] // This does not remove cookies from associated domains. To remove all cookies, we have a container storage removal option.
});

return true;
},

async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
let actionName;
// https://github.com/mozilla/testpilot-containers/issues/626
Expand Down
13 changes: 13 additions & 0 deletions src/js/background/backgroundLogic.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,19 @@ const backgroundLogic = {
return extensionInfo;
},

// Remove container data (cookies, localStorage and cache)
async deleteContainerDataOnly(userContextId) {
await browser.browsingData.removeCookies({
cookieStoreId: this.cookieStoreId(userContextId)
});

await browser.browsingData.removeLocalStorage({
cookieStoreId: this.cookieStoreId(userContextId)
});

rafeerahman marked this conversation as resolved.
Show resolved Hide resolved
return {done: true, userContextId};
},

getUserContextIdFromCookieStoreId(cookieStoreId) {
if (!cookieStoreId) {
return false;
Expand Down
6 changes: 6 additions & 0 deletions src/js/background/messageHandler.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
case "deleteContainer":
response = backgroundLogic.deleteContainer(m.message.userContextId);
break;
case "deleteContainerDataOnly":
response = backgroundLogic.deleteContainerDataOnly(m.message.userContextId);
break;
case "createOrUpdateContainer":
response = backgroundLogic.createOrUpdateContainer(m.message);
break;
Expand All @@ -45,6 +48,9 @@
// m.url is the assignment to be removed/added
response = assignManager._setOrRemoveAssignment(m.tabId, m.url, m.userContextId, m.value);
break;
case "resetCookiesForSite":
response = assignManager._resetCookiesForSite(m.pageUrl, m.cookieStoreId);
break;
case "sortTabs":
backgroundLogic.sortTabs();
break;
Expand All @@ -58,7 +64,7 @@
});
break;
case "checkIncompatibleAddons":
// TODO

Check warning on line 67 in src/js/background/messageHandler.js

View workflow job for this annotation

GitHub Actions / Run tests

Unexpected 'todo' comment: 'TODO'
break;
case "moveTabsToWindow":
response = backgroundLogic.moveTabsToWindow({
Expand Down
82 changes: 81 additions & 1 deletion src/js/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
const P_CONTAINER_DELETE = "containerDelete";
const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
const P_CLEAR_CONTAINER_STORAGE = "clearContainerStorage";

const P_MOZILLA_VPN_SERVER_LIST = "moz-vpn-server-list";
const P_ADVANCED_PROXY_SETTINGS = "advanced-proxy-settings-panel";
Expand Down Expand Up @@ -122,6 +123,19 @@

},

notify(i18nOpts) {
rafeerahman marked this conversation as resolved.
Show resolved Hide resolved
const notificationCards = document.querySelectorAll(".popup-notification-card");
const text = browser.i18n.getMessage(i18nOpts.messageId, i18nOpts.placeholders);
notificationCards.forEach(notificationCard => {
notificationCard.textContent = text;
notificationCard.classList.add("is-shown");

setTimeout(() => {
notificationCard.classList.remove("is-shown");
}, 2000);
});
},

async showAchievementOrContainersListPanel() {
// Do we need to show an achievement panel?
let showAchievements = false;
Expand Down Expand Up @@ -823,7 +837,7 @@

td.innerHTML = Utils.escaped`
<div data-moz-proxy-warning="" class="menu-item-name">
<div class="menu-icon">

Check warning on line 840 in src/js/popup.js

View workflow job for this annotation

GitHub Actions / Run tests

Unexpected 'todo' comment: 'TODO get UX and content decision on how...'

<div class="usercontext-icon"
data-identity-icon="${identity.icon}"
Expand Down Expand Up @@ -966,6 +980,7 @@
Utils.alwaysOpenInContainer(identity);
window.close();
});

// Show or not the has-tabs section.
for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
Expand All @@ -989,6 +1004,13 @@
Utils.addEnterHandler(manageContainer, async () => {
Logic.showPanel(P_CONTAINER_EDIT, identity);
});
const clearContainerStorageButton = document.getElementById("clear-container-storage-info");
Utils.addEnterHandler(clearContainerStorageButton, async () => {
const granted = await browser.permissions.request({ permissions: ["browsingData"] });
if (granted) {
Logic.showPanel(P_CLEAR_CONTAINER_STORAGE, identity);
}
});
return this.buildOpenTabTable(tabs);
},

Expand Down Expand Up @@ -1450,11 +1472,14 @@
/* 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}/favicon.ico`;
const resetSiteCookiesInfo = browser.i18n.getMessage("clearSiteCookiesTooltipInfo");
const deleteSiteInfo = browser.i18n.getMessage("deleteSiteTooltipInfo");
trElement.innerHTML = Utils.escaped`
<td>
<div class="favicon"></div>
<span title="${site.hostname}" class="menu-text truncate-text">${site.hostname}</span>
<img class="trash-button delete-assignment" src="/img/container-delete.svg" />
<img title="${resetSiteCookiesInfo}" class="reset-button reset-assignment" src="/img/refresh-16.svg" />
<img title="${deleteSiteInfo}" class="trash-button delete-assignment" src="/img/container-delete.svg" />
</td>`;
trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
const deleteButton = trElement.querySelector(".trash-button");
Expand All @@ -1466,6 +1491,20 @@
delete assignments[siteKey];
this.showAssignedContainers(assignments);
});
const resetButton = trElement.querySelector(".reset-button");
Utils.addEnterHandler(resetButton, async () => {
const cookieStoreId = Logic.currentCookieStoreId();
const granted = await browser.permissions.request({ permissions: ["browsingData"] });
if (!granted) {
return;
}
const result = await Utils.resetCookiesForSite(site.hostname, cookieStoreId);
if (result === true) {
Logic.notify({messageId: "cookiesClearedSuccess", placeholders: [site.hostname]});
} else {
Logic.notify({messageId: "cookiesCouldNotBeCleared", placeholders: [site.hostname]});
}
});
trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
tableElement.appendChild(trElement);
});
Expand Down Expand Up @@ -2241,6 +2280,47 @@
}
});

// P_CLEAR_CONTAINER_STORAGE: Page for confirming container storage removal.
// ----------------------------------------------------------------------------

Logic.registerPanel(P_CLEAR_CONTAINER_STORAGE, {
panelSelector: "#clear-container-storage-panel",

// This method is called when the object is registered.
initialize() {

Utils.addEnterHandler(document.querySelector("#clear-container-storage-cancel-link"), () => {
const identity = Logic.currentIdentity();
Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
});
Utils.addEnterHandler(document.querySelector("#close-clear-container-storage-panel"), () => {
const identity = Logic.currentIdentity();
Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
});
Utils.addEnterHandler(document.querySelector("#clear-container-storage-ok-link"), async () => {
const identity = Logic.currentIdentity();
const userContextId = Utils.userContextId(identity.cookieStoreId);
const result = await browser.runtime.sendMessage({
method: "deleteContainerDataOnly",
message: { userContextId }
});
if (result.done === true) {
Logic.notify({messageId: "storageWasClearedConfirmation", placeholders: [identity.name]});
}
Logic.showPanel(P_CONTAINER_INFO, identity, false, false);
});
},

// This method is called when the panel is shown.
prepare() {
const identity = Logic.currentIdentity();

// Populating the panel: name, icon, and warning message
document.getElementById("container-clear-storage-title").textContent = identity.name;
return Promise.resolve(null);
},
});

// P_CONTAINER_DELETE: Delete a container.
// ----------------------------------------------------------------------------

Expand Down
8 changes: 8 additions & 0 deletions src/js/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
// eslint-disable-next-line
const CONTAINER_ORDER_STORAGE_KEY = "container-order";

// TODO use export here instead of globals

Check warning on line 8 in src/js/utils.js

View workflow job for this annotation

GitHub Actions / Run tests

Unexpected 'todo' comment: 'TODO use export here instead of globals'
const Utils = {

createFavIconElement(url) {
Expand Down Expand Up @@ -138,6 +138,14 @@
});
},

resetCookiesForSite(pageUrl, cookieStoreId) {
return browser.runtime.sendMessage({
method: "resetCookiesForSite",
pageUrl,
cookieStoreId,
});
},

async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
return await browser.runtime.sendMessage({
method: "reloadInContainer",
Expand Down
1 change: 1 addition & 0 deletions src/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
],
"optional_permissions": [
"bookmarks",
"browsingData",
"nativeMessaging",
"proxy"
],
Expand Down
Loading
Loading