From eb99101f3529a86b628cdf5635da0378e1aefd95 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 23 Nov 2020 15:45:00 +0300
Subject: [PATCH] inform if the found style doesn't match site url

---
 _locales/en/messages.json |  6 ++++++
 popup.html                |  6 ++++++
 popup/search-results.css  | 11 ++++++++++-
 popup/search-results.js   |  9 +++++++++
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 8033e399..21b9dc2f 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1280,6 +1280,12 @@
     "message": "No styles found for this site.",
     "description": "Error text in the popup when inline search didn't find any site-specific styles"
   },
+  "searchResultNotMatching": {
+    "message": "The style is installed but it doesn't apply to the current site URL."
+  },
+  "searchResultNotMatchingNote": {
+    "message": "Try asking the author of this userstyle to add the URL.\n\nYou can also open the style in the manager and edit it yourself,\nbut be aware it disables automatic updates for this style."
+  },
   "searchResultRating": {
     "message": "Rating",
     "description": "Text for label that shows the search result's rating"
diff --git a/popup.html b/popup.html
index f41f4910..5a894c16 100644
--- a/popup.html
+++ b/popup.html
@@ -172,6 +172,12 @@
     <div class="search-result-empty"></div>
   </template>
 
+  <template data-id="searchResultNotMatching">
+    <p class="not-matching-explainer"
+       i18n-text="searchResultNotMatching"
+       i18n-title="searchResultNotMatchingNote"></p>
+  </template>
+
   <script src="js/polyfill.js"></script>
   <script src="js/msg.js"></script>
   <script src="js/messaging.js"></script>
diff --git a/popup/search-results.css b/popup/search-results.css
index ba0bf97c..c20847ec 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -36,8 +36,9 @@ body.search-results-shown {
 
 .search-result,
 .search-result-empty {
+  --pad: 8px;
   position: relative;
-  padding: 8px 8px 21px;
+  padding: var(--pad) var(--pad) 21px;
   min-height: 160px;
 }
 
@@ -209,6 +210,14 @@ body.search-results-shown {
   margin-top: 4px;
 }
 
+.not-matching-explainer {
+  padding: var(--pad);
+  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad);
+  border-bottom: 2px solid hsla(25, 100%, 60%, .5);
+  background-color: hsla(25, 100%, 60%, .2);
+  cursor: help;
+}
+
 .search-results-nav {
   flex-direction: row;
   text-align: center;
diff --git a/popup/search-results.js b/popup/search-results.js
index a5dd4bde..ad243d4f 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -366,6 +366,15 @@ window.addEventListener('showStyles:done', () => {
       $('.search-result-status', entry).textContent = '';
       hide('.search-result-customize', entry);
     }
+    const notMatching = installedId > 0 && !$.entry(installedId);
+    if (notMatching !== entry.classList.contains('not-matching')) {
+      entry.classList.toggle('not-matching');
+      if (notMatching) {
+        entry.prepend(t.template.searchResultNotMatching.cloneNode(true));
+      } else {
+        entry.firstElementChild.remove();
+      }
+    }
     Object.assign($('.search-result-screenshot', entry), {
       onclick: isInstalled ? uninstall : install,
       title: isInstalled ? '' : t('installButton'),