[tor-commits] [atlas/master] Explain relay flags in detail view using tooltips

irl at torproject.org irl at torproject.org
Tue Jan 31 22:53:38 UTC 2017


commit 8b0d64ab54c7dc88e1d1135d0edd76363451d00b
Author: Raphael Bergmann <raphael at cc-ltd.net>
Date:   Thu Jan 19 18:34:20 2017 +0100

    Explain relay flags in detail view using tooltips
---
 css/style.css                 | 14 ++++++++++++++
 js/models/relay.js            | 29 +++++++++++++++++------------
 js/views/details/main.js      |  1 +
 templates/details/bridge.html |  4 +++-
 templates/details/router.html |  6 ++++--
 templates/search/do.html      |  2 +-
 6 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/css/style.css b/css/style.css
index 71a63b9..3c67c24 100644
--- a/css/style.css
+++ b/css/style.css
@@ -52,3 +52,17 @@
 a.alleged {
 	color: #FE9F30;
 }
+
+
+span.flags {
+    display:inline-block;
+    margin: 0 10px 5px 0;
+}
+span.flags img {
+    position:relative;
+    top:2px;
+}
+
+.tooltip * {
+    text-align:left;
+}
diff --git a/js/models/relay.js b/js/models/relay.js
index c8604db..e374ae4 100644
--- a/js/models/relay.js
+++ b/js/models/relay.js
@@ -14,41 +14,46 @@ define([
             var model = this;
             _.each(flags, function(flag) {
                 if (flag == "Authority") {
-                    output.push([flag,"award_stroke_"+size[2]]);
+                    output.push([flag,"award_stroke_"+size[2], "This relay is a directory authority."]);
                 }
                 if (flag == "BadExit") {
                     model.set({badexit: true});
-                    output.push([flag, "denied_"+size[0]]);
+                    output.push([flag, "denied_"+size[0], "This relay is believed to be useless as an exit node (because its ISP censors it, because it is behind a restrictive proxy, or for some similar reason)."]);
                 }
                 if (flag == "Fast") {
-                    output.push([flag,"bolt_"+size[0]]);
+                    output.push([flag,"bolt_"+size[0], "This relay is suitable for high-bandwidth circuits."]);
                 }
                 if (flag == "Guard") {
-                    output.push([flag,"share_"+size[0]]);
+                    output.push([flag,"share_"+size[0], "This relay is suitable for use as an entry guard."]);
                 }
                 if (flag == "HSDir") {
-                    output.push([flag,"book_alt_"+size[0]]);
+                    output.push([flag,"book_alt_"+size[0], "This relay is considered a v2 hidden service directory."]);
                 }
                 if (flag == "Named") {
-                    output.push([flag,"info_"+size[2]]);
+                    output.push([flag,"info_"+size[2], "This relay's identity-nickname mapping is canonical, and this authority binds names."]);
                 }
+                /* added for future use, but we need an icon...
+                if (flag == "NoEdConsensus") {
+                    output.push([flag,"xxx_"+size[2], "An Ed25519 key in the relay's descriptor or microdesriptor does not reflect authority consensus."]);
+                }
+                */
                 if (flag == "Running") {
-                    output.push([flag,"fork_"+size[1]]);
+                    output.push([flag,"fork_"+size[1], "This relay is currently usable."]);
                 }
                 if (flag == "Stable") {
-                    output.push([flag,"cd_"+size[0]]);
+                    output.push([flag,"cd_"+size[0], "This relay is suitable for long-lived circuits."]);
                 }
                 if (flag == "V2Dir") {
-                    output.push([flag,"book_"+size[1]]);
+                    output.push([flag,"book_"+size[1], "This relay implements the v2 directory protocol or higher."]);
                 }
                 if (flag == "Valid") {
-                    output.push([flag,"check_alt_"+size[0]]);
+                    output.push([flag,"check_alt_"+size[0], "This relay has been 'validated'."]);
                 }
                 if (flag == "Unnamed") {
-                    output.push([flag,"question_mark_"+size[2]]);
+                    output.push([flag,"question_mark_"+size[2], "Another relay has bound the name used by this relay, and this authority binds names."]);
                 }
                 if (flag == "Exit") {
-                    output.push([flag,"cloud_download_"+size[0]]);
+                    output.push([flag,"cloud_download_"+size[0], "This relay is more useful for building general-purpose exit circuits than for relay circuits."]);
                 }
             });
             return output;
diff --git a/js/views/details/main.js b/js/views/details/main.js
index 97846be..d9a25b1 100644
--- a/js/views/details/main.js
+++ b/js/views/details/main.js
@@ -243,6 +243,7 @@ define([
             $("#loading").hide();
             $(".flag .tooltip").hide();
             $(".tip").popover();
+            $(".flags").tooltip();
             $(".flag").hover(function(){
                 $(this).children(".tooltip").show();
 
diff --git a/templates/details/bridge.html b/templates/details/bridge.html
index 99ffdd3..d10fa8e 100644
--- a/templates/details/bridge.html
+++ b/templates/details/bridge.html
@@ -44,8 +44,10 @@
 
     <dt><span class="tip" data-content="Flags that the directory authorities assigned to this bridge." data-original-title="Bridge flags">Flags</span></dt>
     <dd><% _.each(relay.get('flags'), function(flag) { %>
-        <img class="inline" alt="" src="img/flags/<%= flag[1] %>.png">
+    <span class="flags" title="<%= flag[0] %><br /><%= flag[2] %>">
+        <img class="inline" alt="" src="img/flags/<%= flag[1] %>.png"/>
         <span class="inline"><%= flag[0] %></span>
+    </span>
     <% }); %>
     </dd>
 
diff --git a/templates/details/router.html b/templates/details/router.html
index f87001f..c343b8b 100644
--- a/templates/details/router.html
+++ b/templates/details/router.html
@@ -76,8 +76,10 @@
 
     <dt><span class="tip" data-content="Flags that the directory authorities assigned to this relay." data-original-title="Relay flags">Flags</span></dt>
     <dd><% _.each(relay.get('flags'), function(flag) { %>
-        <img class="inline" alt="" src="img/flags/<%= flag[1] %>.png">
-        <span class="inline"><%= flag[0] %></span>
+        <span class="flags" title="<%= flag[0] %><br /><%= flag[2] %>">
+            <img class="inline" alt="" src="img/flags/<%= flag[1] %>.png"/>
+            <span class="inline"><%= flag[0] %></span>
+        </span>
     <% }); %>
     </dd>
 
diff --git a/templates/search/do.html b/templates/search/do.html
index ebb2508..2e2a71b 100644
--- a/templates/search/do.html
+++ b/templates/search/do.html
@@ -93,7 +93,7 @@
 			<td><%= relay.get('or_address') %></td>
 			<td>
             <% _.each(relay.get('flags'), function(flag) { %>
-            <img class="inline flags" rel="tooltip" src="img/flags/<%= flag[1] %>.png" alt="<%= flag[0] %>" title="<%= flag[0] %>"/>
+            <img class="inline flags" rel="tooltip" src="img/flags/<%= flag[1] %>.png" alt="<%= flag[0] %>" title="<%= flag[0] %><br /><%= flag[2] %>"/>
             <% }); %>
             </td>
 			<td><%= relay.get('or_port') %></td>





More information about the tor-commits mailing list