Update to CSS Inspector

August 9, 2010 · by David Storey

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.

Enabling/disabling 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.

Colour picker

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.

Future releases

While these are the two key features of this release, that is not the only things coming. Attentive readers may have seen the Core fix CORE-22402 (EcmaScript debugger improvements) in a recent Opera 10.70 snapshot. What is this mysterious bug? This was our task bug for Scope improvements for the JavaScript debugger. There were a number of bug fixes and a couple of key features. The first is the highly anticipated Firebug Console API. Work is well underway on the Opera Dragonfly side of this task as well, along with the Firebug Command Line API. Both should be complete when a final public version of the browser with the relevant Core version is released. The next major feature from this Scope task to add support for breaking on an event (e.g. break when a click event fires). Other features include things like including inherited properties in the variable inspection view.

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

Readers' comments 33

Left under the original article, as archived.

FataLThursday, August 12, 2010 5:03:51 PM
Nice update! But we need more!

Some suggestions and probable bugs:
- element.style is not updates;
- don't forget to add labels to interface elements (i.e. R, G, B in color picker).
Martin KadlecThursday, August 12, 2010 5:17:27 PM
Have you seen Chrome console handling AppCache manifest? ... That is really awesome (when error appears Chrome Console shows description what really happened, when manifest is uploading chrome console shows progress, etc..). We have to have something like that in dragonfly!
JimThursday, August 12, 2010 6:37:33 PM
The css inspector fails to show certain styles like border-radius, it will show in the computed style without a value when its used but nothing more.

It's also difficult to obtain the hover and active css properties.
Anton DiazThursday, August 12, 2010 6:44:55 PM
Thanks for update. Really useful updates
David StoreyThursday, August 12, 2010 7:45:05 PM
Jim: border-radius works for me. Do you have an example where it breaks? Bear in mind it splits the rules into the non-short hand versions. :hover seems to work too.

FataL: RGB and HSV have labels here. Are you using a specific localisation or the English version?
FataLThursday, August 12, 2010 8:33:53 PM
Originally posted by dstorey:

RGB and HSV have labels here. Are you using a specific localisation or the English version?
I mean LABEL (HTML tag)
When I click on R, G, B, H, S, V browser should focus and put text cursor into respective text field.
FataLThursday, August 12, 2010 8:39:11 PM
Another suggestion for new color picker: ability to pick color from a page, just like in color picker from utilites.

And suggestion for color picker from utilites: remember the size of picking area. I almost always use 1 x 1, 3 x 3 only good for picking colors from photos (not usual activity of web developer or designer). Probably think to change default from 3 x 3 to 1 x 1.

Should I fill all of these as Dragonfly bug reports in BTS?
David HåsätherThursday, August 12, 2010 8:57:34 PM
Originally posted by FataL:

Should I fill all of these as Dragonfly bug reports in BTS?

That would be very useful. Thanks!

BTW, you mentioned that element.style couldn't be added before. That one is fixed, but I guess it didn't make it in to this release.
Charles SchlossThursday, August 12, 2010 10:02:44 PM
d4rkn1ghtFriday, August 13, 2010 7:04:58 AM
Marek PawłowskiFriday, August 13, 2010 7:18:11 AM
I've used
opera:config#DeveloperTools|DeveloperToolsURL
set to:
https://dragonfly.opera.com/app/cutting-edge
and CSS rules disabling didn't work. It turns out "cutting-edge" is not so "cutting"
David HåsätherFriday, August 13, 2010 9:52:57 AM
lockom, that should work. Make sure you're not trying to disable default user-agent declarations, or from a user stylesheet.
beholder-againSaturday, August 14, 2010 1:22:18 PM
please separate again these two DOM inspection settings:
1. the DOM elements mouse hover highlighting
2. the DOM selected element highlighted on mouse click.
Because in the latest dragonfly these two settings are merged and elements cannot be highlighted by clicking (they are only selected in the DOM tree, not highlighted in the live page view), if I have mouse hover highlighting disabled.
JimSunday, August 15, 2010 12:12:23 AM
Originally posted by David Storey:

Jim: border-radius works for me. Do you have an example where it breaks? Bear in mind it splits the rules into the non-short hand versions. :hover seems to work too.

When I run dragonfly right now it just crashes, I'm using the latest version 10.70.3483.

But with the 10.60(USB) version this is what the border-radius computed style comes up as on http://www.opera.com/portal/startup/ for the area surrounding the intro video.

http://files.myopera.com/toyotabedzrock/files/dragonfly.png -

Originally posted by lockoom:

I've used
opera:config#DeveloperTools|DeveloperToolsURL
set to:
https://dragonfly.opera.com/app/cutting-edge

I generally use https://dragonfly.opera.com/app/stp-1/cutting-edge/
David HåsätherSunday, August 15, 2010 1:50:13 PM
Originally posted by toyotabedzrock:

The css inspector fails to show certain styles like border-radius, it will show in the computed style without a value when its used but nothing more.

Yep, this is a known problem.
ПавелMonday, August 16, 2010 6:27:11 AM
Hello Are there any immediate plans to expand the functional tab "net"? I would like to have a complete tool for working with AJAX requests.
David StoreyMonday, August 16, 2010 12:26:36 PM
Jim: I reproduced the border-radius issue here. Seems it works in the regular rules (where I was checking) but not in computed styles. David said above that it is a known issue, so it should be fixed in one of our bug fixing packages.
David StoreyMonday, August 16, 2010 12:27:34 PM
Павел: We are improving the Network Inspector as we speak. It will require a rendering engine upgrade, so it will only come in a future version of Opera.
kill100Monday, August 16, 2010 12:37:16 PM
But will the plans for the implementation of breakpoints queries? and the ability to edit them?
FataLMonday, August 16, 2010 5:00:14 PM
Originally posted by beholder-again:

please separate again these two DOM inspection settings:
1. the DOM elements mouse hover highlighting
2. the DOM selected element highlighted on mouse click.
Agree, that was very handy sometimes.
Imrove a usability of interface, but not remove usable things that already there.
Christian KrebsMonday, August 16, 2010 5:10:21 PM
please separate again these two DOM inspection settings:
1. the DOM elements mouse hover highlighting
2. the DOM selected element highlighted on mouse click.

They are now actually separated, but probably a little bit depending on how one looks at it. One feature is to select an element on clicking it, the other feature is to highlight an element (on either selecting or hovering). My personal experience was that the old behavior was a bit annoying when working with colors: one would still like to be able to select elements, but not highlight them, because the highlight interferes with the color one likes to try out.
JanGenMonday, August 16, 2010 7:33:50 PM
Great, nice improvements.

IMHO a reset button on the floating panel of the color swatch would be useful. Otherwise you can't go back to the original color without refreshing the page.

And why isn't there support for transparency, RGBA or HSLA. Of course you can't pick transparency, but it would be nice if you can enter that manually.
And the color information could show if a color is made up (rendered) by two layers (a partial transparent top), or just 1.

background: rgba(201, 242, 23, 0.8039) none none none none;

UPDATE: Now I see that there is alpha support, but only when it's already set. so you can't add alpha manually (yet)?
JanGenMonday, August 16, 2010 7:54:22 PM
Originally posted by dstorey:

:hover seems to work too

But how do I pick color from a :hover dropdown menu. Hover doesn't work when the utilities colorpicker is selected.
JimSunday, August 22, 2010 4:33:19 PM
Originally posted by dstorey:

Павел: We are improving the Network Inspector as we speak. It will require a rendering engine upgrade, so it will only come in a future version of Opera.

Thats good to here, I all but gave up on using it.

It also seems to have issues tracking the size of flash downloads, it used to track them better.

Before I forget the dragonfly.css file needs to be updated to use the text-overflow as opposed to -o-text-overflow.

It uses o-text-overflow on lines 1380,1641,2878,3436,3622.
AnuaR ShWednesday, August 25, 2010 11:53:58 AM
What should i do to prevent re-downloading Dragonfly after clearing the cache?
KiraMonday, August 30, 2010 7:58:03 AM
Object view in console not usable.
KiraTuesday, August 31, 2010 11:54:43 AM
No __proto__ property(in title) in object view^
http://files.myopera.com/SowingSadness/files/df__proto__.png -
jpalecekFriday, September 3, 2010 12:52:38 PM
I got a strange problem in Dragonfly in the latest Opera. I played with it and tried to edit a style on the style tab (it was a style associated with a class). I edited multiple properties in succession, eg. font-family, font-size, text-align, line-height. However, I noticed that the text in Opera was not reflown after each edit and that after some edits, the values of other properties changed to a value they had previously. Eg. I edited font-family, and font-size changed from 13pt to 0.8ex (which it had before I edited it some time before that).
Роман КузнецовTuesday, September 14, 2010 8:11:55 PM
color picker is incomfortable because while moing the mouse on the page I see some color, but i don`t see the exact pixel i am brpwsing at the time
KiraWednesday, September 15, 2010 9:08:51 AM
Error styles in DOM - styles tab.

steps to reproduce:
1. Click Inspect element
2. Remember styles
3. go to Scripts tab
4. Click to Enabled Script debug button
5. Go back to DOM - Styles tab
6. Select element from 1st step.
7. Remember styles
8. Compare styles from 2 and 7 steps

Opera: 10.70 b9046
KiraWednesday, September 15, 2010 9:12:08 AM
Mod edit: English, please.
Ingvar StepanyanSunday, September 26, 2010 11:21:31 PM
Nice update.
But, guys, please finish Net panel first. I can't see sended POST data or responsed data from server, there are headers only.
lifeh2oFriday, October 22, 2010 8:53:25 AM
There is no Auto complete in command line