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.

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.

I didn’t realize it at first, but the Update notifiation window is completely unstyled. With the recent push of the 1.5.0.1 update, a little window titlebar popped up out of nowhere, but was empty and couldn’t be resized. I figured it was some stray popup ad, but later realized what it was after seeing the real deal on a machine using the default theme. I already tried to start patching that up by copying over the styles in mozapps/update/updates.css, but it didn’t make any visible changes. I’ll have to scrape the theme updates thread for all the necessary changes.

Also a little annoyed with the unstyled feed button in the Location Bar. It’s taking up a good bit of width, and i end up clicking it accidentally. I’ll have to tie that one up soon.