Skip to content

Git blame UI review improvements

Created by: jjinnii

UI review for issue #40615. Necessary to close #38377 (closed) :

Edge cases that @taras-yemets raised:

  • "Git blame column with Codecov line decorations line background on hover conflict (Loom). This kind of conflict may happen with any extension which changes line colors. Customers with enableLegacyExtensions experimental feature flag enabled are affected."
    • As this only impacts customers with the legacy extensions enabled and have to enable both CodeCov and blame, I think a minimal effort solution is best here. I think your first suggestion that blame highlight takes precedence over other extensions is sufficient, as it's our top-used extension based on our current data.
  • "There is a gap between the blame decoration and the popover. When there are multiple lines in a row with decorations and the user hovers over one of them and then tries to hover over the popover, they should move the cursor over the code area, but not over the blame column, as the previous line decoration will trigger opening its popover. Moving the cursor over the code area may trigger showing the code-intel popover, so we may end up with two popovers (Loom)."
    • This is less an edge case, but poor UX of how the blame popover interacts with the popover. I'm seeing that there's a latency in the blame popover disappearing when a user's cursor has moved outside of the blame column, which is why there's an overlap with the code intel popover. Is it possible for us to instantly close the blame popover if a user's cursor moves outside the blame column?

Additional UI feedback

  • The blame popover still looks large when used alongside the code intel popover. Having trouble inspecting the font sizes of the popover using the inspect tool ☹️ , could someone double-check the styling?
Screen Shot 2022-09-05 at 8 18 48 PM Screen Shot 2022-09-05 at 8 18 52 PM
  • You can also see in the above screenshots that the positioning of the popover is different from the code intel popover. The code intel popover is anchored directly above the hovered token, whereas our blame popover has an ambiguous relationship to the line being hovered. It's standard for popovers on Sourcegraph to be positioned directly alongside the content; could we adjust the positioning?
  • I've intentionally changed the font of the blame column from the font used for code to our body font family. Blame is content, not code, and it's more consistent with Github as well!
  • On a similar note on font, the row being hovered should transition to being Label/small-underline.
  • (Open to feedback on this) I transitioned to using absolute dates for better formatting, but open to feedback on this!

/cc @muratsu @jjinnii @ryankscott