Allow user to toggle inline comment margin #1568

jcansdale · 2018-03-28T08:17:17Z

What this PR does

New horizontal editor margin is hidden behind feature flag
Adds a margin to the editor window
Clicking on checkbox (or filename/comment bubble) toggles the comment margin
Clicking on view x comments navigates to PR file changes
If there are no PR file comments it will show view changes
If there are no PR file changes the margin won't appear
Right clicking on solution file with active PR branch shows View Changes in # PR button
Right clicking a diff view opened using View Changes in Solution slows the option Open File in Code View. This will open the diff pane in a new code view.
- This also works with the diff view opened using the default Team Explorer - Changes action Compare with Unmodified...
Clicking View Changes in # PR navigates to equivalent line on PR diff view
Clicking View Changes in # PR on file without changes in PR shows warning on status bar

Metrics

NumberOfPullRequestFileMarginToggleInlineCommentMargin - When the user toggles the checkbox to show/hide comment margin
NumberOfPullRequestFileMarginViewChanges - When user clicks on view changes/view comments link
NumberOfNavigateToPullRequestFileDiff - When user navigates from editor to PR file diff via the GitHub.GoToSolutionOrPRFile command
NumberOfPRDetailsNavigateToEditor - When user navigates from PR file diff to editor via the GitHub.GoToSolutionOrPRFile command (NOTE: this counter existed before)

ExecuteToggleInlineCommentMarginCommand - When the GitHub.ToggleInlineCommentMargin command is executed (via the checkbox or executing command directly)

Technical notes

When opening a comparison window, the DifferenceViewerOptions.ScrollToFirstDiffId global option will be temporarily set to false (see Find best way to open diff view without scrolling to first diff #1631). This lets me immediately set the equivalent caret position when navigating to the the diff view.

Todo

Add metrics
- Add counter for Open File in Code View actions
- Add counter for executing GoToSolutionOrPullRequestFileCommand
Make View File show the comment margin
Fix issue where diff view moves to first change. see:

Issues

The comments margin doesn't always appear when the comment bubble icon is clicked
- Same issue when comments margin is always on
The UI appears on all text view types (including diff view)

Initial thoughts

My initial impression is that this UI element would be a great opportunity to surface other important information about the current PR. For example:

The PR number could be shown there
How many (non-inline) comments comments there are and quick navigation to them
Show the files that are part of the PR and allow navigation to them
Navigate to any of the inline comments on the current PR file
Show if there are any unread comments on the PR and notify when they arrive

Lots of opportunities to show things there would be useful to the user and make this UI element more discoverable (e.g. showing the PR number would be handy for navigation and give context to the comment bubble).

Related UI

People will rarely see the following UI. They need to be using an Enterprise/Professional version of VS and be editing a non-source file. This is when editing our GitHub.VisualStudio.vsct file:

When the user clicks on one of the sections, a bubble pops up with a scrollable list of sub-items with an automatic preview of each.

We could do a similar thing, except with a list of inline comments in the file and a preview of each comment. When the user clicks on the comment they're interested it, it would navigate to the inline comment in the source.

Similarly we could have a list of PR review comments, with a preview and navigation to the GitHub PR review UI.

Lastly when the user clicks on the PR number, there could be a list of changed files in the PR and the number of inline comments they have displayed. Clicking in the file would navigate to the PR file diff or editor.

This would give context for the comment margin toggle switch (which I think is too minimal/subtle at the moment).

Tackle in another PR (#1671)

Make comments appear on View File (margin appears but no comments 😕)
Make comments appear on RHS View Changes in Solution

Fixes #1565

This toggles the GlyphMargin on and off. It will be changed to toggle the comments margin.

This option controls InlineCommentMargin visibility.

Move implementation out of GlyphMargin.

No need to pass IWpfTextViewHost. Renamed marginVisual to marginGrid.

We're only really interested in the TextView.

Moved async initialization out of CommentsMarginViewModel.

Show the PR file name on margin.

They are now part of the checkbox lable.

We don't want live taggers running and monitoring live files when margin isn't visible.

Only monitor live file when InlineCommentMarginEnabled.

We only need live updates is the margin is actually visible, not simply if it is enabled.

Increment NumberOfPullRequestFileMarginToggleInlineCommentMargin when checkbox is toggled. Increment NumberOfPullRequestFileMarginViewChanges when view changes/comments is clicked.

This allows navigation from View Changes in Solution to Code View. It also allows navigation from the default Team Explorer changes diff view (Compare with Unmodified...) to code view.

Add metric for navigating from editable diff (e.g. `View Changes in Solution`) to code view.

Add metric for number of times ExecuteGoToSolutionOrPullRequestFileCommand is executed.

Move NumberOfPRDetailsNavigateToEditor next to related metrics and comment that it should be renamed to NumberOfNavigateToEditor.

meaghanlewis · 2018-05-14T17:47:50Z

Hey @jcansdale here are a few things I noticed today:

The command GitHub.ToggleInlineCommentMargin is not actually toggling the comment margin for me. Although every time I execute the command the metric: ExecuteToggleInlineCommentMarginCommand increments just fine.
Some of the metrics don't seem to be incrementing correctly.

NumberOfNavigateToCodeView is always 0 even after I select the option

NumberOfPullRequestFileMarginViewChanges is always 0 even after I click on the view comments link.

This is a bit more vague, but I've noticed that some metrics aren't incrementing regularly for: NumberOfPRDetailsNavigateToEditor, NumberOfNavigateToPullRequestFileDiff, or NumberOfPullRequestFileMarginToggleInlineCommentMargin. Instead when I perform those actions it appears to increment ExecuteGoToSolutionOrPullRequestFileCommand instead.

StanleyGoldman · 2018-05-14T20:33:53Z

Should it locate me to the comment when i click the "view comments" in the task bar?

jcansdale · 2018-05-15T09:35:37Z

@StanleyGoldman,

Should it locate me to the comment when i click the "view comments" in the task bar?

Good point. It doesn't locate you on the comment, it simply navigates to show changes in the PR (that happens to have x number of comments). The use can then view an already open comment or navigate to the next/previous comment.

Maybe, view changes in PR (x comments) would be clearer?

grokys

A few comments on the code, but this looks good for a beta feature. I find the toggle control slightly confusing at the moment, but I understand that this feature needs iterating on, so lets discuss that elsewhere.

grokys · 2018-05-15T09:20:58Z

src/GitHub.App/Services/PullRequestEditorService.cs

+            // HACK: We need to wait here for the inline comment tags to initialize so we can find the next inline comment.
+            // There must be a better way of doing this.
+            await Task.Delay(1500);
+            RaiseWhenAvailable(Guids.CommandSetString, PkgCmdIDList.NextInlineCommentId, param);


I thought this hack was no longer necessary with DifferenceViewerOptions.ScrollToFirstDiffId?

So did I! 😢 It seems there's another issue where the NextInlineCommentId depends on the comment margin tags having been updated in order to navigate to the next comment. Before the tags have been refreshed, this command is unavailable and it would crash when attempting to execute the command.

We should attempt to fix this in another PR.

grokys · 2018-05-15T09:27:52Z

src/GitHub.InlineReviews/Margins/InlineCommentMarginEnabled.cs

+{
+    [Export(typeof(EditorOptionDefinition))]
+    [Name(OptionName)]
+    public class InlineCommentMarginEnabled : ViewOptionDefinition<bool>


I've never used this API, so I'm missing something here, but the only thing that seems to be used from this class is OptionName. Do we need to create a subclass of ViewOptionDefinition if we only use the name? Why not use an instance of this class as they key when getting options?

By exporting ViewOptionDefinition we declare than a new options exists on the text views (and give it a default value). I probably shouldn't be using OptionName directly and should be importing the option and using the Key property. This gives us type information for the property.

I've changed OptionName to private and am using Key in the latest commit.

grokys · 2018-05-15T09:31:03Z

src/GitHub.InlineReviews/Views/CommentView.xaml

                              VerticalAlignment="Center"
-                              GotFocus="ReplyPlaceholder_GotFocus">
+                              GotFocus="ReplyPlaceholder_GotFocus"
+                              SpellCheck.IsEnabled="True">


Wasn't there another PR with this feature?

Well, there will be. I didn't try to sneak this one in, seriusly! ;-)

grokys · 2018-05-15T09:32:34Z

src/GitHub.VisualStudio/Commands/GoToSolutionOrPullRequestFileCommand.cs

+namespace GitHub.Commands
+{
+    [Export(typeof(IGoToSolutionOrPullRequestFileCommand))]
+    public class GoToSolutionOrPullRequestFileCommand : VsCommand, IGoToSolutionOrPullRequestFileCommand


Could we have a comment here (and on the interface) as it's not totally clear from the class name what this command will do.

Done. I hope it make sense. Let me know if it isn't clear.

By using Key we can take advantage of the option's type information.

No need to go through IGitHubServiceProvider.

Use InlineCommentTextViewOptions for typed editor option keys.

jcansdale · 2018-05-15T23:15:47Z

@meaghanlewis,

Some of the metrics don't seem to be incrementing correctly.

Thanks for the heads up! I don't understand why this is happening. 😕 I'll investigate more tomorrow.

jcansdale · 2018-05-16T11:18:31Z

@meaghanlewis,

The command GitHub.ToggleInlineCommentMargin is not actually toggling the comment margin for me. Although every time I execute the command the metric: ExecuteToggleInlineCommentMarginCommand increments just fine.

The GitHub.ToggleInlineCommentMargin command toggles an option on the current editor that determines whether the comment margin is visible in certain circumstances (the user is on a PR branch and editing a file that has changed in the PR).

When you execute GitHub.ToggleInlineCommentMargin from the Command Window, it will toggle this option on the command window itself. If you were to bind the command to a keyboard shortcut, you should find it works as expected (I've bound it to Alt+G, Alt+T).

meaghanlewis · 2018-05-17T22:58:21Z

@jcansdale it's still hard for me to understand what GitHub.ToggleInlineCommentMargin. I don't see it have any affect on whether the comment margin is visible or not when viewing a changed file on a PR (with the branch checked out). Could you show me perhaps?

meaghanlewis · 2018-05-17T23:01:04Z

Also, @sguthals and I were noticing that when enabling or disabling the feature flag, that a file (or files) need to be closed and reopened to actually see the options to toggle the inline comment margin. This is probably to be expected, and I'm sure users won't just be toggling the flag often, but just wanted to bring it up.

jcansdale · 2018-05-21T09:49:46Z

@meaghanlewis,

it's still hard for me to understand what GitHub.ToggleInlineCommentMargin. I don't see it have any affect on whether the comment margin is visible or not when viewing a changed file on a PR (with the branch checked out).

I think the confusion might be that it's a per-editor view setting, not a global show comments in the margin for all file setting. It is triggered when you click on the check box (when the horizontal margin is visible).

I made it that way because the horizontal margin is constructed per-editor view. It might make more sense for it to be a global show the editor margin setting. The checkbox would remain set when moving between PR files and executing GitHub.ToggleInlineCommentMargin would toggle the checkbox on and off. I think that would be a lot less confusing!

Also, @sguthals and I were noticing that when enabling or disabling the feature flag, that a file (or files) need to be closed and reopened to actually see the options to toggle the inline comment margin. This is probably to be expected, and I'm sure users won't just be toggling the flag often, but just wanted to bring it up.

Yes, that is by design. To make it dynamic, the margin would need to be loaded but hidden. I've made it so the switch completely disables this functionality. I got bitten by this once before when hidden functionality was causing issues.

jcansdale added 3 commits March 27, 2018 09:59

Add placeholder for comments margin icon

da0d120

Add a placeholder view-model

46a8ee4

Add placeholder enable in-line comments command

4a4ba04

jcansdale mentioned this pull request Mar 28, 2018

[spike] Feature inline comments in editor #1559

Closed

jcansdale added 2 commits April 11, 2018 09:46

Show how many comments there are on current document

93c6738

Prototype toggle margin using GlyphMargin

acb8a94

This toggles the GlyphMargin on and off. It will be changed to toggle the comments margin.

jcansdale force-pushed the fixes/1565-comments-margin-toggle branch from 08ca4e2 to acb8a94 Compare April 11, 2018 09:53

jcansdale added 17 commits April 11, 2018 13:03

Add InlineCommentMarginEnabled editor option

21ab556

This option controls InlineCommentMargin visibility.

Use ITextViewMargin.Enabled for margin visibility

420e5d1

Refactor InlineCommentMarginProvider into InlineCommentMarginFactory

8d05df8

Refactor InlineCommentMargin as proxy for GlyphMargin

9d32f08

Make InlineCommentMargin implement IWpfTextViewMargin

1c32373

Move implementation out of GlyphMargin.

Specify Width on GlyphMarginGrid

604446c

Always handle zoom

2eb9ab8

Pass IWpfTextView into GlyphMargin

51fee72

No need to pass IWpfTextViewHost. Renamed marginVisual to marginGrid.

Store IWpfTextView not IWpfTextViewHost

22655a9

We're only really interested in the TextView.

Allow margin to be toggled when dissabled by default

0eb5f1e

Bind CheckBox to InlineCommentMarginEnabled option

a491ca1

Don't show toggle margin on diff views

d09d9ac

Only enable toggle margin when changes in PR file

7ca8668

Moved async initialization out of CommentsMarginViewModel.

Update CommentsMargin when PR branch changes

b969949

Add navigation to next inline comment

389fcc0

Show the PR file name on margin.

Make the PR file name and comment icon clickable

96e9570

They are now part of the checkbox lable.

Position margin to right of ZoomControl

37963f6

jcansdale force-pushed the fixes/1565-comments-margin-toggle branch from 113f67a to 37963f6 Compare April 13, 2018 13:17

jcansdale added 3 commits April 16, 2018 16:21

Manage comment visibility from outside GlyphMargin

646a953

Add/remove tagger according to margin visibility

16d4e4f

We don't want live taggers running and monitoring live files when margin isn't visible.

Un/subscribe to live file depening on margin enabled

55772e2

Only monitor live file when InlineCommentMarginEnabled.

jcansdale changed the title ~~[Spike] Allow user to toggle inline comment margin~~ [wip] Allow user to toggle inline comment margin Apr 18, 2018

Subscribe to live file depending on margin visibility

c180861

We only need live updates is the margin is actually visible, not simply if it is enabled.

jcansdale added 9 commits May 11, 2018 11:36

Rename CommentsMargin V/M to PullRequestFileMargin

9418131

Make UsageTrackingCommand lazy load IUsageTracker

f5687c0

Factor out UsageTrackingCommand

7b4c565

Add metrics to PullRequestFileMargin

871bba1

Increment NumberOfPullRequestFileMarginToggleInlineCommentMargin when checkbox is toggled. Increment NumberOfPullRequestFileMarginViewChanges when view changes/comments is clicked.

Allow navigation from editable diff to code view

d0dd283

This allows navigation from View Changes in Solution to Code View. It also allows navigation from the default Team Explorer changes diff view (Compare with Unmodified...) to code view.

Merge branch 'master' into fixes/1565-comments-margin-toggle

d5ed33d

Add NumberOfNavigateToCodeView metric

2d70d9a

Add metric for navigating from editable diff (e.g. `View Changes in Solution`) to code view.

ExecuteGoToSolutionOrPullRequestFileCommand metric

44b048d

Add metric for number of times ExecuteGoToSolutionOrPullRequestFileCommand is executed.

NumberOfPRDetailsNavigateToEditor next to related

ebc07b5

Move NumberOfPRDetailsNavigateToEditor next to related metrics and comment that it should be renamed to NumberOfNavigateToEditor.

jcansdale mentioned this pull request May 15, 2018

Pull request file margin ideas (continued from #1568) #1661

Open

grokys approved these changes May 15, 2018

View reviewed changes

jcansdale added 6 commits May 15, 2018 12:03

Use InlineCommentMarginEnabled.Key not OptionName

d8256bd

By using Key we can take advantage of the option's type information.

Import Lazy<IPullRequestSessionManager> directly

78a2518

No need to go through IGitHubServiceProvider.

Add export for InlineCommentMarginEnabled

41ba0bf

Store keys in InlineCommentTextViewOptions

3d7d1c5

Use InlineCommentTextViewOptions for typed editor option keys.

Save SpellCheck.IsEnabled="True" for another PR

fb919dc

Add xmldoc comment for GoToSolutionOrPRFileCommand

12376fa

Merge branch 'master' into fixes/1565-comments-margin-toggle

694832e

jcansdale mentioned this pull request May 16, 2018

Some of the metrics don't seem to be incrementing correctly. #1670

Closed

jcansdale merged commit 6cf4a55 into master May 16, 2018

jcansdale deleted the fixes/1565-comments-margin-toggle branch May 16, 2018 11:31

grokys mentioned this pull request Aug 10, 2018

Inline comment box scrolls to top of page #1324

Open

Allow user to toggle inline comment margin #1568

Allow user to toggle inline comment margin #1568

Uh oh!

Conversation

jcansdale commented Mar 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this PR does

Metrics

Technical notes

Todo

Issues

Initial thoughts

Related UI

Tackle in another PR (#1671)

Uh oh!

meaghanlewis commented May 14, 2018

Uh oh!

StanleyGoldman commented May 14, 2018

Uh oh!

jcansdale commented May 15, 2018

Uh oh!

grokys left a comment

Choose a reason for hiding this comment

Uh oh!

grokys May 15, 2018

Choose a reason for hiding this comment

Uh oh!

jcansdale May 15, 2018

Choose a reason for hiding this comment

Uh oh!

grokys May 15, 2018

Choose a reason for hiding this comment

Uh oh!

jcansdale May 15, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

grokys May 15, 2018

Choose a reason for hiding this comment

Uh oh!

jcansdale May 15, 2018

Choose a reason for hiding this comment

Uh oh!

grokys May 15, 2018

Choose a reason for hiding this comment

Uh oh!

jcansdale May 15, 2018

Choose a reason for hiding this comment

Uh oh!

jcansdale commented May 15, 2018

Uh oh!

jcansdale commented May 16, 2018

Uh oh!

meaghanlewis commented May 17, 2018

Uh oh!

meaghanlewis commented May 17, 2018

Uh oh!

jcansdale commented May 21, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jcansdale commented Mar 28, 2018 •

edited

Loading

jcansdale May 15, 2018 •

edited

Loading