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 @@
+ + + + 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'),