rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat #303: confirmation page for clearing container storage, added destructive colors

Browse source
This commit is contained in:
Rafee 2024-08-27 15:21:27 -04:00
parent 3debe8a36f
commit 2cd38299e2
6 changed files with 85 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_locales

@ -1 +1 @@
Subproject commit f4676d69b485a41e3221468b2d4826cae240b1d7
Subproject commit 29e6ef5dfe50f69f0de356b014db6311f684f05f

27
src/css/popup.css
View file

@ -294,10 +294,12 @@ table {
border-radius: 4px;
font-size: 12px;
position: absolute;
top: 0;
left: 0;
padding: 8px;
margin: 8px;
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;
@ -1529,8 +1531,8 @@ 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,
@ -1818,12 +1820,12 @@ 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);
}
@ -2197,6 +2199,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;
@ -2327,7 +2334,7 @@ input {
font-weight: bolder;
}
.delete-warning {
.delete-warning, .clear-container-storage-warning {
padding-block-end: 8px;
padding-block-start: 8px;
padding-inline-end: 0;
@ -2349,7 +2356,7 @@ input {
}
.reset-button {
margin-right: 8px;
margin-inline-end: 12px;
}
.tooltip-wrapper:hover .site-settings-tooltip {

2
src/js/background/assignManager.js
View file

@ -575,7 +575,7 @@ window.assignManager = {
const hostNameTruncated = hostname.replace(/^www\./, ''); // Remove "www." from the hostname
await browser.browsingData.removeCookies({
cookieStoreId: cookieStoreId,
hostnames: [hostname, hostNameTruncated] // This does not remove cookies from associated domains. To remove all cookies, we have a container storage removal option.
hostnames: [hostNameTruncated] // This does not remove cookies from associated domains. To remove all cookies, we have a container storage removal option.
});
return true;

2
src/js/background/backgroundLogic.js
View file

@ -77,8 +77,6 @@ const backgroundLogic = {
// Remove container data (cookies, localStorage and cache)
async deleteContainerDataOnly(userContextId) {
await this._closeTabs(userContextId);
await browser.browsingData.removeCookies({
cookieStoreId: this.cookieStoreId(userContextId)
});

64
src/js/popup.js
View file

@ -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";
@ -979,23 +980,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
Utils.alwaysOpenInContainer(identity);
window.close();
});
const deleteData = document.querySelector("#delete-data-info-panel");
Utils.addEnterHandler(deleteData, async () => {
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]});
}
this.prepare();
});
// 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" : "";
@ -1019,6 +1004,10 @@ 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, () => {
Logic.showPanel(P_CLEAR_CONTAINER_STORAGE, identity);
});
return this.buildOpenTabTable(tabs);
},
@ -2284,6 +2273,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.
// ----------------------------------------------------------------------------

24
src/popup.html
View file

@ -247,12 +247,10 @@
</span>
</td>
</tr>
<tr class="menu-item hover-highlight keyboard-nav" id="delete-data" tabindex="0">
<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="delete-data-info-panel" data-i18n-message-id="clearContainerStorage">
Delete data
</span>
<span class="menu-text" id="clear-container-storage-info" data-i18n-message-id="clearContainerStorage"></span>
<span class="menu-arrow">
</span>
</td>
@ -425,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>