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
+    });
+  });

[Thomas Greiner, 2015/03/13 11:11:05]

We always explicitly set the third parameter when calling addEventListener.

[Sebastian Noack, 2015/03/13 13:07:38]

Well, not always. And frankly, I personally find code adding a parameter to a
function call after an anonymous function definition kinda ugly. And don't tell
me that not all browsers support omitting the third argument, because it's
optional ever since in Chrome and Safari. But yeah, at least in adblockplusui we
seem to consistently specify the third argument always, so fair enough.

+
+  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");

[Thomas Greiner, 2015/03/13 11:11:05]

There's no added value in having those extra spaces.

[Sebastian Noack, 2015/03/13 13:07:38]

IMO it is. Code reads quicker and typos become more obvious when identical parts
of similar lines are aligned. But yeah, we usually don't do that. So removing
the spaces for consistency.

+  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;

[Thomas Greiner, 2015/03/13 11:11:05]

According to
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/firstElementChild...
"firstElement" is not supported on "DocumentFragment" in Chrome 28 which we
currently still support.

[Sebastian Noack, 2015/03/13 13:07:38]

Again, with this change we drop support for Chrome 28.

+
+  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;
+    }
+  });
+});

[Thomas Greiner, 2015/03/13 11:11:05]

We always explicitly set the third parameter when calling addEventListener.

[Sebastian Noack, 2015/03/13 13:07:38]

Done.