commit 8b0d64ab54c7dc88e1d1135d0edd76363451d00b Author: Raphael Bergmann raphael@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>