Currently, the Web Console's CSS styling is done using an agent sheet. This causes it to be placed at the bottom of the CSS cascade and has led to an unfortunate proliferation of "!important". Per Dão's suggestion in bug 601667, I'd like to add a reference to the Web Console's style sheet to browser.xul. As part of this, we need to clean up the CSS from a performance perspective to avoid regressions.

Requesting blocking status for this bug, as it blocks a UI overhaul that I believe we need to make for Firefox 4.

Proposed patch part 1 makes the Console CSS conform to the efficient CSS guidelines [1]. [1]: https://developer.mozilla.org/en/Writing_Efficient_CSS

Comment on attachment 485938 [details] [diff] [review] [checked-in] Proposed patch, part 1: Efficiency improvements. The patch looks fine.

What is the bug for the UI overhaul you mention? Why is that being done so late in cycle, and why should we hold the release for it, and this bug?

We're addressing UI polish in bug 599498. It makes the Web Console look considerably more, well, polished. Functionally, we can ship the Web Console without these appearance changes, but I think it improves the product a great deal.

(In reply to comment #4) > What is the bug for the UI overhaul you mention? Bug 599498 is the metabug. Bug 601667 is the toolbar styling, which is blocked by this bug in particular. > Why is that being done so late in cycle Because the mockups from the UX team were not complete until 10/06. I apologize for being late on implementing the design. My patches were posted on 10/19. > and why should we hold the release for it It improves the look of the Web Console significantly. It also adds more functionality, such as the ability to filter JavaScript warnings and errors and to separate out network errors from logging. And it fixes a usability issue with the discoverability of the Clear Console function. > and this bug? Because the review comments for the patches in bug 601667 were concerned with the proliferation of !important in the CSS styles. This is the correct (IMHO) way to fix this issue.

Patch part 2 moves the CSS to browser.xul. The resulting change in position in the CSS cascade made one rule that was previously overridden suddenly apply and break the styling, so I removed it. Feedback requested.

Patch part 3 removes !important from the CSS.

These three patches should be sufficient to fix this issue.

Comment on attachment 486214 [details] [diff] [review] [checked-in] Proposed patch, part 2: Move the Web Console CSS to browser.xul. Patch looks fine. There seem to be no test regressions, and no obvious UI regressions (quick user testing). Let's hope this change won't have a negative impact on performance tests ... on the build servers.

Comment on attachment 486221 [details] [diff] [review] [checked-in] Proposed patch, part 3: Remove !important. Nice cleanup!

Requesting b7 approval, because this blocks a beta7 blocker.

(In reply to comment #12) > Requesting b7 approval, because this blocks a beta7 blocker. Actually, it isn't a b7 blocker anymore. Carry on.

Comment on attachment 485938 [details] [diff] [review] [checked-in] Proposed patch, part 1: Efficiency improvements. http://hg.mozilla.org/mozilla-central/rev/7780f04b558b

Comment on attachment 486214 [details] [diff] [review] [checked-in] Proposed patch, part 2: Move the Web Console CSS to browser.xul. http://hg.mozilla.org/mozilla-central/rev/84ab587e7615

Comment on attachment 486221 [details] [diff] [review] [checked-in] Proposed patch, part 3: Remove !important. http://hg.mozilla.org/mozilla-central/rev/14710b1bd29d