From 85c586884f49bb1efd2f1a2391c1231a0ea9d09b Mon Sep 17 00:00:00 2001
From: hackademix <giorgio@maone.net>
Date: Jan 15 2022 18:21:40 +0000
Subject: Wrapping group human-readable labels and sorting.


---

diff --git a/common/levels.js b/common/levels.js
index d0f2d13..9e340aa 100644
--- a/common/levels.js
+++ b/common/levels.js
@@ -52,6 +52,7 @@ var wrapping_groups = {
 	groups: [
 		{
 			name: "time_precision",
+			label: "Time precision",
 			description: "Limit the precision of high resolution time stamps (Date, Performance, events, Gamepad API, Web VR API)",
 			description2: ["If you enable Geolocation API wrapping below, timestamps provided by the Geolocation API will be wrapped as well"],
 			options: [
diff --git a/common/popup.js b/common/popup.js
index 29d6484..f437545 100644
--- a/common/popup.js
+++ b/common/popup.js
@@ -128,10 +128,17 @@ async function init() {
 			function initTweaks() {
 				tweaks.innerHTML = "";
 				tweaks.appendChild(document.getElementById("tweak-head").content);
-				for (let [group_id, tlev_id] of Object.entries(Object.assign(defaultTweaks(), current_level.tweaks || {}))) {
-					let group = wrapping_groups.option_map[group_id];
+				let tweakEntries =  Object.entries(Object.assign(defaultTweaks(), current_level.tweaks || {}))
+					.map(([group_id, tlev_id]) => {
+						let group = wrapping_groups.option_map[group_id];
+						let label = group.label || group.name;
+						return { group_id, tlev_id, label, group, toString() { return this.label } };
+					}
+				).sort(new Intl.Collator('en').compare);
+
+				for (let { group_id, tlev_id, label, group} of tweakEntries) {
 					let tweakRow = document.getElementById("tweak-row").content.cloneNode(true);
-					tweakRow.querySelector("label").textContent = group_id;
+					tweakRow.querySelector("label").textContent = label;
 					tweakRow.querySelector(".hits").innerHTML = `<em>TODO: from FPD</em>`;
 					let tlevUI = tweakRow.querySelector(".tlev");
 					let status = tweakRow.querySelector(".status");