XUL munging

Ovid on 2003-02-14T19:22:11

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

wickline on 2003-02-16T20:32:52

> 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.

Mozilla.org 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

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. 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.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */
 
/* Kill icons on normal bookmarks */
toolbarbutton.bookmark-item:not(.bookmark-group):not([type="menu"])
> .toolbarbutton-icon {
    display               : none !important;
}
 
toolbarbutton.bookmark-item {
    margin-left           : 0 !important;
    margin-right          : 0 !important;
    border-width          : 0 1px 0 0 !important;
    border-style          : none solid none none !important;
    border-color          : #94A5BD !important;
}
 
/* Kill normal bookmark icons in the bookmarks menu */
menuitem.bookmark-item > .menu-iconic-left {
    display               : none !important;
}
 
/* Kill only default tabbrowser icons (no site icon) */
.tabbrowser-tabs *|tab:not([image]) .tab-icon {
    display               : none !important;
}
 
/* dump some excess space around url bar: */
#nav-bar-buttons {
    margin                : 0 !important;
    padding               : 0 !important;
    border                : 0 !important;
}
.toolbarbutton-icon {
    margin                : 0 !important;
    padding               : 0 !important;
    border                : 0 !important;
}
.toolbarbutton-box {
    margin                : 0 !important;
    padding               : 0 !important;
    border                : 0 !important;
}
#nav-bar-inner {
    margin                : 0 !important;
    padding               : 0 !important;
    border                : 0 !important;
}
#urlbar {
    margin                : 0 !important;
    padding               : 0 !important;
    border                : 1 !important;
}
 
/* Eliminate the throbber and its annoying movement: */
#throbber-box {
    display               : none !important;
}
 
/* Eliminate the printer button: */
#print-button {
    display               : none !important;
}
 
/* Eliminate the search button: */
#search-button {
    display               : none !important;
}
 
/* Eliminate the go button: */
#go-button {
    display               : none !important;
}
 
/* Shrink tab titles */
.tabbrowser-tabs .tab-text {
    font-size             : 80% !important;
}
 
/*
  The  dropdown address and autocomplete windows are grey.
  To make them match better with the URL field and look more like 4.x:
*/
 
/*  URL dropdown box  */
#ubhist-popup {
    background            : white                 !important;
    border                : 1px solid black       !important;
    padding               : 0px                   !important;
}
 
/*  autocomplete text field  */
.textfield-popup {
    background            : white                 !important;
    border                : 1px solid black       !important;
}
 
#ubhist-popup > .popup-internal-box, .textfield-popup > .popup-internal-box {
    border-left           : 1px solid white       !important;
    border-top            : 1px solid white       !important;
    border-right          : 1px solid white       !important;
    border-bottom         : 1px solid white       !important;
}