Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open
Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
- Include temporary feature requirement for TOC A/B test.
- Assumes 100% of logged-in users with even/odd user ids
being assigned to treatment/control buckets respectively.
- Sampling rates passed in by config are not considered
during bucketing.
- Update hook for adding needed TOC A/B test body classes.
- Add test for temp feature.
Note: the temporary feature requirement and associated hooks
should be removed once the 2nd TOC A/B test concludes.
Bug: T313435
Change-Id: If9c75235614af289cd50182baab29bec3155eb81
For idwiki/viwiki, we wish to run the sticky header edit button AB
test so that treatment1 group sees the sticky header without edit
buttons, treatment2 groups sees the sticky header with edit buttons,
and the control/unsampled groups see no sticky header at all.
This patch overrides the configuration to make the sticky header
w/o edit buttons for treatment1, sticky header w/ edit buttons for
treatment2, and hides sticky header for everyone else. This depends
on a configuration with the treatment groups having "treatment1"
and "treatment2" as substrings in their bucket names.
The full configuration for idwiki/viwiki would be something like
the following:
```
$wgVectorStickyHeader = [
"logged_in" => true,
"logged_out" => false,
];
$wgVectorStickyHeaderEdit = [
"logged_in" => true,
"logged_out" => false,
];
$wgVectorWebABTestEnrollment = [
"name" => "vector.sticky_header_edit",
"enabled" => true,
"buckets" => [
"unsampled" => [
"samplingRate" => 0
],
"noStickyHeaderControl" => [
"samplingRate" => 0.34
],
"stickyHeaderNoEditButtonTreatment1" => [
"samplingRate" => 0.33
],
"stickyHeaderEditButtonTreatment2" => [
"samplingRate" => 0.33
]
],
];
```
Bug: T312573
Change-Id: I15c360fdf5393f5594602acc33b5b916e904016d
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.
Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar
[More details about change]
- Migrate search app from Vue 2 to Vue 3; update tests
accordingly
- Remove dependence on WVUI and use Codex instead, via the special
`@wikimedia/codex-search` package
- Update search app to use CdxTypeaheadSearch, which no longer
takes in props related to the search client or fetch start/end
instrumentation. Instead, directly use the restSearchClient
and call fetch start/end events in the search app.
- Handle hideDirection in the search app/API response formatting
code, not within the TypeaheadSearch component
- Handle showing/hiding the search button in the app
- Move the WVUI URL generator into Vector
- Update server-rendered search box styles to match design updates
included with CdxTypeaheadSearch
- Replace references to WVUI with references to Codex
- Update values of various LESS variables to match Codex, and update
searchBox styling to prevent jankiness when the searchBox is replaced
with the Codex TypeaheadSearch component
The VectorWvuiSearchOptions config variable has been maintained and
will be updated to a code-agnostic name in a future patch.
Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
When the vector-sticky-header-enabled class is removed from the body
it means the feature is not enabled, it doesn't mean the sticky header
should be invisible.
Call the hide method instead, and move it out of the function given
its a side effect
Bug: T308343
Change-Id: I4ecd6524146f203af926847812e20275c9573cab
Adds behaviour for conditionally adding the edit button
to the sticky-header based on A/B test bucketing.
This behaviour depends on having the `$wgVectorStickyHeaderEdit` config
set to true for logged-in users:
$wgVectorStickyHeaderEdit = [
"logged_in" => true,
"logged_out" => false
];
as well as an AB test configured with the following buckets:
$wgVectorWebABTestEnrollment = [
'name' => 'vector.sticky_header_edit',
'enabled' => true,
'buckets' => [
'unsampled' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonControl' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonTreatment' => [
'samplingRate' => 1
]
]
];
With that config, this change hides the sticky header for all users
except those in the stickyHeaderEditButtonTreatment bucket.
NOTE: This patch address the sticky header being visible on incorrect
namespaces when the AB test is enabled and the revert of
42b808738a.
Bug: T299959
Bug: T309370
Change-Id: I3effbb3e5f0bb1c8663255936458e3849511dfca
This reverts commit 42b808738a.
Reason for revert: The sticky header is now showing up in unexpected
places e.g. special pages.
Bug: T299959
Bug: T309370
Change-Id: Ie7f224d84440279ba28e031e13d05984c81a3ad4
Adds behaviour for conditionally adding the edit button
to the sticky-header based on A/B test bucketing.
This behaviour depends on having the `$wgVectorStickyHeaderEdit` config
set to true for logged-in users:
$wgVectorStickyHeaderEdit = [
"logged_in" => true,
"logged_out" => false
];
as well as an AB test configured with the following buckets:
$wgVectorWebABTestEnrollment = [
'name' => 'vector.sticky_header_edit',
'enabled' => true,
'buckets' => [
'unsampled' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonControl' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonTreatment' => [
'samplingRate' => 1
]
]
];
With that config, this change hides the sticky header for all users
except those in the stickyHeaderEditButtonTreatment bucket.
Bug: T299959
Change-Id: If252956bc530d8ce54eeda61f42a93ffa48255cb
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled
Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
* Bucket and sample on server by using the
`WikimediaEvents.WebABTestArticleIdFactory` service from
WikimediaEvents (soft dependency)
* Add linkHijack.js so that users bucketed in one group have the
possibility of remaining in that group if they click a link to another
page.
Bug: T302046
Depends-On: Ie6627de98effb3d37a3bedda5023d08af319837f
Change-Id: Iff231a976c473217b0fa4da1aa9a8d1c2a1a19f2
Headings can also appear in templates inside divs and subtitles.
These do not
get rendered in the table of contents and should not be tracked.
This also excludes headings from the legacy table of contents which
may be in the article during the A/B test
See English Wikipedia examples [[Portal:Biography]] and [[Main page]]
Change-Id: I4ca8933a0e7736157f80e5e68077b153e5bfc81d
- Remove isStickyHeaderAllowed() from stickyHeader.js, move to main.js
- Rename variables in stickyHeader.js to be consistent
Bug: T301429
Change-Id: Ib445a19cbfab52a008b749ea63cef178d6288e6a
- Leverage scrollObserver to use for TOC scroll events.
- Add new hooks to target legacy TOC intersection.
- See corresponding changes (not strict dependency) in related
WME patch 773628 for capturing scroll events from Vector TOC:
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikimediaEvents/+/773628
- Dependency on https://github.com/wikimedia/typescript-types/pull/30
which updates mwHookInstance interface with fire property to prevent
TS error on fire method of mw.hook in scrollObserver.
Bug: T303297
Change-Id: I5c2dd5f3a25ffcb0ed03b76ae28e65eb18ad8d33
* Eliminates AB.js dependency on sticky header
* Code coverage has been raised to 100%
* Instead of importing ABTestConfig, these props are now passed into the
function along with a token.
* WikimediaEvents hook is now fired when experiment is initialized. The
experiment should not be initialized if it is not enabled.
* Removes several methods (e.g. initAB, getEnabledExperiment) due to the
preceeding changes.
* Adds `isInSample` and `isInTreatmentBucket` methods so that the client
has less work.
Treatment buckets now follow a naming convention so that the client can
do less work querying if the subject is part of the treatment:
* Treatment buckets should have the case-insensitive `treatment`
substring somewhere in their name (e.g. 'treatment',
'stickyHeaderTreatment', 'sticky-header-treatment' )
Bug: T302046
Change-Id: I4febec42b4c471b2f2ef02be2e334bd6d2c31eec
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
Move jsdoc comment closer to the methods they are describing. This also
enables better typehint support.
I36b3ae7f9f633877683bc17a9444c970d7fa7293 will handle revising tableOfContents.js.
Change-Id: Ifcac7cfd88cd3f1c0405611c880a0d101d2aed3b
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
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
Move A/B test code to AB.js
Consolidate the show/hide code spread across scrollObserver
and stickyHeader by adding a show and hide function.
This is needed to fix T296680
Change-Id: Ia2e0c50278df0dfc1600610f281be20f4cc755c2
- Permits logging for scroll events without sticky header.
- Update function name to be more precise.
Bug: T292586
Change-Id: I441b4bf81bc4a36a03f0f1c215d86b01dce2911d
- 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
stickyHeader.js, a file in the "skins.vector.es6" module, clones the
user menu. Because of this, it must initialize before dropdownMenu.js, a
file in the "skins.vector.js" module, in order for dropdownMenu.js to
bind the correct checkboxHack event listeners to the user menu in the
sticky header.
Therefore, change the es6 module to export its main method. The
skins.vector.js module can then use mw.loader.using to ensure the
skins.vector.es6 module initialization happens first in browsers that
support es6. Browsers that don't support es6 will continue to initialize
the skins.vector.js module.
Bug: T291096
Change-Id: I1bb6f2da9703ed2679eacfdb42b9818efe614ab9
- Can now use const/let
- No need for feature detection for things like fetch and closest
as we can assume they exist if ES6 support is available
Change-Id: I85b01add13fd74e1514119498815403e42a09af0
This will allow us to write ES6 code for the new features which
is limited to those browsers.
For browsers that do not support ES6, the code will not execute
because of the "es6" flag. Doing this will help us avoid issues
like T293402
Change-Id: Iffb7098cb22395e33b87352fb4f08516f6f25e6f
