Firefox 6.0 introduced URL formatting in the address bar, i.e. the domain.tld is black, while protocols, subdomains, and paths are grey. The related about:config entry to enable/disable this feature is browser.urlbar.formatting.enabled. I would like to customize these elements. For example, instead of different colors, make the domain boldface.

My research has only led me to discussions on how to disable this feature, as this was a controversial change in interface. Am I the first person to think of this?

I've inspected the DOM for related CSS selectors, but did not find any attributes specific to the domain or other parts. I also looked through the various XML files (e.g. chrome://browser/content/urlbarBindings.xml#urlbar), but I do not know JavaScript.

I've pasted the related XML/JavaScript code here: http://pastie.org/3122111


Looking here,

https://wiki.mozilla.org/Firefox/Features/Locationbar_Domain_Highlight -> Implementation section -> Bug 451833 & Bug 654411 -> Bug 654411#c43 -> patch.

See here, is the patch which added the URL highlight feature, it includes complete implementation.

From the second bug it related to nsTextFrameThebes.cpp, that is where they changed the colour itself, the relevant piece of code appears to be

1.12 -  nsILookAndFeel* look = mPresContext->LookAndFeel();
1.13 -  nscolor foreColor;
1.14 -  look->GetColor(nsILookAndFeel::eColor_graytext, foreColor);
1.15 -  *aForeColor = foreColor;
1.16 +  nscolor textColor = GetTextColor();
1.17 +  textColor = NS_RGBA(NS_GET_R(textColor),
1.18 +                      NS_GET_G(textColor),
1.19 +                      NS_GET_B(textColor),
1.20 +                      (PRUint8)(255 * 0.5f));
1.21 +  // Don't use true alpha color for readability.
1.22 +  InitCommonColors();
1.23 +  *aForeColor = NS_ComposeColors(mFrameBackgroundColor, textColor);
1.24  }

So I'm afraid the colour is hardcoded.

For a test, I added this to userChrome.css which didn't change the colours in Location bar (the domain name is still highlighted; same colours):

* {
  color: black !important;
  opacity: 1 !important;
  -moz-appearance: none !important;

P.s. I'm unfamiliar with the codebase so please feel free to review the mentioned files and check.

  • Excellent, thorough answer. Thank you. I was worried that it would be hardcoded. Since there is nothing I can do aside from rebuilding the source code myself, I will wishfully submit the idea. – iglvzx Jan 4 '12 at 22:43
  • Note that using color: red !important does change the color of the URL bar text, but you still can't apply a different style to the domain portion and the rest of it. Bummer. – RomanSt Jul 15 '16 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.