diff --git a/.documentation/pageAction.png b/.documentation/pageAction.png new file mode 100644 index 0000000..a9055ad Binary files /dev/null and b/.documentation/pageAction.png differ diff --git a/icons/pageAction-disableNotifications.svg b/icons/pageAction-disableNotifications.svg new file mode 100644 index 0000000..c69b8dc --- /dev/null +++ b/icons/pageAction-disableNotifications.svg @@ -0,0 +1,117 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/pageAction-displayCallingStack.svg b/icons/pageAction-displayCallingStack.svg new file mode 100644 index 0000000..5108c1a --- /dev/null +++ b/icons/pageAction-displayCallingStack.svg @@ -0,0 +1,92 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/icons/pageAction-displayFullURL.svg b/icons/pageAction-displayFullURL.svg new file mode 100644 index 0000000..9053617 --- /dev/null +++ b/icons/pageAction-displayFullURL.svg @@ -0,0 +1,73 @@ + + + + + + + + + + image/svg+xml + + + + + + + https: + + + diff --git a/icons/pageAction-ignorelistDomain.svg b/icons/pageAction-ignorelistDomain.svg new file mode 100644 index 0000000..7f84189 --- /dev/null +++ b/icons/pageAction-ignorelistDomain.svg @@ -0,0 +1,84 @@ + + + + + + + + + + image/svg+xml + + + + + + + www. + + + + + + diff --git a/icons/pageAction-whitelistDomain.svg b/icons/pageAction-whitelistDomain.svg new file mode 100644 index 0000000..c15cd63 --- /dev/null +++ b/icons/pageAction-whitelistDomain.svg @@ -0,0 +1,74 @@ + + + + + + + + + + image/svg+xml + + + + + + + www. + + + diff --git a/icons/pageAction-whitelistURL.svg b/icons/pageAction-whitelistURL.svg new file mode 100644 index 0000000..0379199 --- /dev/null +++ b/icons/pageAction-whitelistURL.svg @@ -0,0 +1,74 @@ + + + + + + + + + + image/svg+xml + + + + + + + https: + + + diff --git a/pageAction/domainNotification.js b/pageAction/domainNotification.js index a57dccf..119f01e 100644 --- a/pageAction/domainNotification.js +++ b/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; diff --git a/pageAction/gui.js b/pageAction/gui.js index 6fa1f99..85268c0 100644 --- a/pageAction/gui.js +++ b/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){ diff --git a/pageAction/notification.js b/pageAction/notification.js index b4d93a3..8fcafba 100644 --- a/pageAction/notification.js +++ b/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"); diff --git a/pageAction/pageAction.css b/pageAction/pageAction.css index adf699e..50b655c 100644 --- a/pageAction/pageAction.css +++ b/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; } \ No newline at end of file diff --git a/pageAction/pageAction.html b/pageAction/pageAction.html index c1597be..8c79ef5 100644 --- a/pageAction/pageAction.html +++ b/pageAction/pageAction.html @@ -6,10 +6,10 @@ +
-
diff --git a/pageAction/pageAction.js b/pageAction/pageAction.js index 4bc28ea..8340972 100644 --- a/pageAction/pageAction.js +++ b/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"), diff --git a/releaseNotes.txt b/releaseNotes.txt index 1e656a2..3b94cb9 100644 --- a/releaseNotes.txt +++ b/releaseNotes.txt @@ -2,9 +2,9 @@ Version 0.4.1: todos: - get rid of the .innerHTML assigments - better and saver settings system - - improve design of page action display changes: + - improved design of the page action display - new features: