Some colleagues at INdT and I had joined the WebKit Project, focusing mainly on the QtWebKit port. We started to work in their official backlog, the most important things right now are documentation, snippets and examples.

I chose start with examples, because it’s a good way to get involved, I selected work with Qt DOM API, my friend tonikitoo show me a post in Ariya’s blog that shows this fancybrowser using QWebElement pretty well. The code is available in Graphics Dojo repository, under the directory fancybrowser. Then I tried to do the exercise proposed by ariya and I implemented a new functionality to undo the highlighting of links and undo all the remove actions there, so the point is this task is change these functions to turn on/off all actions.

The solution was pretty simple. First of all you need to inject a new style into the page loaded, like this:

void addStyle() {

QString style = “<style type=\”text/css\”> .highlight{background-color:yellow} .hidden{display:none;} </style>”;

QWebElement element = view->page()->mainFrame()->documentElement().findFirst(“body”);

element.appendInside(style);

}

So now this style is inserted into body of the page and we can use it to turn on/off highlight and hide actions.

We can do this as a toggle, check how we can do the highlight action:

void highlightAllLinks(bool toggle) {

foreach (QWebElement element, view->page()->mainFrame()->findAllElements(“a”)) {

if (toggle) {

element.addClass(“highlight”);

} else {

element.removeClass(“highlight”);

}

}

}

The final result is this:

After check the highlight action:

The same solution could be used to other actions too.

Try it! =)