Improve the expand arrow (twisty) SVG icon

RESOLVED FIXED in Firefox 65

Status

enhancement
P2
normal
RESOLVED FIXED
7 months ago
7 months ago

People

(Reporter: fvsch, Assigned: fvsch)

Tracking

unspecified
Firefox 65

Firefox Tracking Flags

(firefox65 fixed)

Details

Attachments

(1 attachment)

Assignee

Description

7 months ago
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>
Assignee

Updated

7 months ago
Assignee: nobody → florens
Status: NEW → ASSIGNED
Assignee

Comment 1

7 months ago
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
Assignee

Comment 2

7 months ago
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.
Assignee

Comment 4

7 months ago
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 6

7 months ago
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/d2a374dc2367
Update twisty SVG icon for crisp rendering at 8px; r=gl

Comment 7

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/d2a374dc2367
Status: ASSIGNED → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65

Comment 8

7 months ago
Pushed by archaeopteryx@coole-files.de:
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

7 months ago
Pushed by archaeopteryx@coole-files.de:
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
You need to log in before you can comment on or make changes to this bug.