extensions: add decorations column background color

Created by: taras-yemets

Adds background to decoration columns in the blob view.

Design

Dark	Light

Note on implementation

Extra vertical padding added to .blob and table to improve code readability was replaced by adding .top-spacer and .bottom-spacer to the first and last table rows cells. It was made to make the column background cover the whole column height including mentioned vertical spacing.

Problem	Solution

These cells spacers were given negative margins to overflow the table cell padding and the same background as the hosting table cell in its normal state (not selected or highlighted). This was made to avoid highlighting (on hover or line selection) the whole first and last rows which are taller than the rest rows.

Problem	Solution

I'm not a big fan of adding elements just for styling purposes, but I couldn't come up with a more elegant solution. Any feedback/suggestions are highly appreciated!

Test plan

• sg start web-standalone
• sideload git-extras extension
• enable enableExtensionsDecorationsColumnView experimental feature
• enable file blame decorations and ensure it has background specified in design for both light and dark themes

App preview:

• Web
• Storybook

Check out the client app preview documentation to learn more.