-
Notifications
You must be signed in to change notification settings - Fork 375
refactor badge.displayBrowserActionBadge to be used in messageHandler fixes #973 & refactoring pop.js to fixes #1513 #1523
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.
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
Changes from all commits
619b5f5
6a6e6d1
df11d27
2046d41
3036f99
0ce57b0
e04a7b3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,38 @@ | ||
const MAJOR_VERSIONS = ["2.3.0", "2.4.0"]; | ||
const badge = { | ||
async init() { | ||
const currentWindow = await browser.windows.getCurrent(); | ||
this.displayBrowserActionBadge(currentWindow.incognito); | ||
const showVersionIndicator = await browser.windows.getCurrent(); | ||
this.displayBrowserActionBadge(showVersionIndicator); | ||
}, | ||
|
||
disableAddon(tabId) { | ||
browser.browserAction.disable(tabId); | ||
browser.browserAction.setTitle({ tabId, title: "Containers disabled in Private Browsing Mode" }); | ||
}, | ||
|
||
async displayBrowserActionBadge() { | ||
async displayBrowserActionBadge(action) { | ||
const extensionInfo = await backgroundLogic.getExtensionInfo(); | ||
const storage = await browser.storage.local.get({browserActionBadgesClicked: []}); | ||
|
||
if (MAJOR_VERSIONS.indexOf(extensionInfo.version) > -1 && | ||
storage.browserActionBadgesClicked.indexOf(extensionInfo.version) < 0) { | ||
browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"}); | ||
browser.browserAction.setBadgeText({text: "NEW"}); | ||
function changeBadgeColorText(color, text){ | ||
browser.browserAction.setBadgeBackgroundColor({color: color}); | ||
browser.browserAction.setBadgeText({text: text}); | ||
} | ||
if(action==="showVersionIndicator") { | ||
const ActionBadgesClickedStorage = await browser.storage.local.get({browserActionBadgesClicked: []}); | ||
if (MAJOR_VERSIONS.indexOf(extensionInfo.version) > -1 && | ||
ActionBadgesClickedStorage.browserActionBadgesClicked.indexOf(extensionInfo.version) < 0) { | ||
changeBadgeColorText("rgba(0,217,0,255)", "NEW"); | ||
} | ||
} | ||
else if (action==="showAchievement") { | ||
const achievementsStorage = await browser.storage.local.get({achievements: []}); | ||
achievementsStorage.achievements.push({"name": "manyContainersOpened", "done": false}); | ||
// use set and spread to create a unique array | ||
const achievements = [...new Set(achievementsStorage.achievements)]; | ||
browser.storage.local.set({achievements}); | ||
changeBadgeColorText("rgba(0,217,0,255)", "NEW"); | ||
} | ||
} | ||
|
||
}; | ||
|
||
badge.init(); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -79,7 +79,7 @@ const Logic = { | |
async init() { | ||
// Remove browserAction "upgraded" badge when opening panel | ||
this.clearBrowserActionBadge(); | ||
|
||
// Retrieve the list of identities. | ||
const identitiesPromise = this.refreshIdentities(); | ||
|
||
|
@@ -610,7 +610,15 @@ Logic.registerPanel(P_CONTAINERS_LIST, { | |
const siteSettings = await Logic.getAssignment(currentTab); | ||
this.setupAssignmentCheckbox(siteSettings, currentTabUserContextId); | ||
const currentPage = document.getElementById("current-page"); | ||
currentPage.innerHTML = escaped`<span class="page-title truncate-text">${currentTab.title}</span>`; | ||
//using DOMParser to modify innerHTML | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jonathanKingston - is There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should I create a separate PR for the issues, I thought I could submit them both but since you are still assessing whether DOMParser is the best replacement what would you advise that I do? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This shouldn't ever be used, it's not any safer than |
||
const htmlText = escaped`<span class="page-title truncate-text">${currentTab.title}</span>`; | ||
const parser = new DOMParser(); | ||
const parsed = parser.parseFromString(htmlText, "text/html"); | ||
const tags = parsed.getElementsByTagName("body"); | ||
for (const tag of tags) { | ||
currentPage.appendChild(tag); | ||
} | ||
|
||
const favIconElement = Utils.createFavIconElement(currentTab.favIconUrl || ""); | ||
currentPage.prepend(favIconElement); | ||
|
||
|
@@ -640,14 +648,21 @@ Logic.registerPanel(P_CONTAINERS_LIST, { | |
manage.title = escaped`View ${identity.name} container`; | ||
context.setAttribute("tabindex", "0"); | ||
context.title = escaped`Create ${identity.name} tab`; | ||
context.innerHTML = escaped` | ||
const htmlText = escaped` | ||
<div class="userContext-icon-wrapper open-newtab"> | ||
<div class="usercontext-icon" | ||
data-identity-icon="${identity.icon}" | ||
data-identity-color="${identity.color}"> | ||
</div> | ||
</div> | ||
<div class="container-name truncate-text"></div>`; | ||
const parser = new DOMParser(); | ||
const parsed = parser.parseFromString(htmlText, "text/html"); | ||
const tags = parsed.getElementsByTagName("body"); | ||
for (const tag of tags) { | ||
context.appendChild(tag); | ||
} | ||
|
||
context.querySelector(".container-name").textContent = identity.name; | ||
manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />"; | ||
|
||
|
@@ -803,9 +818,16 @@ Logic.registerPanel(P_CONTAINER_INFO, { | |
const tr = document.createElement("tr"); | ||
fragment.appendChild(tr); | ||
tr.classList.add("container-info-tab-row"); | ||
tr.innerHTML = escaped` | ||
const htmlText= escaped` | ||
<td></td> | ||
<td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`; | ||
const parser = new DOMParser(); | ||
const parsed = parser.parseFromString(htmlText, "text/html"); | ||
const tags = parsed.getElementsByTagName("body"); | ||
for (const tag of tags) { | ||
tr.appendChild(tag); | ||
} | ||
|
||
tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); | ||
document.getElementById("container-info-table").appendChild(fragment); | ||
|
||
|
@@ -866,7 +888,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, { | |
const tr = document.createElement("tr"); | ||
fragment.appendChild(tr); | ||
tr.classList.add("container-panel-row"); | ||
tr.innerHTML = escaped` | ||
const htmlText = escaped` | ||
<td class="userContext-wrapper"> | ||
<div class="userContext-icon-wrapper"> | ||
<div class="usercontext-icon" | ||
|
@@ -887,6 +909,13 @@ Logic.registerPanel(P_CONTAINERS_EDIT, { | |
src="/img/container-delete.svg" | ||
/> | ||
</td>`; | ||
const parser = new DOMParser(); | ||
const parsed = parser.parseFromString(htmlText, "text/html"); | ||
const tags = parsed.getElementsByTagName("body"); | ||
for (const tag of tags) { | ||
tr.appendChild(tag); | ||
} | ||
|
||
tr.querySelector(".container-name").textContent = identity.name; | ||
tr.querySelector(".edit-container").setAttribute("title", `Edit ${identity.name} container`); | ||
tr.querySelector(".remove-container").setAttribute("title", `Remove ${identity.name} container`); | ||
|
@@ -986,7 +1015,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, { | |
/* 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`; | ||
trElement.innerHTML = escaped` | ||
const htmlText = escaped` | ||
<div class="favicon"></div> | ||
<div title="${site.hostname}" class="truncate-text hostname"> | ||
${site.hostname} | ||
|
@@ -995,6 +1024,13 @@ Logic.registerPanel(P_CONTAINER_EDIT, { | |
class="pop-button-image delete-assignment" | ||
src="/img/container-delete.svg" | ||
/>`; | ||
const parser = new DOMParser(); | ||
const parsed = parser.parseFromString(htmlText, "text/html"); | ||
const tags = parsed.getElementsByTagName("body"); | ||
for (const tag of tags) { | ||
trElement.appendChild(tag); | ||
} | ||
|
||
trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl)); | ||
const deleteButton = trElement.querySelector(".delete-assignment"); | ||
const that = this; | ||
|
@@ -1023,8 +1059,15 @@ Logic.registerPanel(P_CONTAINER_EDIT, { | |
colors.forEach((containerColor) => { | ||
const templateInstance = document.createElement("div"); | ||
templateInstance.classList.add("radio-container"); | ||
// eslint-disable-next-line no-unsanitized/property | ||
templateInstance.innerHTML = colorRadioTemplate(containerColor); | ||
// eslint-disable-next-line no-unsanitized/property | ||
const htmlText = colorRadioTemplate(containerColor); | ||
const parser = new DOMParser(); | ||
const parsed = parser.parseFromString(htmlText, "text/html"); | ||
const tags = parsed.getElementsByTagName("body"); | ||
for (const tag of tags) { | ||
templateInstance.appendChild(tag); | ||
} | ||
|
||
colorRadioFieldset.appendChild(templateInstance); | ||
}); | ||
|
||
|
@@ -1038,7 +1081,14 @@ Logic.registerPanel(P_CONTAINER_EDIT, { | |
const templateInstance = document.createElement("div"); | ||
templateInstance.classList.add("radio-container"); | ||
// eslint-disable-next-line no-unsanitized/property | ||
templateInstance.innerHTML = iconRadioTemplate(containerIcon); | ||
const htmlText= iconRadioTemplate(containerIcon); | ||
const parser = new DOMParser(); | ||
const parsed = parser.parseFromString(htmlText, "text/html"); | ||
const tags = parsed.getElementsByTagName("body"); | ||
for (const tag of tags) { | ||
templateInstance.appendChild(tag); | ||
} | ||
|
||
iconRadioFieldset.appendChild(templateInstance); | ||
}); | ||
}, | ||
|
@@ -1154,4 +1204,4 @@ window.addEventListener("resize", function () { | |
root.style.setProperty("--overflow-size", difference + "px"); | ||
root.style.setProperty("--icon-fit", "12"); | ||
} | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You need to pass the string
"showVersionIndicator"
here, and you don't need thecurrentWindow
variable anymore, because it was only used to pass theincognito
property value, which isn't needed anymore. So you can just replace these 2 lines with:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I have done this. I opened a new PR #1561 that fixes #973 this issue only (and all the changes you requested in this PR have been implemented there).
I plan to submit a new PR that addresses #1513