Performance Bar improvements
What does this MR do and why?
Performance Bar improvements:
- Uses
gl-font-sm
- Adds tooltips where missing
- Migrates
GlPopover
to useGlTooltip
instead - Migrates
GlEmoji
from usingv-safe-html
to an actual component - Improves overall look & feel
- Alignment changes
- Slightly increased height from
35px
to40px
to improve bounding boxes around clicking elements - Mobile improvements (adds the ability to scroll, aligns items to the left [LTR])
Screenshots or screen recordings
Before | After |
---|---|
Mobile
Shows the metrics from left. Adds a scroll wrapper so the information can be actually viewed on mobile.
Before | After |
---|---|
Tooltip example
How to set up and validate locally
- Open GDK
- Press
p
&b
to enable performance bar
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to UX Paper Cuts 16.5 → Cleanup (#424403 - closed), Performance bar colors in development are diffi... (#20650 - closed) & Reorganize the Performance Bar (#352360)
Edited by Sascha Eggenberger