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.
This commit is contained in:
Kacper Michajłow 2017-11-22 00:08:32 +01:00 committed by Raymond Hill
parent 1f7243ce55
commit ec70c75264
4 changed files with 28 additions and 24 deletions

View File

@ -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];

View File

@ -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) {

View File

@ -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) {

View File

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