[option] List actions before styles in the popup

Styles are listed before actions by default. Actions are listed before
styles if `popup.stylesFirst` is false. A control for the option is shown
in "Manage" if `popup.stylesFirstUI` is true.

_locales/en/messages.json

@@ -165,6 +165,10 @@
 		"message": "Options",
 		"description": "Heading for options section on manage page."
 	},
+	"popupStylesFirst": {
+		"message": "List styles before commands in the toolbar button menu",
+		"description": "Label for the checkbox controlling section order in the toolbar button menu."
+	},
 	"prefShowBadge": {
 		"message": "Show number of styles active for the current site on the toolbar button",
 		"description": "Label for the checkbox controlling toolbar badge text."

manage.html

@@ -91,6 +91,7 @@
 			.update-done .check-update {
 				display: none;
 			}
+			.hidden {display: none}
 
 			@media(max-width:675px) {
 				#header {
@@ -143,6 +144,7 @@
 			<div id="options">
 				<h2 id="options-heading"></h2>
 				<input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge"></label>
+				<div><input id="popup.stylesFirst" type="checkbox"><label id="stylesFirst-label" for="popup.stylesFirst"></label></div>
 			</div>
 		</div>
 		<div id="installed"></div>

manage.js

@@ -348,6 +348,7 @@ tE("show-badge-label", "prefShowBadge");
 tE("manage.onlyEnabled-label", "manageOnlyEnabled");
 tE("manage.onlyEdited-label", "manageOnlyEdited");
 tE("filters", "manageFilters");
+tE("stylesFirst-label", "popupStylesFirst");
 
 document.getElementById("check-all-updates").addEventListener("click", checkUpdateAll, false);
 
@@ -363,3 +364,5 @@ function initFilter(className, node) {
 }
 initFilter("enabled-only", document.getElementById("manage.onlyEnabled"));
 initFilter("edited-only", document.getElementById("manage.onlyEdited"));
+
+loadPrefs({"popup.stylesFirst": true});

popup.html

@@ -21,17 +21,47 @@
 			a, a:visited {
 				color: black;
 			}
+
 			.entry {
-				padding-bottom: 0.5em;
-				margin-bottom: 0.5em;
+				padding: 0.5em 0;
 				border-bottom: 1px solid black;
 			}
+			.entry:first-child {
+				padding-top: 0;
+			}
+			.entry:last-child {
+				border-bottom: none;
+			}
+			body > DIV {
+				border-bottom: 1px solid black;
+			}
+			body > DIV:last-of-type,
+			body.blocked > DIV {
+				border-bottom: none;
+			}
+			#installed {
+				margin-top: 0.5em;
+			}
+			body > .actions {
+				margin-top: 0.5em;
+			}
+
 			.actions > div, #unavailable {
 				margin-bottom: 0.75em;
 			}
+
 			#unavailable {
+				border: none;
+			}
+			#unavailable:empty {
 				display: none;
 			}
+			body.blocked #installed,
+			body.blocked #find-styles,
+			body.blocked #write-style {
+				display: none;
+			}
+
 			/* Never shown, but can be enabled with a style */
 			.enable, .disable {
 				display: none;

popup.js

@@ -4,15 +4,16 @@ styleTemplate.innerHTML = "<input class='checker' type='checkbox'><div class='st
 var writeStyleTemplate = document.createElement("a");
 writeStyleTemplate.className = "write-style-link";
 
+if (!prefs.getPref("popup.stylesFirst")) {
+	document.body.insertBefore(document.querySelector("body > .actions"), document.getElementById("installed"));
+}
+
 chrome.tabs.getSelected(null, function(tab) {
-	var urlWillWork = /^(file|http|https|chrome\-extension):.*/.exec(tab.url);
+	var urlWillWork = /^(file|http|https|chrome\-extension):/.exec(tab.url);
 
 	if (!urlWillWork) {
-		["installed", "find-styles", "write-style"].forEach(function(id) {
-			document.getElementById(id).style.display = "none";
-		});
-		document.getElementById("unavailable").style.display = "block";
-		return;
+		document.body.classList.add("blocked");
+		tE("unavailable", "stylishUnavailableForURL");
 	}
 
 	chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url}, showStyles);
@@ -178,7 +179,6 @@ function handleDelete(id) {
 tE("open-manage-link", "openManage");
 tE("write-style-for", "writeStyleFor");
 tE("find-styles-link", "findStylesForSite");
-tE("unavailable", "stylishUnavailableForURL");
 
 ["find-styles-link", "open-manage-link"].forEach(function(id) {
 	document.getElementById(id).addEventListener("click", openLink, false);

storage.js

@@ -167,6 +167,7 @@ var prefs = {
 	"popup.breadcrumbs": true, // display "New style" links as URL breadcrumbs
 	"popup.breadcrumbs.usePath": false, // use URL path for "this URL"
 	"popup.enabledFirst": true,  // display enabled styles before disabled styles
+	"popup.stylesFirst": true,  // display enabled styles before disabled styles
 
 	"manage.onlyEnabled": false, // display only enabled styles
 	"manage.onlyEdited": false,// display only styles created locally