Commit graph

47 commits

Author SHA1 Message Date
Moh'd Khier Abualruz 407046c759 [ToC] Show new/modified sections after publishing an edit (new floating ToC)
- All Frontend
- All in Skin

Bug: T307251
Change-Id: Icae2f03f0005b7607448127b793ff3c0010e5817
2022-08-15 20:02:49 +00:00
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
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
2022-08-11 11:25:21 +00:00
Jan Drewniak 942cd5b0f6 Sticky header AB test bucketing for 2 treatment buckets
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
2022-08-08 21:14:02 +00:00
Clare Ming 5b55a2f894 Minor fixes to TOC hide/show buttons
Bug: T307901
Change-Id: I37c6b3b4c5c20e914423c311795dbccce2a7b3fd
2022-08-04 15:20:58 -06:00
bwang 37149c9e67 Remove custom rendering of the user links overflow menu in favor of using 'vector-user-menu-overflow', a vector specific menu bucket in Hooks.php
- Rename 'vector-user-menu-more' class to 'vector-user-menu-overflow'
- Update storybook and tests

Visual changes
- Small intentional change on the create account button

Bug: T306662
Change-Id: I371bb11903d8cdd8f0da89266fcf549050c0da8c
2022-08-01 20:18:46 +00:00
Clare Ming 1d1585d214 Add feature to hide/show collapsible TOC above desktop
- Add hide/show links to TOC template.
- Add i18n messages for hide/show text.
- Add event listener to TOC js.
- Update relevant TOC collapsed styles.
- Update test snapshot.

Bug: T307901
Change-Id: Ic94fda79bd14856ccda14985d5860aa54d3118d0
2022-07-29 14:19:55 -05:00
Clare Ming 28732cf4f7 Remove Table of Contents feature flag
- 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
2022-07-21 12:41:39 -06:00
jenkins-bot 3c8796ee04 Merge "Search: Use Codex and Vue 3 instead of WVUI and Vue 2." 2022-07-19 15:18:29 +00:00
Roan Kattouw ce77018b7c Search: Use Codex and Vue 3 instead of WVUI and Vue 2.
[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
2022-07-18 12:54:47 -07:00
Jon Robson 2a4ac3152b Move Vector menu class logic into Menu mustache template
Cleaned 'vector-menu' in SkinVector file, updated
includes/templates/Menu.mustache and includes/templates/legacy/Menu.mustache.

Bug: T290281
Change-Id: I7286fa82abfd437a228b9ac07ac781210d7cd98f
2022-07-07 12:34:23 -05:00
Jon Robson e1942cec4e Fix sticky header edit icons during A/B test init
- Add test case for T310750

Bug: T310750
Change-Id: Ie52a7227f337dd6cdb0ab441986aa2be6139f949
2022-06-22 09:38:19 -06:00
Jon Robson 5fdd66fa3b Disable table of contents toggle on VE activation
While the table of contents is not updated by VisualEditor
we should hide it.

Bug: T307900
Change-Id: I246fbe0069329ef78735147b8d3f280433155158
2022-06-10 15:39:21 -07:00
Jon Robson deb54f9452 Correctly hide the sticky header when it is not in use
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
2022-06-01 19:07:49 +00:00
Jon Robson b031247336 Adds tests for stickyHeader A/B test logic
Follow up to I3effbb3e5f0bb1c8663255936458e3849511dfca

Bug: T299959
Change-Id: I8703587a6e616c426638e44ca6dad12617f10ae7
2022-05-31 17:10:49 -07:00
bwang dd8cc5dfe8 Add snapshot class to sticky header tests
Change-Id: Id1383f234bd0518786feebbbb2d92f7345aa6e70
2022-05-12 10:51:43 -05:00
Jon Robson c269419af3 Disable animations when user prefers reduced motion
When browser preference for reduced motion is enabled:
* Disables bolding of table of contents
* Disables sticky header transition

Bug: T254399
Change-Id: I8ef9e59b258fed977ce370da352b1924832d842b
2022-04-26 23:31:38 +00:00
bwang 9473758efd Replace h2 in TOC with p and remove aria-hidden
Ideally the TOC has an h2 after the article title h1, but because of the TOC sticky positioning and its placement in the grid, we cant use an h2 without messing up the heading order.

Bug: T301051
Change-Id: I462ddfb618ddd422c9f71293280d1790c4846f50
2022-04-19 17:51:36 +00:00
Clare Ming 28a3c06cdf Replace TOC arrow icon
Bug: T304166
Change-Id: I182c9e5399d95ecea58dcdabb563a98b4e34e47e
2022-04-11 14:56:42 -06:00
bwang f1c70e99b7 Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons
Bug: T303766
Change-Id: Idda4f286a42152af1d233588a1839ada5491ce95
2022-04-06 17:24:34 -05:00
bwang aa8ec1a878 Revert unnecessary TOC section id change
Change-Id: I62736b47557b79929b8ad984d6709e762b3db549
2022-04-05 15:38:00 -05:00
Nicholas Ray 6fbf08a198 Build A/B test bucketing infrastructure for the table of contents.
* 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
2022-04-04 17:06:29 -06:00
bwang 733990f881 Small clean up and TOC update
Change-Id: Ic093888cb2b06d8eef95a1317d791e7e1627d0f6
2022-04-01 13:14:02 -05:00
jenkins-bot 056b242682 Merge "Make beginning bold on scroll" 2022-03-29 16:05:39 +00:00
Clare Ming 1d574b86f1 Add fade to indicate scrollability in TOC
Bug: T302076
Change-Id: Ib803239602333e2a8232a26a10477a0f9933b819
2022-03-28 15:58:26 -06:00
Jon Robson a2c7c024df Make beginning bold on scroll
Bug: T301254
Change-Id: I4469575ea8590ae22023b98c3dbd31bc672d5766
2022-03-25 01:13:42 +00:00
jenkins-bot cd04b72058 Merge "Table of contents links to beginning of article" 2022-03-24 23:51:52 +00:00
Jon Robson dfdf72140c Table of contents links to beginning of article
Bug: T301254
Change-Id: Icb0b0646f81c1070c8f47dd3297225a074f74773
2022-03-24 20:46:35 +00:00
jenkins-bot 1b8ee10357 Merge "Add data-event-name attributes to legacy and sidebar TOC" 2022-03-23 22:00:45 +00:00
Nicholas Ray d01dead5a7 Revise AB.js to handle other features + server sampling/bucketing
* 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
2022-03-22 11:58:48 -06:00
bwang ac54984d75 Add data-event-name attributes to legacy and sidebar TOC
Bug: T302934
Depends-on: I5ef98d5f5713d3d99bc5f7f8112ba2d1e0f62e22
Change-Id: I5806c346abf0375c85248659c636ae3b2d73f661
2022-03-21 22:32:56 +00:00
jenkins-bot 08efa139be Merge "Remove custom handling of aria-expanded in Vector checkbox hack buttons" 2022-03-21 18:03:14 +00:00
Mortal303 ae50914d4e Remove custom handling of aria-expanded in Vector checkbox hack buttons
Removed class "vector-menu-checkbox-expanded" and "vector-menu-checkbox-collapsed" in
includes/templates/Menu.mustache and deleted the necessary lines in
resources/common/components/MenuDropdown.less, tests/jest/stickyHeader.test.js,
includes/templates/skin.mustache, skin.json, i18n/en.json and i18n/qqq.json.

Bug: T299173
Change-Id: Ibf8a08e6e5d1a6c607abf170c030a0285e84ad74
2022-03-21 23:14:51 +05:30
jenkins-bot 822d1957f1 Merge "Revert "build: Update eslint-config-wikimedia to 0.22.1"" 2022-03-17 00:18:36 +00:00
Jdlrobson f7a859bac5 Revert "build: Update eslint-config-wikimedia to 0.22.1"
This reverts commit b72c648d21.

Reason for revert: Causes an issue with the search
(See https://phabricator.wikimedia.org/F35009362)

Change-Id: I09f7e5c9eab677bfd5a92cf2d8389d20a2d6e87a
2022-03-16 23:40:42 +00:00
Jon Robson 6855979a92 [i18n] Table of contents heading
Should be translateable

Change-Id: I3c4515f16b5300a44f89ebdcd426a9d8ac6ad138
2022-03-16 17:18:51 +00:00
Ed Sanders b72c648d21 build: Update eslint-config-wikimedia to 0.22.1
Change-Id: If632697f7c3bb3fad6668d791d9408f7b7a3590b
2022-03-16 15:42:07 +00:00
bwang 5f0c0cb294 Use TOC template data for showing collapsible section arrows
Bug: T299361
Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd
Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-22 15:47:23 -06:00
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
Jon Robson 2dcd99ed21 Sticky header dropdown should not contain gadgets in personal menu
Bug: T302087
Change-Id: Iae1f42c3c526398d7dea038786ae9001e118307b
2022-02-18 21:30:29 +00:00
jenkins-bot 9b7d5ad473 Merge "Toggle ToC sections when clicking toggle button" 2022-02-16 22:30:25 +00:00
jenkins-bot 914e3d55e6 Merge "Add fetch tests from WVUI" 2022-02-16 22:07:18 +00:00
bwang 301e09916d Toggle ToC sections when clicking toggle button
Bug: T300167
Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-16 15:48:28 -06: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
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
bwang 66359e8fa5 Setup jest unit tests and add basic test cases for AB.js and App.vue
Bug: T300561
Change-Id: Ib7c314b094bd823ae233374f63c9094724d6c06f
2022-01-31 20:50:33 +00:00