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.

Opera Dragonfly open for business100,000 Milestone, and changes to the licence

Comments

dacuan Tuesday, March 2, 2010 7:31:30 AM

Great work up
I really like new highlighting party
But is there any chance to see AJAX response data in Dragonfly? Currently I can see only headers sad

FataL Tuesday, March 2, 2010 8:02:14 AM

New highlighting is very helpful! Probably the only feature that makes me open Dragonfly instead Firebug currently.

But too bad that Opera decided to undermine CSS outline standard and made outline visible over all page elements (even with higher z-index). Much better solution would be using -o-outline for that and keep outline behaviour in line with standard and all other browsers.

Daniel HendrycksDanielHendrycks Tuesday, March 2, 2010 12:14:50 PM

Originally posted by FataL:

New highlighting is very helpful!


Ditto.

Charles SchlossChas4 Tuesday, March 2, 2010 2:53:29 PM

up

setsutekh Tuesday, March 2, 2010 6:37:48 PM

Leoleo42 Wednesday, March 3, 2010 2:38:48 PM

I do have one question: is there a way to make DragonFly automatically inspect the selected (active) tab ?

I heard this was supposed to be the case, but it seems it's not working for me... anytime I start inspecting (and pointing elements with the mouse), if I decide to switch to another browser tab, dragonfly will stick to the previous tab unless I select it by hand in dragonfly.

I'm using Opera 10.50 final. Maybe there is something to update to have this feature ?

bmd Wednesday, March 3, 2010 6:22:21 PM

Hi, I upgraded 10.10 to 10.50 and Dragonfly gives me a JS error each time it starts:

"The protocol version of Opera does not match the one which Opera Dragonfly is using.

Try to load a compatible version?"

No matter if I press OK or Cancel, I still get this error every time. Does anybody have an idea on how I can fix this?

Thanks for the really nice tool.

FransFrenzie Wednesday, March 3, 2010 8:21:49 PM

Originally posted by Leo:

I do have one question: is there a way to make DragonFly automatically inspect the selected (active) tab ?

I heard this was supposed to be the case, but it seems it's not working for me... anytime I start inspecting (and pointing elements with the mouse), if I decide to switch to another browser tab, dragonfly will stick to the previous tab unless I select it by hand in dragonfly.

I'm using Opera 10.50 final. Maybe there is something to update to have this feature ?


10.50 bug. Used to be fine in 10.10. I believe I reported it.

Rafald.i.z. Thursday, March 4, 2010 12:10:55 AM

bmd: Probably you should set opera:config#DeveloperTools|DeveloperToolsURL to default value and save.

Leo: If I understand correctly, you want debugging context to change automatically on switching tabs. That's not the way DF works and it would be very confusing IMO. You would easily loose debugging information because you just wanted to lookup some informations in other tab or something.

Frans: There is a bug yes but it's not happening on inspecting with right click so I guess Leo meant other thing.

FransFrenzie Thursday, March 4, 2010 10:32:23 AM

Originally posted by Rafal:

Frans: There is a bug yes but it's not happening on inspecting with right click so I guess Leo meant other thing.


Yeah, it happens with loading DragonFly from menu/keyboard shortcut and it doesn't occur with inspect element. On rereading the message I believe you're right and I would not consider this particular behavior a bug.

Leoleo42 Thursday, March 4, 2010 10:45:26 AM

Well, if we understand each other correctly, I consider this a missing feature, not a bug.

This is how all other Firebug-like tools work: firebug itself, and the one included in Safari/Chrome... And it's definitely an important feature. Having to change the context by hand doesn't sound logical.

FransFrenzie Thursday, March 4, 2010 11:56:35 AM

Originally posted by Leo:

This is how all other Firebug-like tools work


For me Firebug attaches itself to one particular tab and doesn't show up in other tabs unless you activate it in another tab. If you detach it then you can activate it for the tab (and then it will automatically change around between activated tabs). This behavior is fine with me. Better, it'd be great. However, in DragonFly it lost the debugging state (or at least it did a few months ago) when switching between tabs, and as such it would be undesired.

I regard the current behavior as a temporary fix for the losing of state, with Firebug's behavior as the way things should be.

So we probably are in agreement, just miscommunicating. p

Leoleo42 Thursday, March 4, 2010 1:01:40 PM

The thing is you do not choose the tab you inspect with Firebug, either it's opened, and then it's guaranted you're inspecting the current active tab, either it's not (the case you were talking about). But you can't end up with Firebug being opened, and showing the non-active tab.

Do you see what I mean ? So the wrong behaviour would be that opening a new tab, bringing dragonfly, then switching tab, will let dragonbird oepened (and inspecting the previous tab), instead of closing it smile

FransFrenzie Thursday, March 4, 2010 2:22:12 PM

Precisely, Firefox has it right and DragonFly hasn't. But like I said, I imagine this is a quick fix for the losing debugging status and such that would occur in the not too distant past.

Regardless, I definitely prefer DragonFly, although it copied a few Firebug features I like less recently (like writing out all properties instead of using shorthand).

FataL Monday, March 8, 2010 8:22:04 PM

writing out all properties instead of using shorthand

That's how works Dragonfly from the start, as I remember.
Personally, I would prefer shorthand notation where it's possible.

FransFrenzie Tuesday, March 9, 2010 10:38:14 AM

Originally posted by FataL:

writing out all properties instead of using shorthand

That's how works Dragonfly from the start, as I remember. Personally, I would prefer shorthand notation where it's possible.


I think it used to use shorthand when I used it in the original code? At any rate, I definitely prefer shorthand. The longer notation makes it a lot harder to see what's going on.

Matheusnom4d3br Wednesday, March 10, 2010 12:09:49 PM

The new javascript error debug is great. Very easy to debug.

Originally posted by dacuan:

But is there any chance to see AJAX response data in Dragonfly? Currently I can see only headers :frown:


+10000

that's exactly what i want to nevermore use firefox/firebug

zocario Wednesday, March 10, 2010 4:41:06 PM

Sorry, maybe it's a stupid question, but is there any way to modify the page with dragonfly permanently (source code, css) ? I can modify the css code and html directly in dragonfly, but modification aren't save, but it maybe cool if there is an option to do that, but i didn't find it if exists...

DavidSchalandra Wednesday, March 10, 2010 11:14:58 PM

@zocario
You would have to integrate an FTP/SFTP client in Dragonfly and I kinda doubt that this will be even possible.

@Leo
I'm not sure if I understood you right, but do you really want that Dragonfly closes when you switch the tab and restarts when going back to the first tab? I'm working with two displays - one with Opera in full screeen, one with Dragonfly in full screen. So the behaviour would be an opening and closing debugging window all the time? I don't think I would like that.

Leoleo42 Monday, March 15, 2010 3:49:29 PM

@David: let me explain...

1. Here is what happens in Firebug (and any firebug like tool, like in Safari/Chrome,...).

Imagine you have two tabs opened. You're displaying the first one. You decide to bring firebug, and do your stuff... Then, you switch to the second tab. Firebug won't be opened. If you decide to bring it, it will inspect the current tab. And so on...

2. Here is what happens in Dragonfly...

You have two tabs, and decide to bring Dragonfly. You do your stuff. Then decide to switch to the second tab. Dragonfly will remain opened (even though you don't wanna use it on this tab...), but will be stick to the previous tab, unless you change it by hand.

I thought the problem was that it didn't automatically inspect the current active tab, but as pointed out, the problem is rather that it stays opened when switching tab.

DavidSchalandra Tuesday, March 16, 2010 8:23:22 AM

@Leo
Often I strangely exprience the opposite: I start Dragonfly and when switching to a different tab the highlighting of Dragonfly seems to be active on the new tab too. So the behaviour that you want to have is most disturbing for me. lol

edit:
I just had a look at Dragonfly, Firebug and IEDevTools. I started the Debugger in 1 windows then switched it to fullscreen mode and opened another website. This is what happened:

Dragonfly: Within the same domain DF switches the debugged website back and forward automatically. Any website outside of the domain will not be accessed without switching manually (or using "Inspect element", which is my preferred way doing it).

Firebug: Firebug doesn't switch. You can click "Activate Firebug for selected Firefox tab", then it debugs the current tab, too. Switching the tab takes a bit of time (around 1-2 seconds here) but works perfectly.

IEDevTools: The IEDT can't switch at all. You open a new tab, activate "Select element by click" and nothing happens. If you switch back to the first tab you will be in selection mode. There seems no direct way to switch, so you have to close IEDT and restart it with the new tab open. knockout

EdBJedbj Thursday, March 25, 2010 3:47:36 AM

What is the Dragonfly URL?

When I try to launch Dragonfly, I get its home page instead of the app. My 10.51 config file shows Dragonfly URL as <https://dragonfly.opera.com/app/>.

EdBJedbj Thursday, March 25, 2010 4:55:31 AM

Originally posted by edbj:

What is the Dragonfly URL?



Solved. I had Opera identifying as FF, so it wouldn't load.

Maksmegaupload Thursday, April 15, 2010 3:41:29 PM

I use Opera for years and I need to admin that it's the best browser I ever used. And as Opera 10.50 is the first desktop browser which supports these feature - that's really. It's really very suitable when metrics are highlighted - my eyes catch it without any difficulties. I got Opera 10.50 on http://dbuf.org but it seems now the link there has gone. As for the highlighting multiple elements - that's amazing too - I can now work for hours not being tired.

LITWINLITWINCZUK Sunday, April 25, 2010 7:20:27 PM

http://www.opera.com/dragonfly/ (OperaDragonlfy main page)
On right: "Think open and free"
and link: "Opera Dragonfly repository" - is broken.

gigimon Saturday, May 1, 2010 8:24:42 PM

When we can see AJAX data in response/answer>

Daniel HendrycksDanielHendrycks Saturday, August 21, 2010 3:06:26 PM

Element Highlight is my favorite feature, makes things so much easier, seriously.

mrssmithmrssmith88 Friday, October 15, 2010 12:15:10 PM

i use opera and think thatit's the best browser. You should try seachizz.com

Write a comment

New comments have been disabled for this post.