Closed Bug 1506073 Opened 11 months ago Closed 9 months ago

URL in the Headers panel should break onto multiple lines

Categories

(DevTools :: Netmonitor, defect, P3)

defect

Tracking

(firefox66 verified)

VERIFIED FIXED
Firefox 66
Tracking Status
firefox66 --- verified

People

(Reporter: Honza, Assigned: lba_2)

References

Details

Attachments

(1 file, 2 obsolete files)

URL in the Headers panel should break onto multiple lines if it's long and there is not enough space on single line.

The URL is currently cropped, which makes it unreadable.

See also a mockup showing how it should look like:
https://mozilla.invisionapp.com/share/C7OT12ISM3N#/screens/327991804_Headers_Panel_7

Honza
Can you please assign me to this bug? thanks.
Lenka
I looked at the way to get the URL links to wrap. But 
input > .anonymous-div has word-wrap: normal !important;

https://searchfox.org/mozilla-central/source/layout/style/res/forms.css#113

It seems like something that I shouldn't change as it is used other places of code. 
So even though I have tried adding wrapping in some higher class e.g. 'headers-summary', the final element that's show overrides it. 
Any hints on how to approach this?
thanks,
Lenka
Flags: needinfo?(odvarko)
(In reply to lba_2 from comment #2)
> I looked at the way to get the URL links to wrap. But 
> input > .anonymous-div has word-wrap: normal !important;
> 
> https://searchfox.org/mozilla-central/source/layout/style/res/forms.css#113
> 
> It seems like something that I shouldn't change as it is used other places
> of code. 
I see

It looks like we could use <div> or <span> instead of the <input> element and style it properly.
The <input> is rendered here:
https://searchfox.org/mozilla-central/rev/007b66c1f5f7a1b9a900a2038652a16a020f010c/devtools/client/netmonitor/src/components/HeadersPanel.js#125

... so it could be easy to change it.

Honza
Flags: needinfo?(odvarko)
Hi Honza,
I have done the wrapping of URL but now I have thought of maybe a better way to do it. So while I try to re-work it, I wanted to get some answers to the following:
I noticed much more differences between the last mock-up (above) and the current state in Nightly. 

1. different wrapping in the lower section `properties-view' - in mock-up the value wraps underneath the label
2. the color of info question mark is lighter in mock-up
3. the padding on the left of the header section is aligned with Response headers title
4. the Filter headers bar is round in mock-up
5. lower case used now for properties labels but in mock-up is used upper case letters also in Response headers
6. in the light mode, the color of labels in header summary is black (bold?) while in Nightly it is grey

So I would like to ask if I should add some of these to the fix that I am working on. For 2. and 4. and 6. I think we would need specific info from Matt.
thank you,
Lenka
Flags: needinfo?(odvarko)
Flags: needinfo?(mcroud)
Hi Lenka,

I believe the wider amends to this panel come under this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1495797

All of your observations are correct, there are many slight changes. To address the points you've highlighted:

The (?) icons are now at 40% opacity (100% on row hover), this reduces their intensity in a cluster and follows the Photon guidelines.

The Filter headers search input appears to be round for me in Nightly already?

I'm not 100% sure what you are referring to as the labels in header summary. If you are referring to "Request URL", "Request method", "Request method" etc I see this as Grey-70 in Nightly which is the same in the mockups.
Flags: needinfo?(mcroud)
Assignee: nobody → lba_2
Status: NEW → ASSIGNED
Flags: needinfo?(odvarko)
Priority: -- → P3
Attached image rectangular searchbar in Nightly 65.0a1 (obsolete) —
@Matt, thank you for your answers. 
What version of Nightly are you using? Because I have 65.0a1 (2018-11-15) (32-bit) (says it's up to date) and I have `Filter headers box` rectangular, not with round edges? Just want to make sure that I am working on the right version :-)

Please see attachment
Ahh this is a Mac/Windows thing.
Search/filter inputs are rounded on Mac but remain square on Windows. Best leave that one then!
Attached patch URLwrapping.patch (obsolete) — Splinter Review
This patch just takes care of the correct wrapping of URL and eventually other lines in the Headers summary panel when resizing.
Attachment #9025648 - Attachment is obsolete: true
Attachment #9025798 - Flags: review?(odvarko)
Comment on attachment 9025798 [details] [diff] [review]
URLwrapping.patch

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

Looks good to me, thanks Lenka!
R+ assuming Try is green

Honza
Attachment #9025798 - Flags: review?(odvarko) → review+
Was green on Try: https://treeherder.mozilla.org/testview.html?repo=try&revision=095fdc1c1e47cc24ad3f91f86b7f6fa711879314

Do I just set the keyword to Checkin-needed?
Flags: needinfo?(odvarko)
(In reply to lba_2 from comment #11)
> Do I just set the keyword to Checkin-needed?
Yes

Honza
Flags: needinfo?(odvarko)
Pushed by nbeleuzu@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/bbe0fe93abc1
URL in Headers panel is wrapping now. r=Honza
Keywords: checkin-needed
Attached patch bug1506073.patchSplinter Review
@Honza, please review the new attached patch. Here is a green try from Treeherder

https://treeherder.mozilla.org/#/jobs?repo=try&revision=e3b7cf2c4adb997e0ad1d32cfeecdfa1aa273e95

I had to additionally change 2 test files since it was testing UI against div and it was changed to a span.
 
thank you,
Lenka
Attachment #9025798 - Attachment is obsolete: true
Flags: needinfo?(lba_2)
Attachment #9028692 - Flags: review?(odvarko)
Comment on attachment 9028692 [details] [diff] [review]
bug1506073.patch

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

Looks great, thanks for the patch Lenka!

Also tested on Win10 and works for me.

R+

Honza
Attachment #9028692 - Flags: review?(odvarko) → review+
Keywords: checkin-needed
Pushed by ncsoregi@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/4a7a9e081b75
URL in Headers panel is wrapping now, plus 2 tests adapted for netmonitor. r=Honza
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/4a7a9e081b75
Status: ASSIGNED → RESOLVED
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66

I have reproduced this bug with Nightly 65.0a1 (2018-11-09) on Windows 7, 64 Bit. This fix of this bug is verified with latest Beta 66.0b14!

Build ID : 20190307095232
User Agent : Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

[testday-20190308]

Thank you, Mohammad Maruf Rahman!

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