Cleaned up options page

_locales/de/messages.json

@@ -26,6 +26,15 @@
 		"description": ""
 	},
 	
+	"displayDescriptions_title": {
+		"message": "Beschreibungen anzeigen",
+		"description": ""
+	},
+	"displayDescriptions_description": {
+		"message": "Zeigt die Beschreibungen der Einstellungen an.",
+		"description": ""
+	},
+	
 	"allowPDFCanvas_description": {
 		"message": "Die native pdf.js verwendet <canvas> um den Inhalt von PDFs anzuzeigen. Wenn viele Nachfragedialoge erscheinen oder die PDF-Ansicht nicht funktioniert, müssen diese erlaubt werden.",
 		"description": ""

_locales/en/messages.json

@@ -26,6 +26,15 @@
 		"description": ""
 	},
 	
+	"displayDescriptions_title": {
+		"message": "Display descriptions",
+		"description": ""
+	},
+	"displayDescriptions_description": {
+		"message": "Displays the descriptions of the settings.",
+		"description": ""
+	},
+	
 	"allowPDFCanvas_description": {
 		"message": "Firefox's native PDF reader uses the API to display PDF content. If too many ask dialogs appear or the PDF reader does not work at all, these have to be allowed.",
 		"description": ""

lib/settingDefinitions.js

@@ -118,6 +118,10 @@
 			name: "displayAdvancedSettings",
 			defaultValue: false
 		},
+		{
+			name: "displayDescriptions",
+			defaultValue: false
+		},
 		{
 			name: "isStillDefault",
 			defaultValue: true

options/options.css

@@ -1,8 +1,10 @@
 .settings {
-	table-layout: fixed;
 	width: 100%;
 	border-spacing: 0;
 }
+.settings.displayDescriptions {
+	table-layout: fixed;
+}
 .settings * {
 	vertical-align: top;
 }
@@ -12,12 +14,46 @@
 }
 
 .settings .settingRow .content {
-	overflow: hidden;
+	overflow: visible;
 	padding: 0.5em 0;
 	border-top: 1px solid #c1c1c1;
+	position: relative;
 }
 
-.settings .settingRow .description {
+.settings.hideDescriptions .settingRow .info {
+	margin: 0 0.5em;
+	border-radius: 100%;
+	background-color: gray;
+	width: 1em;
+	height: 1em;
+	display: inline-block;
+	text-align: center;
+	line-height: 1em;
+	font-weight: bold;
+	color: white;
+}
+.settings.hideDescriptions .settingRow .info::after {
+	content: "i";
+}
+.settings.hideDescriptions .settingRow .info .description {
+	display: none;
+}
+.settings.hideDescriptions .settingRow .info:hover .description {
+	display: block;
+	position: absolute;
+	box-sizing: border-box;
+	top: 90%;
+	left: 5%;
+	max-width: 90%;
+	z-index: 10;
+	border: 1px solid black;
+	color: black;
+	background-color: lightgrey;
+	padding: 0.5em;
+	text-align: left;
+	font-weight: normal;
+}
+.settings.displayDescriptions .settingRow .description {
 	color: graytext;
 	margin-inline-start: 2em;
 	white-space: pre-wrap;

options/options.js

@@ -26,7 +26,11 @@
 	};
 	
 	var table = document.createElement("table");
-	table.className = "settings";
+	table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
+	settings.on("displayDescriptions", function(){
+		table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
+	});
+	
 	document.body.appendChild(table);
 	settingsDisplay.forEach(function(display){
 		var setting = settings.getDefinition(display.name);

options/optionsGui.js

@@ -24,11 +24,17 @@
 		title.textContent = browser.i18n.getMessage(setting.name + "_title");
 		c.appendChild(title);
 
-		var description = document.createElement("div");
-		description.className = "description";
-		description.textContent = browser.i18n.getMessage(setting.name + "_description");
-		c.appendChild(description);
+		var descriptionText = browser.i18n.getMessage(setting.name + "_description");
+		if (descriptionText){
+			var info = document.createElement("div");
+			info.className = "info";
+			c.appendChild(info);
 
+			var description = document.createElement("div");
+			description.className = "description";
+			description.textContent = descriptionText;
+			info.appendChild(description);
+		}
 		return c;
 	}
 

options/settingsDisplay.js

@@ -7,6 +7,9 @@
 		{
 			"name": "displayAdvancedSettings"
 		},
+		{
+			"name": "displayDescriptions"
+		},
 		{
 			"name": "blockMode"
 		},

releaseNotes.txt

@@ -3,6 +3,7 @@ Version 0.4.1:
 		- improved design of the page action display
 		- Enabled Firefox ESR
 		- persistent random generator data is always stored in the settings but cleared on restart if the store flag is not set
+		- cleaned up the options page
 	
 	new features:
 		- setting to set an interval to clear the persistent random generator data