Introducing Kiln Glazes

April 12th, 2011 by Tyler Hicks-Wright

One of the first FogBugz plugins available after the FogBugz Plugin API was released was the very handy BugMonkey plugin. I’ve had some fun tweaking FogBugz, like removing the time from date displays, reversing the order of bug events, and using BugMonkey to add syntax highlighting to BugMonkey. BugMonkey has helped a lot of people implement custom views or workflows that didn’t make sense as FogBugz features.

Meanwhile, Kiln has been growing as a product, and has reached the point where a level of customization makes sense. Of course, we had the Kiln API and Web Hooks, but those only addressed external tools. If you wanted to change the interface, you were limited to using Chrome or GreaseMonkey user scripts, like Kiln Hash by John Isaacks.

To alleviate that dependency, we are introducing Kiln Glaze, a port of BugMonkey to Kiln. To access Kiln Glazes, click the “My Settings” dropdown and select “Kiln Glazes”. Glaze is initially disabled, so a site administrator will have to click “Enable Glaze”. Once it is enabled, you will see a interface that is very similar to BugMonkey:

The syntax is also very similar to BugMonkey. There are single-line fields for name:, description:, author:, and version:. Following that are two multi-line fields, js: for any Javascript code and css: for any CSS styles. For example, John’s “Kiln Hash” Chrome extension is very easily converted into a Kiln Glaze:

name:        Changeset Hash
description: Shows the changeset ID for each changeset in a list.
author:      John Isaacks and Tyler Hicks-Wright
version:     1.0.0.0

js:
$('[id^=changesetList] tr').each(function () {
  var tr = $(this);
  var sid = tr.attr('sid');
  if(sid)
  {
    var first = $('<span>')
                    .addClass('csetHash')
                    .text(sid.substring(0,10));
    var rest = $('<span>')
                    .addClass('hashRest')
                    .text(sid.substring(10))
                    .hide();
    rest.appendTo(first);
    tr.find('td span.changesetDescription').append(first);
  }
});
$('.csetHash').hover(
  function(){
    $(this).find('.hashRest').css('display','');
  },
  function(){
    $(this).find('.hashRest').css('display','none');
  }
);

css:
.csetHash
{
  color: #777;
}

Which results in the changeset IDs being visible on each line: 

One note about Kiln Glazes: we do not consider our DOM or JavaScript to be part of a supported API, so it may be possible for element IDs or classes to change without warning. From our experience with BugMonkey, this is usually not much of an issue, since existing DOM and JavaScript does not change that often, but it is something to be aware of.

That said, have fun with Glaze, and if you come up with any that you think other people might be interested in, please post them to the Kiln StackExchange!