Page MenuHomePhabricator

Regression: Gray Screen shows for wikis that require login to edit due to problem in editor setup
Closed, ResolvedPublic

Description

Hello. i 'am using mw 1.35.0-alpha. I use Minerva theme. No problem. However, the screen turns gray when you switch to mobile minerva theme. click it goes. whichever article I turn to becomes gray. The homepage is also gray faded. How can I fix this? Thank you.

Developer notes

This occurs when wgIsProbablyEditable=false and wgRestrictionEdit=['*'] .

src/mobile.init/editor.js is the code at fault.

	mw.config.set( 'wgIsProbablyEditable', false );
	mw.config.set( 'wgRestrictionEdit', [ '*' ] );

The issue appears to be this line of code:
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/src/mobile.init/editor.js#L467
This creates a drawer. Drawers should only be created upon an event e.g. clicking the edit icon.

The drawer should actually be created at this point:
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/src/mobile.init/editor.js#L435

QA steps

QA Results

ACStatusDetails
1T237552#5743167
2T237552#5743167

Event Timeline

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptNov 6 2019, 5:26 PM

Is this a third party wiki or a wikimedia-hosted wiki? it looks like the mediawiki instance might be running incompatible Minerva and MobileFrontend versions. Is there a public URI you can share?

Esginmurat added a comment.EditedNov 6 2019, 6:57 PM

Is this a third party wiki or a wikimedia-hosted wiki? it looks like the mediawiki instance might be running incompatible Minerva and MobileFrontend versions. Is there a public URI you can share?

Jdlrobson, thank you for answering. I downloaded it with "git" from https://github.com/wikimedia/mediawiki (latest master version)mw 1.35.0-alpha
here my adress: https://wiki.lavinya.net

here my localsettings

<?php
# This file was automatically generated by the MediaWiki 1.33.1
# installer. If you make manual changes, please keep track in case you
# need to recreate them later.
#
# See includes/DefaultSettings.php for all configurable settings
# and their default values, but don't forget to make changes in _this_
# file, not there.
#
# Further documentation for configuration settings may be found at:
# https://www.mediawiki.org/wiki/Manual:Configuration_settings

# Protect against web entry
if ( !defined( 'MEDIAWIKI' ) ) {
	exit;
}

$wgShowDBErrorBacktrace = true;
$wgShowSQLErrors = true;
$wgShowExceptionDetails = true;
## Uncomment this to disable output compression
# $wgDisableOutputCompression = true;

$wgSitename = "Ansiklopedi - Wiki Lavinya";
$wgMetaNamespace = "Ansiklopedi_wiki";

## Set $wgCacheDirectory to a writable directory on the web server
## to make your wiki go slightly faster. The directory should not
## be publicly accessible from the web.
#$wgCacheDirectory = "$IP/cache";
//$wgTmpDirectory = $IP . '/images/tmp-' . php_sapi_name();
$wgCachePages = true;
$wgUseFileCache = true;
$wgCacheDirectory = "$IP/cache";
$wgFileCacheDirectory = "$IP/cache"; # or stay with the default: "{$wgUploadDirectory}/cache" which defaults to "$IP/images/cache"
# NO DB HITS!
$wgMiserMode = true;
$wgUseLocalMessageCache = true;
$wgJobRunRate = 0.1;
$wgEnableSidebarCache = true;
# Text cache
$wgCompressRevisions = true; // use with care (see talk page)
$wgRevisionCacheExpiry = 30 * 24 * 60 * 60;
$wgRevisionCacheExpiry = 0;
$wgParserCacheExpireTime = 30 * 24 * 60 * 60;

$wgNoFollowDomainExceptions = [ 'wikipedia.org', 'wiktionary.org', 'mediawiki.org', 'wikimedia.org', 'lavinya.net', 'yemektarifinet.com', 'google.com' ];
$wgEnableMagicLinks = [
	'ISBN' => true,
	'PMID' => true,
	'RFC' => true
];
$wgCrossSiteAJAXdomains = [
     '*.mediawiki.org',
   '*.wikipedia.org',
    '*.wikimedia.org',
     '*.wiktionary.org',
     '*.wikibooks.org',
     '*.wikivoyage.org',
     '*.wikidata.org',
     '*.wikinews.org',
     '*.wikiquote.org',
];
$wgMaxShellMemory = 524288;

## The URL base path to the directory containing the wiki;
## defaults for all runtime URL paths are based off of this.
## For more information on customizing the URLs please see:
## http://www.mediawiki.org/wiki/Manual:Short_URL
$wgScriptPath = "";
$wgScriptExtension = ".php";
$wgArticlePath = "/wiki/$1";

## The protocol and server name to use in fully-qualified URLs
$wgServer = "https://wiki.lavinya.net";
$wgServer = 'https://wiki.lavinya.net';

## The URL path to static resources (images, scripts, etc.)
$wgResourceBasePath = $wgScriptPath;

## The URL path to the logo.  Make sure you change this from the default,
## or else you'll overwrite your logo when you upgrade!
$wgLogo = "$wgResourceBasePath/resources/assets/wiki.png";

## UPO means: this is also a user preference option

$wgEnableEmail = true;
$wgEnableUserEmail = true; # UPO

$wgEmergencyContact = "wiki@lavinya.net";
$wgPasswordSender = "wiki@lavinya.net";

$wgEnotifUserTalk = true; # UPO
$wgEnotifWatchlist = true; # UPO
$wgEmailAuthentication = true;

## Database settings
/*remove for security*/

# MySQL specific settings
$wgDBprefix = "";

# MySQL table options to use during installation or update
$wgDBTableOptions = "ENGINE=InnoDB, DEFAULT CHARSET=binary";

## Shared memory settings
//$wgMainCacheType = CACHE_MEMCACHED;
$wgMainCacheType = CACHE_ACCEL;
//$wgMainCacheType = CACHE_NONE;
$wgMemCachedServers = [];
//$wgMemCachedServers = [ '127.0.0.1:11211' ];
//$wgParserCacheType = CACHE_MEMCACHED; # optional
//$wgMessageCacheType = CACHE_MEMCACHED; # optional
//$wgSessionsInObjectCache = true; # optional
//$wgSessionCacheType = CACHE_MEMCACHED; # optional 
/** @see RedisBagOStuff for a full explanation of these options. **/
#$wgObjectCaches['redis'] = array(
#    'class'                => 'RedisBagOStuff',
#    'servers'              => array( '127.0.0.1:6379' ),
    // 'connectTimeout'    => 1,
    // 'persistent'        => false,
    // 'password'          => 'secret',
    // 'automaticFailOver' => true,
#);
#$wgMainCacheType = 'redis';
#$wgSessionCacheType = 'redis';  // same as WMF prod

// Not widely tested:
#$wgMessageCacheType = 'redis';
#$wgParserCacheType = 'redis';
#$wgLanguageConverterCacheType = 'redis';

## To enable image uploads, make sure the 'images' directory
## is writable, then set this to true:
$wgEnableUploads  = true;
$wgGenerateThumbnailOnParse = true;
$wgUseImageMagick = true;
$wgImageMagickConvertCommand = "/usr/bin/convert";


# InstantCommons allows wiki to use images from https://commons.wikimedia.org
$wgUseInstantCommons = true;

# Periodically send a pingback to https://www.mediawiki.org/ with basic data
# about this MediaWiki instance. The Wikimedia Foundation shares this data
# with MediaWiki developers to help guide future development efforts.
$wgPingback = true;
# Disable anonymous editing
$wgGroupPermissions['*']['edit'] = false;
$wgGroupPermissions['user']['edit'] = false;
$wgGroupPermissions['sysop']['edit'] = true;

# Only users with accounts four days old or older can create pages
# Requires MW 1.6 or higher.
$wgGroupPermissions['*']['createpage'] = false;
$wgGroupPermissions['user']['createpage'] = false;
$wgGroupPermissions['sysop']['createpage'] = true;


## If you use ImageMagick (or any other shell command) on a
## Linux server, this will need to be set to the name of an
## available UTF-8 locale
$wgShellLocale = "C.UTF-8";

# Site language code, should be one of the list in ./languages/data/Names.php
$wgLanguageCode = "tr";


# Changing this will log out all existing sessions.
$wgAuthenticationTokenVersion = "1";

# Site upgrade key. Must be set to a string (default provided) to turn on the
# web installer while LocalSettings.php is in place

## For attaching licensing metadata to pages, and displaying an
## appropriate copyright notice / icon. GNU Free Documentation
## License and Creative Commons licenses are supported so far.
$wgRightsPage = ""; # Set to the title of a wiki page that describes your license/copyright
$wgRightsUrl = "https://creativecommons.org/licenses/by-sa/4.0/";
$wgRightsText = "Creative Commons Attribution-ShareAlike";
$wgRightsIcon = "$wgResourceBasePath/resources/assets/licenses/cc-by-sa.png";

# Path to the GNU diff3 utility. Used for conflict resolution.
$wgDiff3 = "/usr/bin/diff3";
$wgDiff = "/usr/bin/diff";
/**
* Output a <link rel="canonical"> tag on every page indicating the canonical
* server which should be used, i.e. $wgServer or $wgCanonicalServer. Since
* detection of the current server is unreliable, the link is sent
* unconditionally.
*/
$wgEnableCanonicalServerLink = true;

# The following permissions were set based on your choice in the installer
$wgGroupPermissions['*']['createaccount'] = true;

$wgEnableJavaScriptTest = true;
$wgMFAdvancedMobileContributions = true;
## Default skin: you can change the default skin. Use the internal symbolic
## names, ie 'vector', 'minerva':
$wgDefaultSkin = 'minerva';
$wgVectorResponsive = true;

# Enabled skins.
# The following skins were automatically enabled:
wfLoadSkin( 'MinervaNeue' );
//wfLoadSkin( 'MonoBook' );
//wfLoadSkin( 'Timeless' );
wfLoadSkin( 'Vector' );

$wgMFAutodetectMobileView = true;
//$wgMFDefaultSkinClass = 'SkinVector'; // use Vector skin for your mobile site skin.
$wgMFDefaultSkinClass = 'SkinMinerva'; // Default - use Minerva as your mobile site skin.
$wgMFNearbyEndpoint = 'http://tr.m.wikipedia.org/w/api.php';

$wgMediaViewerIsInBeta= true;

$wgMinervaDownloadIcon = true;

wfLoadExtension( 'Scribunto' );
//$wgScribuntoDefaultEngine = 'luastandalone';
$wgLuaExternalInterpreter = "/usr/bin/lua5.3";
$wgScribuntoDefaultEngine = 'luasandbox';
wfLoadExtension( 'TemplateSandbox' );
wfLoadExtension( 'Interwiki' );
// To grant sysops permissions to edit interwiki data
$wgGroupPermissions['sysop']['interwiki'] = true;

wfLoadExtension( 'WikimediaBadges' );
//wfLoadExtension( 'WikibaseLexeme' );
wfLoadExtension( 'RevisionSlider' );
wfLoadExtension( '3D' );
wfLoadExtension( 'LoginNotify' );
wfLoadExtension( 'OpenGraphMeta' );
wfLoadExtension( 'Disambiguator' );
wfLoadExtension( 'AbuseFilter' );
wfLoadExtension( 'AntiSpoof' );
wfLoadExtension( 'CategoryTree' );
//wfLoadExtension( 'CentralNotice' );
wfLoadExtension( 'CreatePageUw' );
wfLoadExtension( 'CheckUser' );
wfLoadExtension( 'Cite' );
wfLoadExtension( 'CiteThisPage' );
wfLoadExtension( 'CodeEditor' );
require_once "$IP/extensions/Collection/Collection.php";
wfLoadExtension( 'CommonsMetadata' );
wfLoadExtension( 'ConfirmEdit' );
wfLoadExtension( 'DismissableSiteNotice' );
wfLoadExtension( 'Echo' );
wfLoadExtension( 'TwoColConflict' );
wfLoadExtension( 'FeaturedFeeds' );
wfLoadExtension( 'Gadgets' );
wfLoadExtension( 'GeoData' );
wfLoadExtension( 'GlobalUsage' );
wfLoadExtension( 'Graph' );
wfLoadExtension( 'ImageMap' );
wfLoadExtension( 'InputBox' );
wfLoadExtension( 'Interwiki' );
wfLoadExtension( 'JsonConfig' );
wfLoadExtension( 'Kartographer' );
wfLoadExtension( 'LabeledSectionTransclusion' );
wfLoadExtension( 'BetaFeatures' );
wfLoadExtension( 'Math' );
$wgTexvc = "/usr/bin/texvc";
wfLoadExtension( 'CharInsert' );
wfLoadExtension( 'MobileFrontend' );
wfLoadExtension( 'MultimediaViewer' );
wfLoadExtension( 'Nuke' );
wfLoadExtension( 'OATHAuth' );
wfLoadExtension( 'PageAssessments' );
wfLoadExtension( 'PagedTiffHandler' );
wfLoadExtension( 'PageImages' );
wfLoadExtension( 'PageViewInfo' );
wfLoadExtension( 'ParserFunctions' );
wfLoadExtension( 'PdfHandler' );
wfLoadExtension( 'Poem' );
wfLoadExtension( 'Popups' );
wfLoadExtension( 'RelatedArticles' );
wfLoadExtension( 'Renameuser' );
wfLoadExtension( 'ReplaceText' );
wfLoadExtension( 'Score' );
$wgScoreLilyPond = '/usr/bin/lilypond'; /* required */
$wgScoreAbc2Ly = '/usr/bin/abc2ly'; /* if you want ABC to LilyPond conversion */
$wgScoreFluidsynth = '/usr/bin/fluidsynth'; /* if you want MIDI to audio conversion */
$wgScoreSoundfont = '/usr/share/sounds/sf2/FluidR3_GM.sf2'; /* required for Fluidsynth */
//$wgScoreTimidity = '/path/to/your/timidity/executable'; /* fallback when Fluidsynth is not installed */
$wgScoreLame = '/usr/bin/lame'; /* required to convert audio file for MP3 */
$wgScoreTrim = true; /* Set to false if you don't want score trimming */
wfLoadExtension( 'SecurePoll' );
//wfLoadExtension( 'SemanticMediaWiki' );
wfLoadExtension( 'SpamBlacklist' );
wfLoadExtension( 'SyntaxHighlight_GeSHi' );
wfLoadExtension( 'TemplateData' );
wfLoadExtension( 'TemplateStyles' );
wfLoadExtension( 'TemplateWizard' );
wfLoadExtension( 'TimedMediaHandler' );
wfLoadExtension( 'timeline' );
wfLoadExtension( 'TitleBlacklist' );
wfLoadExtension( 'TorBlock' );
wfLoadExtension( 'WikiEditor' );
wfLoadExtension( 'CodeMirror' );
# Enables use of CodeMirror by default but still allow users to disable it
$wgDefaultUserOptions['usecodemirror'] = 1;
wfLoadExtension( 'wikihiero' );
wfLoadExtension( 'WikiLove' );
wfLoadExtension( 'WikimediaMessages' );
$wgMetadataGenerators = ["Twitter", "SchemaOrg"];
wfLoadExtension( 'AdvancedSearch' );
wfLoadExtension( 'SecureLinkFixer' );
wfLoadExtension( 'TextExtracts' );
wfLoadExtension( 'Thanks' );
wfLoadExtension( 'FileImporter' );
wfLoadExtension( 'FileExporter' );
//wfLoadExtension( 'ContentTranslation' );
wfLoadExtension( 'VisualEditor' );
$wgVirtualRestConfig['modules']['parsoid'] = array(
    // URL to the Parsoid instance
    // Use port 8142 if you use the Debian package
    'url' => 'http://127.0.0.1:8142',
    // Parsoid "domain", see below (optional)
 //  'domain' => 'wiki.lavinya.net',
    // Parsoid "prefix", see below (optional)
 //   'prefix' => 'wiki.lavinya.net'
);
if ( !isset( $_SERVER['REMOTE_ADDR'] ) OR $_SERVER['REMOTE_ADDR'] == '127.0.0.1' ) {
	$wgGroupPermissions['*']['read'] = true;
	$wgGroupPermissions['*']['edit'] = true;
}

// Enable by default for everybody
//$wgDefaultUserOptions['visualeditor-enable'] = 1;

// Optional: Set VisualEditor as the default for anonymous users
// otherwise they will have to switch to VE
// $wgDefaultUserOptions['visualeditor-editor'] = "visualeditor";

// Don't allow users to disable it
//$wgHiddenPrefs[] = 'visualeditor-enable';

// OPTIONAL: Enable VisualEditor's experimental code features
#$wgDefaultUserOptions['visualeditor-enable-experimental'] = 1;


wfLoadExtension( 'Babel' );
// Load extension
wfLoadExtension('GoogleRichCards');

// Enable annotations for articles
$wgGoogleRichCardsAnnotateArticles = true;

// Enable annotations for events
$wgGoogleRichCardsAnnotateEvents = true;

// Enable WebSite annotations
$wgGoogleRichCardsAnnotateWebSite = true;

wfLoadExtension( 'cldr' );

wfLoadExtension( 'CleanChanges' );
$wgCCTrailerFilter = true;
$wgCCUserFilter = false;
$wgDefaultUserOptions['usenewrc'] = 1;

wfLoadExtension( 'LocalisationUpdate' );
$wgLocalisationUpdateDirectory = "$IP/cache";

regards

Hmm I can't seem to replicate this issue. Does the issue occur in an incognito (private) browser window?

Hmm I can't seem to replicate this issue. Does the issue occur in an incognito (private) browser window?

Thank you for reply
Both the latest version of the chrome browser and the latest version of my firefox browser have this problem. However, as I said in my first message, only the mobile version has problems. Minerva theme has no desktop look. minerva 's mobile appearance, the screen turns gray unfortunately. Please click "mobile view" at the bottom of the page.
note: I have cleared the history of my browser
regards.

Ok I can replicate here: https://wiki.lavinya.net/?useformat=mobile
but I can't seem to replicate locally with the same versions of MobileFrontend and Minerva :(

It looks like something is adding the navigation-enabled class to the body element
Can you search your codebase for the string navigation-enabled and let me know which filepaths match?

Ok I can replicate here: https://wiki.lavinya.net/?useformat=mobile
but I can't seem to replicate locally with the same versions of MobileFrontend and Minerva :(

It looks like something is adding the navigation-enabled class to the body element
Can you search your codebase for the string navigation-enabled and let me know which filepaths match?

Thank you again for responding and for your interest.

I'm sorry, but I don't know how to find which files call the "navigation-enabled" tag. :(
So I don't know how to find the line that code goes through in thousands of files.

Regards

Jdlrobson renamed this task from Gray Screen to Gray Screen shows for wikis that require login to edit due to problem in editor setup.Nov 6 2019, 7:53 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: JTannerWMF.

The code at fault is src/mobile.init/editor.js - @JTannerWMF let me know if this is editing team or web responsibility. Until then I'll assume the former.

Thanks @Esginmurat for the help debugging!

A temporary fix would be to add .navigation-enabled .mw-mf-page-center__mask { display: none !important; } to MediaWiki:Mobile.css

The code at fault is src/mobile.init/editor.js - @JTannerWMF let me know if this is editing team or web responsibility. Until then I'll assume the former.

Thanks @Esginmurat for the help debugging!

A temporary fix would be to add .navigation-enabled .mw-mf-page-center__mask { display: none !important; } to MediaWiki:Mobile.css

Hello again. I don't know how to thank you, esteemed Jdlrobson. Thank you so much. I wish you good work. All the best. Best regards.

Note: Yeah, I tried. Now the gray screen is gone. When you click the menu on the left, all of them are now white. In fact, I understand; When you click the menu on the left, the part of the menu should be white and the other parts on the right should be gray. Thank you again. I hope he gets better soon.

@Jdlrobson Your change c19bc5408717edccf365250fd75fa8ea57ece64b causes the gray drawer overlay to be shown immediately when a Drawer is constructed, rather than when it's actually shown. That seems wrong to me? But regardless, we can change the editor code to not construct it until we need it, that's a good idea anyway.

Change 549203 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] mobile.init/editor: Fix gray overlay when wiki requires login to edit

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

@matmarex true - this probably could be moved into the show method for completeness - I think the reason it's not is that some Drawer's get added to the DOM and don't call the show method (ideally we are trying to get rid of the show method as part of https://phabricator.wikimedia.org/T214647 but I don't know if that will ever be prioritised :(

Change 549203 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] mobile.init/editor: Fix gray overlay when wiki requires login to edit

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

matmarex added a project: Skipped QA.

I don't think we have any Wikimedia wikis that use this configuration (can be read by anyone, but edited only by logged in users), so skipping QA.

Note I can reproduce this on wikitech.org

Jdlrobson renamed this task from Gray Screen shows for wikis that require login to edit due to problem in editor setup to Regression: Gray Screen shows for wikis that require login to edit due to problem in editor setup.Nov 26 2019, 5:54 PM
Jdlrobson assigned this task to Edtadros.
Jdlrobson updated the task description. (Show Details)

Adding QA steps. Edward - you can confirm this bug now, but the fix is unlikely to go out until sometime next week (during my vacation)

Edtadros reassigned this task from Edtadros to ovasileva.Dec 16 2019, 4:12 AM
Edtadros added a subscriber: Edtadros.

Test Result

Status: ✅ PASS
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps
❓ AC1: Visit https://wikitech.wikimedia.org/wiki/Analytics/AQS/Mediarequests_API?useformat=mobile in an incognito window and confirm the screen gets a gray overlay without the patch applied. Note: it was getting one on the 26th November.
I wasn't able to see this behavior. I'm not sure that it is necessary for passing this.

✅ AC1: Wait until the fix has rolled out and visit the same URL confirming the green overlay no longer displays.

Edtadros updated the task description. (Show Details)Dec 16 2019, 4:17 AM

❓ AC1: Visit https://wikitech.wikimedia.org/wiki/Analytics/AQS/Mediarequests_API?useformat=mobile in an incognito window and confirm the screen gets a gray overlay without the patch applied. Note: it was getting one on the 26th November.
I wasn't able to see this behavior. I'm not sure that it is necessary for passing this.

That's good. It means it's fixed!

ovasileva closed this task as Resolved.Dec 16 2019, 6:56 PM