• When the Search Bar is empty, the label text is now gray.
• A bunch of menulist fixes. Either things had changed, or i had things styled wrong originally, or both. Discovered after testing the Live Titles feature for bookmarks; there weren’t many menulist elements to check against in previous versions.
• Added necessary files for Manage Search Engines List and Bookmark Properties dialogs.

The author seems to have abandoned it. …

It would be wonderful if someone could take this up and get it working for Firefox 2.

anna dyne

First of all, i appreciate that you appreciate my theme.

Second of all, it’s not quite abandoned. I certainly haven’t been able to give it the attention it deserves, but i do hack at it when i can. I haven’t been posting updates to my site, but there has been activity since that last post you linked.

As you can see, i have my personal copy mostly working on Firefox 2. I pick at things here and there when they annoy me enough to fix them. I still haven’t fixed the Add-ons manager which was busted in the 2.0 upgrade. And there were several interface changes/additions that aren’t simply changing colors or adding icons (tabs scrolling, for example)—i have to figure out how to build them so they keep that LCD look. I also have had to change the way i created some of the effects due to both changes in the Firefox interface and changes in the way the interface is rendered (some things like outlines don’t work the same anymore).

As an aside, i also learned by jumping in and doing it. I didn’t originally intend to create an LCD-looking theme—i was just playing around with the effect in Photoshop almost three and a half years ago, but it quickly snowballed.

Having said all that, i’ll post what i have for download if you’d like, and i guess i’ll post updates as i get to them. I’d prefer to release a “finished” product, but by that method the last thing i put out was for Firefox 0.8. I’ll keep an eye on the forum thread for feedback.

I downloaded the newest Alpha 3 of Bon Echo, but haven’t yet installed it. Very curious to see what kind of changes are going on in the next generation of Firefox. The anti-phishing popup shown in the screenshots at Mozilla Links looks a little scary. Not quite sure how that would look in LCD. But other things like the integrated search button in the Search Bar are something i’ve basically already done with the icons on the Location Bar. I also already have the magnifying glass icon from back when you could search the document from the search bar—back before the Find bar at the bottom of the window.

I’ve been thinking about releasing lately. I had been thinking that i could just push out what i have and iron out any kinks with updates. But it’s good that i cracked this open, because i realized that there are still some very rough spots that aren’t quite ready.

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.

The feed button code and styles are in place. But i need to come up with a feed icon, which is something i kept putting off around 0.9 or whenever they integrated feed/livemark support. I have an idea for it—kind of like the Bookmarks Manager variants that are shifted off to one corner, but it would then have radiating outlines in the “plus” pattern of my bookmark icons instead of the curves of the default feed icon. I’ll have to play with that in Photoshop (which is something i haven’t done in a really long time for these icons). The only issue i can forsee from here is that it won’t scale to the large-type button icon. It will only work in the 16-pixel size. In that way, it will kinda “break the rules.” But i don’t think this icon will be used anywhere else in any other size, so i guess it’s a compromise i’ll have to take. For now, i’m using the diamond bookmarklet icon.

When major breakage is encountered it’s usually easiest for me to just copy the related CSS files from the release classic.jar. That gives me a working baseline. From there, it’s a lot of whittling unnecessary code and unstyling native-look properties to a bare-minimum stylesheet.

CSS often comes from Mozilla in no kind of order, so at some point i usually rearrange stylesheets so they make sense to me. That means grouping styles related to the same elements, usually with hierachical indentation, and then ordering things in some logical way—usually using the source XUL as a reference. DOMI helps here.

Even with DOMI there’s a lot of trial and error as i narrow in on the elements and selectors i need and want to style. Around this time—when i have a good grasp of what is doing what, and why i’m styling it a certain way—is when i add as much commenting as i can. Two years later i wish i would have been completely thorough, but the good bit of comments i did make have been priceless.

Eventually, i replace the entire stylesheet with original selectors and properties with consistent formatting that works for me. Often i find that most instance-specific styles are unnecessary for this theme, and i’ll remove just about all of the styling rules that were in the original Winstripe theme. It was a goal of mine to have solid global styles that could cascade down and work in as many situations as possible, relying on global element and class styles as much as possible. It’s also due to the clean, simple look i was going for.

The other night i tackled the long-neglected new Options prefwindow. It took me a minute to understand how everything was structured. Partly because prefwindows are new to me, and partly because i’m stale and it takes me a little while to really get into the XUL/CSS mentality. I referenced the stylesheets of the old preference window and some other similar parts to refresh. Fortunately, i was able to copy/paste a lot of the styles from similar areas and they carried the LCD look over with minimal adjustment.

Most of the work was done in global/preferences.css—establishing the parent styles for all prefwindows. I was going for a tabbed look sans icons for the panel buttons at the top, which is something i actually tried to achieve long ago when the buttons were on the left side. All that fell into place fairly easily. But i ran into some issues with borders being eaten and prefpanel content being obscured. Couldn’t completely track down why, but some prefpanels had a limited size, no matter how large the parent prefwindow was. This was fixed by adding an overflow: visible; rule to prefpane > .content-box. The content boxes were set to hidden in the content stylesheets. So then i had to ensure the Options prefwindow size was large enough so that no options would be obscured.

I didn’t yet get to customizing the individual prefpanels, but there’s definitely going to be some work on on the tabpanels on the Privacy and Advanced panels. Because the main window is using the tab analogy, i’m not sure how well the nested tabpanels will work. I have a few ideas in mind, but i may need to make some bigger changes. Or figure out another way to style the main panel buttons.

Still need to work on the feed thingy in the URL bar. I think that’ll cover all the major sore spots. Then it should just be tweaking and clean up.

I’m considering a transition in employment, which may or may not help with both of those. But it’s all just ideas at this point. It’s next to impossible to know how things will unfold without just jumping in the deep end and finding out along the way. And that’s what i’m leaning towards. Wading on the kiddie side of the pool is becoming frustrating—i’m kind of a tall guy. Still, the deep end can look scary.

Just got a weird shock when a friend left a comment on what was my first post on this joint. I had pretty much completely forgotten about it. I especially didn’t remember it as being the first post. I’m closing in on two years here. Now i wonder how long it will be until it’s uncool to have a blog. Maybe that’s already the case.

Your comments, advice, and prayers are always welcome. Thanks for clicking by. Hope to bring more to read soon.

The hack originated as a way to get the old Go button to match the other toolbarbuttons in my theme. I then began using it as a way to dynamically increase button sizes when space was available, according to Fitts’ Law of interaction design (bigger targets are easier/faster to hit).

Also have the Software Update window (the one that pops up and alerts you that a new version of Firefox is available) has been just about finished for a few days now. It wasn’t working before because i had update.css in the mozapps directory but not updates.css, which i confused at a glance. I still need to give it the usual thorough scrubbing—adding and removing styles to cover all situations, and check for as many bugs as i can. I already stumbled on one just now—the updater couldn’t connect to the server and showed an error, which wasn’t styled as i’d like. It’s hard to know what all these selectors are for just by reading through the CSS; comments are sparse, and are more often than not dev notes about bugs rather than explaining what certain styles are for.

On 20060210 i noticed and copied tabDragIndicator.png to global/tabDragDrop from the default theme, but that alone didn’t fix the tab drag indicator. I haven’t looked into it any further.

Noticed a few days ago that there some weirdness in the Create in: menulist in the Add Bookmark dialog. The list items styles are a little off and the list popup has scrollbars, neither of which happened in previous versions of Firefox.