Minor updates to Opera Dragonfly Experimental

,

We’ve pushed out a minor update to the experimental version of Opera Dragonfly. The main changes are as follows:

  • Updated syntax highlighting to distinguish between HTML/XML, CSS and JavaScript
  • Ability to add new rules in the Style Inspector (initial implementation)
  • Badge displaying the error count in the Error Log button (Opera Dragonfly must be open before loading the page to see this). A similar badge is show in the JavaScript Debugger button to show when execution is paused.
  • Updated scroll behaviour in the Scripts source view
  • Visual differentiation to show that the browser default styles in the Style Inspector can not be edited
  • Edit: Inline and Evaled scripts now show a code snippet in the script drop down

We’d love to hear your feedback. There may be various merge conflicts, such as the comments and doctype in the DOM Inspector not receiving their correct greyed out style.

Multi-file search just landedWatches, Network overrides and more

Comments

Daniel HendrycksDanielHendrycks Thursday, February 10, 2011 4:57:31 PM

up All seems fine here.

Nimit Solankineo1010 Thursday, February 10, 2011 5:12:34 PM

up

Fightheaderfighthead Thursday, February 10, 2011 6:23:50 PM

can I change the code in anyway in opera dragonfly and then execute it so I can see the modified page?

d4rkn1ght Thursday, February 10, 2011 6:26:16 PM

up

FataL Thursday, February 10, 2011 7:22:34 PM

Why you try to duplicate Error Console functionality in DF? Any reason for that?

MyOpera team, please fix this!fearphage Thursday, February 10, 2011 7:43:54 PM

Thanks guys!

Small requests:
  • icon for the debug tab
  • icon for "update DOM when node is removed" button


Any thoughts on an option to attach firebug to the left/right of the screen instead of the bottom? like so:

http://static.command-tab.com/2008/widerbug_preview.jpg - wider bug

ouzowtfouzoWTF Thursday, February 10, 2011 9:05:30 PM

Originally posted by fearphage:

Any thoughts on an option to attach firebug dragonfly to the left/right of the screen instead of the bottom? like so:


fyp? wink

FataL Thursday, February 10, 2011 9:58:01 PM

Originally posted by fearphage:

Any thoughts on an option to attach firebug to the left/right of the screen instead of the bottom?

I want Dragonfly to be inside panel, as simple as that smile
Panel mode would be extremely helpful on nowadays popular wide screens.

MaximSailorMax Thursday, February 10, 2011 10:44:28 PM

Originally posted by FataL:

Why you try to duplicate Error Console functionality in DF? Any reason for that?


I think because of the console.log({object}) + 1 place/window for all development tools and consoles.

David Håsätherhzr Thursday, February 10, 2011 11:45:59 PM

Originally posted by fighthead:

can I change the code in anyway in opera dragonfly and then execute it so I can see the modified page?

If you're talking about JavaScript, then no, this is currently not possible. Markup and CSS can be edited by double clicking an element or declaration.

Originally posted by fearphage:

icon for "update DOM when node is removed" button

There is one, see David's screenshot. Try clearing the cache if it's not working.

David Håsätherhzr Thursday, February 10, 2011 11:50:38 PM

One small thing that wasn't mentioned in the changelog is that you can now see a snippet of code for inline and evaled scripts in the scripts dropdown. Should make it much easier to find the script you're looking for. smile

Joel Spadinspadija Friday, February 11, 2011 5:02:00 AM

Here, clicking on the text in the scripts dropdown does nothing. I have to click in the space to the side to choose which script I'm looking at.

tomasb Friday, February 11, 2011 8:43:54 AM

Originally posted by spadija:

Here, clicking on the text in the scripts dropdown does nothing. I have to click in the space to the side to choose which script I'm looking at.



Confirmed
+
In resource view, when I want to inspect logo image
for this page, I cannot scroll to bottom...

David Håsätherhzr Friday, February 11, 2011 10:22:00 AM

Originally posted by spadija:

Here, clicking on the text in the scripts dropdown does nothing. I have to click in the space to the side to choose which script I'm looking at.

Yes, this is known, broke when the code snippet was implemented. Will be fixed for the next release.

João EirasxErath Friday, February 11, 2011 11:41:33 AM

David, feature request: put line numbers next to selectors, like in webkit inspector. So handy.

David Håsätherhzr Friday, February 11, 2011 12:12:19 PM

We currently don't get line numbers for CSS files from Scope, this has just been fixed though I think.

lucideer Friday, February 11, 2011 4:01:08 PM

Originally posted by hzr:

We currently don't get line numbers for CSS files from Scope, this has just been fixed though I think.


There seems to be a trend of Scope providing the absolute bare minimum required for Dragonfly's features - i.e. every time Dragonfly wants to add something, it first has to go back to Core so Scope can provide it, rather than it already being provided but just not yet in use in Dragonfly's interface.

Given Dragonfly and the Scope protocol/API are open, is there any scope (pun intended) for the API providing more info/functionality than Dragonfly might be using.

Example: I suggested a while ago that Scope could provide meta-data from UserJS (given Opera is already parsing GM-style meta-data blocks). I wasn't proposing this would be shown in Dragonfly, merely that the API backend could optionally provide it in case it might ever be useful for something in future. The reaction to this suggestion seemed to me to be: "Why? Dragonfly won't use it, so what's the point?".

Typically, I would think the idea of an having open API in the first place is that you're providing things for use by others - in use cases that you might not have considered.

David Storeydstorey Friday, February 11, 2011 4:46:13 PM

The main issue is we had to build Scope from the ground up in parallel with the development of Opera Dragonfly. In contrast with say Firebug which already had the APIs that Venkman used. Scope developers are always adding new features, but there is a lot of ground they have to cover (which is made more complex by the requirements to do remote debugging). We have a roadmap for features they have to implement, just as we have a roadmap for the Opera Dragonfly client side.

Opera Dragonfly is also not the only product that uses Scope. Both OperaWatir/OperaDriver, and internal test framework (amongst others) use Scope. Sometimes features for those products also have to be developed. This also benefits Opera Dragonfly as the protocol gets further testing and features get added that we may need further down the line. Opera Dragonfly gets a high priority on new features at the moment though. You can see from the Opera Dragonfly roadmap the mappings we have to Scope features. This only covers up until Opera Dragonfly 1.0 though. There are further features in the roadmap queue for post 1.0.

artmil Friday, February 11, 2011 7:31:30 PM

Ability to add new rules in the Style Inspector (initial implementation)


cheers I can finally get rid of the scripts that have the same functionality.

Originally posted by FataL:

I want Dragonfly to be inside panel, as simple as that smile
Panel mode would be extremely helpful on nowadays popular wide screens.



http://img145.imageshack.us/img145/5809/dragonflya.th.jpg -
smile
Yea i would like that to(alternative view).

There are some display bugs in the Resources and Network tab.

edvakf Saturday, February 12, 2011 11:09:03 PM

I would like the DOM tree search to expand the part of tree found.

d-u-a-l Sunday, February 13, 2011 1:38:24 PM

There's a bug in styles panel - when I disable (uncheck) all rules (css parameters) for some selector, this selector (with disabled rules) disappears from view! Though I can't enable those rules later without reloading page. It's very annoying, especially when there's only one rule for selector.
Except that, there's no icon for Export DOM view
Finally, I've noticed a problem with SVG images, I've posted it here: http://dev.opera.com/forums/topic/907151

d-u-a-l Sunday, February 13, 2011 4:18:50 PM

Few more:
- wrong cursor on Color Picker's close button (move instead of pointer) and a little bit inaccurate Color Picker itself;
- search on DOM doesn't find any results, that are hidden in DOM tree. To find all results I have to expand whole DOM tree
- In Script/research all expandable properties have icons "-", whether they expanded or not

David Storeydstorey Sunday, February 13, 2011 5:42:26 PM

* when disabling all declarations the rule disappears.
This is a known issue with Scope. We’re waiting on a fix.
* No icon for export DOM
The close button also doesn’t show up. This is still in progress and thus not implemented yet
* Wrong cursor for colour picker.
This is a known issue for all floating windows (same for global search). It will be fixed before final
* DOM needs to be expanded for search to find results
This is a speed optimisation. It is something we need to evaluate if we can fix.
* Expand issue is shown as - instead of +
This is a known issue (probably a merge conflict)

Thanks for the reports.

d-u-a-l Sunday, February 13, 2011 9:18:02 PM

What about SVG? I have to disable images, while using Dragonfly on project, I develop. I don't like much SVGs, but I guess I have no other options to make cross-browser 90 degrees flipped text...

David Storeydstorey Monday, February 14, 2011 2:39:01 AM

We’ll follow up on the SVG question in the forum thread.

lucideer Monday, February 14, 2011 4:03:08 PM

Originally posted by dstorey:

We’ll follow up on the SVG question in the forum thread.


Link?

Matheus Faustinobmwmato Thursday, April 14, 2011 7:10:00 PM

It's a great evolution.

Things that can improve in my mind:

Thumbnails in mouse over in image's address;
Tabs Web the focus must accompany requests, not back on top;

Per hour is only.

Write a comment

New comments have been disabled for this post.