Merge pull request #2654 from mozilla/feat-#303
#303: Reset cookies in site manager
This commit is contained in:
luke crouch
GitHub
commit
a53eb64c03
9 changed files with 205 additions and 12 deletions
|
|
@ -1 +1 @@
|
|||
Subproject commit d3301069f51262e8cf493a86aa2785cf3261141e
|
||||
Subproject commit bdaa01291b7367a5e815470fd263ea36c862fe32
|
||||
|
|
@ -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,
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -577,6 +577,16 @@ window.assignManager = {
|
|||
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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
});
|
||||
|
||||
return {done: true, userContextId};
|
||||
},
|
||||
|
||||
getUserContextIdFromCookieStoreId(cookieStoreId) {
|
||||
if (!cookieStoreId) {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@ const messageHandler = {
|
|||
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;
|
||||
|
|
@ -45,6 +48,9 @@ const messageHandler = {
|
|||
// 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;
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ const P_CONTAINER_EDIT = "containerEdit";
|
|||
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";
|
||||
|
|
@ -122,6 +123,19 @@ const Logic = {
|
|||
|
||||
},
|
||||
|
||||
notify(i18nOpts) {
|
||||
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;
|
||||
|
|
@ -971,6 +985,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
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" : "";
|
||||
|
|
@ -994,6 +1009,13 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
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);
|
||||
},
|
||||
|
||||
|
|
@ -1455,11 +1477,14 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
/* 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");
|
||||
|
|
@ -1471,6 +1496,20 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
|
|||
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);
|
||||
});
|
||||
|
|
@ -2246,6 +2285,47 @@ Logic.registerPanel(P_MOZILLA_VPN_SERVER_LIST, {
|
|||
}
|
||||
});
|
||||
|
||||
// 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.
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -138,6 +138,14 @@ const Utils = {
|
|||
});
|
||||
},
|
||||
|
||||
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",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
],
|
||||
"optional_permissions": [
|
||||
"bookmarks",
|
||||
"browsingData",
|
||||
"nativeMessaging",
|
||||
"proxy"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@
|
|||
</div>
|
||||
|
||||
<div class="panel menu-panel container-panel hide" id="container-panel">
|
||||
<span class="popup-notification-card"></span>
|
||||
<h3 class="title">Firefox Multi-Account Containers</h3>
|
||||
<a href="#" class="info-icon" id="info-icon" tabindex="10">
|
||||
<img data-i18n-attribute-message-id="info" data-i18n-attribute="alt" alt="" src="/img/info.svg" / >
|
||||
|
|
@ -209,6 +210,7 @@
|
|||
|
||||
|
||||
<div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
|
||||
<span class="popup-notification-card"></span>
|
||||
<h3 class="title" id="container-info-title" data-i18n-attribute-message-id="personal"></h3>
|
||||
<button class="btn-return arrow-left controller keyboard-nav-back" id="close-container-info-panel" tabindex="0"></button>
|
||||
<hr>
|
||||
|
|
@ -245,6 +247,14 @@
|
|||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="menu-item hover-highlight keyboard-nav" id="clear-container-storage" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon clear-storage-icon" alt="" src="img/container-delete.svg" />
|
||||
<span class="menu-text" id="clear-container-storage-info" data-i18n-message-id="clearContainerStorage"></span>
|
||||
<span class="menu-arrow">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<div class="sub-header-wrapper">
|
||||
|
|
@ -267,6 +277,7 @@
|
|||
|
||||
|
||||
<div class="panel menu-panel container-picker-panel hide" id="container-picker-panel">
|
||||
<span class="popup-notification-card"></span>
|
||||
<h3 class="title" id="picker-title">
|
||||
Firefox Multi-Account Containers
|
||||
</h3>
|
||||
|
|
@ -291,6 +302,7 @@
|
|||
</div>
|
||||
|
||||
<div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
|
||||
<span class="popup-notification-card"></span>
|
||||
<h3 class="title" id="container-edit-title" data-i18n-message-id="default"></h3>
|
||||
<button class="btn-return arrow-left controller" id="close-container-edit-panel"></button>
|
||||
<hr>
|
||||
|
|
@ -381,6 +393,7 @@
|
|||
</div>
|
||||
|
||||
<div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
|
||||
<span class="popup-notification-card"></span>
|
||||
<h3 class="title" id="edit-assignments-title" data-i18n-message-id="default"></h3>
|
||||
<button class="btn-return arrow-left controller" id="close-container-assignment-panel"></button>
|
||||
<hr>
|
||||
|
|
@ -410,7 +423,23 @@
|
|||
</div>
|
||||
<div class="panel-footer">
|
||||
<a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="delete-container-cancel-link"></a>
|
||||
<a href="#" class="button expanded primary footer-button" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
|
||||
<a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="delete-container-ok-link"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hide panel clear-container-storage-panel" id="clear-container-storage-panel">
|
||||
<h3 class="title" id="container-clear-storage-title" data-i18n-message-id="default">
|
||||
</h3>
|
||||
|
||||
<button class="btn-return arrow-left controller" id="close-clear-container-storage-panel"></button>
|
||||
<hr>
|
||||
<div class="panel-content clear-container-storage-confirm">
|
||||
<h4 class="clear-container-storage-confirm-title" data-i18n-message-id="clearContainerStoragePanelTitle"></h4>
|
||||
<p class="clear-container-storage-warning" data-i18n-message-id="clearContainerStorageConfirmation"></p>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="clear-container-storage-cancel-link"></a>
|
||||
<a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="clear-container-storage-ok-link"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue