Closed
Bug 706431
Opened 13 years ago
Closed 5 years ago
about:memory non-verbose cuts off content on small screens (phones)
Categories
(Toolkit :: about:memory, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 1280615
People
(Reporter: steffen.wilberg, Assigned: justin.lebar+bug)
References
()
Details
Attachments
(5 files, 1 obsolete file)
aboutMemory.css has this: body.non-verbose pre.tree { overflow-x: hidden; text-overflow: ellipsis; } That means you can't scroll horizontally, the content is simply cut off.
Reporter | ||
Comment 1•13 years ago
|
||
We could use media queries here: https://developer.mozilla.org/en/CSS/media_queries
![]() |
||
Comment 5•13 years ago
|
||
Having about:memory unreadably on phones is really bad. jlebar, can you address this?
![]() |
||
Comment 6•13 years ago
|
||
And the fix should probably be back-ported to Aurora/Beta as necessary.
Whiteboard: [MemShrink]
Assignee | ||
Comment 7•13 years ago
|
||
> body.non-verbose pre.tree {
> overflow-x: hidden;
> text-overflow: ellipsis;
>}
This is one problem. But then even in verbose mode, there's no overflow: ellipsis, but you still can't pinch-to-zoom-out.
I'm not really sure how this should work. We want the default zoom to be readable, but then you should be able to pinch to zoom out, and you should be able to scroll horizontally...
I'll work on this tomorrow, but I may need some help with the CSS.
Assignee | ||
Comment 8•13 years ago
|
||
I think Fennec native is too immature to handle the clever CSS things we have on desktop. My browser randomly stops scrolling, for example. I guess we're just going to have to do the original hack, where we truncated the compartment names.
Reporter | ||
Comment 9•13 years ago
|
||
(In reply to Justin Lebar [:jlebar] from comment #8) > I think Fennec native is too immature to handle the clever CSS things we > have on desktop. What do you mean? about:memory looks the same on desktop if I make the window small enough, it doesn't let me scroll either. And verbose mode works fine on mobile. You already have body.verbose { /* override setting in about.css */ max-width: 100% !important; } If you make that apply to non-verbose mode as well (see comment 1), it already helps a lot. It looks a bit strange since most of the text overflows the white body to the right, but that's cosmetic.
Assignee | ||
Comment 10•13 years ago
|
||
> > I think Fennec native is too immature to handle the clever CSS things we > > have on desktop. > What do you mean? In non-verbose mode, I want to cut off long compartment URLs. Otherwise one long Google+ URL can make the page scroll horizontally basically forever. The natural thing to do would be to fix the page width and then set overflow-x: hidden. In fact, this works on desktop and on the stock Android browser. But it doesn't appear to work on Fennec. I have an e-mail in to bz about this. We'll see if I'm doing something wrong or if there's something wrong with Fennec.
Assignee | ||
Comment 11•13 years ago
|
||
Reporter | ||
Comment 12•13 years ago
|
||
The screenshot of the testcase shows the initial zoom (press reload from the menu to reset). It's about one third of the width of the document. Good idea to get rid of the border and padding. I'd set the initial zoom to a lower value however. You could try <meta name="viewport" content="width=480; initial-scale=.6667"/>
Assignee | ||
Comment 13•13 years ago
|
||
The problem is, I can't zoom out when I load the page in Fennec. I can zoom out on the stock browser. This is what I'm trying to understand.
Reporter | ||
Comment 14•13 years ago
|
||
This shows the testcase zoomed out as far as possible, i.e. the document width, so you can't scroll horizontally anymore. It could use ellipses, but otherwise it's just fine. The "zoomed page keeps unzooming while it finishes loading" is bug 708746.
Assignee | ||
Comment 15•13 years ago
|
||
Oh, well it works if I update from yesterday's nightly to today's! Thanks for looking into this, Steffen.
Assignee | ||
Comment 16•13 years ago
|
||
Sorry, I'm not going to get this to work before my holiday. The problem now is that my media query to disable about.css (the default style with padding and so on) either is malformed or is being ignored. Not sure which.
Assignee | ||
Comment 18•13 years ago
|
||
Ah, so Firefox (and Android and iOS) don't support the "handheld" query. I'll just use screen width.
Assignee | ||
Comment 19•13 years ago
|
||
It looks like the cutoff width needs to be 1000px in order to work properly on my nexus-S, presumably because of how we lie about pixels in CSS. So this means that our options are: 1. Display something different on desktop when the window is less than 1000px (modulo lying) wide. (I'm not sure how wide the window is in landscape, because Fennec consistently crashes when I change the orientation.) 2. Use a different stylesheet on mobile than on desktop. 3. Back out the text-overflow: ellipsis change and go back to truncating the compartment (and now layout shell) names in JS. I don't like (1) because my desktop browser window is often about 1000px wide, and anyway it will break when a new phone comes out with a different size, even if we figure out the orientation thing. I don't like (2) because it's effectively UA-sniffing. ...which brings us to option (3). Nick, what do you think?
Assignee | ||
Comment 20•13 years ago
|
||
Or, we could just decrease the font size when width < 1000px, get rid of the extra about.css padding, and call it a day.
Assignee | ||
Comment 21•13 years ago
|
||
Having fought against this all day today and most of the day before the holidays, I'm tempted to say that I no longer care. Native Fennec isn't stable enough to survive an orientation change on my phone, and loading about:memory flashes and zooms five different white pages and checkerboards. Pinch to zoom no longer works on Fennec XUL, so most of the fixes we might make wouldn't apply there. If you really care about which compartments are using memory, verbose mode works fine.
![]() |
||
Updated•13 years ago
|
Whiteboard: [MemShrink] → [MemShrink:P2]
Assignee | ||
Comment 23•13 years ago
|
||
Apply desktop style with query @media all and (min-width: 1000px). (I tried screen and (min-width) but iirc that didn't work.) Maybe ems would be a better unit?
![]() |
||
Comment 25•13 years ago
|
||
(Note that it will still return the value in CSS px, but it won't have the problem of measuring the size of your browser window, I would hope.)
Assignee | ||
Comment 26•13 years ago
|
||
> Try min-device-width instead of min-width?
That's a definite improvement; min-device-width: 500px matches when the device is in portrait mode, but not when it's in landscape mode.
I'm tempted to go back to how about:memory used to be, where we truncated URIs after a certain length.
![]() |
||
Comment 27•13 years ago
|
||
> I'm tempted to go back to how about:memory used to be, where we truncated
> URIs after a certain length.
Sounds reasonable to me.
Assignee | ||
Comment 28•13 years ago
|
||
With some help from the webdev folks, I figured out the right set of moz-specific CSS flags to get this right. Basically, I just set a minimum width on the content area, so on mobile, it should scroll horizontally. Unfortunately, it doesn't work properly on native fennec. I think it should, though; it works fine in desktop firefox if I reduce the window width (and change min-device-width min-width in the css). I'll file a separate bug. The main changes for desktop users are: * smaller font size, and * URIs won't be cut off in non-verbose about:memory until they hit width of the window. In practice, this means that about:memory always takes up the full width of your browser window, unless it's very wide. One nice change is that, when the window scrolls horizontally (e.g. in verbose mode on desktop), the white background is as wide as the widest line of text. (Right now, the white background ends at one screen width from the start, and text overflows onto the gray background.)
Attachment #587177 -
Flags: review?(n.nethercote)
Assignee | ||
Updated•13 years ago
|
Attachment #583901 -
Attachment is obsolete: true
![]() |
||
Comment 29•13 years ago
|
||
Comment on attachment 587177 [details] [diff] [review] Patch v1 Review of attachment 587177 [details] [diff] [review]: ----------------------------------------------------------------- I'm no CSS expert so I'm reviewing this from the POV of what it looks like. I don't love the font shrinkage; in particular, on my Mac the font is already pretty small, this'll make it tiny. But I'm reluctant to force you to change it because I understand how painful this patch has been.
Attachment #587177 -
Flags: review?(n.nethercote) → review+
Assignee | ||
Comment 30•13 years ago
|
||
I'd forgotten that the about:memory text is so much bigger on Linux than on Mac. No way we can go smaller on Mac. I'll see what I can cook up.
Assignee | ||
Comment 31•13 years ago
|
||
njn, do you want to check this in now, as a forcing function for the Fennec layout issue (bug 716725)? Or do you want to wait until that issue is fixed? I'm tempted to wait, unless you think the changes to desktop (not cutting off URIs in non-verbose mode, not overrunning the container in verbose mode) are beneficial.
![]() |
||
Comment 32•13 years ago
|
||
> I'm tempted to wait, unless you think the changes to desktop (not cutting
> off URIs in non-verbose mode, not overrunning the container in verbose mode)
> are beneficial.
Sounds fine; those desktop improvements are minor :)
![]() |
||
Updated•13 years ago
|
Whiteboard: [MemShrink:P2]
![]() |
||
Updated•5 years ago
|
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•