Show console error count in toolbox

[digitarald]

Console errors are a guiding beacon for web developers, during development and in production (collected via error reporting services). Making them visible in top-level UI can hint important.

Work started in bug 1109362.

cc @nchevobbe @janodvarko @fvsch @violasong

Background

We have a lot of prior art, so we should pick the best fit and improve based on that.

Considerations:

• Should consider the transition from no errors to 1 error; minimizing visual jitter
• Should support lazy loading (having a placeholder or empty spot), to allow prioritized loading of the current panel.
• Should consider that increments don't cause extraneous layout and jitter, by changing the size of the element
• MVP might just include errors, not warnings

Prior Art

Observations & Opinions.

Chrome

• In the right-aligned section of the toolbox. Probably what users are used to that are trained on Chrome
• Click opens/focuses Split Console (if Console isn't the active panel). This is nice as it gets more users into the split console that might otherwise not be aware and doesn't interrupt the current tool to show console errors.
• More errors showing causes the space for the tabs to shrink (and more tabs to be hidden)

Firefox's GCLI

Safari

• In the "command center" with other page/status details.
• Shows logs, warnings and errors. Not sure why it would be ordered that way. I also missed that logs is shown, as it is pretty low contrast compared to the warning and error icon.

Edge

• Just error count, with an error icon.

Firebug

• Uses status bar, which doesn't exist anymore.

[digitarald]

Victoria's mockups from the discussion in bug 1109362.

Iteration 1:

I'd suggest making it more compact by just showing the number with red coloring. I gave the solid red badge a try but it looked way too intense. What about just red text/slightly smaller font/some text separator like a colon?

Iteration 2:

Brighter red may look nicer, and not need a separator

[digitarald]

In the spirit of kicking it off, the Chrome placement has some benefits:

• It separates the errors from the tab and uses the split console as click action which is the least intrusive (vs switching tabs to check console logs). If users want to see more, they can always click on the Console to dig in further.
• The other upside is that tabs usually have some space to the right, so the warnings appearing and growing in size in that space does not cause layout jitter in many cases.

[janodvarko]

Yes, I like the placement of the number on the right side.

It would be also great to have an (error) icon next to the number, so it's clear what the number represents. Or perhaps we could experiment with the solid red badge again (with the number inside)? Having it far right doesn't have to feel too intense (as when it's between tabs).

Honza

[fvsch]

Error count in Console tab

I like the simple red count (Iteration 2). Here's a test with a solid red badge look (done in CSS on Linux, exact rendering depends on font and resolution):

Looks alright-ish, maybe a bit too strong indeed.

Should consider the transition from no errors to 1 error; minimizing visual jitter

In that scenario, I wouldn't reserve a ~20px blank space in the Console tab in the "no error" state, it looks rather strange. So we would have to live with a jump between the "no error" and the "some error(s)" state. But we can avoid jumps between different error counts (between 1 and Infinity).

Error count on right side of toolbar

• Not a fan of opening the split console on click, mostly because I'm not a fan of using the split console along tools like the Inspector (which is already very visually busy!) and only use it with the Debugger.
• Can we make it more compact when docked to the side? Just an error count and no warning count maybe? No icons?
• Can we make it optional (on by default), like most other elements in the toolbar?

If the error count is disabled, I wonder if we should add some kind of marker in the Console tab. There's the notification marker in Firefox tabs, perhaps a red variant could work?

[digitarald]

Here's a test with a solid red badge look (done in CSS on Linux, exact rendering depends on font and resolution):

That also looks good, from a styling perspective (not considering the tab vs right-aligned decision). If we feel we need to tone it down, we can still pick a less vibrant red

Not a fan of opening the split console on click, mostly because I'm not a fan of using the split console along tools like the Inspector (which is already very visually busy!) and only use it with the Debugger.

The trade off is a hefty context switch from the current tool to a new panel. As example, if a user is the process of editing CSS or stepping, see an error appearing, clicking – they will be ejected out of their flow into a new panel. My hypothesis would be that split console is less jarring. Lastly the consistent UX argument is that Chrome does it and users would be surprised if our interaction diverges – which raises the bar for picking another action.

Maybe follow up can be making the split console logic better on how much space it takes when opening (I noticed it can cause some strange layouts by squishing some parts of 3-panel layouts.

Can we make it more compact when docked to the side? Just an error count and no warning count maybe? No icons?

Agreed, good thing to try out. Having a red badge with error count works as well as the error-icon + counter, with half the space. We also have prior art with addon icon badge counters

Can we make it optional (on by default), like most other elements in the toolbar?

Given that all browsers show their indicator by default, I would also propose that. Having a preference to disable the element makes sense though.

[violasong]

The badge with darker red still seems pretty intense/alarming to me. If we're ok adding a small icon, in outline mode, it looks pretty good I think. I was assuming we won't be adding an indicator for console warnings, only error.

Not sure about the split console question.

[digitarald]

If we're ok adding a small icon, in outline mode, it looks pretty good I think.

How would it look filled? Would the text in red might be easier to read in black? Then it basically looks like Chrome I guess, just with our icon 😅

I was assuming we won't be adding an indicator for console warnings, only error.

Yes, for now. Could we try out how it looks for brainstorming?

[violasong]

Oh argh, it's looking brighter in my screenshots than in my sketch for some reason. I meant for it to look more like this:

Here's how chrome style looks.

[digitarald]

@violasong what's your preference? I am fine with either but prefer the second one as it provides better contrast and we don't have other devtools interfaces with red text and outlined icons.

Final thoughts, @janodvarko @nchevobbe ?

[violasong]

The first one plays off the (?) icons, but I can see what you mean about the red outline being weird.

I worked on the second one some more - shrinked the icon and number so it's a little less prominent. I'm liking this a lot more now and am happy to go with it.

[violasong]

Attached the icon — it's a smaller version of the photon one, 10x10, with slightly larger exclamation mark. Should be filled with red 60. error-small-compressed.svg.zip

[janodvarko]

• I like the last screenshot from @violasong
• I also prefer having the counter on the right side and opening the split console when clicked.

So, for me this looks great, thanks!

Honza

[fvsch]

@violasong Would 12px icons work here or is that too big and 10px is preferable?

12px icons follow the recommended "small" size from Photon and that's what we use in the Console. If we want a full (Chrome-style) alert icon we already have one for Console errors.

Here it is (bottom center) compared to the 10px icon (bottom right) and Console icons (top row):

SVG: Error count icons.zip

Side note: it seems you set your 10px icon in a 11px artboard and with the center stroke sitting on half-pixels? Was that on purpose because it rendered better in your tests, or an export artifact maybe? In my tests that version looks good @2x, but the center shape has blurry edges @1x:

In the attached SVG I've realigned it to a 10px canvas, but maybe that's not particularly better.

[hemakshis]

Hi, What about the tooltip text that should be displayed when the user hovers over the icon? Should we add something like " errors" (done by Chrome) or "Open Split Console" or "Show in Split Console"?

[violasong]

Ah, the .5 pixels on 11px artboard thing was a mistake! Thanks for fixing it.

For me the 10px level of prominence with larger white text helps reduce the alarm/discomfort of seeing a red error dot. I'm assuming people often want to ignore it if they're working in the Inspector, etc.

@digitarald Why thumbs-down?

[digitarald]

@digitarald Why thumbs-down?

Oh noes, I meant (double, triple) thumbs up! The smaller icon is excellent.

If this is wrapped up, I'd like to close this issue as implementation work has started. We can re-open it in case of follow up questions.

[violasong]

Haha Yay! Will close the issue.

[MichalBryxi]

implementation work has started

Can you link a PR / issue / something where we can see the progress?

[nchevobbe]

implementation work has started

Can you link a PR / issue / something where we can see the progress?

Work was happening in https://bugzilla.mozilla.org/show_bug.cgi?id=1109362

[digitarald]

If people want to help contribute, bug 1109362 is a intermedia-first-bug with a first draft of a patch.