UI Scrolling and whitespace refactor

[isaisabel]

As a user of the ATT&CK Navigator, I want the application user interface to be intuitive, easy to use, and free of major QOL issues.

The current application has some QOL issues around scrolling and use of page whitespace that can be improved with some adjustments to the ATT&CK Navigator user interface. The overall application structure remains the same, but cleanliness can be improved by reducing visual clutter such as borders, rounded tabs, floating elements such as the application title and help-button in the top right corner of the application.

---

• The excess whitespace around the application should be eliminated.

• The "new tab" interface should include the application title

  • The application title floating in the view should be removed entirely.

• The "new tab" interface should include an introductory blurb explaining the application intent:

  The ATT&CK Navigator is a web-based tool for annotating and exploring ATT&CK matrices. It can be used to visualize defensive coverage, red/blue team planning, the frequency of detected techniques, and more.

  • The help and changelog links should be moved to next to this blurb, which should precede the various layer-related panels.

• The current tabs implementation should be replaced with the Angular Material Tabs implementation due to accessibility features included in that implementation (e.g horizontal scrolling).

  • Clicking on the active tab should open the layer information dropdown and focus the layer name input to replicate the previous "edit layer name in the tab" UI.
  • To the right of the tab "row" should be the help/changelog dropdown button. This button should be vertically centered in relation to the tab text.

• The sidebar implemented in v4.4 should be able to be scrolled independently of the ATT&CK Matrix.

• When the ATT&CK matrix body is scrolled, the tabs should move out of view. The toolbar should stay within the view via "sticky" positioning. See ATT&CK Workbench's implementation of hiding the menu bar when scrolling but keeping the toolbar for UX and implementation reference.

  • Hide on scroll HTML: https://github.com/center-for-threat-informed-defense/attack-workbench-frontend/blob/develop/app/src/app/app.component.html#L2
  • Hide on scroll JS: https://github.com/center-for-threat-informed-defense/attack-workbench-frontend/blob/develop/app/src/app/app.component.ts#L52-L70

  

• The banner should be hidden when scrolled like the tabs, and should be placed above the tabs with a small amount of white-space separating it from the tabs for visual clarity: