Options UI discoverability

#34

manage.html

@@ -204,16 +204,22 @@
 				<h2 id="options-heading" i18n-text="optionsHeading"></h2>
 				<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 id="more-options">
+			    <h3 id="options-subheading" i18n-text="optionsSubheading"></h3>
+			    <button id="manage-options-button" i18n-text="openOptionsManage"></button>
+				<button id="shortcuts-button" i18n-text="openOptionsShortcuts"></button>
+			</div>
 			</div>
 			<div id="backup">
-				<h2>Backup</h2>
+				<h2 id="backup" i18n-text="backupButtons"></h2>
-				<span>Larger files may take a moment, be patient.<br><br></span>
+				<span id="backup-message" i18n-text="backupMessage"><br><br></span>
 				<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
 				<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
 			</div>
 			<p id="manage-text" i18n-html="manageText"></p>
 		</div>
 		<div id="installed"></div>
+		<script src="openOptions.js"></script>
 		<script src="backup/fileSaveLoad.js"></script>
 	</body>
 </html>

openOptions.js

@@ -0,0 +1,15 @@
+document.querySelector('#manage-options-button').addEventListener("click", function() {
+    if (chrome.runtime.openOptionsPage) {
+        // Supported (Chrome 42+)
+        chrome.runtime.openOptionsPage();
+    } else {
+        // Fallback
+        window.open(chrome.runtime.getURL('options/index.html'));
+    }
+});
+
+document.querySelector('#shortcuts-button').addEventListener("click", function() {
+    chrome.tabs.create({
+        'url': 'chrome://extensions/configureCommands'
+    });
+});

popup.css

@@ -9,6 +9,9 @@ input[type=checkbox] {
 #no-styles {
   font-style: italic;
 }
+#popup-shortcuts-button {
+	margin-left: 4px;
+}
 .checker {
   display: inline;
 }

popup.html

@@ -45,6 +45,7 @@
 		<div class="main-controls">
 			<div id="find-styles"><a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a></div>
 			<div id="manage-styles"><a id="open-manage-link" href="manage.html" i18n-text="openManage"></a></div>
+			<div id="popup-options"><button id="popup-options-button" i18n-text="openOptionsPopup"><button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button></div>
 			<div id="write-style"><span id="write-style-for" i18n-text="writeStyleFor"><br></span></div>
 		</div>
 	</div>

popup.js

@@ -207,3 +207,19 @@ document.getElementById("disableAll").addEventListener("change", function(event)
 	installed.classList.toggle("disabled", prefs.get("disableAll"));
 });
 setupLivePrefs(["disableAll"]);
+
+document.querySelector('#popup-options-button').addEventListener("click", function() {
+    if (chrome.runtime.openOptionsPage) {
+        // Supported (Chrome 42+)
+        chrome.runtime.openOptionsPage();
+    } else {
+        // Fallback
+        window.open(chrome.runtime.getURL('options/index.html'));
+    }
+});
+
+document.querySelector('#popup-shortcuts-button').addEventListener("click", function() {
+    chrome.tabs.create({
+        'url': 'chrome://extensions/configureCommands'
+    });
+});