Improved design of the page action display.

pageAction/domainNotification.js

@@ -51,9 +51,9 @@
 		const node = document.createElement("li");
 		node.className = "domainPrints collapsable collapsed";
 		node.appendChild(this.textNode());
+		node.appendChild(document.createElement("br"));
 		createCollapser(node);
 		node.appendChild(this.notificationsNode());
-		node.appendChild(this.actionsNode());
 		
 		this.node = function(){
 			return node;
@@ -69,6 +69,7 @@
 
 	DomainNotification.prototype.textNode = function textNode(){
 		const node = document.createElement("span");
+		node.className = "text";
 		this.textNode = function(){
 			return node;
 		};
@@ -77,7 +78,8 @@
 		while (messageParts.length){
 			var urlSpan = document.createElement("span");
 			urlSpan.textContent = this.domain;
-			urlSpan.className = "url";
+			urlSpan.className = "url hasHiddenActions";
+			urlSpan.appendChild(this.actionsNode());
 			node.appendChild(urlSpan);
 			node.appendChild(document.createTextNode(messageParts.shift()));
 		}
@@ -113,6 +115,7 @@
 
 	DomainNotification.prototype.actionsNode = function actionsNode(){
 		const node = document.createElement("div");
+		node.className = "actions";
 		createActionButtons(node, actions, this.domain);
 		this.actionsNode = function(){
 			return node;

pageAction/gui.js

@@ -39,8 +39,17 @@
 	scope.createActionButtons = function createActionButtons(container, actions, data){
 		actions.forEach(function(action, i){
 			var button = document.createElement("button");
-			button.className = action.name;
-			button.textContent = browser.i18n.getMessage(action.name);
+			button.className = action.name + " action";
+			button.title = browser.i18n.getMessage(action.name);
+			if (action.isIcon || action.icon){
+				button.classList.add("isIcon");
+				var img = document.createElement("img");
+				button.appendChild(img);
+				img.src = "../icons/" + (action.icon || `pageAction-${action.name}.svg`);
+			}
+			else {
+				button.textContent = button.title;
+			}
 			button.addEventListener("click", action.callback.bind(undefined, data));
 			container.appendChild(button);
 			if (i % 3 === 2){

pageAction/notification.js

@@ -22,16 +22,17 @@
 		node(){
 			const node = document.createElement("li");
 
-			node.appendChild(document.createTextNode(this.timestamp.toLocaleString() + ": " + this.functionName + " "));
+			node.appendChild(document.createTextNode(this.timestamp.toLocaleString() + ": "));
+			node.appendChild(this.textNode());
 			if (this.dataURL){
 				node.className = "notification collapsable collapsed";
+				node.appendChild(document.createElement("br"));
 				createCollapser(node);
 				const img = document.createElement("img");
 				img.src = this.dataURL;
-				img.className = "collapsing";
+				img.className = "fakedCanvasContent collapsing";
 				node.appendChild(img);
 			}
-			node.appendChild(this.actionsNode());
 
 			this.node = function(){
 				return node;
@@ -39,6 +40,19 @@
 			return node;
 		}
 
+		textNode(){
+			const node = document.createElement("span");
+			node.className = "text hasHiddenActions";
+			this.textNode = function(){
+				return node;
+			};
+			node.textContent = this.functionName;
+			node.title = this.url.href;
+			node.appendChild(this.actionsNode());
+	
+			return node;
+		}
+
 		actionsNode(){
 			const node = document.createElement("div");
 

pageAction/pageAction.css

@@ -3,8 +3,11 @@
 }
 
 body {
-	margin: 5px;
+	margin: 0.5em;
+	padding: 2px;
+	padding-right: 23px;
 	white-space: nowrap;
+	position: relative;
 }
 
 #prints {
@@ -13,7 +16,58 @@ body {
 	margin: 0;
 }
 
-img {
+button.action.isIcon {
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	margin: 0;
+	line-height: 0;
+	background-color: transparent;
+}
+* + button.action.isIcon {
+	margin-left: 1px;
+}
+button.action img {
+	max-height: 19px;
+	margin: 0;
+}
+
+.hasHiddenActions {
+	position: relative;
+	display: inline-block;
+	color: darkblue;
+}
+.hasHiddenActions:hover {
+	padding: 3px;
+	margin: -3px;
+	background-color: #f6f6f6;
+	z-index: 10;
+}
+.hasHiddenActions .actions {
+	display: none;
+	position: absolute;
+	top: 100%;
+	left: 0px;
+	border-top-width: 0;
+	background-color: #f6f6f6;
+	padding: 2px 1px 1px 1px;
+	line-height: 0;
+}
+.hasHiddenActions:hover .actions{
+	display: block;
+}
+
+
+#globalActions {
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 23px;
+	height: 100%;
+	text-align: right;
+}
+
+.notifications .fakedCanvasContent {
 	display: block;
 	width: 100%;
 	box-sizing: border-box;
@@ -21,7 +75,7 @@ img {
 
 .notifications {
 	margin: 0;
-	padding: 0 0 0 1em;
+	padding: 0 0 20px 1em;
 }
 
 .collapsable {
@@ -54,10 +108,11 @@ img {
 }
 .collapsable.collapsed .collapsing {
 	height: 0px;
+	overflow: hidden;
+	padding: 0;
 }
 .collapsable .collapsing {
 	height: initial;
 	width: 100%;
 	box-sizing: border-box;
-	overflow: hidden;
 }

pageAction/pageAction.html

@@ -6,10 +6,10 @@
 		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
     </head>
     <body>
+        <div id="globalActions"></div>
 		<ul id="prints">
 			<li>...</li>
 		</ul>
-        <div id="globalActions"></div>
         <script src="../lib/defaultSettings.js"></script>
         <script src="../lib/require.js"></script>
         <script src="../lib/logging.js"></script>

pageAction/pageAction.js

@@ -29,6 +29,7 @@ Promise.all([
 		document.getElementById("globalActions"),
 		[{
 			name: "disableNotifications",
+			isIcon: true,
 			callback: function(){
 				browser.storage.local.set({showNotifications: false});
 				window.close();
@@ -53,6 +54,7 @@ Promise.all([
 	[
 		{
 			name: "ignorelistDomain",
+			isIcon: true,
 			callback: function(domain){
 				modalPrompt(
 					browser.i18n.getMessage("inputIgnoreDomain"),
@@ -67,6 +69,7 @@ Promise.all([
 		},
 		{
 			name: "whitelistDomain",
+			isIcon: true,
 			callback: function(domain){
 				modalPrompt(
 					browser.i18n.getMessage("inputWhitelistURL"),
@@ -87,18 +90,21 @@ Promise.all([
 	[
 		{
 			name: "displayFullURL",
+			isIcon: true,
 			callback: function({url}){
 				alert(url.href);
 			}
 		},
 		{
 			name: "displayCallingStack",
+			isIcon: true,
 			callback: function({errorStack}){
 				alert(parseErrorStack(errorStack));
 			}
 		},
 		{
 			name: "whitelistURL",
+			isIcon: true,
 			callback: function({url}){
 				modalPrompt(
 					browser.i18n.getMessage("inputWhitelistDomain"),