Start on popup

This commit is contained in:
Arlo Breault 2019-05-29 21:27:05 -04:00
parent 11efa42e4c
commit 91255463c6
6 changed files with 87 additions and 16 deletions

View file

@ -68,14 +68,14 @@ class ProxyPair
channel.onopen = => channel.onopen = =>
log 'WebRTC DataChannel opened!' log 'WebRTC DataChannel opened!'
snowflake.state = Snowflake.MODE.WEBRTC_READY 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 # This is the point when the WebRTC datachannel is done, so the next step
# is to establish websocket to the server. # is to establish websocket to the server.
@connectRelay() @connectRelay()
channel.onclose = => channel.onclose = =>
log 'WebRTC DataChannel closed.' log 'WebRTC DataChannel closed.'
snowflake.ui?.setStatus 'disconnected by webrtc.' snowflake.ui.setStatus 'disconnected by webrtc.'
snowflake.ui?.setActive false snowflake.ui.setActive false
snowflake.state = Snowflake.MODE.INIT snowflake.state = Snowflake.MODE.INIT
@flush() @flush()
@close() @close()
@ -108,11 +108,11 @@ class ProxyPair
clearTimeout @timer clearTimeout @timer
@timer = 0 @timer = 0
log @relay.label + ' connected!' log @relay.label + ' connected!'
snowflake.ui?.setStatus 'connected' snowflake.ui.setStatus 'connected'
@relay.onclose = => @relay.onclose = =>
log @relay.label + ' closed.' log @relay.label + ' closed.'
snowflake.ui?.setStatus 'disconnected.' snowflake.ui.setStatus 'disconnected.'
snowflake.ui?.setActive false snowflake.ui.setActive false
snowflake.state = Snowflake.MODE.INIT snowflake.state = Snowflake.MODE.INIT
@flush() @flush()
@close() @close()

View file

@ -3,9 +3,12 @@ All of Snowflake's DOM manipulation and inputs.
### ###
class UI class UI
active: false
setStatus: (msg) -> setStatus: (msg) ->
setActive: (connected) -> setActive: (connected) ->
@active = connected
log: (msg) -> log: (msg) ->
@ -16,7 +19,8 @@ class BadgeUI extends UI
constructor: -> constructor: ->
@$badge = document.getElementById('badge') @$badge = document.getElementById('badge')
setActive: (connected) => setActive: (connected) ->
super connected
@$badge.className = if connected then 'active' else '' @$badge.className = if connected then 'active' else ''
@ -32,22 +36,40 @@ class DebugUI extends UI
@$msglog.value = '' @$msglog.value = ''
# Status bar # Status bar
setStatus: (msg) => setStatus: (msg) ->
@$status.innerHTML = 'Status: ' + msg @$status.innerHTML = 'Status: ' + msg
setActive: (connected) => setActive: (connected) ->
super connected
@$msglog.className = if connected then 'active' else '' @$msglog.className = if connected then 'active' else ''
log: (msg) => log: (msg) ->
# Scroll to latest # Scroll to latest
@$msglog.value += msg + '\n' @$msglog.value += msg + '\n'
@$msglog.scrollTop = @$msglog.scrollHeight @$msglog.scrollTop = @$msglog.scrollHeight
class WebExtUI extends UI 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) -> setActive: (connected) ->
chrome.browserAction.setIcon { super connected
"path": { @postActive()
"32": "icons/status-" + (if connected then "on" else "off") + ".png" chrome.browserAction.setIcon
} path:
} 32: "icons/status-" + (if connected then "on" else "off") + ".png"

View file

@ -11,6 +11,7 @@
"default_icon": { "default_icon": {
"32": "icons/status-off.png" "32": "icons/status-off.png"
}, },
"default_title": "Snowflake" "default_title": "Snowflake",
"default_popup": "popup.html"
} }
} }

19
proxy/webext/popup.css Normal file
View file

@ -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;
}

17
proxy/webext/popup.html Normal file
View file

@ -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>

12
proxy/webext/popup.js Normal file
View file

@ -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";
});