DevTools Treemap UX/UI Color Updates

[raison00]

General DevTools Treemap UX Color Updates Treemap Update:

• [x] Use #88b1de as dominant color
• [ ] Use #2c5daa as alt dominant color (see gradient breakdown)
• [ ] Use #f6937d as dominant hotspot color
• [ ] Use #009aca as indicator color

  Gradient Breakdown:

Lighter	Darker	Opacity
#88b1de	#2c5daa	100%
#9aafd0	#5163a5	100%
#aaacc3	#6c68a0	100%
#b9a8b7	#836e9b	100%
#c6a5ac	#9a7496	100%
#d2a1a0	#c7838b	100%
#e99889	#dd8b85	100%
#f6937d	#f6937d	100%

_Values have been provided for the base color + opacity + _dominant color__ The determined threshold will follow this pattern: Extra Large: 100% opacity #88b1de and #f6937d Large: 75% opacity Medium: 50% opacity Small: 25% opacity

Dark Mode Updates

• [ ] Text Color #88b1de on Treemap labels
• [ ] Extra Large: 100% opacity #88b1de
• [ ] Large: at 75% opacity on dark background will render as #7392b4
• [ ] Medium: at 50% opacity on dark background will render as #5c7087
• [ ] Small: at 25% opacity on dark background will render as #454f5a

  

Dark Mode Hot Spot Updates

• [ ] Text Color #88b1de on Treemap labels
• [ ] Extra Large: 100% opacity #f6937d
• [ ] Large: at 75% opacity on dark background will render as #c4786a
• [ ] Medium: at 50% opacity on dark background will render as #926156
• [ ] Small: at 25% opacity on dark background will render as #614843

  

  Dark Mode Gradients

• [ ] Lighter Range: at 100% opacity #88b1de to #f6937d
• [ ] Darker Range: at 100% opacity #2c5daa to #f6937d

  

Light Mode Updates

• [ ] Text Color #2c5daa on Treemap labels
• [ ] Extra Large: 100% opacity #88b1de
• [ ] Large: at 75% opacity on a light background will render as #7e9dc0
• [ ] Medium: at 50% opacity on a light background will render as #bfd5ed
• [ ] Small: at 25% opacity on a light background will render as #e1eaf7

  

Light Mode Hot Spot Updates

• [ ] Text Color #2c5daa on Treemap labels
• [ ] Extra Large: 100% opacity #f6937d
• [ ] Large: 75% opacity on a light background will render as #f3b098
• [ ] Medium: 50% opacity on a light background will render as #f7c9b8
• [ ] Small: 25% opacity on a light background will render as #fce2d7

  

  Light Mode Gradients

• [ ] Lighter Range: at 100% opacity #88b1de to #f6937d
• [ ] Darker Range: at 100% opacity #2c5daa to #f6937d Gradient Breakdown:

Lighter	Darker	100%
#88b1de	#2c5daa	100%
#9aafd0	#5163a5	100%
#aaacc3	#6c68a0	100%
#b9a8b7	#836e9b	100%
#c6a5ac	#9a7496	100%
#d2a1a0	#c7838b	100%
#e99889	#dd8b85	100%
#f6937d	#f6937d	100%

Below is a conceptual mock of rendering using opacity to show size. _Note: Color is not representative of actual intended size here; it is provided for maximum visibility to show intended color range._

Dark Mode Hot Spot Colors

• Text Color #88b1de on Treemap labels
• Select: #009aca as indicator color
• Extra Large: 100% opacity #f6937d
• Large: #f6937d at 75% opacity on #303030 background will render as #c4786a
• Medium: #f6937d at 50% opacity on #303030 background will render as #926156
• Small: #f6937d at 25% opacity on #303030 background will render as #614843

Alt range:

Light Mode

Light Mode Hot Spot Colors

• Text Color #2c5daa on Treemap labels
• Select: #009aca as indicator color
• Extra Large: 100% opacity #f6937d
• Large: #f6937d at 75% opacity on #ffffff background will render as #f3b098
• Medium: #f6937d at 50% opacity on #ffffff background will render as #f7c9b8
• Small: #f6937d at 25% opacity on #ffffff background will render as #fce2d7

  

Light Mode Gradient Colors

#88b1de #2c5daa #5163a5 #6c68a0 #836e9b #9a7496 #c7838b #dd8b85 #f6937d #88b1de #9aafd0 #aaacc3 #b9a8b7 #c6a5ac #d2a1a0 #e99889 #f6937d

[kenzieschmoll]

Thanks Felicia. Can you provide some input on building a diffing tool? If we were to build a treemap to show the diff between two snapshots, how do you recommend we use colors to show the positive and negative size changes in the diff? We were thinking we could use red to show code size increases and green to show code size decreases.

[raison00]

Here's some ideas for building the diffing tool. The top image shows the same color palette with visibility to the positive and negative size changes in the diff using red and green to show increases/decreases, but still uses the primary color scheme. The base colors remain the same with orange being the "hot" color and blue being the "cooler" color.

In the area above the tabular data section, summary information for each snapshot is presented.

• Hovering over a particular row will display calculated differences between the two snapshots in the middle header area (above the Deltas header - currently a blank darker box )

• To view the total snapshot-wide count and shallow size deltas, move the mouse pointer so no rows are hovered.

• Detailed differences between the two snapshots are shown in the middle section. Overall info is shown in the middle header area above Deltas.

• Cells on the snapshot will be colored, reflecting the percentage difference within the row.

• Use of Red and Green matches the Memory Profiler Allocation charting and is used minimally.

• The blue/orange range mimics the intention of red / green and provides more range of hues for red/green colorblind users.

Light Version:

note: image fidelity is compromised, ignore the stretched text, provided to show light mode with same color scheme.

Color Options for Treechart diff comparisons

Here's a provided red/green color range and how the colors work on light/dark themes with various opacity.

"pinker-red" option range on right side of graphic