improve DOM inspector (#3254)

* dom-inspector: Improvments

- Fix race between userCSS injection and element highlight resulting in none or not all elements highlighted.
- Fix page being scanned twice resulting in unneeded slowdown.

* dom-inspector: Clear mutationTimer to allow more than one update.

* dom-inspector: Fix procedural filters shown as declarative with expando.

platform/chromium/vapi-background.js

@@ -774,7 +774,7 @@ vAPI.messaging.onPortMessage = (function() {
         return new CallbackWrapper(port, request);
     };
 
-    var toFramework = function(request, port) {
+    var toFramework = function(request, port, callback) {
         var sender = port && port.sender;
         if ( !sender ) { return; }
         var tabId = sender.tab && sender.tab.id;
@@ -826,13 +826,19 @@ vAPI.messaging.onPortMessage = (function() {
                 details.runAt = 'document_start';
             }
             var cssText;
+            const cssPromises = [];
             for ( cssText of msg.add ) {
                 details.code = cssText;
-                chrome.tabs.insertCSS(tabId, details);
+                cssPromises.push(chrome.tabs.insertCSS(tabId, details));
             }
             for ( cssText of msg.remove ) {
                 details.code = cssText;
-                chrome.tabs.removeCSS(tabId, details);
+                cssPromises.push(chrome.tabs.removeCSS(tabId, details));
+            }
+            if ( typeof callback === 'function' ) {
+                Promise.all(cssPromises).then(() => {
+                    callback();
+                }, null);
             }
             break;
         }
@@ -851,19 +857,18 @@ vAPI.messaging.onPortMessage = (function() {
     });
 
     return function(request, port) {
-        // Content process to main process: framework handler.
-        // No callback supported/needed for now.
-        if ( request.channelName === 'vapi' ) {
-            toFramework(request, port);
-            return;
-        }
-
-        // Auxiliary process to main process: prepare response
+        // prepare response
         var callback = this.NOOPFUNC;
         if ( request.auxProcessId !== undefined ) {
             callback = callbackWrapperFactory(port, request).callback;
         }
 
+        // Content process to main process: framework handler.
+        if ( request.channelName === 'vapi' ) {
+            toFramework(request, port, callback);
+            return;
+        }
+
         // Auxiliary process to main process: specific handler
         var r = this.UNHANDLED,
             listener = this.listeners[request.channelName];

platform/chromium/vapi-usercss.js

@@ -451,7 +451,7 @@ vAPI.DOMFilterer.prototype = {
         this.hiddenNodesetToProcess.add(node);
     },
 
-    toggle: function(state) {
+    toggle: function(state, callback) {
         vAPI.userStylesheet.toggle(state);
         var disabled = vAPI.userStylesheet.disabled,
             nodes = document.querySelectorAll('[' + this.hideNodeAttr + ']');
@@ -465,6 +465,9 @@ vAPI.DOMFilterer.prototype = {
         if ( disabled === false && this.hideNodeExpando !== undefined ) {
             this.hideNodeBatchProcessTimer.start();
         }
+        if ( typeof callback === 'function' ) {
+            callback();
+        }
     },
 
     getAllSelectors_: function(all) {

platform/webext/vapi-usercss.js

@@ -31,13 +31,13 @@ if ( typeof vAPI === 'object' ) { // >>>>>>>> start of HUGE-IF-BLOCK
 vAPI.userStylesheet = {
     added: new Set(),
     removed: new Set(),
-    apply: function() {
+    apply: function(callback) {
         if ( this.added.size === 0 && this.removed.size === 0 ) { return; }
         vAPI.messaging.send('vapi', {
             what: 'userCSS',
             add: Array.from(this.added),
             remove: Array.from(this.removed)
-        });
+        }, callback);
         this.added.clear();
         this.removed.clear();
     },
@@ -184,7 +184,7 @@ vAPI.DOMFilterer.prototype = {
         node.removeAttribute(this.hideNodeAttr);
     },
 
-    toggle: function(state) {
+    toggle: function(state, callback) {
         if ( state === undefined ) { state = this.disabled; }
         if ( state !== this.disabled ) { return; }
         this.disabled = !state;
@@ -197,7 +197,7 @@ vAPI.DOMFilterer.prototype = {
                 userStylesheet.add(rule);
             }
         }
-        userStylesheet.apply();
+        userStylesheet.apply(callback);
     },
 
     getAllSelectors_: function(all) {

src/js/scriptlets/dom-inspector.js

@@ -363,6 +363,7 @@ var domLayout = (function() {
 
     var journalFromMutations = function() {
         var nodelist, node, domNode, nid;
+        mutationTimer = undefined;
 
         // This is used to temporarily hold all added nodes, before resolving
         // their node id and relative position.
@@ -537,9 +538,8 @@ var cosmeticFilterMapper = (function() {
         for ( entry of (details.procedural || []) ) {
             nodes = entry.exec();
             for ( node of nodes ) {
-                if ( filterMap.has(node) === false ) {
-                    filterMap.set(node, entry.raw);
-                }
+                // Upgrade declarative selector to procedural one
+                filterMap.set(node, entry.raw);
             }
         }
     };
@@ -800,8 +800,7 @@ var start = function() {
             document.removeEventListener(ev.type, onReady);
         }
         vAPI.messaging.sendTo(loggerConnectionId, domLayout.get());
-        vAPI.domFilterer.toggle(false);
-        highlightElements();
+        vAPI.domFilterer.toggle(false, highlightElements);
     };
     if ( document.readyState === 'loading' ) {
         document.addEventListener('DOMContentLoaded', onReady);
@@ -951,9 +950,6 @@ var bootstrap = function(ev) {
 
     window.addEventListener('scroll', onScrolled, true);
 
-    cosmeticFilterMapper.reset();
-    highlightElements();
-
     vAPI.messaging.connectTo('domInspector', 'loggerUI', messagingHandler);
 };