[atlas/master] Disables graphs when SVG is disabled (Fixes: #19654) - tor-commits

21 Nov 2017

commit 43ca361235394dcc622e817a441a63c2ee0c1abe
Author: Iain R. Learmonth irl@fsfe.org
Date:   Tue Nov 21 21:22:28 2017 +0000
Disables graphs when SVG is disabled (Fixes: #19654)
---
 js/views/details/main.js      | 107 ++++++++++++++++++++++--------------------
 templates/details/bridge.html |   2 +-
 templates/details/router.html |   2 +-
 3 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/js/views/details/main.js b/js/views/details/main.js
index 059fbd6..9e31274 100644
--- a/js/views/details/main.js
+++ b/js/views/details/main.js
@@ -179,58 +179,65 @@ define([
                 compiledTemplate = _.template(routerDetailsTemplate, data);
             document.title = "Relay Search: " + this.model.get('nickname');
             this.el.html(compiledTemplate);
-            var graph = this.graph;
-            var plot = this.plot;
-            this.graph.lookup_bw(this.model.fingerprint, {
-                success: function() {
-                    graph.parse_bw_data(graph.data);
-                    graphs = ['bw_month',
-                            'bw_months', 'bw_year', 'bw_years'];
-                    _.each(graphs, function(g) {
-                        var data = [graph.get(g).write, graph.get(g).read];
-                        var labels = ["written bytes per second", "read bytes per second"];
-                        var legendPos = [[140, 0], [310, 0]];
-                        var colors = ["#edc240", "#afd8f8"];
-                        plot(g, data, labels, legendPos, colors, "s", ".4s");
-                    });
-                }
-            });
-            if (!this.model.get('is_bridge')) {
-                this.graph.lookup_weights(this.model.fingerprint, {
-                    success: function() {
-                        graph.parse_weights_data(graph.data);
-                        graphs = ['weights_month',
-                                'weights_months', 'weights_year', 'weights_years'];
-                        _.each(graphs, function(g) {
-                            var data = [graph.get(g).cw, graph.get(g).middle,
-                                        graph.get(g).guard, graph.get(g).exit];
-                            var labels = ["consensus weight fraction",
-                                          "middle probability",
-                                          "guard probability",
-                                          "exit probability"];
-                            var legendPos = [[28, 0], [309, 0], [194, 0], [429, 0]];
-                            var colors = ["#afd8f8", "#edc240",
-                                          "#cb4b4b", "#4da74d"];
-                            plot(g, data, labels, legendPos, colors, ".4%", ".6%");
-                        });
-                    }
-                });
+            canSvg = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg%27,%27svg%27).createSVGRect);
+            if (canSvg) {
+              var graph = this.graph;
+              var plot = this.plot;
+              this.graph.lookup_bw(this.model.fingerprint, {
+                  success: function() {
+                      graph.parse_bw_data(graph.data);
+                      graphs = ['bw_month',
+                              'bw_months', 'bw_year', 'bw_years'];
+                      _.each(graphs, function(g) {
+                          var data = [graph.get(g).write, graph.get(g).read];
+                          var labels = ["written bytes per second", "read bytes per second"];
+                          var legendPos = [[140, 0], [310, 0]];
+                          var colors = ["#edc240", "#afd8f8"];
+                          plot(g, data, labels, legendPos, colors, "s", ".4s");
+                      });
+                  }
+              });
+
+              if (!this.model.get('is_bridge')) {
+                  this.graph.lookup_weights(this.model.fingerprint, {
+                      success: function() {
+                          graph.parse_weights_data(graph.data);
+                          graphs = ['weights_month',
+                                  'weights_months', 'weights_year', 'weights_years'];
+                          _.each(graphs, function(g) {
+                              var data = [graph.get(g).cw, graph.get(g).middle,
+                                          graph.get(g).guard, graph.get(g).exit];
+                              var labels = ["consensus weight fraction",
+                                            "middle probability",
+                                            "guard probability",
+                                            "exit probability"];
+                              var legendPos = [[28, 0], [309, 0], [194, 0], [429, 0]];
+                              var colors = ["#afd8f8", "#edc240",
+                                            "#cb4b4b", "#4da74d"];
+                              plot(g, data, labels, legendPos, colors, ".4%", ".6%");
+                          });
+                      }
+                  });
+              } else {
+                  this.graph.lookup_clients(this.model.fingerprint, {
+                      success: function() {
+                          graph.parse_clients_data(graph.data);
+                          graphs = ['clients_month',
+                                  'clients_months', 'clients_year', 'clients_years'];
+                          _.each(graphs, function(g) {
+                              var data = [graph.get(g).average];
+                              var labels = ["average number of connected clients"];
+                              var legendPos = [[3, 0]];
+                              var colors = ["#edc240"];
+                              plot(g, data, labels, legendPos, colors, "g", ".2g");
+                          });
+                      }
+                  });
+              }
             } else {
-                this.graph.lookup_clients(this.model.fingerprint, {
-                    success: function() {
-                        graph.parse_clients_data(graph.data);
-                        graphs = ['clients_month',
-                                'clients_months', 'clients_year', 'clients_years'];
-                        _.each(graphs, function(g) {
-                            var data = [graph.get(g).average];
-                            var labels = ["average number of connected clients"];
-                            var legendPos = [[3, 0]];
-                            var colors = ["#edc240"];
-                            plot(g, data, labels, legendPos, colors, "g", ".2g");
-                        });
-                    }
-                });
+              $(".history-tabs").hide();
+              $("#history-tab-content").html("Graphs cannot be shown as your browser does not support Scalable Vector Graphics (SVG). This is the case when Tor Browser is in High Security mode.");
             }
$(".tip").tooltip({ placement: 'right' });
diff --git a/templates/details/bridge.html b/templates/details/bridge.html
index a6a6cd9..f8b7f8e 100644
--- a/templates/details/bridge.html
+++ b/templates/details/bridge.html
@@ -95,7 +95,7 @@
   <li id="history-5y-tab" class="history-tabs"><a onclick="$('.history').hide();$('#history-5y').fadeIn();$('.history-tabs').removeClass('active');$('#history-5y-tab').addClass('active');">5 Years</a></li>
 </ul>
-<div class="tab-content">
+<div class="tab-content" id="history-tab-content">
   <div id="history-1m" class="history tab-pane active">
     <div class="row">
         <div class="col-md-6">
diff --git a/templates/details/router.html b/templates/details/router.html
index 40771ff..c193388 100644
--- a/templates/details/router.html
+++ b/templates/details/router.html
@@ -169,7 +169,7 @@
   <li id="history-5y-tab" class="history-tabs"><a onclick="$('.history').hide();$('#history-5y').fadeIn();$('.history-tabs').removeClass('active');$('#history-5y-tab').addClass('active');">5 Years</a></li>
 </ul>
-<div class="tab-content">
+<div class="tab-content" id="history-tab-content">
   <div id="history-1m" class="history tab-pane active">
     <div class="row">
         <div class="col-md-6">

    