Merge pull request #81 from return42/csp-bar-graph

 [fix] make /stats more CSP compliant

3 files changed, 57 insertions, 55 deletions

diff --git a/searx/templates/__common__/new_issue.html b/searx/templates/__common__/new_issue.html
index d983417b0..1b28804af 100644
--- a/searx/templates/__common__/new_issue.html
+++ b/searx/templates/__common__/new_issue.html
@@ -3,7 +3,7 @@
     <input name="title" type="hidden" value="Bug: {{ engine_name }} engine">
     <input name="labels" type="hidden" value="bug">
     <input name="template" type="hidden" value="bug-report.md">
-    <textarea name="body" style="display: none;">{{- '' -}}
+    <textarea name="body" class="issue-hide">{{- '' -}}
 
 **Version of SearXNG, commit number if you are using on master branch and stipulate if you forked SearXNG**
 <!-- If you are running on master branch using git execute this command
diff --git a/searx/templates/oscar/stats.html b/searx/templates/oscar/stats.html
index 49c776ea8..94117b673 100644
--- a/searx/templates/oscar/stats.html
+++ b/searx/templates/oscar/stats.html
@@ -24,18 +24,18 @@
                         {% include 'oscar/messages/no_data_available.html' %}
                     </div>
                 {% else %}
-                    <table class="table table-hover table-condensed table-striped">
+                    <table class="table table-hover table-condensed table-striped engine-stats">
                         <tr>
-                            <th scope="col" style="width:20rem;">{{ th_sort('name', _("Engine name")) }}</th>
-                            <th scope="col" style="width:7rem; text-align: right;">{{ th_sort('score', _('Scores')) }}</th>
-                            <th scope="col">{{ th_sort('result_count', _('Result count')) }}</th>
-                            <th scope="col">{{ th_sort('time', _('Response time')) }}</th>
-                            <th scope="col" style="text-align: right;">{{ th_sort('reliability', _('Reliability')) }}</th>
+                            <th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th>
+                            <th scope="col" class="engine-score">{{ th_sort('score', _('Scores')) }}</th>
+                            <th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th>
+                            <th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th>
+                            <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
                         </tr>
                         {% for engine_stat in engine_stats.get('time', []) %}
                         <tr>
-                            <td><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
-                            <td style="text-align: right;">
+                            <td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
+                            <td class="engine-score">
                                 {%- if engine_stat.score -%}
                                 <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
                                 <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
@@ -43,21 +43,21 @@
                                 </div>
                                 {%- endif -%}
                             </td>
-                            <td>
+                            <td class="result-count">
                                 {%- if engine_stat.result_count -%}
-                                <span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
-                                <span class="stacked-bar-chart" aria-hidden="true">{{- "" -}}
-                                    <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-                                </span>
+                                <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
+                                <div class="bar-chart-graph" aria-hidden="true">{{- "" -}}
+                                    <div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}}
+                                </div>
                                 {%- endif -%}
                             </td>
-                            <td>
+                            <td class="response-time">
                                 {%- if engine_stat.total -%}
-                                <span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
-                                <span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
-                                    <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-                                    <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
-                                </span>{{- "" -}}
+                                <div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}}
+                                <div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
+                                    <div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}}
+                                    <div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
+                                </div>
                                 <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
                                     <table class="table table-striped">
                                         <tr>
@@ -88,7 +88,7 @@
                                 </div>
                                 {%- endif -%}
                             </td>
-                            <td style="text-align: right;"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
+                            <td class="engine-reliability"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
                         </tr>
                         {% endfor %}
                     </table>
@@ -105,20 +105,20 @@
                             {% set ns.first = false %}
                             <h3>{% if secondary %}{{ _('Warnings') }}{% else %}{{ _('Errors and exceptions') }}{% endif %}</h3>
                         {% endif %}
-                        <table class="table table-striped table-bordered">
-                            <tbody style="padding-top: 1rem;">
+                        <table class="table table-striped table-bordered engine-error">
+                            <tbody>
                                 <tr>
                                     {%- if error.exception_classname -%}
-                                        <th scope="row" style="width: 10rem">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
+                                        <th scope="row" class="engine-error-type">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
                                     {%- elif error.log_message -%}
-                                        <th scope="row" style="width: 10rem">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
+                                        <th scope="row" class="engine-error-type">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
                                     {%- endif -%}
-                                    <th scope="row" style="width: 10rem">{{ _('Percentage') }}</th><td style="width: 10rem">{{ error.percentage }}</td>
+                                    <th scope="row" class="engine-error-type">{{ _('Percentage') }}</th><td class="engine-error-type">{{ error.percentage }}</td>
                                 </tr>
                                 {% if error.log_parameters and error.log_parameters != (None, None, None) %}<tr><th scope="row">{{ _('Parameter') }}</th>{{- '' -}}
                                     <td colspan="3">
                                         {%- for param in error.log_parameters -%}
-                                            <span style="border-right: 1px solid gray; padding: 0 1rem 0 0; margin: 0 0 0 0.5rem;">{{ param }}</span>
+                                            <span class="log_parameters">{{ param }}</span>
                                         {%- endfor -%}
                                     </td>
                                 </tr>
@@ -135,7 +135,7 @@
                 <h3>{{ _('Checker') }}</h3>
                 <table class="table table-striped table-bordered">
                     <tr>
-                        <th scope="col" style="width: 10rem">{{ _('Failed test') }}</th>
+                        <th scope="col" class="failed-test">{{ _('Failed test') }}</th>
                         <th scope="col">{{ _('Comment(s)') }}</th>
                     </tr>
                     {% for test_name, results in engine_reliabilities[selected_engine_name].checker.items() %}
diff --git a/searx/templates/simple/stats.html b/searx/templates/simple/stats.html
index 098a54065..67c9c79cc 100644
--- a/searx/templates/simple/stats.html
+++ b/searx/templates/simple/stats.html
@@ -23,18 +23,18 @@
 {% if not engine_stats.get('time') %}
 {{ _('There is currently no data available. ') }}
 {% else %}
-<table style="max-width: 1280px; margin: 0 auto 0 0;">
+<table class="engine-stats">
     <tr>
-        <th scope="col" style="width:20rem;">{{ th_sort('name', _("Engine name")) }}</th>
-        <th scope="col" style="width:7rem; text-align: right;">{{ th_sort('score', _('Scores')) }}</th>
-        <th scope="col">{{ th_sort('result_count', _('Result count')) }}</th>
-        <th scope="col">{{ th_sort('time', _('Response time')) }}</th>
-        <th scope="col" style="text-align: right;">{{ th_sort('reliability', _('Reliability')) }}</th>
+        <th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th>
+        <th scope="col" class="engine-score">{{ th_sort('score', _('Scores')) }}</th>
+        <th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th>
+        <th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th>
+        <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
     </tr>
     {% for engine_stat in engine_stats.get('time', []) %}
     <tr>
-        <td><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
-        <td style="text-align: right;">
+        <td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
+        <td class="engine-score">
             {% if engine_stat.score %}
             <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
             <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
@@ -42,21 +42,23 @@
             </div>
             {% endif %}
         </td>
-        <td>
+        <td class="engine-result-count">
             {%- if engine_stat.result_count -%}
-            <span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
-            <span class="stacked-bar-chart" aria-hidden="true">{{- "" -}}
-                <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-            </span>
+
+            <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
+        <div class="bar-chart-graph" aria-hidden="true">
+          <div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}}
+        </div>
             {%- endif -%}
         </td>
-        <td>
+        <td class="response-time">
             {%- if engine_stat.total -%}
-            <span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
-            <span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
-                <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-                <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
-            </span>{{- "" -}}
+
+            <div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}}
+        <div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">
+              <div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}}
+              <div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
+        </div>
             <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
                 <table>
                     <tr>
@@ -87,7 +89,7 @@
             </div>
             {%- endif -%}
         </td>
-        <td style="text-align: right;"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
+        <td class="engine-reliability"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
     </tr>
     {% endfor %}
 </table>
@@ -103,20 +105,20 @@
                         {% set ns.first = false %}
                         <h3>{% if secondary %}{{ _('Warnings') }}{% else %}{{ _('Errors and exceptions') }}{% endif %}</h3>
                     {% endif %}
-                    <table style="max-width: 1280px; margin: 1rem; border: 1px solid gray;">
-                        <tbody style="padding-top: 1rem;">
+                    <table class="engine-error">
+                        <tbody>
                             <tr>
                                 {%- if error.exception_classname -%}
-                                    <th scope="row" style="width: 10rem">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
+                                    <th scope="row" class="engine-error-type">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
                                 {%- elif error.log_message -%}
-                                    <th scope="row" style="width: 10rem">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
+                                    <th scope="row" class="engine-error-type">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
                                 {%- endif -%}
-                                <th scope="row" style="width: 10rem">{{ _('Percentage') }}</th><td style="width: 10rem">{{ error.percentage }}</td>
+                                <th scope="row" class="engine-error-type">{{ _('Percentage') }}</th><td class="engine-error-type">{{ error.percentage }}</td>
                             </tr>
                             {% if error.log_parameters and error.log_parameters != (None, None, None) %}<tr><th scope="row">{{ _('Parameter') }}</th>{{- '' -}}
                                 <td colspan="3">
                                     {%- for param in error.log_parameters -%}
-                                        <span style="border-right: 1px solid gray; padding: 0 1rem 0 0; margin: 0 0 0 0.5rem;">{{ param }}</span>
+                                        <span class="log_parameters">{{ param }}</span>
                                     {%- endfor -%}
                                 </td>
                             </tr>
@@ -133,7 +135,7 @@
             <h3>{{ _('Checker') }}</h3>
             <table>
                 <tr>
-                    <th scope="col" style="width: 10rem">{{ _('Failed test') }}</th>
+                    <th scope="col" class="failed-test">{{ _('Failed test') }}</th>
                     <th scope="col">{{ _('Comment(s)') }}</th>
                 </tr>
                 {% for test_name, results in engine_reliabilities[selected_engine_name].checker.items() %}