CSC/ECE 517 Spring 2017/M1702 Implement the Mutation Observer API: Difference between revisions
(added more info.) |
|||
Line 1: | Line 1: | ||
''' Mutation Observer API Project with SERVO & RUST ''' | ''' Mutation Observer API Project with SERVO & RUST ''' | ||
Servo is a prototype web browser engine written in the <span class="plainlinks">[http://en.wikipedia.org/wiki/JavaScript RUST]</span> language. | <span class="plainlinks">[https://en.wikipedia.org/wiki/Servo_(layout_engine) Servo]</span> is a prototype web browser engine written in the <span class="plainlinks">[http://en.wikipedia.org/wiki/JavaScript RUST]</span> 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'''== | =='''Introduction'''== | ||
===Servo=== | ===Servo=== | ||
[https://en.wikipedia.org/wiki/Servo_(layout_engine) Servo] | [https://en.wikipedia.org/wiki/Servo_(layout_engine) Servo] is an open source prototype web browser layout engine being developed by Mozilla, and it is written in [https://www.rust-lang.org/ 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=== | ||
[http://doc.rust-lang.org/book/README.html 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. | [http://doc.rust-lang.org/book/README.html 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'''== | =='''Tracking issue'''== | ||
Line 17: | Line 14: | ||
=='''Project Description'''== | =='''Project Description'''== | ||
*'''Initial steps for Stub method Implementation''': | *'''Initial steps for Stub method Implementation''': | ||
** | **Create the [https://dom.spec.whatwg.org/#mutationobserver MutationObserver] and [https://dom.spec.whatwg.org/#mutationrecord MutationRecord] interfaces with stub method implementations following the guidelines given here: [http://doc.servo.org/script/dom/index.html#adding-a-new-dom-interface 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 <code>[Pref="dom.mutation_observer.enabled"]</code> attribute to each one and add a corresponding preference to <code>resources/prefs.json</code>. | ||
*Add a vector of <code>MutationObserver</code> objects as a member of [https://github.com/servo/servo/blob/3c8daca772aacf59bffdff32b017f8029437a85e/components/script/script_thread.rs#L397 ScriptThread]. | |||
*Implement the <code>MutationObserver</code> constructor, by following the steps given in the [https://dom.spec.whatwg.org/#dom-mutationobserver-mutationobserver DOM Specifications]. | |||
=='''Testing'''== | |||
*add a <code>__dir__.ini </code> file to <code>tests/wpt/metadata/dom/nodes/</code> which enables the new preference by including <code>"prefs: ["dom.mutation_observer.enabled:true"]"</code>. | |||
*Tests are present in web-platform-tests directory (i.e <code>.tests/wpt/web-platform-tests/dom/nodes</code>). | |||
*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 [https://github.com/servo/servo/blob/master/tests/wpt/README.md#updating-test-expectations guidelines] in <code>tests/wpt/metadata/dom/nodes/</code> directory. | |||
=='''Design Patterns'''== | =='''Design Patterns'''== | ||
Line 37: | Line 69: | ||
=='''Conclusion'''== | =='''Conclusion'''== | ||
After making our changes,... | 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 [https://dom.spec.whatwg.org/#queue-a-mutation-observer-compound-microtask queue a mutation observer compound microtask] algorithm by adding a new variant to the [https://dxr.mozilla.org/servo/rev/216a89f7766dd366c4afbeae42cf6e1fb4f67349/components/script/microtask.rs#29 Microtask] enum for mutation observers | |||
**implement the [https://dom.spec.whatwg.org/#notify-mutation-observers 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 [https://dom.spec.whatwg.org/#dom-mutationobserver-observe 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 [https://dom.spec.whatwg.org/#queue-a-mutation-record queue a mutation record] algorithm | |||
**make [https://dom.spec.whatwg.org/#concept-element-attributes-change changing]/[https://dom.spec.whatwg.org/#concept-element-attributes-append appending]/[https://dom.spec.whatwg.org/#concept-element-attributes-remove removing]/[https://dom.spec.whatwg.org/#concept-element-attributes-replace replacing] an attribute queue a mutation record via [https://dxr.mozilla.org/servo/rev/216a89f7766dd366c4afbeae42cf6e1fb4f67349/components/script/dom/attr.rs#171 Attr::set_value], [https://dxr.mozilla.org/servo/rev/216a89f7766dd366c4afbeae42cf6e1fb4f67349/components/script/dom/element.rs#955 Element::push_attribute], and [https://dxr.mozilla.org/servo/rev/216a89f7766dd366c4afbeae42cf6e1fb4f67349/components/script/dom/element.rs#1077 Element::remove_first_matching_attribute] | |||
=='''References'''== | =='''References'''== |
Revision as of 19:45, 23 March 2017
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 toresources/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 totests/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)