This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

I would like to resize width of Search HTML bar in developer tools Firefox Quantum

  • 8 replies
  • 2 have this problem
  • 5 views
  • Paskiausią atsakymą parašė cor-el

more options

Is it possible to change width box "Search HTML"?

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
Skaityti atsakymą kartu su kontekstu 👍 1

All Replies (8)

more options

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

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.

more options

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
more options

Many thanks for your help.

more options

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}
more options

See:

  • view-source:chrome://devtools/content/inspector/inspector.xhtml
more options

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} }

more options

correct is

@-moz-document url(chrome://devtools/content/inspector/index.xhtml){

#inspector-search {width:800px!important}

}

more options

See also:

Modified by cor-el