<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Work on this issue](https://contributors.gitlab.com/manage-issue?action=work&projectId=278964&issueIid=404540) - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=404540) </details> <!--IssueSummary end--> <!--This template is a great use for issues that are feature::additions or technical tasks for larger issues.--> ### Proposal The gutter on the blob view is very large. The gutter provides a spot for actions related to the selected line. **Propose change:** Consolidate actions for lines of code in a dropdown menu accessed via a more actions button (icon button with `ellipsis_v` icon). - Actions are more clear by using the words "View blame" instead of a git icon. - The gutter can be narrow to fit the line numbers and avoids having a large gap currently - For "Explain this code", if the user clicks on the action but there is nothing selected then it will assume that the selected line is the line of code to explain. - Provides an area where we could add more actions to in the future should we pursue additional actions - On hover, the menu for actions should appear Button should appears when the user hovers in the gutter area and/or the line of code. For reference, an example of showing actions on hover of the line of code exists in merge requests where the suggestion action appears when the user hovers over the line. | Current | Proposal | |---------|----------| |  |  | [Open in Figma](https://www.figma.com/file/eq2nf3B8MhB9xKrC0VzbPf/branch/dcjLR3ECXG5chUQShAmVis/Repository?type=design&node-id=637%3A154030&mode=design&t=zq0C9FSrAFPfTT0R-1) ### States | Hover over code | Hover in gutter | Menu open | |-----------------|-----------------|-----------| |  |  |  | <!--Use this section to explain the feature and how it will work. It can be helpful to add technical details, design proposals, and links to related epics or issues.--> <!--Consider adding related issues and epics to this issue. You can also reference the Feature Proposal Template (https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Feature%20proposal%20-%20detailed.md) for additional details to consider adding to this issue. Additionally, as a data oriented organization, when your feature exits planning breakdown, consider adding the `What does success look like, and how can we measure that?` section.--> <!--Label reminders Use the following resources to find the appropriate labels: - Use only one tier label choosing the lowest tier this is intended for - https://gitlab.com/gitlab-org/gitlab/-/labels - https://about.gitlab.com/handbook/product/categories/features/--> ### Additional design details needed * Reference in a new issue * Default issue title * Default issue description * Comment * Designs for entire flow ### Implementation notes Instrument this feature to gather data on usage per product request in https://gitlab.com/gitlab-org/gitlab/-/issues/15431#note_2354456783.