1506516 - Improve the expand arrow (twisty) SVG icon

Status: RESOLVED FIXED

(DevTools :: General, enhancement, P2)

Description

[Florens Verschelde :fvsch]

In recent bugs we moved all expand arrows and theme-twisty (outside of the Debugger) to use a single pre-existing arrow.svg icon. This icon is set on a 16px grid and does not render perfectly at small sizes, e.g. at 8px, 9px or 10px.

We've discussed visual options in https://github.com/devtools-html/ux/issues/31

Some details:
- we're going to use an icon sized at 8px (on a 10px canvas)
- while the icon is small, we should always have a larger clickable area: 14x14 or ideally 16x16

SVG code:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <path d="M5 7c-.25 0-.35-.05-.6-.29L1.25 3.2C.7 2.6 1.2 2 1.8 2h6.4c.6 0 1.1.6.55 1.2L5.6 6.71c-.25.24-.35.29-.6.29z"/>
</svg>

Comment 1

[Florens Verschelde :fvsch]

Oh, and we will need to test at 1x to make sure we get a crisp rendering. I think I've regressed that a bit when removing controls.png.

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1506516 - Update twisty SVG icon for crisp rendering at 8px; r?gl

Add a new themes/images/arrow.svg icon (keeping themes/images/devtools-components/arrow.svg
for now because it's used in the debugger and reps) for theme-twisty, Console, etc.
Update twisty colors to be slightly more contrasted.

Comment 3

[Florens Verschelde :fvsch]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=8fc51ff76d4dfd06da02a620a714a0b4428be1bd

Comment 4

[Florens Verschelde :fvsch]

Feedback from Victoria:
- looks good
- let's try to keep the 10px icon for Console groups and networks requests, to avoid a visual mismatch with other icons in the left gutter

Comment 5

[Florens Verschelde :fvsch]

Made a few changes after UX feedback, so new try:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=c0f075593fceae131b0934cc82554b83d79d8fb5

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d2a374dc2367
Update twisty SVG icon for crisp rendering at 8px; r=gl

Comment 7

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/d2a374dc2367

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/7e059804fdf2
Remove now unused arrow.svg after debugger dropped it in bug 1506688. a=devtools-fix

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/b0b856065d5b
Remove now unused arrow.svg after debugger dropped it in Bug 1506688: Also remove it from jar.mn. a=bustage-fix