Extracting client-side web application code

Maras, Josip; Carlson, Jan; Crnković, Ivica

doi:10.1145/2187836.2187947

Cited by 21 publications

(12 citation statements)

References 12 publications

Supporting

Mentioning

Contrasting

Order By: Relevance

“…Other tools detect parts of web pages that render differently in different browsers [Choudhary et al 2012;Mesbah and Prasad 2011;Roy Choudhary et al 2010]. Finally, some tools help developers transfer styles or content between web pages [Maras et al 2012[Maras et al , 2014. These heuristic tools are useful, and could be integrated with Troika; however, they do not provide sound guarantees.…”

Section: Debugging Web Page Layoutsmentioning

confidence: 99%

Modular verification of web page layout

Panchekha

Ernst

Tatlock

et al. 2019

Proc. ACM Program. Lang.

View full text Add to dashboard Cite

Automated verification can ensure that a web page satisfies accessibility, usability, and design properties regardless of the end user's device, preferences, and assistive technologies. However, state-of-the-art verification tools for layout properties do not scale to large pages because they rely on whole-page analyses and must reason about the entire page using the complex semantics of the browser layout algorithm. This paper introduces and formalizes modular layout proofs. A modular layout proof splits a monolithic verification problem into smaller verification problems, one for each component of a web page. Each component specification can use rely/guarantee-style preconditions to make it verifiable independently of the rest of the page and enabling reuse across multiple pages. Modular layout proofs scale verification to pages an order of magnitude larger than those supported by previous approaches. We prototyped these techniques in a new proof assistant, Troika. In Troika, a proof author partitions a page into components and writes specifications for them. Troika then verifies the specifications, and uses those specifications to verify whole-page properties. Troika also enables the proof author to verify different component specifications with different verification tools, leveraging the strengths of each. In a case study, we use Troika to verify a large web page and demonstrate a speed-up of 13ś1469× over existing tools, taking verification time from hours to seconds. We develop a systematic approach to writing Troika proofs and demonstrate it on 8 proofs of properties from prior work to show that modular layout proofs are short, easy to write, and provide benefits over existing tools. CCS Concepts: • Software and its engineering → Software maintenance tools.

show abstract

Section: Debugging Web Page Layoutsmentioning

confidence: 99%

Modular verification of web page layout

Panchekha

Ernst

Tatlock

et al. 2019

Proc. ACM Program. Lang.

View full text Add to dashboard Cite

show abstract

“…Other tools attempt to detect crossbrowser differences for web pages, often using heuristics to build a high-level model of the page behavior [RCVO10, MP11, CPO12] These tools are useful, but are each specific to a single web page property. Finally, some tools help developers transfer styles or content between web pages [MCC12,MvC14]. These heuristic tools are useful, and the formal semantics of browser rendering developed in this work could be used to put these tools on a more rigorous footing.…”

Section: Visual Logic Incorporates This Insight By Developing An Exprmentioning

confidence: 99%

Automated reasoning for web page layout

PanchekhaPavel

TorlakEmina

2016

SIGPLAN Not.

View full text Add to dashboard Cite

Automated Reasoning for WebWeb pages define their appearance using Cascading Style Sheets. However, the CSS language's quirks and subtleties make it difficult for designers to write, debug, and test CSS to implement their designs. Additionally, web pages can be laid out by different browsers, at varying screen sizes, and by users with different font or color preferences. Understanding all the ways a web page can be laid out, and ensuring that all these layouts are correct, is a persistent challenge. Yet meeting this challenge is essential to ensure that a web page is accessible, usable, and attractive for all users. Tools to verify such web page layout properties across a range of possible layouts would lighten the testing burden for web developers.We develop a formal verification paradigm for layout properties to support such tools. To formally verify a layout property, that property is first expressed in Visual Logic, a concise language for describing geometric properties of web page layouts. Visual Logic properties are true or false as a consequence of how a browser lays out a given page; we formalize a substantial fragment of browser layout in the Cassius framework. This formalization allows automated reasoning about CSS files and thus enables new tools that reason about the possible layouts of a web page. One such tool, VizAssert, automatically verifies that layout properties, expressed in Visual Logic, are true across a range of screen size or user config-urations. Since VizAssert operates on whole web pages, it is difficult to scale to large web pages. However, large web pages are frequently composed of smaller, independent pieces.Reasoning about large pages should leverage this independence; to this end, the Troika proof assistant allows decomposing a large web page into many components and verifying those components independently.These tools provide a demonstrate formal verification for layout properties and sketch a path toward provably correct web design.2. This formal specification is given a precise meaning by Cassius, a formalization of the browser rendering algorithm, which precisely describes the possible layouts of a given page across a range of browser parameters. Cassius implements the core of CSS 2.1 using the quantifier-free theory of linear real arithmetic (QF-LRA).3. The formal specification can now be verified using VizAssert, which takes as input a web page, ranges for each browser parameter, and a formal specification, and either certifies that the specification is satisfied for all browser parameters in those ranges, or provides a counterexample for which the specification is violated. 15 1 define scrollable(b) = b.left ≥ 0 ∧ b.top ≥ 0 2 theorem links-scrollable = ∀b, b ∈ $(a) =⇒ scrollable(b) 3 page yoga = load yoga/index.html with 4 browser.width ∈ [800, 1920] 5 browser.height ∈ [600, 1280] 6 font.size ∈ [16, 32] 7 proof of links-scrollable for yoga # Subdivide the page into components 8 component head = $(#header) 9 component body = $(#body) 10 component foot = $(#footer) # Component...

show abstract

“…UI Feature Location. Maras et al [15] [16] presents a browser plugin called FireCrow to derive the implementation of UI features on the client side. FireCrow leverages dependency graphs among HTML, CSS and JavaScript to identify code related to certain features.…”

Section: Related Workmentioning

confidence: 99%

Discovering User-Defined Event Handlers in Presence of JavaScript Libraries

Wang

Dou

Gao

et al. 2015

2015 Asia-Pacific Software Engineering Conference (APSEC)

View full text Add to dashboard Cite

JavaScript libraries, such as JQuery, are widely used in web applications. In these libraries' event delegation models, a DOM element's event handler is usually bound to its parent nodes. This makes it difficult for developers to figure out the user-defined event handlers of a specified DOM element. In this paper, we propose an approach that identifies the userdefined event handlers of DOM elements in a web page. We dynamically collect the execution trace for each triggered event in a web page, and analyze how each function is used in the execution trace to discover the event handlers for each event. We evaluate our approach on seven real-world web applications. The result shows that our approach is effective, with an overall precision of 100% and recall of 99.8%.

show abstract

Extracting client-side web application code

Cited by 21 publications

References 12 publications

Modular verification of web page layout

Modular verification of web page layout

Automated reasoning for web page layout

Discovering User-Defined Event Handlers in Presence of JavaScript Libraries

Contact Info

Product

Resources

About