close
Skip to content

Introduce themable colors for resolved and unresolved comments - #145230

Merged
Alex Ross (alexr00) merged 4 commits into
microsoft:mainfrom
hermannloose:comment-state-visualization
Mar 17, 2022
Merged

Introduce themable colors for resolved and unresolved comments#145230
Alex Ross (alexr00) merged 4 commits into
microsoft:mainfrom
hermannloose:comment-state-visualization

Conversation

@hermannloose

Copy link
Copy Markdown
Contributor

Implementation proposal for #127473.

@alexr00 Alex Ross (alexr00) self-assigned this Mar 16, 2022
@alexr00 Alex Ross (alexr00) added this to the March 2022 milestone Mar 16, 2022
@ghost

Deleted user (ghost) commented Mar 16, 2022

Copy link
Copy Markdown

CLA assistant check
All CLA requirements met.

@hermannloose
Hermann Loose (hermannloose) marked this pull request as ready for review March 16, 2022 16:42

@alexr00 Alex Ross (alexr00) left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks and works great! I left a few comments, but I intend to push changes to address them today so that I can merge this before we start our endgame next week.

After our endgame week we'll do a UX review, try to get feedback from other extension authors, and work towards finalizing the API.

}

set state(newState: vscode.CommentThreadState) {
this._state = newState;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somewhere in this file we need to have a call to checkProposedApiEnabled, probably in set state to enforce our API proposal mechanism.

const COMMENT_SCHEME = 'comment';


export const resolvedCommentBorder = registerColor('resolvedComment.border', { dark: Color.fromHex('#c5c5c5'), light: Color.fromHex('#555'), hc: contrastBorder }, nls.localize('resolvedCommentBorder', 'Color of borders and arrow for resolved comments.'));

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm leaning towards calling these 'comments.resolved.border' and 'comments.unresolved.border', respectively.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for myself for later: we might need to registerThemingParticipant.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

registerThemingParticipant is not needed because you're using a CSS variable 👌

const commentThreadStateColorVar = '--comment-thread-state-color';

function getCommentThreadStateColor(thread: languages.CommentThread, theme: IColorTheme): Color | undefined {
const colorId = thread.state !== undefined ? commentThreadStateColors.get(thread.state) : undefined;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the thread.state is undefined, we should use the peekViewBorder.

@alexr00 Alex Ross (alexr00) left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made the changes I commented on so that we can merge this before our endgame starts. Thank you for the PR!

@alexr00

Copy link
Copy Markdown
Member

There's an outage that's preventing me from merging this right now, but I will merge it when that's over.

const colorId = thread.state !== undefined ? commentThreadStateColors.get(thread.state) : undefined;
return colorId !== undefined ? theme.getColor(colorId) : undefined;
function getCommentThreadWidgetStateColor(thread: languages.CommentThread, theme: IColorTheme): Color | undefined {
return getCommentThreadStateColor(thread, theme) ?? theme.getColor(peekViewBorder);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this maybe just be inlined in getCommentThreadStateColor()? Having two separate methods leads to slightly confusing naming for me, which seems like a code smell, especially since we won't use getCommentThreadStateColor() independently of getCommentThreadStateColor() from what I can see. Not a very strong opinion though.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I split it out in preparation for including the color in the "Comments" view. There, we will not use the peek view color, but I do expect that we still use the same resolved/unresolved colors.

@alexr00
Alex Ross (alexr00) merged commit f6e8ee9 into microsoft:main Mar 17, 2022
@hermannloose

Copy link
Copy Markdown
Contributor Author

I just realized I had forgotten to upload the local changes I had made yesterday to base the unresolved colors on editorWarningBackground, sorry for causing the extra work. 😅

@github-actions github-actions Bot locked and limited conversation to collaborators May 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants