www/stuff.html

   1 <!-- ***************** INFO/NEWS *************** -->
   2 <div id="infoTabs">
   3 <div class="infoTab" id="other-stuff">
   4 <h5 class="infoHeader">Other Stuff</h5>
   5 <script type="text/javascript"><!--
   6 google_ad_client = "pub-5604756703943711";
   7 google_ad_width = 160;
   8 google_ad_height = 600;
   9 google_ad_format = "160x600_as";
  10 google_ad_type = "text_image";
  11 google_ad_channel ="9529252866";
  12 //--></script>
  13 <script type="text/javascript"
  14   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  15 </script>
  16 </div>
  17 </div>
  18
  19 <!-- MAIN CONTENT -->
  20 <h5 class="page-header"><a id="content" name="content">Stuff</a></h5>
  21
  22 <P>This page collects assorted mozilla related stuff that needs a place online.
  23
  24 <h6>Styling microsummaries</h6>
  25 <P> <img src="tinderbox.png" alt="screenshot" align=left hspace=10> By styling <a href="http://wiki.mozilla.org/Microsummaries">microsummaries</a>
  26 according to their changing content it is possible to replace several status reporting extensions
  27 and to save statusbar real estate. Creating those microsummaries yourself is much easier than developping extensions.
  28 As an example, let's see how one creates a microsummary replacement for the <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a>.
  29
  30 <P>
  31 First, if the web site in question (in our case <code>http://tinderbox.mozilla.org/showbuilds.cgi?</code>) does not provide any microsummary
  32 we need to find or write a generator. <a href="http://dietrich.ganx4.com/blog/?p=237">The one I found</a> had problems parsing some of the tinderbox pages
  33 and did not quite follow the suggested format but it got me started. See the <a href="http://wiki.mozilla.org/Microsummaries">microsummary wiki</a>
  34 for information about generators. You can either <a href="mozilla-tinderbox-microsummary.xml">download</a> my microsummary generator for
  35 tinderbox status pages or <button onclick="window.sidebar.addMicrosummaryGenerator('http://aboutconfig.mozdev.org/mozilla-tinderbox-microsummary.xml')">install</button> it directly from here.
  36
  37 <P>
  38 Next, create a <code>Tinderbox</code> folder in your personal bookmarks toolbar and add bookmarks for your favourite tinderboxens, using the microsummaries.
  39
  40 <P>
  41 Finally, style the contents of the <code>Tinderbox</code> folder by putting something like the following CSS in <code>userChrome.css</code> in
  42 your profile's <code>chrome</code> folder:
  43
  44 <br clear=left>
  45
  46 <code><pre>
  47 /* Color microsummaries for tinderbox */
  48 toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="open"] > .menu-iconic-left {
  49   background: url(tree-open.png) no-repeat  3px 2px!important;
  50 }
  51
  52 toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="closed"] > .menu-iconic-left {
  53   background: url(tree-closed.png) no-repeat  3px 2px!important;
  54 }
  55
  56 toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="(OK)"] > .menu-iconic-left {
  57   background-color: #11DD11 !important;
  58 }
  59
  60 toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="orange)"] > .menu-iconic-left {
  61   background-color: #FFAA00 !important;
  62 }
  63
  64 toolbarbutton.bookmark-item[label="Tinderbox"] menuitem[label~="burning"] > .menu-iconic-left {
  65   background-color: #EE0000 !important;
  66 }
  67
  68 toolbarbutton.bookmark-item[label="Tinderbox"] .menu-iconic-icon {
  69   visibility: hidden !important;
  70 }
  71
  72 </pre></code>
  73
  74 The two images for open <img src="tree-open.png" alt="tree open"> and closed  <img src="tree-closed.png" alt="tree closed"> tree state are taken from the <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a> and they need to go into your profile's <code>chrome</code> folder as well.
  75
  76 <P>A few things to note:
  77 <ul>
  78 <li> All the CSS above applies only to entries within the <code>Tinderbox</code> folder in your personal bookmarks toolbar. It does not apply to the entries in the bookmarks menu (intentionally), but it's easy to change this.
  79 <li> You see how the label of the microsummary bookmark menutitem is used to generate different markup depending on the state (content) of the bookmark.
  80 <li> Also note how the favicon is made invisible by hidding the <code>.menu-iconic-icon</code> so that the background image for <code>.menu-iconic-left</code> is shown. I cannot ovverride the favicon directly because an XBL binding is involved (maybe someone else can...).
  81 <li> Similarly one could change the text or background colour of the bookmark text by styling the <code>label</code> child of <code>menuitem</code>.
  82 <li> Disclaimer: In fact I like the very fine <a href="https://addons.mozilla.org/firefox/832/">tinderstatus extension</a>.
  83 Fortunately, its author is also &quot;the microsummary guy&quot; so replacing his extension by microsummaries should be OK :).
  84 </ul>