Commit graph

240 commits

Author SHA1 Message Date
Nicholas Ray 6e9506dcad Dynamically expand/collapse sub-sections in ToC based on # of headings
Server render the table of contents in a collapsed state when the total
number of headings is equal or greater than the value of
`$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of
contents will be server rendered in its "expanded" state.

In addition:

* Revise table of contents tests to call one `assertion` per element so
  that it is easier to see the exact element that may fail an assertion.
* Revise table of contents tests to call a mount function that can merge
  props to allow for a more flexible set of tests.
* Revise table of contents tests by wrapping a `describe` around tests
  that expect the same prop state.
* Adds typedef for table of sections props

Bug: T300973
Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6
Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-21 14:58:51 -07:00
jenkins-bot 914e3d55e6 Merge "Add fetch tests from WVUI" 2022-02-16 22:07:18 +00:00
bwang a560fb814a Add fetch tests from WVUI
Bug: T288686
Change-Id: Ifeb2e355482d3d5920c2535c89193cc4f36a13c9
2022-02-15 14:00:40 -06:00
Jan Drewniak 7d32ec80d3 Collapse ToC by default & expand sections when clicking section headings
Collapses sub-sections in the new table of contents by default
(except for non-js and reduced-motion users) and expands the
sections when the top-level section link has been clicked.

Refactors the `activateSection` TableOfContents methods into separate
`activateSection` and `deactivateSection` functions.
Adds `expandSection` and `collapseSection` methods.

Adds triangle icon as a visual expand/collapsed indicator
next to all ToC section headings and are hidden via CSS based on
whether or not the section contains subsections.

Adds test for tableOfContents.

Bug: T299361
Change-Id: I36b3ae7f9f633877683bc17a9444c970d7fa7293
2022-02-15 00:09:50 -05:00
bwang 3e92800bd6 Move REST search client out of WVUI into Vector
Bug: T288686
Depends-on: I4afc8c38dc9c51d55b46b766a1417b1266963482
Change-Id: Iac6023bb6edca5c8dddc3bfd362db727b2534946
2022-02-10 10:17:10 -06:00
jenkins-bot 306dc89bf8 Merge "Limit WVUI search to ES6 browsers" 2022-02-09 23:01:03 +00:00
Jon Robson 0c2981d772 Limit WVUI search to ES6 browsers
Rather than test for fetch, limit the code to ES6 browsers.

Depends-On: I96a03796628a74ace93579d45a582711400c09c1
Change-Id: I4ca10182491118e61e155f99c713d4cb1b4fc7f0
2022-02-09 22:10:11 +00:00
Ammarpad 5c4d917497 Update Vector SpecialVersion description
Bug: T300994
Change-Id: I3f624013ec4ce408c50d66eca7a91b55b1288ae9
2022-02-09 20:23:09 +01:00
Nicholas Ray 80a111d0e4 Fix TOC section activation on link click bug
We want the link that the user has clicked inside the TOC to be "active"
(e.g. bolded) regardless of whether the browser's scroll position
corresponds to that section. Therefore, we need to temporarily ignore
section observer until the browser has finished scrolling to the section
(if needed).

However, because the scroll event happens asyncronously after the user
clicks on a link and may not even happen at all (e.g. the user has
scrolled all the way to the bottom and clicks a section that is already
in the viewport), determining when we should resume section observer is
a bit tricky.

Because a scroll event may not even be triggered after clicking the
link, we instead allow the browser to perform a maximum number of
repaints before resuming sectionObserver. Per T297614#7687656, Firefox
wasn't consistently activating the table of contents section that the
user clicked even after waiting 2 frames. After further investigation,
it sometimes waits up to 3 frames before painting the new scroll
position so we have that as the limit.

Bug: T297614
Change-Id: If3632529f58c15348a7200258f4f5999ea0dadc4
2022-02-08 14:45:16 -07:00
jenkins-bot d94c685f02 Merge "Use bodyClasses option to register static classes on skin" 2022-02-08 16:25:02 +00:00
Jon Robson 29498112ed Migration mode is now the default
- Reflect production.
- Update SkinVector migration notes.

Depends-On: Ia527e60901de59f9e094ca0f1ba62a67a2f808a2
Change-Id: I8efa56fa0644b2ceb33fdab16da5df1d44ee621f
2022-02-07 22:20:16 +00:00
Jon Robson 6f7a6bb24b Use bodyClasses option to register static classes on skin
Bug: T298734
Change-Id: Ia2ae8e1c655aff8783c2602da992632cd5877bf8
2022-02-04 18:44:43 +00:00
Jon Robson ddcf51a9ec Drop skin override
This is often used by gadgets/scripts to request
information from the API. Given `vector` means old Vector
now that leads to styling issues.

The unfortunate side effect of this is that any code
checking mw.config('skin') === 'vector' will no longer work
and we'll likely need to patch various gadgets accordingly.

Bug: T300814
Change-Id: Ic920e91960cf81790096395256b75f8ed0dc4173
2022-02-03 19:00:24 +00:00
jdlrobson d8382ec96b Drop search related feature flags
Given Wikidata is the only project using modern Vector,
and the only project where the search API is not applicable,
this will result in a loss of autocomplete on Wikidata.org
which will fall back to the non-JS mode.

Bug: T290688
Change-Id: Iece5a4efd43e09cd90c842c9c134ca115b35f2b2
2022-01-31 21:00:22 +00:00
Jon Robson ac084e930a [config] Vector should default to language button
This reflects production and avoids confusion during development
e.g. T299581#7660160

We already have overrides in place for all wikis where this should not
apply.

Change-Id: I45ecda031f83fc63c9c878c9caef42d327b2463f
2022-01-28 15:38:27 -07:00
Clare Ming a1ba537f6a Enable sticky header by default
Bug: T297924
Change-Id: If95a917ab3fbbe49271c62e0ce1da8b74d0bd7b8
2022-01-28 10:46:48 -07:00
jenkins-bot 24e7430734 Merge "Add sectionObserver and tableOfContents component JS to respond to intersection changes" 2022-01-27 17:13:08 +00:00
Jon Robson 6534f01162 Opt out of external link icons
This was related to two unintentional regressions as we switched
off the legacy feature in July 58c87018 in legacy Vector,
and 722b5fbf in modern Vector.

Bug: T298433
Change-Id: Id258e328d1691f7bd31d2b3c57d64d5434706561
2022-01-27 15:26:39 +00:00
Nicholas Ray 3c433a5315 Add sectionObserver and tableOfContents component JS to respond to intersection changes
This commits sets up the Table of Contents to bold the active section
when the section is scrolled.

Unfortunately, because our content does not have actual sections but
instead has a flat list of headings and paragraphs, we can't use
IntersectionObserver in the conventional way as it is optimized to find
intersections of elements that are *within* the viewport and the
callback will not reliably fire during certain scenarios (e.g. with fast
scrolling or when the headings are not currently within the viewport).
Furthermore, iterating through a list of elements and calling
`getBoundingClientRect()` can be expensive and can also cause
significant forced synchronous layouts that block the main thread.

The best compromise in terms of performance and function that I've found
is to use a combination of a throttled scroll event listener and
IntersectionObserver's ability to asyncronously find the
boundingClientRect of all elements off the main thread when `.observe`
is called which is the approach this patch takes. Although this is an
unorthodox way to use IntersectionObserver, performance profiles
recorded while holding the "down" arrow and scrolling for 10 seconds
with a 6x CPU throttle are comparable between master and this patch:

master: https://phabricator.wikimedia.org/F34930737
this patch:  https://phabricator.wikimedia.org/F34930738

Bug: T297614
Change-Id: I4077d86a1786cc1f4a7d85b20b7cf402960940e7
2022-01-26 14:11:43 -07:00
Jon Robson 1149d3d611 Drop watchlist in user menu feature flag
Working correctly. No longer needed.

Additional change:
* add tooltip to menu

Depends-On: I418ce75bda8015520d1f1742ddcdfefbc8b9a162
Bug: T289619
Change-Id: I42f21ca8836e5042d07102e1516ca386478dfabc
2022-01-19 16:10:32 +00:00
Jon Robson dc6d020410 Add watchlist icon to Vector
Depends-On: I5b1af082503fe22ec6049784fc43b324534c5b95
Bug: T289619
Change-Id: Idda8c49fe2833f3a64d7cc6d6db91bb6c3cde07e
2022-01-14 01:25:11 +00:00
jdlrobson f7e6e044dd Use configuration to skip vector-2022 skin
This allows us to manage changes going forward in configuration

Depends-On: If50fedaccf959f7ae74c86caf81555ef4f46abd1
Bug: T298923
Change-Id: I09e2b417b496678db0841354e90fdaf6237eb226
2022-01-12 22:32:13 +00:00
Jon Robson df84ed42d2 SkinLessImportPaths should work on Vector 2022 edition
Change-Id: Ib3cf9c8820dc9baf1a2f85752b17e3dba3195f84
2022-01-12 11:38:27 -08:00
Jon Robson cb94cf0ab9 Hide language button in sticky header if compact links disabled
Bug: T297579
Change-Id: I8d5294a986d76574284419efc7d384fc954a86c8
2022-01-10 14:42:26 -08:00
jenkins-bot 0488310612 Merge "Restore gadget support to new internal skins" 2022-01-07 20:41:44 +00:00
jenkins-bot 84ed8343c2 Merge "Vector is split into 2 skins" 2022-01-07 20:16:57 +00:00
jdlrobson 99cf6eb5be Restore gadget support to new internal skins
For vector-2022 skin:
* MediaWiki:Vector.css and MediaWiki:Vector.js are added via the
existing ResourceLoader hook.
* User:<name>/vector.js and User:<name>/vector.css are added via new
VectorResourceLoader modules

Bug: T297758
Change-Id: I37e9a9d353695502213c7a651530995252d9505f
2022-01-07 00:18:17 +00:00
jdlrobson 7d2d50873f Vector is split into 2 skins
A new vector-2022 skin is added. This will be the eventual home
of the new Vector skin when we are ready to migrate.

Please see SkinVector class for the migration plan to simulate this
as part of testing.

Bug: T291098
Change-Id: Ibaddf94a5bfb5e21bbbaf1e0aa1b343a3f566d2d
2022-01-06 15:52:10 -08:00
jdlrobson d8010c321a Fix dependencies for debug mode
Saw Query.Deferred exception: mw.user.getId is not a function
when using debug mode due to missing dependency

Change-Id: I9ff89e5632da6941bce77b079dee36f47a5fbcc8
2021-12-21 23:00:12 +00:00
bwang bd799ecc2e Add watchstar to sticky header (alternative)
Bug: T294759
Depends-on: I88af8585e8fc75f77ebef867d267199aeb2c6592
Change-Id: I15c409830ef8970ff7319b4dd447904443949b8d
2021-12-21 09:40:48 -08:00
jenkins-bot c6691a191d Merge "Disable table of contents in article body" 2021-12-17 00:17:16 +00:00
jdlrobson ef59d7b973 Disable table of contents in article body
This will currently remove table of contents in article body
for legacy and modern skin.

To prevent us deploying this in current form, a check is
added in generateHTML

This requires an adjustment of OverridableConfigRequirement to
support requirements which do not vary on whether the user is
logged in or not.

Bug: T297610
Change-Id: I847a284229e498b3aa04c16ea3f84c360e735052
2021-12-16 16:11:05 -07:00
bwang 321e6b19e1 Move watchlist button out of user menu dropdown and adds temporary feature flag
Bug: T289619
Change-Id: I57addbed2ea8ead5d98bce659f3db1f88f8a5094
2021-12-15 23:21:37 +00:00
jdlrobson cae801747f Update skin authors to include web team
Change-Id: I0aa3bf23f8b55b215d5429ced5e47e1395cf69bb
2021-12-15 22:43:45 +00:00
Clare Ming 72fecd41f2 Add feature flag for sticky table of contents
- Add TOC feature requirement.
- Update data for SkinVector.
- Add TOC template.

Bug: T297610
Change-Id: I90bc5e21ba187ac9dd74d5e97763834795a0545b
2021-12-14 16:26:58 -07:00
Clare Ming dfa649741d Fix format of VectorWebABTestEnrollment
mw.experiments.getBucket expects buckets to map to numbers

Bug: T295972
Change-Id: Ie3e35f78a42ed633ad2f26a72ad87a8bf190fc51
2021-12-10 12:18:49 -07:00
jenkins-bot 2e492515b3 Merge "Add language switching alert in sidebar for language in header" 2021-12-10 17:04:06 +00:00
Clare Ming 9dcfc1ff27 Add language switching alert in sidebar for language in header
- Add i18n messages.
- Update relevant data methods in Vector.
- Update sidebar template + styles.
- Add new template partial for sidebar actions.
- Add feature flag to turn on/off alert.

Bug: T295555
Change-Id: I232ce13770917d51495391f4b8d8d1a3a8a7afb8
2021-12-09 16:37:36 -07:00
jenkins-bot cc44e46229 Merge "Define sticky header ULS behaviour" 2021-12-09 23:15:05 +00:00
jdlrobson 51cce2d0d4 Define sticky header ULS behaviour
* It sticks to the header on scroll
* It hides when the sticky header hides

Bug: T296680
Change-Id: I5a4e2ba42e172ea55fbdac8f35ec895f6b2756cd
2021-12-09 22:18:35 +00:00
Clare Ming 454a2845b4 Update A/B test enrollment name
Bug: T292587
Change-Id: Ib4174119e18496139bb942032a2401ebc4d1849f
2021-12-09 13:16:54 -07:00
jenkins-bot d0116e07f9 Merge "Make ULS in header quiet progressive button" 2021-12-09 17:33:03 +00:00
bwang b79290f5c9 Make ULS in header quiet progressive button
Bug: T291286
Change-Id: Id1e056330606b87bafb8f43e7ff28d96290465b4
2021-12-09 15:27:04 +00:00
Nicholas Ray 24a5817315 Feature flag language button in main page header
Per the ticket, when this flag is enabled (and the
VectorLanguageInHeader config is enabled) we want to move the language
button from the bottom of the main page to beside the main page's title.

This config can be toggled with the `languageinmainpageheader` query
param (e.g. `?languageinmainpageheader=1`).

Bug: T293470
Change-Id: I41b4677f80b939810d16907b508ab29936f8629c
2021-12-08 15:11:25 -07:00
bwang a364e93d94 Remove unused markup icon
Bug: T288928
Depends-on: I553bbcc9f1a98d75e160ede7a66ffcf6510fa28a
Change-Id: I4c4ce87012325c239838de7dc0a7555ba6298d2b
2021-11-23 17:26:10 +00:00
bwang 3981333271 Update sandbox user menu icon
Bug: T288928
Change-Id: I9b781ade0cdc1114dc1cb2aa087fb49bf8aa4acd
2021-11-23 11:21:45 -06:00
Clare Ming ea0fccb5b8 Disable edit button in sticky header for logged users.
Bug: T294926
Change-Id: I9c987a6962155b04b161111e1a1783d750fee74b
2021-11-17 13:54:02 -07:00
bwang b196d68326 Use searchFooterText slot in typeahead search component
- Create new 'vector-searchsuggest-containing' translation for WVUI search footer text
- Use 'search-footer-text' slot in WVUI typeahead search
- Remove instances of old 'footerSearchText' prop

Bug: T290392
Depends-on: I8fb7761e60be330e58cd017872318fe3675c0be1
Change-Id: I9c946f85c3e4a603c362c3ea4b8016c585cdd212
2021-11-12 10:47:55 -06:00
Clare Ming 457dcfc472 Add scroll event + init A/B test logging to sticky header, AB js
- Pull IntersectionObserver into new file to share observer with different callbacks:
  - Wrap show/hide functionality of sticky header in conditionals based on user test group or by default.
  - Fire hooks for scroll event tracking in WME.
- Add new js for A/B test functions and variables:
  - Fire hook to send data for A/B test initialization.
- Update main js to include scrollObserver, A/B test init functionality.
- Add A/B test config.
- Update ResourceLoader package dependencies for sticky header.
- Though not a strict dependency, see I42e3e7c2084c1e88363d5d1662630ed23a28c4d2 in WME repo which uses these hooks to log scroll events.
- This patch includes changes from I56f40e706f8706fde1c0891a0561dd32c5e02bfc which were consolidated here for simplicity and ease of review - related to T292587 which calls for logging an init event for bucketing of users during A/B testing.

Bug: T292586
Change-Id: If6446e1e84cea3649905808c4f0e9f6862255fa3
2021-11-09 15:00:25 -07:00
jdlrobson 768a07ec6c Add sticky header edit feature flag
Can be disabled via &vectorstickyheaderedit=0 or configuration
change.

This will allow us to fine tune the edit features without blocking
deploying the existing feature.

Bug: T294383
Change-Id: Ic282ea4f2ff0108eeaa154c8a77e4e5fd30daeae
2021-10-26 21:59:29 +00:00