[Affected versions]: - 57.0b3 build1 (20170925150345) [Affected platforms]: - Windows 10 x64 - Mac OS X 10.11.6 - Ubuntu 16.04 x86 [Steps to reproduce]: 1. Launch Firefox 2. Go to a random website (e.g. https://www.mozilla.org/) 3. Open the Console, toggle the filter bar and leave the Requests label highlighted 4. Choose a random request and click the "Show/hide message details" button 5. Go to the Timings tab and inspect the "Learn More" button [Expected result]: - The Learn More button is fully functional - The button redirects the user to https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor page and the link [Actual result]: - The Learn More corresponding link can be accessed from the entire line, not just using the button (it can be easily noticed if hovering the button and its line)(see the screencast https://goo.gl/SN9Mai) [Regression range]: - This isn't a recent regression, as it's reproducible all the way back to 57.0a1 (2017-08-31), when the http inspection was implemented in the new console

Thanks for the report. Moving to Net monitor component. Honza

Hi guys, I'm a Seneca College student trying to get started in the Open Software world. I'm wondering if I can take this bug and give it a try if nobody else is working on it?

Hi, great, assigning to you. Honza

Hi @mmbabol, Are you still working on this issue? If not, can I take this up?

Hey Abhinav Koppula, I fixed the bug and sent a PR in on GitHub, still waiting for it to get approved. As a side note, is there anything I need to do on bugzilla.mozilla.org once I submit a PR?

(In reply to mmbabol from comment #5) > Hey Abhinav Koppula, I fixed the bug and sent a PR in on GitHub, still > waiting for it to get approved. @mmbabol: can you attach the patch here? Are you still interested in this bug? Honza

Hi, I'm interested in working on this. Can you guide me on how to start?

Some instructions: 1) See the attached screenshot, it shows that the entire line is highlighted (in the Network panel side panel as well as Console panel) 2) Use Browser Toolbox to inspect the UI: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox 3) You can find that the learn more icon is represented by <a> element (with class "devtools-button and learn-more-link") 4) Find related CSS styles and fix the width The style modifications should go to: https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/assets/styles/netmonitor.css Honza

(In reply to Aanchal Agarwal from comment #7) > Hi, I'm interested in working on this. Can you guide me on how to start? Assigned to you! Honza

Thanks! I tried to fix the width of learn-more button.

Comment on attachment 9011779 [details] [diff] [review] FixWidth.patch Review of attachment 9011779 [details] [diff] [review]: ----------------------------------------------------------------- Thanks for the path! The network side panel is fixed. But inspecting the request in the Console panel (see the attached screenshot in the bug) is still broken. The Console panel is including only httpi.css https://searchfox.org/mozilla-central/rev/ffe6eaf2f032e58ec3b0650a87df2c62ae4ca441/devtools/client/webconsole/index.html#21 Which includes NetworkDetailsPanel.css https://searchfox.org/mozilla-central/rev/ffe6eaf2f032e58ec3b0650a87df2c62ae4ca441/devtools/client/netmonitor/src/assets/styles/httpi.css#18 So, you need to put the CSS into NetworkDetailsPanel.css in order to fix the Console part too. Honza Honza ::: devtools/client/netmonitor/src/assets/styles/netmonitor.css @@ +77,5 @@ > + > +.panel-container > .learn-more-link { > + width: -moz-max-content; > + width: max-content; > + width: -webkit-max-content; You should keep just: `width: -moz-max-content;` Also, make sure there are no trailing spaces at the end of the line. Honza

Thanks for the review! I tried fixing the width of learn more button in the Network as well as Console panel.

Comment on attachment 9012169 [details] [diff] [review] Fix-LearnMore.patch Review of attachment 9012169 [details] [diff] [review]: ----------------------------------------------------------------- Thanks for the patch works for me! But please use the following CSS selector, so it's clear (and safe) that it belongs to the Timings panel only. `#timings-panel .learn-more-link` Honza

Thanks for the review! Used the CSS selector #timings-panel .learn-more-link

Comment on attachment 9012718 [details] [diff] [review] Fix-Learn-more.patch Review of attachment 9012718 [details] [diff] [review]: ----------------------------------------------------------------- Thanks! R+ Honza

The next step is to set `checkin-needed` keyword to make sure that somebody lands the patch in the m-c (Mozilla Central) repository. I am doing it for now, so you can see it. Thanks for the help! Honza

Pushed by ebalazs@mozilla.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/5b121e9271ba The Learn More corresponding link exceeds the button's boundaries. r=Honza