1109362 - Show the number of errors in the toolbox

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P3)

Description

[Brian Grinstead [:bgrins]]

We should have a link somewhere in the toolbox (maybe by the console tab) that shows the number of errors.  This is a quick way to surface information to a developer that something is wrong with their page.

Comment 1

[Brian Grinstead [:bgrins]]

Some ideas:

1) Chrome shows a count over by the window controls that increments as errors happen.  Clicking on this count opens up the split console, and clearing the console removes the count.  We could do something similar by badging the split console button (or showing the count next to it), although we already have a lot of buttons showing up in the toolbox.

2) We could replace the console icon with a number in a red circle whenever there are errors.  Would save space, but would get rid of a (possibly) familiar icon.

3) We could add the count to the right of the 'console' label in the tab.  This is what the redesign on IE tools is doing: https://pbs.twimg.com/media/B4cuopxCQAEbBPA.png:large

Comment 2

[Patrick Brosset <:pbro>]

fwiw I like option 3. Could we show a badge with the number of errors in the console tab?

Comment 3

[Anthony Ricaud (:rik)]

We could also display the count on top of the console icon, like a badge on the icon. That would keep the icon shape, not take up more space and be visible even when the devtools are in small width.

Comment 4

[Codacoder]

Options 2 and 3 are fine by me - and yes, this is needed.

I think a forth option might be to show the count in the main browser UI somewhere but ONLY if configured to do so (average users do not need to see how **** my code is ;)

Comment 5

[Jeff Griffiths (:canuckistani) (:⚡︎)]

+1. Also, we already do this in the developer toolbar which is slated for being folded into the console. Doing this work would not only save that feature but also make it more visible / useful.

Comment 6

[Daniele "Mte90" Scasciafratte]

So a feature like there was on Firebug :-0
I like it!

Comment 7

[Hemakshi Sachdev [:hemakshis]]

Hi Nicolas,
I would like to take up this issue. Could you assign this to me?

Thanks
Hemakshi

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Hey Hemakshi, it's yours :)

Comment 9

[Hemakshi Sachdev [:hemakshis]]

(In reply to Nicolas Chevobbe from comment #8)

Hey Hemakshi, it's yours :)

Thanks a lot!

Can you please tell which options (as mentioned in comment #1) should I go with? :)
I guess option 3 has max votes.

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

Yeah, I think we can try 3. Victoria what's your opinion on this?

Comment 11

[Victoria Wang [:victoria]]

Attachment: number in red text

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?

Comment 12

[Victoria Wang [:victoria]]

Attachment: red text 2

Brighter red may look nicer, and not need a separator

Comment 13

[Hemakshi Sachdev [:hemakshis]]

Attachment: Bug 1109362 - Show the number of errors in the toolbox. r=nchevobbe

Display the number of errors in the toolbox. Count resets to zero on Clear Console Output click and also on reload.

Comment 14

[:Harald Kirschner :digitarald]

I pulled the UX discussion into a UX issue to discuss further and file follow up bugs: https://github.com/firefox-devtools/ux/issues/58 . This shouldn't block the work done here.

Comment 15

[:Harald Kirschner :digitarald]

Finalish UX design is here: https://github.com/firefox-devtools/ux/issues/58#issuecomment-487788863

• Right-aligned in the toolbar.
• Click opens the split console or, when it is already open, focuses it.

:hemakshis, happy to discuss if you have questions or concerns on the UX. Thank you again for helping with this!

Comment 16

[Jan Honza Odvarko [:Honza] (always need-info? me)]

:hemakshis, I left some comments in Phab

Couple more notes:

1. Cached messages are not supported yet. I.e. when I generate a few errors before the Toolbox is opened they are not counted when the Toolbox opens.

2. The UX design decision is to display the number on the right side (not within Console panel tab). So, the rendering should move from ToolboxTab to ToolboxTabs component (we can render either in "toolbox-tabs-wrapper" or "toolbox-tabs" element)

3. There should be an icon rendered before the number (see the mockup on github)

4. If the user clicks the icon or number, split console should open. See this code showing how to open it:
   https://searchfox.org/mozilla-central/rev/f0ef51bfafc8ad0c3a2f523bf076edc57dc4891a/devtools/client/netmonitor/src/app.js#42

Thanks!

Honza

Comment 17

[Hemakshi Sachdev [:hemakshis]]

(In reply to :Harald Kirschner :digitarald from comment #15)

Finalish UX design is here: https://github.com/firefox-devtools/ux/issues/58#issuecomment-487788863

• Right-aligned in the toolbar.
• Click opens the split console or, when it is already open, focuses it.

:hemakshis, happy to discuss if you have questions or concerns on the UX. Thank you again for helping with this!

Hi :digitarald,
I like the UX design especially the idea of having an icon as it gives more meaning to the number shown beside it because the badge option on the right side felt a little confusing as what the numbers could mean to the user (especially if Console is not the active tab).

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #16)

:hemakshis, I left some comments in Phab

Couple more notes:

1. Cached messages are not supported yet. I.e. when I generate a few errors before the Toolbox is opened they are not counted when the Toolbox opens.

For this, as suggested by :nchevobbe, we need to add server functions. I was thinking that the best way of doing this would be to call the getCachedErrorCount function directly and as soon as the toolbox initializes as this will make the count visible even when the current active tab is not "Console" (i.e. is we open devtools with another tab other than Console) and also solve the issue of counts getting doubled when switching to Console tab (as pointed out by Nicolas).

I still have to find how we can call the function residing in the WebConsoleActor from the toolbox.js

2. The UX design decision is to display the number on the right side (not within Console panel tab). So, the rendering should move from ToolboxTab to ToolboxTabs component (we can render either in "toolbox-tabs-wrapper" or "toolbox-tabs" element)

3. There should be an icon rendered before the number (see the mockup on github)

4. If the user clicks the icon or number, split console should open. See this code showing how to open it:
   https://searchfox.org/mozilla-central/rev/f0ef51bfafc8ad0c3a2f523bf076edc57dc4891a/devtools/client/netmonitor/src/app.js#42

Thanks!

Honza

Thanks, :Honza for the pointers! I'll update the patch as soon as possible.

Comment 18

[Florens Verschelde :fvsch]

Here's the minified SVG for the 10px icon discussed on GitHub:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10">
  <path fill="context-fill" fill-rule="evenodd" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10zm-.73-1.86a1.03 1.03 0 1 0 1.46-1.46 1.03 1.03 0 0 0-1.46 1.46zm-.3-3.16c0 .4.46.7 1.03.7.57 0 1.03-.3 1.03-.7v-2.7c0-.4-.46-.71-1.03-.71-.57 0-1.03.31-1.03.7v2.71z"/>
</svg>

Source: Victoria's work with a pixel-fitting tweak, see bottom right icon on:
https://www.figma.com/file/QyMFowXyaMgh5GxZMXc7mL6J/Error-Count-icon

Comment 19

[Patrick Brosset <:pbro>]

Hi Hemakshi, thanks so much for the work done so far. Just wondering, do you still intend to continue working on this bug? Just let us know if you need any help. If you do not plan on working on it anymore, let us know too so it can be made available to others.

Comment 22

[Nicolas Chevobbe [:nchevobbe]]

Let's try to move this over the finish line!

Comment 23

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1109362 - [devtools] Show number of errors in Toolbox toolbar. r=jdescottes,Honza.

This patch displays an error icon matching the number
of errors handled in the console.
An error can be:

• a nsIScriptError that is not a warning
• a console.error call
• a console.assert call
• a 4xx or 5xx network call

The counter is handled via the resourceWatcher of the toolbox,
where we listen for the different resources we need.
Clearing the console from the UI or via console.clear resets
the error count.
Clicking on the icon opens the split console if it wasn't already.
Navigating clears the error count, except if the persist log
option is enabled in the console.

A test is added to ensure this works as expected.

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0f8906c44e4e
[devtools] Show number of errors in Toolbox toolbar. r=jdescottes,Honza.

Comment 25

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/0f8906c44e4e