1658460 - Swap ▶️ and 🚫 icons (in blocked network messages in Console)

Status: VERIFIED FIXED

(DevTools :: Console, enhancement)

Description

[Victoria Wang [:victoria]]

Attachment: image.png

For blocked network messages in Console, we should swap the disclosure arrow and the 'blocked' icon so that the arrow lines up with all the other arrows. The blocked icon can be lined up with "GET" and the XHR badge in the below screenshot.

Comment 1

[nikhil]

Hi, Can I work on this issue. It will be a good one, as I am getting started with development.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Hello nikhil, thanks for offering help!
The bug is now yours.
The icon is created here https://searchfox.org/mozilla-central/rev/3434a9df60373a997263107e6f124fb164ddebf2/devtools/client/webconsole/components/Output/Message.js#293
And I guess the idea would be to detect if this is a blocked network request, we should append it after the arrow (see https://searchfox.org/mozilla-central/rev/3434a9df60373a997263107e6f124fb164ddebf2/devtools/client/webconsole/components/Output/Message.js#425-426)

If it's your first bug, you might want to read this https://firefox-source-docs.mozilla.org/devtools/getting-started/README.html to setup the work environment.
Make sure to select "Artifact builds" when asked as it speeds up the workflow quite a bit :)
Also, you can come and chat on Matrix https://chat.mozilla.org/#/room/#devtools:mozilla.org

Comment 3

[nikhil]

Attachment: Updated code

Comment 4

[nikhil]

Attachment: Final Result

I got the final result as shown in the image after updating the order of the icon[comment 3]. Shall I push the changes for reviewing ?

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

That sound great, but from what I see in Comment 3, this would also impact other messages (like error messages for example), which is something we don't want.
We only want to change the order if the message is a blocked network request (you can check that with this.props.isBlockedNetworkMessage).

Comment 6

[nikhil]

Attachment: code.PNG

I have used ternary operator for checking the Blocked Network Message. Is it right implementation and does it cause any performance issue if we implement it in this way ? .

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

yes, I think this is good :)
Next step now is to commit and push to phabricator, you can read https://firefox-source-docs.mozilla.org/devtools/contributing/making-prs.html about this

Comment 8

[nikhil]

Attachment: Bug 1658460 - Swap collapse and block icons for blocked network message. r=nchevobbe

Comment 9

[nikhil]

Thanks for mentoring me on my first bug. I will try my best to solve more bugs in Mozilla.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/becc3ea7419d
Swap collapse and block icons for blocked network message. r=nchevobbe

Comment 11

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/becc3ea7419d

Comment 12

[Cristian Fogel [:cfogel]]

Verified with 81.0b2 on Windows 10, macOS 10.15, Ubuntu 20.