Table of contents / summary

[lydell]

Hi!

First, thank you very much for making this extension! I especially like the elm install foo/bar box with click-to-copy.

Something that I do quite often is scrolling through a page, exploring which functions are available. Example: https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom

The example above has some really detailed documentation with images and stuff which is really nice. But it makes it harder to get an overview of the package.

Sometimes, I’m looking for the documentation of a function that I know exists. I’ve learned the trick to ctrl+f for the function name plus space plus colon to quickly get there, but for a long function name it can be annoying to type.

So I would like some kind of table of contents or summary or something of all functions/types in a module. Both to get an overview and to be able to click to get to the docs for a specific function.

Taking the example above, there could be a section like this:

focus
blur
Error
getViewPort
Viewport
getViewportOf
setViewport
setViewportOf
getElement
Element

Or like this:

Focus
  focus
  blur
  Error
Get Viewport
  getViewPort
  Viewport
  getViewportOf
Set Viewport
  setViewport
  setViewportOf
Position
  getElement
  Element

Or like this:

Focus
  focus : String -> Task Error ()
  blur : String -> Task Error ()
  type Error
Get Viewport
  getViewport : Task x Viewport
  type alias Viewport
  getViewportOf : String -> Task Error Viewport
Set Viewport
  setViewport : Float -> Float -> Task x ()
  setViewportOf : String -> Float -> Float -> Task Error ()
Position
  getElement : String -> Task Error Element
  type alias Element

Where should the section be?

• At the top of the page in the main column?
• At the bottom of the right column?
• At the bottom of the right column, instead of Release + Dependencies (only showing them on the README page)?
• Below the currently selected module in the right column?
• In the empty area to the left?

I think this requires some experimentation. What do you think?

[rlefevre]

I think this is close to this request: https://github.com/dmy/elm-package-info/issues/10. I answered why it is hard to do it properly in this extension. Feel free to experiment though.

[lydell]

Thanks!

I’ve worked with WebExtensions before and I’m up for the challenge! Hopefully I’ll get time soon.

My initial plan is to extract all functions from the DOM, stick them in a div and show it in the empty space on the left. Then I’ll need to keep it up-to-date as the URL changes.

[lydell]

Here’s a fun hack:

1. Paste this in the console:

   String.prototype.toLowerCase = function toLowerCase() { return this.trim().toLocaleLowerCase() }

2. Now you can get all full outline for the entire package by typing a space into the search field.

This is why it works: https://github.com/elm/package.elm-lang.org/blob/f9c3cc452e7890850ee4e554bda117d8af843cab/src/frontend/Page/Docs.elm#L425-L435

I might just stick that in my personal browser tweaks extension and call it a day.

[rlefevre]

Nice trick indeed.

Something similar but only for the current module could be a nice feature for elm-doc-preview, which I often use instead of the website during development (faster, offline, only used packages, ...).