Explaining visual changes in web interfaces

Download: PDF, slides (PDF), Timelapse implementation.

“Explaining visual changes in web interfaces” by Brian Burg, Andrew J. Ko, and Michael D. Ernst. In UIST 2015: Proceedings of the 28th ACM Symposium on User Interface Software and Technology, (Charlotte, NC, USA), Nov. 2015, pp. 259-268.

Abstract

Web developers often want to repurpose interactive behaviors from third-party web pages, but struggle to locate the specific source code that implements the behavior. This task is challenging because developers must find and connect all of the non-local interactions between event-based JavaScript code, declarative CSS styles, and web page content that combine to express the behavior.

The Scry tool embodies a new approach to locating the code that implements interactive behaviors. A developer selects a page element; whenever the element changes, Scry captures the rendering engine's inputs (DOM, CSS) and outputs (screenshot) for the element. For any two captured element states, Scry can compute how the states differ and which lines of JavaScript code were responsible. Using Scry, a developer can locate an interactive behavior's implementation by picking two output states; Scry indicates the JavaScript code directly responsible for their differences.

Download: PDF, slides (PDF), Timelapse implementation.

BibTeX entry:

@inproceedings{BurgKE2015,
   author = {Brian Burg and Andrew J. Ko and Michael D. Ernst},
   title = {Explaining visual changes in web interfaces},
   booktitle = {UIST 2015: Proceedings of the 28th ACM Symposium on User
	Interface Software and Technology},
   pages = {259--268},
   address = {Charlotte, NC, USA},
   month = nov,
   year = {2015}
}

(This webpage was created with bibtex2web.)

Back to Michael Ernst's publications.