Improve usability of clicking on a file in the repository browser
In the file tree Vue refactor, when a user clicks on an empty space in a row, it's the same as if they clicked the file name. Right now we handle this in a click callback, but what if we used native HTML to do this. This way we'd gain the benefits of:
- User can see the href before the click.
- Right clicking causes "Open in New Tab" to appear.
- Meta clicking natively works.
This includes the link to modules as seen in this screenshot:
More details from #35250 (closed):
Previous discussion on the topic
question (non-blocking): @mvanremmerden is clicking on the file row a feature we're interested in supporting? Concerns:
- This doesn't add any extra capability which isn't already accomplished by just using the name link.
- For a complete native feel (i.e. features like ctrl+click), there's some extra complexity (i.e. meta vs ctrl in different OS's).
- It looks like this kind of feature has broken user's expectations in the past #24062 (closed).
Not that we have to replicate them, but it looks like GitHub doesn't implement this:
@iamphill sorry to tap the brakes on this small MR
Point 2 - Fully usable links
Make sure the file list supports ctrl+click, right click and open in new tab, etc. — all the native features of a link.
If we still want to keep the click-on-row, one of the possible solutions is:
Style an underlying anchor tag to capture the "negative" space
This option is described in the context below
The following discussion from !19228 (merged) should be addressed:
suggestion: I'm a little concerned that we're re-inventing the wheel (i.e. the anchor element).
- This coupling to the
tagNameis a little concerning. In the future, is it possible that we have a
clickhandler on a non-anchor element?
- There's some native anchor features that we're still missing (i.e. "Open in New Tab" in context menu, mobile support, seeing the href in the browser).
With a little CSS magic, I think we can actually remove the
openRowmethod in favor of an underlying
<a>. What do you think of this? Is it too hacky?
I'm not sure of the cross browser considerations of this. IMO, it's worth considering because it creates a very natural UX
- This coupling to the
Availability & Testing
No risks to availability are anticipated.
Cross-browser testing will be necessary to ensure that clicking behaves as expected in all supported browsers.
Unit/integration test coverage should be sufficient. However, there are several end-to-end tests that were written assuming the existing behavior, so
package-and-qa should be run before merging to confirm that the tests are compatible with any changes.