commit 453bf0611cadfc9f85240d3424b04a638b4604f3 Author: Arlo Breault <arlolra@gmail.com> Date: Fri Jul 5 07:22:20 2019 +0200 Cleanup popup onMessage handler --- proxy/webext/popup.html | 4 +-- proxy/webext/popup.js | 70 +++++++++++++++++++++++++++++++++---------------- 2 files changed, 50 insertions(+), 24 deletions(-) diff --git a/proxy/webext/popup.html b/proxy/webext/popup.html index 9837595..2c8943e 100644 --- a/proxy/webext/popup.html +++ b/proxy/webext/popup.html @@ -11,8 +11,8 @@ <p></p> <p></p> </div> - <div class="b toggle"> - <label id=toggle>Turn On</label> + <div class="b button"> + <label id="toggle">Turn On</label> <label class="switch"> <input id="enabled" type="checkbox" checked/> <span class="slider round"></span> diff --git a/proxy/webext/popup.js b/proxy/webext/popup.js index 0bf489d..435adb1 100644 --- a/proxy/webext/popup.js +++ b/proxy/webext/popup.js @@ -2,36 +2,62 @@ const port = chrome.runtime.connect({ name: "popup" }); +class Popup { + constructor() { + this.div = document.getElementById('active'); + this.ps = this.div.querySelectorAll('p'); + this.img = this.div.querySelector('img'); + } + setImgSrc(src) { + this.img.src = `icons/status-${src}.png`; + } + setStatusText(txt) { + this.ps[0].innerText = txt; + } + setStatusDesc(desc, color) { + this.ps[1].innerText = desc; + this.ps[1].style.color = color || 'black'; + } + hideButton() { + document.querySelector('.button').style.display = 'none'; + } + setChecked(checked) { + document.getElementById('enabled').checked = checked; + } + setToggleText(txt) { + document.getElementById('toggle').innerText = txt; + } +} + port.onMessage.addListener((m) => { - const div = document.getElementById('active'); - const ps = div.querySelectorAll('p'); - if (m.missingFeature) { - div.querySelector('img').src = "icons/status-off.png"; - ps[0].innerText = "Snowflake is off"; - ps[1].innerText = "WebRTC feature is not detected."; - ps[1].style.color = 'firebrick'; - document.querySelector('.toggle').style.display = 'none'; + const { active, enabled, total, missingFeature } = m; + const popup = new Popup(); + + if (missingFeature) { + popup.setImgSrc('off'); + popup.setStatusText("Snowflake is off"); + popup.setStatusDesc("WebRTC feature is not detected.", 'firebrick'); + popup.hideButton(); return; } - const active = m.active; - const img = div.querySelector('img'); - const enabled = m.enabled; + const clients = active ? 1 : 0; - const enabledText = document.getElementById('toggle'); + if (enabled) { - document.getElementById('enabled').checked = true; - enabledText.innerText = 'Turn Off'; - ps[0].innerText = `${clients} client${(clients !== 1) ? 's' : ''} connected.`; - ps[1].innerText = `Your snowflake has helped ${m.total} user${(m.total !== 1) ? 's' : ''} circumvent censorship in the last 24 hours.`; + popup.setChecked(true); + popup.setToggleText('Turn Off'); + popup.setStatusText(`${clients} client${(clients !== 1) ? 's' : ''} connected.`); + popup.setStatusDesc(`Your snowflake has helped ${total} user${(total !== 1) ? 's' : ''} circumvent censorship in the last 24 hours.`); } else { - ps[0].innerText = "Snowflake is off"; - ps[1].innerText = ""; - document.getElementById('enabled').checked = false; - enabledText.innerText = 'Turn On'; + popup.setChecked(false); + popup.setToggleText('Turn On'); + popup.setStatusText("Snowflake is off"); + popup.setStatusDesc(""); } - img.src = `icons/status-${active? "running" : enabled? "on" : "off"}.png`; + + popup.setImgSrc(active ? "running" : enabled ? "on" : "off"); }); document.addEventListener('change', (event) => { - port.postMessage({enabled: event.target.checked}); + port.postMessage({ enabled: event.target.checked }); })