From 222f970d23edb23e8c5b51dc2d36913ea87f5753 Mon Sep 17 00:00:00 2001
From: hideheader <hideheader@mail.com>
Date: Thu, 12 Mar 2015 19:00:23 -0400
Subject: [PATCH] [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 |  4 ++++
 manage.html               |  2 ++
 manage.js                 |  3 +++
 popup.html                | 34 ++++++++++++++++++++++++++++++++--
 popup.js                  | 14 +++++++-------
 storage.js                |  1 +
 6 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 70b3753d..bd4e6d22 100644
--- a/_locales/en/messages.json
+++ b/_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."
diff --git a/manage.html b/manage.html
index 23fe8e1a..150cf5a2 100644
--- a/manage.html
+++ b/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>
diff --git a/manage.js b/manage.js
index 8d0bfb98..5bad7721 100644
--- a/manage.js
+++ b/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});
diff --git a/popup.html b/popup.html
index 15c799a4..611e0c2f 100644
--- a/popup.html
+++ b/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;
diff --git a/popup.js b/popup.js
index c1cbf02d..63ecb5a0 100644
--- a/popup.js
+++ b/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);
diff --git a/storage.js b/storage.js
index 29651754..b9c80673 100644
--- a/storage.js
+++ b/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