diff --git a/proxy/init-badge.js b/proxy/init-badge.js index 443e879..dbe7fea 100644 --- a/proxy/init-badge.js +++ b/proxy/init-badge.js @@ -14,7 +14,8 @@ class BadgeUI extends UI { setStatus() {} missingFeature(missing) { - this.popup.setImgSrc('off'); + this.popup.setEnabled(false); + this.popup.setActive(false); this.popup.setStatusText("Snowflake is off"); this.popup.setStatusDesc(missing, true); this.popup.hideButton(); @@ -28,7 +29,8 @@ class BadgeUI extends UI { // FIXME: Share stats from webext const total = 0; this.popup.setStatusDesc(`Your snowflake has helped ${total} user${(total !== 1) ? 's' : ''} circumvent censorship in the last 24 hours.`); - this.popup.setImgSrc(this.active ? "running" : "on"); + this.popup.setEnabled(true); + this.popup.setActive(this.active); } turnOff() { @@ -36,7 +38,8 @@ class BadgeUI extends UI { this.popup.setToggleText('Turn On'); this.popup.setStatusText("Snowflake is off"); this.popup.setStatusDesc(""); - this.popup.setImgSrc("off"); + this.popup.setEnabled(false); + this.popup.setActive(false); } setActive(connected) { diff --git a/proxy/static/embed.css b/proxy/static/embed.css index 3eac1a7..156a688 100644 --- a/proxy/static/embed.css +++ b/proxy/static/embed.css @@ -11,6 +11,19 @@ body { text-align: center; } +#statusimg { + background-image: url("assets/status-off.png"); + background-repeat: no-repeat; + background-position: center center; + min-height: 60px; +} +#statusimg.on { + background-image: url("assets/status-on.png"); +} +#statusimg.on.running { + background-image: url("assets/status-running.png"); +} + .b { border-top: 1px solid gainsboro; padding: 10px; diff --git a/proxy/static/embed.html b/proxy/static/embed.html index b0820fa..441241a 100644 --- a/proxy/static/embed.html +++ b/proxy/static/embed.html @@ -10,7 +10,7 @@
- +

Snowflake is off

diff --git a/proxy/static/popup.js b/proxy/static/popup.js index 994debd..9ff8121 100644 --- a/proxy/static/popup.js +++ b/proxy/static/popup.js @@ -16,8 +16,11 @@ class Popup { this.statusdesc = document.getElementById('statusdesc'); this.img = document.getElementById('statusimg'); } - setImgSrc(src) { - this.img.src = `assets/status-${src}.png`; + setEnabled(enabled) { + setClass(this.img, 'on', enabled); + } + setActive(active) { + setClass(this.img, 'running', active); } setStatusText(txt) { this.statustext.innerText = txt; diff --git a/proxy/webext/embed.js b/proxy/webext/embed.js index 6571843..62c97a5 100644 --- a/proxy/webext/embed.js +++ b/proxy/webext/embed.js @@ -9,7 +9,8 @@ port.onMessage.addListener((m) => { const popup = new Popup(); if (missingFeature) { - popup.setImgSrc('off'); + popup.setEnabled(false); + popup.setActive(false); popup.setStatusText("Snowflake is off"); popup.setStatusDesc("WebRTC feature is not detected.", true); popup.hideButton(); @@ -29,8 +30,8 @@ port.onMessage.addListener((m) => { popup.setStatusText("Snowflake is off"); popup.setStatusDesc(""); } - - popup.setImgSrc(active ? "running" : enabled ? "on" : "off"); + popup.setEnabled(enabled); + popup.setActive(active); }); document.addEventListener('change', (event) => {