Start on popup

91255463 · Arlo Breault · 11efa42e · 91255463 · 91255463 · 91255463
Commit 91255463 authored 5 years ago by Arlo Breault
--- 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()

--- 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"
--- 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"
 	}
 }
--- a/proxy/webext/popup.css
+++ b/proxy/webext/popup.css
+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;
+}
--- a/proxy/webext/popup.html
+++ b/proxy/webext/popup.html
+<!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>
--- a/proxy/webext/popup.js
+++ b/proxy/webext/popup.js
+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";
+});