From b3bb10d334a7aff5ef91d49e9e90f27bff6ec4a6 Mon Sep 17 00:00:00 2001
From: kkapsner <github@mail.kkapsner.de>
Date: Sat, 11 Nov 2017 23:34:59 +0100
Subject: [PATCH] Cleaned up options page

---
 _locales/de/messages.json  |  9 ++++++++
 _locales/en/messages.json  |  9 ++++++++
 lib/settingDefinitions.js  |  4 ++++
 options/options.css        | 42 +++++++++++++++++++++++++++++++++++---
 options/options.js         |  6 +++++-
 options/optionsGui.js      | 14 +++++++++----
 options/settingsDisplay.js |  3 +++
 releaseNotes.txt           |  1 +
 8 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/_locales/de/messages.json b/_locales/de/messages.json
index 681b2b2..56ea47d 100644
--- a/_locales/de/messages.json
+++ b/_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": ""
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7db245a..f99f8e4 100644
--- a/_locales/en/messages.json
+++ b/_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": ""
diff --git a/lib/settingDefinitions.js b/lib/settingDefinitions.js
index 4f9fa43..7bd92a5 100644
--- a/lib/settingDefinitions.js
+++ b/lib/settingDefinitions.js
@@ -118,6 +118,10 @@
 			name: "displayAdvancedSettings",
 			defaultValue: false
 		},
+		{
+			name: "displayDescriptions",
+			defaultValue: false
+		},
 		{
 			name: "isStillDefault",
 			defaultValue: true
diff --git a/options/options.css b/options/options.css
index edba211..95b3581 100644
--- a/options/options.css
+++ b/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;
diff --git a/options/options.js b/options/options.js
index 5f09ab6..33b9b94 100644
--- a/options/options.js
+++ b/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);
diff --git a/options/optionsGui.js b/options/optionsGui.js
index 2eae93e..7a289ad 100644
--- a/options/optionsGui.js
+++ b/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;
 	}
 
diff --git a/options/settingsDisplay.js b/options/settingsDisplay.js
index 6f92f36..d2076f6 100644
--- a/options/settingsDisplay.js
+++ b/options/settingsDisplay.js
@@ -7,6 +7,9 @@
 		{
 			"name": "displayAdvancedSettings"
 		},
+		{
+			"name": "displayDescriptions"
+		},
 		{
 			"name": "blockMode"
 		},
diff --git a/releaseNotes.txt b/releaseNotes.txt
index 55da5c2..8d3f123 100644
--- a/releaseNotes.txt
+++ b/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