I would like to resize width of Search HTML bar in developer tools Firefox Quantum
Is it possible to change width box "Search HTML"?
Chosen solution
Add code to the userChrome.css file above the default @namespace line.
@-moz-document url(chrome://devtools/content/inspector/inspector.xhtml){ #inspector-search {width:500px!important} @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* add more code here */ }
You need to create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist.
- use a plain text editor (Windows: Notepad; Mac: Textedit) to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
- paste the code in the userChrome.css file in the editor window
- make sure the userChrome.css file starts with the default @namespace line
If you are on Windows:
- make sure you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css
Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.css.txt file.
- make sure you do not have a double .css.css file extension (userChrome.css.css.css) if it is still not working
All Replies (8)
Hi, Sorry to take so long to get back to you, this must have been buried pages deep as just pop'ed up again on the 1st page after others have cleaned some questions. Yes I think there is, I do not know what it is though other than it is done in usserChrome and that I have some info for : USSER CHROME URL'S
- https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/
- http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html
- https://github.com/Aris-t2/CustomCSSforFx/issues/1
- https://www.accessfirefox.org/Theme-Font-Size-Changer.php
- https://www.userchrome.org/
- https://www.accessfirefox.org/Firefox_Accessibility_Themes.php
- https://www.userchrome.org/what-is-userchrome-css.html
- http://kb.mozillazine.org/UserChrome.css
- https://github.com/axydavid/FirefoxUI/blob/master/README.md
- https://github.com/wilfredwee/photon-australis
- https://www.reddit.com/r/FirefoxCSS/
Note not all code in one place. Note : if still can not find it one of the above a Moderators here is the author of the userchrome.org site, so do come back.
Please let us know if this solved your issue or if need further assistance.
Chosen Solution
Add code to the userChrome.css file above the default @namespace line.
@-moz-document url(chrome://devtools/content/inspector/inspector.xhtml){ #inspector-search {width:500px!important} @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* add more code here */ }
You need to create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist.
- use a plain text editor (Windows: Notepad; Mac: Textedit) to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
- paste the code in the userChrome.css file in the editor window
- make sure the userChrome.css file starts with the default @namespace line
If you are on Windows:
- make sure you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css
Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.css.txt file.
- make sure you do not have a double .css.css file extension (userChrome.css.css.css) if it is still not working
Many thanks for your help.
Hi, after update Firefox Developer Edition to 63.0b1 (64-bit), this settings return to default width. How can I resize search box now?
@-moz-document url(chrome://devtools/content/inspector/inspector.xhtml){
#inspector-search {width:800px!important}
See:
- view-source:chrome://devtools/content/inspector/inspector.xhtml
I don't understand your advice. I modify userChrome.css but without resize search box.
@-moz-document url(view-source:chrome://devtools/content/inspector/inspector.xhtml){ #inspector-search {width:800px!important} }
correct is
@-moz-document url(chrome://devtools/content/inspector/index.xhtml){
#inspector-search {width:800px!important}
}
See also:
- bug 1470244 - Rename all panel documents to index.{xul|xhtml}
- https://hg.mozilla.org/mozilla-central/rev/325f3e1ba486
Modified