Side panel on Addon SDK documentation has unpleasant display:inline

RESOLVED FIXED

Status

Add-on SDK
Documentation
P3
normal
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: mcpherrin, Assigned: wbamberg)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
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.
(Reporter)

Comment 1

6 years ago
Created attachment 577826 [details]
Screenshot of problem and (my) desired resolution
(Assignee)

Comment 2

6 years ago
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.
(Reporter)

Comment 3

6 years ago
(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.
Separating module names with bullets (•) would also distinguish them more clearly without lengthening them significantly.
Will, what do you think should be done here?
Whiteboard: [triage:followup]
(Assignee)

Comment 6

6 years ago
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.

Updated

6 years ago
Priority: -- → P3
Whiteboard: [triage:followup]
(Assignee)

Updated

6 years ago
Assignee: nobody → wbamberg
(Assignee)

Comment 7

6 years ago
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.
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.