Slash Boxes
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

use Perl Log In

Log In

[ Create a new account ]

Ovid (2709)

  (email not shown publicly)
AOL IM: ovidperl (Add Buddy, Send Message)

Stuff with the Perl Foundation. A couple of patches in the Perl core. A few CPAN modules. That about sums it up.

Journal of Ovid (2709)

Friday February 14, 2003
02:22 PM

XUL munging

[ #10590 ]

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.

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
More | Login | Reply
Loading... please wait.
  • grippies be gone (Score:3, Informative)

    by wickline (135) on 2003.02.16 15:32 (#17121) Journal
    > how to remove that

    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 :: Web Development submenu :: DOM Inspector. Once you've got the DOM Inspector window open, look in the View menu and ensure that every option is checked (so the following will make more sense).

    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. [] links to Developer Docs [] (in the left margin) which has XUL [] linked under Core Architecture. The bottom of that page links to a XUL Tutorial [] which lists as section 1.3 The Chrome URL [].

    On that page, you can find gems like the main Navigator window


    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 []. If you're interested in some sample chrome CSS, here's what I have in my


    Happy XUL and CSS editing :)


    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.

    @namespace url("");
    /* set default namespace to XUL */
    /* Kill icons on normal bookmarks */