Microsoft has acquired GitHub. Decentraleyes has left GitHub. Welcome to its new home!

To participate, please register, or sign in with an existing GitLab.com, Bitbucket, or GitHub account.

Past contributions on GitHub? Be sure to reclaim your Comments, Issues, and Pull Requests.

Add domain whitelist toggle to browser action popup

parent ff4bbeaf
......@@ -13,10 +13,20 @@
'use strict';
/**
* Main
*/
var main = {};
/**
* Initializations
*/
chrome.runtime.getPlatformInfo(function (information) {
main.operatingSystem = information.os;
});
if (typeof chrome.browserAction.setBadgeBackgroundColor !== 'function') {
chrome.browserAction.setBadgeBackgroundColor = function () {};
......
......@@ -78,6 +78,28 @@ stateManager.registerInjection = function (tabIdentifier, injection) {
}
};
stateManager.addDomainToWhitelist = function (domain) {
return new Promise((resolve) => {
let whitelistedDomains = requestAnalyzer.whitelistedDomains;
whitelistedDomains[domain] = true;
chrome.storage.local.set({whitelistedDomains}, resolve);
});
};
stateManager.deleteDomainFromWhitelist = function (domain) {
return new Promise((resolve) => {
let whitelistedDomains = requestAnalyzer.whitelistedDomains;
delete whitelistedDomains[domain];
chrome.storage.local.set({whitelistedDomains}, resolve);
});
};
/**
* Private Methods
*/
......
!function(){"use strict";function c(c){if(null===c||void 0===c)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(c)}function l(c){"function"==typeof V.hooks.addPack?V.hooks.addPack(c,h):V.packs[c]=a({},V.packs[c]||{},h)}var h={cog:[512,512,[],"f013","M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"],"power-off":[512,512,[],"f011","M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z"],"shield-alt":[512,512,[],"f3ca","M496 128c0 221.282-135.934 344.645-221.539 380.308a48 48 0 0 1-36.923 0C130.495 463.713 16 326.487 16 128a48 48 0 0 1 29.539-44.308l192-80a48 48 0 0 1 36.923 0l192 80A48 48 0 0 1 496 128zM256 446.313l.066.034c93.735-46.689 172.497-156.308 175.817-307.729L256 65.333v380.98z"]},v=Object.getOwnPropertySymbols,z=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable,a=function(){try{if(!Object.assign)return!1;var c=new String("abc");if(c[5]="de","5"===Object.getOwnPropertyNames(c)[0])return!1;for(var l={},h=0;h<10;h++)l["_"+String.fromCharCode(h)]=h;if("0123456789"!==Object.getOwnPropertyNames(l).map(function(c){return l[c]}).join(""))return!1;var v={};return"abcdefghijklmnopqrst".split("").forEach(function(c){v[c]=c}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},v)).join("")}catch(c){return!1}}()?Object.assign:function(l,h){for(var a,M,V=c(l),f=1;f<arguments.length;f++){a=Object(arguments[f]);for(var e in a)z.call(a,e)&&(V[e]=a[e]);if(v){M=v(a);for(var m=0;m<M.length;m++)H.call(a,M[m])&&(V[M[m]]=a[M[m]])}}return V},M=a({},{namespace:"___FONT_AWESOME___",familyPrefix:"fa",replacementClass:"svg-inline--fa",autoReplaceSvg:!0,autoA11y:!0,observeMutations:!0,keepOriginalSource:!0,measurePerformance:!1},window.FontAwesomeConfig||{});M.autoReplaceSvg||(M.observeMutations=!1),window[M.namespace]||(window[M.namespace]={}),window[M.namespace].packs||(window[M.namespace].packs={}),window[M.namespace].hooks||(window[M.namespace].hooks={}),window[M.namespace].shims||(window[M.namespace].shims=[]);var V=window[M.namespace];l("fas"),l("fa")}();
!function(){"use strict";function c(c){if(null===c||void 0===c)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(c)}function l(c){"function"==typeof V.hooks.addPack?V.hooks.addPack(c,h):V.packs[c]=a({},V.packs[c]||{},h)}var h={cog:[512,512,[],"f013","M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"],"power-off":[512,512,[],"f011","M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z"],globe:[512,512,[],"f0ac","M364.215 192h131.43c5.439 20.419 8.354 41.868 8.354 64s-2.915 43.581-8.354 64h-131.43c5.154-43.049 4.939-86.746 0-128zM185.214 352c10.678 53.68 33.173 112.514 70.125 151.992.221.001.44.008.661.008s.44-.008.661-.008c37.012-39.543 59.467-98.414 70.125-151.992H185.214zm174.13-192h125.385C452.802 84.024 384.128 27.305 300.95 12.075c30.238 43.12 48.821 96.332 58.394 147.925zm-27.35 32H180.006c-5.339 41.914-5.345 86.037 0 128h151.989c5.339-41.915 5.345-86.037-.001-128zM152.656 352H27.271c31.926 75.976 100.6 132.695 183.778 147.925-30.246-43.136-48.823-96.35-58.393-147.925zm206.688 0c-9.575 51.605-28.163 104.814-58.394 147.925 83.178-15.23 151.852-71.949 183.778-147.925H359.344zm-32.558-192c-10.678-53.68-33.174-112.514-70.125-151.992-.221 0-.44-.008-.661-.008s-.44.008-.661.008C218.327 47.551 195.872 106.422 185.214 160h141.572zM16.355 192C10.915 212.419 8 233.868 8 256s2.915 43.581 8.355 64h131.43c-4.939-41.254-5.154-84.951 0-128H16.355zm136.301-32c9.575-51.602 28.161-104.81 58.394-147.925C127.872 27.305 59.198 84.024 27.271 160h125.385z"],"shield-alt":[512,512,[],"f3ca","M496 128c0 221.282-135.934 344.645-221.539 380.308a48 48 0 0 1-36.923 0C130.495 463.713 16 326.487 16 128a48 48 0 0 1 29.539-44.308l192-80a48 48 0 0 1 36.923 0l192 80A48 48 0 0 1 496 128zM256 446.313l.066.034c93.735-46.689 172.497-156.308 175.817-307.729L256 65.333v380.98z"]},v=Object.getOwnPropertySymbols,z=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable,a=function(){try{if(!Object.assign)return!1;var c=new String("abc");if(c[5]="de","5"===Object.getOwnPropertyNames(c)[0])return!1;for(var l={},h=0;h<10;h++)l["_"+String.fromCharCode(h)]=h;if("0123456789"!==Object.getOwnPropertyNames(l).map(function(c){return l[c]}).join(""))return!1;var v={};return"abcdefghijklmnopqrst".split("").forEach(function(c){v[c]=c}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},v)).join("")}catch(c){return!1}}()?Object.assign:function(l,h){for(var a,M,V=c(l),f=1;f<arguments.length;f++){a=Object(arguments[f]);for(var e in a)z.call(a,e)&&(V[e]=a[e]);if(v){M=v(a);for(var m=0;m<M.length;m++)H.call(a,M[m])&&(V[M[m]]=a[M[m]])}}return V},M=a({},{namespace:"___FONT_AWESOME___",familyPrefix:"fa",replacementClass:"svg-inline--fa",autoReplaceSvg:!0,autoA11y:!0,observeMutations:!0,keepOriginalSource:!0,measurePerformance:!1},window.FontAwesomeConfig||{});M.autoReplaceSvg||(M.observeMutations=!1),window[M.namespace]||(window[M.namespace]={}),window[M.namespace].packs||(window[M.namespace].packs={}),window[M.namespace].hooks||(window[M.namespace].hooks={}),window[M.namespace].shims||(window[M.namespace].shims=[]);var V=window[M.namespace];l("fas"),l("fa")}();
......@@ -6,49 +6,78 @@ body {
background-color: #f0f0f0;
color: #555;
cursor: default;
font-family: Noto Sans, Arial, sans-serif !important;
font-family: 'Noto Sans', Arial, sans-serif !important;
font-size: 75%;
margin: 0;
margin: 0 auto;
overflow: hidden;
padding: 0;
user-select: none;
width: 350px;
width: 348px;
}
header {
align-items: center;
border-bottom: solid lightgray 1px;
border-bottom: solid #d3d3d3 1px;
display: flex;
padding: 4px 0;
position: relative;
}
.button-panel {
.panel {
overflow: hidden;
padding: 6px;
text-align: right;
padding: 10px 8px;
}
.popup-content {
padding: 0;
.panel:not(:last-child) {
border-bottom: 1px solid #d8d8d8;
}
.subpanel {
overflow: hidden;
}
footer {
overflow: hidden;
padding: 8px;
}
/**
* Hyperlinks
*/
* Fonts
*/
.text-link {
color: #bdbdbd;
cursor: pointer;
float: left;
font-size: 13px;
padding-left: 4px;
padding-top: 5px;
text-decoration: none;
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/noto-sans.woff2') format('woff2');
}
.text-link:hover {
color: #777;
text-decoration: underline;
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 600;
src: url('fonts/noto-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400;
src: url('fonts/noto-sans-italic.woff2') format('woff2');
}
/**
* Headings
*/
.heading {
font-size: 14px;
font-weight: 600;
padding-left: 0;
}
.subheading {
font-weight: 600;
margin-bottom: 2px;
text-align: center;
}
/**
......@@ -56,14 +85,12 @@ header {
*/
.list {
border-bottom: 1px solid #d8d8d8;
margin: 0;
padding: 10px 8px;
padding: 8px 0 0;
}
.list-item {
background-color: #f7f7f7;
border-bottom: none !important;
border: 1px solid #e4e4e4;
color: #737373;
font-weight: 600;
......@@ -72,10 +99,9 @@ header {
padding: 10px;
}
.sub-list {
.sublist {
align-items: center;
background-color: #ececec;
border-bottom: none !important;
border: 1px solid #e0e0e0;
box-shadow: inset 0px 2px 10px #e2e2e2;
list-style: none;
......@@ -83,81 +109,87 @@ header {
padding: 0;
}
.sub-list:last-child {
border-bottom: 1px solid #e0e0e0 !important;
.sublist:last-child {
border-bottom: 1px solid #e0e0e0;
}
.sub-list-item {
.sublist-item {
border-bottom: 1px solid #e0e0e0;
color: #737373;
font-weight: bold;
font-weight: 600;
padding: 10px;
}
.sub-list-item:last-child {
.sublist-item:last-child {
border-bottom: none;
}
/**
* Icons
*/
.icon {
margin-right: 6px;
}
.icon-logo {
height: 26px;
padding: 14px 6px 14px 8px;
width: 26px;
}
/**
* Buttons
*/
.btn-sm {
.button {
-moz-user-select: none;
background-color: #f5f5f5;
border-radius: 2px;
border: 1px solid #cfcfcf;
color: #5f5f5f;
cursor: pointer;
float: right;
font-size: 12px;
padding: 5px 22px;
user-select: none;
}
.btn-sm:hover {
.button:hover {
background-color: #fff;
}
/**
* Titles
*/
h1 {
font-size: 36px;
margin: 0;
padding-top: 14px;
text-align: center;
}
.extension-title {
font-size: 14px;
font-weight: bold;
padding-left: 0;
.button:active {
background-color: #dedede;
}
.description {
color: #777;
font-style: italic;
margin: 0 6px 18px;
text-align: center;
.button-toggle {
border-color: #d8d8d8;
color: #bbb;
}
.title {
font-weight: bold;
margin-bottom: 2px;
text-align: center;
.button-toggle.active {
border-color: #cfcfcf;
color: #339a6f;
}
/**
* Icons
*/
* Links
*/
.btn-icon {
color: #5f5f5f;
.link-text {
color: #bdbdbd;
cursor: pointer;
float: left;
font-size: 13px;
padding-left: 4px;
padding-top: 5px;
text-decoration: none;
}
.extension-icon {
height: 26px;
padding: 10px 6px 10px 8px;
width: 26px;
.link-text:hover {
color: #777;
text-decoration: underline;
}
/**
......@@ -170,18 +202,45 @@ h1 {
color: #fff;
font-family: monospace;
font-size: 13px;
font-weight: bold;
font-weight: 600;
margin-right: 8px;
padding: 3px 15px;
}
.counter {
font-size: 36px;
font-weight: 600;
margin-top: 4px;
text-align: center;
}
.description {
color: #777;
font-style: italic;
margin: 0 6px;
text-align: center;
}
.hidden {
display: none;
}
.label-beta {
color: #6aac91;
font-size: 9px;
}
.label-domain {
color: #bbb;
display: flex;
font-style: italic;
overflow: hidden;
padding: 6px 0 0 4px;
white-space: nowrap;
}
.side-note {
color: #a5a5a5;
font-style: italic;
font-weight: normal;
font-weight: 400;
}
......@@ -21,28 +21,52 @@
<script src="popup.js"></script>
<header>
<img class="extension-icon" src="icon.svg" alt="Extension Icon">
<div class="extension-title">Decentraleyes <sup class="label-beta">BETA</sup></div>
<img class="icon-logo" src="icon.svg" alt="Extension Icon">
<div class="heading">Decentraleyes <sup class="label-beta">BETA</sup></div>
</header>
<section id="popup-content" class="popup-content">
<section class="content">
<h1 id="injection-counter">0</h1>
<div id="website-context" class="panel hidden">
<div class="title" data-i18n-content="amountInjectedTitle"></div>
<div class="description" data-i18n-content="amountInjectedDescription"></div>
<div class="subpanel">
</section>
<div id="protection-toggle-button" class="button button-toggle active">
<i class="fas fa-power-off" data-fa-transform="grow-2"></i>
</div>
<div class="label-domain">
<i class="icon fas fa-globe fa-lg" data-fa-transform="down-1"></i>
<span id="domain-indicator"></span>
</div>
</div>
</div>
<section class="button-panel">
<div id="extension-context" class="panel">
<span id="testing-utility-link" class="text-link">decentraleyes.org/test</span>
<div id="injection-counter" class="counter">0</div>
<div class="subheading" data-i18n-content="amountInjectedTitle"></div>
<div class="description" data-i18n-content="amountInjectedDescription"></div>
<div id="options-button" class="btn-sm" title="Options">
<i class="btn-icon fas fa-cog" data-fa-transform="grow-2"></i>
</div>
</section>
<footer>
<span id="testing-utility-link" class="link-text">decentraleyes.org/test</span>
<div id="options-button" class="button">
<i class="fas fa-cog" data-fa-transform="grow-2"></i>
</div>
</footer>
</body>
</html>
......@@ -13,13 +13,30 @@
'use strict';
/**
* Popup
*/
var popup = {};
/**
* Constants
*/
const WEB_DOMAIN_EXPRESSION = /:\/\/(.[^\/]+)(.*)/;
const WEB_PREFIX_VALUE = 'www.';
const WEB_PREFIX_LENGTH = WEB_PREFIX_VALUE.length;
/**
* Initializations
*/
document.addEventListener('DOMContentLoaded', function () {
let i18nElements, saveButtonElement, blockMissingElement, domainWhitelistElement;
let optionsButtonElement, i18nElements;
optionsButtonElement = document.getElementById('options-button');
optionsButtonElement.setAttribute('title', 'Options');
i18nElements = document.querySelectorAll('[data-i18n-content]');
......@@ -36,9 +53,15 @@ document.addEventListener('DOMContentLoaded', function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
browser.runtime.getPlatformInfo(function (information) {
browser.runtime.getBackgroundPage().then(function (backgroundPage) {
if (backgroundPage === null) {
return;
}
popup.backgroundPage = backgroundPage;
if (information.os === 'android') {
if (backgroundPage.main.operatingSystem === 'android') {
browser.tabs.getCurrent().then(function (tab) {
......@@ -47,26 +70,85 @@ document.addEventListener('DOMContentLoaded', function () {
});
});
}
});
browser.runtime.getBackgroundPage().then(function (backgroundPage) {
let injections, injectionOverview, domain;
if (backgroundPage == null) {
return;
injections = backgroundPage.stateManager.tabs[tabs[0].id].injections;
injectionOverview = {};
try {
domain = tabs[0].url.match(WEB_DOMAIN_EXPRESSION)[1];
} catch (exception) {
domain = null;
}
let injections, injectionOverview;
if (domain !== null) {
injections = backgroundPage.stateManager.tabs[tabs[0].id].injections;
injectionOverview = {};
let websiteContextElement, protectionToggleElement, domainIndicatorElement;
for (let injection in injections) {
websiteContextElement = document.getElementById('website-context');
protectionToggleElement = document.getElementById('protection-toggle-button');
domainIndicatorElement = document.getElementById('domain-indicator');
if (domain.startsWith(WEB_PREFIX_VALUE)) {
domain = domain.slice(WEB_PREFIX_LENGTH);
}
domainIndicatorElement.innerText = domain;
if (!backgroundPage.requestAnalyzer.whitelistedDomains[domain]) {
protectionToggleElement.setAttribute('class', 'button button-toggle active');
protectionToggleElement.setAttribute('title', 'Disable protection for this site');
let injectionSource, libraryName;
protectionToggleElement.addEventListener('click', function () {
backgroundPage.stateManager.addDomainToWhitelist(domain).then(function () {
chrome.tabs.reload(tabs[0].id);
if (backgroundPage.main.operatingSystem === 'android') {
return browser.tabs.getCurrent().then(function (tab) {
browser.tabs.remove(tab.id);
});
}
window.close();
});
});
} else {
protectionToggleElement.setAttribute('class', 'button button-toggle');
protectionToggleElement.setAttribute('title', 'Enable protection for this site');
protectionToggleElement.addEventListener('click', function () {
backgroundPage.stateManager.deleteDomainFromWhitelist(domain).then(function () {
chrome.tabs.reload(tabs[0].id);
if (backgroundPage.main.operatingSystem === 'android') {
return browser.tabs.getCurrent().then(function (tab) {
browser.tabs.remove(tab.id);
});
}
window.close();
});
});
}
websiteContextElement.setAttribute('class', 'panel');
}
for (let injection in injections) {
injection = injections[injection];
injectionSource = injection.source;
let injectionSource = injection.source;
injectionOverview[injectionSource] = injectionOverview[injectionSource] || [];
injectionOverview[injectionSource].push({
......@@ -139,17 +221,17 @@ document.addEventListener('DOMContentLoaded', function () {
listElement.appendChild(listItemElement);
subListElement = document.createElement('ul');
subListElement.setAttribute('class', 'sub-list');
subListElement.setAttribute('class', 'sublist');
listElement.appendChild(subListElement);
cdn.forEach(function (injection) {
for (let injection of cdn) {
let subListItemElement, resourcePathDetails, resourceFilename, resourceName,
resourceNameTextNode, sideNoteElement, sideNoteTextNode;
subListItemElement = document.createElement('li');
subListItemElement.setAttribute('class', 'sub-list-item');
subListItemElement.setAttribute('class', 'sublist-item');
resourcePathDetails = injection.path.split('/');
resourceFilename = resourcePathDetails[resourcePathDetails.length - 1];
......@@ -212,34 +294,29 @@ document.addEventListener('DOMContentLoaded', function () {
subListItemElement.appendChild(sideNoteElement);
subListElement.appendChild(subListItemElement);
});
}
}
if (Object.keys(injectionOverview).length > 0) {
let popupContentElement = document.getElementById('popup-content');