Skip to content

Commit c744c87

Browse files
gorhillgorhill
committed
Reset the DOM inspector when URL in top context changes
Related issue: uBlockOrigin/uBlock-issues#542
1 parent 941077a commit c744c87

3 files changed

Lines changed: 60 additions & 64 deletions

File tree

‎src/js/logger-ui-inspector.js‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
Home: https://github.com/gorhill/uBlock
2020
*/
2121

22+
/* globals browser */
23+
2224
'use strict';
2325

2426
import { dom, qs$, qsa$ } from './dom.js';
@@ -29,21 +31,8 @@ import { dom, qs$, qsa$ } from './dom.js';
2931

3032
/******************************************************************************/
3133

32-
const showdomButton = qs$('#showdom');
33-
34-
// Don't bother if the browser is not modern enough.
35-
if (
36-
typeof Map === 'undefined' ||
37-
Map.polyfill ||
38-
typeof WeakMap === 'undefined'
39-
) {
40-
dom.cl.add(showdomButton, 'disabled');
41-
return;
42-
}
43-
44-
/******************************************************************************/
45-
4634
const logger = self.logger;
35+
const showdomButton = qs$('#showdom');
4736
const inspector = qs$('#domInspector');
4837
const domTree = qs$('#domTree');
4938
const filterToIdMap = new Map();
@@ -71,7 +60,7 @@ inspectorFramePort.onmessageerror = ( ) => {
7160

7261
/******************************************************************************/
7362

74-
const nodeFromDomEntry = function(entry) {
63+
const nodeFromDomEntry = entry => {
7564
const li = document.createElement('li');
7665
dom.attr(li, 'id', entry.nid);
7766
// expander/collapser
@@ -107,7 +96,7 @@ const nodeFromDomEntry = function(entry) {
10796

10897
/******************************************************************************/
10998

110-
const appendListItem = function(ul, li) {
99+
const appendListItem = (ul, li) => {
111100
ul.appendChild(li);
112101
// Ancestor nodes of a node which is affected by a cosmetic filter will
113102
// be marked as "containing cosmetic filters", for user convenience.
@@ -121,7 +110,7 @@ const appendListItem = function(ul, li) {
121110

122111
/******************************************************************************/
123112

124-
const renderDOMFull = function(response) {
113+
const renderDOMFull = response => {
125114
const domTreeParent = domTree.parentElement;
126115
let ul = domTreeParent.removeChild(domTree);
127116
logger.removeAllChildren(domTree);
@@ -165,7 +154,7 @@ const renderDOMFull = function(response) {
165154

166155
/******************************************************************************/
167156

168-
const patchIncremental = function(from, delta) {
157+
const patchIncremental = (from, delta) => {
169158
let li = from.parentElement.parentElement;
170159
const patchCosmeticHide = delta >= 0 &&
171160
dom.cl.has(from, 'isCosmeticHide') &&
@@ -189,7 +178,7 @@ const patchIncremental = function(from, delta) {
189178

190179
/******************************************************************************/
191180

192-
const renderDOMIncremental = function(response) {
181+
const renderDOMIncremental = response => {
193182
// Process each journal entry:
194183
// 1 = node added
195184
// -1 = node removed
@@ -248,15 +237,15 @@ const renderDOMIncremental = function(response) {
248237

249238
/******************************************************************************/
250239

251-
const countFromNode = function(li) {
240+
const countFromNode = li => {
252241
const span = li.children[2];
253242
const cnt = parseInt(dom.attr(span, 'data-cnt'), 10);
254243
return isNaN(cnt) ? 0 : cnt;
255244
};
256245

257246
/******************************************************************************/
258247

259-
const selectorFromNode = function(node) {
248+
const selectorFromNode = node => {
260249
let selector = '';
261250
while ( node !== null ) {
262251
if ( node.localName === 'li' ) {
@@ -273,7 +262,7 @@ const selectorFromNode = function(node) {
273262

274263
/******************************************************************************/
275264

276-
const selectorFromFilter = function(node) {
265+
const selectorFromFilter = node => {
277266
while ( node !== null ) {
278267
if ( node.localName === 'li' ) {
279268
const code = qs$(node, 'code:nth-of-type(2)');
@@ -288,7 +277,7 @@ const selectorFromFilter = function(node) {
288277

289278
/******************************************************************************/
290279

291-
const nidFromNode = function(node) {
280+
const nidFromNode = node => {
292281
let li = node;
293282
while ( li !== null ) {
294283
if ( li.localName === 'li' ) {
@@ -301,7 +290,7 @@ const nidFromNode = function(node) {
301290

302291
/******************************************************************************/
303292

304-
const startDialog = (function() {
293+
const startDialog = (( ) => {
305294
let dialog;
306295
let textarea;
307296
let hideSelectors = [];
@@ -414,7 +403,7 @@ const startDialog = (function() {
414403

415404
/******************************************************************************/
416405

417-
const onClicked = function(ev) {
406+
const onClicked = ev => {
418407
ev.stopPropagation();
419408

420409
if ( inspectedTabId === 0 ) { return; }
@@ -475,21 +464,19 @@ const onClicked = function(ev) {
475464

476465
/******************************************************************************/
477466

478-
const onMouseOver = (function() {
467+
const onMouseOver = (( ) => {
479468
let mouseoverTarget = null;
480469

481-
const timerHandler = ( ) => {
470+
const mouseoverTimer = vAPI.defer.create(( ) => {
482471
inspectorFramePort.postMessage({
483472
what: 'highlightOne',
484473
selector: selectorFromNode(mouseoverTarget),
485474
nid: nidFromNode(mouseoverTarget),
486475
scrollTo: true
487476
});
488-
};
489-
490-
const mouseoverTimer = vAPI.defer.create(timerHandler);
477+
});
491478

492-
return function(ev) {
479+
return ev => {
493480
if ( inspectedTabId === 0 ) { return; }
494481
// Convenience: skip real-time highlighting if shift key is pressed.
495482
if ( ev.shiftKey ) { return; }
@@ -503,65 +490,76 @@ const onMouseOver = (function() {
503490

504491
/******************************************************************************/
505492

506-
const currentTabId = function() {
493+
const currentTabId = ( ) => {
507494
if ( dom.cl.has(showdomButton, 'active') === false ) { return 0; }
508495
return logger.tabIdFromPageSelector();
509496
};
510497

511498
/******************************************************************************/
512499

513-
const injectInspector = function() {
514-
const tabId = currentTabId();
515-
if ( tabId <= 0 ) { return; }
516-
inspectedTabId = tabId;
517-
vAPI.messaging.send('loggerUI', {
518-
what: 'scriptlet',
519-
tabId,
520-
scriptlet: 'dom-inspector',
500+
const injectInspector = (( ) => {
501+
const timer = vAPI.defer.create(( ) => {
502+
const tabId = currentTabId();
503+
if ( tabId <= 0 ) { return; }
504+
inspectedTabId = tabId;
505+
vAPI.messaging.send('loggerUI', {
506+
what: 'scriptlet',
507+
tabId,
508+
scriptlet: 'dom-inspector',
509+
});
521510
});
522-
};
511+
return ( ) => {
512+
shutdownInspector();
513+
timer.offon(353);
514+
};
515+
})();
523516

524517
/******************************************************************************/
525518

526-
const shutdownInspector = function() {
527-
if ( inspectorFramePort !== undefined ) {
528-
inspectorFramePort.postMessage({ what: 'quitInspector' });
529-
}
519+
const shutdownInspector = ( ) => {
520+
inspectorFramePort.postMessage({ what: 'quitInspector' });
530521
logger.removeAllChildren(domTree);
531522
dom.cl.remove(inspector, 'vExpanded');
532523
inspectedTabId = 0;
533524
};
534525

535526
/******************************************************************************/
536527

537-
const onTabIdChanged = function() {
528+
const onTabIdChanged = ( ) => {
538529
const tabId = currentTabId();
539530
if ( tabId <= 0 ) {
540531
return toggleOff();
541532
}
542533
if ( inspectedTabId !== tabId ) {
543-
shutdownInspector();
544534
injectInspector();
545535
}
546536
};
547537

548538
/******************************************************************************/
549539

550-
const toggleVCompactView = function() {
540+
const onDOMContentLoaded = details => {
541+
if ( details.tabId !== inspectedTabId ) { return; }
542+
if ( details.frameId !== 0 ) { return; }
543+
injectInspector();
544+
};
545+
546+
/******************************************************************************/
547+
548+
const toggleVCompactView = ( ) => {
551549
const state = dom.cl.toggle(inspector, 'vExpanded');
552550
const branches = qsa$('#domInspector li.branch');
553551
for ( const branch of branches ) {
554552
dom.cl.toggle(branch, 'show', state);
555553
}
556554
};
557555

558-
const toggleHCompactView = function() {
556+
const toggleHCompactView = ( ) => {
559557
dom.cl.toggle(inspector, 'hCompact');
560558
};
561559

562560
/******************************************************************************/
563561

564-
const revert = function() {
562+
const revert = ( ) => {
565563
dom.cl.remove('#domTree .off', 'off');
566564
inspectorFramePort.postMessage({ what: 'resetToggledNodes' });
567565
dom.cl.add(qs$(inspector, '.permatoolbar .revert'), 'disabled');
@@ -570,7 +568,7 @@ const revert = function() {
570568

571569
/******************************************************************************/
572570

573-
const toggleOn = function() {
571+
const toggleOn = ( ) => {
574572
dom.cl.add('#inspectors', 'dom');
575573
window.addEventListener('beforeunload', toggleOff);
576574
document.addEventListener('tabIdChanged', onTabIdChanged);
@@ -580,12 +578,13 @@ const toggleOn = function() {
580578
dom.on('#domInspector .hCompactToggler', 'click', toggleHCompactView);
581579
dom.on('#domInspector .permatoolbar .revert', 'click', revert);
582580
dom.on('#domInspector .permatoolbar .commit', 'click', startDialog);
581+
browser.webNavigation.onDOMContentLoaded.addListener(onDOMContentLoaded);
583582
injectInspector();
584583
};
585584

586585
/******************************************************************************/
587586

588-
const toggleOff = function() {
587+
const toggleOff = ( ) => {
589588
dom.cl.remove(showdomButton, 'active');
590589
dom.cl.remove('#inspectors', 'dom');
591590
shutdownInspector();
@@ -597,12 +596,13 @@ const toggleOff = function() {
597596
dom.off('#domInspector .hCompactToggler', 'click', toggleHCompactView);
598597
dom.off('#domInspector .permatoolbar .revert', 'click', revert);
599598
dom.off('#domInspector .permatoolbar .commit', 'click', startDialog);
599+
browser.webNavigation.onDOMContentLoaded.removeListener(onDOMContentLoaded);
600600
inspectedTabId = 0;
601601
};
602602

603603
/******************************************************************************/
604604

605-
const toggle = function() {
605+
const toggle = ( ) => {
606606
if ( dom.cl.toggle(showdomButton, 'active') ) {
607607
toggleOn();
608608
} else {

‎src/js/logger-ui.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -972,7 +972,7 @@ const viewPort = (( ) => {
972972
const updateCurrentTabTitle = (( ) => {
973973
const i18nCurrentTab = i18n$('loggerCurrentTab');
974974

975-
return function() {
975+
return ( ) => {
976976
const select = qs$('#pageSelector');
977977
if ( select.value !== '_' || activeTabId === 0 ) { return; }
978978
const opt0 = qs$(select, '[value="_"]');
@@ -1033,8 +1033,7 @@ const synchronizeTabIds = function(newTabIds) {
10331033
return newTabIds.get(a).localeCompare(newTabIds.get(b));
10341034
});
10351035
let j = 3;
1036-
for ( let i = 0; i < tabIds.length; i++ ) {
1037-
const tabId = tabIds[i];
1036+
for ( const tabId of tabIds ) {
10381037
if ( tabId <= 0 ) { continue; }
10391038
if ( j === select.options.length ) {
10401039
select.appendChild(document.createElement('option'));

‎src/js/messaging.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1696,17 +1696,14 @@ const getLoggerData = async function(details, activeTabId, callback) {
16961696
tooltips: µb.userSettings.tooltipsDisabled === false
16971697
};
16981698
if ( µb.pageStoresToken !== details.tabIdsToken ) {
1699-
const tabIds = new Map();
1699+
response.tabIds = [];
17001700
for ( const [ tabId, pageStore ] of µb.pageStores ) {
1701-
const { rawURL } = pageStore;
1702-
if (
1703-
rawURL.startsWith(extensionOriginURL) === false ||
1704-
rawURL.startsWith(documentBlockedURL)
1705-
) {
1706-
tabIds.set(tabId, pageStore.title);
1701+
const { rawURL, title } = pageStore;
1702+
if ( rawURL.startsWith(extensionOriginURL) ) {
1703+
if ( rawURL.startsWith(documentBlockedURL) === false ) { continue; }
17071704
}
1705+
response.tabIds.push([ tabId, title ]);
17081706
}
1709-
response.tabIds = Array.from(tabIds);
17101707
}
17111708
if ( activeTabId ) {
17121709
const pageStore = µb.pageStoreFromTabId(activeTabId);

0 commit comments

Comments
 (0)