Colouring in location bar broken

[notonymous]

For a long (long) time, I have used something like the following userchrome to colour the location bar according to the level of security provided by a site:

Code: Select all

#urlbar[level="high"] .autocomplete-textbox-container {
    background-color: green !important;
}

#urlbar[level="low"] .autocomplete-textbox-container {
    background-color: yellow !important;
}

#urlbar[level="broken"] .autocomplete-textbox-container {
    background-color: red !important;
}

Recently, in Aurora, it no longer works. Does anyone know what's changed?

Aurora 43.0a2 buildID 20151021004355 (Mozilla/5.0 (Windows NT 6.1; rv:43.0) Gecko/20100101 Firefox/43.0)

[patrickjdempsey]

The "high" and "low" levels thing actually hasn't worked in a long long time now. Also quite a long time ago, Mozilla introduced a new system that is only applied to the #identity-box element, but covers a wider selection of states. This is from the default theme, but I've added the ID to make it clearer:

Code: Select all

#identity-box.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
  list-style-image: url(chrome://browser/skin/identity-icons-https.png);
}

#identity-box.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
  list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png);
}

#identity-box.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png);
}

#identity-box.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
}

#identity-box.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
}

[notonymous]

The "high" and "low" levels thing actually hasn't worked in a long long time now.

Well, I know is was still working around the end of August (2015) but I don't know exactly when it stopped working (I may do some sleuthing on the weekend).

Thanks for the pointers -- at least I can now colour the icon container which provides (for me) a better visual clue than the default settings. Not quite as attention-grabbing as colouring the entire location bar but not bad.

[patrickjdempsey]

I mean it hasn't worked as in no websites will show "low" security. That's been broken since at least Firefox 3.0.

[patrickjdempsey]

P.S. Nice avatar. Have you seen that due to Donald Trump, Breathed has resurrected the strip??

[notonymous]

There was a bug already filed for this, https://bugzilla.mozilla.org/show_bug.cgi?id=1213178

[patrickjdempsey]

Not likely to be "fixed". Firefox dropped coloring the urlbar way back in Firefox 3.0 and the legacy stuff is still there mostly because nobody had gotten around to removing it. It's possible one of the urlbar-modding or appearance-modding extensions will bring it back.

[joeg]

The Site Favicon in URLbar extension offers this function.

It got broken in the Nightly of 27 Oct, but I can verify that it still works in the latest version (42) of the 64-bit beta.

By the way, I just had a mail from the dev of the extension, who kindly promised to have a look at the problem when he gets some time.

[Aris]

Here is the solution for this issue:

• Install "uc" add-on https://addons.mozilla.org/addon/uc/
• navigate to your Firefox profile folder C:\Users\ <your name> \AppData\Roaming\Mozilla\Firefox\Profiles\ <random numbers>.default\
• create a subfolder "chrome"
• save the following code as "verifiedurlbarcolor.uc.js" (make sure the file ends with *.uc.js and not txt)

Code: Select all

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
   try{  
	 document.getElementById("urlbar").setAttribute("connectionlevel", document.getElementById("identity-box").getAttribute("class"));
   } catch(e) {}
	
  });    
});

observer.observe(document.querySelector('#identity-box'), { attributes: true, attributeFilter: ['class'] });
	
var ss =  Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
#urlbar[connectionlevel^="verifiedIdentity"] .autocomplete-textbox-container,\
#urlbar[connectionlevel^="verifiedDomain"] .autocomplete-textbox-container {\
  background-color: #FFFFB7 !important;\
}\
\
'), null, null);

this.ss.loadAndRegisterSheet(uri, this.ss.AGENT_SHEET);

You can now even add more colors for all the available states:
.weakCipher
.mixedDisplayContent
.mixedDisplayContentLoadedActiveBlocked
.insecureLoginForms
.mixedActiveContent
.verifiedDomain
.verifiedIdentity

Originally posted here: viewtopic.php?p=14403569#p14403569

[paltus]

Another solution, only css:

Code: Select all

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url(http://www.w3.org/2000/svg);

@-moz-document url("chrome://browser/content/browser.xul") {
  #identity-box {
    background-color: transparent!important;
  }
  #urlbar{
    position: relative!important;
    z-index: 1!important;
  }
  #identity-box::after {
    content: ''!important;
    position: absolute!important;
    height: 100%!important;
    width: 100%!important;
    top: 0!important;
    left: 0!important;
    opacity: .8!important;
    pointer-events: none!important;
    z-index: -1!important
  }
  #identity-box.verifiedIdentity::after {
    background: lightgreen!important;
  }
  #identity-box.verifiedDomain::after {
    background: yellow!important;
  }
  #identity-box.weakCipher::after {
    background: orange!important;
  }
  #identity-box.mixedDisplayContent::after {
    background: linear-gradient(rgba(228,99,47,.32),yellow,rgba(228,99,47,.32))!important;
  }
  #identity-box.mixedDisplayContentLoadedActiveBlocked::after {
    background: orangered!important;
  }
  /* etc... */
}