Function of extension-contributed buttons is not clear

[mrnugget]

I just noticed that on Sourcegraph.com the buttons above a file also show up as text:

See here: https://sourcegraph.com/github.com/sourcegraph/sourcegraph/-/blob/enterprise/cmd/frontend/internal/dotcom/productsubscription/subscriptions_db.go#L12:41

I don't think that's the intended behavior, since it doesn't show up on sourcegraph.sgdev.org: https://sourcegraph.sgdev.org/sourcegraph/enterprise@093a16521df58e6c49cf70e6a4832137e740265a/-/blob/enterprise/cmd/frontend/internal/dotcom/productsubscription/subscriptions_db.go

(@lguychard: I don't know who to assign this to, feel free to re-assign!)

[lguychard]

@mrnugget this the default styling of buttons contributed by extensions ("Blame" by sourcegraph/git-extras, "Discussions" by sourcegraph/code-discussions, "Owner" by sourcegraph/code-ownership). They're not displayed on sourcegraph.sgdev.org because these extensions aren't activated for your user profile on sgdev.

Did you not expect these buttons to be present (maybe you only expected them in the browser extension)? Or do you think they should be styled differently?

[mrnugget]

Did you not expect these buttons to be present (maybe you only expected them in the browser extension)? Or do you think they should be styled differently?

Hmm, yes, I would've expected them to be styled differently.

But I think what threw me off the most and made me suspect that this is a bug is that I've been clicking all three of them without anything happening:

(Just to be clear: I'm clicking on these buttons/links in the gif).

There is no feedback on

1. what is supposed to happen when I click on one
2. whether it worked or not
3. whether I need to click on something or not

[lguychard]

OK. For context:

• "Owner", "Blame" and "Discussions" are contributed by extensions.
• "Owner" is just a label (and is not styled as a link). It displays the code owner on hover. It would usually display it inline (eg. Owner: @mrnugget, or 3 owners), but this file happens to be in the special case where the name of the single owner is too long, so it's only displayed on hover. That label should probably read 1 Owner, though.
• "Blame" triggers the display of git blame decorations. Blame decorations are only shown on selected lines (the link title, shown on hover, is show/hide Git blame line annotations):
  
• "Discussions" triggers the display of inline code discussions if they exist (the link title is "show/hide inline discussions):
  
• The line wrapping & history icon buttons you also click on are stock and present on all code views (as are other icon buttons in that toolbar)
• Line wrapping only takes effect if the viewport is narrow enough (as it would in a normal editor):
  
• History is shown in a panel view at the bottom of the file:
  

Things that could've prevented confusion:

• A more complex tooltip than just a link title on buttons contributed by extensions, possibly showing which extension contributed the button, and linking to this extension's docs.
• Not displaying the "Discussions" button, or explicitly making it disabled, when there are no inline discussions to display on the current file.

Overarching issues:

• The display of contributed action items to the code view toolbar is, I feel, an unsolved UX/design problem. Too many contributed actions make the toolbar messy (especially in the browser extension). The current styling makes it non-obvious that the items are buttons, but making them look more "button-like" would be very awkward/ugly in the webapp with our stock button styles.
• This could be solved preferring to use the command palette, rather than contributed action items, but the command palette is not discoverable / non-intuitive for users.
• It is generally difficult to discover, from the UI, what was contributed by which extension, and why.

cc @christinaforney to put this on your radar as future improvements we should think about.

[mrnugget]

Thanks for this great reply, @lguychard 👏

* "Blame" triggers the display of git blame decorations. Blame decorations are only shown on selected lines (the link title, shown on hover, is `show/hide Git blame line annotations`):

I have to admit that I knew this (or: I realized it after clicking on a few things), but wanted to bring the point across that it's hard for a new user to make sense of this. Especially if they've used the "Blame" button on GitHub, where the whole layout changes as soon as you click on it.

[felixfbecker]

With the improvements I made in the past week I consider this solved ✅
There were a lot of individual issues raised in this thread, so I'll try to reiterate and address them all individually here to make sure I didn't miss any:

• Styling is inconsistent (they look like text).
  • I improved the general styling in Fix action bar design #9503 to make them stand out as buttons and added icons in Add icon to coverage button codecov/sourcegraph-codecov#48 and feat: add icon for blame toggle sourcegraph-git-extras#109.
  • I fixed the "pressed" state of the Discussions toggle in Add pressed property sourcegraph-code-discussions#21. Note though that discussions were always experimental and is not a feature we want to invest in further, so not the same bar for quality can be expected when this extension is installed by a user. It's not good of course to have this in the extension registry as something maintained by us and we will consider removing the extension too when we remove the rest of the code, but given it has to be manually installed I think this is not as big of a concern.
• Function of action items is not clear.
  • I think the proper way to communicate the function of action items is a tooltip. These were already there, so I looked at the specific tooltips we have for the action items mentioned:
    • Blame toggle: The tooltip didn't make it clear that it only works on selected lines. I made this explicit in the tooltip in fix: clarify that toggle only works on selected lines sourcegraph-git-extras#112 (this is configurable BTW with the setting git.blame.decorateWholeFile)
    • Discussions toggle: I think the tooltip is as good as we can do.
• Nothing happens when clicking the buttons.
  • There can always be situations where toggling some UI does not actually result in any immediately visual change beyond the visual feedback on the button. We could of course show an additional notification like "Blame toggled" or "Blame toggled, but there are no selected lines" etc., but I think that is too intrusive. I think this is fine if the tooltip communicates the function so that the state is intuitive. Addressing individual action items:
    • Blame toggle: I think this is intuitive now that the tooltip explains it only works on selected lines.
    • Discussions toggle: I think it is intuitive that nothing would happen upon toggling discussions when there are no discussions in the file. The pressed state was fixed (see above), so there is visual feedback now.
    • Code owners: This extension didn't have an action command defined, which is actually not valid according to our extension schema. I thought about the best way to fix this, and decided to give it an action that takes you to the resolved line of the CODEOWNERS file that sets the applied rule in feat: make action item jump to matching line sourcegraph-code-ownership#30
    • Line wrapping toggle: I think it's intuitive that this would not result in a visual change if none of the visible lines overflow.
    • History toggle: I confirmed this pops open the history panel correctly (I can't tell if this was actually clicked in the gif or what might have been wrong).