David Storey by David Storey in Blog

Post tags: dragonfly opera-10.5 presto stp1

This post is licensed under a Creative Commons Attribution 3.0 Unported license.

Opera Dragonfly alpha for Presto 2.5

Opera 10.50 has been released as a final version, which brings with it a new rendering engine — Opera Presto 2.5 — and a new version of Opera Dragonfly, featuring some important new features and fixes. In this post I will take you through these Dragonfly updates.

The biggest change is an upgrade to the STP/1 version of Scope. This, combined with Carakan, Vega and other speed optimisations in Presto, make Opera Dragonfly noticeably faster, giving us a solid foundation to build more features on to in the future.

Next, Opera Dragonfly now includes the initial implementation of a storage inspector. The initial implementation supports inspecting cookies and Web Storage data (localStorage and sessionStorage — for more details on these, read Shwetank's Web Storage article). The storage inspector shows the currently stored data, along with the option of creating, deleting or editing a record. This feature will also eventually allow for the inspection of Web SQL Databases, which is also supported in Opera Presto 2.5.

The next major new feature is the colour picker. This is the first tool in the new utilities panel. The feature zooms the area of the page under the mouse pointer and reports the colour value in three different formats: HSL, RGB and Hex. The area and scale of the magnification can be customised, and the colour returned can be the exact pixel selected or an average of the surrounding pixels. Once the colour is selected, it can be stored (using localStorage) for later use. This can be handy for creating colour palettes of commonly used colours.

It is also worth pointing out the new element highlight again, as Opera 10.50 is the first desktop browser to support this feature. The metrics are highlighted on the page in the element highlight. Hovering the different parts of the box model in the Layout panel of the DOM inspector changes the highlight focus. Multiple elements can be highlighted by enabling the button labelled draw a border on to selected elements in the DOM panel’s toolbar. Once this is enabled each element that is clicked on retains a light highlight and border, similar to the hover highlight. This can be useful for testing how elements align.