Fixed UI inconsistencies when whitelisting/blacklisting through wide wildcard matching.

4 files changed, 22 insertions, 5 deletions

diff --git a/html/display_panel/content/display-panel.html b/html/display_panel/content/display-panel.html
index 5b9f99f..2e705ab 100644
--- a/html/display_panel/content/display-panel.html
+++ b/html/display_panel/content/display-panel.html
@@ -60,6 +60,7 @@
     <div id="info">
         <div id="site">
           <h2 class="site">This whole site <span></span></h2>
+          <div class="status"></div>
           <div class="buttons">
             <button class="whitelist" name="*">Whitelist</button>
             <button class="blacklist" name="*">Blacklist</button>
diff --git a/html/display_panel/content/main_panel.js b/html/display_panel/content/main_panel.js
index 9172265..75de6aa 100644
--- a/html/display_panel/content/main_panel.js
+++ b/html/display_panel/content/main_panel.js
@@ -173,8 +173,8 @@ function createList(data, group){
 */
 function refreshUI(report) {
   currentReport = report;
-
-  document.querySelector("#site").className = report.siteStatus || "";
+  let {siteStatus, listedSite} = report;
+  document.querySelector("#site").className = siteStatus || "";
   document.querySelector("#site h2").textContent =
     `This site ${report.site}`;
 
@@ -198,6 +198,15 @@ function refreshUI(report) {
     b.disabled = true;
   }
 
+  if (siteStatus && siteStatus !== "unknown") {
+    let statusLabel = siteStatus;
+    if (listedSite && listedSite !== report.site) statusLabel += ` via ${listedSite}`;
+    let status = document.querySelector("#site .status");
+    status.classList.add(siteStatus);
+    document.querySelector("#site .status").textContent = statusLabel;
+    document.querySelector("#site .forget").disabled = true;
+  }
+
   let noscript = scriptsCount === 0;
   document.body.classList.toggle("empty", noscript);
 }
diff --git a/html/display_panel/content/panel-styles.css b/html/display_panel/content/panel-styles.css
index 502323f..3257192 100644
--- a/html/display_panel/content/panel-styles.css
+++ b/html/display_panel/content/panel-styles.css
@@ -94,11 +94,14 @@ ul {
   display: initial;
 }
 
+.status {
+  margin: .2em;
+}
 
-button.whitelist {
+button.whitelist, .status.whitelisted {
   color: #080;
 }
-button.blacklist {
+button.blacklist, .status.blacklisted {
   color: #800;
 }
 button.forget {
diff --git a/main_background.js b/main_background.js
index 5943fb8..ba88f15 100644
--- a/main_background.js
+++ b/main_background.js
@@ -134,6 +134,10 @@ async function createReport(initializer) {
 	template.url = url;
 	template.site = ListStore.siteItem(url);
 	template.siteStatus = listManager.getStatus(template.site);
+	let list = {"whitelisted": whitelist, "blacklisted": blacklist}[template.siteStatus];
+	if (list) {
+		template.listedSite = ListManager.siteMatch(template.site, list);
+	}
 	return template;
 }
 
@@ -750,7 +754,7 @@ async function get_script(response, url, tabId = -1, whitelisted = false, index
 			let reason = site
 				? `All ${site} whitelisted by user`
 				: "Address whitelisted by user";
-			addReportEntry(tabId, url, {"whitelisted": [site, reason], url});
+			addReportEntry(tabId, url, {"whitelisted": [site || url, reason], url});
 		}
 		if (response.startsWith("javascript:"))
 			return result(response);