Add information and improve styling of options page (#193)

package-lock.json

@@ -6,6 +6,7 @@
 		"": {
 			"dependencies": {
 				"one-event": "^3.0.0",
+				"webext-base-css": "^1.3.1",
 				"webext-options-sync": "^2.0.1",
 				"webextension-polyfill": "^0.7.0"
 			},
@@ -19390,6 +19391,11 @@
 				"defaults": "^1.0.3"
 			}
 		},
+		"node_modules/webext-base-css": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/webext-base-css/-/webext-base-css-1.3.1.tgz",
+			"integrity": "sha512-gncbsBjb9S2GTo/IJ9zAokPrzn6ls++zE0HqT/gdWJEBVzuHKB905Mowj4TXIc6so9m9lrfXQ/nQ6GuqLPa42A=="
+		},
 		"node_modules/webext-detect-page": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/webext-detect-page/-/webext-detect-page-2.0.6.tgz",
@@ -34972,6 +34978,11 @@
 				"defaults": "^1.0.3"
 			}
 		},
+		"webext-base-css": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/webext-base-css/-/webext-base-css-1.3.1.tgz",
+			"integrity": "sha512-gncbsBjb9S2GTo/IJ9zAokPrzn6ls++zE0HqT/gdWJEBVzuHKB905Mowj4TXIc6so9m9lrfXQ/nQ6GuqLPa42A=="
+		},
 		"webext-detect-page": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/webext-detect-page/-/webext-detect-page-2.0.6.tgz",

package.json

@@ -24,6 +24,7 @@
 	},
 	"dependencies": {
 		"one-event": "^3.0.0",
+		"webext-base-css": "^1.3.1",
 		"webext-options-sync": "^2.0.1",
 		"webextension-polyfill": "^0.7.0"
 	},

readme.md

@@ -33,13 +33,6 @@ Use your text editor to write in your browser. Everything you type in the editor
 	 - [**Chrome**][link-cws] [<img valign="middle" src="https://img.shields.io/chrome-web-store/v/godiecgffnchndlihlpaajjcplehddca.svg?label=%20">][link-cws]
 	 - [**Firefox**][link-amo] [<img valign="middle" src="https://img.shields.io/amo/v/ghosttext.svg?label=%20">][link-amo]
 
-## Website support
-
-- `<textarea>` elements
-- [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable) areas: like in Gmail
-- [CodeMirror](http://codemirror.net/) editors: used on CodePen, JSFiddle, JS Bin, …
-- [Ace](http://ace.c9.io/) editor: used on Tumblr, …
-
 ## Usage
 
 1. Open your editor
@@ -48,7 +41,43 @@ Use your text editor to write in your browser. Everything you type in the editor
 
 Notice: in some editors you’ll need to run the _Enable GhostText_ command after step 1. Refer to your editor’s GhostText extension readme. Sublime Text does this automatically.
 
-### Keyboard shortcuts
+## How it works
+
+GhostText is split in two parts:
+
+- a HTTP and WebSocket server in the text editor
+- a client in the browser
+
+When you activate GhostText by clicking the button, the browser will try contacting the server in the text editor (at the port specified in the options) and open a WebSocket connection. Every change will be transmitted to the other side. Each side can close the socket and the session will be over.
+
+## Troubleshooting
+
+You can verify whether it works by visiting the [testing page](https://ghosttext.github.io/GhostText/demo/).
+
+### No supported fields found
+
+GhostText supports the following types of fields:
+
+- `<textarea>` elements
+- [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable) areas: like in Gmail
+- [CodeMirror](http://codemirror.net/) editors: used on CodePen, JSFiddle, JS Bin, …
+- [Ace](http://ace.c9.io/) editor: used on AWS, Khan Academy, Wikipedia, …
+
+If the website you activate it on doesn't have any of the above, it's not compatible.
+
+### Unable to connect to the editor
+
+Ensure that:
+
+- Your editor is open
+- Its GhostText extension is installed
+- The GhostText server is running (in most editor extensions this is opened automatically)
+- The server port matches (it's 4001 by default, it can be changed in the options)
+- There are no other servers using the port
+
+If it still doesn't work, try again in [Sublime Text](https://www.sublimetext.com), it's the main supported editor of GhostText.
+
+## Keyboard shortcuts
 
 You can use a keyboard shortcut instead of clicking the button. The shortcut can be changed or disabled,
 [like this in Chrome](http://lifehacker.com/add-custom-keyboard-shortcuts-to-chrome-extensions-for-1595322121)

source/background.js

@@ -53,8 +53,12 @@ function handlePortListenerErrors(listener) {
 			await listener(port);
 		} catch (error) {
 			let {message} = error;
-			if (message === 'Failed to fetch') {
-				message = 'Unable to connect to the editor. Make sure it’s open, the GhostText extension is running in it, and that the port matches (if you changed it)';
+			if ([
+				'Failed to fetch',
+				'NetworkError when attempting to fetch resource.',
+				'Could not connect to the server'
+			].includes(message)) {
+				message = 'Unable to connect to the editor. <a href="https://github.com/GhostText/GhostText/blob/master/readme.md#troubleshooting">Need help?</a>';
 			}
 
 			port.postMessage({error: message});

source/ghost-text.js

@@ -265,7 +265,7 @@ function startGT() {
 	registerElements();
 	console.info(knownElements.size + ' fields on the page');
 	if (knownElements.size === 0) {
-		notify('warn', 'No supported fields found');
+		notify('warn', 'No supported fields found. <a href="https://github.com/GhostText/GhostText/blob/master/readme.md#troubleshooting">Need help?</a>');
 		return;
 	}
 

source/humane-ghosttext.css

@@ -19,6 +19,9 @@
   box-shadow: 0 1px 2px rgba(0,0,0,0.5);
   transform: translateY(-100px);
 }
+.ghost-text-message a {
+  color: inherit;
+}
 .ghost-text-message p,
 .ghost-text-message ul {
   margin: 0;

source/options.html

@@ -2,26 +2,7 @@
 <meta charset="UTF-8" />
 <title>GhostText options</title>
 <style>
-	html {
-		font-family: sans-serif;
-	}
-	label,
-	button,
-	footer {
-		display: block;
-		margin: 1em 0;
-	}
-	input {
-		font: inherit;
-	}
-	footer {
-		font-style: italic;
-		font-size: 0.8em;
-		color: gray;
-	}
-	footer a {
-		color: inherit;
-	}
+	@import url('webext-base-css');
 </style>
 <form id="options-form">
 	<label>
@@ -38,8 +19,8 @@
 		/>
 	</label>
 </form>
-<footer>
-	Issues? Let’s fix them on
-	<a href="https://github.com/GhostText/GhostText">GhostText’s GitHub repo</a>!
-</footer>
+<p>You can find information on how GhostText works and how to troubleshoot any issues on <a href="https://github.com/GhostText/GhostText">its repo</a>.</p>
+<hr>
+<p>If you find this useful, consider supporting its development by <a href="https://github.com/sponsors/fregante">donating or sponsoring me on GitHub</a>.</p>
+<p>Made with 🍕 by <a href="https://fregante.com">fregante</a>.</p>
 <script src="options.js"></script>