Open Bug 1109362 Opened 5 years ago Updated 7 days ago

Show the number of errors in the toolbox

Categories

(DevTools :: Console, enhancement, P3)

x86
macOS
enhancement

Tracking

(Not tracked)

ASSIGNED

People

(Reporter: bgrins, Assigned: hemakshis, NeedInfo)

Details

(Whiteboard: [devtools-backward-compat])

Attachments

(3 files)

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.
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
fwiw I like option 3. Could we show a badge with the number of errors in the console tab?
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.
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 ;)
+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.
So a feature like there was on Firebug :-0
I like it!
Severity: normal → enhancement
Component: Developer Tools: Framework → Developer Tools: Console
Product: Firefox → DevTools
Priority: -- → P3

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

Thanks
Hemakshi

Flags: needinfo?(nchevobbe)

Hey Hemakshi, it's yours :)

Assignee: nobody → sachdev.hemakshi
Status: NEW → ASSIGNED
Flags: needinfo?(nchevobbe)

(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.

Flags: needinfo?(nchevobbe)

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

Flags: needinfo?(nchevobbe) → needinfo?(victoria)
Attached image 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?

Flags: needinfo?(victoria)
Attached image red text 2

Brighter red may look nicer, and not need a separator

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

Attachment #9058953 - Attachment description: Bug 1109362 - Shown the number of errors in the toolbox. r=nchevobbe → Bug 1109362 - Show the number of errors in the toolbox. r=nchevobbe

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.

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!

Flags: needinfo?(sachdev.hemakshi)

: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

(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

  1. 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)

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

  3. 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.

Flags: needinfo?(sachdev.hemakshi)

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

Whiteboard: [devtools-backward-compat]

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.

Flags: needinfo?(sachdev.hemakshi)
You need to log in before you can comment on or make changes to this bug.