Added theme to page action popup

Fixes #232.

pageAction/gui.js

@@ -52,7 +52,7 @@
 			}
 			button.addEventListener("click", action.callback.bind(undefined, data));
 			container.appendChild(button);
-			if (horizontal || i % 3 === 2){
+			if (horizontal){
 				container.appendChild(document.createElement("br"));
 			}
 		});

pageAction/pageAction-dark.css

@@ -0,0 +1,16 @@
+body {
+	background-color: rgb(74, 74, 79);
+	color: rgb(249, 249, 250);
+}
+
+.collapsible .collapser {
+	color: rgb(120, 145, 255);
+}
+
+.hasHiddenActions {
+	color: rgb(182, 194, 245);
+}
+
+.hasHiddenActions:hover, .hasHiddenActions .actions {
+	background-color: rgb(92, 92, 97);
+}

pageAction/pageAction-default.css

@@ -0,0 +1,16 @@
+body {
+	color: rgb(60, 62, 60);
+	background-color: rgb(249, 250, 249);
+}
+
+.collapsible .collapser {
+	color: blue;
+}
+
+.hasHiddenActions {
+	color: darkblue;
+}
+
+.hasHiddenActions:hover, .hasHiddenActions .actions {
+	background-color: rgb(236, 237, 236);
+}

pageAction/pageAction-light.css

@@ -0,0 +1,16 @@
+body {
+	color: rgb(12, 12, 13);
+	background-color: rgb(255, 255, 255);
+}
+
+.collapsible .collapser {
+	color: blue;
+}
+
+.hasHiddenActions {
+	color: darkblue;
+}
+
+.hasHiddenActions:hover, .hasHiddenActions .actions {
+	background-color: rgb(240, 240, 240);
+}

pageAction/pageAction.css

@@ -8,7 +8,6 @@ body {
 	padding-right: 23px;
 	white-space: nowrap;
 	position: relative;
-	color: black;
 }
 
 #prints {
@@ -36,12 +35,10 @@ button.action img {
 .hasHiddenActions {
 	position: relative;
 	display: inline-block;
-	color: darkblue;
 }
 .hasHiddenActions:hover {
 	padding: 3px;
 	margin: -3px;
-	background-color: #f6f6f6;
 	z-index: 10;
 }
 .hasHiddenActions .actions {
@@ -50,9 +47,9 @@ button.action img {
 	top: 100%;
 	left: 0px;
 	border-top-width: 0;
-	background-color: #f6f6f6;
 	padding: 2px 1px 1px 1px;
 	line-height: 0;
+	white-space: nowrap;
 }
 .hasHiddenActions:hover .actions{
 	display: block;
@@ -97,7 +94,6 @@ button.action img {
 }
 .collapsible .collapser {
 	cursor: pointer;
-	color: blue;
 	text-decoration: underline;
 }
 .collapsible .collapser .more {

pageAction/pageAction.js

@@ -18,6 +18,16 @@
 		browser.tabs.query({active: true, currentWindow: true}),
 		settings.loaded
 	]).then(function(values){
+		// load theme
+		var themeLink = document.createElement("link");
+		themeLink.href = `pageAction-${settings.theme}.css`;
+		themeLink.rel = "stylesheet";
+		themeLink.type = "text/css";
+		document.head.appendChild(themeLink);
+		settings.on("theme", function(){
+			themeLink.href = `pageAction-${settings.theme}.css`;
+		});
+		
 		const tabs = values[0];
 		
 		notice("create global action buttons");

releaseNotes.txt

@@ -9,7 +9,7 @@ Version 0.5.3:
 		- added option "Don't show again on update." for options page
 		- added option to highlight page action icon
 		- added option to control browser action icon on notifications
-		- added theme for browser action popup
+		- added theme for browser and page action popup
 		- added badge
 		- added option to ignore APIs
 		- added protection for history length