Page MenuHomePhabricator

VisualEditor/SyntaxHighlight/CodeEditor loads missing /w/worker-css.js file
Closed, ResolvedPublic1 Story Points

Description

When I want to edit a CSS code block in VisualEditor (for example, https://www.mediawiki.org/w/index.php?title=Extension:SyntaxHighlight_GeSHi&veaction=edit&vesection=1 see "Styling"), my browser attempts to load a missing https://mediawiki.org/w/worker-css.js file.

I don't know which extension is the culprit, feel free to edit the task as needed.

Details

Related Gerrit Patches:
mediawiki/extensions/VisualEditor : masterMWAceEditorWidget: Configure Ace with its base path

Event Timeline

Southparkfan raised the priority of this task from to Needs Triage.
Southparkfan updated the task description. (Show Details)
Southparkfan added a subscriber: Southparkfan.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptJan 22 2016, 2:53 PM
TheDJ set Security to None.
TheDJ added a subscriber: TheDJ.Jan 22 2016, 5:29 PM

Actually, this seems to be the same as T118895.

Which stated: "no longer happens", but it doesn't seem any changes were made, and I suspect the issue is still there. (but if you run CodeEditor BEFORE running the visualeditor, the code editor might have already loaded the worker class, so in that case it probably won't show.

TheDJ updated the task description. (Show Details)Jan 22 2016, 5:29 PM
TheDJ added a subscriber: ferdbold.
Jdforrester-WMF added a subscriber: Jdforrester-WMF.

Tagging with VisualEditor to keep track of this.

Still reproducible:

  1. https://www.mediawiki.org/w/index.php?title=Extension:SyntaxHighlight&veaction=edit&vesection=2
  2. Double-click the code area under heading "Styling"

Network panel shows an outgoing request to https://www.mediawiki.org/w/worker-css.js which is then aborted by the code that made the request before it completes.
Still reproducible:

  1. https://www.mediawiki.org/w/index.php?title=Extension:SyntaxHighlight&veaction=edit&vesection=2
  2. Double-click the code area under heading "Styling"

Network panel shows an outgoing request to https://www.mediawiki.org/w/worker-css.js which is then aborted by the code that made the request before it completes.

Request trace:

WorkerClient	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes:773
createWorker	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes:1911
$startWorker	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes:222
$onChangeMode	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes:222
(anonymous function)	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes:221
exports.loadModule	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes:82
setMode	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes:221
(anonymous function)	@	VM87:283
execute	@	load.php:163
implement	@	load.php
(anonymous function)	@	load.php?modules=ext.codeEditor.ace|ext.codeEditor.ace.modes
Jdforrester-WMF triaged this task as High priority.Jul 19 2016, 7:26 PM
Jdforrester-WMF moved this task from To Triage to TR0: Interrupt on the VisualEditor board.
Jdforrester-WMF set the point value for this task to 1.Aug 1 2016, 4:56 PM

Doesn't this request come from ace, the editing software used by CodeEditor?

(It's modules/ace/worker-css.js under the CodeEditor repository)

(It's modules/ace/worker-css.js under the CodeEditor repository)

Do we have a broken or mis-matched version where it's looking for the file but we don't have it?

We certainly don't have the file in the location that it's looking for it in... We do have the file in our repository though. It's most likely a compatibility issue between Ace's code and ResourceLoader, but I'm not familiar enough with Ace's structure to understand exactly what's going on... The fact that it aborts the request makes me suspect it's not a big deal.

TheDJ added a comment.EditedAug 23 2016, 12:08 PM

I already identified the cause for this in the earlier linked to ticket:

This is because the ACE editor was not correctly initialized. Please see first part of the function setupCodeEditor() in jquery.codeEditor.js.
Only some of the files for ACE are ResourceLoader modules, but many are actually directly loaded from the base path (this was more efficient).

You need to at least pass the right basePath when starting ace, so that ACE can dynamically load such additional files.

I also note that apparently the setLanguage function does not actively load a language module before setting the mode. I don't think ACE does on the fly module loading for languages for which the module is not yet loaded, so I suspect the editor might not work for more esoteric language that are not present in the RL modules. It seems that this should autoload these days. Example

The fact that it aborts the request makes me suspect it's not a big deal.

True, this file is an optional dependency (also the reason why here it DOES do on the fly module loading) for CSS validation.

Change 309288 had a related patch set uploaded (by TheDJ):
[Untested] Configure Ace with it's base path

https://gerrit.wikimedia.org/r/309288

TheDJ added a comment.Sep 8 2016, 12:26 PM

I've added the start of a patch to configure the base path, but I don't have anything setup for VE on my machines, so i haven't tested.

Also I note that the style module ext.pygments is not loaded, which we could probably do on the fly when we close the editor, so that the code blocks actually look proper even if there was no syntax highlighted elements on the original page..

Change 309288 merged by jenkins-bot:
MWAceEditorWidget: Configure Ace with its base path

https://gerrit.wikimedia.org/r/309288

Jdforrester-WMF closed this task as Resolved.Oct 3 2016, 3:54 PM
Jdforrester-WMF assigned this task to TheDJ.
Jdforrester-WMF removed a project: Patch-For-Review.

Thank you!