Page MenuHomePhabricator

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

Details

Impact
High

Event Timeline

Patrick created this task.Oct 19 2015, 12:59 AM
Patrick updated the task description. (Show Details)
Patrick raised the priority of this task from to High.
Patrick set Impact to High.
Patrick added subscribers: Patrick, HulaHoop, marmarek and 4 others.
Lobster added a subscriber: Lobster.Jul 3 2016, 2:58 PM

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)

Patrick assigned this task to Lobster.Jul 3 2016, 5:20 PM
Patrick closed this task as Resolved.Jul 3 2016, 5:22 PM

Awesome!

with CodeSelect - https://www.whonix.org/w/index.php?title=Using_Tunnels_with_Whonix&oldid=18784 - https://gtmetrix.com/reports/www.whonix.org/jizvabJd - 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!

Patrick reopened this task as Open.Jul 3 2016, 5:28 PM

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 https://www.whonix.org/wiki/MediaWiki:Common.css don't get loaded, which would hide the select code button and the textarea

Lobster added a comment.EditedJul 3 2016, 6:16 PM

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: https://github.com/OSAS/strapping-mediawiki/#themecss

https://github.com/OSAS/strapping-mediawiki/blob/master/screen.css

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.

Patrick closed this task as Resolved.Jul 3 2016, 6:43 PM

This works. Awesome!