From 7428fd390aa92c26d7979acdcbdb5baf752ccccb Mon Sep 17 00:00:00 2001
From: Jinyuan Huang <88757735+BernieHuang2008@users.noreply.github.com>
Date: Fri, 29 Sep 2023 06:45:39 +0000
Subject: [PATCH] add a delay-label to each results

---
 .../themes/simple/src/js/main/results.js      | 30 +++++++++++++++++++
 .../static/themes/simple/src/less/style.less  | 18 +++++++++++
 searx/templates/simple/macros.html            |  1 +
 3 files changed, 49 insertions(+)

diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js
index 4eae58435..99b1f9bcf 100644
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@@ -16,6 +16,36 @@
           }
         ));
 
+    function ping (url, callback) {
+      var start = performance.now();
+      var faviconUrl = new URL('/favicon.ico', url).href;
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', faviconUrl, true);
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+          var end = performance.now();
+          var delay = end - start;  // delay time in ms.
+          var level = delay <= 300 ? 'fast' : delay <= 1000 ? 'medium' : 'slow';
+          callback(level);
+        }
+      };
+      xhr.timeout = 3000;
+      xhr.ontimeout = function () {
+        callback('slow');
+      }
+      xhr.send();
+    }
+
+    // check network connection
+    d.querySelectorAll('article.result').forEach(article => {
+      var url = article.querySelector('span.url_i1').innerText;
+      ping(url, function (level) {
+        var delayElement = article.querySelector('span.delay');
+        delayElement.innerText = delayElement.dataset[level];
+        delayElement.classList.add(level);
+      });
+    })
+
     searxng.on('.btn-collapse', 'click', function () {
       var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
       var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 8bb10bb06..42e240852 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -417,6 +417,24 @@ article[data-vim-selected].category-social {
     .ltr-margin-right(0.5rem);
     .ltr-margin-left(0);
   }
+
+  span.delay {
+    padding: 2px;
+    margin-left: 0.5rem;
+    border-radius: 2px;
+
+    &.fast {
+      color: #0f06;
+    }
+
+    &.medium {
+      color: #ff06;
+    }
+
+    &.slow {
+      color: #f006;
+    }
+  }
 }
 
 .small_font {
diff --git a/searx/templates/simple/macros.html b/searx/templates/simple/macros.html
index 7e3c05e5d..60ee31537 100644
--- a/searx/templates/simple/macros.html
+++ b/searx/templates/simple/macros.html
@@ -43,6 +43,7 @@
 <div class="engines">
   {% for engine in result.engines %}<span>{{ engine }}</span>{% endfor %}
   {{ result_link(cache_url + result.url, icon_small('ellipsis-vertical-outline') + _('cached'), "cache_link") }}&lrm; {% if proxify and proxify_results %} {{ result_link(proxify(result.url), icon('link') + _('proxied'), "proxyfied_link") }} {% endif %}
+  <span class="delay" data-fast="Fast" data-medium="Medi" data-Slow="Slow"></span>
 </div>{{- '' -}}
 <div class="break"></div>{{- '' -}}
 {%- endmacro -%}