656545 - Make about:memory tool-tips more discoverable

Status: RESOLVED FIXED

(Toolkit :: about:memory, defect)

Description

[Nicholas Nethercote [inactive]]

In about:memory, all the entry names have "title" attributes, which means that if you hover over them you get an explanation.  This explanation is quite important, esp. for some of the weird cases (eg. the huge "mapped" values on Mac, which aren't our fault).

This isn't very discoverable.  Some ideas for improving this:

- widening the scope of the tool-tip so it appears if you hover over anywhere in a line, not just the name of the reporter

- using a :hover selector to change the font when you hover over a line

- writing some text saying "hover over the entries for details" at the top or the bottom

None of these help people with touch-screens, though.  Not sure what to do about that.

Comment 1

[Nicholas Nethercote [inactive]]

Something better:

- If you hover over an entry it changes visually (eg. gets underlined)
- If you click on it you get the description pop up somewhere nearby, like a tool-tip.

The 2nd might not be that easy in the current <pre>-based form.  Bug 654917 would make this easier.

Comment 2

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: add underline to items when hovered

This adds the underline effect to the name parts of each row when :hover'ed. 

Still not very discoverable without knowing about it, though. :(

Comment 3

[Justin Dolske [:Dolske]]

TBH, I wouldn't worry about this much.

In it's current form, about:memory is a highly technical tool (experimental, even), largely useful to those who already understand things. Better to iterate quickly on that, discover what data we we want to know / what questions to answer, and then as a second phase figure out how to make the best UI for it given those requirements.

Comment 4

[Nicholas Nethercote [inactive]]

Dolske, I'm mostly worried about people who see the 3GB "mapped" number on Mac (which includes shared memory and so is pretty bogus) and will say "ZOMG Firefox is a bloated pig!!!"

Comment 5

[Nicholas Nethercote [inactive]]

Comment on attachment 531859 [details] [diff] [review]
add underline to items when hovered

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

I don't think just underlining really helps.  I'll work on a patch this afternoon.

Comment 6

[Nicholas Nethercote [inactive]]

Oh, you misspelt "text-decoration" as well :P

Comment 7

[Nicholas Nethercote [inactive]]

Attachment: patch

After more consideration, the underlining isn't bad.  And I added some text at the bottom explaining things.

Some other things I tried that I didn't like so much:

- Making the tool-tip activate anywhere on the entry, not just the name.  It felt weird when the tool-tip activated when the pointer was over the number.

- Using CSS to construct my own tool-tip that popped up as soon as the pointer went over a name (as opposed to the title-atttribute tool-tips that occur after pausing for a second or two).  I wasn't happy with how they looked.

- Using window.alert() to pop up the description when clicked on.  Would be good for touchscreens, but seemed clunky.

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Comment on attachment 532128 [details] [diff] [review]
patch

One, I'm not a reviewer.

And two, this doesn't look like the right patch for this bug. (Don't see "aboutMemory" anywhere in there...)

Comment 9

[Nicholas Nethercote [inactive]]

Comment on attachment 532128 [details] [diff] [review]
patch

True!  Wrong patch.  I'll try again next week.

Comment 10

[Nicholas Nethercote [inactive]]

Attachment: patch v2

Comment 11

[Shawn Wilsher :sdwilsh]

Comment on attachment 532865 [details] [diff] [review]
patch v2

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

r=sdwilsh

::: toolkit/components/aboutmemory/content/aboutMemory.js
@@ +230,5 @@
> +
> +  text += "<div>" +
> +          "<span class='legend'>Hover the pointer over the name of a memory " +
> +          "reporter to see a detailed description of what it measures.</span>"
> +          "</div>";

You should just drop the <span> and put the class on the <div> I think.

Comment 12

[Nicholas Nethercote [inactive]]

(In reply to comment #11)
> 
> You should just drop the <span> and put the class on the <div> I think.

I just tried that but it removed a small amount of vertical whitespace between the lines which made it look too squished, so I'll keep it as is.

Comment 13

[Nicholas Nethercote [inactive]]

http://hg.mozilla.org/mozilla-central/rev/eb1e4d0e8f5c