I made some changes to the Feed and Security icons in the Location Bar. I wasn’t quite happy with how they sat there in the bar, apparently all in the mix with the text of the URL. They’re actually in their own little box, but because the background color was the same, the edge between the two was ambiguous. This also didn’t make a lot of sense as far as LCD’s style rules go. If the Location Bar had focus so the background was green, these icons also had the green background, though they weren’t active or focused or anything. Conversely, the icons (which are basically buttons) had no active states for click feedback.

So i had a few ideas about how to isolate the icon buttons, but as it usually turns out, the simplest solution was best. I just added borders to them in the same way i did to the Location Bar dropmarker, so that they turn dark on hover and focus. Also gave them the lighter gray background color like the dropmarker since their content doesn’t change, and hooked them up with active colors and icons for click feedback.

Some of the other things i tried with -moz-outline and padding and other craziness just didn’t look right. And i ran into some interaction bugs while using -moz-outline—sometimes the right edge would not show up.

I think it looks much cleaner now. More in line with the LCD look, and the icons don’t inflate the Location Bar’s size. And it scales nicely. Both icons nudge up next to the dropmarker with the trademark one-pixel border. They appear and disappear individually and as a pair with no leftovers. If the URL wasn’t such a space-critical thing, i’d probably build them as static as on the status bar, but it would get in the way more than it was worth the style.