Wikipedia:Tools/Navigation popups/Technical details

This page describes some technical details about how Navigation Popups works, in order to help future developers make improvements to the gadget.

Call chain

This is a list of methods that are called in order to display a popup that's of the non-simple variety. (I'll add another writeup for the simple ones eventually.)

To start it off, a user's mouse moves over a link with a Popups handler. The name of that handler is...

• mouseOverWikiLink - changes some event details and calls...
• mouseOverWikiLink2 - collects some metadata from the event and the link that triggered it, and starts the process of showing a (blank) popup by constructing one and calling its showSoonIfStable method. In the meantime, it starts the process of making some content for that popup using...
• nonsimplePopupContent - takes the metadata and determines what type of popup we're showing. (History? User contribs? Image? Diff?) In the last case, it calls loadDiff, which isn't that bad. However, in the former three cases, it puts the type in a queryType variable and hands off everything we know so far to...
• loadAPIPreview - does a lot of work:
  • First, it takes the query type, figures out what information we need from the API, and builds a query string at which that information can be found.
  • Then, it takes the query type again and selects a function (in loadAPIPreview, the function is stored in htmlGenerator) that will take the data we'll get back from the API and construct the actual tables and text that the user will see - i.e. some HTML. (Some htmlGenerators, like the history and user-contribs ones, hand off that data in turn to a series of other helper functions that build the HTML for them.)
  • Then, it registers a callback on the API call that we'll talk about later.
  • Finally, it actually starts the process of the API call using...
• getPageWithCaching - checks the cache to see if we've already made this exact API call. If so, it just returns the cached data. If not, it performs an actual download with...
• getPage - makes a brief callback, then performs an actual download with...
• startDownload - constructs a download object with newDownload, then calls its start() method to actually start the download.

Once the download finishes, we're back to the callback that loadAPIPreview made. It takes all the data we have so far, including the API data, and gives it to its htmlGenerator. It then takes the HTML and all the other data and gives it to...

• showAPIPreview - takes the HTML and puts it in the popup (which should definitely be visible by this point) using...
• setPopupTipsAndHTML - sets some popup data, then takes the HTML and gives it to...
• setPopupHTML - using DOM manipulation, puts the HTML into the popup. (If the popup somehow doesn't exist yet, it waits 0.6 seconds and tries again.) (Exactly 0.6 seconds.) (Many, many other functions in Popups also use setPopupHTML, so it's a very important function.)

Finally, by this point, we have a visible popup with all of the HTML we constructed!

See also

• The source code, at MediaWiki:Gadget-popups.js.