Commit graph

76 commits

Author SHA1 Message Date
thiemowmde 8c5120c2a6 Fix settings button not working on reference previews
Apparently caused by a mistake in I8697232, and the QA for T340256 not
covering the full functionality of what was changed in the patch.

Bug: T345829
Change-Id: I482d32183ef7f2226c7ad114be0fbaf97bc7b898
2023-09-08 23:45:29 +00:00
bwang b78cfe50c9 Replace mediawiki.ui.icon with Codex, update preview markup and styles to be more consistent
- Removes .mw-ui-icon and .mw-ui-icon-element
- Aligns markup/styles between generic and disambiguation previews
- Update padding for generic and disambiguation previews to be the same as other popups, results in minor visual changes

Bug: T341899
Change-Id: I9a58fc6a93160d07452ea6f903e1797dd9421d92
2023-08-21 19:53:51 +00:00
bwang 6b659443b5 Update popups to use codex buttons over mediawiki.ui.buttons
- Provides missing accessible label for the settings button

Bug: T340256
Change-Id: I86972322ae34f1d1df8d79c66daa9e34091f9dd3
2023-07-10 16:03:36 -05:00
Jon Robson 7c592bc790 Prefer native JavaScript to jQuery
Bug: T315929
Change-Id: I949fd9551269a3cb9d9df7744149510949d3076c
2023-05-21 16:53:50 +00:00
Jon Robson d4376bf203 Load Modules support initialization
Rather than obscurely loading instrumentation code as a side
effect of loading UI code, run it explicitly inside the index.js
initalization code. Instrumentation is moved to its own file
and Popups modules now support an init function.

Change-Id: I9d2643ec8fb4e1dedc7ab9534b2965272f12335f
2023-05-11 23:22:51 +00:00
gerritbot 5775a5a37f styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Also
- replacing several static values with new Codex design token featuring
  skin variables of `background-color`, `color`, `border-` and
  `opacity` category
- renaming three Less variables to variable naming standard

Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.

Bump MediaWiki core required version to >= v1.41.0.

Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Change-Id: If35605e8336c8619c6230bc892b360edbfd16f62
2023-04-13 05:31:50 -07:00
Umherirrender 5f18164beb build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I98f17b481d4ba56a8cd87fcafb1fc2efdaa8abe7
2023-03-28 20:18:47 +00:00
Wandji69 dbcccbae8e styles: Replace deprecated Less mixin calls with unprefixed CSS property
Replacing `.transition()` calls.

Bug: T308351
Change-Id: I6d558f38de81910d701a2e18aeb736a100e5a8ab
2023-02-03 20:39:49 +00:00
Ed Sanders 780627c126 Remove unnecessary vendor prefixes and mixins for animations
Deprecated in I8d62aedb.

Change-Id: Id951fd394a2336920eddbba08dcb1a153b67b9f3
2022-06-09 17:22:19 +01:00
Thiemo Kreuz a99bd13112 Rewrite linkTitle change listener for clarity/easier expansion
This was done while working on T277639 where we introduced
multiple "enabled" flags for individual popup types. This
change listener is one of very few places that work with
this flag. This patch is meant to make this code more robust
and easier to change.

A few unrelated but trivial changes are included that make
code shorter and hopefully easier to read.

Also fixes a bug with tooltips overlapping previews.

Bug: T287119
Change-Id: I7fb0a8d4bb9f5e78fe62cfca524cc157ea89a233
2021-08-11 18:33:34 +00:00
jdlrobson 1a62ae90cd Remove the page preview icon hacks
Now the Vector icon stylesheet is aligned with the correct
design specification these should no longer be needed.

Additional changes:
- Fixes icon display in storybook for disambiguation links

Bug: T287058
Depends-On: Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
Change-Id: I02bfd7973352a03b5be4b6e82575e2209b8e4043
2021-07-21 23:20:17 +00:00
Thiemo Kreuz 729f342aa9 Minimize and optimize reference preview CSS
This minifies the CSS a bit by simplifying some selectors that
don't need to be that specific.

This also optimizes the code for the 3 icons that can appear
in a reference popup:
* The type icon in the title.
* The settings icon in the footer.
* The (i) icon that can appear in the content.

Some of this CSS used "resets on top of resets". This is more
straightforward now.

To fully test all 3 icons please use an example like this:
<ref>
{| class="wikitable mw-collapsible"
| Collapsible table
|}
</ref>

Bug: T234205
Bug: T280762
Change-Id: I9e338475a161164e7707b9bb0498dba640313174
2021-05-03 13:26:13 +02:00
Thiemo Kreuz 25e7143f4c Fix icon placement in reference previews
The icons are all slightly misplaced since Iba5367f (T277663).

This patch also replaces the deprecated variable @iconSize.
This is only about the variable name, the value doesn't change.

Bug: T280762
Change-Id: I9ce00aed5a91a95b64427d63881784196f94169b
2021-04-21 17:50:08 +00:00
Volker E 75cbbd67e6 styles: Remove obsolete vendor prefixed properties
Bug: T278670
Change-Id: Icd4d12fdd16d9a9630c755b50c93f0f417fa3d85
2021-03-29 02:36:43 -07:00
Andrew Kostka 9fcdaf5c00 Fix maximum height of reference popups when in beta
This fixes a small regression introduced in Ia61f1b7. When
reference previews are still enabled as a beta feature the
unnecessary footer is hidden, therefore, we need to account
for this when calculating the dialog's height.

Bug: T234205
Change-Id: I1c142019031ab954550e237ddb23824da1aee8db
2021-03-05 12:52:13 +00:00
Thiemo Kreuz 24c75d11b3 Fix maximum height of reference popups
In patch I2a82831 we removed a line `margin-bottom: 16px`. This
margin defaults to 47px now. This made the popup bigger. This
patch fixes this.

The original size of 403px was introduced in I6036968 (T246029)
and already fixed one time in I82ea489 (T246029).

Bug: T234205
Change-Id: Ia61f1b79f8450d6249e190ab4ed1565ed5ac77be
2021-03-05 11:50:21 +00:00
Svantje Lilienthal fb0863f101 remove spacing, when the footer is empty
Bug: T276200
Change-Id: Id5d30a53251bdf3674388cbdb29d93a0d52b3266
2021-03-04 16:22:55 +00:00
Thiemo Kreuz 513899d808 Much more relaxed reference type detection
* When there are multiple <cite> elements, the first that contains a
  known class is used. We assume the earlier one must be the relevant
  one.
* When there are multiple known classes in e.g. <cite class="web news">,
  the last one is used. This follows how CSS works.
* There is extra validation if the corresponding message exists, just
  to be sure. This is cheap.

Bug: T274979
Change-Id: Iee3481ea16af96b40faf978e254718e5a48917f3
2021-02-22 11:55:03 +01:00
Svantje Lilienthal 1962372a44 Add cogwheel to disable ReferencePreviews
I added the common styling for the setting icon to the popup.less
and removed the now empty pagePreview.less.

Bug: T234205
Change-Id: I2a82831bc71a4208c4b66c18e2a4613127c43e1f
2021-02-16 15:39:43 +01:00
Thiemo Kreuz ef4b032513 Add new reference type "note" without an icon
Bug: T274343
Change-Id: Ib9f3fe98baf1d194e686b007a9c535f2b49ac19d
2021-02-11 10:15:36 +01:00
Noam Rosenthal 497eb631d1 Parse template HTML only once, as HTML parsing is expensive
When creating a popup, clone the previously created DOM element
and populate the attributes and content.

Ideally this would be done with a template element, but since IE11
is still supported this is not possible.

Change-Id: I347615cf1f613d97d767d60627b13b6b3ff9c762
Bug: T269338
2020-12-07 23:01:26 +00:00
jenkins-bot d2018ebfe0 Merge "Resize popup to 403px" 2020-11-06 10:29:45 +00:00
Adam Wight 50c0e46b0a Resize popup to 403px
Restores the max-size introduced in I6036968a2, after conflicting
changes to the popup layout.

Bug: T246029
Change-Id: I82ea48929b44d97d78112bd96ad75724ae6f46af
2020-10-30 20:25:47 +01:00
Thiemo Kreuz c6ea149d34 Wrap long words in reference preview popups
Bug: T266859
Change-Id: I874d60246a0337577c0f411d0d24f237c1ceebf2
2020-10-30 20:14:39 +01: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 c1abe80b08 Minor code cleanups, e.g. utilizing arrow functions
Change-Id: I56bcfa040553a96f018f22483f3f988c5639fc97
2020-10-30 11:31:12 +01:00
Thiemo Kreuz f4d696e6bf Add (i) info icon to collapsible replacement message
This avoids pulling in the entirety of OOjs, with the disadvantage
that we have to copy a little bit of CSS. I copied parts of this
patch from I2a28666.

There might be a better way to do this, with less code. E.g. is
there a better way to construct these HTML elements?

Bug: T220208
Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0
2020-10-30 10:53:30 +01: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 ee0bcf626f Increase maximum height for reference previews
Bug: T246029
Change-Id: I6036968a2072af810ffbb6a144f2ede3b2c8f810
2020-10-28 11:29:40 +01:00
Thiemo Kreuz 26ca2bcf5b Scroll reference heading as well
Bug: T249548
Change-Id: I808ee9aadc8766490e98267bb94d25887f404362
2020-10-28 11:26:52 +01:00
jenkins-bot 1f28739cd0 Merge "Move scrollbar for longer references to the right" 2020-10-28 10:20:58 +00:00
Thiemo Kreuz 7b96ed8c4d Move scrollbar for longer references to the right
Bug: T249530
Change-Id: I2db695aa79fae7511eb316f5463f76654722741d
2020-10-27 14:30:23 +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
Ed Sanders 536470c01d build: Update eslint-config-wikimedia to 0.16.2
Change-Id: Icb65074fe64993314bbb28f690ce3ce0f89fb57c
2020-06-26 17:05:56 +01:00
Adam Wight 07aa0f3ae9 Don't record Popups actions on non-content pages
We found that Popups was overcounted approximately 2.5x relative to Cite.
This patch attempts to nearly match the circumstances under which Cite
(and its tracking) is loaded.

Bug: T214493
Change-Id: Ib31df3c33879f4ea63d9808ffd260861069a8977
2019-11-14 16:52:05 +01:00
Adam Wight 0c1e628edb Ensure that pageviews are recorded at most once
The Popups pageviews were suspiciously high, about 2.5x higher than
Cite counts which should have reported the same number.  This patch
attempts to deduplicate pageview events.

Bug: T214493
Change-Id: I51bf6d1909d65ecd9d3ef28eda285852897343ec
2019-11-08 11:23:02 +01:00
Adam Wight b7331a6e66 Record pageviews where Reference Previews is enabled
We want to know the side of this population in pageviews, in order to
produce proportional metrics later.

Bug: T214493
Change-Id: I940872870754e85d19688f3855d6857e65b982b1
2019-10-24 23:34:56 +02:00
Adam Wight fed99e7cb5 Inline eventlogging call
This isn't messy enough to justify encapsulation in a function.

Change-Id: Idfa6581d30709f1a58ff8c83ead08e1bfda81c1c
2019-10-24 22:52:48 +02:00
Adam Wight 171e1b7dbf Sample ReferencePreviewsPopups 1:1
We're getting a few dozen records per day at 1:10, so let's stop sampling.
We need enough data to get significance on events happening at 0.1% or less.

Bug: T214493
Change-Id: I8a913fe1ee1e5b72d84914e183ac2386ddb20d84
2019-10-22 12:14:17 +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 f6defd5fbc Tune referencePreviews sampling from 1:1000 to 1:10
We've logged zero events after 12hr of deployment, so it should be
safe to increase sampling by 100x.

Bug: T214493
Change-Id: Icd67aed448269f603dd4465f7e46eac9a64bd1ab
2019-10-11 10:52:43 +02:00
Thiemo Kreuz 95c80dcb3e Fix code detecting horizontal scrollbar in reference previews
Bug: T234602
Change-Id: I5994b6e8cb15374bb2c0a31dd4e4549005a619cf
2019-10-09 15:38:35 +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 59a5e4e981 Fix fade-out gradient not disappearing when page is zoomed
We did a strict === comparison before. This works fine when the page
zoom is either 100% or 200%. Other zoom factors produce fractional
numbers. Comparing them with === is doomed to fail because these numbers
are IEEE representations, not necessarily being identical in situations
where you would expect them to be identical.

This applies two fixes: Change the comparison to a >=, and always ignore
1 extra pixel. If we are so close to the bottom, the gradient is not
helpful any more.

Change-Id: Idf4c604142de8d2a803e1d94f3093cec8a8abb72
2019-05-20 11:02:19 +00:00
jenkins-bot 8c7527af04 Merge "referencePreview: Replace width: 0 with display: none" 2019-05-18 14:45:19 +00:00
Thiemo Kreuz ac65bd3082 referencePreview: No event bubbling on inner child elements
This is relevant in case the HTML looks like this:
<… class="reference"><a><span>[</span>2<span>]</span></a></…>
The additional <span> cause many additional mouseover and mouseout
events. The code already tries to filter these duplicate events that
are all triggered on the same link, but gets confused, especially when
the multiple chains of events overlap each other in unexpected ways.
It's a timing issue. This change does not fix the fundamental issue,
but does make it much less painfull.

This patch also removes the > from the selector. This is in case the
HTML looks like this:
<… class="reference"><span><a>[2]</a></span></…>
The additional inner <span> would prevent any reference preview from
being shown.

Bug: T214693
Change-Id: If2554ba78072245c27a1f85c46f33e3c58582c1d
2019-05-09 13:23:45 +02:00
Thiemo Kreuz b3fb2b5867 referencePreview: Replace width: 0 with display: none
Before, the element is still part of the DOM, shows up in the debugger,
and consumes rendering time (probably close to zero, but still). After,
the element is gone.

Change-Id: I580fd89868b5a91118a8115d71d819824ff7f80c
2019-05-09 13:19:14 +02:00
Thiemo Kreuz 3ca2709cfe Streamline code calculating fade-out bottom position
I actually tried to bring the animation for the "bottom" property back.
When finished, I realized this animation is done on *top* of the
horizontal scrollbar. This looks fancy, but is not what we want. We
need to keep animating the opacity.

This patch here contains a bit of refactoring that was left after I
went back animating the opacity.

Bug: T220200
Change-Id: Icf613f72f3baa3de86f8aa319667c8e8f16593fd
2019-04-26 18:14:30 +02:00
WMDE-Fisch d72ef0fa65 Avoid fade-out above horizontal scrollbars
The changes in the patch check if a horizontal scrollbar is present
and move the absolute positioned fade overlay above that scrollbar.

Since we cannot change the CSS of the :after element via JS a new div
element was introduced.

Bug: T220200
Change-Id: Ia69c9be0facaf3ecebdb9f76d36f7cb3412c0816
2019-04-26 18:02:06 +02:00