Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Description • 6 years ago

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

	Lenka Pelechova Assignee
	Comment 1 • 6 years ago

Can you please assign me to this bug? thanks.
Lenka

	Lenka Pelechova Assignee
	Comment 2 • 6 years ago

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

	Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Comment 3 • 6 years ago

(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

	Lenka Pelechova Assignee
	Comment 4 • 6 years ago

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

	mcroud
	Comment 5 • 6 years ago

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.

	Lenka Pelechova Assignee
	Comment 7 • 6 years ago

@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

	mcroud
	Comment 8 • 6 years ago

Ahh this is a Mac/Windows thing.
Search/filter inputs are rounded on Mac but remain square on Windows. Best leave that one then!

	Lenka Pelechova Assignee
	Comment 9 • 6 years ago

This patch just takes care of the correct wrapping of URL and eventually other lines in the Headers summary panel when resizing.

	Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Comment 10 • 6 years ago

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

	Lenka Pelechova Assignee
	Comment 11 • 6 years ago

Was green on Try: https://treeherder.mozilla.org/testview.html?repo=try&revision=095fdc1c1e47cc24ad3f91f86b7f6fa711879314

Do I just set the keyword to Checkin-needed?

	Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Comment 12 • 6 years ago

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

Honza

	Lenka Pelechova Assignee
	Comment 13 • 6 years ago

green on Try: https://treeherder.mozilla.org/testview.html?repo=try&revision=095fdc1c1e47cc24ad3f91f86b7f6fa711879314

	Pulsebot
	Comment 14 • 6 years ago

Pushed by nbeleuzu@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/bbe0fe93abc1
URL in Headers panel is wrapping now. r=Honza

	Eliza Balazs [:ebalazs_]
	Comment 15 • 6 years ago

Backed out changeset bbe0fe93abc1 (Bug 1506073) for dt failures in devtools/client/netmonitor/test/browser_net_header-ref-policy.js

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&resultStatus=testfailed%2Cbusted%2Cexception%2Cusercancel%2Crunnable&selectedJob=213564109&revision=bbe0fe93abc15eb745d7870dc57875d9773f9359

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=213564109&repo=mozilla-inbound&lineNumber=3660

Backout push: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&resultStatus=testfailed%2Cbusted%2Cexception%2Cusercancel%2Crunnable&revision=a1cd697c733cd1fb28e585acee93d6cd8d3048bc

	Lenka Pelechova Assignee
	Comment 16 • 6 years ago

@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

	Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Comment 17 • 5 years ago

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

	Pulsebot
	Comment 18 • 5 years ago

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

	Cristina Coroiu [:ccoroiu]
	Comment 19 • 5 years ago
bugherder

https://hg.mozilla.org/mozilla-central/rev/4a7a9e081b75