Commit graph

69 commits

Author SHA1 Message Date
Jon Robson 7c592bc790 Prefer native JavaScript to jQuery
Bug: T315929
Change-Id: I949fd9551269a3cb9d9df7744149510949d3076c
2023-05-21 16:53:50 +00:00
Jon Robson 323d770d66 Use native JavaScript to build thumbnail clip path
Change-Id: Ib5d734fde88eaa20ec866722af3de37abe694add
2023-05-16 17:19:47 -07:00
Jon Robson 3bd4275023 Fix test case with type with space in it
Types should not have spaces in them. In the current example this
results in a page preview element with an additional class "<"\'>"
I'm not sure what this is protecting against since we can trust types
to always be in a sensible class friendly form. It would be better
to throw an error in the mw.popups.register function than allow this.

Change-Id: If08c5162c1ca0fc3db4944092231061e22113263
2023-05-15 14:18:39 -07:00
Jon Robson 0febc3f54d Extensible previews
Allow extensions to register new types of previews via
extension attributes.

Changes:

- The check for reference previews doesn't make sense
as $('a[ href*="#" ]' ) will match any elements with a hash
fragment, so the additional check to Title.getFragment
will not provide a different result. This was introduced in
I9ec57e0fbb0d21beaaa7b359c1c2bef64d2c14f5
- Links that point to themselves are marked with mw-selflink
in MediaWiki so this can use the not selector we already have.
- The new API is used internally and only available via extension
Attributes
- An example is provided in SkinJSON
(https://github.com/jdlrobson/mediawiki-skins-skinjson/pull/14)

Bug: T233099
Change-Id: Iefe98c1f0422dbf034e385b1a41a859d030a2cf4
2022-11-22 08:45:27 -08:00
Ed Sanders 883c8c1aca build: Update eslint-config-wikimedia to 0.22.1
Change-Id: I055517998ed06fccdf50ec31251ea6aa9040abb5
2022-02-28 13:18:24 +00:00
jdlrobson 75a9d81755 Fix pointer class behaviour
Add unit tests for landscape previews.

Bug: T287520
Change-Id: Ib9a7635b532248a4f44c308d7bb5dc7ab08667e6
2021-08-10 10:40:40 -07:00
Thiemo Kreuz 5d2c5aeaa1 Remove a small piece of unused code from reference.js
Turns out this was only in place because the test was
(intentionally) incomplete. But it's dead code in
production. Let's get rid of it.

Change-Id: Ieeb145b6972dceb7eeda3a167d907b680d5c3ce4
2021-05-07 16:43:01 +02:00
Thiemo Kreuz d0872e3025 Clean up popup type settings related code
* Change more places to not hard-code the popup types, but use
  loops and such.
* Change many `function ()` headers to use the more streamlined
  ES6 sytnax.

Bug: T277639
Bug: T277640
Change-Id: Ifece87d51012e0e069286453b27f5c9ae273710e
2021-04-23 15:38:38 +02:00
Clare Ming 4908f82c01 Add title attribute to settings gear icon
Add message, description, extension for title. Update createPagePreview, renderPagePreview methods to add title attribute to settings gear icon. Add test for title attribute. Increase maxSize, maxAssetSize, maxEntrypointSize. Add compiled js files.

Bug: T274887
Change-Id: Ibb29deb3418569d8283b954b4b22074423e78bda
2021-04-02 13:30:07 -06:00
Noam Rosenthal 4492b54a44 Performance optimization for popup rendering
Reduce layout/style thrashing by measuring all required geometries
at event handler, not waiting for delays/redux/style changes.

Use CSS bottom instead of top, to avoid having to measure the popup
before positioning it, if it's placed above the link ("flippedY").

Disable some test cases that relied on implementation detail of using
"top" CSS.

Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-30 17:33:07 +02:00
Adam Wight 789cedc168 Remove reference preview "Jump to reference" link
Now that the footnote label links to the references section, we don't
need this additional link.

Bug: T265482
Change-Id: Ib9b2939eb49e7b826c7699a5b7fa0e8255fa9da1
2020-10-30 11:33:24 +00:00
Thiemo Kreuz 1cf721e2a2 Handle collapsible & sortable elements in reference popups
Elements that are marked as collapsible (often tables, but can
actually be anything) are most certainly marked as such because
they are big and don't fit in a popup.

Another plugin makes tables sortable.

In both cases non-functional UI elements appear in the popup.
We decided:
* Hide collapsible elements (no matter if currently collapsed
  or not), and show a placeholder text instead.
* Remove sortable arrows.

This is a baseline patch that solves everything, except the
(i) icon is missing. This will be added in the next patch.

Bug: T220208
Change-Id: I58f3036bf4988d0ebe5716b0a54506446fca10c3
2020-10-28 17:23:12 +01:00
Thiemo Kreuz 26ca2bcf5b Scroll reference heading as well
Bug: T249548
Change-Id: I808ee9aadc8766490e98267bb94d25887f404362
2020-10-28 11:26:52 +01:00
Thiemo Kreuz d6ab2072e3 Open only external links in new tabs
There are 3 types of links:
* Links with no class are links to other pages in the same wiki.
* Links with "extiw" are interlanguage as well as interwiki
  links to other known wikis (e.g. from Wikipedia to Wikidata).
* Links with "external" point to somewhere else on the web.

Bug: T215419
Bug: T239230
Change-Id: Ia25db94d02670a919fc003f3e3562725de2e8eae
2020-10-20 10:52:05 +02:00
Thiemo Kreuz 76e02fae98 Remove obsolete mediaWiki and jQuery aliases
Notice how this actually reduces the size of the final, compiled index.js.
It's not much, but still.

One issue I noticed is that the coverage reports for the JS code stopped
working. I have no idea why.

Bug: T208951
Change-Id: I2fe92579574b3b1ba4d2dd064899eee944045a96
2019-10-22 09:30:46 +02:00
Adam Wight 76a34618c3 Tracking for Reference Previews interactions
Logs events to the ReferencePreviewsPopups EventLogging schema, in
order to understand whether Reference Previews is helpful for
end-users.

This will be removed along with the older tracking, as soon as our analysis
phase is finished.

Incidentally disables a lint rule for the generated JS, it's about
readability so irrelevant to the minified code.

Bug: T214493
Change-Id: I2638611ba67b785338f7e98a1c4b08a5e829812d
2019-10-07 11:22:00 +02:00
Ed Sanders 4d885286a3 eslint: Enforce template-curly-spacing
Change-Id: I5640e86cba25f6100c7814c2ef8a845941f73497
2019-08-15 10:24:43 +02:00
Thiemo Kreuz 522f4aa8a2 Fix incomplete test coverage for referencePreview renderer
Two big chunks of code (the "click" and "scroll" event handlers) have
not been covered with QUnit tests before. I found this was not that
complicated and worth the effort.

Note we already have browser tests in place for these features. These
are still required because the scroll feature can not fully be tested
when the popup is not actually rendered on screen.

Bug: T214971
Change-Id: I58111489fe6c4bed65efec59f9fc4184c828b2b3
2019-03-26 16:54:17 +01:00
WMDE-Fisch de8f7a133c Move test for escaped URLs into seperate check
With this I want to pull apart testing two things at one, checking if the
URL is escaped and if it is put to the right position.

So this adds an explicit test, that makes sure that urls in the popup are
escaped safely and lets the big test become more general in that regard.

Bug: T214971
Change-Id: I09b5225a8370e8b1337b2cf6ca03ccb79b3a64aa
2019-03-25 16:24:26 +01:00
Andrew Kostka 42ee00fe37 Improve popup pointer positioning
Bug: T217737
Change-Id: Id478b8cc8dc7aefdd07dde5d5567aa0a1d8ee970
2019-03-20 10:39:18 +00:00
Jan Drewniak 8aad5981e4 Fix double pokey bug
When a thumbnail in portrait-mode is narrower than the 200px
expected width, the SVG clip-path should be shifted on the x-axis
in order to align with the thumbnail image.

Adds extra test-cases to validate this logic.

Bug: T204627
Change-Id: I9359c9fb335e5fad3f7d5ba33ee89d2a1f26b8b2
2019-03-20 01:29:46 +00:00
Thiemo Kreuz 1d2becc25a Consistently talk about "Reference" instead of "Footnote"
During story time on 2019-03-12 it was decided to consistently talk
about "References" in all messages. Main motivation is that this is
the term the community is most familiar with, and it is also the term
that is used in reference section headings most of the time.

Bug: T215063
Change-Id: Iaab8d2c0da1546a3c9d27bc8e2e1c784050ed135
2019-03-13 09:29:26 +01:00
Thiemo Kreuz d81415a040 Add all reference type icons and messages
These icons are currently unused because the gateway does not deliver
the necessary information. This will be used starting with I6223cbb.
This patch aims to introduce all resources needed by the later.

Bug: T214908
Change-Id: Ie0c3c059222700169f2605c3123554c74d974256
2019-02-20 09:32:11 +01:00
Thiemo Kreuz 9ee61e18b5 Fix <clipPath> capitalization in pointer-mask.svg
According to the standard.

Note: In a previous patch I removed the <?xml …?> line. This conflicts
with what https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG
suggests. However, I think the removal is ok in this particular case
because this file will never be shown as an image, and never be shown
standalone. Instead, it will be inserted in the documents DOM. The XML
header doesn't matter anyway then.

Change-Id: If23ad54985abb30f8c92500546bd04eeca44fab3
2019-02-13 23:27:59 +01:00
Thiemo Kreuz a268d1e727 Minimize/optimize pointer-mask.svg file
I decided to keep the comments because they are sooo helpful, but
tried to shorten them a bit. The biggest change is the indention with
tabs and the much more compact <path> elements. The shapes are the
exact same. I manually confirmed this for all four.

Change-Id: I2d1294c9ae7e398dcbe2d111c42848d17be8a67e
2019-02-13 13:55:25 +01:00
Thiemo Kreuz 90acf2a778 Fix pointer mask and CSS offsets for flipped popups
I tested this with all 16 possible combinations:
* The pointer can show up in all 4 corners.
* The popup can contain a thumbnail or not. The code for the pointer
  is very different then, because the SVG masks are only relevant in
  this scenario.
* The thumbnail can be tall or not.
* I even tested tall popups without a thumbnail. This is a combination
  that is impossible in production scenarios.

I found 3 issues. This patch fixes 2 of them:
* The pointer is misplaced in the bottom-right corner when the popup
  does not have a thumbnail (as reported in T215194).
* The pointer is misplaced in the upper-right corner when the popup
  shows a thumbnail.
* The pointer in the upper-right corner is gray instead of white when
  the popup is tall, but does not show a thumbnail. As this is not
  relevant in production, I did not fixed it.

It seems both misplacements are because of the same reason: For some
reason, calculations are done based on the assumption the popup would
be 300px wide, but it is 320px wide.

Note I did not just added 20 everywhere, but manually alligned the
pointer triangles so they are placed exactly the same distance from
the corner as in the three other corners.

Note I did not tested this (yet) in RTL scenarios.

Bug: T215194
Change-Id: If0ca63d4d4b6e8083c7de1517fe32f49671a40e6
2019-02-13 13:48:51 +01:00
Thiemo Kreuz d45c6cd273 Move thumbnail rendering code into pagePreview renderer
This is now possible since the render functions return jQuery objects.
All this code is exclusively used in the pagePreview.js file, and
doesn't need to make the already very big renderer.js file even
bigger.

Note the tests for all renderers have always been collected in a
single file. That's why the test case does not move.

Change-Id: I0c24638751c5f0e93d2bc0f3f4bb61fa0cf50d15
2019-02-08 11:30:00 -07:00
Thiemo Kreuz 90d7edb17c Streamline jQuery object creation
As discussed, the $( '<a>', { id: 'foo' } ) syntax is bogus because
plugins are able to *change* it. It's not just a list of attributes,
but whenever there is a method with the same name, that method will be
called instead. This means the result of this feature is unpredictable.

This patch also streamlines a few other jQuery calls that can be
shortened.

Bug: T214970
Change-Id: Ib58b8673c7ce41139f926c845c1b3adfbfde1b26
2019-02-04 14:19:55 +01:00
jenkins-bot 870ddbb4a7 Merge "Simplify mediaWiki.msg mock in renderer test" 2019-02-01 11:34:39 +00:00
Thiemo Kreuz 7db6508a77 Remove unused model elements from renderer tests
I do find these very confusing and would like to remove them:

* The test setup looks like these popup types are going to use
  these properties. But they don't. They are not even trying to
  access these properties.
* There are no assertions that make sure these properties are
  *not* used. It would be possible to add something like this,
  but I honestly think this is not worth it.

We might need to reflect this in the PreviewModel documentation
in src/preview/model.js. I would like to do this in a separate
patch.

Bug: T214970
Change-Id: I136112bfea7f732d2673bcb8c69aba9defe6ba85
2019-02-01 10:41:58 +00:00
Ed Sanders e1c4e94b23 build: Update eslint-config-wikimedia to 0.10.0
Also enable jquery ruleset.

Change-Id: Ie1f43d0335ea2aad1e2dd5d86b775316105c3d90
2019-01-31 11:05:33 +01:00
Thiemo Kreuz a8859658f5 Add missing HTML escaping to all existing page preview types
Including tests for all situations.

I believe it is impossible or extremely hard to actually abuse any of
these places. All these data are not extracted from the current page, but
delivered either by MediaWiki's api.php or a RESTful endpoint, as
configured via $wgPopupsGateway and $wgPopupsRestGatewayEndpoint. A
possible attacker would need to write it's own endpoint (which must either
run on the same server or somehow ignore the CSRF token), and set the
value of mw.config.values.wgPopupsRestGatewayEndpoint on the client to
this endpoint – which requires just *another* attack vector to be able to
do this.

It's "the right thing"(tm) to escape all this anyway.

I found two possibly relevant security reviews of this extension, T88171
and T129177, resolved in 2015 and 2016.

Bug: T88171
Bug: T129177
Bug: T214754
Bug: T214971
Change-Id: I1d118c9ccaea434a253a772d18139b9b077118ab
2019-01-30 18:29:14 +01:00
Thiemo Kreuz b33be3a78b Simplify mediaWiki.msg mock in renderer test
Instead of maintaining a list of named constants (which must be updated
every time we want to add a new test with a new message), the mock now
behaves like MediaWiki's build-in qqx dummy language code and returns
the message key in brackets. The additional benefit of using the
HTML-like <…> characters is that this will automatically test if the
messages are properly HTML escaped.

Bug: T214970
Change-Id: Id7911036a7b582aff21acf911a826b5421a55938
2019-01-30 15:54:29 +00:00
Thiemo Kreuz bb60d5b716 Move default "Footnote" title from gateway to renderer
I guess both is fine: either having the default in the gateway (as it
was before), or in the renderer (as this patch proposes). I, personally,
feel better with having it closer to where it is needed. This way it's
not possible to accidentially deliver a model object with an empty title.
The renderer will catch this.

At the moment we don't know exactly how we will fetch other titles (e.g.
"Book").

This change is split from I15611a4 where it was a little misplaced.

It also includes a test for the default fallback title.

Bug: T213907
Change-Id: I8ec3ddc21a417da7f95feff7b080cbd60d5472e7
2019-01-29 11:37:47 +01:00
Thiemo Kreuz 6e5be9d2ef Add missing HTML escaping to reference preview renderer
Including tests. I also changed the title to include quotes as well,
even if not critical in that case.

Bug: T214754
Change-Id: I2f92a5714f7adc229a003f9167bcc9afdbc55583
2019-01-28 19:35:20 +01:00
Thiemo Kreuz 8d8446571e Open all links in a reference preview's content in new tabs
Bug: T213908
Change-Id: Iaadcce99b68542094333730d99f776d9e5f056f9
2019-01-25 14:00:17 +01:00
Thiemo Kreuz 3c1eae29eb Add test for opening reference preview links in new tabs
Bug: T213908
Change-Id: I7fb72c9a1e2c4f827c0d94e3ee8b2ea992feb955
2019-01-24 19:57:44 +00:00
Thiemo Kreuz aa1b9cf407 Add QUnit test for reference preview renderer
I finally found the issue. It was an incomplete mock for the
mw.html.escape() function that would return the string unescaped.

Bug: T213415
Bug: T213908
Change-Id: I198393b3c72771e4018f79913ddb9f4cb2c0d4de
2019-01-24 19:57:31 +00:00
Fomafix 5b6fe60407 Do not use jQuery's hasClass with space separated classes
A parameter with space separated class names is not specified in
https://api.jquery.com/hasClass/

Change-Id: I1b44215115a3e51319c042f0f20547cff640ab52
2018-09-21 08:20:12 -06:00
Nicholas Ray 6a25f70ad5 Use window.devicePixelRatio instead of deprecated jQuery.hidpi
jQuery.hidpi was deprecated by T127328
(https://gerrit.wikimedia.org/r/441614). This repo used the
"bracketedDevicePixelRatio" function from that plugin. Since browser
compatibility is good now for window.devicePixelRatio, this commit adds
a function which relies on that instead.

Bug: T198579
Change-Id: I56c234048d7741f12f35bfff5f7319c6e085c29f
2018-08-10 10:00:28 -06:00
jdlrobson 10e6e25091 Upgrade eslint-config-wikimedia
* Force arrow-parens
* Disable no-prototype-builtins for time being
* Drop unnecessary maxlen rule

Change-Id: Iceb0fe47354a5753202d2c6ad9e1a9c76791f744
2018-07-13 07:42:12 -05:00
Stephen Niedzielski a0dc96cac9 Hygiene: consistently refer to globals directly
Instead of mixing window.mediaWiki / mediaWiki and window.jQuery /
jQuery references, always refer to globals which exist whether code is
executed in browser or headless Node.js environments.

  find src tests -iname \*.js|
  xargs -rd\\n sed -ri 's%window.(mediaWiki|jQuery)%\1%gi'

Change-Id: I21d0a602dcbd2bc6774934bee6c487e443270fe0
2018-07-09 08:46:40 -05:00
jdlrobson 6c17af260c Extracts can expand with narrow thumbnails
If a thumbnail is narrow, then the extract can expand to take
the available space. It does this via JavaScript taking the difference
between the normal space for a thumbnail minus the actual space needed
to display the thumbnail.

This removes unused whitespace in both the thumbnail and extract.

Bug: T192928
Change-Id: I59e87f9160e707fbce321a567c0a68e85f6d72ec
2018-06-28 16:34:41 -07:00
Stephen Niedzielski abc2026890 Hygiene: replace QUnit assert.equal with strictEqual()
Via jscodeshift:

  jscodeshift \
    -t jscodeshift-recipes/src/qunit-assert-equal-to-strictEqual.js \
    Popups/tests

Also, some very minor manual clean up.

https://github.com/niedzielski/jscodeshift-recipes/blob/5944e50/src/qunit-assert-equal-to-strictEqual.js

Additional change:
* Drop redundant clipPath parameter from createThumbnailElement - this
parameter does not exist in the function signature.

Change-Id: I209ecf2d54b6f5c17767aa2041d8f11cb368a9b5
2018-06-18 19:48:16 +00:00
Stephen Niedzielski ae44042cbf Hygiene: add assertion messages
Change-Id: Ic0a47bd468532824e8648c3f6371cc403896603c
2018-05-08 15:55:23 -05:00
Stephen Niedzielski cb362d125c Hygiene: replace calledOnce / Twice w/ callCount
Replace all test assertions for calledOnce / Twice with callCount.
assert.ok( calledOnce / Twice ) only lets the dev know that a test
fails. assert.strictEqual( callCount, EXPECTATION ) starts the debugging
process when it fails since it provides the difference in the failure
output. strictEqual() was deliberately used since it's a saner default
and the codebase already favors === equivalency checks.

  find tests -name \*.js|
  xargs -rd\\n sed -ri '
    s%ok\(([^,]+)calledOnce%strictEqual(\1callCount, 1%g;
    s%ok\(([^,]+)calledTwice%strictEqual(\1callCount, 2%g;
  '

Change-Id: I07c3c6d20e07c5b8107583a01d820e3fbd68a4e1
2018-05-08 15:01:16 -05:00
Stephen Niedzielski d7871bb9c4 Hygiene: replace okies with ointers
I've yet to meet the bloke who knew how to take a poke without an
explanation such that they have never mispoke. This patch which renames
pokies to pointers will surely be my masterstroke.

  find \
		-not \( \( -name node_modules -o -name .git -o -name vendor -o -name dist -o -name package-lock.json \) -prune \) \
		-type f|
	xargs -rd\\n sed -ri 's%([Pp])(okey|okie)%\1ointer%g; s%([Pp])oke%\1oint%g'

Bug: T190831
Change-Id: I363e6dd49bfcdb9515cd5fab2904a58725b18720
2018-04-26 13:26:48 -07:00
Stephen Niedzielski a4e129175a Fix: show thumbnails on left for right-to-left UIs
When the UI is RTL, show preview thumbnails on the left. Otherwise, show
them on the right.

Bug: T190831
Change-Id: Ic1fc54f6547b31908905db8cb2ec4d58f37a6538
2018-04-23 16:59:19 -05:00
Stephen Niedzielski 44a7f643bc Hygiene: replace CSS class underscores w/ hyphens
Replace CSS slithery_snake_case with shish-kebab-case for consistency
with the rest of the codebase.

  find \
    -not '( (
      -name node_modules
      -o -name .git
      -o -name vendor
      -o -name doc
      -o -name dist
      ) -prune
    )' \
    -type f|
  xargs \
    -rd\\n \
    sed -ri 's%flipped_([xy])_([xy])%flipped-\1-\2%g; s%flipped_([xy])%flipped-\1%g'

Change-Id: I25dc0ddeda711faca9a79b5bf87d6b5aa0d5aea5
2018-04-23 16:23:17 -05:00
Stephen Niedzielski 3a372ac3ab Hygiene: rename triangle terminology to pokey
Everyone knows what a poke is.

  find \
    -not '( (
      -name node_modules
      -o -name .git
      -o -name vendor
      -o -name doc
      -o -name dist
      ) -prune
    )' -type f|
  xargs -rd\\n sed -ri 's%\btri(\b|angle)%pokey%g'

Change-Id: Ie159aa6947801a98cbf358da1613c87cf66d548f
2018-04-23 16:07:51 -05:00