CSC/ECE 517 Spring 2016/Mozilla Implement HTML5 form validation

' Implement HTML5 form validation '

Servo is a prototype web browser engine being developed by Mozilla and written in the Rust language.

Introduction

The [1]HTML5 is a markup language used for displaying content on the World Wide Web

HTML5 defines set of specification which users needs to follow to make web pages HTML5 complient. defines a mechanism by which website authors can require browsers to validate the contents of forms before the user is allowed to submit them. Servo currently implements support for a subset of the form element types defined by the specification; this project is intended to implement the client-side validations steps and extend the supported subset to include additional form elements that support validation.

Servo

ServoServo 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.

Project Description

• The project requirement initially stated that we build and Compile servo. Following are the steps for this:

Servo is built with Cargo, the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

   git clone https://github.com/servo/servo
   cd servo
   ./mach build --dev
   ./mach run tests/html/about-mozilla.html

• The next requirement was to build the Rust-layers independently of Servo. For this, we
• Next, we had to over-ride cargo to use our local copy of Rust-layers, so we had to add a cargo override to it. For this, we created a .cargo folder in our home directory(same place that servo and Rust-layers reside), and added a config file to that folder. The content of that config file is a path to our local Rust-layers.

   paths = [path/to/rust_layers]

• Next, we had to add a new command line argument in Servo, which would allow selecting the graphics background (GL or ES2). For this, we made the following changes:

- We added a command line option which lets the user enter the option -E or --es2 if the user wants to set ES2 as the graphic back end option. GL is set by default, hence if the user doesn't give any argument, Gl is selected as the graphic back end option. Example is as below

   ./mach run [url] -E

• Next, we had to add a flag in Rust-layers. This change was made in the file Rust/src/rendergl.rs in the RenderContext::new function. For this, we did the following change:

- We defined an enum GraphicOption which defined two options GL and ES2 and then based on the boolean value from the servo opts.rs, we set a variable with the respective enum value GL or ES2.

• Finally, we had to use the new command line option to pass the selected graphics back-end option to the Rust-layers context which we created in the previous step. For this we made changes to the compositor.rs in Compositing folder which is how Servo interacts with the Rust layers. The command line option is passed through the initialize_compositing function.

Design Pattern

We attempted to follow good OO practices by implementing the Strategy design pattern using Enum.

Conclusion

After making our changes , the user can now dynamically pass in the option of GL or ES2 through the graphic command line option, and this option is passed on through the compositor to the rust layers during initialization. A video demonstration for the code changes is available here

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)
4. https://github.com/servo/servo/wiki/Refactor-GLES2-student-project
5. http://doc.crates.io/guide.html#overriding-dependencies
6. http://rustbyexample.com/
7. http://javarevisited.blogspot.com/2014/11/strategy-design-pattern-in-java-using-Enum-Example.html