add comment field

background.js

@@ -31,7 +31,7 @@ else
 			var modifyTable=JSON.parse(localStorage.getItem("modifyTable"));
 			for (var to_modify of modifyTable)
 				{
-					headers.push({action:to_modify[0],header_name:to_modify[1],header_value:to_modify[2],status:to_modify[3]});
+					headers.push({action:to_modify[0],header_name:to_modify[1],header_value:to_modify[2],comment:"",status:to_modify[3]});
 				}
 			config = {format_version:"1.0",target_page:localStorage.getItem('targetPage'),headers:headers};
 			// save old config in new format 
@@ -42,7 +42,7 @@ else
 		{
 				console.log("Load default config");
 				var headers = [];
-				headers.push({action:"add",header_name:"test_header_name",header_value:"test_header_value",status:"on"});
+				headers.push({action:"add",header_name:"test_header_name",header_value:"test_header_value",comment:"test",status:"on"});
 				config = {format_version:"1.0",target_page:"https://httpbin.org/*",headers:headers};
 				// save configuration 
 				localStorage.setItem("config",JSON.stringify(config));

popup/config.html

@@ -29,6 +29,7 @@
 		<td> Action </td>		
 		<td> Header Field Name </td>
 		<td> Header Field Value </td>
+		<td> Comment </td>
 		<td> Status </td>
 	</tr>
   </table>

popup/config.js

@@ -14,7 +14,7 @@ var started = "off";
 
 window.onload = function() {
 	var config = JSON.parse(localStorage.getItem("config"));	
-	for (var to_add of config.headers) appendLine(to_add.action,to_add.header_name,to_add.header_value,to_add.status);
+	for (var to_add of config.headers) appendLine(to_add.action,to_add.header_name,to_add.header_value,to_add.comment,to_add.status);
 	document.getElementById('save_button').addEventListener('click',function (e) {save_data();});
 	document.getElementById('export_button').addEventListener('click',function (e) {export_data();});
 	document.getElementById('import_button').addEventListener('click',function (e) {import_data(e);});
@@ -26,11 +26,12 @@ window.onload = function() {
 } ;
 
 
-function appendLine(action,header_name,header_value,status) {
+function appendLine(action,header_name,header_value,comment,status) {
 
 var html = "<td><select id=\"select_action" + line_number + "\" disable=false><option value=\"add\">add</option><option value=\"modify\">modify</option><option value=\"delete\">delete</option></select></td>";
 html = html + "<td><input id=\"header_name"+ line_number + "\"></input></td>";
 html = html + "<td><input id=\"header_value"+ line_number + "\"></input></td>";
+html = html + "<td><input id=\"comment"+ line_number + "\"></input></td>";
 html = html + "<td><select id=\"select_status" + line_number + "\"><option value=\"on\"> on </option><option value=\"off\">off</option></select></td>";
 html = html + "<td><input type=\"button\" value=\"DELETE\" id=\"delete_button" + line_number + "\"></input> </td>";
 
@@ -42,6 +43,7 @@ document.getElementById("select_action"+line_number).value = action;
 document.getElementById("select_status"+line_number).value = status;
 document.getElementById("header_name"+line_number).value = header_name;
 document.getElementById("header_value"+line_number).value = header_value;
+document.getElementById("comment"+line_number).value = comment;
 var line_number_to_delete = line_number;
 document.getElementById('delete_button'+line_number).addEventListener('click',function (e) {delete_line(line_number_to_delete)});
 line_number++;
@@ -57,8 +59,9 @@ function create_configuration_data()
 		var action = tr_elements[i].childNodes[0].childNodes[0].value;
 		var header_name = tr_elements[i].childNodes[1].childNodes[0].value;
 		var header_value = tr_elements[i].childNodes[2].childNodes[0].value;
-		var status = tr_elements[i].childNodes[3].childNodes[0].value;
-		headers.push({action:action,header_name:header_name,header_value:header_value,status:status});
+		var comment = tr_elements[i].childNodes[3].childNodes[0].value;
+		var status = tr_elements[i].childNodes[4].childNodes[0].value;
+		headers.push({action:action,header_name:header_name,header_value:header_value,comment:comment,status:status});
 
 		}
 	var to_export = {format_version:"1.0",target_page:document.getElementById('targetPage').value,headers:headers};
@@ -72,27 +75,6 @@ function save_data ()
 	browser.runtime.sendMessage("reload");
 	}
 
-/**
-function save_data () 
-	{
-	var tr_elements = document.querySelectorAll("#config_tab tr");
-	var to_save = [];
-	for (i=1;i<tr_elements.length;i++)  // ignore line 1 which is the table header
-		{
-		var line_to_save = [];
-		line_to_save.push(tr_elements[i].childNodes[0].childNodes[0].value); // select_action 
-		line_to_save.push(tr_elements[i].childNodes[1].childNodes[0].value); // header_name
-		line_to_save.push(tr_elements[i].childNodes[2].childNodes[0].value); // header_value
-		line_to_save.push(tr_elements[i].childNodes[3].childNodes[0].value); // status
-		to_save.push(line_to_save);
-		}
-	localStorage.setItem("modifyTable",JSON.stringify(to_save));
-	localStorage.setItem("targetPage",document.getElementById('targetPage').value);
-	browser.runtime.sendMessage("reload");
-	}
-**/
-
-
 
 function export_data()
 	{
@@ -173,11 +155,12 @@ function delete_line(line_number_to_delete)
 				document.getElementById("select_action"+i).value = document.getElementById("select_action"+j).value;
 				document.getElementById("header_name"+i).value = document.getElementById("header_name"+j).value;
 				document.getElementById("header_value"+i).value = document.getElementById("header_value"+j).value;
+				document.getElementById("comment"+i).value = document.getElementById("comment"+j).value;
 				document.getElementById("select_status"+i).value = document.getElementById("select_status"+j).value;
 				}
 			}
 	var Node_to_delete = document.getElementById("line"+(line_number-1));
-    	Node_to_delete.parentNode.removeChild(Node_to_delete);
+    Node_to_delete.parentNode.removeChild(Node_to_delete);
 	line_number--;
 	}