doc: add code comments

main.js

@@ -167,6 +167,9 @@ document.getElementById("parameters").addEventListener("input", function () {
 	saveParameters();
 }, false);
 
+/**
+ * @description Save the parameters, transform it into JSON and add auto-completion.
+ */
 function saveParameters() {
 	var tbl = $('#parameters tr').get().map(function (row) {
 		return $(row).find('td').get().map(function (cell) {
@@ -179,6 +182,12 @@ function saveParameters() {
 	setAutocompleteParameters();
 }
 
+/**
+ * @description This function is called on auto save, it updates the events with the current values of css and parameters.
+ * For each css line, we check if line is connected to a parameter. If it is, we update the event with the current value of the parameter and verify heritage.
+ * If line has no parameter but have CSS LSD template we update the event with the current value of the template.
+ * If line has no parameter and no CSS LSD template we update the event with the current value of the css as type 'pure'.
+ */
 function analyseAll() {
 	var isParameter = false;
 	chrome.storage.local.get(['parameters', 'css'], function (result) {
@@ -318,7 +327,7 @@ function analyseAll() {
 
 
 /**
- * Save CSS in editor via save button
+ * @description get CSS and analyse it to create events.
  */
 function updateCss() {
 	let cssStr = editor.getValue();
@@ -327,6 +336,9 @@ function updateCss() {
 	sendMessage({ type: 'update', data: false });
 }
 
+/**
+ * @description Activate CSS LSD.
+ */
 $('#onOff').on('click', function () {
 	activateButton = !activateButton;
 	chrome.storage.sync.set({ activate: activateButton }, function () {
@@ -342,9 +354,8 @@ $('#onOff').on('click', function () {
 });
 
 /**
- * Activate / Desactivate audio button
+ * @description  Activate / desactivate audio button.
  */
-
 $('.audioI').on('click', function () {
 	audioButton = !audioButton;
 	chrome.storage.sync.set({ audioI: audioButton });
@@ -353,15 +364,18 @@ $('.audioI').on('click', function () {
 });
 
 /**
- * Activate / Desactivate midi button
+ * @description Activate / desactivate midi button.
  */
-
 $('.midiI').on('click', function () {
 	midiButton = !midiButton;
 	chrome.storage.sync.set({ midiI: midiButton });
 	sendMessage({ type: 'midi', data: midiButton });
 	initUi();
 });
+
+/**
+ * @description Duplicate the current row and save the parameters.
+ */
 $(document).on('click', '.icon-tabler-plus', function () {
 	// Find parent row of the button and duplicate it
 	var row = $(this).parent().parent();
@@ -370,20 +384,22 @@ $(document).on('click', '.icon-tabler-plus', function () {
 	row.after(newRow);
 	saveParameters();
 });
+
+/**
+ * @description Remove a row, and save the parameters. If the row is the last one, add a new empty row.
+ */
 $(document).on('click', '.icon-tabler-minus', function () {
-	// Find parent row of the button and delete it
 	var row = $(this).parent().parent();
 	var table = row.parent();
 	row.remove();
 	saveParameters();
-	// If table has no row left, add a new one
 	if (table.children().length == 0) {
 		table.append("<tr><td>" + icon + plus + minus + "</td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td></tr>");
 	}
 });
 
 /**
- * Record loop button
+ * @description Send message to start/stop loop record with ID.
  */
 var record = false;
 $(document).on('click', '#record', function () {
@@ -397,6 +413,10 @@ $(document).on('click', '#record', function () {
 	}
 	sendMessage({ bool: record, number: id });
 });
+
+/**
+ * @description Send message to play loop with ID.
+ */
 $(document).on('click', '#loopPlay', function () {
 	if ($(this).html().includes('player-play')) {
 		$(this).html(pauseIcon);
@@ -409,12 +429,18 @@ $(document).on('click', '#loopPlay', function () {
 	id = $(this).val();
 	sendMessage({ type: 'playLoop', data: id });
 });
+
+/**
+ * @description Send message to reset loop with ID.
+ */
 $(document).on('click', '#loopReset', function () {
 	id = $(this).val();
 	sendMessage({ type: 'resetLoop', data: id });
 });
 
-
+/**
+ * @description Get editor and parameters, transform them in JSON and download it.
+ */
 $('#download').on('click', function () {
 	const filename = 'data.json';
 	chrome.storage.local.get(['parameters'], function (result) {
@@ -429,6 +455,9 @@ $('#download').on('click', function () {
 	});
 });
 
+/**
+ * @description Load JSON file and update the editor and other parameters
+ */
 $('#upload').on('change', function () {
 	const file = this.files[0];
 	const reader = new FileReader();
@@ -446,7 +475,7 @@ $('#upload').on('change', function () {
 });
 
 /**
- * Send message to the content script.
+ * @description Send message to the content script.
  * @param {dict} msg 
  */
 function sendMessage(msg) {
@@ -457,7 +486,6 @@ function sendMessage(msg) {
 	);
 }
 
-
 /**
  * Function trigger when new message received.
  * @param {type, data} message parameters 
@@ -506,14 +534,13 @@ $(document).tooltip({
 	trigger: 'hover'
 });
 $(function () {
-	var icons = {
-		header: "ui-icon-closed",
-		activeHeader: "ui-icon-open"
-	};
 	$("#accordion").accordion({
 		heightStyle: "content",
 		collapsible: true,
-		icons: icons
+		icons: {
+			header: "ui-icon-closed",
+			activeHeader: "ui-icon-open"
+		}
 	});
 	$("#toggle").button().on("click", function () {
 		if ($("#accordion").accordion("option", "icons")) {

style.css

@@ -94,7 +94,6 @@ body {
   }
 }
 
-
 #upload {
   width: 0.1px;
   height: 0.1px;
@@ -109,13 +108,11 @@ body {
   cursor: pointer; /* "hand" cursor */
 }
 
-
 .currentColor {
   fill: #fff;
   color: #fff;
 }
 
-
 @keyframes details-show {
   from {
     opacity: 0;
@@ -124,7 +121,8 @@ body {
 }
 h3 {
   border-top: rgba(255, 255, 255, 0.3) solid 1px;
-  padding: 6px;
+  padding: 10px 10px;
+  margin: 0;
   font-size: 17px;
   cursor: pointer;
 }
@@ -158,17 +156,20 @@ tbody > tr {
   cursor: pointer;
 }
 .ace_scrollbar {
-  right:4px;
+  right: 4px;
 }
-body::-webkit-scrollbar, .ace_scrollbar::-webkit-scrollbar {
+body::-webkit-scrollbar,
+.ace_scrollbar::-webkit-scrollbar {
   width: 10px;
 }
 
-body::-webkit-scrollbar-track, .ace_scrollbar::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track,
+.ace_scrollbar::-webkit-scrollbar-track {
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
-body::-webkit-scrollbar-thumb, .ace_scrollbar::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb,
+.ace_scrollbar::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 10px;
 }
@@ -225,7 +226,7 @@ a#doc {
   float: right;
 }
 
-.ui-icon-open{
+.ui-icon-open {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-x' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' /%3E%3Cline x1='6' y1='6' x2='18' y2='18' /%3E%3C/svg%3E");
   filter: invert(1);
   float: right;