Closed Bug 1658460 Opened 6 months ago Closed 5 months ago

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

Categories

(DevTools :: Console, enhancement)

enhancement

Tracking

(firefox81 verified)

VERIFIED FIXED
81 Branch
Tracking Status
firefox81 --- verified

People

(Reporter: victoria, Assigned: nikhilkumar.c16)

Details

(Keywords: good-first-bug)

Attachments

(5 files)

Attached image 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.

Keywords: good-first-bug

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

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

Assignee: nobody → nikhilkumar.c16
Status: NEW → ASSIGNED
Attached image Updated code —
Attached image 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 ?

Flags: needinfo?(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).

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

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

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

Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/becc3ea7419d
Swap collapse and block icons for blocked network message. r=nchevobbe
Status: ASSIGNED → RESOLVED
Closed: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → 81 Branch

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

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.