+++ /dev/null
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="../../resources/src/mediawiki.action/mediawiki.action.history.diff.css">
- <link rel="stylesheet" media="print" href="../../resources/src/mediawiki.action/mediawiki.action.history.diff.print.css">
-</head>
-<body>
-
-<p>This show various styles for our diff action. Style sheet: <code><a href="../../resources/src/mediawiki.action/mediawiki.action.history.diff.css">resources/src/mediawiki.action/mediawiki.action.history.diff.css</a></code>.</p>
-<p>This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.</p>
-<p>Try it out in print mode, too. Style sheet: <code><a href="../../resources/src/mediawiki.action/mediawiki.action.history.diff.print.css">resources/src/mediawiki.action/mediawiki.action.history.diff.print.css</a></code>.</p>
-
-<p>Practical example copied from MediaWiki's HTML output:</p>
-
-<table class="diff diff-contentalign-left">
- <colgroup><col class="diff-marker">
- <col class="diff-content">
- <col class="diff-marker">
- <col class="diff-content">
- </colgroup>
-<tbody>
-<tr>
- <td class="diff-marker">−</td>
- <td class="diff-deletedline"><div>Lorem ipsum dolor sit amet<del class="diffchange diffchange-inline">, consectetur adipisicing elit</del>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td>
- <td class="diff-marker">+</td>
- <td class="diff-addedline"><div>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td>
-</tr>
-<tr>
- <td class="diff-marker">−</td>
- <td class="diff-deletedline"></td>
- <td colspan="2" class="diff-empty"> </td>
-</tr>
-<tr>
- <td class="diff-marker">−</td>
- <td class="diff-deletedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td>
- <td colspan="2" class="diff-empty"> </td>
-</tr>
-<tr>
- <td class="diff-marker"> </td>
- <td class="diff-context"></td>
- <td class="diff-marker"> </td>
- <td class="diff-context"></td>
-</tr>
-<tr>
- <td class="diff-marker"> </td>
- <td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td>
- <td class="diff-marker"> </td>
- <td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td>
-</tr>
-<tr>
- <td class="diff-marker"> </td>
- <td class="diff-context"></td>
- <td class="diff-marker"> </td>
- <td class="diff-context"></td>
-</tr>
-<tr>
- <td class="diff-marker">−</td>
- <td class="diff-deletedline"><div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim<del class="diffchange diffchange-inline"> id est laborum</del>.</div></td>
- <td class="diff-marker">+</td>
- <td class="diff-addedline"><div>Excepteur sint occaecat cupidatat non proident, sunt<ins class="diffchange diffchange-inline"> reprehenderit in voluptate</ins> in culpa qui officia deserunt mollit anim.</div></td>
-</tr>
-<tr>
- <td colspan="2" class="diff-empty"> </td>
- <td class="diff-marker">+</td>
- <td class="diff-addedline"></td>
-</tr>
-<tr>
- <td colspan="2" class="diff-empty"> </td>
- <td class="diff-marker">+</td>
- <td class="diff-addedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td>
-</tr>
-</tbody></table>
-
-<p>Below are some basic lines being applied one or two classes. Mainly for debugging purposes.</p>
-
-<table class="diff">
- <tr><th>Diff</th></tr>
-
- <tr><td class="diff-addedline"><code>diff-addedline</code>: added line</td></tr>
- <tr><td class="diff-deletedline"><code>diff-deletedline</code>: deleted line</td></tr>
- <tr><td class="diff-context"><code>diff-context</code>: context</td></tr>
-
- <tr><th>Same as above with a <code><ins></code> or <code><del></code> child element having the <code>diffchange</code> class:</th></tr>
-
- <tr><td class="diffchange">Diffchange</td></tr>
- <tr><td class="diff-addedline"><ins class="diffchange">Added line + diffchange</ins></td></tr>
- <tr><td class="diff-deletedline"><del class="diffchange">Deleted line + diffchange</del></td></tr>
-</table>
-
-</body>
-</html>
--- /dev/null
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="../../resources/src/mediawiki/mediawiki.diff.styles.css">
+ <link rel="stylesheet" media="print" href="../../resources/src/mediawiki/mediawiki.diff.styles.print.css">
+</head>
+<body>
+
+<p>This show various styles for our diff action. Style sheet: <code><a href="../../resources/src/mediawiki/mediawiki.diff.styles.css">resources/src/mediawiki/mediawiki.diff.styles.css</a></code>.</p>
+<p>This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.</p>
+<p>Try it out in print mode, too. Style sheet: <code><a href="../../resources/src/mediawiki/mediawiki.diff.styles.print.css">resources/src/mediawiki/mediawiki.diff.styles.print.css</a></code>.</p>
+
+<p>Practical example copied from MediaWiki's HTML output:</p>
+
+<table class="diff diff-contentalign-left">
+ <colgroup><col class="diff-marker">
+ <col class="diff-content">
+ <col class="diff-marker">
+ <col class="diff-content">
+ </colgroup>
+<tbody>
+<tr>
+ <td class="diff-marker">−</td>
+ <td class="diff-deletedline"><div>Lorem ipsum dolor sit amet<del class="diffchange diffchange-inline">, consectetur adipisicing elit</del>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td>
+ <td class="diff-marker">+</td>
+ <td class="diff-addedline"><div>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td>
+</tr>
+<tr>
+ <td class="diff-marker">−</td>
+ <td class="diff-deletedline"></td>
+ <td colspan="2" class="diff-empty"> </td>
+</tr>
+<tr>
+ <td class="diff-marker">−</td>
+ <td class="diff-deletedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td>
+ <td colspan="2" class="diff-empty"> </td>
+</tr>
+<tr>
+ <td class="diff-marker"> </td>
+ <td class="diff-context"></td>
+ <td class="diff-marker"> </td>
+ <td class="diff-context"></td>
+</tr>
+<tr>
+ <td class="diff-marker"> </td>
+ <td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td>
+ <td class="diff-marker"> </td>
+ <td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td>
+</tr>
+<tr>
+ <td class="diff-marker"> </td>
+ <td class="diff-context"></td>
+ <td class="diff-marker"> </td>
+ <td class="diff-context"></td>
+</tr>
+<tr>
+ <td class="diff-marker">−</td>
+ <td class="diff-deletedline"><div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim<del class="diffchange diffchange-inline"> id est laborum</del>.</div></td>
+ <td class="diff-marker">+</td>
+ <td class="diff-addedline"><div>Excepteur sint occaecat cupidatat non proident, sunt<ins class="diffchange diffchange-inline"> reprehenderit in voluptate</ins> in culpa qui officia deserunt mollit anim.</div></td>
+</tr>
+<tr>
+ <td colspan="2" class="diff-empty"> </td>
+ <td class="diff-marker">+</td>
+ <td class="diff-addedline"></td>
+</tr>
+<tr>
+ <td colspan="2" class="diff-empty"> </td>
+ <td class="diff-marker">+</td>
+ <td class="diff-addedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td>
+</tr>
+</tbody></table>
+
+<p>Below are some basic lines being applied one or two classes. Mainly for debugging purposes.</p>
+
+<table class="diff">
+ <tr><th>Diff</th></tr>
+
+ <tr><td class="diff-addedline"><code>diff-addedline</code>: added line</td></tr>
+ <tr><td class="diff-deletedline"><code>diff-deletedline</code>: deleted line</td></tr>
+ <tr><td class="diff-context"><code>diff-context</code>: context</td></tr>
+
+ <tr><th>Same as above with a <code><ins></code> or <code><del></code> child element having the <code>diffchange</code> class:</th></tr>
+
+ <tr><td class="diffchange">Diffchange</td></tr>
+ <tr><td class="diff-addedline"><ins class="diffchange">Added line + diffchange</ins></td></tr>
+ <tr><td class="diff-deletedline"><del class="diffchange">Deleted line + diffchange</del></td></tr>
+</table>
+
+</body>
+</html>
}
/**
- * Add style sheets and supporting JS for diff display.
+ * Add style sheets for diff display.
*/
public function showDiffStyle() {
- $this->getOutput()->addModuleStyles( 'mediawiki.action.history.diff' );
+ $this->getOutput()->addModuleStyles( 'mediawiki.diff.styles' );
}
/**
// must be loaded on the bottom
'position' => 'bottom',
],
+ 'mediawiki.diff.styles' => [
+ 'position' => 'top',
+ 'styles' => [
+ 'resources/src/mediawiki/mediawiki.diff.styles.css',
+ 'resources/src/mediawiki/mediawiki.diff.styles.print.css' => [
+ 'media' => 'print'
+ ],
+ ],
+ 'targets' => [ 'desktop', 'mobile' ],
+ ],
'mediawiki.feedback' => [
'scripts' => 'resources/src/mediawiki/mediawiki.feedback.js',
'styles' => 'resources/src/mediawiki/mediawiki.feedback.css',
'jquery.spinner',
'jquery.textSelection',
'mediawiki.api',
- 'mediawiki.action.history.diff',
+ 'mediawiki.diff.styles',
'mediawiki.util',
'mediawiki.jqueryMsg',
],
'position' => 'top',
'styles' => 'resources/src/mediawiki.action/mediawiki.action.history.styles.css',
],
+ // using this module is deprecated, for diff styles use mediawiki.diff.styles instead
'mediawiki.action.history.diff' => [
'position' => 'top',
'styles' => [
- 'resources/src/mediawiki.action/mediawiki.action.history.diff.css',
- 'resources/src/mediawiki.action/mediawiki.action.history.diff.print.css' => [
+ 'resources/src/mediawiki/mediawiki.diff.styles.css',
+ 'resources/src/mediawiki/mediawiki.diff.styles.print.css' => [
'media' => 'print'
],
],
+++ /dev/null
-/*!
- * Diff rendering
- */
-table.diff {
- border: none;
- border-spacing: 4px;
- margin: 0;
- width: 100%;
- /* Ensure that colums are of equal width */
- table-layout: fixed;
-}
-
-table.diff td {
- padding: 0.33em 0.5em;
-}
-
-table.diff td.diff-marker {
- /* Compensate padding for increased font-size */
- padding: 0.25em;
-}
-
-table.diff col.diff-marker {
- width: 2%;
-}
-
-table.diff col.diff-content {
- width: 48%;
-}
-
-table.diff td div {
- /* Force-wrap very long lines such as URLs or page-widening char strings */
- word-wrap: break-word;
-}
-
-td.diff-otitle,
-td.diff-ntitle {
- text-align: center;
-}
-
-td.diff-lineno {
- font-weight: bold;
-}
-
-td.diff-marker {
- text-align: right;
- font-weight: bold;
- font-size: 1.25em;
- line-height: 1.2;
-}
-
-td.diff-addedline,
-td.diff-deletedline,
-td.diff-context {
- font-size: 88%;
- line-height: 1.6;
- vertical-align: top;
- white-space: -moz-pre-wrap;
- white-space: pre-wrap;
- border-style: solid;
- border-width: 1px 1px 1px 4px;
- border-radius: 0.33em;
-}
-
-td.diff-addedline {
- border-color: #a3d3ff;
-}
-
-td.diff-deletedline {
- border-color: #ffe49c;
-}
-
-td.diff-context {
- background: #f9f9f9;
- border-color: #e6e6e6;
- color: #333;
-}
-
-.diffchange {
- font-weight: bold;
- text-decoration: none;
-}
-
-td.diff-addedline .diffchange,
-td.diff-deletedline .diffchange {
- border-radius: 0.33em;
- padding: 0.25em 0;
-}
-
-td.diff-addedline .diffchange {
- background: #d8ecff;
-}
-
-td.diff-deletedline .diffchange {
- background: #feeec8;
-}
-
-/* Correct user & content directionality when viewing a diff */
-.diff-currentversion-title,
-.diff {
- direction: ltr;
- unicode-bidi: embed;
-}
-
-/* @noflip */ .diff-contentalign-right td {
- direction: rtl;
- unicode-bidi: embed;
-}
-
-/* @noflip */ .diff-contentalign-left td {
- direction: ltr;
- unicode-bidi: embed;
-}
-
-.diff-multi,
-.diff-otitle,
-.diff-ntitle,
-.diff-lineno {
- direction: ltr !important;
- unicode-bidi: embed;
-}
+++ /dev/null
-/*!
- * Diff rendering
- */
-td.diff-context,
-td.diff-addedline .diffchange,
-td.diff-deletedline .diffchange {
- background-color: transparent;
-}
-
-td.diff-addedline .diffchange {
- text-decoration: underline;
-}
-
-td.diff-deletedline .diffchange {
- text-decoration: line-through;
-}
--- /dev/null
+/*!
+ * Diff rendering
+ */
+table.diff {
+ border: none;
+ border-spacing: 4px;
+ margin: 0;
+ width: 100%;
+ /* Ensure that colums are of equal width */
+ table-layout: fixed;
+}
+
+table.diff td {
+ padding: 0.33em 0.5em;
+}
+
+table.diff td.diff-marker {
+ /* Compensate padding for increased font-size */
+ padding: 0.25em;
+}
+
+table.diff col.diff-marker {
+ width: 2%;
+}
+
+table.diff col.diff-content {
+ width: 48%;
+}
+
+table.diff td div {
+ /* Force-wrap very long lines such as URLs or page-widening char strings */
+ word-wrap: break-word;
+}
+
+td.diff-otitle,
+td.diff-ntitle {
+ text-align: center;
+}
+
+td.diff-lineno {
+ font-weight: bold;
+}
+
+td.diff-marker {
+ text-align: right;
+ font-weight: bold;
+ font-size: 1.25em;
+ line-height: 1.2;
+}
+
+td.diff-addedline,
+td.diff-deletedline,
+td.diff-context {
+ font-size: 88%;
+ line-height: 1.6;
+ vertical-align: top;
+ white-space: -moz-pre-wrap;
+ white-space: pre-wrap;
+ border-style: solid;
+ border-width: 1px 1px 1px 4px;
+ border-radius: 0.33em;
+}
+
+td.diff-addedline {
+ border-color: #a3d3ff;
+}
+
+td.diff-deletedline {
+ border-color: #ffe49c;
+}
+
+td.diff-context {
+ background: #f9f9f9;
+ border-color: #e6e6e6;
+ color: #333;
+}
+
+.diffchange {
+ font-weight: bold;
+ text-decoration: none;
+}
+
+td.diff-addedline .diffchange,
+td.diff-deletedline .diffchange {
+ border-radius: 0.33em;
+ padding: 0.25em 0;
+}
+
+td.diff-addedline .diffchange {
+ background: #d8ecff;
+}
+
+td.diff-deletedline .diffchange {
+ background: #feeec8;
+}
+
+/* Correct user & content directionality when viewing a diff */
+.diff-currentversion-title,
+.diff {
+ direction: ltr;
+ unicode-bidi: embed;
+}
+
+/* @noflip */ .diff-contentalign-right td {
+ direction: rtl;
+ unicode-bidi: embed;
+}
+
+/* @noflip */ .diff-contentalign-left td {
+ direction: ltr;
+ unicode-bidi: embed;
+}
+
+.diff-multi,
+.diff-otitle,
+.diff-ntitle,
+.diff-lineno {
+ direction: ltr !important;
+ unicode-bidi: embed;
+}
--- /dev/null
+/*!
+ * Diff rendering
+ */
+td.diff-context,
+td.diff-addedline .diffchange,
+td.diff-deletedline .diffchange {
+ background-color: transparent;
+}
+
+td.diff-addedline .diffchange {
+ text-decoration: underline;
+}
+
+td.diff-deletedline .diffchange {
+ text-decoration: line-through;
+}