Details
-
Enhancement
-
Resolution: Obsolete
-
Major
-
None
Description
Add extra CSS classes to the DOM tree for a tab header rendered by DefaultTabLayout. They won't affect the L&F atm, but make QA's life a lot easier.
Currently the DOM tree for one tab header comes in two flavors:
None closable tabs
<div class="gwt-TabLayoutPanelTab BB"> <div class="gwt-TabLayoutPanelTabInner"> <div title="Log Files" tabindex="0" role="tab" class="hal-TabLayout-tab">Log Files</div> </div> </div>
Closable tabs
<div class="gwt-TabLayoutPanelTab BB gwt-TabLayoutPanelTab-selected"> <div class="gwt-TabLayoutPanelTabInner"> <div class="hal-TabLayout-tab" aria-selected="true"> <span title="server.log" tabindex="0" role="tab">server.log</span> <span class="gwt-InlineHTML"><i class="icon-remove hal-TabLayout-close"></i></span> </div> </div> </div>
Add the following CSS classes:
- "content-tab-label" class is a must
- "content-tab" class would be nice for the sake of consistency.
- It would also help to move the title attribute from content-tab-label to content-tab (though I am not sure whether it is possible form usability point of view)
Thus changing none closable tabs to
<div class="gwt-TabLayoutPanelTab BB content-tab" title="Log Files"> <div class="gwt-TabLayoutPanelTabInner"> <div class="content-tab-label" tabindex="0" role="tab" class="hal-TabLayout-tab">Log Files</div> </div> </div>
and closable tabs to
<div class="gwt-TabLayoutPanelTab BB content-tab" title="server.log"> <div class="gwt-TabLayoutPanelTabInner"> <div class="hal-TabLayout-tab"> <span class="content-tab-label" tabindex="0" role="tab">server.log</span> <span class="gwt-InlineHTML"><i class="icon-remove hal-TabLayout-close"></i></span> </div> </div> </div>
