mozdev.org

aboutconfig

resources:
Other Stuff

This page collects assorted mozilla related stuff that needs a place online.

Styling microsummaries

screenshot By styling microsummaries according to their changing content it is possible to replace several status reporting extensions and to save statusbar real estate. Creating those microsummaries yourself is much easier than developping extensions. As an example, let's see how one creates a microsummary replacement for the tinderstatus extension.

First, if the web site in question (in our case http://tinderbox.mozilla.org/showbuilds.cgi?) does not provide any microsummary we need to find or write a generator. The one I found had problems parsing some of the tinderbox pages and did not quite follow the suggested format but it got me started. See the microsummary wiki for information about generators. You can either download my microsummary generator for tinderbox status pages or it directly from here.

Next, create a Tinderbox folder in your personal bookmarks toolbar and add bookmarks for your favourite tinderboxens, using the microsummaries.

Finally, style the contents of the Tinderbox folder by putting something like the following CSS in userChrome.css in your profile's chrome folder:

/* Color microsummaries for tinderbox */
toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="open"] > .menu-iconic-left {
  background: url(tree-open.png) no-repeat  3px 2px!important;
}

toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="closed"] > .menu-iconic-left {
  background: url(tree-closed.png) no-repeat  3px 2px!important;
}

toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="(OK)"] > .menu-iconic-left {
  background-color: #11DD11 !important;
}

toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="orange)"] > .menu-iconic-left {
  background-color: #FFAA00 !important;
}

toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="burning"] > .menu-iconic-left {
  background-color: #EE0000 !important;
}

toolbarbutton.bookmark-item[label="Tinderbox"] .menu-iconic-icon {
  visibility: hidden !important;
}

The two images for open tree open and closed tree closed tree state are taken from the tinderstatus extension and they need to go into your profile's chrome folder as well.

A few things to note:

The aboutconfig project can be contacted through the mailing list or the member list.
Copyright © 2000-2014. All rights reserved. Terms of Use & Privacy Policy.