Uploaded image for project: 'SonarQube'
  1. SonarQube
  2. SONAR-8808

Make all breadcrumbs consistent



    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Won't Fix
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Web
    • Estimate:
    • Edition:


      Too many breadcrumbs patterns coexist in the current project’s space.


      By definition a breadcrumb is a pattern that ease navigation. In the context of the "Measure page" & "Code page", the breadcrumb allows users to explore/navigate the project folders and files. On the issue page its goal is different as its first purpose is to indicate the location of issues. For this reason 2 different breadcrumb designs are necessary.

      Icons are attached if needed.

      Issue page

      • In this context, the bread crumb is not clickable.
      • When the name of a project is too long and leaves no space for the breadcrumb, it should be truncated. The path is the most important information for users and should always be visible without requiring an additional action.
      • When the path is too long the first 2 folders and last 2 folders + file name should be visible first. To make this possible, the middle part of the path will be hidden under the "..." (Hover state color: #8A8A8A)


      Measure page and Code page

      • In the context of those 2 pages the breadcrumb serves 2 purposes. Indicate the location of a folder/file and ease navigation.
      • Since the current design leaves a limited space for the breadcrumb we should make sure that the first and last folders are always visible. The space issue should be improved by SONAR-12082
      • On both pages the breadcrumb should use as much space as available.
      • Change the color of the folder icon to #4B9FD6

      Code page

      • When folders are empty and grouped together we indicate to the users what's going on with a tooltip.



        1. Screen Shot 2017-02-17 at 18.03.16.png
          Screen Shot 2017-02-17 at 18.03.16.png
          6 kB
        2. Screen Shot 2017-02-17 at 18.03.23.png
          Screen Shot 2017-02-17 at 18.03.23.png
          8 kB
        3. Screen Shot 2017-02-17 at 18.03.32.png
          Screen Shot 2017-02-17 at 18.03.32.png
          12 kB
        4. Code_folder_page.png
          88 kB
        5. Code_root_page.png
          97 kB
        6. Header_Code_Page.png
          197 kB
        7. code drilldown.png
          code drilldown.png
          176 kB
        8. measures page.png
          measures page.png
          223 kB
        9. code - code viewer.png
          code - code viewer.png
          229 kB
        10. folder_icon_blue_version.svg
          3 kB
        11. folder_icon_white_version.svg
          3 kB
        12. more_path_icon.svg
          2 kB
        13. issue usable.png
          issue usable.png
          218 kB
        14. measures page folder drilldown.png
          measures page folder drilldown.png
          203 kB



            Unassigned Unassigned
            laura.wacrenier Laura Wacrenier
            0 Vote for this issue
            2 Start watching this issue