Skip to content

Commit

Permalink
feat #303: confirmation page for clearing container storage, added de…
Browse files Browse the repository at this point in the history
…structive colors
  • Loading branch information
rafeerahman committed Aug 27, 2024
1 parent 3debe8a commit d275a1f
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 33 deletions.
27 changes: 17 additions & 10 deletions src/css/popup.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -2349,7 +2356,7 @@ input {
}

.reset-button {
margin-right: 8px;
margin-inline-end: 12px;
}

.tooltip-wrapper:hover .site-settings-tooltip {
Expand Down
64 changes: 47 additions & 17 deletions src/js/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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" : "";
Expand All @@ -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);
},

Expand Down Expand Up @@ -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.
// ----------------------------------------------------------------------------

Expand Down
24 changes: 19 additions & 5 deletions src/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -247,12 +247,10 @@ <h3 class="title" id="container-info-title" data-i18n-attribute-message-id="pers
</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>
Expand Down Expand Up @@ -425,7 +423,23 @@ <h4 class="delete-container-confirm-title" data-i18n-message-id="removeThisConta
</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>

Expand Down

0 comments on commit d275a1f

Please sign in to comment.