From 453174a18b563b2412c42d554d52e8b35e6d005d Mon Sep 17 00:00:00 2001
From: kkapsner <github@mail.kkapsner.de>
Date: Sun, 22 Dec 2024 00:53:15 +0100
Subject: [PATCH] Improve settings export

For #705
---
 _locales/en/messages.json |  4 ++--
 options/export.css        | 22 ++++++++++++++++++----
 options/export.html       |  1 +
 options/export.js         |  6 ++++++
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 73b7acc..9e9e68f 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1456,11 +1456,11 @@
 	},
 	
 	"exportSettings_title": {
-		"message": "Export settings",
+		"message": "CanvasBlocker settings export",
 		"description": ""
 	},
 	"exportSettings_description": {
-		"message": "",
+		"message": "This allows you to copy your current settings. You can also paste and modify them here. If something is invalid the textarea will get a red background and the change is not stored.",
 		"description": ""
 	},
 	
diff --git a/options/export.css b/options/export.css
index 9a9e589..8346edf 100644
--- a/options/export.css
+++ b/options/export.css
@@ -1,12 +1,26 @@
-html, body {
+html {
 	height: 100%;
 	padding: 0;
 	margin: 0;
 }
-#settings {
-	width: 100%;
-	box-sizing: border-box;
+
+body {
 	height: 100%;
+	margin: 0;
+	padding: 0.5em;
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: 100%;
+	grid-template-rows: max-content auto;
+}
+
+#description {
+	margin: 0.5em 0em;
+}
+
+#settings {
+	box-sizing: border-box;
+	margin: 0;
 }
 #settings.invalid {
 	background-color: var(--input-error-background-color);
diff --git a/options/export.html b/options/export.html
index 94b2268..0de672c 100644
--- a/options/export.html
+++ b/options/export.html
@@ -9,6 +9,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	</head>
 	<body>
+		<div id="description"></div>
 		<textarea id="settings"></textarea>
 		<script src="../lib/require.js"></script>
 		<script src="../lib/logging.js"></script>
diff --git a/options/export.js b/options/export.js
index 4984da9..fb454fe 100644
--- a/options/export.js
+++ b/options/export.js
@@ -8,6 +8,12 @@
 	const logging = require("../lib/logging");
 	const settingsMigration = require("../lib/settingsMigration");
 	require("../lib/theme").init();
+	const extension = require("../lib/extension");
+	document.querySelector("head title").textContent = extension.getTranslation("exportSettings_title");
+	document.getElementById("description").appendChild(
+		extension.parseTranslation(extension.getTranslation("exportSettings_description"))
+	);
+	
 	const input = document.getElementById("settings");
 	settings.onloaded(function(){
 		const data = {};