Closed Bug 1263889 (improve-fb-theme) Opened 7 years ago Closed 5 years ago

[meta] Firebug Theme Improvements


(DevTools :: General, enhancement, P3)



(Not tracked)



(Reporter: Honza, Unassigned)



This is a follow up for bug 1244054

Suggested improvements for Firebug theme:
* Toolbar backgrounds should be specified using CSS variables.
* Splitters: the main Toolbox splitter (horizontal) can't be themed since it's outside the Toolbox and can't utilize root element theme class. All the other splitters should be 5px wide/tall in Firebug theme. But make sure they are not visible when side bars are hidden.
* Black list of non-inverted icons. Do not use  --icon-filter: none; for all images in Firebug theme (toolbars.css)
* Modifying image of #toolbox-tab-options is hacky (it's because the image is hardcoded in Options tool definition (definitions.js)
* RTL should be properly tested (e.g. debugger tab highlighted icon should be on the right for RTL)
* --proportional-font-family for Firebug theme is needed?
* Better way to customize code mirror colors
* We should have a global solution for all tools that have a highlighted icon state (memory, performance and debugger).
* Move Firebug theme support for console.table() into widgets.css
* Highlighter colors should match Firebug's colors (bug 1128209 maybe related)

This is a meta bug and patches should go to further reports

Severity: normal → enhancement
Autocomplete-popup.js is generating class-name from a value coming from 'devtools.theme' pref. This logic doesn't take in account that some themes can use more class names. It should get value from the theme definition.classList

Inspector breadcrumbs path should support RTL.

The Firebug theme is appending "()" after function name in the Stack (side) panel.
It's using content: "()", which is hacky. We might want to do this in JS and perhaps for every theme.

> * Move Firebug theme support for console.table() into widgets.css
This has been done as part for bug 1244054

Feedback from Helen:
(see also:

- Sometimes the tab looks odd with the background because of the contents of the pane. (See screenshot: Tools with a secondary toolbar don’t seem to have this problem. Temporary fix below:
- Man, the command buttons look strange with Firebug. ( unsure what to do about that right now.
- I also notice that the Settings cog is sitting a little low: That might be regular theme CSS messing with Firebug CSS.
- The command-pick, on the other hand, looks a little high: 

(In reply to Jan Honza Odvarko [:Honza] from comment #5)
> Feedback from Helen:
> - Man, the command buttons look strange with Firebug.
> ( unsure what to do about that right now.
There is now bug 1265985 covering this.

Summary: Firebug Theme Improvements → [meta] Firebug Theme Improvements
Alias: improve-fb-theme
Depends on: 1266300
Depends on: 1266305
Depends on: 1266306
Depends on: 1266308
Depends on: 1266310
Depends on: 1266733
No longer depends on: 1266305, 1266306, 1266308
Depends on: 1268171
Depends on: 1268188
Depends on: 1267788
Depends on: 1267802
Depends on: 1153681
Depends on: 1268494
Depends on: 1268495
Depends on: 1268591
Depends on: 1269720
Depends on: 1269724
Depends on: 1269726
Depends on: 1269730
Depends on: 1268738
Depends on: 1279703
Depends on: 1280791
Depends on: 1285449
Depends on: 1288209
Depends on: 1306139
Depends on: 1318259
Depends on: 1326527
Would Bug#1314919 also block / link to this meta-bug ?
Depends on: 1308940
Depends on: 1314919
DevTools bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
The Firebug theme was removed in Bug 1378108, so I am marking this meta as WONTFIX.

Closed: 5 years ago
Resolution: --- → WONTFIX
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.