Skip navigation.

Log in | Sign up

Opera Dragonfly

Bug control, accelerated

Improved element highlight lands in Opera Mobile 10 Beta

, ,

The first fruits of our post-Opera 10 labour on Opera Dragonfly and Scope has just landed with today’s release of the beta of Opera Mobile 10 for Nokia Smartphones. As with previous versions, Opera Mobile 10 includes remote dubugging functionality to connect to Opera Dragonfly in the desktop browser. For information on remote debugging take a look at the Dev Opera Remote debugging with Opera Dragonfly article. You will notice that Opera Dragonfly will prompt you to download a compatible version that will work with Opera 10 Mobile.

The big feature of note is that there is a brand-new highlight feature in the DOM inspector. Previously we used the spatnav style highlight when clicking on elements, which was not as precise as was needed and showed little detail. This has been replaced with an advanced new highlight, which shows all the details of the box model, such as the padding and margins, along with handy guidelines.

In the first screenshot above, I have hovered the content metrics in the layout panel. As you can see, just the content is highlighted, along with guidelines. In the second screenshot I have customised the highlight colours in the Spotlight section of the Settings tab, and turned on the grid guidelines for the content and padding. The highlight colour is fully customisable, and you can turn on or off each part that you are interested in.

It is also possible to pin the highlight so that you can highlight multiple elements at the same time, rather than only one at a time. This can be useful for making sure elements line up correctly.

The new highlight debuted in Opera Presto 2.3, and will come to desktop, along with other new features, when it receives a new Presto update. The new Opera Dragonfly visual refresh is still very much work in progress, so hasn't yet made it to the version of Opera Dragonfly currently used by Opera 10 Mobile beta.

Scope Protocol release: how the fat lady sings

Today we are happy to release the specification for the Scope protocol. This is the protocol used for communication between the Opera browser and Opera Dragonfly. It is also used here at Opera for automated testing.

Since the release of Opera Dragonfly, we have tried to keep the project open source. The source and its documentation is available under BSD licence, but it is difficult to expand it or create something different without the protocol specification. This release wants to rectify that.

The documentation is more or less as we have used it internally to communicate inside the team, which means that some documentation is missing simply because everyone on the team knew what it was about. If something is unclear, let us know in the comments.

One of the reasons we are releasing right now, is that other browser makers have started discussing how to do remote debugging. Since the very start we have focused specifically on this, so we want to share our experience and ideas with everyone else.

The specification is split into two parts. The current implementation, which we call Scope Transfer Protocol 0 (STP/0), is an XML based protocol. Our experience has been that this is too slow once you start transferring big data structures, like DOM trees. One of the advantages of the XML protocol was that it was easy to create a client for it in JavaScript using XMLHTTPRequests. It is also very easy to debug visually without the need for special tools to parse the data.

The next generation protocol, STP/1, is what we are currently working on. It is just a sign of things to come, but we will release it in a public build as soon as it is ready. There might be changes to the protocol before that time. The protocol continues to support XML, but we have added two more serializers: JSON and Protocol Buffers. The messages are the same in an abstract sense, but they can be rendered to different data structures. This means that we can keep our XML tools mostly unchanged, but switch over to Protocol Buffers for faster transmissions, or to JSON for the sweet spot between easy of use by JavaScript and low bandwidth usage.

Our next release will be a public build of Opera using STP/1, together with tools to help you get started with communication through STP/1.

Enjoy the read!

Opera Dragonfly alpha 4 snapshot

, ,

We’ve recently released a snapshot of Opera Dragonfly alpha 4, to coincide with Opera 10 beta. One of the biggest usability issues with Opera Dragonfly has been that it did not select the active tab or window. This meant that the user had to follow a number of steps before they could start debugging. This was among the top user requests and has now been fixed for Opera 10 and Opera Dragonfly alpha 4.

Along with detecting the active tab, the UI has been improved to make it more intuitive and compact. In the detached mode all the tabs, windows, panels and widgets that are open (the debugging contexts) are available from a drop down at the top of the Opera Dragonfly window. In attached mode, where space is more of a premium, the same functionality has been added as a dragonfly button to the left of the detach button. The settings have been moved to a tab on the main Opera Dragonfly tab bar. You will notice that the Error Console layout has improved quite a bit, and shows collapsed by default. This allows you to have a quick overview of all the errors, unless you have so many errors that they scroll out of the viewport, but you are not creating that many errors, right? While the UI has improved since Alpha 3, you'll notice that the look and feel doesn't yet match the beautiful new skin created by Jon Hicks for Opera 10. Once the final Opera 10 skin has been finished we hope to start work on making Opera Dragonfly consistent with the skin.

The big new functionality for Opera Dragonfly alpha 4 is the Network Inspector. This gives an overview of all the resources that were requested by Opera for the active debugging context. You can break down each request to show the request summary, raw request and the request & response headers. Each request will show you how long it took to retrieve that resource, along with the total time taken for the whole page.

Although the new features and layout changes will be the most notable changes, there has been a huge amount of bug fixes since the last snapshot as we work towards making Opera Dragonfly more stable and closer to Beta quality. You can see all the changes by going to the change log.

I hope you enjoy the new release of Opera Dragonfly and Opera 10, as we work toward the next release and improving the product further.

Opera Dragonfly alpha 3, update 2

, ,

[UPDATE] Added Bulgarian, Tamil, Telugu, Turkish and Ukrainian, which I accidently missed from the list.

We have just released a further update to the alpha 3 branch of Opera Dragonfly. This is mainly a bug fix release, with numerous stability enhancements. Check out the change logs for full details of the included fixes.

The main noteworthy fix for this release is the localisation of Opera Dragonfly into 37 different languages. A big thank you should go out to everyone that helped us with these translations. The included localisations include:

  • bg: Bulgarian
  • cs: Czech
  • da: Danish
  • de: German
  • el: Greek
  • en: English
  • es-ES: Spanish (Spain)
  • es-LA: Spanish (Latin America)
  • et: Estonian
  • fi: Finnish
  • fr: French
  • fr-CA: French Canadian
  • fy: Friesian
  • hi: Hindi
  • hr: Croatian
  • hu: Hungarian
  • id: Indonesian
  • it: Italian
  • ja: Japanese
  • ka: Georgian
  • ko: Korean
  • lt: Lithuanian
  • mk: Macedonian
  • nb: Norwegian bokmål
  • nl: Dutch
  • nn: Norwegian nynork
  • pl: Polish
  • pt: Portuguese
  • pt-BR: Portuguese (Brazilian)
  • ru: Russian
  • sv: Swedish
  • ta: Tamil
  • te: Telugu
  • tr: Turkish
  • uk: Ukrainian
  • zh-cn: Simplified Chinese
  • zh-tw: Traditional Chinese

You can change the UI language of Opera Dragonfly by clicking the settings icon (lower right hand corner), clicking the general expander (the text is now clickable as well as the arrow icon), and select the language from the drop down list.

This release is scheduled to be the last release on the Scope protocol 3 branch, which is for Opera Presto 2.1 based browsers, such as Opera 9.6. Full focus will now be on Scope protocol 4 based releases for Opera Presto 2.2, and the upcoming Opera Dragonfly alpha 4 release. You can track progress of this by using builds of Opera 10. Much requested features such as automatically detecting the active tab are now working in the Scope 4 branch of Opera Dragonfly.

Opera Dragonfly alpha 3, update 1

We have a little Friday surprise for you, in the form of an update to Opera Dragonfly. Right after publishing Alpha 3, we pushed an update to the cutting-edge path that we are now pushing to the default path.

The update only contains two changes of note, so we will not provide a full changelog this time:

We've added support for the commands clear() and dir( ) to the command line. The clear() command clears the command line output, and dir() allows you to inspect an object. For instance, dir( window ) inspects the window.object

The second change is the main reason for pushing this update, and it should vastly improve the Opera Dragonfly experience. By encoding all image resources as data:-URIs, loading of Opera Dragonfly should be much faster. This is especially noticeable for first-time users, and for users on slow networks.

If you are wondering how much faster, let us present a purely anecdotal indication: This release announcement is written on a bus trip to rural Norway. The bus company is kind enough to offer an affordable wifi connection. The connection is fairly slow, and has high latency. Yet, first loading of the new Opera Dragonfly in a clean Opera profile is faster on this bus, than loading the old version from within Opera's own network.

We hope you will enjoy this little Friday update of Opera Dragonfly, and the much-improved loading experience. Please let us know what you think of this minor update.