1479861 - Visually align jsterm/command/log icons

Status: VERIFIED FIXED

(DevTools :: Console, defect, P2)

Description

[:Harald Kirschner :digitarald]

Attachment: Console Icons.png

The icons all have different sizes, line weights, etc; whereas other implementations feel better balanced.

With our push for an improved js-term, this polish could make switching devtools easier for users.

Comment 1

[:Harald Kirschner :digitarald]

Is there a simple polish that you could propose, Victoria?

Comment 2

[Victoria Wang [:victoria]]

This will look a lot better after the unifying the input icons in #1479750, but I see what you mean, it does make sense to clean up the output icon. I'm wondering if there's a reason for the <• styling in the other implementations, because it strikes me as a bit odd. Does it have some specific output-related meaning that I'm not aware of? If not, I could work on a <- icon that has the same angle/shape as the >>.

Comment 3

[:Harald Kirschner :digitarald]

Attachment: commands-and-logs.PNG

If bug 1479750 already shrinks the >> to match <<, the only remaining icon that needs touch up would be the bold arrow left ←.

Attached a screenshot, that the arrow is really just for the return value of the expression, independent of type.

Comment 4

[:Harald Kirschner :digitarald]

As a quick follow up: A quick search on google images for "iterm themes" shows that terminal users indeed use arrows and greater/less than signs; but usually decide on one style and not both like the current console icon set.

Comment 5

[Florens Verschelde :fvsch]

A possible symbol for return values would be Unicode's RETURN SYMBOL: ⏎
There’s also Return Left and Return Right symbols: ⮐ ⮑
(Rendering depends on the font used to display the symbols.)
https://www.fileformat.info/info/unicode/char/23ce/index.htm
https://www.fileformat.info/info/unicode/char/2b90/index.htm
https://www.fileformat.info/info/unicode/char/2b91/index.htm

Since the return symbol is used on most keyboards, and you use the Return key to evaluate code in the console, it could make sense. Kinda maps with JavaScript’s `return` statement.

Comment 6

[Florens Verschelde :fvsch]

As a side note, all the entry/log icons from the web console seem to be in this small sprite:
chrome://devtools/skin/images/webconsole.svg

I wonder if it should be broken up in individual icons. I find that using positional sprites with backgroud-position: -48px -62px; etc. tends to break easily (that was an issue in bug bug 1476626, for instance). And with `fill="context-fill", individual icons are more flexible.

Comment 7

[Victoria Wang [:victoria]]

Attachment: consoleoutput.svg

I looked at the iterm themes, and looks like the main arrow used is ->. I'm still not sure why Chrome and safari use <• but I think <- is a fine compromise.

Re: return symbol, I think I'd reserve that for other situations that are specifically about the return key - e.g. maybe it could be part of the indicator for whether return will trigger multiline or enter.

I attached a new arrow svg. It's black but we should fill it to Gray 40 for some contrast from the input icon, and to match chrome. Let me know if this works!

Comment 8

[Victoria Wang [:victoria]]

Attachment: consoleoutput.svg

I was looking at this arrow icon more (since it will be useful in other places as well) and realized the stem was a bit too short. Attaching a new icon that should look better.

Comment 9

[Florens Verschelde :fvsch]

Attachment: console-icons-tests.png

I started implementing a few changes, working from a Sketch file (attached: screenshot showing the icons).

On the left you can see the current icons, with the "return" icon already updated with Victoria's icon.

The middle column is my attempt at 1) "photonizing" strokes by using round terminals, and 2) making the 8px alert and info icons more readable by redrawing them at 10px.

I’ve implemented it in working code, so I’ll add a screenshot showing the actuel result next.

Comment 10

[Florens Verschelde :fvsch]

Attachment: console-icons-tests.sketch

Comment 11

[Florens Verschelde :fvsch]

Attachment: Experiment with single chevron icons

I also experimented with single angle icons (right column in the Sketch file).
This is how it looks like in the Console. I’m not sure it works well, having the exact same symbol is a bit confusing IMO; I’m also wondering if it can be more puzzling for some users, perhaps users with dyslexia or other conditions.

Comment 12

[Florens Verschelde :fvsch]

Attachment: console-alignment-and-icons.png

This is the result I currently have.

- 10px icons for errors and console.info (up from 8px)
- Updated "return value" icon
- Slightly updated "input" icon
- Harmonized colors (we had a lot of different shades of medium gray/blueish medium gray for some icons)
- And use the same chevrons icons for input logs and the input editor
- Plus all the alignment work

Victoria, anything to change on the visual side?

Comment 13

[Victoria Wang [:victoria]]

Comment on attachment 9001309 [details]
console-alignment-and-icons.png

Hi Florens! Wow, you're doing so much great work, I keep falling behind on looking at it all :D 

Error/info icons - These look great! Ah, but I realized I could have saved you some work by pointing out that those icons also exist as Photon icons! (Though I'm not sure how they look at 10px - it's possible we should stick with the ones you made if they're clearer at this size)
https://design.firefox.com/icons/viewer/#warning
https://design.firefox.com/icons/viewer/#identity

Single chevron - this was a good idea, but I agree it does look a bit confusing in practice. I think it's okay that the double chevron is so overloaded. It looks so nicely differentiated from the return icon, which seems like the most important part.

Other icons, colors, alignment - look amazing! The photonizing of the icons is fantastic. Thank you so much!

Comment 14

[Florens Verschelde :fvsch]

Attachment: webconsole-log-icons.sketch

Small update to the error/warning and info icons, using smaller versions of the Photon icons but keeping the inner shapes ("i" and "!") at 2px width. The inner shapes are now transparent instead of white.

Comment 15

[Florens Verschelde :fvsch]

Note: for better or worse, the actual implementation is in bug 1479750.

Comment 16

[Florens Verschelde :fvsch]

Attachment: Result of bug 1479750

Bug 1479750 landed. Harald, could you check if the changes there fix this polish bug as well?

Comment 17

[:Harald Kirschner :digitarald]

Yes ^ 100! So much better. Thank you Florens!