Improve code navigation and readability on api.drupal.org (UI/UX, accessibility)

What's your idea?

Make it easier for users of api.drupal.org to view and navigate the code of core files and classes by changing the clickable "View source" text to a widget that more obviously indicates its functionality and implement an IDE-like structure navigation pane that lists the components of a file or class and auto-scrolls to their source when clicked.

The biggest issue is that it isn't at all obvious how to view the source code on API pages. In order to view the source, a user must click on the text near the bottom of the page that says "View source" - but why would they notice this text? Aside from the little arrow next to it, it looks just like any other plain-text on the page. Change it to a button, or other widget that more obviously indicates its functionality, and move it to a more obvious location - near the top of the page or to the sidebar (or both).

The "View source" button might be so difficult to find because of the general layout of the API pages. It is awfully close to the "Comments" section and there's nothing that separates these sections except for some different-styled text. Let's add some borders and margins to make the sections more clearly defined.

More ambitiously, I imagine an IDE-like code structure navigation pane for browsing the code on these pages (See below for an example from PHPStorm). A pane on the left sidebar would contain a list of all class members. To save space, symbols would be used to indicate properties such as static, public, private, method or field, etc. (and a legend would be included). Clicking on a member in this pane would auto-scroll to its section in the source file or class - which would be visible by default in the center column of the page. This should actually be pretty simple to implement with just some simple anchor tags and CSS adjustments.

What are the benefits?

Someone coming to an API page for the first time is probably skimming for code - whether it be for examples or the actual code of the class/function - and they're probably having a hard time finding it. This would help them find code quickly and then more easily navigate through a file/class' components.

What are the risks?

1. Cluttering up the UI with too many bells and whistles - can be avoided though.
2. Should API pages really include the full source of the file or class? Looking at other projects' API pages -(jQuery.add(), or PHP'sarray_keys(), for example - they look more like how api.drupal.org currently does it.

How can we measure the impact of this idea? (metrics)

1. Formal usability/accessibility studies of Drupal.org API pages.
2. General user feedback and comments.
3. Monitor use of features (measure clicks on "View source" for example).

Who directly benefits from / will use this improvement? (target audiences)

Anyone trying to use api.drupal.org to browse the source code of Drupal core files and classes.

Are additional resources available for discovery/implementation? (volunteer effort, financial backing, etc.)

To be determined...

Screenshots

General api.drupal.org improvements:

Code navigation improvements example, taken from PHPStorm: