Page MenuHomePhabricator

jsdoc-wmf-theme: All non-global classes are lacking hierarchy
Open, HighPublic

Description

The navigation for basically all output except for global classes is currently quite hard to understand. There are big gaps and it is not fulfilling its purpose as an easier entry point than the source code.

This is a meta-task of sorts since the solution is TBD, although there will be various small straight-forward improvements we can make for sure that might suffice in resolving the task as well.

Status quo

The navigation is organised in three ways: Namespaces, Classes, Modules.

Namespaces:

  • I'm not sure what this is currently. I would expect classes within a namespace to show up, but they don't. Using Parsoid-JS as an example many of the namespace pages are empty with no way to discover the relevant classes it contains.
  • The menu is missing hierarchy. Only the last part is shown, no sub menus or full names. This is essential to have.

Screenshot 2020-09-09 at 14.09.43.png (866×1 px, 211 KB)

Classes:

  • The menu is missing hierarchy. Only the last part is shown, no sub menus or full names. This is essential to have.

Screenshot 2020-09-09 at 14.09.08.png (968×1 px, 173 KB)

Modules:

  • This contains groups of functions and classes that are accessed primarily through require and thus mainly named after their file path.
  • Local functions are documented directly on the module page, similar to how one would for methods of a singleton class page. The internal qualified name for these functions is module:mymodule~myFunction which makes sense.
  • Local classes are given a small placeholder that links to a page under the Classes navigation. The internal qualified name for these is module:mymodule~MyClass which makes sense.

Event Timeline

@Krinkle We've done some refactoring of the docs structure and are completing theme improvements (see the theme board - incomplete tasks for the initial migration are in the "Migration of core docs" column; completed tasks are in "Pending release" until the next theme release is done). Would you mind reviewing this task and letting me know if there is anything outstanding that's not already captured in another task? Happy to chat about this if it's easier.

Change 1011376 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] [POC] New doc

https://gerrit.wikimedia.org/r/1011376

Change 1011379 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[jsdoc/wmf-theme@master] [POC][WIP] Support custom pages and customizing the menu, add site map

https://gerrit.wikimedia.org/r/1011379

Change #1011379 abandoned by Jdlrobson:

[jsdoc/wmf-theme@master] [POC][WIP] Support custom pages and customizing the menu, add site map

Reason:

I have split this out into multiple patchsets now.

https://gerrit.wikimedia.org/r/1011379

Change #1013613 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[jsdoc/wmf-theme@master] Add breadcrumb navigation

https://gerrit.wikimedia.org/r/1013613

Change #1013613 merged by jenkins-bot:

[jsdoc/wmf-theme@master] Add breadcrumb navigation

https://gerrit.wikimedia.org/r/1013613

Change #1013617 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[jsdoc/wmf-theme@master] Support the creation of custom pages for top level nav items

https://gerrit.wikimedia.org/r/1013617

Change #1013617 merged by jenkins-bot:

[jsdoc/wmf-theme@master] Support the creation of custom pages for top level nav items

https://gerrit.wikimedia.org/r/1013617

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/9601f9ba26/w

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b11a569b70/w

Change #1011376 abandoned by Alex Paskulin:

[mediawiki/core@master] [POC] New doc

Reason:

in favor of https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1020947

https://gerrit.wikimedia.org/r/1011376

apaskulin subscribed.

Namespaces: I'm not sure what this is currently. I would expect classes within a namespace to show up, but they don't. Using Parsoid-JS as an example many of the namespace pages are empty with no way to discover the relevant classes it contains.

The namespaces section includes things tagged with @namespace. Each namespace page now contains a list of classes within the namespace. In the sidebar, all classes are listed under Classes, regardless of their namespace membership.

Only the last part is shown, no sub menus or full names.

The useLongnameInNav config option (documented on the wiki page) displays the full name in the sidebar. I agree that this is really helpful to have.

The menu is missing hierarchy.

The simple way to do this would be to indicate hierarchy by indenting items under other items, similar to what JSDuck does. However, because of the font size, spacing, and width of the sidebar, the sidebar can't visually support more than one maybe two levels of indentation without having a lot of horizontal scroll. Adding indentation would probably be fine for most small codebases, but in MediaWiki core, we have up to 5 levels of hierarchy.

For now, we've opted to indicate hierarchy by:

  • using full names in the sidebar via the useLongnameInNav config option
  • using the lists of classes on namespace and modules pages and lists of subclasses on class pages
  • providing an option to add a custom landing page to any of the main site sections to manually provide extra context and hierarchy information when not adequately indicated by the two methods above

In the future, I can see two options for improving this:

  1. Add an option to enable indentation, so smaller codebases can enable it
  2. Redesign the sidebar to be more dense and support several levels of indentation

Let me know what you think! Since the initial improvements have been complete, I'm removing myself as the assignee and moving this to needs discussion.