Issue 5093 - Indicate whether request in devtools panel belongs to tab

devtools-panel.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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
@@ skipping 150 matching lines @@
   {
     for (let element of elements)
     {
       if (element.innerText.search(query) != -1)
         return false;
     }
   }
   return true;
 }
 
-function performSearch(table, query)
-{
-  for (let row of table.rows)
+function performSearch(rows, query)
+{
+  for (let row of rows)
   {
     if (shouldFilterRow(row, query))
       row.classList.add("filtered-by-search");
     else
       row.classList.remove("filtered-by-search");
   }
 }
 
 function cancelSearch(table)
 {
   for (let row of table.rows)
     row.classList.remove("filtered-by-search");
 }
 
-/**
- * Return a generic <tr> placeholder
- * double linked with the <tr> itself to simplify
- * tbody swaps / filtering of undesired rows.
- * @param {HTMLTableRowElement} tr
- * @returns {Comment}
- */
-function getPlaceholder(tr)
-{
-  let placeholder = tr.placeholder;
-  if (!placeholder)
-  {
-    placeholder = document.createComment("placeholder");
-    tr.placeholder = placeholder;
-    placeholder.placeholder = tr;
-  }
-  return placeholder;
-}
-
-/**
- * Put back all hidden table rows and eventually
- * filters those that do not match the state or type.
- * @param {HTMLTableSectionElement} tbody
- * @param {DOMStringMap} dataset
- */
-function updateRows(tbody, dataset)
-{
-  const {filterState, filterType} = dataset;
-
-  // create a list of possible CSS filter
-  // excluding #background-items from the list of rows to consider
-  const query = [];
-  if (filterState)
-  {
-    query.push(`tr:not(#background-items):not([data-state="${filterState}"])`);
-  }
-  if (filterType)
-  {
-    query.push(`tr:not(#background-items):not([data-type="${filterType}"])`);
-  }
-
-  // use filters to match nodes or retrieve them later on
-  const selector = query.join(",");
-  for (const node of tbody.childNodes)
-  {
-    // comments linked to table rows
-    // that won't match selector will be used
-    // to place their linked row back in the tbody
-    if (
-      node.nodeType === Node.COMMENT_NODE &&
-      (!selector || !node.placeholder.matches(selector))
-    )
-    {
-      tbody.replaceChild(node.placeholder, node);
-    }
-  }
-
-  // if there is a list of nodes to filter
-  if (selector)
-  {
-    // per each of them put a placeholder inside the tbody
-    for (const tr of tbody.querySelectorAll(selector))
-    {
-      tbody.replaceChild(getPlaceholder(tr), tr);
-    }
+function createZebra(rows, state, type)
+{
+  let i = 0;
+  for (const tr of rows)
+  {
+    tr.hidden = (state ? tr.dataset.state !== state : false) ||
+                (type ? tr.dataset.type !== type : false);
+
+    if (!tr.hidden)
+      tr.classList.toggle("odd", !!(i++ % 2));
   }
 }
 
 document.addEventListener("DOMContentLoaded", () =>
 {
-  let container = document.getElementById("items");
-  let table = container.querySelector("tbody");
-  let bgItems = container.querySelector("#background-items");
-  let template = document.querySelector("template").content.firstElementChild;
+  const container = document.getElementById("items");
+  const foregroundTable = container.querySelector("table.foreground tbody");
+  const backgroundTable = container.querySelector("table.background tbody");
+  const template = document.querySelector("template")
+                            .content.firstElementChild;
+
+  // We update rows by message index.
+  // Since we don't have a linear collection of rows anymore,
+  // all records, as row, will be indexed in here.
+  // Memory wise, this is just a collection that points
+  // at live DOM nodes (rows), so this does not imply
+  // higher memory consumption, leaks, or any other concern.
   const records = [];
+
+  const filterState = document.getElementById("filter-state");
+  const filterType = document.getElementById("filter-type");
+
+  const updateRowsState = () =>
+  {
+    const state = filterState.value;
+    const type = filterType.value;
+    createZebra(foregroundTable.querySelectorAll("tr"), state, type);
+    const notFirstTR = "tr:not(:first-child)";
+    createZebra(backgroundTable.querySelectorAll(notFirstTR), state, type);
+  };
 
   document.getElementById("reload").addEventListener("click", () =>
   {
     ext.devtools.inspectedWindow.reload();
   }, false);
 
-  document.getElementById("filter-state").addEventListener("change", (event) =>
-  {
-    container.dataset.filterState = event.target.value;
-    updateRows(table, container.dataset);
-  }, false);
-
-  document.getElementById("filter-type").addEventListener("change", (event) =>
-  {
-    container.dataset.filterType = event.target.value;
-    updateRows(table, container.dataset);
-  }, false);
+  // update rows visibility state per each change
+  filterState.addEventListener("change", updateRowsState, false);
+  filterType.addEventListener("change", updateRowsState, false);
 
   ext.onMessage.addListener((message) =>
   {
     switch (message.type)
     {
       case "add-record":
-        let record = createRecord(message.request, message.filter, template);
+        const record = createRecord(message.request, message.filter, template);
         records.push(record);
-        // what is the official way to know if a request is from background tab?
-        if (/^SCRIPT|BACKGROUND$/.test(message.request.type))
-        {
-          table.appendChild(record);
-        }
+        // waiting for 6402 to ship
+        if (message.request.docDomain == null)
+          backgroundTable.appendChild(record);
         else
-        {
-          table.insertBefore(record, bgItems);
-        }
+          foregroundTable.appendChild(record);
         break;
 
       case "update-record":
         let oldRow = records[message.index];
         let newRow = createRecord(message.request, message.filter, template);
         records[message.index] = newRow;
-        let liveRow = oldRow.parentNode ? oldRow : oldRow.placeholder;
-        liveRow.parentNode.replaceChild(newRow, liveRow);
+        oldRow.parentNode.replaceChild(newRow, oldRow);
         newRow.classList.add("changed");
         container.classList.add("has-changes");
         break;
 
       case "remove-record":
         let row = records.splice(message.index, 1)[0];
-        let live = row.parentNode ? row : row.placeholder;
-        live.parentNode.removeChild(live);
+        row.parentNode.removeChild(row);
         container.classList.add("has-changes");
         break;
 
       case "reset":
         records.splice(0);
-        table.innerHTML = "";
+        foregroundTable.innerHTML = "";
         container.classList.remove("has-changes");
         break;
     }
+    updateRowsState();
   });
 
   window.addEventListener("message", (event) =>
   {
     switch (event.data.type)
     {
       case "performSearch":
-        performSearch(table, event.data.queryString);
+        performSearch(records, event.data.queryString);
         lastFilterQuery = event.data.queryString;
         break;
       case "cancelSearch":
-        cancelSearch(table);
+        cancelSearch(records);
         lastFilterQuery = null;
         break;
     }
   });
 
   // Since Chrome 54 the themeName is accessible, for earlier versions we must
   // assume the default theme is being used.
   // https://bugs.chromium.org/p/chromium/issues/detail?id=608869
   let theme = browser.devtools.panels.themeName || "default";
   document.body.classList.add(theme);
 }, false);