Skip to content

[MPP-3063] Reduce panel load time #498

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.

Sign up for GitHub

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

Merged
merged 6 commits into from
Apr 20, 2023
Merged

[MPP-3063] Reduce panel load time #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5b5ecca
Fix MPP-3063 and #495 / Reduce panel load time by storing API call an…
maxxcrawford Apr 19, 2023
ea125b9
Update method for getting masks from API to mirror rest of add-on
maxxcrawford Apr 19, 2023
b56f145
Update stats panel to use localStorage masks item
maxxcrawford Apr 19, 2023
3fcffb5
Improve code legibility by moving mask element creation to seperate f…
maxxcrawford Apr 19, 2023
7fa9c62
Remove extra save point when querying masks from the server
maxxcrawford Apr 20, 2023
dffd267
Move logic to show empty state to buildMasksList() function
maxxcrawford Apr 20, 2023
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
2 changes: 1 addition & 1 deletion src/css/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -921,7 +921,7 @@ sign-up-panel::after {
.fx-relay-menu-loading-bar {
width: 100%;
height: 5px;
position: relative;
position: absolute;
overflow: hidden;
display: none;
}
Expand Down
197 changes: 100 additions & 97 deletions src/js/popup/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,23 +342,10 @@
popup.events.generateMask(e, "random");
}, false);

// Get masks and determine what to display
const masks = await popup.utilities.getMasks(getMasksOptions);

// If no masks are created, show onboarding prompt
if (masks.length === 0) {
const noMasksCreatedPanel = document.querySelector(".fx-relay-no-masks-created");
noMasksCreatedPanel.classList.remove("is-hidden");
}

// Build initial list
// Note: If premium, buildMasksList runs `popup.panel.masks.search.init()` after completing
// If no masks are created, this will show onboarding prompt
popup.panel.masks.utilities.buildMasksList();


// Remove loading state
document.body.classList.remove("is-loading");

},
search: {
filter: (query)=> {
Expand Down Expand Up @@ -475,85 +462,14 @@
const masks = await popup.utilities.getMasks(getMasksOptions);

const maskList = document.querySelector(".fx-relay-mask-list");

// Reset mask list
maskList.textContent = "";

masks.forEach(mask => {
const maskListItem = document.createElement("li");

// Attributes used to power search filtering
maskListItem.setAttribute("data-mask-address", mask.full_address);
maskListItem.setAttribute("data-mask-description", mask.description ?? "");
maskListItem.setAttribute("data-mask-used-on", mask.used_on ?? "");
maskListItem.setAttribute("data-mask-generated", mask.generated_for ?? "");

maskListItem.classList.add("fx-relay-mask-item");

const maskListItemNewMaskCreatedLabel = document.createElement("span");
maskListItemNewMaskCreatedLabel.textContent = browser.i18n.getMessage("labelMaskCreated");
maskListItemNewMaskCreatedLabel.classList.add("fx-relay-mask-item-new-mask-created");
maskListItem.appendChild(maskListItemNewMaskCreatedLabel);

const maskListItemAddressBar = document.createElement("div");
maskListItemAddressBar.classList.add("fx-relay-mask-item-address-bar");

const maskListItemAddressWrapper = document.createElement("div");
maskListItemAddressWrapper.classList.add("fx-relay-mask-item-address-wrapper");

const maskListItemLabel = document.createElement("span");
maskListItemLabel.classList.add("fx-relay-mask-item-label");
maskListItemLabel.textContent = mask.description;

// Append Label if it exists
if (mask.description !== "") {
maskListItemAddressWrapper.appendChild(maskListItemLabel);
}

const maskListItemAddress = document.createElement("div");
maskListItemAddress.classList.add("fx-relay-mask-item-address");
maskListItemAddress.textContent = mask.full_address;
maskListItemAddressWrapper.appendChild(maskListItemAddress);

// Add Mask Address Bar Contents
maskListItemAddressBar.appendChild(maskListItemAddressWrapper);

const maskListItemAddressActions = document.createElement("div");
maskListItemAddressActions.classList.add("fx-relay-mask-item-address-actions");

const maskListItemCopyButton = document.createElement("button");
maskListItemCopyButton.classList.add("fx-relay-mask-item-address-copy");
maskListItemCopyButton.setAttribute("data-mask-address", mask.full_address);

const maskListItemCopyButtonSuccessMessage = document.createElement("span");
maskListItemCopyButtonSuccessMessage.textContent = browser.i18n.getMessage("popupCopyMaskButtonCopied");
maskListItemCopyButtonSuccessMessage.classList.add("fx-relay-mask-item-address-copy-success");
maskListItemAddressActions.appendChild(maskListItemCopyButtonSuccessMessage);

maskListItemCopyButton.addEventListener("click", (e)=> {
e.preventDefault();
navigator.clipboard.writeText(e.target.dataset.maskAddress);
maskListItemCopyButtonSuccessMessage.classList.add("is-shown");
setTimeout(() => {
maskListItemCopyButtonSuccessMessage.classList.remove("is-shown")
}, 1000);
}, false);
maskListItemAddressActions.appendChild(maskListItemCopyButton);

const maskListItemToggleButton = document.createElement("button");
maskListItemToggleButton.classList.add("fx-relay-mask-item-address-toggle");
maskListItemToggleButton.addEventListener("click", ()=> {
// TODO: Add Toggle Function
}, false);
maskListItemToggleButton.setAttribute("data-mask-id", mask.id);
maskListItemToggleButton.setAttribute("data-mask-type", mask.mask_type);
maskListItemToggleButton.setAttribute("data-mask-address", mask.full_address);

// TODO: Add toggle button back
// maskListItemAddressActions.appendChild(maskListItemToggleButton);

maskListItemAddressBar.appendChild(maskListItemAddressActions);
maskListItem.appendChild(maskListItemAddressBar);
maskList.appendChild(maskListItem);

// Generate and append each mask item to the mask list
masks.forEach( mask => {
const maskListItem = popup.panel.masks.utilities.buildMaskListItem(mask);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Context: This function was getting really big. Broke out the buildMaskListItem iteration to make it easier to read.

maskList.append(maskListItem);
});

// Display "Mask created" temporary label when a new mask is created in the panel
Expand All @@ -565,10 +481,16 @@
}, 1000);
}

// If user has no masks created, focus on random gen button
// If user has no masks created, show onboarding prompt and focus on random gen button
if (masks.length === 0) {
const noMasksCreatedPanel = document.querySelector(".fx-relay-no-masks-created");
noMasksCreatedPanel.classList.remove("is-hidden");

const generateRandomMask = document.querySelector(".js-generate-random-mask");
generateRandomMask.focus();

// Remove loading state since exiting early
document.body.classList.remove("is-loading");
return;
}

Expand All @@ -577,6 +499,86 @@
popup.panel.masks.search.init();
}

// Remove loading state
document.body.classList.remove("is-loading");
Comment on lines +502 to +503
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Context: Moved this to the end of the buildMasksList() function. Previously, we were removing the loading state too early.


},
buildMaskListItem: (mask) => {
const maskListItem = document.createElement("li");

// Attributes used to power search filtering
maskListItem.setAttribute("data-mask-address", mask.full_address);
maskListItem.setAttribute("data-mask-description", mask.description ?? "");
maskListItem.setAttribute("data-mask-used-on", mask.used_on ?? "");
maskListItem.setAttribute("data-mask-generated", mask.generated_for ?? "");

maskListItem.classList.add("fx-relay-mask-item");

const maskListItemNewMaskCreatedLabel = document.createElement("span");
maskListItemNewMaskCreatedLabel.textContent = browser.i18n.getMessage("labelMaskCreated");
maskListItemNewMaskCreatedLabel.classList.add("fx-relay-mask-item-new-mask-created");
maskListItem.append(maskListItemNewMaskCreatedLabel);

const maskListItemAddressBar = document.createElement("div");
maskListItemAddressBar.classList.add("fx-relay-mask-item-address-bar");

const maskListItemAddressWrapper = document.createElement("div");
maskListItemAddressWrapper.classList.add("fx-relay-mask-item-address-wrapper");

const maskListItemLabel = document.createElement("span");
maskListItemLabel.classList.add("fx-relay-mask-item-label");
maskListItemLabel.textContent = mask.description;

// Append Label if it exists
if (mask.description !== "") {
maskListItemAddressWrapper.append(maskListItemLabel);
}

const maskListItemAddress = document.createElement("div");
maskListItemAddress.classList.add("fx-relay-mask-item-address");
maskListItemAddress.textContent = mask.full_address;
maskListItemAddressWrapper.append(maskListItemAddress);

// Add Mask Address Bar Contents
maskListItemAddressBar.append(maskListItemAddressWrapper);

const maskListItemAddressActions = document.createElement("div");
maskListItemAddressActions.classList.add("fx-relay-mask-item-address-actions");

const maskListItemCopyButton = document.createElement("button");
maskListItemCopyButton.classList.add("fx-relay-mask-item-address-copy");
maskListItemCopyButton.setAttribute("data-mask-address", mask.full_address);

const maskListItemCopyButtonSuccessMessage = document.createElement("span");
maskListItemCopyButtonSuccessMessage.textContent = browser.i18n.getMessage("popupCopyMaskButtonCopied");
maskListItemCopyButtonSuccessMessage.classList.add("fx-relay-mask-item-address-copy-success");
maskListItemAddressActions.append(maskListItemCopyButtonSuccessMessage);

maskListItemCopyButton.addEventListener("click", (e)=> {
e.preventDefault();
navigator.clipboard.writeText(e.target.dataset.maskAddress);
maskListItemCopyButtonSuccessMessage.classList.add("is-shown");
setTimeout(() => {
maskListItemCopyButtonSuccessMessage.classList.remove("is-shown")
}, 1000);
}, false);
maskListItemAddressActions.append(maskListItemCopyButton);

const maskListItemToggleButton = document.createElement("button");
maskListItemToggleButton.classList.add("fx-relay-mask-item-address-toggle");
maskListItemToggleButton.addEventListener("click", ()=> {
// TODO: Add Toggle Function
}, false);
maskListItemToggleButton.setAttribute("data-mask-id", mask.id);
maskListItemToggleButton.setAttribute("data-mask-type", mask.mask_type);
maskListItemToggleButton.setAttribute("data-mask-address", mask.full_address);

// TODO: Add toggle button back
// maskListItemAddressActions.append(maskListItemToggleButton);
Comment on lines +576 to +577
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disregard this TODO. It is part of #473


maskListItemAddressBar.append(maskListItemAddressActions);
maskListItem.append(maskListItemAddressBar);
return maskListItem;
},
getRemainingAliases: async () => {
const masks = await popup.utilities.getMasks();
Expand Down Expand Up @@ -869,15 +871,16 @@
getMasksOptions.fetchCustomMasks = isPremiumSubdomainSet;
}

const masks = await popup.utilities.getMasks(getMasksOptions);
// Use localStorage of Masks
const { relayAddresses } = await browser.storage.local.get("relayAddresses");

// Get Global Mask Stats data
const totalAliasesUsedVal = masks.length;
const totalAliasesUsedVal = relayAddresses.length;
let totalEmailsForwardedVal = 0;
let totalEmailsBlockedVal = 0;

// Loop through all masks to calculate totals
masks.forEach((mask) => {
relayAddresses.forEach((mask) => {
totalEmailsForwardedVal += mask.num_forwarded;
totalEmailsBlockedVal += mask.num_blocked;
});
Expand All @@ -898,10 +901,10 @@
});

// Check if any data applies to the current site
if ( popup.utilities.checkIfAnyMasksWereGeneratedOnCurrentWebsite(masks,currentPageHostName) ) {
if ( popup.utilities.checkIfAnyMasksWereGeneratedOnCurrentWebsite(relayAddresses,currentPageHostName) ) {

// Some masks are used on the current site. Time to calculate!
const filteredMasks = masks.filter(
const filteredMasks = relayAddresses.filter(
(mask) =>
mask.generated_for === currentPageHostName ||
popup.utilities.hasMaskBeenUsedOnCurrentSite(
Expand Down
30 changes: 14 additions & 16 deletions src/js/relay.firefox.com/get_profile_data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,29 +257,27 @@
if (siteStorageEnabled) {
// Sync alias data from server page.
// If local storage items exist AND have label metadata stored, sync it to the server.
const serverRelayAddresses = await apiRequest(relayApiUrlRelayAddresses);
const serverDomainAddresses = isPremiumUser
? await apiRequest(relayApiUrlDomainAddresses)
: [];
const remoteCopyOfServerMasks = await browser.runtime.sendMessage({
method: "getAliasesFromServer",
options: { fetchCustomMasks: isPremiumUser },
});

// let usage: This data may be overwritten when merging the local storage dataset with the server set.
let localCopyOfServerMasks = serverRelayAddresses.concat(serverDomainAddresses);
let localCopyOfServerMasks = remoteCopyOfServerMasks;

// Check/cache local storage
const localMasks = (await browser.storage.local.get(
"relayAddresses"
)).relayAddresses;
const { relayAddresses } = await browser.storage.local.get("relayAddresses");

if (
localMasks &&
localMasks.length > 0 &&
aliasesHaveStoredMetadata(localMasks) && // Make sure there is meta data in the local dataset
relayAddresses &&
relayAddresses.length > 0 &&
aliasesHaveStoredMetadata(relayAddresses) && // Make sure there is meta data in the local dataset
!aliasesHaveStoredMetadata(localCopyOfServerMasks) // Make sure there is no meta data in the server dataset
) {
await sendMetaDataToServer(localMasks);
await sendMetaDataToServer(relayAddresses);
localCopyOfServerMasks = getAliasesWithUpdatedMetadata(
localCopyOfServerMasks,
localMasks
relayAddresses
);
}

Expand All @@ -297,14 +295,14 @@
"firefox-private-relay-addon"
).addEventListener("website", async (event) => {
if (event.detail.type === "labelUpdate") {
const existingAddresses = (await browser.storage.local.get("relayAddresses")).relayAddresses;
const { relayAddresses } = await browser.storage.local.get("relayAddresses");
const update = event.detail;
const oldAddress = existingAddresses.find(existingAddress =>
const oldAddress = relayAddresses.find(existingAddress =>
existingAddress.id === update.alias.id &&
existingAddress.address === update.alias.address &&
existingAddress.domain === update.alias.domain
);
const newAddresses = existingAddresses.filter(existingAddress => existingAddress !== oldAddress);
const newAddresses = relayAddresses.filter(existingAddress => existingAddress !== oldAddress);
newAddresses.push({
...oldAddress,
description: update.newLabel,
Expand Down