Issue 154 - Added UI for devtools panel on Chrome

devtools-panel.js

+/*
+ * 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
+    });
+  });
+
+  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);
+      });
+    }
+  }
+
+  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();
+  });
+
+  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;
+  });
+
+  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;
+    }
+  });
+
+  ext.backgroundPage.sendMessage({
+    type: "devtools.init",
+    inspectedTabId: ext.devtools.inspectedWindow.tabId
+  });
+});