Firebug theme - Adjust UI of logs view in Console panel




Developer Tools
a year ago
3 months ago


(Reporter: sebo, Unassigned, NeedInfo)


(Blocks: 2 bugs)

51 Branch
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)



(1 attachment)



a year ago
When using the Firebug theme the console messages should use the formattings and icons of Firebug 2.


Comment 1

8 months ago
Created attachment 8811629 [details]
Firebug Console in comparison with DevTools' Console panel

Using the Firebug theme the UI of the Console panel still has some differences to the Firebug extension. See the attached screenshot for comparison.
Parts of the differences were noted in the Firebug discussion group[1].

Here's a list of differences, which should be adjusted:

- Background color is slightly darker
- Logged elements have bold tag names and they use different colors
- Source links are not bold and their line and column numbers are red (colors might be ok, though)
- Icons differ
- Groups have a white background and don't have borders around their contents
- Functions in stack are missing their call parameters and are red, source links show the full URL
- XHRs have a white background and are missing the HTTP status, load time and source link




8 months ago
Severity: enhancement → normal
Summary: Properly style console messages in Firebug theme → Firebug theme - Adjust UI of logs view in Console panel
Version: unspecified → 51 Branch
Thanks for the comparison
Priority: -- → P2

Comment 3

8 months ago
I think we might want to revisit the light/dark theme look to be more similar to Firebug. 
I like the following things from Firebug:
- color-codes the message icons (red for error, yellow for warning, blue for info)
- messages are clearly separated by separators
- the icons are bigger

We might want to take Safari's console as inspiration (which is pretty similar to Firebug).

Helen, what do you think ?
Flags: needinfo?(hholmes)
Blocks: 1267303
You need to log in before you can comment on or make changes to this bug.