Options page fine tuning

Author: kkapsner

_locales/de/messages.json

@@ -140,6 +140,11 @@
 		"description": ""
 	},
 
+	"hideSetting": {
+		"message": "Hier klicken, um diese Einstellung zu verbergen.",
+		"description": ""
+	},
+	
 	"displayHiddenSettings_title": {
 		"message": "Versteckte Einstellungen anzeigen",
 		"description": ""

_locales/en/messages.json

@@ -140,6 +140,11 @@
 		"description": ""
 	},
 
+	"hideSetting": {
+		"message": "Click here to hide this setting.",
+		"description": ""
+	},
+	
 	"displayHiddenSettings_title": {
 		"message": "Display hidden settings",
 		"description": ""

options/options.css

@@ -177,12 +177,17 @@ td.hideColumn {
 	width: 45px;
 }
 
+.hideContent {
+	cursor: pointer;
+}
+
 .content.hideContent {
 	position: relative;
 }
 .content .hide, .displayHidden {
 	opacity: 0;
 	position: absolute;
+	cursor: pointer;
 }
 .content .hide ~ .display, .displayHidden ~ .display {
 	display: inline-block;
@@ -218,9 +223,7 @@ td.hideColumn {
 
 #search {
 	box-sizing: border-box;
-	width: 100%;
-	border: none;
-	background-color: transparent;
+	width: calc(100% - 10px);
 }
 .searching .settingRow {
 	display: none;

options/optionsGui.js

@@ -335,6 +335,7 @@
 	function createHide(setting){
 		var label = document.createElement("label");
 		label.className = "content hideContent";
+		label.title = browser.i18n.getMessage("hideSetting");
 		var input = document.createElement("input");
 		input.type = "checkbox";
 		input.className = "hide";
@@ -382,6 +383,7 @@
 		hideHeadCell.className = "hideColumn";
 		hideHeadCell.title = browser.i18n.getMessage(displayHidden.name + "_description");
 		const label = document.createElement("label");
+		label.className = "hideContent";
 		const input = createInput(displayHidden);
 		input.className = "displayHidden";
 		label.appendChild(input);