search

veracitylab / DOM-Instrumentation-to-Display-Provenance-Data

Honours Project: JavaScript program to Instrument DOM elements manipulated by Ajax calls to facilitate in exposing Provenance Data
0 stars 0 forks source link

Map synchronous DOM updates to HTTP responses #17

Closed wtwhite closed 6 months ago

wtwhite commented 6 months ago

Will resolve #15.

WIP, lots of messy exploration. Most progress/issues so far have been described in the linked issue.

Current status: The movie recommender app displays 30%-opaque yellow highlight boxes over all DOM elements that it concludes have been updated as a result of an XMLHttpRequest's response. These frequently overlap, sometimes heavily, and "semantic" changes (like Bootstrap changing the <body> element's style property when a modal is active) cause highlighting that arguably should not be there. (If this happens consistently with a common web framework like Bootstrap, special-case filtering could be applied to remediate it.)

TODO: Need some simple way to avoid (too much) overlap of these boxes.

wtwhite commented 6 months ago

Still room for lots of visual polish, but this now works reasonable well on the movie recommender demo app.

The issue of highlight boxes overlapping each other is (mostly) solved by highlighting only the minimal changed elements: That is, elements that were detected by the MutationObserver as being added by a particular provenance-enriched HTTP response, and which do not have any such elements as descendants. These represent changes that occur as close to the leaves of the DOM as possible. (Generally, changes occurring in higher-level objects amount to just having elements containing more detailed changes inserted into or removed from them.)

"Mostly" solved, because there are cases where overlaps still occur -- e.g., when popping up the movie detail modal, Bootstrap creates a large background <div> to cover the entire screen with 50% opaque grey, and which doesn't appear as an ancestor of any deeper changed element (it's given fixed position), so the entire viewport gets covered with a highlight box for it. The individual changed detail elements are still quite clearly visible though, and if this is judged still too distracting, we could add in some filtering to work around this kind of thing as done by common JS frameworks.