[Pkg-mozext-commits] [adblock-plus] 10/87: Issue 154 - Added UI for devtools panel on Chrome
David Prévot
taffit at moszumanska.debian.org
Sat Apr 30 17:59:02 UTC 2016
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository adblock-plus.
commit ae6cc193d26c34a045a38a6793a017e9405994f0
Author: Sebastian Noack <sebastian at adblockplus.org>
Date: Thu Jan 21 16:35:55 2016 +0100
Issue 154 - Added UI for devtools panel on Chrome
---
background.js | 77 ++++++++++++++++++
devtools-panel.html | 117 +++++++++++++++++++++++++++
devtools-panel.js | 159 ++++++++++++++++++++++++++++++++++++
ext/background.js | 13 +++
ext/content.js | 21 +++--
ext/devtools.js | 36 +++++++++
skin/devtools-panel.css | 208 ++++++++++++++++++++++++++++++++++++++++++++++++
7 files changed, 623 insertions(+), 8 deletions(-)
diff --git a/background.js b/background.js
index 3de31d1..3bb096f 100644
--- a/background.js
+++ b/background.js
@@ -305,4 +305,81 @@
}, "*");
}, 1000);
}
+
+ ext.devtools.onCreated.addListener(function(panel)
+ {
+ // blocked request
+ panel.sendMessage({
+ type: "add-record",
+ request: {
+ url: "http://adserver.example.com/ad_banner.png",
+ type: "IMAGE",
+ docDomain: "example.com"
+ },
+ filter: {
+ text: "/ad_banner*$domain=example.com",
+ whitelisted: false,
+ userDefined: false,
+ subscription: "EasyList"
+ }
+ });
+
+ // whitelisted request
+ panel.sendMessage({
+ type: "add-record",
+ request: {
+ url: "http://example.com/looks_like_an_ad_but_isnt_one.html",
+ type: "SUBDOCUMENT",
+ docDomain: "example.com"
+ },
+ filter: {
+ text: "@@||example.com/looks_like_an_ad_but_isnt_one.html",
+ whitelisted: true,
+ userDefined: false,
+ subscription: "EasyList"
+ }
+ });
+
+ // request with long URL and no filter matches
+ panel.sendMessage({
+ type: "add-record",
+ request: {
+ url: "https://this.url.has.a.long.domain/and_a_long_path_maybe_not_long_enough_so_i_keep_typing?there=are&a=couple&of=parameters&as=well&and=even&some=more",
+ type: "XMLHTTPREQUEST",
+ docDomain: "example.com"
+ },
+ filter: null
+ });
+
+ // matching element hiding filter
+ panel.sendMessage({
+ type: "add-record",
+ request: {
+ type: "ELEMHIDE",
+ docDomain: "example.com"
+ },
+ filter: {
+ text: "example.com##.ad_banner",
+ whitelisted: false,
+ userDefined: false,
+ subscription: "EasyList"
+ }
+ });
+
+ // user-defined filter
+ panel.sendMessage({
+ type: "add-record",
+ request: {
+ url: "http://example.com/some-annoying-popup",
+ type: "POPUP",
+ docDomain: "example.com"
+ },
+ filter: {
+ text: "||example.com/some-annoying-popup$popup",
+ whitelisted: false,
+ userDefined: true,
+ subscription: null
+ }
+ });
+ });
})(this);
diff --git a/devtools-panel.html b/devtools-panel.html
new file mode 100644
index 0000000..b66ad24
--- /dev/null
+++ b/devtools-panel.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<!--
+ - This file is part of Adblock Plus <https://adblockplus.org/>,
+ - Copyright (C) 2006-2016 Eyeo GmbH
+ -
+ - Adblock Plus is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU General Public License version 3 as
+ - published by the Free Software Foundation.
+ -
+ - Adblock Plus is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU General Public License for more details.
+ -
+ - You should have received a copy of the GNU General Public License
+ - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
+ -->
+
+<html>
+ <head>
+ <link type="text/css" rel="stylesheet" href="skin/devtools-panel.css">
+ <script src="ext/common.js"></script>
+ <script src="ext/content.js"></script>
+ <script src="ext/devtools.js"></script>
+ <script src="devtools-panel.js"></script>
+ </head>
+ <body>
+ <header>
+ <table>
+ <colgroup>
+ <col>
+ <col>
+ <col>
+ </colgroup>
+ <tr>
+ <td colspan="3">
+ Show
+ <select id="filter-state">
+ <option value="">all</option>
+ <option>blocked</option>
+ <option>whitelisted</option>
+ </select>
+ items of
+ <select id="filter-type">
+ <option value="">any</option>
+ <option>SUBDOCUMENT</option>
+ <option>IMAGE</option>
+ <option>STYLESHEET</option>
+ <option>SCRIPT</option>
+ <option>OBJECT</option>
+ <option>XMLHTTPREQUEST</option>
+ <option>FONT</option>
+ <option>PING</option>
+ <option>POPUP</option>
+ <option>ELEMHIDE</option>
+ <option>OTHER</option>
+ </select>
+ type
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="request-wrapper">
+ <div class="url">Request</div>
+ <div class="domain">Document domain</div>
+ </div>
+ </td>
+ <td>
+ <div class="type">Type</div>
+ </td>
+ <td>
+ <div class="filter-wrapper">
+ <div class="filter">Filter</div>
+ <div class="origin">Origin</div>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </header>
+ <div id="items">
+ <table>
+ <colgroup>
+ <col>
+ <col>
+ <col>
+ </colgroup>
+ <tbody>
+ </tbody>
+ </table>
+ </div>
+ <footer>
+ <a id="reload">Reload</a> page to see effect of filter changes
+ </footer>
+
+ <template>
+ <tr>
+ <td>
+ <div class="request-wrapper">
+ <div class="url"> </div>
+ <div class="domain"></div>
+ </div>
+ </td>
+ <td>
+ <div class="type"></div>
+ </td>
+ <td>
+ <div class="action-wrapper">
+ <div class="filter-wrapper">
+ <div class="filter"> </div>
+ <div class="origin"> </div>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </template>
+ </body>
+</html>
diff --git a/devtools-panel.js b/devtools-panel.js
new file mode 100644
index 0000000..8ce7742
--- /dev/null
+++ b/devtools-panel.js
@@ -0,0 +1,159 @@
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-2016 Eyeo GmbH
+ *
+ * Adblock Plus is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Adblock Plus is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+function generateFilter(request)
+{
+ var filter = request.url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
+
+ if (request.type == "POPUP")
+ {
+ filter += "$popup";
+
+ if (request.url == "about:blank")
+ filter += ",domain=" + request.docDomain;
+ }
+
+ return filter;
+}
+
+function createActionButton(action, label, filter)
+{
+ var button = document.createElement("span");
+
+ button.textContent = label;
+ button.classList.add("action");
+
+ button.addEventListener("click", function()
+ {
+ ext.backgroundPage.sendMessage({
+ type: "filters." + action,
+ text: filter
+ });
+ }, false);
+
+ return button;
+}
+
+function createRecord(request, filter, template)
+{
+ var row = document.importNode(template, true);
+ row.dataset.type = request.type;
+
+ row.querySelector(".domain").textContent = request.docDomain;
+ row.querySelector(".type").textContent = request.type;
+
+ var urlElement = row.querySelector(".url");
+ var actionWrapper = row.querySelector(".action-wrapper");
+
+ if (request.url)
+ {
+ urlElement.textContent = request.url;
+
+ if ("openResource" in ext.devtools.panels && request.type != "POPUP")
+ {
+ urlElement.classList.add("resourceLink");
+ urlElement.addEventListener("click", function()
+ {
+ ext.devtools.panels.openResource(request.url);
+ }, false);
+ }
+ }
+
+ if (filter)
+ {
+ var filterElement = row.querySelector(".filter");
+ var originElement = row.querySelector(".origin");
+
+ filterElement.textContent = filter.text;
+ row.dataset.state = filter.whitelisted ? "whitelisted" : "blocked";
+
+ if (filter.subscription)
+ originElement.textContent = filter.subscription;
+ else
+ {
+ if (filter.userDefined)
+ originElement.textContent = "user-defined";
+ else
+ originElement.textContent = "unnamed subscription";
+
+ originElement.classList.add("unnamed");
+ }
+
+ if (!filter.whitelisted && request.type != "ELEMHIDE")
+ actionWrapper.appendChild(createActionButton("add", "Add exception", "@@" + generateFilter(request)));
+
+ if (filter.userDefined)
+ actionWrapper.appendChild(createActionButton("remove", "Remove rule", filter.text));
+ }
+ else
+ actionWrapper.appendChild(createActionButton("add", "Block item", generateFilter(request)));
+
+ return row;
+}
+
+document.addEventListener("DOMContentLoaded", function()
+{
+ var container = document.getElementById("items");
+ var table = container.querySelector("tbody");
+ var template = document.querySelector("template").content.firstElementChild;
+
+ document.getElementById("reload").addEventListener("click", function()
+ {
+ ext.devtools.inspectedWindow.reload();
+ }, false);
+
+ document.getElementById("filter-state").addEventListener("change", function(event)
+ {
+ container.dataset.filterState = event.target.value;
+ }, false);
+
+ document.getElementById("filter-type").addEventListener("change", function(event)
+ {
+ container.dataset.filterType = event.target.value;
+ }, false);
+
+ ext.onMessage.addListener(function(message)
+ {
+ switch (message.type)
+ {
+ case "add-record":
+ table.appendChild(createRecord(message.request, message.filter, template));
+ break;
+
+ case "update-record":
+ var oldRow = table.getElementsByTagName("tr")[message.index];
+ var newRow = createRecord(message.request, message.filter, template);
+ oldRow.parentNode.replaceChild(newRow, oldRow);
+ newRow.classList.add("changed");
+ container.classList.add("has-changes");
+ break;
+
+ case "remove-record":
+ var row = table.getElementsByTagName("tr")[message.index];
+ row.parentNode.removeChild(row);
+ container.classList.add("has-changes");
+ break;
+
+ case "reset":
+ table.innerHTML = "";
+ container.classList.remove("has-changes");
+ break;
+ }
+ });
+}, false);
diff --git a/ext/background.js b/ext/background.js
index 740fe1d..8f864da 100644
--- a/ext/background.js
+++ b/ext/background.js
@@ -84,4 +84,17 @@
if (callback)
callback();
};
+
+ global.ext.devtools = {
+ onCreated: {
+ addListener: function(listener)
+ {
+ window.addEventListener("message", function(event)
+ {
+ if (event.data.type == "devtools")
+ listener(new ext.Page(event.source));
+ });
+ }
+ }
+ };
})(this);
diff --git a/ext/content.js b/ext/content.js
index a873ac5..3b5200b 100644
--- a/ext/content.js
+++ b/ext/content.js
@@ -45,23 +45,28 @@
window.addEventListener("message", loadHandler, false);
global.ext.backgroundPage = {
+ _sendRawMessage: function(message)
+ {
+ if (messageQueue)
+ messageQueue.push(message);
+ else
+ backgroundFrame.contentWindow.postMessage(message, "*");
+ },
sendMessage: function(message, responseCallback)
{
- var rawMessage = {
+ var messageId = ++maxMessageId;
+
+ this._sendRawMessage({
type: "message",
- messageId: ++maxMessageId,
+ messageId: messageId,
payload: message
- };
- if (messageQueue)
- messageQueue.push(rawMessage);
- else
- backgroundFrame.contentWindow.postMessage(rawMessage, "*");
+ });
if (responseCallback)
{
var callbackWrapper = function(event)
{
- if (event.data.type == "response" && event.data.messageId == rawMessage.messageId)
+ if (event.data.type == "response" && event.data.messageId == messageId)
{
window.removeEventListener("message", callbackWrapper, false);
responseCallback(event.data.payload);
diff --git a/ext/devtools.js b/ext/devtools.js
new file mode 100644
index 0000000..42c692e
--- /dev/null
+++ b/ext/devtools.js
@@ -0,0 +1,36 @@
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-2016 Eyeo GmbH
+ *
+ * Adblock Plus is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Adblock Plus is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+(function(global)
+{
+ if (!global.ext)
+ global.ext = {};
+
+ global.ext.devtools = {
+ panels: {
+ openResource: function() {}
+ },
+
+ inspectedWindow: {
+ reload: function() {}
+ }
+ };
+
+ global.ext.backgroundPage._sendRawMessage({type: "devtools"});
+})(this);
diff --git a/skin/devtools-panel.css b/skin/devtools-panel.css
new file mode 100644
index 0000000..1ece4e1
--- /dev/null
+++ b/skin/devtools-panel.css
@@ -0,0 +1,208 @@
+*
+{
+ font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ box-sizing: border-box;
+}
+
+html
+{
+ height: 100%;
+ overflow: hidden;
+}
+
+body
+{
+ margin: 0;
+ color: #303942;
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+}
+
+table
+{
+ table-layout: fixed;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+table *
+{
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+td
+{
+ padding: 3px;
+ white-space: nowrap;
+ border-left: 1px solid #cdcdcd;
+}
+
+td:first-child
+{
+ border-left-style: none;
+}
+
+col:nth-child(2)
+{
+ width: 115px;
+}
+
+col:nth-child(3)
+{
+ width: 50%;
+}
+
+header
+{
+ overflow-y: scroll;
+ border-bottom: 1px solid #cdcdcd;
+ flex-shrink: 0;
+}
+
+/*
+ * We have to add a scrollbar to the header to have the columns there aligned
+ * with the table below. But we don't want the scrollbar to be visible there.
+ */
+header::-webkit-scrollbar
+{
+ visibility: hidden;
+}
+
+#items
+{
+ overflow-y: scroll;
+ flex-grow: 1;
+}
+
+#items table
+{
+ line-height: 17px;
+
+ /* This background image gives every other row a gray background.
+ * This is simlar to "tr:nth-child(odd) background-color: #eee;".
+ * However, we can't do it that way, since some rows might be hidden.
+ */
+ background-image: url(data:image/gif;base64,R0lGODdhAQBQAIABAO7u7v///ywAAAAAAQBQAAACC4SPqcsYD6OctMYCADs=);
+ background-repeat: repeat;
+}
+
+#items tr
+{
+ height: 40px;
+}
+
+#items tr[data-state=blocked]
+{
+ color: red;
+}
+
+#items tr[data-state=whitelisted]
+{
+ color: green;
+}
+
+#items[data-filter-state=blocked] tr:not([data-state=blocked]),
+#items[data-filter-state=whitelisted] tr:not([data-state=whitelisted]),
+#items[data-filter-type=SUBDOCUMENT] tr:not([data-type=SUBDOCUMENT]),
+#items[data-filter-type=IMAGE] tr:not([data-type=IMAGE]),
+#items[data-filter-type=STYLESHEET] tr:not([data-type=STYLESHEET]),
+#items[data-filter-type=SCRIPT] tr:not([data-type=SCRIPT]),
+#items[data-filter-type=OBJECT] tr:not([data-type=OBJECT]),
+#items[data-filter-type=XMLHTTPREQUEST] tr:not([data-type=XMLHTTPREQUEST]),
+#items[data-filter-type=FONT] tr:not([data-type=FONT]),
+#items[data-filter-type=PING] tr:not([data-type=PING]),
+#items[data-filter-type=POPUP] tr:not([data-type=POPUP]),
+#items[data-filter-type=ELEMHIDE] tr:not([data-type=ELEMHIDE]),
+#items[data-filter-type=OTHER] tr:not([data-type=OTHER])
+{
+ display: none;
+}
+
+.changed, .unnamed
+{
+ font-style: italic
+}
+
+.request-wrapper, .filter-wrapper
+{
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+}
+
+tr:not(:hover) .action
+{
+ display: none;
+}
+
+.url
+{
+ width: 100%;
+}
+
+.resourceLink
+{
+ cursor: pointer;
+}
+
+.resourceLink:hover {
+ text-decoration: underline;
+}
+
+.action-wrapper
+{
+ display: flex;
+ width: 100%;
+}
+
+.action
+{
+ background: #555;
+ color: white;
+ font-style: normal;
+ border-radius: 7px;
+ padding: 2px 6px;
+ margin: auto;
+ margin-left: 5px;
+ cursor: pointer;
+ flex-shrink: 0;
+}
+
+.filter-wrapper, .filter, .origin, .domain
+{
+ flex-grow: 1;
+}
+
+.domain, .origin,
+.changed .request-wrapper,
+.changed .filter-wrapper,
+.changed .type
+{
+ opacity: 0.6;
+}
+
+footer
+{
+ width: 100%;
+ height: 23px;
+ margin-bottom: -23px;
+ padding: 4px 3px;
+ border-top: 1px solid #cdcdcd;
+ flex-shrink: 0;
+}
+
+.has-changes + footer
+{
+ margin-bottom: 0;
+ transition: margin-bottom 0.5s;
+}
+
+#reload
+{
+ color: blue;
+ text-decoration: underline;
+ cursor: pointer;
+}
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-mozext/adblock-plus.git
More information about the Pkg-mozext-commits
mailing list