UI Improvements for TestLink’s Vertical Step Layout

Posted on by

I have previous posts on several improvements which drastically improved my team’s ability to use TestLink:

As we began really testing in earnest, we found that the “horizontal” test case layout we had been using was limiting in several ways.  First, when the expected results was a collection of logs rather than a text description of behavior, it became a labor to find the relevant bits in the long log lines.  Second, some types of expected results would cause the results cell to take up as much horizontal space as possible, which squashed the “actions” cell.  On more than one occasion I had to copy the actions to a text file so that I could read them in a meaningful manner.

Update 2012-05-08: There is a usable-with-the-patch-command patch available that incorporates all of these changes and more. See the README at the base of the github repo for more details on what’s in that patch.

Fortunately there is also a “vertical” test case layout.  We recently switched to using this and so far it solves our problem.  Unfortunately I had to reimplement all of the items from the links above.  The diffs below are the changes I made to our files to get the desired changes.  Possible items of interest:

  • The diffs below assume that the changes from the previous blog posts have been made.  This affects the line numbers in the diffs, as well as things like the existence of the CSS file and its contents.
  • I never really liked the alternating BG color behind the steps, but it was the best solution in the horizontal view.  In the vertical view I alternated the colors in the empty gutter cells to the left of the action/result rows.  Since there’s no text in those cells, it allowed me to use darker, more contrasting colors.
Index: gui/themes/default/css/custom.css
===================================================================
--- gui/themes/default/css/custom.css   (revision 241)
+++ gui/themes/default/css/custom.css   (revision 242)
@@ -6,6 +6,14 @@
        background-color:       #CCCCCC;
 }

+.row_color_3 {
+       background-color:       #555555;
+}
+
+.row_color_4 {
+       background-color:       #AAAAAA;
+}
+
 div.c_actions, div.c_expected_results {
        font-family: 'Courier New', Courier, monospace;
 }

Index: gui/templates/testcases/inc_steps.tpl
===================================================================
--- gui/templates/testcases/inc_steps.tpl       (revision 241)
+++ gui/templates/testcases/inc_steps.tpl       (revision 242)
@@ -91,14 +91,16 @@
        {/if}
        {foreach from=$steps item=step_info}
        <tr>
-               <th width="25px"><nobr>{$inc_steps_labels.step_number}
+               <th width="25px"><nobr>
                <span class="order_info" style='display:none'>
                <input type="text" name="step_set[{$step_info.id}]" id="step_set_{$step_info.id}"
                       value="{$step_info.step_number}"
                       size="{#STEP_NUMBER_SIZE#}"
                       maxlength="{#STEP_NUMBER_MAXLEN#}">
                {include file="error_icon.tpl" field="step_number"}
-               </span>{$step_info.step_number}</nobr></th>
+               </span><span {if $edit_enabled} style="cursor:pointer;"
+        onclick="launchEditStep({$step_info.id})"{/if}
+               >{$inc_steps_labels.step_number} {$step_info.step_number}</span></nobr></th>
                <th>{$inc_steps_labels.step_actions}</th>
                {if $session['testprojectOptions']->automationEnabled}
                <th>{$inc_steps_labels.execution_type_short_descr}:
@@ -111,10 +113,8 @@
                {/if}
        </tr>
        <tr>
-               <td>&nbsp;</td>
-               <td colspan="2" {if $edit_enabled} style="cursor:pointer;"
-                   onclick="launchEditStep({$step_info.id})"{/if}
-                   style="padding: 0.5em">{$step_info.actions}</td>
+               <td class="{cycle values="row_color_3,row_color_3,row_color_3,row_color_4,row_color_4,row_color_4"}">&nbsp;</td>
+               <td colspan="2" style="padding: 0.5em"><div>{$step_info.actions}</div></td>
                {if $edit_enabled}
                <td class="clickable_icon">
                        <img style="border:none;cursor: pointer;"
@@ -133,13 +133,13 @@
                {/if}
        </tr>
        <tr>
-               <th style="background: transparent; border: none"></th>
+               <td class="{cycle values="row_color_3,row_color_3,row_color_3,row_color_4,row_color_4,row_color_4"}"></td>
                <th colspan="2">{$inc_steps_labels.expected_results}</th>
        </tr>
-       <tr {if $edit_enabled} style="cursor:pointer;"
-           onclick="launchEditStep({$step_info.id})"{/if}>
-           <td>&nbsp;</td>
-               <td colspan="2" style="padding: 0.5em 0.5em 2em 0.5em">{$step_info.expected_results}</td>
+       <tr>
+           <td class="{cycle values="row_color_3,row_color_3,row_color_3,row_color_4,row_color_4,row_color_4"}">&nbsp;</td>
+               <td colspan="2" style="padding: 0.5em 0.5em 2em 0.5em">
+                       <div>{$step_info.expected_results}</div></td>
        </tr>
        {/foreach}
 {/if}

Index: gui/templates/testcases/tcStepEdit.tpl
===================================================================
--- gui/templates/testcases/tcStepEdit.tpl      (revision 241)
+++ gui/templates/testcases/tcStepEdit.tpl      (revision 242)
@@ -223,7 +223,7 @@
   {else} {* Vertical layout *}
                {foreach from=$gui->tcaseSteps item=step_info}
                        <tr id="step_row_{$step_info.step_number}">
-                               <th width="20">{$args_labels.step_number} {$step_info.step_number}</th>
+                               <th width="20"><a href="{$hrefEditStep}{$step_info.id}">{$args_labels.step_number} {$step_info.step_number}</a></th>
                                <th>{$labels.step_actions}</th>
                                {if $session['testprojectOptions']->automationEnabled}
                                        {if $step_info.step_number == $gui->step_number}
@@ -244,24 +244,24 @@
                                {/if}
                        </tr>
                        <tr>
-                               <td>&nbsp;</td>
+                               <td class="{cycle values="row_color_3,row_color_3,row_color_3,row_color_4,row_color_4,row_color_4"}">&nbsp;</td>
                                {if $step_info.step_number == $gui->step_number}
                                        <td colspan="2">{$steps}</td>
                                {else}
-                                       <td colspan="2"><a href="{$hrefEditStep}{$step_info.id}">{$step_info.actions}</a></td>
+                                       <td colspan="2"><div>{$step_info.actions}</div></td>
                                {/if}
                        </tr>
                        <tr>
-                               <th style="background: transparent; border: none"></th>
+                               <td class="{cycle values="row_color_3,row_color_3,row_color_3,row_color_4,row_color_4,row_color_4"}"></td>
                                <th colspan="2">{$labels.expected_results}</th>
                        </tr>
                        <tr>
-                               <td>&nbsp;</td>
+                               <td class="{cycle values="row_color_3,row_color_3,row_color_3,row_color_4,row_color_4,row_color_4"}">&nbsp;</td>
                                {if $step_info.step_number == $gui->step_number}
                                        <td colspan="2">{$expected_results}</td>
                                {else}
                                        <td colspan="2" style="padding: 0.5em 0.5em 2em 0.5em">
-                                       <a href="{$hrefEditStep}{$step_info.id}">{$step_info.expected_results}</a></td>
+                                       <div>{$step_info.expected_results}</div></td>
                                {/if}
                        </tr>
                {/foreach}

Leave a Reply

Your email address will not be published. Required fields are marked *