Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-6275

improve jelly development by indicating which jelly file rendered an element

    • Icon: New Feature New Feature
    • Resolution: Fixed
    • Icon: Major Major
    • core
    • None

      It's hard to tell what jelly file rendered any particular element on the page. I've got an idea that would make it easier to tell: append debugging information as a CSS class name to an html container tag. For instance, I've been looking at the tabBar that makes up the list of views on the hudson dashboard page. The tab bar is defined in core/src/main/resources/lib/layout/tabBar.jelly. To indicate this, add class="hudsondebug-lib-layout-tabBar" or something like that to the root tag in tabBar.jelly.

      Right now that looks like this:
      <table cellpadding="0" cellspacing="0" id="viewList">

      ... so after my proposed enhancement, the markup would read, instead:
      <table cellpadding="0" cellspacing="0" id="viewList" class="hudsondebug-lib-layout-tabBar">
      ....
      <td class="active hudsondebug-lib-layout-tab" rowspan="2">${name}</td>

      Using this method, we can add a nugget that tells us what source file rendered each html tag. The diligent front-end developer can then use firebug to look at the classes on a tag, and figure out what jelly file to go to.

      To figure out what is going on interactively, the developer can add a debug.css stylesheet that highlights jelly files that might be interesting:

      1. debug.css:
        hudsondebug-lib-layout-tabBar { background-color: red; }

        hudsondebug-lib-layout-tab

        { background-color: blue; }

      If a jelly file has more than one child of the <j:jelly> tag, then each child element would get the "class" for that source file added. In some cases this will apply multiple classes, when one tag is used in defining another tag. That's fine; just make a list. CSS allows multiple class names.
      <table class="hudson-debug-lib-layout-tabBar hudsondebug-model-View-viewTabs" ...>

      I bet that this is something that Kohsuke or Alan can code up quickly, such that it will be inserted automatically if a debug_jelly flag is set somewhere.

            Unassigned Unassigned
            bshine bshine
            Votes:
            1 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: