| OLD | NEW |
| 1 <!-- ================= Events view =================== --> | 1 <!-- ================= Events view =================== --> |
| 2 | 2 |
| 3 <!-- Filter Box: This the top bar which contains the search box. --> | 3 <!-- Filter Box: This the top bar which contains the search box. --> |
| 4 <div id=filterBox> | 4 <div id=events-view-filter-box> |
| 5 <table width=100%> | 5 <table width=100%> |
| 6 <tr> | 6 <tr> |
| 7 <td width=1%>Filter:</td> | 7 <td width=1%>Filter:</td> |
| 8 <td width=98%><input type="search" incremental id=filterInput /></td> | 8 <td width=98%><input type="search" incremental id=filterInput /></td> |
| 9 <td width=1% id=filterCount>(1 of 34)</td> | 9 <td width=1% id=filterCount>(1 of 34)</td> |
| 10 </tr> | 10 </tr> |
| 11 </table> | 11 </table> |
| 12 </div> | 12 </div> |
| 13 <!-- Events Box: This the panel on the left which lists the sources --> | 13 <!-- Events Box: This the panel on the left which lists the sources --> |
| 14 <div id=eventsBox> | 14 <div id=events-view-source-list> |
| 15 <table id=eventsListTable cellspacing=0 cellpadding=0 width=100%> | 15 <table id=events-view-source-list-table cellspacing=0 cellpadding=0 width=100%
> |
| 16 <thead> | 16 <thead> |
| 17 <tr> | 17 <tr> |
| 18 <td><input type=checkbox id=selectAll /></td> | 18 <td><input type=checkbox id=selectAll /></td> |
| 19 <td id=sortById>ID</td> | 19 <td id=sortById>ID</td> |
| 20 <td id=sortBySource>Source</td> | 20 <td id=sortBySource>Source</td> |
| 21 <td id=sortByDescription width=99%>Description</td> | 21 <td id=sortByDescription width=99%>Description</td> |
| 22 </tr> | 22 </tr> |
| 23 </thead> | 23 </thead> |
| 24 <!-- Events table body: This is where request rows go into --> | 24 <!-- Events table body: This is where request rows go into --> |
| 25 <tbody id=eventsListTableBody></tbody> | 25 <tbody id=events-view-source-list-tbody></tbody> |
| 26 </table> | 26 </table> |
| 27 </div> | 27 </div> |
| 28 <!-- Action Box: This is a button bar along the bottom --> | 28 <!-- Action Box: This is a button bar along the bottom --> |
| 29 <div id=actionBox> | 29 <div id=events-view-action-box> |
| 30 <input type=button value="Delete selected" id=deleteSelected /> | 30 <input type=button value="Delete selected" id=deleteSelected /> |
| 31 <input type=button value="Delete all" id=deleteAll /> | 31 <input type=button value="Delete all" id=deleteAll /> |
| 32 </div> | 32 </div> |
| 33 <!-- Splitter Box: This is a handle to resize the vertical divider --> | 33 <!-- Splitter Box: This is a handle to resize the vertical divider --> |
| 34 <div id=splitterBoxForEventDetails class=splitterBox></div> | 34 <div id=splitterBoxForEventDetails class=vertical-splitter></div> |
| 35 <!-- Details box: This is the panel on the right which shows information --> | 35 <!-- Details box: This is the panel on the right which shows information --> |
| 36 <div id=detailsTabHandles> | 36 <div id=events-view-details-tab-handles> |
| 37 <table class=tabSwitcher cellspacing=0> | 37 <table class=events-view-tab-switcher cellspacing=0> |
| 38 <tr> | 38 <tr> |
| 39 <th id=detailsLogTab>Log</th> | 39 <th id=detailsLogTab>Log</th> |
| 40 <td class=tabSwitcherSpacer> </td> | 40 <td> </td> |
| 41 <th id=detailsTimelineTab>Timeline</th> | 41 <th id=detailsTimelineTab>Timeline</th> |
| 42 </tr> | 42 </tr> |
| 43 </table> | 43 </table> |
| 44 <div class=tabSwitcherLine></div> | 44 <div class=events-view-tab-switcher-line></div> |
| 45 </div> | 45 </div> |
| 46 <div id=detailsLogBox></div> | 46 <div id=detailsLogBox></div> |
| 47 <div id=detailsTimelineBox></div> | 47 <div id=detailsTimelineBox></div> |
| OLD | NEW |