treewide: rework uci change display

 - Use native rpcd uci changes format instead of incompletely converting
   back and forth between the old and the new format
 - Rework uci changelog template to print the equivalent uci commands
   for the various changes
 - Rework theme headers to properly count the uncomitted changes
 - Rework theme CSS to properly style new changelog

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

5 files changed, 74 insertions, 65 deletions

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 644a47fee..260f5e31c 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -23,7 +23,7 @@ body {
 	padding: 5px;
 }
 
-h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
+h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, ins, q, s,
 small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
 form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
 .table, .tbody, .tfoot, .thead, .tr, .th, .td {
@@ -1956,47 +1956,51 @@ div.cbi-value var,
 }
 
 .uci-change-list {
-	font-family: monospace;
+	line-height: 170%;
+	white-space: pre;
 }
 
+.uci-change-list del,
 .uci-change-list ins,
-.uci-change-legend-label ins {
+.uci-change-list var,
+.uci-change-legend-label del,
+.uci-change-legend-label ins,
+.uci-change-legend-label var {
 	text-decoration: none;
-	border: 1px solid #0f0;
-	background-color: #cfc;
-	display: block;
+	font-family: monospace;
+	font-style: normal;
+	border: 1px solid #ccc;
+	background: #eee;
 	padding: 2px;
+	display: block;
+	line-height: 15px;
+	margin-bottom: 1px;
+}
+
+.uci-change-list ins,
+.uci-change-legend-label ins {
+	border-color: #0f0;
+	background: #cfc;
 }
 
 .uci-change-list del,
 .uci-change-legend-label del {
-	text-decoration: none;
-	border: 1px solid #f00;
-	background-color: #fcc;
-	display: block;
-	font-style: normal;
-	padding: 2px;
+	border-color: #f00;
+	background: #fcc;
 }
 
 .uci-change-list var,
 .uci-change-legend-label var {
-	text-decoration: none;
-	border: 1px solid #ccc;
-	background-color: #eee;
-	display: block;
-	font-style: normal;
-	padding: 2px;
-	line-height: 19px;
-	white-space: pre;
+	border-color: #ccc;
+	background: #eee;
 }
 
 .uci-change-list var ins,
 .uci-change-list var del {
-	display: inline;
-	/*border: none;*/
-	white-space: pre;
-	font-style: normal;
-	padding: 0px;
+	display: inline-block;
+	border: none;
+	width: 100%;
+	padding: 0;
 }
 
 .uci-change-legend {
@@ -2016,12 +2020,17 @@ div.cbi-value var,
 	width: 10px;
 	height: 10px;
 	display: block;
+	position: relative;
 }
 
 .uci-change-legend-label var ins,
 .uci-change-legend-label var del {
-	line-height: 6px;
 	border: none;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	right: 2px;
+	bottom: 2px;
 }
 
 html body.apply-overlay-active {
diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
index 6ad32efb4..4347f133a 100644
--- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
+++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
@@ -136,12 +136,9 @@
 		if tree.nodes[category] and tree.nodes[category].ucidata then
 			local ucichanges = 0
 
+			local i, j
 			for i, j in pairs(require("luci.model.uci").cursor():changes()) do
-				for k, l in pairs(j) do
-					for m, n in pairs(l) do
-						ucichanges = ucichanges + 1;
-					end
-				end
+				ucichanges = ucichanges + #j
 			end
 
 			if ucichanges > 0 then
diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
index e6047614f..c070b1a61 100644
--- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm
+++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm
@@ -160,13 +160,9 @@
 		-- calculate the number of unsaved changes
 		if tree.nodes[category] and tree.nodes[category].ucidata then
 			local ucichanges = 0
-
+			local i, j
 			for i, j in pairs(require("luci.model.uci").cursor():changes()) do
-				for k, l in pairs(j) do
-					for m, n in pairs(l) do
-						ucichanges = ucichanges + 1;
-					end
-				end
+				ucichanges = ucichanges + #j
 			end
 
 			if ucichanges > 0 then
diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index e7952338e..5becfc5ba 100644
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -1397,44 +1397,49 @@ select + .cbi-button {
 
 .uci-change-list {
 	font-family: monospace;
+	white-space: pre;
 }
 
+.uci-change-list del,
 .uci-change-list ins,
-.uci-change-legend-label ins {
+.uci-change-list var,
+.uci-change-legend-label del,
+.uci-change-legend-label ins,
+.uci-change-legend-label var {
 	text-decoration: none;
-	border: 1px solid #00FF00;
-	background-color: #CCFFCC;
-	display: block;
+	font-style: normal;
+	border: 1px solid #ccc;
+	background: #eee;
 	padding: 2px;
+	display: block;
+	line-height: 15px;
+	margin-bottom: 1px;
+}
+
+.uci-change-list ins,
+.uci-change-legend-label ins {
+	border-color: #0f0;
+	background: #cfc;
 }
 
 .uci-change-list del,
 .uci-change-legend-label del {
-	text-decoration: none;
-	border: 1px solid #FF0000;
-	background-color: #FFCCCC;
-	display: block;
-	font-style: normal;
-	padding: 2px;
+	border-color: #f00;
+	background: #fcc;
 }
 
 .uci-change-list var,
 .uci-change-legend-label var {
-	text-decoration: none;
-	border: 1px solid #CCCCCC;
-	background-color: #EEEEEE;
-	display: block;
-	font-style: normal;
-	padding: 2px;
+	border-color: #ccc;
+	background: #eee;
 }
 
 .uci-change-list var ins,
 .uci-change-list var del {
-	/*display: inline;*/
+	display: inline-block;
 	border: none;
-	white-space: pre;
-	font-style: normal;
-	padding: 0px;
+	width: 100%;
+	padding: 0;
 }
 
 .uci-change-legend {
@@ -1452,15 +1457,20 @@ select + .cbi-button {
 .uci-change-legend-label>var {
 	float: left;
 	margin-right: 4px;
-	width: 10px;
-	height: 10px;
+	width: 12px;
+	height: 12px;
 	display: block;
+	position: relative;
 }
 
 .uci-change-legend-label var ins,
 .uci-change-legend-label var del {
-	line-height: 6px;
 	border: none;
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	right: 1px;
+	bottom: 1px;
 }
 
 
diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
index e77f9a4bf..6fc657ddc 100644
--- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
+++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
@@ -129,12 +129,9 @@
 	local function render_changes()
 		if tree.nodes[category] and tree.nodes[category].ucidata then
 			local ucic = 0
+			local i, j
 			for i, j in pairs(require("luci.model.uci").cursor():changes()) do
-				for k, l in pairs(j) do
-					for m, n in pairs(l) do
-						ucic = ucic + 1;
-					end
-				end
+				ucic = ucic + #j
 			end
 
 			if ucic > 0 then