diff options
Diffstat (limited to 'html/display_panel/content')
-rw-r--r-- | html/display_panel/content/display-panel.html | 1 | ||||
-rw-r--r-- | html/display_panel/content/main_panel.js | 24 | ||||
-rw-r--r-- | html/display_panel/content/panel-styles.css | 7 |
3 files changed, 27 insertions, 5 deletions
diff --git a/html/display_panel/content/display-panel.html b/html/display_panel/content/display-panel.html index 3221ded..7d1fdf5 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 85c9474..b96143b 100644 --- a/html/display_panel/content/main_panel.js +++ b/html/display_panel/content/main_panel.js @@ -59,6 +59,7 @@ document.querySelector("#info").addEventListener("click", e => { setTimeout(close, 100); return; } + if (button.tagName !== "BUTTON") button = button.closest("button"); if (button.matches(".toggle-source")) { let parent = button.parentNode; if (!parent.querySelector(".source").textContent) { @@ -69,10 +70,13 @@ document.querySelector("#info").addEventListener("click", e => { return; } if (!button.matches(".buttons > button")) return; + let domain = button.querySelector(".domain"); + let li = button.closest("li"); let entry = li && li._scriptEntry || [currentReport.url, "Page's site"]; let action = button.className; - let site = button.name === "*"; + let site = domain ? domain.textContent : button.name === "*" ? currentReport.site : ""; + if (site) { ([action] = action.split("-")); } @@ -170,8 +174,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}`; @@ -195,6 +199,20 @@ function refreshUI(report) { b.disabled = true; } + if (siteStatus && siteStatus !== "unknown") { + let siteContainer = document.querySelector("#site"); + let statusLabel = siteStatus; + if (listedSite && listedSite !== report.site) { + statusLabel += ` via ${listedSite}`; + siteContainer.querySelector(".forget").disabled = true; + } + let status = siteContainer.querySelector(".status"); + status.classList.add(siteStatus); + status.textContent = statusLabel; + } else { + document.querySelector("#site .status").textContent = ""; + } + 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 { |