CSC/ECE 517 Spring 2015/oss M1503 EDT

Extending Developer Tools for Servo

Servo<ref>https://github.com/servo/servo/</ref> is a prototype web browser engine written in the RUST language. Servo implements a very basic developer tools server that currently supports executing JavaScript (JS) remotely and investigating the Document Object Model (DOM) tree in the document inspector. We want to expand these capabilities by completing previous work that enables remote logging from web content, and add new capabilities to log HTTP requests and responses to allow for easier debugging of network-related problems in Servo.

Introduction

Servo is an experimental web browser layout engine being developed by Mozilla Research. It is currently in an early stage, with the rendering and browsing of pages functional. It is currently being developed on 64bit OS X, 64bit Linux and Android, and is being ported to ARM processors. The aim of this prototype engine is to create a highly parallel environment, with fine-grained tasks to handle different functions like rendering, parsing, layout, etc.

Servo is written in the Rust language, which is also being developed by Mozilla Research. The language is being refined through feedback from Servo development, and writing the Rust compiler itself. Rust is a systems programming language similar to C and C++ in syntax (but semantically very different). The emphasis is on speed, safety, concurrency and control of memory layout.

Running Servo

Installation

Debian-based Linuxes

sudo apt-get install curl freeglut3-dev \
    libfreetype6-dev libgl1-mesa-dri libglib2.0-dev xorg-dev \
    msttcorefonts gperf g++ cmake python-virtualenv \
    libssl-dev libbz2-dev libosmesa6-dev

Fedora

sudo yum install curl freeglut-devel libtool gcc-c++ libXi-devel \
    freetype-devel mesa-libGL-devel glib2-devel libX11-devel libXrandr-devel gperf \
    fontconfig-devel cabextract ttmkfdir python python-virtualenv expat-devel \
    rpm-build openssl-devel cmake bzip2-devel libXcursor-devel
pushd /tmp
wget http://corefonts.sourceforge.net/msttcorefonts-2.5-1.spec
rpmbuild -bb msttcorefonts-2.5-1.spec
sudo yum install $HOME/rpmbuild/RPMS/noarch/msttcorefonts-2.5-1.noarch.rpm
popd

Building

Servo is built with Cargo, the Rust package manager. We also use Mozilla's Mach tools to orchestrate the build and other tasks. Normal Build

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

Running

./mach run [url] --devtools <port number>

Remote Developer Tools<ref>https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging</ref>

You can use remote developer tools, such as the one in Firefox to debug Web sites and Web apps running on different browsers. The other browser could either be on the same device or a different device. Servo has a basic implementation of developer tools that supports executing JS remotely and investigating the DOM tree in the document inspector. As part of the project for extending the funcionalities to enable remote logging from web content, and add new capabilities to log HTTP requests and responses to allow for easier debugging of network-related problems in Servo, we performed some initial additions to the code to get the web console to print out log messages.

The following changes were made to the ConsoleMsg struct in components/devtools/libs.rs:

• rename logLevel to level and make it a String
• rename timestamp to timeStamp
• add an arguments vector of Strings
• remove the message field and add the value to the arguments vector
• add filename, lineNumber, and columnNumber fields

The following code snippets show the modified version:

components/devtools/lib.rs:

    struct ConsoleMsg {
    level: String,
    timeStamp: u64,
    arguments: Vec<String>,
    filename: String,
    lineNumber: u32,
    columnNumber: u32,
}

 fn handle_console_message(actors: Arc<Mutex<ActorRegistry>>,
                           id: PipelineId,
                           console_message: ConsoleMessage,
                           actor_pipelines: &HashMap<PipelineId, String>) {
    let console_actor_name = find_console_actor(actors.clone(), id, actor_pipelines);
    let actors = actors.lock().unwrap();
    let console_actor = actors.find::<ConsoleActor>(console_actor_name.as_slice());
    match console_message {
        ConsoleMessage::LogMessage(message, filename, lineNumber, columnNumber) => {
            let msg = ConsoleAPICall {
                from: console_actor.name.clone(),
                __type__: "consoleAPICall".to_string(),
                message: ConsoleMsg {
                    level: "log".to_string(),
                    timeStamp: precise_time_ns(),
                    arguments: vec!(message),
                    filename: filename,
                    lineNumber: lineNumber,
                    columnNumber: columnNumber,
                },
        };
        for stream in console_actor.streams.borrow_mut().iter_mut() {
            stream.write_json_packet(&msg);
        }
    }
}
}

We also update the ConsoleMessage enum in components/devtools_traits/lib.rs to add fields filename, lineNumber, columnNumber components/devtools_traits/lib.rs

pub enum ConsoleMessage {
    // Log: message, filename, line number, column number
    LogMessage(String, String, u32, u32),
    //WarnMessage(String),
}

components/script/dom/console.rs

impl<'a> ConsoleMethods for JSRef<'a, Console> {
    fn Log(self, message: DOMString) {
        println!("{}", message);
        //TODO: Sending fake values for filename, lineNumber and columnNumber in LogMessage; adjust later
        propagate_console_msg(&self, ConsoleMessage::LogMessage(message, String::from_str("test"), 1, 1));
    }
    .
    .
    .

Connecting from Firefox

Run Servo on a webpage with the --devtools 6000 argument, connect to it from a recent version of Firefox. Check here to see how to configure Firefox for this. You can now experiment with the document inspector and web console.

Conclusion

After these changes were made, the message now logs on the web console. A video demonstration is available here.

References

<references/>