Add a 'detailshown' css class to a Grid row when it is showing the row details

Vaadin 8.0.6. Currently, when there is the 'details' component shown for a Grid row (the Grid.setDetailsGenerator() API), no CSS class is added to the appropriate tr element and thus it is hard to do custom theming for rows with details. For example, it is often useful to have a small 'expand' arrow there, so that the user clearly sees that the row details can be shown for that particular row.

Currently the tr contents is as follows:

<tr class="v-grid-row v-grid-row-focused v-grid-row-has-data v-grid-row-selected" style="width: 919.5px; transform: translate3d(0px, 0px, 0px);">
  <td class="v-grid-cell v-grid-cell-focused" colspan="1" style="height: 33px; width: 859.5px;">asdsad</td>
  <td class="v-grid-cell" colspan="1" style="height: 33px; width: 60px;"><button type="button" class="v-nativebutton"><span class="v-icon v-icon-close_small" style="font-family: Vaadin-Icons;"></span></button></td>
</tr>

It would be great if the tr element contained a CSS class of detailshown when the row is showing its details; also maybe the row (or the Grid element itself) could also contain the hasdetails class.

Start from the Grid.setDetailsGenerator() API and trace how the Grid renders the row when its details component is shown. Verify the rendered DOM and add the requested detailshown class only while details are visible; also determine whether hasdetails is in scope from the issue discussion.