706337 - Side panel on Addon SDK documentation has unpleasant display:inline

Status: RESOLVED FIXED

(Add-on SDK Graveyard :: Documentation, defect, P3)

Description

[Matthew McPherrin]

The list of modules in addon-kit is hard to read because there are multiple items per line in what would otherwise be a vertical list.

The code I object to is from sdk-docs.css

.package-summary .module,
.package-entry .module,
.package-detail .module {
  display: inline;
  white-space: nowrap;
  margin-left: 0em;
}

Using the Firefox style inspector to remove that display: inline makes the page list readable again.

Comment 1

[Matthew McPherrin]

Attachment: Screenshot of problem and (my) desired resolution

Comment 2

[Will Bamberg [:wbamberg]]

I agree that the modules look better in a vertical list. But the inline display is intentional, and the reasoning is to make the best use of vertical screen space.

If the modules are displayed in a vertical list, you won't (generally, depending on your screen resolution) be able to see the whole list in a screenful. So important modules like widget and windows will get cut off (let alone other important reference pages like cfx), then you have to scroll each time you want to get to their reference documentation.

That's just my preference, and I'm still inclined to think that it's better the way it is. But I'm happy to change it if I'm in a minority, and I'm very happy to hear about other good ways to organize this content.

Comment 3

[Matthew McPherrin]

(In reply to Will Bamberg [:wbamberg] from comment #2)
> If the modules are displayed in a vertical list, you won't (generally,
> depending on your screen resolution) be able to see the whole list in a
> screenful. So important modules like widget and windows will get cut off
> (let alone other important reference pages like cfx), then you have to
> scroll each time you want to get to their reference documentation.

I think scrolling to view a list is a pretty "normal" thing on the web.

I missed that the "tabs" module existed because it was "hiding" along side another, so for a long time I had assumed Jetpack was missing that functionality.

I have a fairly strong preference for a vertical list, but I could be odd.

Comment 4

[Myk Melez [:myk] [@mykmelez]]

Separating module names with bullets (•) would also distinguish them more clearly without lengthening them significantly.

Comment 5

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

Will, what do you think should be done here?

Comment 6

[Will Bamberg [:wbamberg]]

If it's OK, I'd like to leave this open. I'm still not convinced that a vertical list is right for the reasons I gave: it's not so much that people can't work out how to scroll, as that it's another user action every single time for someone who want to view those docs whose links get cut off. Although, I'm also open to being convinced otherwise if I'm the only person who thinks this.

But it's clear there is some problem here worth looking at.

It's not obvious to me that bullets are the best option either. Maybe. Maybe vertical bars | might work better, or having a complete border round each module. So I'd like to leave it open, and we can experiment with different styles to fix it. I won't get a chance to look at it very soon though.

Comment 7

[Will Bamberg [:wbamberg]]

I fixed this as part of the fix for bug 727272. I agree now, a vertical list looks much better. Thanks!

Fixed by: https://github.com/mozilla/addon-sdk/commit/4e22d237650781a42874e95d3b8f9990a83c86cb.