mirror of
https://gitlab.torproject.org/tpo/anti-censorship/pluggable-transports/snowflake.git
synced 2025-10-14 05:11:19 -04:00
Control statusimg using CSS, rather than setting an img src.
This commit is contained in:
parent
8f885c7557
commit
990047b2f5
5 changed files with 29 additions and 9 deletions
|
@ -14,7 +14,8 @@ class BadgeUI extends UI {
|
||||||
setStatus() {}
|
setStatus() {}
|
||||||
|
|
||||||
missingFeature(missing) {
|
missingFeature(missing) {
|
||||||
this.popup.setImgSrc('off');
|
this.popup.setEnabled(false);
|
||||||
|
this.popup.setActive(false);
|
||||||
this.popup.setStatusText("Snowflake is off");
|
this.popup.setStatusText("Snowflake is off");
|
||||||
this.popup.setStatusDesc(missing, true);
|
this.popup.setStatusDesc(missing, true);
|
||||||
this.popup.hideButton();
|
this.popup.hideButton();
|
||||||
|
@ -28,7 +29,8 @@ class BadgeUI extends UI {
|
||||||
// FIXME: Share stats from webext
|
// FIXME: Share stats from webext
|
||||||
const total = 0;
|
const total = 0;
|
||||||
this.popup.setStatusDesc(`Your snowflake has helped ${total} user${(total !== 1) ? 's' : ''} circumvent censorship in the last 24 hours.`);
|
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() {
|
turnOff() {
|
||||||
|
@ -36,7 +38,8 @@ class BadgeUI extends UI {
|
||||||
this.popup.setToggleText('Turn On');
|
this.popup.setToggleText('Turn On');
|
||||||
this.popup.setStatusText("Snowflake is off");
|
this.popup.setStatusText("Snowflake is off");
|
||||||
this.popup.setStatusDesc("");
|
this.popup.setStatusDesc("");
|
||||||
this.popup.setImgSrc("off");
|
this.popup.setEnabled(false);
|
||||||
|
this.popup.setActive(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
setActive(connected) {
|
setActive(connected) {
|
||||||
|
|
|
@ -11,6 +11,19 @@ body {
|
||||||
text-align: center;
|
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 {
|
.b {
|
||||||
border-top: 1px solid gainsboro;
|
border-top: 1px solid gainsboro;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="active">
|
<div id="active">
|
||||||
<img id="statusimg" src="assets/status-off.png" />
|
<div id="statusimg"></div>
|
||||||
<p id="statustext">Snowflake is off</p>
|
<p id="statustext">Snowflake is off</p>
|
||||||
<p id="statusdesc"></p>
|
<p id="statusdesc"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,8 +16,11 @@ class Popup {
|
||||||
this.statusdesc = document.getElementById('statusdesc');
|
this.statusdesc = document.getElementById('statusdesc');
|
||||||
this.img = document.getElementById('statusimg');
|
this.img = document.getElementById('statusimg');
|
||||||
}
|
}
|
||||||
setImgSrc(src) {
|
setEnabled(enabled) {
|
||||||
this.img.src = `assets/status-${src}.png`;
|
setClass(this.img, 'on', enabled);
|
||||||
|
}
|
||||||
|
setActive(active) {
|
||||||
|
setClass(this.img, 'running', active);
|
||||||
}
|
}
|
||||||
setStatusText(txt) {
|
setStatusText(txt) {
|
||||||
this.statustext.innerText = txt;
|
this.statustext.innerText = txt;
|
||||||
|
|
|
@ -9,7 +9,8 @@ port.onMessage.addListener((m) => {
|
||||||
const popup = new Popup();
|
const popup = new Popup();
|
||||||
|
|
||||||
if (missingFeature) {
|
if (missingFeature) {
|
||||||
popup.setImgSrc('off');
|
popup.setEnabled(false);
|
||||||
|
popup.setActive(false);
|
||||||
popup.setStatusText("Snowflake is off");
|
popup.setStatusText("Snowflake is off");
|
||||||
popup.setStatusDesc("WebRTC feature is not detected.", true);
|
popup.setStatusDesc("WebRTC feature is not detected.", true);
|
||||||
popup.hideButton();
|
popup.hideButton();
|
||||||
|
@ -29,8 +30,8 @@ port.onMessage.addListener((m) => {
|
||||||
popup.setStatusText("Snowflake is off");
|
popup.setStatusText("Snowflake is off");
|
||||||
popup.setStatusDesc("");
|
popup.setStatusDesc("");
|
||||||
}
|
}
|
||||||
|
popup.setEnabled(enabled);
|
||||||
popup.setImgSrc(active ? "running" : enabled ? "on" : "off");
|
popup.setActive(active);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('change', (event) => {
|
document.addEventListener('change', (event) => {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue