Icon usage in the Web IDE

There are a variety of issues with how we currently display icons in the Web IDE:

Icon content

  • The "circle in rectangle" icon is being used both for the Review tab as well as to signal a modified file.
Review tab Modified file
image image
  • We use a Hamburger menu icon for Unstaged changes and use the Hamburger icon + the previously mentioned circle for Staged changes. This is not what this icon usually stands for.
Unstaged changes Staged changes
image image
  • There are multiple places where we add three dots (the kebab menu icon) to our UI: When hovering over a file in the Edit and the Review tab, next to the dropdown icon, and also next to buttons for (un)stage all changes and for Discard all changes. I can't make sense of what they stand for though.
Dropdown (Un)stage/discard all changes
image image
  • The icon we use for Discard all changes is a trash bin, an icon that usually stands for removing/deleting files, and we also use it for that purpose in the dropdown of the file overview. This could potentially create confusion.
File overview Discard all changes
image image

  • While both the plus and minus for added/deleted files make sense for the user, using a circle does not signal a modified file.

  • In the Commit tab, additions and deletions use the plus/minus icon, but use the circle icon in the Edit and Review tab (https://gitlab.com/gitlab-org/gitlab-ce/issues/61335).

Icon colors

  • The icons are yellow in both the Edit and Review tab, but black in the Commit tab.
Edit Review Commit
image image image
  • In the commit tab we invert the colors when a file is staged vs. unstaged. This change does get applied for the file tab in the edit mode, but not in the file overview.

image

Icon tooltips

  • When I want to hover over an icon in the file overview to see its tooltip, a dropdown menu appears and the icon changes it position.

Dropdown

  • When I want to hover over an icon in the file tab to see its tooltip, it disappears and the close button takes its place.

Close

  • Only the Edit and Review tab have tooltips for the icons, the Commit tab does not have any icon tooltips.

  • Currently only the icon for modified and for added files have a tooltip, the icon for deleted files does not have a tooltip.

cc @phikai @pslaughter @mishunov

Edited by Marcel van Remmerden