Closed Bug 1479861 Opened Last year Closed Last year

Visually align jsterm/command/log icons


(DevTools :: Console, defect, P2)



(Not tracked)



(Reporter: Harald, Unassigned)


(Blocks 1 open bug)



(7 files, 3 obsolete files)

Attached image 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.
Is there a simple polish that you could propose, Victoria?
Flags: needinfo?(victoria)
Priority: -- → P2
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 >>.
Flags: needinfo?(victoria)
Attached image 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.
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.
Depends on: 1479750
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.)

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.
As a side note, all the entry/log icons from the web console seem to be in this small sprite:

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.
Attached image consoleoutput.svg (obsolete) —
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!
Attached image 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.
Attachment #8998069 - Attachment is obsolete: true
Attached image console-icons-tests.png (obsolete) —
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.
Attachment #9001290 - Flags: ui-review?(victoria)
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.
This is the result I currently have.

- 10px icons for errors and (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?
Attachment #9001290 - Attachment is obsolete: true
Attachment #9001290 - Flags: ui-review?(victoria)
Attachment #9001309 - Flags: ui-review?(victoria)
Comment on attachment 9001309 [details]

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)

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!
Attachment #9001309 - Flags: ui-review?(victoria) → ui-review+
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.
Attachment #9001292 - Attachment is obsolete: true
Note: for better or worse, the actual implementation is in bug 1479750.
Attached image Result of bug 1479750
Bug 1479750 landed. Harald, could you check if the changes there fix this polish bug as well?
Flags: needinfo?(hkirschner)
Yes ^ 100! So much better. Thank you Florens!
Closed: Last year
Flags: needinfo?(hkirschner)
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.