Mozilla will shut down Pocket’s services on July 8, 2025. At that time users will no longer be able to access the Pocket website, apps and API. You can export your saved items and API data until October 8, 2025 before they are permanently removed. For more information, see this article.

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
  • 6 views
  • Last reply by cor-el

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
Read this answer in context 👍 1

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

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:

Modified by cor-el