From 3722bdecb0e8876936681c1775e52ecee8d7cc59 Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Fri, 24 Mar 2023 13:20:29 +0800
Subject: [PATCH] Add keyboard shortcut customization instructions (#278)

---
 source/options.css  |  5 +++++
 source/options.html | 10 +++++++++-
 source/options.js   |  6 ++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/source/options.css b/source/options.css
index 0c67ba8..1c40c8c 100644
--- a/source/options.css
+++ b/source/options.css
@@ -19,3 +19,8 @@
 #serverPort {
 	width: 7em;
 }
+
+html:not(.chrome) .chrome-only,
+html:not(.firefox) .firefox-only {
+	display: none;
+}
diff --git a/source/options.html b/source/options.html
index 9f746d7..ff35342 100644
--- a/source/options.html
+++ b/source/options.html
@@ -44,7 +44,15 @@
 		</label>
 	</p>
 </form>
-<hr>
+<div class="firefox-only">
+	<h3>Shortcuts</h3>
+	<p>You can customize the keyboard shortcuts by clicking the gear icon in the upper-right corner and selecting "Manage Extension Shortcuts".</p>
+</div>
+<div class="chrome-only">
+	<h3>Shortcuts</h3>
+	<p>You can customize the keyboard shortcuts by visiting Chrome’s extensions shortcuts page. Copy-paste this URL: <code>chrome://extensions/shortcuts</code></p>
+</div>
+<h3>Info</h3>
 <p>You can find information on how GhostText works and how to troubleshoot any issues on <a href="https://github.com/fregante/GhostText">its repo</a>.</p>
 <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>
diff --git a/source/options.js b/source/options.js
index 36d1e12..8412db4 100644
--- a/source/options.js
+++ b/source/options.js
@@ -1,3 +1,9 @@
 import optionsStorage from './options-storage.js';
 
 optionsStorage.syncForm(document.querySelector('form'));
+
+if (location.protocol.startsWith('moz-')) {
+	document.documentElement.classList.add('firefox');
+} else if (location.protocol.startsWith('chrome-')) {
+	document.documentElement.classList.add('chrome');
+}