CSC/ECE 517 Spring 2017/M1702 Implement the Mutation Observer API

Mutation Observer API Project with SERVO & RUST

Servo is a prototype web browser engine written in the RUST language. The DOM standard defines a MutationObserver API that allows web content to receive callbacks when the page contents are mutated. The goal of this project is to implement the fundamental pieces required to support the Mutation Observer API.

Introduction

Servo

Servo is an open source prototype web browser layout engine being developed by Mozilla, and it is written in Rust language. The main idea is to create a highly parallel environment, in which different components can be handled by fine grained, isolated tasks. The different components can be rendering, HTML parsing, etc.

Rust

Rust is an open source systems programming language developed by Mozilla. Servo is written in Rust. The main purpose behind it's design is to be thread safe and concurrent. The emphasis is also on speed, safety and control of memory layout.

Tracking issue

The Original Tracking Issue for the same can be found at the Tracking Issue page of the Mutation Observer Project.

Project Description

• Initial steps for Stub method Implementation:
  • Create the MutationObserver and MutationRecord interfaces with stub method implementations following the guidelines given here: Adding a new DOM Interface

   MutationObserver IDL
   [Constructor(MutationCallback callback)]
   interface MutationObserver {
     void observe(Node target, optional MutationObserverInit options);
     void disconnect();
     sequence<MutationRecord> takeRecords();
   };
   
   callback MutationCallback  = void (sequence<MutationRecord> mutations, MutationObserver observer);
   
   dictionary MutationObserverInit {
     boolean childList = false;
     boolean attributes;
     boolean characterData;
     boolean subtree = false;
     boolean attributeOldValue;
     boolean characterDataOldValue;
     sequence<DOMString> attributeFilter;
   };

   MutationRecord IDL
   [Exposed=Window]
   interface MutationRecord {
     readonly attribute DOMString type;
     [SameObject] readonly attribute Node target;
     [SameObject] readonly attribute NodeList addedNodes;
     [SameObject] readonly attribute NodeList removedNodes;
     readonly attribute Node? previousSibling;
     readonly attribute Node? nextSibling;
     readonly attribute DOMString? attributeName;
     readonly attribute DOMString? attributeNamespace;
     readonly attribute DOMString? oldValue;
   };

• Hide the new interfaces by default by adding a [Pref="dom.mutation_observer.enabled"] attribute to each one and add a corresponding preference to resources/prefs.json.

• Add a vector of MutationObserver objects as a member of ScriptThread.
• Implement the MutationObserver constructor, by following the steps given in the DOM Specifications.

Testing

• add a __dir__.ini file to tests/wpt/metadata/dom/nodes/ which enables the new preference by including "prefs: ["dom.mutation_observer.enabled:true"]".
• Tests are present in web-platform-tests directory (i.e .tests/wpt/web-platform-tests/dom/nodes).
• Run web-platform tests from the root by using the following command

   ./mach test-wpt tests/wpt/web-platform-tests/dom/nodes.

• Update corresponding tests expectations as per the given guidelines in tests/wpt/metadata/dom/nodes/ directory.

Design Patterns

TODO

Conclusion

After making our changes, we can create the Mutation Observer Object using the Constructor.

Subsequent Steps

After completing the above initial steps, we plan on performing the following tasks:

• add support for mutation observer microtasks
  • add a mutation_observer_compound_microtask_queued member to ScriptThread
  • implement the queue a mutation observer compound microtask algorithm by adding a new variant to the Microtask enum for mutation observers
  • implement the notify mutation observers algorithm (ignoring the specific text about "execute a compound microtask") using the vector of observers previously added to ScriptThread
• add support for observing specific mutations
  • add a vector of MutationObserver objects to Node
  • implement MutationObserver.observe (step 7 and 8 mean "replace an existing matching entry with the new options, or add a new entry if there is no match")
  • implement the queue a mutation record algorithm
  • make changing/appending/removing/replacing an attribute queue a mutation record via Attr::set_value, Element::push_attribute, and Element::remove_first_matching_attribute

References

1. https://doc.rust-lang.org/stable/book/
2. https://en.wikipedia.org/wiki/Rust_(programming_language)
3. https://en.wikipedia.org/wiki/Servo_(layout_engine)