luci-app-adblock: sync with adblock 3.5.4

backend:
* add low priority mode (nice level 10), disabled by default
* enhance 'Force DNS' to redirect ports 53, 853 and 5353

frontend:
* switch to dynamic XHR polling for runtime information and logfile
viewing
* add new 'Refresh' button to reload blocklists
* various cleanups & small fixes

Signed-off-by: Dirk Brenken <dev@brenken.org>

4 files changed, 231 insertions, 50 deletions

diff --git a/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm b/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm
index 93713c92b1..f59e518574 100644
--- a/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm
+++ b/applications/luci-app-adblock/luasrc/view/adblock/blocklist.htm
@@ -4,35 +4,20 @@ This is free software, licensed under the Apache License, Version 2.0
 -%>
 
 <%-
-local rowcnt = 1
-function rowstyle()
-	rowcnt = rowcnt + 1
-	return (rowcnt % 2) + 1
-end
-
-function width(o)
-	if o.width then
-		if type(o.width) == 'number' then
-			return ' style="width:%dpx"' % o.width
-		end
-		return ' style="width:%s"' % o.width
-	end
-	return ''
-end
+local anonclass  = (not self.anonymous or self.sectiontitle) and "named" or "anonymous"
 -%>
 
 <style type="text/css">
 .table.cbi-section-table .th,
 .table.cbi-section-table .td,
 .cbi-section-table-cell,
-.cbi-section-table-row
+.cbi-section-table-row,
+.tr[data-title]::before
 {
 	text-align:left;
 	vertical-align:top;
-	margin-right:auto;
 	margin-left:0px;
 	padding-left:2px;
-	line-height:20px;
 }
 .table.cbi-section-table .th
 {
@@ -42,6 +27,12 @@ end
 {
 	width:7em;
 }
+.cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
+.table.cbi-section-table input
+{
+	width:7em;
+}
+
 .cbi-input-text
 {
 	text-align:left;
@@ -49,36 +40,29 @@ end
 	outline:none;
 	box-shadow:none;
 	background:transparent;
-	height:20px;
-	width:10em;
+	width:7em;
 }
 </style>
 
-<%-
-	local anonclass = (not self.anonymous or self.sectiontitle) and "named" or "anonymous"
-	local titlename = ifattr(not self.anonymous or self.sectiontitle, "data-title", translate("Name"))
--%>
-
-<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
+<div class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
 	<% if self.title then -%>
 		<legend><%=self.title%></legend>
 	<%- end %>
 	<div class="cbi-section-descr"><%=self.description%></div>
 	<div class="cbi-section-node">
 		<div class="table cbi-section-table">
-			<div class="tr cbi-section-table-titles <%=anonclass%>"<%=titlename%>>
+			<div class="tr cbi-section-table-titles <%=anonclass%>">
 			<%- for i, k in pairs(self.children) do -%>
-				<div class="th cbi-section-table-cell"<%=width(k)%>>
+				<div class="th cbi-section-table-cell">
 					<%-=k.title-%>
 				</div>
 			<%- end -%>
 			</div>
-			<%- local isempty = true
+			<%- local section, scope, isempty = true
 				for i, k in ipairs(self:cfgsections()) do
-					local section = k
-					local sectionname = striptags((type(self.sectiontitle) == "function") and self:sectiontitle(section) or k)
+					section = k
+					local sectionname  = striptags((type(self.sectiontitle) == "function") and self:sectiontitle(section) or k)
 					local sectiontitle = ifattr(sectionname and (not self.anonymous or self.sectiontitle), "data-title", sectionname)
-
 					isempty = false
 					scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
 			-%>
@@ -95,4 +79,4 @@ end
 			<%- end -%>
 		</div>
 	</div>
-</fieldset>
+</div>
diff --git a/applications/luci-app-adblock/luasrc/view/adblock/logread.htm b/applications/luci-app-adblock/luasrc/view/adblock/logread.htm
index 082ec806f8..bb8d652fbc 100644
--- a/applications/luci-app-adblock/luasrc/view/adblock/logread.htm
+++ b/applications/luci-app-adblock/luasrc/view/adblock/logread.htm
@@ -5,16 +5,31 @@ This is free software, licensed under the Apache License, Version 2.0
 
 <%+header%>
 
-<div class="cbi-map">
-	<fieldset class="cbi-section">
-		<div class="cbi-section-descr"><%:This form shows the syslog output, pre-filtered for adblock related messages only.%></div>
-		<textarea id="logread_id" style="width: 100%; height: 450px; border: 1px solid #cccccc; padding: 5px; font-size: 12px; font-family: monospace; resize: none;" readonly="readonly" wrap="off" rows="<%=content:cmatch("\n")+2%>"><%=content:pcdata()%></textarea>
-	</fieldset>
-</div>
-
 <script type="text/javascript">
-	var textarea = document.getElementById('logread_id');
-	textarea.scrollTop = textarea.scrollHeight;
+//<![CDATA[
+	function log_update()
+	{
+		XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "adblock", "logread")%>', null,
+		function(x)
+		{
+			if (!x)
+			{
+				return;
+			}
+			var view       = document.getElementById("view_id");
+			view.value     = x.responseText;
+			view.scrollTop = view.scrollHeight;
+		});
+	}
+	window.onload = log_update();
+//]]>
 </script>
 
+<div class="cbi-map">
+	<div class="cbi-section">
+		<div class="cbi-section-descr"><%:The syslog output, pre-filtered for adblock related messages only.%></div>
+		<textarea id="view_id" style="width:100%;height:450px;border:1px solid #cccccc;padding:5px;font-size:12px;font-family:monospace;resize:none;" readonly="readonly" wrap="off" value=""></textarea>
+	</div>
+</div>
+
 <%+footer%>
diff --git a/applications/luci-app-adblock/luasrc/view/adblock/query.htm b/applications/luci-app-adblock/luasrc/view/adblock/query.htm
index 72dc16b1d8..1fcd145803 100644
--- a/applications/luci-app-adblock/luasrc/view/adblock/query.htm
+++ b/applications/luci-app-adblock/luasrc/view/adblock/query.htm
@@ -45,7 +45,7 @@ This is free software, licensed under the Apache License, Version 2.0
 
 <form method="post" action="<%=REQUEST_URI%>">
 	<div class="cbi-map">
-		<fieldset class="cbi-section">
+		<div class="cbi-section">
 			<div class="cbi-section-descr"><%:This form allows you to query active block lists for certain domains, e.g. for whitelisting.%></div>
 			<div style="width:33%; float:left;">
 				<input style="margin: 5px 0" type="text" value="google.com" name="input" />
@@ -53,12 +53,12 @@ This is free software, licensed under the Apache License, Version 2.0
 			</div>
 			<br style="clear:both" />
 			<br />
-		</fieldset>
+		</div>
 	</div>
-	<fieldset class="cbi-section" style="display:none">
-		<legend id="query_input"><%:Collecting data...%></legend>
+	<div class="cbi-section" style="display:none">
+		<h3 id="query_input"><%:Collecting data...%></h3>
 		<span id="query_output"></span>
-	</fieldset>
+	</div>
 </form>
 
 <%+footer%>
diff --git a/applications/luci-app-adblock/luasrc/view/adblock/runtime.htm b/applications/luci-app-adblock/luasrc/view/adblock/runtime.htm
index c01d9a5c08..bdcd0a1821 100644
--- a/applications/luci-app-adblock/luasrc/view/adblock/runtime.htm
+++ b/applications/luci-app-adblock/luasrc/view/adblock/runtime.htm
@@ -1,10 +1,192 @@
 <%#
 Copyright 2017-2018 Dirk Brenken (dev@brenken.org)
 This is free software, licensed under the Apache License, Version 2.0
+local sys     = require("luci.sys")
+
 -%>
+<style type="text/css">
+.runtime
+{
+	color:#0069d6;
+	font-weight:bold;
+	display:inline-block;
+	width:100%;
+	padding-top: 0.5rem;
+}
+</style>
+
+<script type="text/javascript">
+//<![CDATA[
+	function status_update(json)
+	{
+			var view  = document.getElementById("value_1");
+			var btn1  = document.getElementById("btn1");
+			var btn2  = document.getElementById("btn2");
+			var input = json.data.adblock_status;
+
+			view.innerHTML = input || "-";
+			if (input === "enabled")
+			{
+				btn1.value = "Suspend";
+				btn2.value = "Refresh";
+				btn1.disabled = false;
+				running(btn1_running, 0);
+				btn2.disabled = false;
+				running(btn2_running, 0);
+			}
+			else if (input === "paused")
+			{
+				btn1.value = "Resume";
+				btn2.value = "Refresh";
+				btn1.disabled = false;
+				running(btn1_running, 0);
+				btn2.disabled = false;
+				running(btn2_running, 0);
+			}
+			else
+			{
+				btn1.value = "Suspend";
+				btn2.value = "Refresh";
+				btn1.disabled = true;
+				btn2.disabled = true;
+			}
+			view = document.getElementById("value_2");
+			input = json.data.adblock_version;
+			view.innerHTML = input || "-";
+			view = document.getElementById("value_3");
+			input = json.data.fetch_utility;
+			view.innerHTML = input || "-";
+			view = document.getElementById("value_4");
+			input = json.data.dns_backend;
+			view.innerHTML = input || "-";
+			view = document.getElementById("value_5");
+			input = json.data.overall_domains;
+			view.innerHTML = input || "-";
+			view = document.getElementById("value_6");
+			input = json.data.last_rundate;
+			view.innerHTML = input || "-";
+	}
+
+	function btn_action(action)
+	{
+		var btn1 = document.getElementById("btn1");
+		var btn1_running = document.getElementById("btn1_running");
+		var btn2 = document.getElementById("btn2");
+		var btn2_running = document.getElementById("btn2_running");
+
+		btn1.disabled = true;
+		btn2.disabled = true;
+
+		if (action.value === "Refresh")
+		{
+			running(btn2_running, 1);
+		}
+		else
+		{
+			running(btn1_running, 1);
+		}
+
+		new XHR.get('<%=luci.dispatcher.build_url("admin", "services", "adblock")%>/action/' + action.value, null,
+		function(x)
+		{
+			if (!x)
+			{
+				return;
+			}
+		});
+	}
+
+	function running(element, state)
+	{
+		if (state === 1)
+		{
+			var running_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" />';
+			element.innerHTML = running_html;
+		}
+		else
+		{
+			element.innerHTML = '';
+		}
+	}
 
-<%+cbi/valueheader%>
+	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "adblock", "status")%>', null,
+	function(x, json_info)
+	{
+		if (!x || !json_info)
+		{
+			var btn1 = document.getElementById("btn1");
+			var btn2 = document.getElementById("btn2");
+			btn1.value = "Suspend";
+			btn2.value = "Refresh";
+			btn1.disabled = true;
+			btn2.disabled = false;
+			return;
+		}
+		status_update(json_info)
+	});
 
-<input name="runtime" id="runtime" type="text" class="cbi-input-text" style="outline:none;border:none;box-shadow:none;background:transparent;color:#0069d6;font-weight:bold;line-height:30px;height:30px;width:20em;" value="<%=self:cfgvalue(section)%>" disabled="disabled" />
+	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "adblock", "status")%>', null,
+	function(x, json_info)
+	{
+		if (!x || !json_info)
+		{
+			return;
+		}
+		status_update(json_info)
+	});
+//]]>
+</script>
 
-<%+cbi/valuefooter%>
+<h3>Runtime Information</h3>
+<div class="cbi-value" id="status_1">
+	<label class="cbi-value-title" for="status_1">Adblock Status</label>
+	<div class="cbi-value-field">
+		<span class="runtime" id="value_1">-</span>
+	</div>
+</div>
+<div class="cbi-value" id="status_2">
+	<label class="cbi-value-title" for="status_2">Adblock Version</label>
+	<div class="cbi-value-field">
+		<span class="runtime" id="value_2">-</span>
+	</div>
+</div>
+<div class="cbi-value" id="status_3">
+	<label class="cbi-value-title" for="status_3">Download Utility (SSL Library)</label>
+	<div class="cbi-value-field">
+		<span class="runtime" id="value_3">-</span>
+	</div>
+</div>
+<div class="cbi-value" id="status_4">
+	<label class="cbi-value-title" for="status_4">DNS Backend (DNS Directory)</label>
+	<div class="cbi-value-field">
+		<span class="runtime" id="value_4">-</span>
+	</div>
+</div>
+<div class="cbi-value" id="status_5">
+	<label class="cbi-value-title" for="status_5">Overall Domains</label>
+	<div class="cbi-value-field">
+		<span class="runtime" id="value_5">-</span>
+	</div>
+</div>
+<div class="cbi-value" id="status_6">
+	<label class="cbi-value-title" for="status_6">Last Run</label>
+	<div class="cbi-value-field">
+		<span class="runtime" id="value_6">-</span>
+	</div>
+</div>
+<hr />
+<div class="cbi-value" id="button_1">
+	<label class="cbi-value-title" for="button_1">Suspend / Resume Adblock</label>
+	<div class="cbi-value-field">
+		<input class="cbi-button cbi-button-reset" id="btn1" type="button" value="" onclick="btn_action(this)" />
+		<span id="btn1_running" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
+	</div>
+</div>
+<p />
+<div class="cbi-value" id="button_2">
+	<label class="cbi-value-title" for="button_2">Refresh Blocklist Sources</label>
+	<div class="cbi-value-field">
+		<input class="cbi-button cbi-button-apply" id="btn2" type="button" value="" onclick="btn_action(this)" />
+		<span id="btn2_running" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
+	</div>
+</div>