Servo inside (Introduction to Servo's DOM binding), Gecko Inside #6

Published on Feb 24, 2016

Introduction to Servo's DOM binding for newbies

1. Servo inside (introduction to Servo’s DOM binding) Tetsuharu OHZEKI, Gecko Inside #6 (Feb 24, 2016)
2. About me • Tetsuharu OHZEKI (a.k.a @saneyuki_s) • Mozilla Committer (Level 3) as a volunteer contributor • Firefox developer, and Servo reviewer • My main work is Web client-side engineer at Shibuya • JavaScript, GUI Application architecture
4. Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety. http://rust-lang.org/
5. Rust Language • Develop by Mozilla & community • It’s just like “Modern Redesigned C++” • Today’s Gecko try to use Rust in some area: • https://wiki.mozilla.org/Oxidation • e.g. MP4 metadata parser, URL parser, style system
7. Servo • Written with Rust • By Mozilla Research • Parallelism, Power, Correctness, Concurrent programming • more details: https://github.com/servo/servo/wiki/Research
8. Servo’s key “tasks” • Constellation • Script • Layout • Paint • Compositor • Resource
9. script crate • The implementation of “DOM” and scripting • Binding with SpiderMonkey • Handle a web driver’s script execution (from Constellation)
10. Rust Object JS Object browser JS Engine
11. DOM lifecycle & JS binding • DOM needs a complex lifecycle management • good article about this area: http://steps.dodgson.org/b/ 2012/12/19/dom-and-gc-or-what-happend-at-eden/ • Other browser engines have an own garbage collector for this complexity • Cycle Collector (Gecko) • Oilpan GC (Blink) • Servo need not own GC in the browser side like other engines. • All lifecycle of Servo’s DOM object are managed by SpiderMonkey GC
12. How to connect with JSObject & Rust Object? • DOM Object has “Reflector” field as the first field. • Reflector stores a pointer to “wrapper” JS Object which corresponds to it. • JS Object has a pointer to Rust object which is corresponds to it. • JS Object stores the pointer in its “slot”.
13. Node Reflector handlers parent_node …… JSObject
14. Generate a glue code from WebIDL • By /components/script/dom/bindings/codegen/ BindingGen.py • Auto generate from WebIDL with special annotation • Methods, Property, JIT Information, Constants, etc • “Glue” code to connect a Rust world & JS world
15. [Abstract] interface Node : EventTarget { [Constant] readonly attribute unsigned short nodeType; [Pure] readonly attribute DOMString nodeName; … }
17. How to trace object graph from SpiderMonkey GC • From GC roots, SpiderMonkey GC trace an object graph. • Remember these simple rules: • From a wrapper object (JSObject), GC can traces a Rust Object. • From a Rust Object, GC can trace a wrapper JS Object. • Some compiler plugins helps these tricks ;)
18. Reflector JSObject Rust Object JS<T> JS<T> Reflector Rust Object JSObject JS<T> Reflector Rust Object JSObject
19. GC Managed pointer • We use a special smart pointer for GC managed object in Rust world • JS<T> can be holden as a member of a Rust’s DOM struct • Root<T> can be on stack with rooting explicitly. • To avoid SpiderMonkey exact (precise) GC’s mistake. • In practice, we use this for a return value.
20. Inheritance • DOM interface requires an inheritance • But Rust does not have a inheritance system as a language feature! • So we generate annotation traits for safe up/down casting from WebIDL information! • …..And write vtable by hand!
23. vtable by hand…
24. Special macros and plugins • It’s hard to implement a GC hook for an object correctly. • We use a special rust compiler plugins to check & avoid typical pitfalls. • auto generate a tricky implementation for GC interaction. • check unrooted object • valid order of struct (for inheritance) • etc…
25. How to start hacking Servo? • http://servo.github.io/servo-starters/ • Servo team picks up “Good First Pull Request” • CONTRIBUTING.md • HACKING_QUICKSTART.md