[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.

3 files changed, 64 insertions, 1 deletions

diff --git a/searx/static/themes/oscar/src/less/pointhi/oscar.less b/searx/static/themes/oscar/src/less/pointhi/oscar.less
index 037bfa59b..6f92a0791 100644
--- a/searx/static/themes/oscar/src/less/pointhi/oscar.less
+++ b/searx/static/themes/oscar/src/less/pointhi/oscar.less
@@ -1,3 +1,5 @@
+@import "variables.less";
+
 @import "footer.less";
 
 @import "checkbox.less";
diff --git a/searx/static/themes/oscar/src/less/pointhi/preferences.less b/searx/static/themes/oscar/src/less/pointhi/preferences.less
index f3a6bee22..cb63674ed 100644
--- a/searx/static/themes/oscar/src/less/pointhi/preferences.less
+++ b/searx/static/themes/oscar/src/less/pointhi/preferences.less
@@ -14,6 +14,66 @@
     z-index: 1000000; 
 }
 
-th:hover .engine-tooltip, .engine-tooltip:hover {
+th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
     display: inline-block;
 }
+
+/* stacked-bar-chart */
+.stacked-bar-chart {
+    margin: 0;
+    padding: 0 0.125rem 0 3rem;
+    width: 100%;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: fill;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    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;
+}
+
diff --git a/searx/static/themes/oscar/src/less/pointhi/variables.less b/searx/static/themes/oscar/src/less/pointhi/variables.less
new file mode 100644
index 000000000..991f03098
--- /dev/null
+++ b/searx/static/themes/oscar/src/less/pointhi/variables.less
@@ -0,0 +1 @@
+@stacked-bar-chart: rgb(0, 0, 0);