Closed Bug 1506516 Opened 2 years ago Closed 2 years ago

Improve the expand arrow (twisty) SVG icon


(DevTools :: General, enhancement, P2)



(firefox65 fixed)

Firefox 65
Tracking Status
firefox65 --- fixed


(Reporter: fvsch, Assigned: fvsch)



(1 file)

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

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="">
  <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.2L5.6 6.71c-.25.24-.35.29-.6.29z"/>
Assignee: nobody → florens
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.
Severity: normal → enhancement
Priority: -- → P2
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.
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
Pushed by
Update twisty SVG icon for crisp rendering at 8px; r=gl
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Pushed by
Remove now unused arrow.svg after debugger dropped it in bug 1506688. a=devtools-fix
Pushed by
Remove now unused arrow.svg after debugger dropped it in Bug 1506688: Also remove it from a=bustage-fix
You need to log in before you can comment on or make changes to this bug.