July 2012 - tor-commits - lists.torproject.org

[flashproxy/master] Change the size of the badge to 80×15.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit c9783398370b81703230296a00bb4b6a900a005b Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 13:43:25 2012 -0700 Change the size of the badge to 80×15. That is a standard size according to https://en.wikipedia.org/wiki/Web_badge, unlike our mutant 70×23. Remove counter from the badge. The counter turned out to be dumb because it is almost always 0. --- README | 2 +- badge.png | Bin 230 -> 254 bytes embed.html | 36 ++++++++++++++++-------------------- flashproxy.js | 29 +++++------------------------ 4 files changed, 22 insertions(+), 45 deletions(-) diff --git a/README b/README index f81201b..e096a3f 100644 --- a/README +++ b/README @@ -126,7 +126,7 @@ Add this line to torrc to make the relay use the external proxy: Paste in this HTML where you want the badge to appear: -<iframe src="//crypto.stanford.edu/flashproxy/embed.html" width="70" height="23" frameBorder="0" scrolling="no"></iframe> +<iframe src="//crypto.stanford.edu/flashproxy/embed.html" width="80" height="15" frameBorder="0" scrolling="no"></iframe> == For developers diff --git a/badge.png b/badge.png index 17d2c79..068cf78 100644 Binary files a/badge.png and b/badge.png differ diff --git a/embed.html b/embed.html index 325883c..aac0565 100644 --- a/embed.html +++ b/embed.html @@ -4,38 +4,34 @@ <meta charset="utf-8"> <meta http-equiv="refresh" content="86400"> <style type="text/css"> +html { + width: 100%; + height: 100%; +} body { margin: 0; padding: 0; + width: 100%; + height: 100%; } #flashproxy-badge { - position: relative; - margin: 0; - padding: 0; - width: 70px; - height: 23px; - color: white; - background-color: #d80; -} -#flashproxy-badge a img { - border: 0; -} -#flashproxy-badge table { - position: absolute; - top: 0px; - left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-collapse: collapse; + line-height: 0; + background-color: #d80; } -#flashproxy-badge table tr td { - text-align: center; +#flashproxy-badge td { + margin: 0; + padding: 0; vertical-align: middle; - padding: 2px 2px 2px 47px; - font-size: 12px; + text-align: center; +} +#flashproxy-badge a img { + border: 0; } #flashproxy-badge.debug { position: absolute; @@ -56,7 +52,7 @@ body { flashproxy_badge_insert().start(); </script> <noscript> -<div id="flashproxy-badge"><a href="http://crypto.stanford.edu/flashproxy/" target="_parent"><img src="badge.png" alt="I support Internet freedom"></a></div> +<table id="flashproxy-badge"><tr><td><a href="http://crypto.stanford.edu/flashproxy/" target="_parent"><img src="badge.png" alt="Internet freedom"></a></td></tr></table> </noscript> </body> </html> diff --git a/flashproxy.js b/flashproxy.js index 28beb29..321a708 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -456,7 +456,6 @@ function FlashProxy() { while (this.proxy_pairs.length > 0) this.proxy_pairs.pop().close(); this.badge.set_color("#777"); - this.badge.refresh(); }; this.die = function() { @@ -677,49 +676,31 @@ function escape_html(s) { function Badge() { /* Number of proxy pairs currently connected. */ this.num_proxy_pairs = 0; - /* Number of proxy pairs ever connected. */ - this.total_proxy_pairs = 0; - this.counter_text = document.createElement("td"); - - var div, img, table, tr, td; - - div = document.createElement("div"); - - img = document.createElement("img"); - img.setAttribute("src", "badge.png"); - div.appendChild(img); + var img, table, tr, td; table = document.createElement("table"); - div.appendChild(table) tr = document.createElement("tr"); table.appendChild(tr); td = document.createElement("td"); tr.appendChild(td); + img = document.createElement("img"); + img.setAttribute("src", "badge.png"); + td.appendChild(img); - this.counter_text = td; - this.elem = div; + this.elem = table; this.proxy_begin = function() { this.num_proxy_pairs++; - this.total_proxy_pairs++; - this.refresh(); }; this.proxy_end = function() { this.num_proxy_pairs--; - this.refresh(); } - this.refresh = function() { - this.counter_text.innerHTML = escape_html(String(this.total_proxy_pairs)); - }; - this.set_color = function(color) { this.elem.style.backgroundColor = color; }; - - this.refresh(); } function quote(s) {

1 0

[flashproxy/master] Shorter color specs for debug console.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 57379fa1524741088f8663da2338505ef0892d1b Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 15:40:59 2012 -0700 Shorter color specs for debug console. --- embed.html | 4 ++-- 1 files changed, 2 insertions(+), 2 deletions(-) diff --git a/embed.html b/embed.html index a5fd275..22c938c 100644 --- a/embed.html +++ b/embed.html @@ -45,8 +45,8 @@ body { width: 100%; height: 100%; overflow: auto; - color: #44cc44; - background-color: #001f0f; + color: #4c4; + background-color: #021; } </style> </head>

1 0

[flashproxy/master] Change the badge color while serving a client.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 15da5832034c02ce0d0c4ea57cea840765222f4e Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 15:40:36 2012 -0700 Change the badge color while serving a client. --- flashproxy.js | 7 +++++++ 1 files changed, 7 insertions(+), 0 deletions(-) diff --git a/flashproxy.js b/flashproxy.js index a188e96..4252548 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -691,11 +691,18 @@ function Badge() { this.elem = table; this.proxy_begin = function() { + if (this.num_proxy_pairs <= 0) { + this.idle_color = this.elem.getAttribute("background-color"); + } this.num_proxy_pairs++; + this.set_color("#28f"); }; this.proxy_end = function() { this.num_proxy_pairs--; + if (this.num_proxy_pairs <= 0) { + this.set_color(this.idle_color); + } } this.disable = function() {

1 0

[flashproxy/master] alt text for generated badge.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 02c704c44c43fcd1780cb9eb5cac6842797809f0 Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 15:44:53 2012 -0700 alt text for generated badge. --- flashproxy.js | 1 + 1 files changed, 1 insertions(+), 0 deletions(-) diff --git a/flashproxy.js b/flashproxy.js index 4252548..73133cd 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -686,6 +686,7 @@ function Badge() { tr.appendChild(td); img = document.createElement("img"); img.setAttribute("src", "badge.png"); + img.setAttribute("alt", "Internet freedom"); td.appendChild(img); this.elem = table;

1 0

[flashproxy/master] Make the badge back into a link to the info/demo page.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 00a32c291788bfe047e9e3be8c24b36038227682 Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 15:47:07 2012 -0700 Make the badge back into a link to the info/demo page. --- flashproxy.js | 8 ++++++-- 1 files changed, 6 insertions(+), 2 deletions(-) diff --git a/flashproxy.js b/flashproxy.js index 73133cd..eea3541 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -677,17 +677,21 @@ function Badge() { /* Number of proxy pairs currently connected. */ this.num_proxy_pairs = 0; - var img, table, tr, td; + var table, tr, td, a, img; table = document.createElement("table"); tr = document.createElement("tr"); table.appendChild(tr); td = document.createElement("td"); tr.appendChild(td); + a = document.createElement("a"); + a.setAttribute("href", "http://crypto.stanford.edu/flashproxy/"); + a.setAttribute("target", "_parent"); + td.appendChild(a); img = document.createElement("img"); img.setAttribute("src", "badge.png"); img.setAttribute("alt", "Internet freedom"); - td.appendChild(img); + a.appendChild(img); this.elem = table;

1 0

[flashproxy/master] Add badge.xcf.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 0dbac468a49265a4ff7b1169b47df6c84145e1d2 Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 17:08:54 2012 -0700 Add badge.xcf. --- badge.xcf | Bin 0 -> 1441 bytes 1 files changed, 0 insertions(+), 0 deletions(-) diff --git a/badge.xcf b/badge.xcf new file mode 100644 index 0000000..d12ff1f Binary files /dev/null and b/badge.xcf differ

1 0

[flashproxy/master] Put all the badge colors in CSS and control them through class names.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 60ab5e99e639fcd28b8869e8347be93c315d0407 Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 15:59:56 2012 -0700 Put all the badge colors in CSS and control them through class names. --- embed.html | 11 +++++++++++ flashproxy.js | 12 +++++------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/embed.html b/embed.html index 2acc381..184869f 100644 --- a/embed.html +++ b/embed.html @@ -22,8 +22,19 @@ body { border: 0; border-collapse: collapse; line-height: 0; +} +#flashproxy-badge.idle { background-color: #227; } +#flashproxy-badge.active { + background-color: #28f; +} +#flashproxy-badge.disabled { + background-color: #777; +} +#flashproxy-badge.dead { + background-color: #111; +} #flashproxy-badge td { margin: 0; padding: 0; diff --git a/flashproxy.js b/flashproxy.js index eea3541..422be89 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -694,28 +694,26 @@ function Badge() { a.appendChild(img); this.elem = table; + this.elem.className = "idle"; this.proxy_begin = function() { - if (this.num_proxy_pairs <= 0) { - this.idle_color = this.elem.getAttribute("background-color"); - } this.num_proxy_pairs++; - this.set_color("#28f"); + this.elem.className = "active"; }; this.proxy_end = function() { this.num_proxy_pairs--; if (this.num_proxy_pairs <= 0) { - this.set_color(this.idle_color); + this.elem.className = "idle"; } } this.disable = function() { - this.set_color("#777"); + this.elem.className = "disabled"; } this.die = function() { - this.set_color("#111"); + this.elem.className = "dead"; } this.set_color = function(color) {

1 0

[flashproxy/master] Provide an ✖ button to disable the badge.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 008bc8013eb2db6d11e6ac4bf3e814b62c1a4a51 Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 16:53:19 2012 -0700 Provide an ✖ button to disable the badge. Rather than clicking anywhere on the badge to disable it, click on the ✖ that appears when you hover over it. This allows the rest of the badge to be a link to the information page. --- embed.html | 17 +++++++++++++++++ flashproxy.js | 24 +++++++++++++++++++++--- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/embed.html b/embed.html index 184869f..1c4e619 100644 --- a/embed.html +++ b/embed.html @@ -36,11 +36,28 @@ body { background-color: #111; } #flashproxy-badge td { + position: relative; margin: 0; padding: 0; vertical-align: middle; text-align: center; } +#flashproxy-badge td .disable-button { + position: absolute; + margin: 0; + padding: 0; + border: 1px solid white; + color: white; + background-color: #B00; + top: 1px; + right: 1px; + width: 11px; + height: 11px; + text-align: center; + line-height: 11px; + font-size: 11px; + display: none; +} #flashproxy-badge a img { border: 0; } diff --git a/flashproxy.js b/flashproxy.js index 422be89..8f994f1 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -287,9 +287,16 @@ function make_websocket(addr) { function FlashProxy() { this.badge = new Badge(); - /* Click the badge to disable it. */ - this.badge.elem.onclick = function(event) { + this.badge.elem.onmouseover = function(event) { + this.badge.disable_button.style.display = "block"; + }.bind(this); + this.badge.elem.onmouseout = function(event) { + this.badge.disable_button.style.display = "none"; + }.bind(this); + /* Click a button to disable the badge. */ + this.badge.disable_button.onclick = function(event) { this.disable(); + this.badge.disable_button.parentNode.removeChild(this.badge.disable_button); }.bind(this); if (query.debug) this.badge_elem = debug_div; @@ -677,7 +684,7 @@ function Badge() { /* Number of proxy pairs currently connected. */ this.num_proxy_pairs = 0; - var table, tr, td, a, img; + var table, tr, td, div, a, img; table = document.createElement("table"); tr = document.createElement("tr"); @@ -696,6 +703,15 @@ function Badge() { this.elem = table; this.elem.className = "idle"; + a = document.createElement("a"); + a.setAttribute("href", "#"); + this.disable_button = document.createElement("div"); + /* HEAVY MULTIPLICATION X */ + this.disable_button.innerHTML = "✖"; + this.disable_button.className = "disable-button"; + a.appendChild(this.disable_button); + td.appendChild(a); + this.proxy_begin = function() { this.num_proxy_pairs++; this.elem.className = "active"; @@ -710,10 +726,12 @@ function Badge() { this.disable = function() { this.elem.className = "disabled"; + this.disable_button.style.display = "none"; } this.die = function() { this.elem.className = "dead"; + this.disable_button.style.display = "none"; } this.set_color = function(color) {

1 0

[flashproxy/master] Make abstract color-setting badge functions.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 6c1ffe81834ca762a1218795fe885cb7ce33a018 Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 15:23:16 2012 -0700 Make abstract color-setting badge functions. --- flashproxy.js | 12 ++++++++++-- 1 files changed, 10 insertions(+), 2 deletions(-) diff --git a/flashproxy.js b/flashproxy.js index 321a708..a188e96 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -455,12 +455,12 @@ function FlashProxy() { this.make_proxy_pair = function(client_addr, relay_addr) { }; while (this.proxy_pairs.length > 0) this.proxy_pairs.pop().close(); - this.badge.set_color("#777"); + this.badge.disable(); }; this.die = function() { puts("die"); - this.badge.set_color("#111"); + this.badge.die(); }; } @@ -698,6 +698,14 @@ function Badge() { this.num_proxy_pairs--; } + this.disable = function() { + this.set_color("#777"); + } + + this.die = function() { + this.set_color("#111"); + } + this.set_color = function(color) { this.elem.style.backgroundColor = color; };

1 0

[flashproxy/master] Change the badge color to a more mellow blue.
by dcf＠torproject.org 09 Jul '12

09 Jul '12

commit 2186407063a09e7f833885caf8f344d99702e96b Author: David Fifield <david(a)bamsoftware.com> Date: Mon Jul 9 15:39:17 2012 -0700 Change the badge color to a more mellow blue. --- embed.html | 2 +- 1 files changed, 1 insertions(+), 1 deletions(-) diff --git a/embed.html b/embed.html index aac0565..2acc381 100644 --- a/embed.html +++ b/embed.html @@ -22,7 +22,7 @@ body { border: 0; border-collapse: collapse; line-height: 0; - background-color: #d80; + background-color: #227; } #flashproxy-badge td { margin: 0;

1 0