Issue 154 - Added devtools panel showing blocked and blockable items

chrome/devtools/devtools-panel.js

Index: chrome/devtools/devtools-panel.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/chrome/devtools/devtools-panel.js
@@ -0,0 +1,161 @@
+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, port)
+{
+  var button = document.createElement("span");
+
+  button.textContent = label;
+  button.classList.add("action");
+
+  button.addEventListener("click", function()
+  {
+    port.postMessage({action: action, filter: filter});
+  });
+
+  return button;
+}
+
+function createRecord(request, filter, port)
+{

[kzar, 2015/01/05 17:30:58]

This function seems quite ugly, is there not a way we can create a row from a
template?

[Sebastian Noack, 2015/01/05 19:33:59]

We don't use a template system. And I rather don't introduce one, just for this.
Of course I could generate a an HTML string instead using DOM APIs here, but I
don't think that this would be any less ugly. But while seeing this code without
syntax highlighting for the first time, I think we should add some new lines.

+  var row = document.createElement("tr");
+  row.dataset.type = request.type;
+  var requestCell = document.createElement("td");
+  row.appendChild(requestCell);
+  var requestWrapper = document.createElement("div");
+  requestWrapper.classList.add("request-wrapper");
+  requestCell.appendChild(requestWrapper);
+  var urlElement = document.createElement("div");
+  urlElement.classList.add("url");
+  urlElement.innerHTML = " ";
+  requestWrapper.appendChild(urlElement);
+  var domainElement = document.createElement("div");
+  domainElement.classList.add("domain");
+  domainElement.textContent = request.docDomain;
+  requestWrapper.appendChild(domainElement);
+  var typeElement = document.createElement("div");
+  typeElement.classList.add("type");
+  typeElement.textContent = request.type;
+  requestWrapper.appendChild(typeElement);
+  var filterCell = document.createElement("td");
+  row.appendChild(filterCell);
+  var actionWrapper = document.createElement("div");
+  actionWrapper.classList.add("action-wrapper");
+  filterCell.appendChild(actionWrapper);
+  var filterWrapper = document.createElement("div");
+  filterWrapper.classList.add("filter-wrapper");
+  actionWrapper.appendChild(filterWrapper);
+  var filterElement = document.createElement("div");
+  filterElement.innerHTML = " ";
+  filterElement.classList.add("filter");
+  filterWrapper.appendChild(filterElement);
+  var originElement = document.createElement("div");
+  originElement.innerHTML = " ";
+  originElement.classList.add("origin");
+  filterWrapper.appendChild(originElement);
+
+  if (request.url)
+  {
+    urlElement.textContent = request.url;
+
+    if ("openResource" in chrome.devtools.panels && request.type != "POPUP")
+    {
+      urlElement.classList.add("resourceLink");
+      urlElement.addEventListener("click", function()
+      {
+        chrome.devtools.panels.openResource(request.url);
+      });
+    }
+  }
+
+  if (filter)
+  {
+    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", "Whitelist request", "@@" + generateFilter(request), port));
+
+    if (filter.userDefined)
+      actionWrapper.appendChild(createActionButton("remove", "Remove filter", filter.text, port));
+  }
+  else
+    actionWrapper.appendChild(createActionButton("add", "Block request", generateFilter(request), port));
+
+  return row;
+}
+
+document.addEventListener("DOMContentLoaded", function()
+{
+  var port = chrome.runtime.connect({name: "devtools-" + chrome.devtools.inspectedWindow.tabId});
+  var container = document.getElementById("items");
+  var table = container.getElementsByTagName("table")[0];
+
+  port.onMessage.addListener(function(msg)
+  {
+    switch (msg.type)
+    {
+      case "add-record":
+        table.appendChild(createRecord(msg.request, msg.filter, port));
+        break;
+
+      case "update-record":
+        var oldRow = table.getElementsByTagName("tr")[msg.index];
+        var newRow = createRecord(msg.request, msg.filter, port);
+        oldRow.parentNode.replaceChild(newRow, oldRow);
+        newRow.classList.add("changed");
+        container.classList.add("has-changes");
+        break;
+
+      case "remove-record":
+        var row = table.getElementsByTagName("tr")[msg.index];
+        row.parentNode.removeChild(row);
+        container.classList.add("has-changes");
+        break;
+
+      case "reset":
+        table.innerHTML = "";
+        container.classList.remove("has-changes");
+        break;
+    }
+  });
+
+  document.getElementById("reload").addEventListener("click", function()
+  {
+    chrome.devtools.inspectedWindow.reload();
+  });
+
+  document.getElementById("filter-state").addEventListener("change", function(event)
+  {
+    container.dataset.filterState = event.target.value;
+  });
+
+  document.getElementById("filter-type").addEventListener("change", function(event)
+  {
+    container.dataset.filterType = event.target.value;
+  });
+});