Firebug 'Bug' Example

This is an example of a firebug css editing bug.

  1. Open this page. You're already done that step
  2. Open up firebug.
  3. Choose 'Edit' and 'CSS'
  4. Choose the 'style.css' item from the drop-down list of CSS sources
  5. Notice the text changes from green to red. That is unexpected, and IMO wrong.

The source for this page looks like so

[...]
<head>
	<title>Firebug bug example</title>
	<style type="text/css">
		@import url(http://library.chadlindstrom.ca/css/basic.css);
		@import url(style.css);
	</style>
	<style type="text/css">
		body{
			color:green;}
	</style>
</head>
[...]

What is happening?

It would seem firebug is taking and appending additional CSS to the head of the document. Which is unexpected, destructive and IMO a bug.

Side Effect

After going through the process to reproduce this, I have noticed that firebug does not always honour your actions to 'edit' the css. Instead it appears it chooses to throw away the click event when attempting to 'edit' the css. Anyone else notice that?