Improve the “expand arrow” icon

[fvsch]

Currently we are using three different “expand arrow” icons:

1. devtools/client/themes/images/controls.png (PNG sprite containing black and white arrow icons)
2. devtools/client/themes/images/devtools-components/arrow.svg
3. devtools/client/themes/images/debugger/arrow.svg (seems to be a copy of the previous one)

In bug 1490491 we are removing the PNG icon, and I’ve use arrow.svg instead, using the same approximate size (9px). @violasong commented that this looked a bit bigger than before in the Inspector tree. This is mostly because the arrow.svg image is taller (when pointing down) than the previous icon.

On top of that, the arrow.svg icon is fitted to the pixel grid on a 16px canvas, but we are using at 9x9 or 10x10 pixels. The result can look blurry. It would be great to figure out the exact size we want to use, and to redesign this icon to match that size.

Here are a few explorations. Top row is the existing icon, bottom row are some options that look closer to the “9-by-5” pixels of the PNG icon.

[violasong]

Thanks for all these examples! I think I will likely prefer the 8 x 5 for a neater appearance, with the assumption that these will still be pretty prominent looking and not get lost - would be open to making them darker if that's a concern.

[fvsch]

For the record, we just removed the old PNG icons in Nightly (after the beta merge so it's not in beta 64, only in Nightly 65). We're using the existing SVG icon (top row).

Since we're using the same 16px SVG icons at 9px and 10px sizes, we are getting some differences and imprecise results, especially on 1x displays. It looks okay, but not perfect. I'd like to fix and harmonize that during the 65 cycle.

[fvsch]

Sketch file for the screenshot above: https://www.dropbox.com/s/4793iidao2whftu/arrow.sketch?dl=1

SVG code for B option, after cleaning it up a bit:

<svg viewBox="0 0 10 10" fill="black" xmlns="http://www.w3.org/2000/svg">
  <path d="M5 7C4.75 7 4.65 6.95 4.4 6.71L1.25 3.2C0.7 2.6 1.2 2 1.8 2H8.2C8.8 2 9.3 2.6 8.75 3.2L5.6 6.71C5.35 6.95 5.25 7 5 7Z"/>
</svg>

[fvsch]

Filed for implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=1506516

[fvsch]

@violasong @mcroud You should be able to download a Mac build with the updated icon here. Could you try it, with both the light and dark theme, and tell me if it looks good for you?

Things to look at:

• All the expand icons in Inspector
• Expand icons in Network request details
• The expand icon you can see in Console when running console.error('Test') or console.group(); console.log('Hey'); console.groupEnd(); (the one used when logging objects depends on Debugger code, which I haven't touched yet)

[fvsch]

Oh, and I've changed the arrow color to make it just a little bit more contrasted. I've kept that change subtle, but I think it compensates for the small size.

[fvsch]

New icon is landing in Nightly tomorrow. We still need to update it in Debugger and Reps (used in some parts of the Console).

[violasong]

The expand icons look super good. Thanks for your work on this!