Closed Bug 656545 Opened 11 years ago Closed 11 years ago

Make about:memory tool-tips more discoverable

Categories

(Toolkit :: about:memory, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla6

People

(Reporter: n.nethercote, Assigned: n.nethercote)

Details

Attachments

(1 file, 2 obsolete files)

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.
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.
This adds the underline effect to the name parts of each row when :hover'ed. 

Still not very discoverable without knowing about it, though. :(
Attachment #531859 - Flags: review?(nnethercote)
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.
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 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.
Attachment #531859 - Flags: review?(nnethercote) → review-
Oh, you misspelt "text-decoration" as well :P
Attached patch patch (obsolete) — Splinter Review
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.
Attachment #531859 - Attachment is obsolete: true
Attachment #532128 - Flags: review?(kwierso)
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...)
Attachment #532128 - Flags: review?(kwierso)
Comment on attachment 532128 [details] [diff] [review]
patch

True!  Wrong patch.  I'll try again next week.
Attachment #532128 - Attachment is obsolete: true
Attached patch patch v2Splinter Review
Attachment #532865 - Flags: review?(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.
Attachment #532865 - Flags: review?(sdwilsh) → review+
(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.
http://hg.mozilla.org/mozilla-central/rev/eb1e4d0e8f5c
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Component: General → about:memory
QA Contact: general → about.memory
Target Milestone: --- → mozilla6
You need to log in before you can comment on or make changes to this bug.