dom inspector quirks: keep identical filters in sync, do not create duplicate filters

src/js/logger-ui-inspector.js

@@ -50,6 +50,8 @@ var fingerprint = null;
 var inspector = uDom.nodeFromId('domInspector');
 var domTree = uDom.nodeFromId('domTree');
 var tabSelector = uDom.nodeFromId('pageSelector');
+var uidGenerator = 1;
+var filterToIdMap = new Map();
 
 /******************************************************************************/
 
@@ -71,13 +73,21 @@ var nodeFromDomEntry = function(entry) {
     node.setAttribute('data-cnt', value);
     li.appendChild(node);
     // cosmetic filter
-    if ( entry.filter !== undefined ) {
+    if ( entry.filter === undefined ) {
-        node = document.createElement('code');
+        return li;
-        node.classList.add('filter');
-        node.textContent = entry.filter;
-        li.appendChild(node);
-        li.classList.add('isCosmeticHide');
     }
+    node = document.createElement('code');
+    node.classList.add('filter');
+    value = filterToIdMap.get(entry.filter);
+    if ( value === undefined ) {
+        value = uidGenerator.toString();
+        filterToIdMap.set(entry.filter, value);
+        uidGenerator += 1;
+    }
+    node.setAttribute('data-filter-id', value);
+    node.textContent = entry.filter;
+    li.appendChild(node);
+    li.classList.add('isCosmeticHide');
     return li;
 };
 
@@ -106,6 +116,8 @@ var renderDOMFull = function(response) {
     var ul = domTreeParent.removeChild(domTree);
     logger.removeAllChildren(domTree);
 
+    filterToIdMap.clear();
+
     var lvl = 0;
     var entries = response.layout;
     var n = entries.length;
@@ -115,7 +127,6 @@ var renderDOMFull = function(response) {
         if ( entry.lvl === lvl ) {
             li = nodeFromDomEntry(entry);
             appendListItem(ul, li);
-            //expandIfBlockElement(li);
             continue;
         }
         if ( entry.lvl > lvl ) {
@@ -124,7 +135,6 @@ var renderDOMFull = function(response) {
             li.classList.add('branch');
             li = nodeFromDomEntry(entry);
             appendListItem(ul, li);
-            //expandIfBlockElement(li);
             lvl = entry.lvl;
             continue;
         }
@@ -357,9 +367,15 @@ var startDialog = (function() {
         for ( i = 0; i < entries.length; i++ ) {
             taValue.push(inspectedHostname + '##' + entries[i]);
         }
+        var ids = new Set(), id;
         var nodes = domTree.querySelectorAll('code.filter.off');
         for ( i = 0; i < nodes.length; i++ ) {
             node = nodes[i];
+            id = node.getAttribute('data-filter-id');
+            if ( ids.has(id) ) {
+                continue;
+            }
+            ids.add(id);
             unhideSelectors.push(node.textContent);
             taValue.push(inspectedHostname + '#@#' + node.textContent);
         }
@@ -453,25 +469,47 @@ var onClick = function(ev) {
         return;
     }
 
-    // Toggle selector
+    // Not a node or filter 
-    if ( target.localName === 'code' ) {
+    if ( target.localName !== 'code' ) {
-        var original = target.classList.contains('filter') === false;
+        return;
+    }
+
+    // Toggle cosmetic filter
+    if ( target.classList.contains('filter') ) {
         messager.sendTo(
             {
                 what: 'toggleNodes',
-                original: original,
+                original: false,
-                target: original !== target.classList.toggle('off'),
+                target: target.classList.toggle('off'),
-                selector: selectorFromNode(target, original ? 1 : 2),
+                selector: selectorFromNode(target, 2),
-                nid: original ? nidFromNode(target) : ''
+                nid: ''
             },
             inspectedTabId,
             'dom-inspector.js'
         );
-        var cantCreate = domTree.querySelector('.off') === null;
+        uDom('[data-filter-id="' + target.getAttribute('data-filter-id') + '"]', inspector).toggleClass(
-        inspector.querySelector('.permatoolbar .revert').classList.toggle('disabled', cantCreate);
+            'off',
-        inspector.querySelector('.permatoolbar .commit').classList.toggle('disabled', cantCreate);
+            target.classList.contains('off')
-        return;
+        );
     }
+    // Toggle node
+    else {
+        messager.sendTo(
+            {
+                what: 'toggleNodes',
+                original: true,
+                target: target.classList.toggle('off') === false,
+                selector: selectorFromNode(target, 1),
+                nid: nidFromNode(target)
+            },
+            inspectedTabId,
+            'dom-inspector.js'
+        );
+    }
+
+    var cantCreate = domTree.querySelector('.off') === null;
+    inspector.querySelector('.permatoolbar .revert').classList.toggle('disabled', cantCreate);
+    inspector.querySelector('.permatoolbar .commit').classList.toggle('disabled', cantCreate);
 };
 
 /******************************************************************************/