Merge branch 'Cimbali-feature/custom_css'

Cimbali · Feb 18, 2018 · 5b4b336 · 5b4b336
2 parents 78ded11 + e47100a
commit 5b4b336
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 7 deletions.
diff --git a/ext/content.js b/ext/content.js
@@ -10,6 +10,16 @@ function addExtensionStylesheet(href, media) {
 	addStylesheet(browser.extension.getURL(href), media);
 }
 
+function addCustomStylesheet() {
+	browser.storage.sync.get('custom_css').then(storage => {
+		if ('custom_css' in storage) {
+			var style = document.createElement('style');
+			style.textContent = storage.custom_css;
+			document.head.appendChild(style);
+		}
+	});
+}
+
 function makeAnchor(node) {
 	// From @tomfun https://gist.github.com/asabaylus/3071099#gistcomment-1622315
 	var anchor = node.textContent.trim().toLowerCase().replace(/[^\w\- ]+/g, ' ').replace(/\s+/g, '-').replace(/\-+$/, '');
@@ -57,7 +67,7 @@ function processMarkdown(textContent) {
 	addExtensionStylesheet('/lib/sss/sss.print.css', 'print');
 	addExtensionStylesheet('/lib/highlightjs/styles/default.css');
 	// User-defined stylesheet.
-	addStylesheet('_markdown.css');
+	addCustomStylesheet();
 
 	// This is considered a good practice for mobiles.
 	var viewport = document.createElement('meta');

diff --git a/ext/options.css b/ext/options.css
@@ -1,16 +1,34 @@
 body {
 	font-size:1.25em;
 }
+h3 {
+	font-size:1.5em;
+	margin:1em 0 0.4em 0;
+}
+p {
+	margin:0;
+}
 #origins {
 	list-style-type:none;
+	margin:0;
 }
 #origins li {
 	display:inline-block;
 	margin:1ex;
 }
-button {
+#origins li button {
 	padding:1ex;
 }
 #all_origins {
 	font-weight:bold;
 }
+#saved {
+	color:green;
+	font-weight:bold;
+	display:none;
+}
+textarea {
+  white-space: pre;
+  overflow-wrap: normal;
+  overflow-x: scroll;
+}
diff --git a/ext/options.html b/ext/options.html
@@ -6,10 +6,17 @@
 </head>
 <body>
 	<h3>Granted permissions</h3>
-	<p><span id="all_origins">To enable markdown rendering for all websites, click the toolbar button from this page.</span><br/>
-		Rendering Markdown is enabled on pages of the following domains (click to remove):</p>
+	<p><span id="all_origins">To enable markdown rendering for all websites, click the toolbar button from this page.</span></p>
+	<p>Rendering Markdown is enabled on pages of the following domains (click to remove):</p>
 	<ul id="origins"></ul>
-	<p>Unfortunately, Firefox permissions do not allow Markdown rending for sites (like raw.githubusercontent.com) which use CORS headers.</p>
+	<p>Unfortunately, Firefox permissions do not allow Markdown rending for sites (like raw.githubusercontent.com) which return CORS headers.</p>
+
+	<h3>Custom CSS</h3>
+	<p>If you enable syncing Add-ons with your Firefox account, the CSS will synchronize across your devices.</p>
+	<p>Enter custom CSS to be applied to Markdown pages here.</p>
+	<p>Click or tab out of the text area to save changes. Refresh this page to revert changes.<span id="saved" class="hidden"> &nbsp; &nbsp; SAVED</span></p>
+	<textarea id="custom_css" style="margin: 10px; width:90%; min-height:30em;">Unable to load CSS from storage.</textarea>
+
 	<script src="options.js"></script>
 </body>
 </html>
diff --git a/ext/options.js b/ext/options.js
@@ -34,7 +34,7 @@ function list_permitted_origins(perm) {
 	});
 }
 
-// list when opening, and refresh page whenever permissions are added
+// List permissions when opening options and refresh whenever permissions are added
 browser.permissions.getAll().then(list_permitted_origins);
 browser.runtime.onMessage.addListener(message => {
 	if ('requested' in message && 'granted' in message) {
@@ -45,3 +45,24 @@ browser.runtime.onMessage.addListener(message => {
 	}
 	return false;
 });
+
+var timer = null;
+var textarea = document.getElementById('custom_css');
+function clear_saved_message() {
+	if (timer != null) { window.clearTimeout(timer); timer = null; }
+	textarea.onkeydown = null;
+	document.getElementById('saved').style.display = 'none';
+}
+
+// Load custom CSS and save it when changed by user
+browser.storage.sync.get('custom_css').then(storage => {
+	if ('custom_css' in storage) { textarea.value = storage.custom_css; }
+
+	textarea.onchange = () => {
+		browser.storage.sync.set({custom_css: textarea.value}).then(() => {
+			document.getElementById('saved').style.display = 'inline';
+			timer = window.setTimeout(clear_saved_message, 8000);
+			textarea.onkeydown = clear_saved_message;
+		});
+	};
+});
diff --git a/manifest.json b/manifest.json
@@ -5,6 +5,12 @@
 	"homepage_url": "https://github.com/KeithLRobertson/markdown-viewer",
 	"description": "Displays markdown documents beautified in your browser.",
 
+	"applications": {
+		"gecko": {
+			"id": "{943b8007-a895-44af-a672-4f4ea548c95f}"
+		}
+	},
+
 	"permissions": [
 		"tabs",
 		"storage"

diff --git a/test/_markdown.css b/test/_markdown.css