Closed Bug 1506073 Opened 3 years ago Closed 3 years ago
URL in the Headers panel should break onto multiple lines
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
(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
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
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.
Assignee: nobody → lba_2
Status: NEW → ASSIGNED
Priority: -- → P3
@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!
This patch just takes care of the correct wrapping of URL and eventually other lines in the Headers summary panel when resizing.
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?
(In reply to lba_2 from comment #11) > Do I just set the keyword to Checkin-needed? Yes Honza
Pushed by email@example.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/bbe0fe93abc1 URL in Headers panel is wrapping now. r=Honza
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
@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
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+
Pushed by firstname.lastname@example.org: https://hg.mozilla.org/integration/mozilla-inbound/rev/4a7a9e081b75 URL in Headers panel is wrapping now, plus 2 tests adapted for netmonitor. r=Honza
You need to log in before you can comment on or make changes to this bug.