[snowflake/master] Control statusimg using CSS, rather than setting an img src. - tor-commits

1 Aug 2019

commit 990047b2f5747543dd1e41993c4dc1b5992bff55
Author: David Fifield david@bamsoftware.com
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) => {

    