The team has been hard at work to deliver a nice christmas present for developers! We have an experimental release ready for you to try out (change the URL in opera:config#DeveloperTools to point to https://dragonfly.opera.com/app/stp-1/experimental/) and make it run on Opera Next. Let’s see what you get:
Better Network Data
Network performance is the first website optimization you should do, and the Opera Dragonfly team has been hard at work to make this even better! You now get a better overview of all the resources as they get loaded, including graphs of how each resource loads and data on the time spent.
Do note that this UI is far from final, and we await your feedback to iterate over it.
There are more fixes for CSS shorthands, the default values are no longer shown for font and background properties. You can now have an easier time debugging CSS!
I have included here a video demonstration of how both these features would work for you:
This build includes all the recent changes except the profiler in one neat new package. Hope you have fun exploring and debugging your webpages with Dragonfly! Do let us know if you come across any issues!
Have you ever tried to debug something like border: 1px solid rgb(255, 0, 0); in Opera Dragonfly's CSS inspector, only to be greeted by a bunch of expanded properties?
No more! Opera Dragonfly now has support for CSS shorthands, so the previous declaration will now be presented like this:
Values that have been partially overridden will also be shown in this compact shorthand view:
The implementation is not fully done yet. For example, the color swatch isn't added to a color if it's part of a shorthand value. Also, default values for things like the background property will always be visible. Both of these issues will be fixed.
And if you're a fan of expanded properties, you can still right-click in the CSS inspector and enable "Expand shorthands".
We would appreciate a lot of testing on this experimental release, as a lot of code has been refactored. So edit away, disable declarations and so on, and report back if something breaks.
The previous release of Opera Dragonfly to coincide with Opera 10.60 added one of the most requested features: offline support via App Cache. Now we are launching the second release for the 10.6x branch with another highly requested feature. This time we have added support for disabling and enabling CSS declarations.
Much of the CSS Styles panel code has been rewritten while adding this feature, and a number of bugs have been squashed in the process. A CSS declaration can be disabled by hovering over the rule and unchecking the check box. Similarly the declaration can be enabled again by checking the box. This can be very useful while debugging for quickly testing how an individual declaration effects rendering, without deleting and thus loosing the declaration.
The other new key feature is the introduction of a colour picker. This complements the existing colour feature for picking colours from the web page and storing them in the colour palette. The new colour picker adds a swatch after colour related CSS declarations. This swatch gives a quick preview of the defined colour. This is especially handy if like me, you never remember the mapping between RGB or Hex values and the actual colour. The real fun starts when you click the swatch. The colour picker is opened in a floatable panel, and allows you to define a colour by typing in the value, adjusting the RGB or HSV sliders, or selecting a colour from the colour preview. As with hand editing, the colours on the web page are updated in real time, so it is easy to make small adjustments to find the perfect colour without a lot of effort switching between your editor and reloading the browser.
For all you SVG fans, you’ll be happy to know the colour picker also works for CSS properties in SVG, and the colour picker itself is implemented using SVG, along with HTML5 forms. Opera Dragonfly itself uses liberal amounts of modern web technologies, such as App Cache, Web Storage, HTML5 Forms, SVG and CSS3 properties amongst others.
Work is currently going on in parallel on the Opera Dragonfly side between implementing these new features enabled by Scope and the Opera Dragonfly UX and visual redesign. On the Scope side, work is ongoing to improve the network inspector and add much requested features such a being able to view the bodies of HTTP requests. This will for example give us the ability to access the original CSS and HTML files. We will be able to provide much more detail than what we currently provide with the existing basic network inspector.
Known issues in this release
Opera Dragonfly is still in alpha so there are a couple of known issues related to this release:
When disabling all declarations in a rule, the rule itself will be deleted
The way Speed Dial pages are handled in Opera has changed in a recent release of Opera. If a Speed Dial page is opened after Opera Dragonfly is already opened, the DOM will not update when loading any web page in that tab. A work around is to close Opera Dragonfly and open it again for that tab
New features are added to the experimental branch as soon as they're ready. Once tested, they move to the cutting-edge branch as a release candidate. Unless any problems arise, they are then promoted to the stable branch.
To switch to these builds, enter the relevant URL in opera:config#DeveloperTools, save the configuration change and (re-)open Opera Dragonfly.