CodeSelect template / widget unusably slow on big pages

[phabricator-migrator]

Information

ID: 420
PHID: PHID-TASK-borftxlqobreptndkrbf
Author: Patrick
Status at Migration Time: resolved
Priority at Migration Time: High

Description

CodeSelect (T93) is causing issues.

{F27}

Unusably slow on big pages. Cannot be used on pages such as Combining Tunnels with Tor or Whonix for KVM.

Wiki markup source:

• Template:CodeSelect - Whonix
• View source for Template:CodeSelect - Whonix
• Widget:CodeSelect - Whonix
• View source for Widget:CodeSelect - Whonix

Speed comparison:

• without CodeSelect - Error - Whonix - https://gtmetrix.com/reports/www.whonix.org/rHQTqAU2 - 2,9 s
• with CodeSelect - Error - Whonix - https://gtmetrix.com/reports/www.whonix.org/TfndWzSF - 80,3 s

Does anyone have any idea how to fix this?

Which part of the javascript makes it so slow? Can it be refactored to execute faster?

Comments

---

Lobster

2016-07-03 12:58:46 UTC

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.

---

Patrick

2016-07-03 13:00:19 UTC

Could you do that please with mediawiki?

---

Lobster

2016-07-03 13:57:18 UTC

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.

{F37699} ( in wiki header)

{F37701} ( after jQuery)

{F37700} (content of Widget:CodeSelect)

---

Lobster

2016-07-03 14:11:33 UTC

In MediaWiki custom css and js can be added as explained here:
Manual:Interface/Stylesheets - MediaWiki
Manual:Interface/JavaScript - MediaWiki

Append codeselect.css to:
MediaWiki:Common.css - Whonix

And append codeselect.js to:
MediaWiki:Common.js - Whonix

---

Patrick

2016-07-03 15:22:38 UTC

Awesome!

with CodeSelect - Error - Whonix - 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

2016-07-03 15:28:00 UTC

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?

---

Lobster

2016-07-03 15:48:03 UTC

Somehow the styles from MediaWiki:Common.css - Whonix don’t get loaded, which would hide the select code button and the textarea

---

Lobster

2016-07-03 16:16:54 UTC

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: GitHub - OSAS/strapping-mediawiki: base skin for MediaWiki, based on Bootstrap — layer your own style (fonts, graphics, color) on top

---

Patrick

2016-07-03 16:32:00 UTC

strapping-mediawiki/screen.css at master · OSAS/strapping-mediawiki · GitHub

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

How do I do that?

---

Lobster

2016-07-03 16:38:06 UTC

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

2016-07-03 16:43:42 UTC

This works. Awesome!