Page MenuHomePhabricator

CodeSelect template / widget unusably slow on big pages
Closed, ResolvedPublic



Event Timeline

Patrick raised the priority of this task from to High.
Patrick updated the task description. (Show Details)
Patrick set Impact to High.
Patrick added subscribers: Patrick, HulaHoop, marmarek and 4 others.

The problem is that the JS and CSS code is included in Widget:CodeSelect which duplicates and executes the code many times. The obvious solution would be to place the CSS and JS codes in external files.

Could you do that please with mediawiki?

I split the code in 3 files and made use of the client-(no)js css class. The codeselect.js has to be loaded after jQuery because it is used do determine when the DOM is ready.

(<link rel="stylesheet" href="/path/to/codeselect.css" /> in wiki header)

(<script src="/path/to/codeselect.js"></script> after jQuery)

(content of Widget:CodeSelect)


with CodeSelect - - - 3,0 s

Down from 80,3 s to 3,0 s. Ignoring the measurement inaccuracy, it is safe to say, that the new CodeSelect is as fast as without CodeSelect. In other words, the CodeSelect slow down bug is fixed!

I missed some new bugs... With javascript disabled now it got worse.

  • it shows a defunct select code button
  • it duplicates the contents (it now shows the <pre></pre> box as well as the javascript box which is much too small... Could the javascript box be hidden if javascript is disabled?)

Could you fix that please?

Somehow the styles from don't get loaded, which would hide the select code button and the textarea

It seems like the current skin (Strapping) is not using these MediaWiki styles, but it should work by modifying the screen.css and theme.css as explained here:

In the screen.css file, uncomment the theme.css import.

How do I do that?

Oh, sorry, the github page seems to be incorrect, theme.css gets loaded directly (at least in our case):

<link rel="stylesheet" href="/w/skins/strapping/theme.css?303" media="screen" />

So inserting the codeselect.css into the theme.css should be enough.

This works. Awesome!