[flashproxy/master] Provide an ✖ button to disable the badge.

[dcf at torproject.org]

commit 008bc8013eb2db6d11e6ac4bf3e814b62c1a4a51
Author: David Fifield <david at 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 = "&#x2716;";
+    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) {