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 @@
+
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 = {};