[mod] oscar: /preferences , engines tab: report engine times

* display the median time instead of the average.
* add a "Reliability" column (sum up the metrics and the checker results).
* the "selected language", "SafeSearch", "Time range" values are displayed as "broken" when the checker tests fail.

searx/static/themes/simple/less/definitions.less

@@ -19,6 +19,9 @@
 @color-warning: #dbba34;
 @color-warning-background: lighten(@color-warning, 40%);
 
+@color-success: #42db34;
+@color-success-background: lighten(@color-success, 40%);
+
 /// General
 
 @color-font: #444;

searx/static/themes/simple/less/preferences.less

@@ -105,9 +105,10 @@
     font-size: 14px;
     font-weight: normal;
     z-index: 1000000; 
+    text-align: left;
   }
 
-  th:hover .engine-tooltip, .engine-tooltip:hover {
+  th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
     display: inline-block;
   }
   

searx/static/themes/simple/less/style.less

@@ -4,6 +4,8 @@
 * To convert "style.less" to "style.css" run: $make styles
 */
 
+@stacked-bar-chart: rgb(0, 0, 0);
+
 @import "normalize.less";
 
 @import "definitions.less";

searx/static/themes/simple/less/toolkit.less

@@ -36,6 +36,14 @@ html.js .show_if_nojs {
   background-color: @color-error-background;
 }
 
+.warning {
+  background: @color-warning-background;
+}
+
+.success {
+  background: @color-success-background;
+}
+
 .badge {
   display: inline-block;
   color: #fff;
@@ -465,4 +473,62 @@ select {
 	-webkit-transform: rotate(360deg);
 	transform: rotate(360deg);
     }
-}
+}
+
+/* -- stacked bar chart -- */
+.stacked-bar-chart {
+  margin: 0;
+  padding: 0 0.125rem 0 4rem;
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  display: inline-flex;
+}
+
+.stacked-bar-chart-value {
+  width: 3rem;
+  display: inline-block;
+  position: absolute;
+  padding: 0 0.5rem;   
+  text-align: right;
+}
+
+.stacked-bar-chart-base {
+  display:flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: unset;
+}
+
+.stacked-bar-chart-median {
+  .stacked-bar-chart-base();
+  background: @stacked-bar-chart;
+  border: 1px solid fade(@stacked-bar-chart, 90%);
+  padding: 0.3rem 0;
+}
+
+.stacked-bar-chart-rate80 {
+  .stacked-bar-chart-base();
+  background: transparent;
+  border: 1px solid fade(@stacked-bar-chart, 30%);
+  padding: 0.3rem 0;
+}
+
+.stacked-bar-chart-rate95 {
+  .stacked-bar-chart-base();
+  background: transparent;
+  border-bottom: 1px dotted fade(@stacked-bar-chart, 50%);
+  padding: 0;
+}
+
+.stacked-bar-chart-rate100 {
+  .stacked-bar-chart-base();
+  background: transparent;
+  border-left: 1px solid fade(@stacked-bar-chart, 90%);
+  padding: 0.4rem 0;
+  width: 1px;
+}