Change:
I was exploring ways to improve the PR experience in VS Code and one of the ideas involved updating the glyph area for comments. Currently we show a gray bar and a unicode and that don't look very pretty. ! A couple of things I explored: Moving glyph area to the left of line numbers. This helps create separation between between the scm indicators and a clear area for adding comments. Adding button for adding and view comments. This follows a similar pattern on GitHub for reviewing changes. Hiding diff chunk areas. This reduces the visual noise and I think most people will be commenting on changed lines in the PR as opposed to lines that are not related Adding color to the and changes to look visually pleasing ! Unsure who should I assign to so assigning to and for now
Some additional feedback from the team: We might still need the indicator for comment areas, particularly when viewing files with changes in review mode where the diffs are not present ! We could also surface the "add comment" button on line hover to increase discoverability
I agree that we will likely still need to show the range, but let's improve the leave-a-comment and there's-a-comment decorations.
Here's what I'm thinking: ! It uses the comment codicon for lines with a comment thread. Keeps the existing + for add Makes them both look a little more clickable but making them more square and giving them rounded corners. and what do you think? I didn't add any color for now and I kept everything to the right of the line numbers still.
this is looking great, love that we can have codicon support in the comments! I know you mentioned you hadn't any color, is that something that you'd be open for us to add? I did a quick mockup that shows an alternate styling: <img width="314" alt="CleanShot 2022-08-08 at 08 57 41 src="https://user-"
I didn't add color because I thought the blue was a bit too strong, but I really like the color in this mock up. I'll add it and merge the change! I also see that you're using the codicon +. I'll switch to that too.
Also updated the multiline add: !

Discussion:
import { themeColorFromId } from 'vs/platform/theme/common/themeService'; import { IEditorDecorationsCollection } from 'vs/editor/common/editorCommon'; <del> const overviewRulerDefault = new Color(new RGBA(197, 197, 197, 1)); </del> <ins> const overviewRulerDefault = new Color(new RGBA(65, 70, 80, 1)); </ins> export const overviewRulerCommentingRangeForeground = registerColor('editorGutter.commentRangeForeground', { dark: overviewRulerDefault, light: overviewRulerDefault, hcDark: overviewRulerDefault, hcLight: overviewRulerDefault }, nls.localize('editorGutterCommentRangeForeground', 'Editor gutter decoration color for commenting ranges.'));

if (options.get(EditorOption.folding) && options.get(EditorOption.showFoldingControls) !== 'never') { lineDecorationsWidth -= 16; } <del> lineDecorationsWidth += 9; </del> <ins> lineDecorationsWidth += 14; </ins> extraEditorClassName.push('inline-comment'); this.editor.updateOptions({ extraEditorClassName: extraEditorClassName.join(' '),

} .monaco-editor .comment-range-glyph { <del> margin-left: 5px; </del> <ins> margin-left: 10px; </ins> width: 4px !important; cursor: pointer; z-index: 10;

width: 9px; left: -6px; z-index: 10; <del> color: black; </del> <ins> color: var(--vscode-editor-foreground); </ins> text-align: center; display: flex; flex-direction: row;

.monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before, .monaco-editor .margin-view-overlays .comment-range-glyph.comment-diff-added.line-hover:before { <del> content: "+"; </del> <ins> content: "ea60"; font-family: "codicon"; border-radius: 3px; width: 19px !important; margin-left: -5px; padding-top: 1px; padding-left: 1px; </ins> } .monaco-editor .comment-range-glyph.comment-thread {

} .monaco-editor .comment-range-glyph.comment-thread:before { <del> content: "◆"; font-size: 10px; </del> <ins> content: "ea6b"; font-family: "codicon"; font-size: 14px; width: 19px !important; </ins> line-height: 100%; <ins> border-radius: 3px; </ins> z-index: 20; <ins> margin-left: -5px; </ins> } <del> .monaco-editor.inline-comment .margin-view-overlays .folding { margin-left: 7px; </del> <ins> .monaco-editor.inline-comment .margin-view-overlays .codicon-folding-expanded, .monaco-editor.inline-comment .margin-view-overlays .codicon-folding-collapsed { margin-left: 13px; </ins> } .monaco-editor.inline-comment .margin-view-overlays .dirty-diff-glyph { <del> margin-left: 14px; </del> <ins> margin-left: 23px; </ins> }