Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Share Parsoid's media styling with content

Browse source 
Since the legacy parser will also be emitting the new media structure
that requires these styles.  For now, the feature is only shipped by
default when $wgUseNewMediaStructure is enabled.

Bug: T51097
Bug: T266148
Change-Id: Id20d716ce145e0bae37621fd6e218a793b5332ae
This commit is contained in:
Arlo Breault 2020-09-15 15:24:11 -04:00
parent 48f0aed7e2
commit a6c769e976
5 changed files with 235 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
includes/resourceloader/ResourceLoaderSkinModule.php
View file

@ -61,6 +61,10 @@ class ResourceLoaderSkinModule extends ResourceLoaderLessVarFileModule {
* as it is normally styled, while leaving the rest of the skin up to the skin
* implementation.
*
* "content-media":
* Styles for the new media structure on wikis where $wgUseNewMediaStructure is enabled.
* See https://www.mediawiki.org/wiki/Parsing/Media_structure
*
* "content-links":
* The skin will apply optional styling rules to links to provide icons for different file types.
*
@ -97,6 +101,9 @@ class ResourceLoaderSkinModule extends ResourceLoaderLessVarFileModule {
'content' => [
'screen' => [ 'resources/src/mediawiki.skinning/content.less' ],
],
'content-media' => [
'screen' => [ 'resources/src/mediawiki.skinning/content.media.less' ],
],
'content-links' => [
'screen' => [ 'resources/src/mediawiki.skinning/content.externallinks.less' ]
],
@ -137,6 +144,7 @@ class ResourceLoaderSkinModule extends ResourceLoaderLessVarFileModule {
private const DEFAULT_FEATURES = [
'logo' => false,
'content' => false,
'content-media' => false, // Will default to `true` when $wgUseNewMediaStructure is enabled everywhere
'content-links' => false,
'interface' => false,
'elements' => false,
@ -182,7 +190,16 @@ class ResourceLoaderSkinModule extends ResourceLoaderLessVarFileModule {
if ( !$compatibilityMode ) {
foreach ( self::DEFAULT_FEATURES as $key => $enabled ) {
if ( !isset( $enabledFeatures[$key] ) ) {
$enabledFeatures[$key] = $enabled;
if ( $key === 'content-media' ) {
// Only ship this by default if enabled, since it's going
// to be adding some unnecessary overhead where unused.
// Also, assume that if a skin is being picky about which
// features it wants, it'll pull this in when it's ready
// for it.
$enabledFeatures[$key] = (bool)$this->getConfig()->get( 'UseNewMediaStructure' );
} else {
$enabledFeatures[$key] = $enabled;
}
}
}
}

5
resources/Resources.php
View file

@ -97,7 +97,10 @@ return [
// with the interface.css styles; skinStyles should be used if your
// skin over-rides common content styling.
'skinStyles' => [
'default' => 'resources/src/mediawiki.skinning/content.parsoid.less',
'default' => [
'resources/src/mediawiki.skinning/content.parsoid.less',
'resources/src/mediawiki.skinning/content.media.less',
],
],
'targets' => [ 'desktop', 'mobile' ],
],

207
resources/src/mediawiki.skinning/content.media.less Normal file
View file

@ -0,0 +1,207 @@
/**
* Block media items
*/
figure[ typeof*='mw:Image' ],
figure[ typeof*='mw:Video' ],
figure[ typeof*='mw:Audio' ] {
margin: 0;
a {
border: 0;
}
&.mw-halign-right {
/* @noflip */
margin: 0 0 0.5em 0.5em;
/* @noflip */
clear: right;
/* @noflip */
float: right;
}
&.mw-halign-left {
/* @noflip */
margin: 0 0.5em 0.5em 0;
/* @noflip */
clear: left;
/* @noflip */
float: left;
}
&.mw-halign-none {
margin: 0;
clear: none;
float: none;
}
&.mw-halign-center {
margin: 0 auto 0.5em auto;
display: table;
border-collapse: collapse;
clear: none;
float: none;
}
/* Hide the caption for frameless and plain floated images */
> figcaption {
display: none;
}
}
figure[ typeof~='mw:Image/Thumb' ],
figure[ typeof~='mw:Video/Thumb' ],
figure[ typeof~='mw:Audio/Thumb' ],
figure[ typeof~='mw:Image/Frame' ],
figure[ typeof~='mw:Video/Frame' ],
figure[ typeof~='mw:Audio/Frame' ] {
display: table;
text-align: center;
border: 1px solid #c8ccd1;
border-collapse: separate;
border-spacing: 3px;
background-color: #f8f9fa;
width: 1px; // From https://stackoverflow.com/a/6536025
// Avoid !important
&.mw-halign-center {
border-collapse: separate;
}
// Default to right alignment. This is needed since Parsoid only specifies the
// alignment class when the alignment is explicitly set.
margin: 0.5em 0 1.3em 1.4em;
clear: right;
float: right;
&.mw-halign-left {
/* @noflip */
margin: 0.5em 1.4em 1.3em 0;
}
&.mw-halign-right {
/* @noflip */
margin: 0.5em 0 1.3em 1.4em;
}
> *:first-child {
> img,
> video {
border: 1px solid #c8ccd1;
background: #fff;
}
}
> figcaption {
display: block;
/**
* The "break-word" value is deprecated, however, it's well supported
* at 94.73%
* https://caniuse.com/mdn-css_properties_word-break_break-word
*
* The spec suggests it has the same effect as,
*
* word-break: normal;
* overflow-wrap: anywhere;
*
* https://drafts.csswg.org/css-text-3/#word-break-property
*
* So, we should use that. However, support for "anywhere" is lagging
* at just 72.39%, with Safari being a notable miss.
* https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
*
* "Soft wrap opportunities introduced by the word break are considered
* when calculating min-content intrinsic sizes."
* From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
*/
word-break: break-word;
/* In mw-core the font-size is duplicated, 94% in thumbiner
* and again 94% in thumbcaption. 88.4% for font size of the
* caption results in the same behavior. */
font-size: 88.4%;
line-height: 1.4em;
text-align: left;
/* taken from .thumbcaption, plus .thumbinner */
padding: 3px;
}
}
figure[ typeof~='mw:Image/Thumb' ],
figure[ typeof~='mw:Video/Thumb' ],
figure[ typeof~='mw:Audio/Thumb' ] {
> a:after {
content: '';
width: 15px;
height: 11px;
margin: 3px;
margin-bottom: 0;
.mw-content-ltr & {
/* @noflip */
float: right;
/* @noflip */
background-image: url( images/magnify-clip-ltr.png );
/* @noflip */
background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
}
.mw-content-rtl & {
/* @noflip */
float: left;
/* @noflip */
background-image: url( images/magnify-clip-rtl.png );
/* @noflip */
background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
}
}
}
/* Same as img.thumbborder in content.less */
.mw-image-border > *:first-child {
> img,
> video {
border: 1px solid #eaecf0;
}
}
/**
* Inline media items
*/
*:first-child {
> img,
> video {
.mw-valign-middle > & {
vertical-align: middle;
}
.mw-valign-baseline > & {
vertical-align: baseline;
}
.mw-valign-sub > & {
vertical-align: sub;
}
.mw-valign-super > & {
vertical-align: super;
}
.mw-valign-top > & {
vertical-align: top;
}
.mw-valign-text-top > & {
vertical-align: text-top;
}
.mw-valign-bottom > & {
vertical-align: bottom;
}
.mw-valign-text-bottom > & {
vertical-align: text-bottom;
}
}
}

208
resources/src/mediawiki.skinning/content.parsoid.less
View file

@ -19,174 +19,6 @@
counter-increment: mw-numbered-ext-link;
}
/**
* Block media items
*/
figure[ typeof*='mw:Image' ],
figure[ typeof*='mw:Video' ],
figure[ typeof*='mw:Audio' ] {
margin: 0;
a {
border: 0;
}
&.mw-halign-right {
/* @noflip */
margin: 0 0 0.5em 0.5em;
/* @noflip */
clear: right;
/* @noflip */
float: right;
}
&.mw-halign-left {
/* @noflip */
margin: 0 0.5em 0.5em 0;
/* @noflip */
clear: left;
/* @noflip */
float: left;
}
&.mw-halign-none {
margin: 0;
clear: none;
float: none;
}
&.mw-halign-center {
margin: 0 auto 0.5em auto;
display: table;
border-collapse: collapse;
clear: none;
float: none;
}
/* Hide the caption for frameless and plain floated images */
> figcaption {
display: none;
}
}
figure[ typeof~='mw:Image/Thumb' ],
figure[ typeof~='mw:Video/Thumb' ],
figure[ typeof~='mw:Audio/Thumb' ],
figure[ typeof~='mw:Image/Frame' ],
figure[ typeof~='mw:Video/Frame' ],
figure[ typeof~='mw:Audio/Frame' ] {
display: table;
text-align: center;
border: 1px solid #c8ccd1;
border-collapse: separate;
border-spacing: 3px;
background-color: #f8f9fa;
width: 1px; // From https://stackoverflow.com/a/6536025
// Avoid !important
&.mw-halign-center {
border-collapse: separate;
}
// Default to right alignment. This is needed since Parsoid only specifies the
// alignment class when the alignment is explicitly set.
margin: 0.5em 0 1.3em 1.4em;
clear: right;
float: right;
&.mw-halign-left {
/* @noflip */
margin: 0.5em 1.4em 1.3em 0;
}
&.mw-halign-right {
/* @noflip */
margin: 0.5em 0 1.3em 1.4em;
}
> *:first-child {
> img,
> video {
border: 1px solid #c8ccd1;
background: #fff;
}
}
> figcaption {
display: block;
/**
* The "break-word" value is deprecated, however, it's well supported
* at 94.73%
* https://caniuse.com/mdn-css_properties_word-break_break-word
*
* The spec suggests it has the same effect as,
*
* word-break: normal;
* overflow-wrap: anywhere;
*
* https://drafts.csswg.org/css-text-3/#word-break-property
*
* So, we should use that. However, support for "anywhere" is lagging
* at just 72.39%, with Safari being a notable miss.
* https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
*
* "Soft wrap opportunities introduced by the word break are considered
* when calculating min-content intrinsic sizes."
* From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
*/
word-break: break-word;
/* In mw-core the font-size is duplicated, 94% in thumbiner
* and again 94% in thumbcaption. 88.4% for font size of the
* caption results in the same behavior. */
font-size: 88.4%;
line-height: 1.4em;
text-align: left;
/* taken from .thumbcaption, plus .thumbinner */
padding: 3px;
}
}
figure[ typeof~='mw:Image/Thumb' ],
figure[ typeof~='mw:Video/Thumb' ],
figure[ typeof~='mw:Audio/Thumb' ] {
> a:after {
content: '';
width: 15px;
height: 11px;
margin: 3px;
margin-bottom: 0;
.mw-content-ltr & {
/* @noflip */
float: right;
/* @noflip */
background-image: url( images/magnify-clip-ltr.png );
/* @noflip */
background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
}
.mw-content-rtl & {
/* @noflip */
float: left;
/* @noflip */
background-image: url( images/magnify-clip-rtl.png );
/* @noflip */
background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
}
}
}
/* Same as img.thumbborder in content.css */
.mw-image-border > *:first-child {
> img,
> video {
border: 1px solid #eaecf0;
}
}
/**
* Avoid the need to calculate paddings individually
* https://stackoverflow.com/a/7310398
@ -204,43 +36,3 @@ figure[ typeof~='mw:Audio/Thumb' ] {
display: inline-block;
}
}
/**
* Inline media items
*/
*:first-child {
> img,
> video {
.mw-valign-middle > & {
vertical-align: middle;
}
.mw-valign-baseline > & {
vertical-align: baseline;
}
.mw-valign-sub > & {
vertical-align: sub;
}
.mw-valign-super > & {
vertical-align: super;
}
.mw-valign-top > & {
vertical-align: top;
}
.mw-valign-text-top > & {
vertical-align: text-top;
}
.mw-valign-bottom > & {
vertical-align: bottom;
}
.mw-valign-text-bottom > & {
vertical-align: text-bottom;
}
}
}

8
tests/phpunit/includes/resourceloader/ResourceLoaderSkinModuleTest.php
View file

@ -120,17 +120,21 @@ CSS
public function testGetStyles( $parent, $logo, $expected ) {
$module = $this->getMockBuilder( ResourceLoaderSkinModule::class )
->setMethods( [ 'readStyleFiles', 'getConfig', 'getLogoData' ] )
->disableOriginalConstructor()
->getMock();
$module->expects( $this->once() )->method( 'readStyleFiles' )
->willReturn( $parent );
$module->expects( $this->once() )->method( 'getConfig' )
->willReturn( new HashConfig() );
$module->expects( $this->any() )->method( 'getConfig' )
->willReturn( new HashConfig( [
'UseNewMediaStructure' => true,
] ) );
$module->expects( $this->once() )->method( 'getLogoData' )
->willReturn( $logo );
$ctx = $this->getMockBuilder( ResourceLoaderContext::class )
->disableOriginalConstructor()->getMock();
$module->__construct();
$this->assertEquals(
$expected,
$module->getStyles( $ctx )