Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: devtools-panel.js

Issue 5646124035604480: Issue 154 - Added UI for devtools panel on Chrome (Closed)
Patch Set: Addressed comments Created March 13, 2015, 1:07 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « devtools-panel.html ('k') | ext/background.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: devtools-panel.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/devtools-panel.js
@@ -0,0 +1,157 @@
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-2015 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/>.
+ */
+
+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,
+ filter: 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);
« no previous file with comments | « devtools-panel.html ('k') | ext/background.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld