Urlbar Icons

[Techy-Ben]

Hello, Would you mind changing the code for the icons in the urlbar puzzlebar to display the them at 18px by 18px? That would make the icons match the other icons inside the urlbar, which would make the urlbar puzzlebar seem more natural.

Thanks, Techy-Ben

[Quicksaver]

They should already be 18x18. Are they not for you?

[Techy-Ben]

Sorry, I forgot that I had this open.

No, my icons do not seem to be displaying at 18x18. See the picture for reference:

The hashtag is an addon I have in your urlbar puzzlebar with the puzzle piece hidden. it shows up as 22px tall. In contrast, the reload button is 15px tall, the search icon in the search bar is 19px tall, and the reader button in the urlbar is 17px tall. I've tried adding a clear border around the .png image for the hashtag button, but Firefox rescaled the button so that it was still an apparent 22px tall. So...if it's possible to add a border around the icons to limit their height, that would be nice. Or, if you can set the height itself to a certain limit then that would be ideal. 18px tall might even be a little large. Maybe 17px to match the reader button would work? On the other hand, I noticed that CTR's urlbar icons are also 22px tall.

Just some thoughts for streamlining the look of the urlbar. I know other users will have different preferences, so take mine for what you will.

Thank you for the excellent addons you create and maintain. :)

[Quicksaver]

What add-on does the hashtag button come from?

All icons should be 18px tall by default, unless they have specific rules (in their own code) that override this. To "override this override" so-to-speak needs to be done on a case by case basis, so I need to know exactly which icons aren't being sized properly in the location bar; if you have any others let me know.

[Techy-Ben]

The hashtag button comes from "fragment 0.8.1-signed." It is an add-on that allows url linking to specific html elements in the page, if the page has linkable html elements. I edited Fragment to change its native black icon to a grey icon, and I tried adjusting it for size, but that didn't work.

[Quicksaver]

The hashtag icon is already displayed at 18px for me... I think something is making your location bar much taller, which in turn is stretching the hashtag, or something is stretching the icons directly. Could you try disabling all other add-ons except for Puzzle Toolbars and Fragment and revert to the default firefox theme, and see if its icon is still stretched like that? It could also be some stylish stylesheet, so if you use stylish I would start there.

[Techy-Ben]

Okay, an add-on is stretching my location bar slightly, but that is not affecting the icons within it. Here's a screenshot comparison of the location bar with and without all of my add-ons enabled, excepting that PT and Fragment are always enabled:

The top two show all add-ons enabled, showing/hiding the puzzle piece. In the next two all are disabled except PT and Fragment. In the last one, the add-ons are enabled, but I've also turned on CTR's small navigation buttons. With CTR's small navigations buttons option checked, Fragment is exactly the right size! However, I don't like the overall look of the option because it makes all the other buttons too small. Is there a way for me to apply the small navigation buttons code to just Fragment in userChrome.css or by tweaking Fragment's .xpi file?

[Techy-Ben]

Okay, I've figured this one out! For one thing, I needed 16px for the look I was wanting, not 18px. Also, I had tried editing Fragment's main.js and changing the icon source picture size before, but apparently I didn't do them together. I changed a line in the main.js file from:

icon: { "32" : self.data.url("icon.png") },

to:

icon: { "16" : self.data.url("icon.png") },

and halved the size of icon.png. In combination it produced the result I wanted:

Fragment updated sometime after I first posted this issue, which may have updated the icon size from 20px to 18px. (Actual measured size on my screen is 22px and 20px respectively; actual size with 16px icon is 18px...I'll assume that the 2px enlargement is normal, possibly due to screen resolution). Since my preferred size is 16px, and the updated add-on correctly displayed the icon size at 18px, I'll consider this issue closed if that's okay with you. Thanks for helping!

Also, I figured out that Ghostery is the add-on that was stretching my navigation bar, which makes sense, because it's a big icon with a badge that makes it even taller. I'll see what I can do to cut it down to size.

[Quicksaver]

Well if everything is appearing as it should, or at least how you want it, then cool! :)

Also, I figured out that Ghostery is the add-on that was stretching my navigation bar, which makes sense, because it's a big icon with a badge that makes it even taller. I'll see what I can do to cut it down to size.

You're right about the Ghostery icon (hadn't noticed it before, just tried it quickly), but even icons with badges should fit well in the navigation bar, I don't think it's the badge that's causing the stretching but either the button itself or the icon inside it. You might want to ask its developers if this is intended, I don't think it's something that would take too much time to fix anyway.