[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [snowflake/master] Control statusimg using CSS, rather than setting an img src.
commit 990047b2f5747543dd1e41993c4dc1b5992bff55
Author: David Fifield <david@xxxxxxxxxxxxxxx>
Date: Tue Jul 23 10:13:46 2019 -0600
Control statusimg using CSS, rather than setting an img src.
---
proxy/init-badge.js | 9 ++++++---
proxy/static/embed.css | 13 +++++++++++++
proxy/static/embed.html | 2 +-
proxy/static/popup.js | 7 +++++--
proxy/webext/embed.js | 7 ++++---
5 files changed, 29 insertions(+), 9 deletions(-)
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 @@
</head>
<body>
<div id="active">
- <img id="statusimg" src="assets/status-off.png" />
+ <div id="statusimg"></div>
<p id="statustext">Snowflake is off</p>
<p id="statusdesc"></p>
</div>
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) => {
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits