Hi, 1) Go to this url: chrome://browser/content/browser.xul This loads a page filled with Firefox GUI elements.

2) Open Tools-> Web Developer-> Inspector.

3) Inspect the element(s) you want to customize

4)Create a Stylish style that modifies those elements.

evilssh said

Hi, 1) Go to this url: chrome://browser/content/browser.xul This loads a page filled with Firefox GUI elements. 2) Open Tools-> Web Developer-> Inspector. 3) Inspect the element(s) you want to customize 4)Create a Stylish style that modifies those elements.

Thanks, where I should put my custom CSS file? Also actually I need to customize Developer console, I could not open that in your mentioned URL. how I can open that too?

right click inspect element the console is on the second tab.

you can visit this link for more info:

https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

evilssh said

right click inspect element the console is on the second tab. you can visit this link for more info: https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

No, I know how to work with Dev console, (I'm web developer), I mean when I open your mentioned link, I can inspect (for example) toolbar items & change the CSS using Dev console. But the opened Dev console is for main window not for opened/editabled window.

I need to edit UI of Dev console not whole window (as I said in question title). (hope I could tell the point here)