Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom tree hover vs native hover #106095

Closed
alexr00 opened this issue Sep 4, 2020 · 12 comments · Fixed by #108403
Closed

Custom tree hover vs native hover #106095

alexr00 opened this issue Sep 4, 2020 · 12 comments · Fixed by #108403
Assignees
Labels
insiders-released Patch has been released in VS Code Insiders tree-views Extension tree view issues under-discussion Issue is under discussion for relevance, priority, approach ux User experience issues
Milestone

Comments

@alexr00
Copy link
Member

alexr00 commented Sep 4, 2020

From @bpasero in #106010

Our custom hover is different from native hovers in the following ways:

  • the position is above while OS native experience seems to be below
  • the hover still appears very fast for me compared to the native Chrome hover, at least twice as fast
  • on Chrome at least, once I make the hover appear, moving the mouse to other elements with hover shows the hover almost instant, so I think they have some logic that would make the hover appear faster once you have it visible, this is likely an accessibility feature to make it easier to discover pieces of the UI

The reason why I am sensitive to this is that we should try to match the native look and feel as much as possible. To give another example: we are using hand cursor on clickable elements in the UI and we got users complaining that this is a pattern only seen in web UIs but not native UIs. I fear we might end up annoying more users that want an experience that is closer to what the OS provides.

cc @misolori for UX and @Tyriar for workbench hover in general

@alexr00 alexr00 added tree-views Extension tree view issues under-discussion Issue is under discussion for relevance, priority, approach labels Sep 4, 2020
@alexr00 alexr00 self-assigned this Sep 4, 2020
@alexr00 alexr00 modified the milestones: September 2020, August 2020 Sep 4, 2020
@bpasero bpasero added the ux User experience issues label Sep 4, 2020
@bpasero
Copy link
Member

bpasero commented Sep 4, 2020

I am fine leaving this for September btw, would also be interesting to get some user feedback on this.

@alexr00 alexr00 modified the milestones: August 2020, September 2020 Sep 4, 2020
@miguelsolorio
Copy link
Contributor

If our goal is to align with native hover characteristics then these updates make sense but then it also creates inconsistencies with our hovers in the editor (which appear above by default). One of the main issues with native hovers is that they take a really long time to appear, so long that users don't wait around for the tooltip to appear and can miss some context. In the studies we've done nearly everyone moves too quickly to see this appear. So making our custom hovers match the native ones adds to this issue.

I am personally more in favor of having hovers appear quicker so that users can be aware of the description of items. I also like the idea of adding logic so this appears instantly if you are moving from one hover to another.

@Tyriar
Copy link
Member

Tyriar commented Sep 4, 2020

@misolori note that the hover from @bpasero's original issue are very simple and just repeat information, so there isn't really a great need to make them discoverable. In fact it's preferable to not display most of the time.

image

It should also show the full path as showing the text when the sidebar is too narrow is the main purpose of it, I mentioned this in another issue I think.

@bpasero
Copy link
Member

bpasero commented Sep 7, 2020

Yes, my main concern is hovers that repeat the same information that is under the mouse. They should not appear any faster than native hovers. I am fine that rich-custom-hovers have different rules applied to them (including their position on the screen) given they really provide additional value.

I think long term we should really just have one hover and not a custom and a native hover. It would likely be confusing for users to see 2 different styles for the same thing and I must admit that the "native" hovers on Linux and Windows really do NOT look any native for the OS. Only the macOS hover matches the native looks.

@Tyriar
Copy link
Member

Tyriar commented Sep 7, 2020

I agree we should go towards the single style. For the explorer if it's just adding cut off text, I really love what Windows Explorer does:

image

alexr00 added a commit that referenced this issue Sep 18, 2020
@alexr00
Copy link
Member Author

alexr00 commented Sep 22, 2020

For folks following the issue: custom hovers in the tree now show below the cursor and slightly offset to the right. Please try it out and provide further feedback!

@bpasero
Copy link
Member

bpasero commented Sep 22, 2020

@alexr00 yeah it is better, but something I still see is that the hover seems to have a larger font compared to the text below:

image

I think it should never be larger, maybe same size? This is running web btw with zoom 125%, maybe it is related.

alexr00 added a commit that referenced this issue Sep 23, 2020
For now, we will go back to the native hover. The custom hover should be used at the resource label level instead of the tree level to avoid conflicts with resource labels. This is a larger change that will come later.

Part of #106095
@alexr00
Copy link
Member Author

alexr00 commented Sep 23, 2020

Per discussion about custom hover, we should opt in to custom hover at the resource label or icon label level (currently we opt in at the tree level, which is too high). Given that decision, we will go back to only showing custom hovers in the tree when the tooltip is markdown. Next milestone we will opt in to custom hovers at a deeper level than the tree.

@SrBrahma
Copy link

I am an extension dev (GitHub Repository Manager):

So, this was added in 1.51, right? It changed the hover font, right? Is this the markdown implementation?

In my tree item hover, I had a multiline text of 2 columns, and I was manually spacing (with spaces, " ") the second column to have a table-like look. This was done in Linux, and when I tested in Windows, the spacing was wrong and ugly, as it was OS font system dependent. I would someday also manually set the spacing for the Windows, for the default font, as this seemed to be the only way to do it.

Now, the multiple spacing is gone, have being replaced by just 1 space:
image
.

With the new update, can I have the table-like view that I want cross-platform?

@Tyriar
Copy link
Member

Tyriar commented Nov 12, 2020

@SrBrahma markdown is like HTML in that is merged whitespace into a single whitespace characters. You could try using experiment with using a non breaking space ( ), otherwise table support would be a new feature request as I don't believe the |---| table format will work (but may be wrong here).

@SrBrahma
Copy link

Does it accept HTML tables?

@alexr00
Copy link
Member Author

alexr00 commented Nov 12, 2020

The table format will not work (at least not until #100741 is finalized. Once that's finalized you should be able to use markdown tables). I just tested   and it does work. However, I think this could be considered a VS Code bug since we say we take a string, then we don't treat it like a string. Bug: #110464

@github-actions github-actions bot locked and limited conversation to collaborators Dec 7, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
insiders-released Patch has been released in VS Code Insiders tree-views Extension tree view issues under-discussion Issue is under discussion for relevance, priority, approach ux User experience issues
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants
@bpasero @Tyriar @SrBrahma @miguelsolorio @alexr00 and others