commit 2ba8f859afbfb5259c6c3a830eb94fb3d536f351 Author: Arlo Breault arlolra@gmail.com Date: Wed Apr 15 18:35:39 2020 -0400

Add a button to retry probe

Trac: 33365 Trac: 33112 --- init-badge.js | 60 +++++++++++++++++++++---------------- init-webext.js | 32 +++++++++++++------- static/_locales/en_US/messages.json | 6 ++++ static/embed.html | 1 + static/popup.js | 29 +++++++++++++----- webext/embed.js | 10 +++---- 6 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/init-badge.js b/init-badge.js index 4beceb1..d9660a8 100644 --- a/init-badge.js +++ b/init-badge.js @@ -22,7 +22,20 @@ class BadgeUI extends UI {

constructor() { super(); - this.popup = new Popup((...args) => messages.getMessage(...args)); + this.popup = new Popup( + (...args) => messages.getMessage(...args), + (event) => { + if (event.target.checked) { + setSnowflakeCookie('1', COOKIE_LIFETIME); + } else { + setSnowflakeCookie('', COOKIE_EXPIRE); + } + update(); + }, + () => { + tryProbe(); + } + ); }

setStatus() {} @@ -92,7 +105,7 @@ function getLang() { return defaultLang; }

-var debug, snowflake, config, broker, ui, log, dbg, init, update, silenceNotifications, query; +var debug, snowflake, config, broker, ui, log, dbg, init, update, silenceNotifications, query, tryProbe;

(function() {

@@ -116,21 +129,7 @@ var debug, snowflake, config, broker, ui, log, dbg, init, update, silenceNotific if (debug) { log(msg); } };

- update = function() { - const cookies = Parse.cookie(document.cookie); - if (cookies[COOKIE_NAME] !== '1') { - ui.turnOff(); - snowflake.disable(); - log('Currently not active.'); - return; - } - - if (!Util.hasWebRTC()) { - ui.missingFeature('popupWebRTCOff'); - snowflake.disable(); - return; - } - + tryProbe = function() { WS.probeWebsocket(config.relayAddr) .then( () => { @@ -148,6 +147,24 @@ var debug, snowflake, config, broker, ui, log, dbg, init, update, silenceNotific ); };

+ update = function() { + const cookies = Parse.cookie(document.cookie); + if (cookies[COOKIE_NAME] !== '1') { + ui.turnOff(); + snowflake.disable(); + log('Currently not active.'); + return; + } + + if (!Util.hasWebRTC()) { + ui.missingFeature('popupWebRTCOff'); + snowflake.disable(); + return; + } + + tryProbe(); + }; + init = function() { ui = new BadgeUI();

@@ -164,15 +181,6 @@ var debug, snowflake, config, broker, ui, log, dbg, init, update, silenceNotific snowflake = new Snowflake(config, ui, broker); log('== snowflake proxy =='); update(); - - document.getElementById('enabled').addEventListener('change', (event) => { - if (event.target.checked) { - setSnowflakeCookie('1', COOKIE_LIFETIME); - } else { - setSnowflakeCookie('', COOKIE_EXPIRE); - } - update(); - }) };

// Notification of closing tab with active proxy. diff --git a/init-webext.js b/init-webext.js index 3eb42dd..4b09988 100644 --- a/init-webext.js +++ b/init-webext.js @@ -25,6 +25,21 @@ class WebExtUI extends UI { }), 60 * 60 * 1000); }

+ tryProbe() { + WS.probeWebsocket(config.relayAddr) + .then( + () => { + this.missingFeature = false; + this.setEnabled(true); + }, + () => { + log('Could not connect to bridge.'); + this.missingFeature = 'popupBridgeUnreachable'; + this.setEnabled(false); + } + ); + } + initToggle() { // First, check if we have our status stored (new Promise((resolve) => { @@ -48,17 +63,7 @@ class WebExtUI extends UI { this.setEnabled(false); return; } - WS.probeWebsocket(config.relayAddr) - .then( - () => { - this.setEnabled(true); - }, - () => { - log('Could not connect to bridge.'); - this.missingFeature = 'popupBridgeUnreachable'; - this.setEnabled(false); - } - ); + this.tryProbe(); }); }

@@ -83,6 +88,11 @@ class WebExtUI extends UI { }

onMessage(m) { + if (m.retry) { + // FIXME: Can set a retrying state here + this.tryProbe(); + return; + } (new Promise((resolve) => { chrome.storage.local.set({ "snowflake-enabled": m.enabled }, resolve); })) diff --git a/static/_locales/en_US/messages.json b/static/_locales/en_US/messages.json index 0d638c7..393a1c4 100644 --- a/static/_locales/en_US/messages.json +++ b/static/_locales/en_US/messages.json @@ -26,6 +26,12 @@ "popupDescOn": { "message": "Number of users your Snowflake has helped circumvent censorship in the last 24 hours: $1" }, + "popupRetry": { + "message": "Retry" + }, + "popupRetrying": { + "message": "Retrying ..." + }, "badgeCookiesOff": { "message": "Cookies are not enabled." }, diff --git a/static/embed.html b/static/embed.html index b3ca800..6cc6a88 100644 --- a/static/embed.html +++ b/static/embed.html @@ -15,6 +15,7 @@ <div id="statusimg"></div> <p id="statustext">__MSG_popupStatusOff__</p> <p id="statusdesc"></p> + <button type="button" id="retry">__MSG_popupRetry__</button> </div> <div class="b button"> <label id="toggle" for="enabled">__MSG_popupEnabled__</label> diff --git a/static/popup.js b/static/popup.js index 5223350..e11584f 100644 --- a/static/popup.js +++ b/static/popup.js @@ -10,12 +10,21 @@ function setClass(elem, className, cond) { }

class Popup { - constructor(getMsgFunc) { + constructor(getMsgFunc, changeFunc, retryFunc) { this.getMsgFunc = getMsgFunc; + this.enabled = document.getElementById('enabled'); + this.enabled.addEventListener('change', changeFunc); + this.retry = document.getElementById('retry'); + this.retry.addEventListener('click', () => { + this.setStatusDesc(getMsgFunc('popupRetrying')); + this.setRetry(false); + setTimeout(retryFunc, 1000); // Just some UI feedback + }); this.div = document.getElementById('active'); this.statustext = document.getElementById('statustext'); this.statusdesc = document.getElementById('statusdesc'); this.img = document.getElementById('statusimg'); + this.button = document.querySelector('.button'); } setEnabled(enabled) { setClass(this.img, 'on', enabled); @@ -30,11 +39,14 @@ class Popup { this.statusdesc.innerText = desc; setClass(this.statusdesc, 'error', error); } - hideButton() { - document.querySelector('.button').style.display = 'none'; + setButton(hide) { + this.button.style.display = hide ? 'none' : 'block'; + } + setRetry(display) { + this.retry.style.display = display ? 'inline-block' : 'none'; } setChecked(checked) { - document.getElementById('enabled').checked = checked; + this.enabled.checked = checked; } static fill(n, func) { switch(n.nodeType) { @@ -58,16 +70,19 @@ class Popup { this.setStatusDesc((total > 0) ? this.getMsgFunc('popupDescOn', String(total)) : ''); this.setEnabled(true); this.setActive(this.active); + this.setButton(false); + this.setRetry(false); } - turnOff(desc, error) { + turnOff(desc, error, retry) { this.setChecked(false); this.setStatusText(this.getMsgFunc('popupStatusOff')); this.setStatusDesc(desc ? this.getMsgFunc(desc) : '', error); this.setEnabled(false); this.setActive(false); + this.setButton(error); + this.setRetry(retry); } missingFeature(desc) { - this.turnOff(desc, true); - this.hideButton(); + this.turnOff(desc, true, desc === 'popupBridgeUnreachable'); } } diff --git a/webext/embed.js b/webext/embed.js index 7371005..c17f602 100644 --- a/webext/embed.js +++ b/webext/embed.js @@ -13,7 +13,11 @@ const port = chrome.runtime.connect({

port.onMessage.addListener((m) => { const { active, enabled, total, missingFeature } = m; - const popup = new Popup((...args) => chrome.i18n.getMessage(...args)); + const popup = new Popup( + (...args) => chrome.i18n.getMessage(...args), + (event) => port.postMessage({ enabled: event.target.checked }), + () => port.postMessage({ retry: true }) + );

if (missingFeature) { popup.missingFeature(missingFeature); @@ -28,7 +32,3 @@ port.onMessage.addListener((m) => { popup.turnOff(); } }); - -document.addEventListener('change', (event) => { - port.postMessage({ enabled: event.target.checked }); -})