Stuff with the Perl Foundation. A couple of patches in the Perl core. A few CPAN modules. That about sums it up.
The XUL menus have been so easy to use and so well-received that my boss had a field day redesigning all of the Web pages to match the look and feel of the menus.
That's when I showed him that I could change my browser skin. Surprise!
Today, I attached a new stylesheet to the XUL and forced the menus to look like his Web pages, regardless of skin. I took it a step further and ensured that the font would be consistent, disabled menu items that aren't implemented and created an "in_progress" class that highlights menu items that are not yet complete. The testers can now easily see what is and isn't done and doing all of this is far easier than using wxPerl, wxPython, or DHTML.
There are still a couple of issues, though. In Mozilla based browsers, there is an arrow on the left side of toolbars that a user can click on and hide the toolbar. I haven't yet figured out how to remove that. Our boss has already clicked on that once and tried to figure out what happened to the menus.
Also, overriding the css has caused menupopups with submenus to not change color when I rollover them (though the arrow to the right changes color). I haven't figured out how to restore this behavior, either. Still, it's a blast getting to dig into a new technology.
grippies be gone (Score:3, Informative)
Those little things are toolbargrippy things. If you haven't yet found the DOM Inspector in Mozilla, you'll probably appreciate it as you're working on this stuff. Tools menu
You'll need a URL which gives you a DOM which includes a grippy. If you've got some local XUL, you can use that. Otherwise, you can find URLs for mozilla chrome.
Mozilla.org [mozilla.org] links to Developer Docs [mozilla.org] (in the left margin) which has XUL [mozilla.org] linked under Core Architecture. The bottom of that page links to a XUL Tutorial [xulplanet.com] which lists as section 1.3 The Chrome URL [xulplanet.com].
On that page, you can find gems like the main Navigator window
chrome://navigator/content/navigator.xul
You can drop that URL into your DOM Inspector and start looking at all the whatzits and gizmos. In my skin, the DOM Inspector has an icon in the upper left of the window which looks like a circle with a pointer icon hovering over it. Mousing over that icon gives the tooltip "Find a node to inspect by clicking on it". Once you have your XUL loaded, you click that icon, then you click the whatzit (in the lower pane) that you want to inspect.
In this case, you'd click a grippy. In addition to doing the usual grippy function (expanding or collapsing a toolbar), the DOM Node view of the DOM Inspector (the upper left pane) will open up the DOM tree to that point.
The xul:toolbargrippy will be a child node of a toolbar (in my case, where I clicked on the navigational links toolbar of the navigator window). The xul:toolbargrippy doesn't have an id (second column in that DOM tree view in the upper left pane), but it is the child of a toolbar object which does have an id. That should give you a good starting point for a CSS selector to find apply {display: none;} to the grippy.
You can even use this sort of stuff to customize your own mozilla chrome. You might already be familiar with the user.js file you can create in your profile directory. It works like prefs.js, but the application gives priority to your settings in user.js and it won't ever overwrite them no matter what you do in the app's prefs GUI. This is also where you set so-called invisible prefs (prefs for which a GUI is not available).
There's a similar file you can have which will let you style the browser chrome. Your styles will apply to the chrome over the top of whatever skin your browser might happen to be wearing. I use this to clear some unused items from my toolbars, gain a bit more screen real estate, and make minor appearance changes. You could use it for whatever you want. There's another file you can use to apply your own CSS to all web pages.
I won't go into details about the content CSS file, but you can read about it elsewhere [oreillynet.com]. If you're interested in some sample chrome CSS, here's what I have in my
Mozilla/Profiles/myusername/random.slt/chrome/userChrome.css
Happy XUL and CSS editing
-matt
PS: argh. Slashcode wouldn't let me post this comment because it compressed too well (too much repeated CSS syntax and whitespace). I've munged the whitespace a bit to make it postable, although perhaps a smidge less reader friendly.
Reply to This