Page MenuHomePhabricator

When Visual Editor is installed, "Edit source" is displayed on mobile skin rather than the pencil icon
Open, Needs TriagePublicBUG REPORT

Description

A bug I've experienced on Coasterpedia, I don't know any other wikis using Refreshed which also have the Visual Editor installed.

Steps to Reproduce:

Visit a page on https://coasterpedia.net, a wiki where the Visual Editor is installed

Actual Results:

"Edit source" is displayed in text, and the row of buttons is slightly too wide for my screen.

Expected Results:

The option to edit with the visual editor should continue to be hidden on mobile (as it is now), however the "Edit source" button should be just a pencil icon to match the other buttons in the mobile skin.

Event Timeline

Hi Lachlan,

Thanks for your patience with this.

The "edit source" formatting issue is a problem with VisualEditor itself. MW sets up the link correctly, but then VE overwrites the link's contents with JS and in so doing breaks its formatting. (Try disabling JS and loading a page--the edit source button looks correct.) I've opened a ticket with VE (https://phabricator.wikimedia.org/T248025) to get this issue resolved.

Another related issue is that Refreshed doesn't give the VisualEditor link an icon. We can easily add one. We usually use OOUI icons; is there one that you think is fitting? https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop If not, we can request new icons. (Maybe a pencil with the wikitext icon in the top right for source editing, and a pencil with the eye icon in the top right for visual editing?)

Hmmm thanks for taking the time, considering it appears my website is the only one set up in such a way that this bug becomes a problem.

I took a look at the icons and my thinking was exactly as yours - a pencil icon with an eye and a pencil icon with the brackets. However it's not a big issue unless someone tried to offer both the source and visual editor to users on mobile.

Another way you could differentate the editors better is to format it like this: Edit (visual, source code) that way you only really need one icon (the pencil) beside Edit. I'm afraid I don't really have the coding experience to help you implement that.

Lachlan

I submitted the relevant patch to VisualEditor: https://gerrit.wikimedia.org/r/#/c/584037/. I think the patch won't necessarily help you though, since you're on an older version of MW. If you take the version of ve.init.mw.DesktopArticleTarget.init.js from that patch and move it into your own copy of VisualEditor, it should work fine.

Also, combining the eye with the pencil looked weird. Instead how about VE uses the regular pencil icon and, if VE is installed, source editing uses this icon?

I've been meaning to update the software so I'll do that and get back to you on this.