[tor-commits] [snowflake/master] Start on popup

[arlo at torproject.org]

commit 91255463c68c3ada6adc8718bf380cbd654fe9ef
Author: Arlo Breault <arlolra at gmail.com>
Date:   Wed May 29 21:27:05 2019 -0400

    Start on popup
---
 proxy/proxypair.coffee     | 12 ++++++------
 proxy/ui.coffee            | 40 +++++++++++++++++++++++++++++++---------
 proxy/webext/manifest.json |  3 ++-
 proxy/webext/popup.css     | 19 +++++++++++++++++++
 proxy/webext/popup.html    | 17 +++++++++++++++++
 proxy/webext/popup.js      | 12 ++++++++++++
 6 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/proxy/proxypair.coffee b/proxy/proxypair.coffee
index 879c6b6..f174a37 100644
--- a/proxy/proxypair.coffee
+++ b/proxy/proxypair.coffee
@@ -68,14 +68,14 @@ class ProxyPair
     channel.onopen = =>
       log 'WebRTC DataChannel opened!'
       snowflake.state = Snowflake.MODE.WEBRTC_READY
-      snowflake.ui?.setActive true
+      snowflake.ui.setActive true
       # This is the point when the WebRTC datachannel is done, so the next step
       # is to establish websocket to the server.
       @connectRelay()
     channel.onclose = =>
       log 'WebRTC DataChannel closed.'
-      snowflake.ui?.setStatus 'disconnected by webrtc.'
-      snowflake.ui?.setActive false
+      snowflake.ui.setStatus 'disconnected by webrtc.'
+      snowflake.ui.setActive false
       snowflake.state = Snowflake.MODE.INIT
       @flush()
       @close()
@@ -108,11 +108,11 @@ class ProxyPair
         clearTimeout @timer
         @timer = 0
       log @relay.label + ' connected!'
-      snowflake.ui?.setStatus 'connected'
+      snowflake.ui.setStatus 'connected'
     @relay.onclose = =>
       log @relay.label + ' closed.'
-      snowflake.ui?.setStatus 'disconnected.'
-      snowflake.ui?.setActive false
+      snowflake.ui.setStatus 'disconnected.'
+      snowflake.ui.setActive false
       snowflake.state = Snowflake.MODE.INIT
       @flush()
       @close()
diff --git a/proxy/ui.coffee b/proxy/ui.coffee
index 0464333..0146abc 100644
--- a/proxy/ui.coffee
+++ b/proxy/ui.coffee
@@ -3,9 +3,12 @@ All of Snowflake's DOM manipulation and inputs.
 ###
 
 class UI
+  active: false
+
   setStatus: (msg) ->
 
   setActive: (connected) ->
+    @active = connected
 
   log: (msg) ->
 
@@ -16,7 +19,8 @@ class BadgeUI extends UI
   constructor: ->
     @$badge = document.getElementById('badge')
 
-  setActive: (connected) =>
+  setActive: (connected) ->
+    super connected
     @$badge.className = if connected then 'active' else ''
 
 
@@ -32,22 +36,40 @@ class DebugUI extends UI
     @$msglog.value = ''
 
   # Status bar
-  setStatus: (msg) =>
+  setStatus: (msg) ->
     @$status.innerHTML = 'Status: ' + msg
 
-  setActive: (connected) =>
+  setActive: (connected) ->
+    super connected
     @$msglog.className = if connected then 'active' else ''
 
-  log: (msg) =>
+  log: (msg) ->
     # Scroll to latest
     @$msglog.value += msg + '\n'
     @$msglog.scrollTop = @$msglog.scrollHeight
 
 
 class WebExtUI extends UI
+  port: null
+
+  constructor: ->
+    chrome.runtime.onConnect.addListener @onConnect
+
+  postActive: ->
+    @port?.postMessage
+      active: @active
+
+  onConnect: (port) =>
+    @port = port
+    port.onDisconnect.addListener @onDisconnect
+    @postActive()
+
+  onDisconnect: (port) =>
+    @port = null
+
   setActive: (connected) ->
-    chrome.browserAction.setIcon {
-      "path": {
-        "32": "icons/status-" + (if connected then "on" else "off") + ".png"
-      }
-    }
+    super connected
+    @postActive()
+    chrome.browserAction.setIcon
+      path:
+        32: "icons/status-" + (if connected then "on" else "off") + ".png"
diff --git a/proxy/webext/manifest.json b/proxy/webext/manifest.json
index a86d4af..31cf212 100644
--- a/proxy/webext/manifest.json
+++ b/proxy/webext/manifest.json
@@ -11,6 +11,7 @@
 		"default_icon": {
 			"32": "icons/status-off.png"
 		},
-		"default_title": "Snowflake"
+		"default_title": "Snowflake",
+		"default_popup": "popup.html"
 	}
 }
diff --git a/proxy/webext/popup.css b/proxy/webext/popup.css
new file mode 100644
index 0000000..8b3d5dc
--- /dev/null
+++ b/proxy/webext/popup.css
@@ -0,0 +1,19 @@
+body {
+	margin: 1em;
+}
+
+#active {
+	padding: 2em;
+	text-align: center;
+}
+
+.learn {
+	padding-top: 1em;
+	border-top: 1px solid grey;
+}
+
+.learn a {
+	display: block;
+	color: grey;
+	text-decoration: none;
+}
diff --git a/proxy/webext/popup.html b/proxy/webext/popup.html
new file mode 100644
index 0000000..3619b6c
--- /dev/null
+++ b/proxy/webext/popup.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="stylesheet" href="popup.css" />
+		<script src="popup.js"></script>
+	</head>
+	<body>
+		<div id="active">
+			<img src="icons/status-off.png" />
+			<p>Offline</p>
+		</div>
+		<div class="learn">
+			<a target="_blank" href="https://snowflake.torproject.org/">Learn more</a>
+		</div>
+	</body>
+</html>
diff --git a/proxy/webext/popup.js b/proxy/webext/popup.js
new file mode 100644
index 0000000..9b68862
--- /dev/null
+++ b/proxy/webext/popup.js
@@ -0,0 +1,12 @@
+const port = chrome.runtime.connect({
+	name: "popup"
+});
+
+port.onMessage.addListener((m) => {
+	const active = m.active;
+	const div = document.getElementById('active');
+	const img = div.querySelector('img');
+	img.src = `icons/status-${active ? "on" : "off"}.png`;
+	const p = div.querySelector('p');
+	p.innerText = active ? "Connected" : "Offline";
+});