DOM inspector

[gorhill]

Losing track of all that is left to do... I need to write down everything I can think of:

• Combine dom-highlight.js and dom-layout.js into dom-inspector.js
  • Rename dom-fingerprint.js scriptlet to dom-inspector-poke.js, which returns the session id.
    • When logger sees a mismatch with the last saved session id, this means dom-inspector.js need to be flushed+reinjected.
• Incremental rendering of DOM tree (important)
  • To preserve layout across refresh (preserve node identity)
  • For efficiency (side effect)
  • Challenging
• Commit dialog (modal)
  • Derive cosmetic filters from all changes
  • In textarea -- let user edit manually, reflect any changes in real time
  • Like with element picker, prepend date/url once for all filters
• Toolbar
  • Commit button
  • Revert button
  • Allow inverted rendering mode for convenience
• Quirks
  • Reset DOM highlighter when tab selector auto reset to All
  • DOM fingerprint: take into account uBlock's own node(s)
  • Toolbars not sticky on Firefox
  • Disabling a specific cosmetic filter needs to un-hide all nodes which are affected by the filter.
  • Issue to solve: some code in the DOM inspector may take longer to execute than the timeout period of the caller (example: inspecting https://dom.spec.whatwg.org/#mutation-observers with Firefox 38).
  • Investigate/fix Firefox webext issue with Dom inspector scriptlet injection
  • Add whatever comes up
• Provide a collapsible overview of all cosmetic filters used on the page at the top so that one can toggle filters without having to drill down the DOM tree.
• Replace use of built-in scrollIntoView with custom solution. The current behavior of scrollIntoView is not compatible with the desirable behavior in the DOM inspector.
  • No auto-scrolling should take place if the element is already in the viewport
  • When auto-scrolling is necessary, the target element should be vertically centered
  • Need a minimal size for element with a zero dimension

[fireattack]

Sorry for my ignorance, how can I use this DOM inspector? I read through https://github.com/gorhill/uBlock/wiki/DOM-inspector but still have no idea how to access it (I suppose it's different from element picker?).

[gorhill]

From the logger -- the </> icon:

I haven't had much time to work on it further. Hopefully I will be able at some point, this was fun part to work on.

[fireattack]

Thanks, got it.

[gwarser]

Are you planing to work on this little more?
I have some problems.

For example here http://spottedlublin.pl/mniejsze-obowiazki-szkoleniowe-dla-operatorow-maszyn-budowlanych-od-1-kwietnia-2017/ when I want to find what filter is blocking article content:

• I must click on each red triangle to see active filter - tree should be unfolded by default or some shortcut/button for unfolding should be available
• when switching between log and DOM viewer, page is covered by very dark layer
• page is automatically scrolled to the top when I switch to it - I must scroll every time to see article content
• bottom edge of covering layer is visible when scrolling
• reloading page by button in logger makes clicking on nodes to disable filters to no longer work (not reflected on page)

Fx 52, UBO 1.10.5b9

Article content is blocked by ##.share-container from Fanboy’s Annoyance List‎. I cannot report because I get error when submitting new post on forum.

[gorhill]

There is often an issue launching the DOM inspector with Firefox's webext. I need to investigate why this happens -- same code works fine with Chromium.

[gorhill]

Quite probably related: https://bugzilla.mozilla.org/show_bug.cgi?id=1392067

[kasper93]

@gorhill: I've fixed 4 issues that I noticed with inspector. No more know issues at this moment. You probably have seen that, just posting here for reference #3254