Closed Bug 801067 Opened 7 years ago Closed 6 years ago

The Web Console should highlight the categories when new messages appear in them

Categories

(DevTools :: Console, defect, P3)

defect

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 879367

People

(Reporter: jaws, Assigned: jaws)

References

(Blocks 1 open bug)

Details

(Whiteboard: [console-output])

Attachments

(1 file, 1 obsolete file)

Today I was using the Web Console and trying to test some one-line JS scripts.

For example, I tried the following scripts:
> let a = [1,2,3];
> for each (let i in a) { console.log(i); }

This then showed "undefined" but I never saw the logging messages.

At first I thought that maybe log messages originating from the Web Console might not show up in the Web Console, but then I remembered! A couple days earlier I had unchecked Logging messages in the Web Console. Ah, that was it!

So long story short, I think we should highlight the appropriate Filter message when one gets filtered. This would have shown me that new logging messages were incoming but getting blocked. This could be a simple glow so it's not annoying but it could do a single pulse for each log message.
nice idea.
Whiteboard: [console-output]
This is a work-in-progress patch that is rough and doesn't work correctly, but might be close to what is desired.

There is a bug in the code to determine if there are any hidden nodes available. I think once that is fixed it should work.

It would be nice to tweak it so it doesn't need to check all four filters each time that the messages are appended to the console.
Whiteboard: [console-output] → [console-output][good first bug][mentor=jaws][lang=js]
Attached patch PatchSplinter Review
Mihai, what do you think about this?
Assignee: nobody → jwein
Attachment #703025 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #712817 - Flags: feedback?(mihai.sucan)
Whiteboard: [console-output][good first bug][mentor=jaws][lang=js] → [console-output]
Comment on attachment 712817 [details] [diff] [review]
Patch

Review of attachment 712817 [details] [diff] [review]:
-----------------------------------------------------------------

Thank you for the patch! This looks good.

Problem #1: button highlights show when they shouldn't. Open the web console, open a web page, so you have network messages shown. Hide network messages. Then eval console.log("foo"). Now the "net" button is highlighted. I would expect it is highlighted only for new messages, only if some new net message comes in.

Problem #2: I'm concerned by the performance implications of this patch. You added 4 calls to _updateToolbarbuttonHighlight(), each time messages are flushed to the output. Each call to _updateToolbarbuttonHighlight() does one expensive call to querySelectorAll() and one call to querySelector(). This is quite a lot in a rush of messages coming from a web-based game.

I suggest that the way you track if a new message is available avoids querySelectorAll() entirely: you can keep a count of new messages per-category. This count would be reset every time you enable the filter for that category. This would fix both of the problems mentioned above. Also, you should only call _updateToolbarbuttonHighlight() at the end of a queue - see when regroupOutput() is invoked.

I'm looking forward for the updated patch. Thanks!

::: browser/devtools/webconsole/webconsole.js
@@ +608,5 @@
>        Services.prefs.clearUserPref("devtools.webconsole.fontSize");
>      }
>    },
>  
> +  _updateToolbarbuttonHighlight: function(aCategory, aNodeMsgType) {

nits: please follow the coding style of the file:

- always add a function name, here WCF__update...
- add a comment that describes the function.
- always use curly brackets for conditions and loops.

@@ +658,5 @@
>          let state = target.getAttribute("checked") !== "true";
>          target.setAttribute("checked", state);
>  
> +        if (state)
> +          target.removeAttribute("highlight");

Ditto.

::: browser/themes/gnomestripe/devtools/webconsole.css
@@ +113,5 @@
>    display: none;
>  }
>  
> +.webconsole-filter-button[highlight]:not(:active) {
> +  box-shadow: 0 0 3px rgb(159,223,255);

I'd like the highlight to be slightly more obvious. Maybe you should ask Paul if he has any preferences.
Attachment #712817 - Flags: feedback?(mihai.sucan) → feedback+
Priority: -- → P3
Fixing bug 879367 would be a better solution and would obsolete this bug.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 879367
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.