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)

Product:
Toolkit
Component:
about:memory
Platform:
ARM
Android
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1280615

People

(Reporter: steffen.wilberg, Assigned: justin.lebar+bug)

References

(
URL
)

Details

Attachments

(5 files, 1 obsolete file)

screenshot of Fennec Native
106.36 KB, image/png
Details
Testcase demonstrating fixed-width overflow problem (open in native Fennec)
67.82 KB, application/xhtml+xml
Details
screenshot of testcase with initial zoom
117.90 KB, image/png
Details
screenshot of testcase zoomed out as far as possible
119.99 KB, image/png
Details
Patch v1
3.04 KB, patch
n.nethercote
: review+
Details | Diff | Splinter Review 
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.
jlebar added that CSS! :)
Assignee: nobody → justin.lebar+bug
I will happily review a patch.  :)
Having about:memory unreadably on phones is really bad.  jlebar, can you address this?
And the fix should probably be back-ported to Aurora/Beta as necessary.
Whiteboard: [MemShrink]
> 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.
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.
(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.
> > 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.
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"/>
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.
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.
Oh, well it works if I update from yesterday's nightly to today's!  Thanks for looking into this, Steffen.
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.
Attached patch WIP v1 (obsolete) — — Splinter Review 
Works if you comment out about.css from aboutMemory.xhtml.
Ah, so Firefox (and Android and iOS) don't support the "handheld" query.

I'll just use screen width.
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?
Or, we could just decrease the font size when width < 1000px, get rid of the extra about.css padding, and call it a day.
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.
Whiteboard: [MemShrink] → [MemShrink:P2]
> I'll just use screen width.

What media query did you actually use?
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?
Try min-device-width instead of min-width?
(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.)
> 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.
> 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.
Attached patch Patch v1 — — Splinter Review 
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)
Attachment #583901 - Attachment is obsolete: true
Depends on: 716725
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+
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.
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.
> 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 :)
Whiteboard: [MemShrink:P2]
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.

Attachment

General

Creator:
Created:
Updated:
Size: