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

Recording - fix adding duplicate event listeners when re-showing main container list panel in popup.

Browse source
This commit is contained in:
Francis McKenzie 2021-02-15 16:54:42 +01:00
parent f15d1984a9
commit 914b1a1c19
1 changed files with 64 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
src/js/popup.js
View file

@ -103,7 +103,7 @@ const Logic = {
if (!Env.hasFullBrowserAPI) { if (!Env.hasFullBrowserAPI) {
await this.injectAPI(); await this.injectAPI();
} }
// API methods are ready, can continue with init // API methods are ready, can continue with init
const initializingPanels = this.initializePanels(); const initializingPanels = this.initializePanels();
@ -118,7 +118,7 @@ const Logic = {
// Remove browserAction "upgraded" badge when opening panel // Remove browserAction "upgraded" badge when opening panel
const clearingBadge = this.clearBrowserActionBadge(); const clearingBadge = this.clearBrowserActionBadge();
// Routing to the correct panel. // Routing to the correct panel.
// If localStorage is disabled, we don't show the onboarding. // If localStorage is disabled, we don't show the onboarding.
const onboardingData = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]); const onboardingData = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
@ -151,7 +151,7 @@ const Logic = {
showingPanel = this.showPanel(P_ONBOARDING_1); showingPanel = this.showPanel(P_ONBOARDING_1);
break; break;
} }
return Promise.all([initializingPanels, clearingBadge, settingOnboardingStage, showingPanel]); return Promise.all([initializingPanels, clearingBadge, settingOnboardingStage, showingPanel]);
}, },
@ -210,7 +210,7 @@ const Logic = {
async clearBrowserActionBadge() { async clearBrowserActionBadge() {
if (!Env.isBrowserActionPopup) { return; } if (!Env.isBrowserActionPopup) { return; }
const extensionInfo = await getExtensionInfo(); const extensionInfo = await getExtensionInfo();
const storage = await browser.storage.local.get({ browserActionBadgesClicked: [] }); const storage = await browser.storage.local.get({ browserActionBadgesClicked: [] });
browser.browserAction.setBadgeBackgroundColor({ color: null }); browser.browserAction.setBadgeBackgroundColor({ color: null });
@ -365,11 +365,11 @@ const Logic = {
registerPanel(panelName, panelObject) { registerPanel(panelName, panelObject) {
this._panels[panelName] = panelObject; this._panels[panelName] = panelObject;
}, },
initializePanels() { initializePanels() {
return Promise.all(Object.values(this._panels).map(async (panel) => { return panel.initialize(); })); return Promise.all(Object.values(this._panels).map(async (panel) => { return panel.initialize(); }));
}, },
getPanel(panelName) { getPanel(panelName) {
return this._panels[panelName]; return this._panels[panelName];
}, },
@ -384,7 +384,7 @@ const Logic = {
} }
return this._currentIdentity; return this._currentIdentity;
}, },
setCurrentIdentity(identity) { setCurrentIdentity(identity) {
this._currentIdentity = identity; this._currentIdentity = identity;
}, },
@ -443,7 +443,7 @@ const Logic = {
return recordingTabId === tab.id; return recordingTabId === tab.id;
} catch (e) { console.error("Failed to determine if recording: " + e.message); return false; } } catch (e) { console.error("Failed to determine if recording: " + e.message); return false; }
}, },
async setRecordingTab(tab) { async setRecordingTab(tab) {
const tabId = tab ? tab.id : browser.tabs.TAB_ID_NONE; const tabId = tab ? tab.id : browser.tabs.TAB_ID_NONE;
return browser.runtime.sendMessage({ return browser.runtime.sendMessage({
@ -451,7 +451,7 @@ const Logic = {
tabId tabId
}); });
}, },
generateIdentityName() { generateIdentityName() {
const defaultName = "Container #"; const defaultName = "Container #";
const ids = []; const ids = [];
@ -622,7 +622,37 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
window.close(); window.close();
} }
}); });
this.getAssignmentCheckbox().addEventListener("change", async () => {
const currentTab = await Logic.currentTab();
if (!currentTab || !currentTab.cookieStoreId) { return; }
const currentTabUserContextId = Logic.userContextId(currentTab.cookieStoreId);
Logic.setOrRemoveAssignment(currentTab.id, currentTab.url, currentTabUserContextId, !this.getAssignmentCheckbox().checked);
});
Logic.addEnterHandler(this.getRecordButton(), async () => {
const currentTab = await Logic.currentTab();
if (!currentTab || !currentTab.cookieStoreId) { return; }
if (!this.isRecordingEnabled()) { return; }
const newRecordingTab = this.isRecordingActive() ? null : currentTab;
let showingPanel;
try {
// Show new recording started/stopped status
this.setRecordingActiveAndEnabled(!!newRecordingTab, true);
// Show recording panel
if (newRecordingTab) { showingPanel = Logic.showPanel(P_CONTAINER_RECORD); }
// Start/stop recording
await Logic.setRecordingTab(newRecordingTab);
} catch (e) {
// Failed - revert recording started/stopped status
this.setRecordingActiveAndEnabled(!newRecordingTab, true);
try { await showingPanel; } catch (e) { /* Ignore show error, as we're immediately going to change panel */ }
Logic.showPanel(P_CONTAINERS_LIST);
throw new Error("Failed to " + (newRecordingTab ? "start" : "stop") + " recording: " + e.message);
}
});
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
const selectables = [...document.querySelectorAll("[tabindex='0'], [tabindex='-1']")]; const selectables = [...document.querySelectorAll("[tabindex='0'], [tabindex='-1']")];
const element = document.activeElement; const element = document.activeElement;
@ -701,8 +731,12 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
browser.tabs.onUpdated.removeListener(this.tabUpdateHandler); browser.tabs.onUpdated.removeListener(this.tabUpdateHandler);
}, },
getAssignmentCheckbox() {
return document.getElementById("container-page-assigned");
},
setupAssignmentCheckbox(siteSettings, currentUserContextId) { setupAssignmentCheckbox(siteSettings, currentUserContextId) {
const assignmentCheckboxElement = document.getElementById("container-page-assigned"); const assignmentCheckboxElement = this.getAssignmentCheckbox();
let checked = false; let checked = false;
if (siteSettings && Number(siteSettings.userContextId) === currentUserContextId) { if (siteSettings && Number(siteSettings.userContextId) === currentUserContextId) {
checked = true; checked = true;
@ -714,34 +748,34 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
} }
assignmentCheckboxElement.disabled = disabled; assignmentCheckboxElement.disabled = disabled;
}, },
getRecordButton() {
return document.getElementById("record-link");
},
isRecordingEnabled() { isRecordingEnabled() {
const recordLinkElement = document.getElementById("record-link"); return !this.getRecordButton().classList.contains("disabled");
if (recordLinkElement.classList.contains("disabled")) { return false; }
return true;
}, },
isRecordingActive() { isRecordingActive() {
const recordLinkElement = document.getElementById("record-link"); return this.getRecordButton().classList.contains("active");
if (recordLinkElement.classList.contains("active")) { return true; }
return false;
}, },
setRecordingActiveAndEnabled(isActive, isEnabled) { setRecordingActiveAndEnabled(isActive, isEnabled) {
const recordLinkElement = document.getElementById("record-link"); const recordButton = this.getRecordButton();
const recordIconElement = recordLinkElement.querySelector(".icon"); const recordButtonIcon = recordButton.querySelector(".icon");
if (!isEnabled) { if (!isEnabled) {
recordIconElement.src = CONTAINER_RECORD_DISABLED_SRC; recordButtonIcon.src = CONTAINER_RECORD_DISABLED_SRC;
recordLinkElement.classList.remove("active"); recordButton.classList.remove("active");
recordLinkElement.classList.add("disabled"); recordButton.classList.add("disabled");
} else { } else {
recordIconElement.src = CONTAINER_RECORD_ENABLED_SRC; recordButtonIcon.src = CONTAINER_RECORD_ENABLED_SRC;
recordLinkElement.classList.remove("disabled"); recordButton.classList.remove("disabled");
if (isActive) { if (isActive) {
recordLinkElement.classList.add("active"); recordButton.classList.add("active");
} else { } else {
recordLinkElement.classList.remove("active"); recordButton.classList.remove("active");
} }
} }
}, },
@ -749,34 +783,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
async prepareCurrentTabHeader() { async prepareCurrentTabHeader() {
const currentTab = await Logic.currentTab(); const currentTab = await Logic.currentTab();
const currentTabElement = document.getElementById("current-tab"); const currentTabElement = document.getElementById("current-tab");
const assignmentCheckboxElement = document.getElementById("container-page-assigned");
const recordLinkElement = document.getElementById("record-link");
const currentTabUserContextId = Logic.userContextId(currentTab.cookieStoreId); const currentTabUserContextId = Logic.userContextId(currentTab.cookieStoreId);
assignmentCheckboxElement.addEventListener("change", () => {
Logic.setOrRemoveAssignment(currentTab.id, currentTab.url, currentTabUserContextId, !assignmentCheckboxElement.checked);
});
Logic.addEnterHandler(recordLinkElement, async () => {
const currentTab = await Logic.currentTab();
if (!currentTab) { return; }
if (!this.isRecordingEnabled()) { return; }
const newRecordingTab = this.isRecordingActive() ? null : currentTab;
let showingPanel;
try {
// Show new recording started/stopped status
this.setRecordingActiveAndEnabled(!!newRecordingTab, true);
// Show recording panel
if (newRecordingTab) { showingPanel = Logic.showPanel(P_CONTAINER_RECORD); }
// Start/stop recording
await Logic.setRecordingTab(newRecordingTab);
} catch (e) {
// Failed - revert recording started/stopped status
this.setRecordingActiveAndEnabled(!newRecordingTab, true);
try { await showingPanel; } catch (e) { /* Ignore show error, as we're immediately going to change panel */ }
Logic.showPanel(P_CONTAINERS_LIST);
throw new Error("Failed to " + (newRecordingTab ? "start" : "stop") + " recording: " + e.message);
}
});
currentTabElement.hidden = !currentTab; currentTabElement.hidden = !currentTab;
this.setupAssignmentCheckbox(false, currentTabUserContextId); this.setupAssignmentCheckbox(false, currentTabUserContextId);
this.setRecordingActiveAndEnabled(false, false); this.setRecordingActiveAndEnabled(false, false);