Implement support for specifying type=styles

T87871 formally introduced the concept of a styles module,
which sets mw.loader.state to "ready" when loaded through addModuleStyles().

Previously, addModuleStyles couldn't safely do that because a module may
contain scripts also, in which case mw.loader must still load the (rest)
of the module (causes styles to load twice).

In MediaWiki core or extensions this is easily avoided by calling not
calling both addModules() and addModuleStyles().

For Gadgets we call both as a workaround to allow users to provide styles
(without a FOUC), but also to provide scripts+styles. Since we don't declare
which one is intended (and some gadgets do both), we loaded them both ways.
This will no longer be allowed in the future (see T92459).

The new 'type=styles' Gadget attribute promises to ResourceLoader that a
gadget only contains styles.

Impact:

* [Bug fix] When mw.loader requires a styles module that already loaded,
            it will not load again.

* [Feature] It is possible for a general scripts+styles gadget to depend on
            a styles gadget. Previously this caused the styles to load twice.

* Specifying type=styles will load the module through addModuleStyles() only.

  Use this for modules that contain styles that relate to elements already
  on the page (e.g. when customising the skin, layout, or article content).

* Specifying type=general will load the module through addModules() only.

  Use this if your module contains both scripts and styles and the styles
  only relate to elements created by the script. This means the styles do not
  need to be loaded separately through addModuleStyles() and will not apply
  to noscript mode.

Effective difference:

* Gadgets with only styles: We assume type=styles.

  This fixes the main bug (styles loading twice) and requires no migration!

* Gadgets with only scripts: We assume type=general.

  This requires no migration! (And: No more empty stylesheet request)

* Gadgets with scripts (with or without styles): We assume type=general, but
  unless type=general was explicitly set we'll still load it both ways so
  that the styles apply directly on page load.

  If this is not needed, set type=general.

  If this is needed, it should become two separate modules. We do not support
  a single module having two purposes (1: apply styles to the page,
  2: provide scripts+styles). The styles module should be separate.
  It can be made hidden, and listed as dependency of the other module.

The latter case is detected on page load and results in a console warning
with a link to T42284.

Bug: T42284
Bug: T92459
Change-Id: Ia3c9ddee243f710022144fc2884434350695699a
This commit is contained in:
Timo Tijhof 2016-09-01 16:31:14 -07:00 committed by Florianschmidtwelzow
parent 07492f8938
commit dc834f3933
7 changed files with 143 additions and 5 deletions

View file

@ -170,6 +170,7 @@ class GadgetHooks {
$lb = new LinkBatch(); $lb = new LinkBatch();
$lb->setCaller( __METHOD__ ); $lb->setCaller( __METHOD__ );
$enabledLegacyGadgets = array(); $enabledLegacyGadgets = array();
$typelessMixedGadgets = array();
/** /**
* @var $gadget Gadget * @var $gadget Gadget
@ -183,8 +184,15 @@ class GadgetHooks {
} }
if ( $gadget->isEnabled( $user ) && $gadget->isAllowed( $user ) ) { if ( $gadget->isEnabled( $user ) && $gadget->isAllowed( $user ) ) {
if ( $gadget->hasModule() ) { if ( $gadget->hasModule() ) {
if ( $gadget->getType() === 'styles' ) {
$out->addModuleStyles( Gadget::getModuleName( $gadget->getName() ) );
} elseif ( $gadget->getType() === 'general' ) {
$out->addModules( Gadget::getModuleName( $gadget->getName() ) );
} else {
$out->addModuleStyles( Gadget::getModuleName( $gadget->getName() ) ); $out->addModuleStyles( Gadget::getModuleName( $gadget->getName() ) );
$out->addModules( Gadget::getModuleName( $gadget->getName() ) ); $out->addModules( Gadget::getModuleName( $gadget->getName() ) );
$typelessMixedGadgets[] = $id;
}
} }
if ( $gadget->getLegacyScripts() ) { if ( $gadget->getLegacyScripts() ) {
@ -197,6 +205,9 @@ class GadgetHooks {
foreach ( $enabledLegacyGadgets as $id ) { foreach ( $enabledLegacyGadgets as $id ) {
$strings[] = self::makeLegacyWarning( $id ); $strings[] = self::makeLegacyWarning( $id );
} }
foreach ( $typelessMixedGadgets as $id ) {
$strings[] = self::makeTypelessWarning( $id );
}
$out->addHTML( WrappedString::join( "\n", $strings ) ); $out->addHTML( WrappedString::join( "\n", $strings ) );
return true; return true;
@ -213,6 +224,12 @@ class GadgetHooks {
); );
} }
private static function makeTypelessWarning( $id ) {
return ResourceLoader::makeInlineScript( Xml::encodeJsCall( 'mw.log.warn', array(
"Gadget \"$id\" styles loaded twice. Migrate to type=general. " .
'See <https://phabricator.wikimedia.org/T42284>.'
) ) );
}
/** /**
* Valid gadget definition page after content is modified * Valid gadget definition page after content is modified

View file

@ -36,6 +36,7 @@ class Gadget {
$onByDefault = false, $onByDefault = false,
$hidden = false, $hidden = false,
$position = 'bottom', $position = 'bottom',
$type = '',
$category; $category;
public function __construct( array $options ) { public function __construct( array $options ) {
@ -53,6 +54,7 @@ class Gadget {
case 'targets': case 'targets':
case 'onByDefault': case 'onByDefault':
case 'position': case 'position':
case 'type':
case 'hidden': case 'hidden':
case 'category': case 'category':
$this->{$member} = $option; $this->{$member} = $option;
@ -88,6 +90,7 @@ class Gadget {
'dependencies' => $data['module']['dependencies'], 'dependencies' => $data['module']['dependencies'],
'messages' => $data['module']['messages'], 'messages' => $data['module']['messages'],
'position' => $data['module']['position'], 'position' => $data['module']['position'],
'type' => $data['module']['type'],
); );
return new self( $info ); return new self( $info );
@ -286,5 +289,24 @@ class Gadget {
public function getPosition() { public function getPosition() {
return $this->position; return $this->position;
} }
}
/**
* Returns the load type of this Gadget's ResourceLoader module
* @return string 'styles', 'general' or ''
*/
public function getType() {
if ( $this->type === 'styles' || $this->type === 'general' ) {
return $this->type;
}
if ( $this->styles && !$this->scripts ) {
// Similar to ResourceLoaderWikiModule default
return 'styles';
}
if ( !$this->styles && $this->supportsResourceLoader() && $this->scripts ) {
return 'general';
}
// Real default is in GadgetResourceLoaderModule so that beforePageDisplay
// can distinguish between explicit and fallback.
return '';
}
}

View file

@ -79,6 +79,16 @@ class GadgetResourceLoaderModule extends ResourceLoaderWikiModule {
return $this->getGadget()->getPosition(); return $this->getGadget()->getPosition();
} }
/**
* Overrides ResourceLoaderWikiModule::getType()
* @return string ResourceLoaderModule::LOAD_STYLES or ResourceLoaderModule::LOAD_GENERAL
*/
public function getType() {
return $this->getGadget()->getType() === 'styles'
? ResourceLoaderModule::LOAD_STYLES
: ResourceLoaderModule::LOAD_GENERAL;
}
public function getMessages() { public function getMessages() {
return $this->getGadget()->getMessages(); return $this->getGadget()->getMessages();
} }

View file

@ -212,6 +212,10 @@ class MediaWikiGadgetsDefinitionRepo extends GadgetRepo {
case 'top': case 'top':
$info['position'] = 'top'; $info['position'] = 'top';
break; break;
case 'type':
// Single value, not a list
$info['type'] = isset( $params[0] ) ? $params[0] : '';
break;
} }
} }

View file

@ -57,6 +57,7 @@ class GadgetDefinitionContentHandler extends JsonContentHandler {
'dependencies' => array(), 'dependencies' => array(),
'messages' => array(), 'messages' => array(),
'position' => 'bottom', 'position' => 'bottom',
'type' => '',
), ),
); );

View file

@ -23,6 +23,7 @@ class GadgetDefinitionValidator {
'module.dependencies' => array( 'is_array', 'array', 'is_string', 'string' ), 'module.dependencies' => array( 'is_array', 'array', 'is_string', 'string' ),
'module.messages' => array( 'is_array', 'array', 'is_string', 'string' ), 'module.messages' => array( 'is_array', 'array', 'is_string', 'string' ),
'module.position' => array( 'is_string', 'string' ), 'module.position' => array( 'is_string', 'string' ),
'module.type' => array( 'is_string', 'string' ),
); );
/** /**

View file

@ -12,10 +12,17 @@ class GadgetsTest extends MediaWikiTestCase {
$repo = new MediaWikiGadgetsDefinitionRepo(); $repo = new MediaWikiGadgetsDefinitionRepo();
$g = $repo->newFromDefinition( $line, 'misc' ); $g = $repo->newFromDefinition( $line, 'misc' );
$this->assertInstanceOf( 'Gadget', $g ); $this->assertInstanceOf( 'Gadget', $g );
return $g; return $g;
} }
private function getModule( Gadget $g ) {
$module = TestingAccessWrapper::newFromObject(
new GadgetResourceLoaderModule( array( 'id' => null ) )
);
$module->gadget = $g;
return $module;
}
public function testInvalidLines() { public function testInvalidLines() {
$repo = new MediaWikiGadgetsDefinitionRepo(); $repo = new MediaWikiGadgetsDefinitionRepo();
$this->assertFalse( $repo->newFromDefinition( '', 'misc' ) ); $this->assertFalse( $repo->newFromDefinition( '', 'misc' ) );
@ -49,6 +56,82 @@ class GadgetsTest extends MediaWikiTestCase {
$this->assertEquals( array( 'jquery.ui' ), $g->getDependencies() ); $this->assertEquals( array( 'jquery.ui' ), $g->getDependencies() );
} }
public function testPosition() {
$g = $this->create( '* foo[ResourceLoader]|bar.js' );
$this->assertEquals( 'bottom', $g->getPosition(), 'Default position' );
$g = $this->create( '* foo[ResourceLoader|top]|bar.js' );
$this->assertEquals( 'top', $g->getPosition(), 'Position top' );
}
public static function provideGetType() {
return array(
array(
'Default (mixed)',
'* foo[ResourceLoader]|bar.css|bar.js',
'',
ResourceLoaderModule::LOAD_GENERAL,
),
array(
'Default (styles only)',
'* foo[ResourceLoader]|bar.css',
'styles',
ResourceLoaderModule::LOAD_STYLES,
),
array(
'Default (scripts only)',
'* foo[ResourceLoader]|bar.js',
'general',
ResourceLoaderModule::LOAD_GENERAL,
),
array(
'Styles type (mixed)',
'* foo[ResourceLoader|type=styles]|bar.css|bar.js',
'styles',
ResourceLoaderModule::LOAD_STYLES,
),
array(
'Styles type (styles only)',
'* foo[ResourceLoader|type=styles]|bar.css',
'styles',
ResourceLoaderModule::LOAD_STYLES,
),
array(
'Styles type (scripts only)',
'* foo[ResourceLoader|type=styles]|bar.js',
'styles',
ResourceLoaderModule::LOAD_STYLES,
),
array(
'General type (mixed)',
'* foo[ResourceLoader|type=general]|bar.css|bar.js',
'general',
ResourceLoaderModule::LOAD_GENERAL,
),
array(
'General type (styles only)',
'* foo[ResourceLoader|type=general]|bar.css',
'general',
ResourceLoaderModule::LOAD_GENERAL,
),
array(
'General type (scripts only)',
'* foo[ResourceLoader|type=general]|bar.js',
'general',
ResourceLoaderModule::LOAD_GENERAL,
),
);
}
/**
* @dataProvider provideGetType
*/
public function testType( $message, $definition, $gType, $mType ) {
$g = $this->create( $definition );
$this->assertEquals( $gType, $g->getType(), "Gadget: $message" );
$this->assertEquals( $mType, $this->getModule( $g )->getType(), "Module: $message" );
}
public function testPreferences() { public function testPreferences() {
$prefs = array(); $prefs = array();
$repo = TestingAccessWrapper::newFromObject( new MediaWikiGadgetsDefinitionRepo() ); $repo = TestingAccessWrapper::newFromObject( new MediaWikiGadgetsDefinitionRepo() );