Some usability requests

-- Ability to have dragonfly to be used as a sidebar, or at least make a bookmarkable url like opera:dragonfly so its placeable anywhere.

-- Make sure the dev tools track the active tab. As a default option. Switching to the tab you want to debug everytime is annoying, plus needing to reload the page to see scripts is annoying too fwiw.

-- Have an option to remove panels/sidebars from the window list, these are probably the most unlikely pages to be debugged, plus users might not know where these pages are coming from.

-- Add option to focus the window (like in dev console) when element is clicked.

What do you think? Post any other suggestions here

First of all thanks for working at a cool developer aid for Opera. I've been waiting a long time for this

Regarding usability I'd like to subscribe to what was said above, and also to add this (I guess some of these are being developed or on the list, but I'd like to be sure they will be included):
- ability to enable/disable CSS options (by clicking on them) and edit the values

- when a tag is hovered in the DOM window highlight it in the browser page (with clearly distinguished margins, border, padding and content area)

- same as above for the tag bread crumb area

I would like to see a 'full screen' / 'restore' mode toggle button for each frame - only where appropriate, for sure, Source especially - in order to be able to get a quick overview of a larger chunk of code...

What I really miss is the tool to create your own POST requests...
A simple form like

[: targetURL :] <- send POST to
[: name1 :] - [: value1 :] - remove - <- GET's ?name1=value1
- add new var -

Normal cookie editor (original opera's doesn't work through Site Preferences dialog, the global one is damn slow and messed up)

Originally posted by dstorey:

Reloading is needed for JavaScript, otherwise it is possible to loose state. Hopefully we'll find a way around that however.

Opera already knows where every single file is stored in the cache. Why don't you use those files on disk instead of requesting them from the server?

as for usability request, i'd greatly appreciate some support for xpath, like to get full path to certain node (for example like it's in firebug).

I'm using a large number of tabs and the drop-down menu flickers badly when I try to select a different page. For now I use the up/down keys, but for a future release this should be fixed.

Will there be a feature like Yslow in DF,i know yslow is firebug specific but its based on steve souders High Performance Web Sites authored book.So maybe on the line of those 14 some rules ,something can be added to DF to aid better website development,maybe till the final release of this tool,What do you say?

Originally posted by Pitris:

i'd greatly appreciate some support for xpath, like to get full path to certain node

I would like to see this in a custom right click menu to copy the nodes CSS selector or Xpath.

Originally posted by Schalandra:

I'm using a large number of tabs and the drop-down menu flickers badly when I try to select a different page. For now I use the up/down keys, but for a future release this should be fixed.

Confirmed. I will file this bug later today if you don't mind. I was actually waiting for someone to confirm it. What OS are you on? I've repro'd it on XP 32 and 64 bit.

Originally posted by VarunM:

,i know yslow is firebug specific

Although YSlow is a firebug extension, the information it provides is useful for everyone.

Okay... I then confirm the "flicker bug" on Vista32. It's not a bad bug, just a bit confusing when being confronted with for the first time.

I filed the flickering window list bug as bug #328881. This is the prompt email reply that i received:

actually the problem is that a lot your tabs are refreshing themselves
continuously. Your bug is valid and will be solved in some later release
when we can use more advanced filtering of windows.

Currently you can just reduce your tab number as a workaround.

So its not invalid but the problem is in a different place than i/we thought. So there you have it.

Originally posted by fearphage:

Originally posted by dstorey:

Reloading is needed for JavaScript, otherwise it is possible to loose state. Hopefully we'll find a way around that however.

Opera already knows where every single file is stored in the cache. Why don't you use those files on disk instead of requesting them from the server?

Just to clarify that fearphage, if you have loaded a page without Dragonfly open debugging information has not been created for those scripts. (It doesn't make sense to spend memory and CPU on creating debug information everywhere if no debugger is active). Hence you need to "re-load" the page. It doesn't really matter if you switch to Opera and use re-load from cache and perhaps that should be the default action of the "Re-load" button? (That would need some architectural work I guess - today the debugger just does a JS call for location.reload()).

I just keep Dragonfly open.. :-p

Originally posted by hallvors:

It doesn't make sense to spend memory and CPU on creating debug information everywhere if no debugger is active

I would like to option (opera:config) to spend this CPU and memory globabally instead of being inconvenienced by having to reload the page. I would make some performance trades for functionality and usability in a heartbeat. Actually what I was suggesting is that all data flow through DF when its enabled so that if I see a page, DF has all the info it needs without reloading. That would mean its always monitoring the dom, logging http and xhr requests, etc. That's what I want. If I open a page and perform 10 tasks and then open DF, i want to see the result of those 10 tasks. Netvibes, meebo, mibbit, and gmail are examples of where this would be quite useful. Reloading the page can actually lose information (even reloading from cache).

Originally posted by hallvors:

I just keep Dragonfly open

Sadly this prevents some pages and scripts from functioning correctly. TinyMCE and Gmail both have issues with DF being open.

Originally posted by hallvors:

today the debugger just does a JS call for location.reload()).

location.reload() and its parameter

From some possible references

http://www.javascriptkit.com/jsref/location.shtml
http://www.devguru.com/Technologies/ecmascript/quickref/location.html

the location.reload method accepts one parameter which if it evaluates to false will make the browser quickly fetch the document from cache, instead of the remote server.
Yet, this doesn't work in Opera.
Design decision, bug or just waiting for Anne to say something about html5?

Many great suggestions already made.

You need to make it easy to get into the debug view - I like the way firebug can drop straight into the DOM from rightclick->inspect element.

I also like the way Firebug displays inside the window and seperate for each tab: Please replicate this! Please don't implement as a sidebar - why? - the complexity of the information requires sufficient width to display. I want to see long text strings on one line - it's so much more readable. I don't mind scrolling down, I hate scrolling across.

I use Firefox only because of Firebug. Can't wait for the next versions of Dragonfly so I can finally switch back!

Originally posted by henryrhenryr:

rightclick->inspect element

+1

Originally posted by henryrhenryr:

I also like the way Firebug displays inside the window and seperate for each tab

+1; This is from a previous post made in the df wishlist thread

Originally posted by fearphage:

important: the entire console should be attached to each page. it should not be shared accross tabs

Originally posted by henryrhenryr:

I use Firefox only because of Firebug

So true...

Some more things to make the current dev tools more useful and usable:

Originally posted by fearphage:

• fix bug #278053 - line numbers reported for inline scripts are relative to the script element (not the document)
• add line number reporting to css
• ability to open file to offending line number for javascript and css
• line numbers in source view
• shorcut to jump to specific line numbers in the source viewer (conventionally ctrl-g)

Is the dragonfly team responsible for all dev tools (error console, source viewer) or just df?

Post edited Thursday, 15. May 2008, 13:12:27

Originally posted by dstorey:

Error Console and View Source are both part of Desktop

Any chance you could light a fire under the desktop team to fix any/all of this? Just curious. These are as much dev tools as dragonfly is.

Originally posted by dstorey:

I would assume the console in Opera Dragonfly should be able to do everything that the browser Error Console suppose to be able to do

If this is the case, which i suspect it is, then the error console is holding df back with its long line of bugs, regressions and general shortcomings.

Originally posted by fearphage:

Originally posted by hallvors:

I just keep Dragonfly open

Sadly this prevents some pages and scripts from functioning correctly. TinyMCE and Gmail both have issues with DF being open.

Those issues are of course bugs that should be fixed, and they're obvious showstoppers.. #-(

Regarding the old error console - the actual error output inside it comes from the various core components like the ECMAScript engine. Hence, many of the current bugs must be fixed in core and neither the Dragonfly team nor the Desktop team can do that. It's of course an essential part of being developer friendly to have error messages that make sense / have complete stack traces etc.

Originally posted by xErath:

the location.reload method accepts one parameter which if it evaluates to false will make the browser quickly fetch the document from cache, instead of the remote server.

I don't think calling location.reload() with false is meant to fetch from cache. Note that the default is false according to the javascriptkit.com reference:

Reloads the current document. If "forceGet" set to true, document is completely reloaded even if server reports it hasn't been modified since last reload. Default is false.

- passing "true" will just re-load everything (js, CSS, images) while false will re-load only HTML. That's my interpretation of the documentation, I'm not sure if we support the argument at all.

I might be missing something, but:

When I hit a breakpoint in a script, there's currently no way that I can inspect an arbitrary value in the inspection tab. Firebug just lets you input anything you want and evaluate it. Switching between source and command line just to do that is a major PITA. That is, DF currently lacks a "watch" tab.

Additionally, when an object is inspected, it would be very nice to just go to the location of this object in the DOM tab (if it's a DOM object of course)

I miss a tab that lists all breakpoints.

If the object being inspected is a DOM object, it would be nice if t were displayed as such (ala Firebug), i.e. 'div#some_id' instead of [object Object]


These just some thoughts, but I like the direction DF is going. This might just make me foregt about FF forever

Originally posted by dmitriid:

When I hit a breakpoint in a script, there's currently no way that I can inspect an arbitrary value in the inspection tab. Firebug just lets you input anything you want and evaluate it. Switching between source and command line just to do that is a major PITA. That is, DF currently lacks a "watch" tab.

+1, I wondered how I could evaluate things without flipping to and fro to the command line.

Button to Dragonfly on status bar.

Rightclick menu in Dragonfly console similar to the one used in Firebug.

"Inspect element" in right click menu.


Most of the stuff mentioned above (emphasis on page reloading issue and XHR/POST/GET whateva monitoring)

I'd love to see a feature alowing one to group RSS/Feeds just like Bookmarks - in folders. Navigating through numerous of Feeds Channels on the list is a pain sometime :/ Puting few of those channels in one folder (like making categories) would be realy realy nice

Thank you for your job, time and attitude!
Greetz,
Dawid.

I wish there was a way to have dragonfly always-on so there is no need to reload tabs when I want to use it.

I'd just like to adjust the colors: Pastels-on-white are nearly unreadable. Without the eyestrain it'd be a rather nice tool.