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

Made the JsonContent Responsive

Browse source 
Wrapped the HTML of JsonContent with a div and added a custom class to it. The class .noresize in mediawiki.content.json.less sets the overflow-x to auto and white-space to nowrap. This will make the JsonContent responsive with a horizontal scroll bar. Updated tests for the new behaviour of the JsonContent.

Bug: T366300
Change-Id: Ibf1494fa0940c37cf36ebfa18442d86c318dd1d1
This commit is contained in:
Anuj Agrawal 2024-08-02 19:40:58 +05:30
parent 839e38173c
commit a3894b32da
2 changed files with 27 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
includes/content/JsonContent.php
View file

@ -80,22 +80,24 @@ class JsonContent extends TextContent {
*/
public function rootValueTable( $val ) {
if ( is_object( $val ) ) {
return $this->objectTable( $val );
}
$table = $this->objectTable( $val );
if ( is_array( $val ) ) {
} elseif ( is_array( $val ) ) {
// Wrap arrays in another array so that they're visually boxed in a container.
// Otherwise they are visually indistinguishable from a single value.
return $this->arrayTable( [ $val ] );
$table = $this->arrayTable( [ $val ] );
} else {
$table = Html::rawElement( 'table', [ 'class' => 'mw-json mw-json-single-value' ],
Html::rawElement( 'tbody', [],
Html::rawElement( 'tr', [],
Html::element( 'td', [], $this->primitiveValue( $val ) )
)
)
);
}
return Html::rawElement( 'table', [ 'class' => 'mw-json mw-json-single-value' ],
Html::rawElement( 'tbody', [],
Html::rawElement( 'tr', [],
Html::element( 'td', [], $this->primitiveValue( $val ) )
)
)
);
return Html::rawElement( 'div', [ 'class' => 'noresize' ], $table );
}
/**

28
tests/phpunit/includes/content/JsonContentHandlerIntegrationTest.php
View file

@ -15,43 +15,43 @@ class JsonContentHandlerIntegrationTest extends MediaWikiLangTestCase {
return [
[
[],
'<table class="mw-json"><tbody><tr><td>' .
'<div class="noresize"><table class="mw-json"><tbody><tr><td>' .
'<table class="mw-json"><tbody><tr><td class="mw-json-empty">Empty array</td></tr>'
. '</tbody></table></td></tr></tbody></table>'
. '</tbody></table></td></tr></tbody></table></div>'
],
[
(object)[],
'<table class="mw-json"><tbody><tr><td class="mw-json-empty">Empty object</td></tr>' .
'</tbody></table>'
'<div class="noresize"><table class="mw-json"><tbody><tr><td class="mw-json-empty">Empty object</td></tr>' .
'</tbody></table></div>'
],
[
(object)[ 'foo' ],
'<table class="mw-json"><tbody><tr><th><span>0</span></th>' .
'<td class="mw-json-value">"foo"</td></tr></tbody></table>'
'<div class="noresize"><table class="mw-json"><tbody><tr><th><span>0</span></th>' .
'<td class="mw-json-value">"foo"</td></tr></tbody></table></div>'
],
[
(object)[ 'foo', 'bar' ],
'<table class="mw-json"><tbody><tr><th><span>0</span></th>' .
'<div class="noresize"><table class="mw-json"><tbody><tr><th><span>0</span></th>' .
'<td class="mw-json-value">"foo"</td></tr><tr><th><span>1</span></th>' .
'<td class="mw-json-value">"bar"</td></tr></tbody></table>'
'<td class="mw-json-value">"bar"</td></tr></tbody></table></div>'
],
[
(object)[ 'baz' => 'foo', 'bar' ],
'<table class="mw-json"><tbody><tr><th><span>baz</span></th>' .
'<div class="noresize"><table class="mw-json"><tbody><tr><th><span>baz</span></th>' .
'<td class="mw-json-value">"foo"</td></tr><tr><th><span>0</span></th>' .
'<td class="mw-json-value">"bar"</td></tr></tbody></table>'
'<td class="mw-json-value">"bar"</td></tr></tbody></table></div>'
],
[
(object)[ 'baz' => 1000, 'bar' ],
'<table class="mw-json"><tbody><tr><th><span>baz</span></th>' .
'<div class="noresize"><table class="mw-json"><tbody><tr><th><span>baz</span></th>' .
'<td class="mw-json-value">1000</td></tr><tr><th><span>0</span></th>' .
'<td class="mw-json-value">"bar"</td></tr></tbody></table>'
'<td class="mw-json-value">"bar"</td></tr></tbody></table></div>'
],
[
(object)[ '<script>alert("evil!")</script>' ],
'<table class="mw-json"><tbody><tr><th><span>0</span></th><td class="mw-json-value">"' .
'<div class="noresize"><table class="mw-json"><tbody><tr><th><span>0</span></th><td class="mw-json-value">"' .
'&lt;script>alert("evil!")&lt;/script>"' .
'</td></tr></tbody></table>',
'</td></tr></tbody></table></div>',
],
[
'{ broken JSON ]',