#1 follow up

manage.html

@@ -135,6 +135,20 @@
 				border-width: 1px;
 			}
 
+			#import ul {
+				margin-left: 0;
+				padding-left: 0;
+				list-style: none;
+			}
+			#import li {
+				margin-bottom: .5em;
+			}
+			#import pre {
+				background:#eee;
+				overflow: auto;
+				margin: 0 0 .5em 0;
+			}
+
 		</style>
 
 		<template data-id="style">
@@ -186,11 +200,11 @@
 				<div><input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge" i18n-text="prefShowBadge"></label></div>
 				<div><input id="popup.stylesFirst" type="checkbox"><label id="stylesFirst-label" for="popup.stylesFirst" i18n-text="popupStylesFirst"></label></div>
 			</div>
-			<div>
-				<h2>Export Styles from Stylish extension</h2>
+			<div id="import">
+				<h2>Stylish Migration</h2>
 				<ul>
-					<li>Copy this script to the clipboard</li>
-<pre style='color:#000000;background:#eee; overflow: auto;'>chrome.extension.getBackgroundPage().getStyles({}, e => {
+					<li>1. Copy this script to the clipboard</li>
+<pre contenteditable="true">chrome.extension.getBackgroundPage().getStyles({}, e => {
   <span style='color:#7f0055; font-weight:bold; '>let</span> styles = JSON.stringify(e);
   <span style='color:#7f0055; font-weight:bold; '>let</span> <span style='color:#7f0055; font-weight:bold; '>link</span> = document.createElement(<span style='color:#2a00ff; '>'</span><span style='color:#2a00ff; '>a</span><span style='color:#2a00ff; '>'</span>);
   <span style='color:#7f0055; font-weight:bold; '>let</span> data = <span style='color:#7f0055; font-weight:bold; '>new</span> Blob([styles], {type: <span style='color:#2a00ff; '>'</span><span style='color:#2a00ff; '>text/plain;charset=utf-8;</span><span style='color:#2a00ff; '>'</span>});
@@ -201,14 +215,14 @@
   document.body.removeChild(<span style='color:#7f0055; font-weight:bold; '>link</span>);
 });
 </pre>
-					<li>Right-Click the Stylish toolbar button and select "Inspect Popup"</li>
-					<li>Paste the script in the console tab and press Enter key</li>
-					<li>Use the import button to import "styles.json" file</li>
+					<li>2. Right-Click the Stylish toolbar button and select "Inspect Popup"</li>
+					<li>3. Paste the script in the console tab and press Enter key</li>
+					<li>4. Use the import button to import "styles.json" file</li>
 				</ul>
 			</div>
 			<div>
 				<h2>Import Styles</h2>
-				<input id="import" type="file">
+				<input type="file">
 			</div>
 			<p id="manage-text" i18n-html="manageText"></p>
 		</div>

manage.js

@@ -492,6 +492,10 @@ function importStyles (e) {
   reader.readAsText(file)
 }
 
+function selectAll () {
+	document.execCommand('selectAll');
+}
+
 document.addEventListener("DOMContentLoaded", function() {
 	installed = document.getElementById("installed");
 	if (document.stylishStyles) {
@@ -504,7 +508,8 @@ document.addEventListener("DOMContentLoaded", function() {
 	document.getElementById("search").addEventListener("input", searchStyles);
 	searchStyles(true); // re-apply filtering on history Back
 
-	document.getElementById('import').addEventListener('change', importStyles);
+	document.querySelector('input[type=file]').addEventListener('change', importStyles);
+	document.querySelector('#import pre').addEventListener('click', selectAll);
 
 	setupLivePrefs([
 		"manage.onlyEnabled",

manifest.json

@@ -4,11 +4,6 @@
 	"description": "__MSG_description__",
 	"homepage_url": "https://userstyles.org",
 	"manifest_version": 2,
-	"applications": {
-		"gecko": {
-			"id": "{46551EC9-40F0-4e47-8E18-8E5CF550CFB8}"
-		}
-	},
 	"icons": {
 		"16": "16.png",
 		"48": "48.png",

storage.js

@@ -97,7 +97,6 @@ function saveStyle(o, callback) {
 		var os = tx.objectStore("styles");
 
 		// Update
-		console.error(o)
 		if (o.id) {
 			var request = os.get(Number(o.id));
 			request.onsuccess = function(event) {