Commit graph

109 commits

Author SHA1 Message Date
Thiemo Kreuz 263285e139 Merge some more identical MediaWiki color scheme styles
Bug: T307188
Change-Id: I50037fe3f8653941269699b140a84ff44d8e20ed
2022-06-16 16:15:56 +02:00
Thiemo Kreuz 762c9e3eb4 Convert MediaWiki style sheet to LESS code
I did some reverse engeneering and derived the three base colors for
nested templates and parser functions as well as links, together with
a formula to calculate any mixture of the three.

You can manually compile the .less file:
lessc resources/mode/mediawiki/mediawiki.less resources/mode/mediawiki/mediawiki.css

Then compare:
git diff --word-diff=color -w HEAD^ -- resources/mode/mediawiki/mediawiki.css

You will see that some numbers change. These are rounding errors in
the old .css code.

Bug: T307188
Change-Id: Ic534a2fac73f9f737ae5238b87aa80b705b37786
2022-06-14 15:59:33 +00:00
Thiemo Kreuz c8c140b33d Merge identical styles in MediaWiki style sheet
To avoid code duplication and to make this easier to read and to
maintain.

Bug: T307188
Change-Id: I01ccdb7aecae6c80e7924250afdf0d7fafb486e2
2022-06-14 09:49:20 +02:00
Adam Wight ba48e3c474 Merge accessibility-mindful colors into base styles
Bug: T307188
Change-Id: I32831cc546bc8fca2ee73e3d6742f87838791d1b
2022-06-10 16:20:43 +02:00
bhsd 44c31c9122 Fix special characters in section headers
When there are standalone special characters '<', '[', '{', and '~' in the section header, the ending '=' will not be highlighted while the ending characters in the next line are incorrectly highlighted. This is because the ending '=' is eaten as plain text at the end of function eatWikiText(). A less aggressive plain text matching does not hurt.

Bug: T309143
Depends-On: I47dad71df97f38c55550f71baf6dae67dbe0a2ba
Change-Id: I4a9c6c6cb2f7fbc212808e386124a56676fdbfb1
2022-05-24 23:09:09 +00:00
jenkins-bot 0418e65cad Merge "Add colorblind-friendly scheme" 2022-04-08 13:52:34 +00:00
WMDE-Fisch c3cda7edd7 Add colorblind-friendly scheme
Including an user options to enable/disable the scheme. Defaults
to false. Feature is only availible together with the new more
accessibile color scheme as the CSS depends on each other.

Set behind a new temporary feature flag.

Bug: T305027
Change-Id: I46d240a30eda5a1526ada1fe9b724f7b4594b426
2022-04-08 14:12:43 +02:00
jenkins-bot daf7103693 Merge "Use less for accessible-colors.css" 2022-04-07 12:10:38 +00:00
jenkins-bot eec80985fc Merge "Prepare tests for later change" 2022-04-06 10:24:27 +00:00
WMDE-Fisch ede8b043bd Use less for accessible-colors.css
Change-Id: I4ed291ce0ef6e85b4540fcaef36892a521a99c17
2022-04-06 10:21:47 +00:00
jenkins-bot bec93b7b5a Merge "build: Update devDependencies" 2022-03-16 20:35:03 +00:00
jenkins-bot fa9462342d Merge "Highlight headings with trailing comments" 2022-03-16 20:16:20 +00:00
Ed Sanders 80336b322a build: Update devDependencies
Change-Id: Ia0f3481cb4e153338ef68c1d44951d897ddc7195
2022-03-13 22:56:14 +00:00
AntiCompositeNumber a84828c08c
Highlight headings with trailing comments
Bug: T171074
Change-Id: I1c8399b839a9be5e5aa0ece36dc86a5848936b5f
2022-03-11 17:13:14 -05:00
Thiemo Kreuz 40e4d6b1d0 Prepare tests for later change
Change-Id: Ib0bf448e68f3051d8f1072417927f9a047ed9f06
2022-03-10 18:47:17 +00:00
jenkins-bot c22868121e Merge "Highlight multi-line tags" 2022-03-04 21:09:42 +00:00
bhsd d23dc77d16 Highlight multi-line tags
CodeMirror is already able to highlight multi-line tags if the tag name is followed by any non-whitespace characters in the same line. This commit fixes the other condition where the tag name is followed by whitespace only in the same line.

Bug: T201684
Change-Id: I8cb4a53ee0fe7fc8612a58331a1a3e57d00d7630
2022-02-23 17:02:22 -08:00
bhsd ca0e8f20a4 Highlight tags in link text
HTML and extension tags should be highlighted as the text of internal or external links.

Bug: T184341
Change-Id: Ib1f2047936b395afd86720e2a7c921e382229cdd
2022-02-19 06:11:34 +00:00
Ed Sanders 0faac32661 eslint: Lint Gruntile.js using server rules
Change-Id: Ib0e7d62343689bb993476cb1ad40f93fc89a7190
2022-02-07 16:25:32 +00:00
Thiemo Kreuz be08e04309 Reduce noise in syntax highlighting tests
* What we care about is the <pre>. The class="CodeMirror-line" is
  added to every <pre>. We don't really learn anything new when we
  include it in our tests.
* Testing the ARIA role is testing a CodeMirror feature, not a
  feature of the mediawiki mode under test.

Change-Id: I33bfedb304228240c4e835cc983117668c398c61
2021-12-16 06:53:47 +00:00
Thiemo Kreuz 0968d3ea16 Fix syntax highlighting test failing when Cite isn't loaded
I forgot this when I added this test case in I03a1e1a.

Also:
* Use another method to detect if the Cite extension is active. This
  is the same method used in the actual code.
* Move a line of code into the `if` it belongs to.

Change-Id: I1efd3f945150aeb08db3c771e579d9a6114a4c21
2021-12-09 10:06:41 +01:00
Bartosz Dziewoński 561ffca718 Don't mess up the page when running tests via Special:JavaScriptTest
* Append to the hidden #qunit-fixture instead of directly to the body
* Use the right selector when cleaning up

Change-Id: I8be38900e6c5f4592f06dfc8f7c2cfc348627716
2021-12-07 14:40:11 +01:00
Derk-Jan Hartman 73441687ae Add q to list of allowed html elements to syntax highlighting
Bug: T289289
Change-Id: I2ab550c9e992a9daae76287313c596db67182d09
2021-12-04 22:17:26 +01:00
jenkins-bot 6fd33d774f Merge "Fix MediaWiki highlighter partly failing on quoted attributes" 2021-04-30 12:43:30 +00:00
Thiemo Kreuz 032bed3c61 Fix MediaWiki highlighter partly failing on quoted attributes
In T270880 an example with a slash in <ref name="a/b"> is
described. The same issue happens with several other characters
including the closing bracket, e.g. <ref name="a>b">. This patch
fixes all of this by accepting _all_ characters between double
and single quotes.

Bug: T270880
Change-Id: I03a1e1a25af692dc703b44a57b2d23d6fc15c8c9
2021-04-23 20:43:33 +02:00
Thiemo Kreuz 26a05d1dd0 Allow HTML comments and newlines in template names
Bug: T277767
Change-Id: I0a82af178d768e5f4d3dd81b1759c0ce72310397
2021-04-23 15:34:20 +02:00
jenkins-bot f1ef877d28 Merge "Update color scheme to meet accessibility standards" 2021-03-09 16:08:25 +00:00
WMDE-Fisch 9bea2a7905 Refine bracket matching styling
Adds a custom class for matched brackets to allow better integration
with custom bracket styles. The brackets won't be bold in the 2017WTE.
Bold font might lead to misalignment there. See ticket.

Note: box-shadow seems to be supported for quite some time by all
relevant browsers

Bug: T270926
Change-Id: Ica1e301f63a106a96db3bfaba4b2f322af64b009
2021-03-08 09:26:07 +01:00
Andrew Kostka aaf67a9c0b Update color scheme to meet accessibility standards
These changes to the color scheme are hidden behind a feature
flag for the time being.

Bug: T271895
Change-Id: I0a4b03e0f3bc8239f31edbbd5ae55661607b76f6
2021-03-05 16:39:14 +01:00
Thiemo Kreuz cfecfbc099 Fix remaining bottleneck in wikitext syntax highlighter
I was wondering why the performance when editing wikitext is
still so bad, and profiled it again. Turns out
StringStream.match() is still the bottleneck (even if already
100 times better than before Icbb1122).

The method is called with many different patterns from
mode/mediawiki/mediawiki.js. I profiled them individually and
found a single outlier. The idea is the same as in Icbb1122.
A pattern that is able to find something *in* a string is
doing nothing but wasting time, as StringStream.match() ignores
every result that is not at the start of the string.

The change adds the missing ^ anchor and wraps the regex pattern
from mw.config.get( 'wgUrlProtocols' ) (that is something like
"ftp:\/\/|http:\/\/|https:\/\/|…") in (?:…), which is a
non-matching group. This is necessary because of the | in the
pattern. The result is a pattern that looks like /^(?:…|…|…)/i.

I remember looking at this code while working on Icbb1122, but
didn't include it in the patch, and then forgot about it.

Bug: T270237
Bug: T270317
Change-Id: Iea2fd116b68704c3186b0edf965006cc7c6eda82
2021-02-05 16:07:40 +01:00
Thiemo Kreuz f1cf1a534c Fix performance bottleneck in mediawiki syntax highlighter
I continued profiling the matchbrackets addon for T270237 and run into
performance issues that turned out to be unrelated to the addon. The
flame graph highlighted a "match" function. Note this is not the
String.match() from JavaScript, but something in the CodeMirror lib:

StringStream.prototype.match = function (pattern) {
  var match = this.string.match(pattern);
  if (match && match.index > 0) {
    return null;
  }
  return match;
}

(Note: I simplified this code so we can focus on the bug.)

When the pattern is a regular expression, it's executed via
JavaScript's String.match(). The function then checks if there was a
match and if it's at the start of the string. If not, it's not a
match and doesn't return one.

In other words: Even if there is a match somewhere in the string, the
function acts as if there was no match.

When we change all patterns to be anchored via ^, they don't scan the
entire string any more but return much ealier when there is no match
at the start of the string. We are effectively replacing nested loops
(hidden in the patterns) with single calls.

This bug exists since 2014.

The disabled line in the matchbrackets addon is just dead code. I
don't remove it to document the fact that we disabled it.

Bug: T270237
Bug: T270317
Change-Id: Icbb1122e6a3b26c0606726ff405e108931d185be
2021-01-13 16:58:57 +01:00
Thiemo Kreuz 4a3c2dcad5 Update CodeMirror to 5.58.3
I had to make some CSS selectors more specific, because the
library changed

 .CodeMirror pre

to

 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like

This is only relevant for entire lines (implemented as <pre>
elements). Most of the custom CSS is for characters, not lines.

In my tests in the Wikitext editor as well as VisualEditor I
could not spot any difference between the old and new version.

Bug: T258999
Change-Id: I6f0f030f972838727f3ef220feb105264f122798
2020-12-07 20:20:49 +00:00
Thiemo Kreuz 3e9bb4fb08 Replace all .png images with rgba() background colors
The rgba() syntax is supported for a very, very long time now:
https://caniuse.com/#feat=mdn-css_types_color_alpha

Notes:

I realized the numbers in these file names are actually their
transparency in percent (more precisely their opaqueness).
4 is 4% which translates to 0.04 in the rgba() syntax.

I used Gimp to pick the opaque color values from the images.
Gimp makes this easy. No guesswork or calculations needed.

For multiple, stacked images I calculated the colors by
averaging their RGB values (considering how opaque each color
is). Note this is actually *more* precise than the stacked
images before. Stacking alpha colors is flawed. For example:
Let's say we have an rgba(255, 255, 255, 1) background.
Layering a half transparent rgba(255, 0, 0, 0.5) on top means
half the background shines through. This averages to
rgba( 255, 127, 127, 1). Now we stack rgba(0, 0, 0, 0.5) on
top. Again, half the background shines through, resulting in
rgba(127, 63, 63, 1).

When we apply the two colors the other way around, the result
is rgba(191, 63, 63, 1), a much brighter red.

This flaw doesn't happen when precalculating the averages, as
done in this patch.

Change-Id: I29026864714c5f90c2613af57f08693e7e2b996c
2020-08-11 14:24:20 +02:00
Ed Sanders 2518861bc1 build: Update devDependencies
Change-Id: I2f2967a1525c6a66eba2f5fc225e74b89380c5dd
2020-06-12 22:51:38 +01:00
Derk-Jan Hartman d1a3e49265 Highlight match end tag with different capitalization
This recoginizes <ref></Ref>

Bug: T179321
Change-Id: Ib1e501f97654a019281eddd6cc69ea3b979daec7
2019-04-14 01:25:40 +02:00
jenkins-bot 71a96af684 Merge "Make Special:JavaScriptTest pass on Webkit and on Firefox" 2019-03-12 10:32:28 +00:00
jenkins-bot f6c86b9867 Merge "build: Update eslint-config-wikimedia to 0.11.0" 2019-03-06 14:39:37 +00:00
Ed Sanders 37b49bfdc4 build: Update eslint-config-wikimedia to 0.11.0
Change-Id: I7ca5276791d9add0709387422016d7193e8d9945
2019-03-06 12:10:29 +00:00
Fomafix ebd382f004 Make Special:JavaScriptTest pass on Webkit and on Firefox
CodeMirror inserts

 style="padding-right: 0.1px;"

only on Webkit.

The test case now strips this pattern from the rendered HTML before
comparing with the expected test case output.

Change-Id: I34b201f790d3d85a5f51d8200bf8219f11d14506
2019-02-25 08:14:58 +01:00
Fomafix 5161c6abe9 Make Special:JavaScriptTest pass with and without extension Cite
Change-Id: Ib3bae7968c7d1eb0d5f862f0410f016f47abcd15
2019-02-25 08:10:32 +01:00
Ed Sanders 7604581cc1 Remove obsolete aliases from closures
Bug: T208951
Change-Id: I64c2966b7c41d6b2b1911e2fb52e4c7364bf7964
2018-11-12 13:19:41 +00:00
Ed Sanders 1be09a9a1d build: Update linters
Change-Id: I8d3aaf0b7d453033b72e5d6622b8f54df2c86bca
2018-09-12 00:03:19 +01:00
MusikAnimal 4d2783eb3e Tests for MediaWiki CodeMirror syntax highlighting
Bug: T169592
Change-Id: I0750d3a320af5451f847e6062f82523fb18f12bc
2018-03-20 16:27:55 -04:00
jenkins-bot 0e4bb8feb6 Merge "Don't match // as protocol unless used in a link" 2018-03-15 23:51:21 +00:00
MusikAnimal 5c8eb20c33 Don't match // as protocol unless used in a link
Bug: https://phabricator.wikimedia.org/T185069
Change-Id: I2111e7c7ae599c5aed2f5ae779bc3d7b2d8ce82a
2018-03-13 22:51:35 -04:00
MusikAnimal ccbce0e69d Highlight void tags and invalid self-closing tags correctly
Bug: T170238
Change-Id: Ice1bdae3d16cf365da14c6df0e8d91d2b914e074
2018-03-13 22:18:59 -04:00
jenkins-bot b7a201e2f0 Merge "Fix highlighting of table headers on single text row" 2018-03-13 22:39:01 +00:00
MusikAnimal 62a53c5905 Fix highlighting of table headers on single text row
Bug: https://phabricator.wikimedia.org/T179534
Change-Id: I6e353d52af849678da63624e456ec2a82c680df4
2018-03-13 18:23:16 -04:00
MusikAnimal 980f3d2848 Add <translate> as a permitted tag
Bug: T172456
Change-Id: I2315053b79bfd2dd009a98c0fe824ccdbcaf431c
2018-03-05 15:01:45 -05:00
David Sn 62894aafff Update comment text color CSS
This patch changes the comment text color
to #84A0A0, as suggested by Kaldari in T170067.

Bug: T170067
Change-Id: I016b8ce360a06f14b02cee13b629fa578c889347
2017-12-05 09:32:34 +00:00