Refactor IDE project avatar/description header (top left tab) highlighting
Summary
Change it from relying on a single-HTML-element hover
highlighting to a different approach which will work when the avatar and description are in separate HTML elements.
Note that it is an option to simply remove the highlighting altogether, if that is an acceptable pragmatic incremental approach.
Background Hover Highlighting issues
The hover highlighting functionality for the Web IDE left sidebar was removed as part of making the left sidebar collapsible.
It was removed because restructuring of the HTML meant CSS hover
classes could no longer be used, and an alternative Javascript implementation introduced undesirable delays between hovering the header text and highlighting the icon, and vice-versa.
See a detailed description of the problems in this thread on the original MR
Current Status
We have now stepped back from the original non-incremental approach, and are taking an incremental approach to the collapsible sidebar as part of this epic
So, this issue was created to move the scope of making this work without undesirable delays.
And, since this is the only remaining un-solved technical issue (the rest of the sidebar collapsing logic already works on the original MR, albeit with some styling issues), we are doing this as the first item in the new incremental epic.
A branch containing the Javascript implementation has also been preserved on branch 22457-refactor-web-ide-collapsable-sidebar-with-js-header-highlight
for reference, for the possibility of reintroducing the same implementation and improving it to make it work without a delay.
See &2585 (closed) for more context on the incremental approach.