[RESOLVED] PopupNotifications and Geolocation Icon

Add-ons Development
#1

I use the PopupNotifications component to ask the permission to locate the user. I’ve added the option popupIconURL and it works fine (see attachment). Since it’s a geolocation permission, I’ve put geolocation as ID. However, I’m wondering if we could customize the icon shown in the notification zone of the address bar? Actually, I’d like to see the geolocation icon…

#2

I don’t think you’ll be able to change the icon without considerable effort. I suppose all geolocation prompts are shown that way. So, even if the icon isn’t quite right, it’s what users should be used to and it’s best to keep it that way.

#3

Thanks for answering Jorge.

Actually, geolocation prompts (from a Web page) are shown with another icon (see attachment). I’m having the default icon (which looks like a :bulb: ).

#4

According to the docs, you just need to use CSS and the ID you pass to style the icon. So, you just need to figure out the chrome:// URL for the geolocation icon.

#5

You can register a stylesheet to override that icon:

Cu.import('resource://gre/modules/Services.jsm');
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
try {
    sss.unregisterSheet(cssUri, sss.AUTHOR_SHEET);
} catch (ex) {}

var css = '';
/*css += '[anonid="close-button"] .toolbarbutton-icon:after { content:"rawr"; position:absolute; z-index:999999; width:10px; height:10px; background-color:red; }';*/ //i dont know why but i cant seem to put a before or after pseduo element on the image so i put it on the toolbar-button, if yo ucan figure this one out share with us
css += '[anonid="close-button"]:before { position:absolute; top:5px; background-color:black; width:20px; height:20px; content:""}';
css += '[anonid="close-button"] { pointer-events:none !important; }';
var cssEnc = encodeURIComponent(css);
    var newURIParam = {
        aURL: 'data:text/css,' + cssEnc,
        aOriginCharset: null,
        aBaseURI: null
}
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.AUTHOR_SHEET);
#6

Thanks,

I think the docs is a little bit misleading, in that it shows how to customize the inner icon of the notification pop-up. Otherwise, the docs says Adding an icon to a notification is simple, but the piece of code given by @noitidart is not that simple).
Anyways, I’m now able to figure out how to achieve that. And I’ll try to edit the docs as well if I was right about it.

Thank you both again!

#7

Doc edits are very welcome thanks if you can!