Commit graph

464 commits

Author SHA1 Message Date
jenkins-bot fd259ed3c2 Merge "Set width of preview to match reading" 2022-10-19 14:28:37 +00:00
Sam Wilson c2e7595809 Set width of preview to match reading
Preview width is set at 60em, but the container as a different
font-size to .vector-body and so the preview was displaying at
the wrong width.

This change removes the font-size from the grantparent and
re-sets it on the contents of #wikiPreview, ensuring that the
final size matches the actual non-editing width of the body
content.

In addition, the 'submit' action is added to the list of those
excluded from constrained width, so that the editing textarea
remains at full width even when previewing.

Bug: T312963
Change-Id: I1a1df32b00d5faecb73f8c53256342d356a9352c
2022-10-18 13:26:31 +08:00
Func e23ec1d0fa Follow-up 76d1135: Use better practice in the code
* The new preference should be prefixed with 'vector'. This is only
  for use in vector skin

* Use registration instead of the hook to set the default user
  preference. For non-dynamic defaults, registration in skin.json
  is preferred.

* Remove the 'wp' prefix for 'hide-if' parameter of field descriptor.
  The core did try to strip the 'wp' prefix when mismatched, which is
  only for backward compatibility.
  Field name without prefix (which is the key of the field descriptor)
  should be used instead.

Bug: T319447
Change-Id: I25aa0cb23b78cf06f77fb20207dee7e1742d0ca7
2022-10-18 03:26:30 +00:00
Moh'd Khier Abualruz 76d1135810 Create user preference to turn fixed width on and off
Additional changes:
* Move static classes (skin-vector-legacy and vector-toc-not-collapsed)
to skin.json

Bug: T319447
Change-Id: I3525f8bfe27445e3af83ce5cd34b4da643178fe2
2022-10-17 20:02:39 +00:00
Roan Kattouw 5693594bd1 Remove $wgVectorSearchHost, replace with $wgVectorSearchApiUrl
This allows the URL to the other wiki's rest.php to be configured
exactly, rather than assuming that it has the same wgScriptPath as the
current wiki. This is necessary to make this feature work on PatchDemo,
where wgScriptPath looks like '/123abc456/w'.

$wgVectorSearchHost is removed, since nothing uses it except PatchDemo
(where it's broken) and development setups.

Bug: T319494
Change-Id: Ife042f4f683d366a31a642723746d4aa80774c03
2022-10-07 00:57:58 +00:00
Jan Drewniak 98068d9598 Restore navigation landmarks in page toolbar
Adds landmarks to the article toolbar
- Namespace navigation
- View navigation
- More options navigation

Removes the "tools" landmark and associated
aria-label (and translation message).

Makes the #left-navigation and #right-navigation
flexbox to ensure the new <nav> elements, along with
gadgets, align on one line. Moves the styles for
these elements from screen.less to ArticleToolbar.less.

Bug: T317440
Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
2022-10-03 10:39:39 -04:00
jenkins-bot da53130bc8 Merge "[Visual enhancements next] Make the Echo buttons functional" 2022-09-28 23:49:25 +00:00
Jon Robson 44ee12c717 [Visual enhancements next] Make the Echo buttons functional
This completes the changes to Echo inside the
vectorvisualenhancementnext=1 feature flag

Bug: T257143
Change-Id: I8f3904815c90ef1a10a2342c5c70363c8b9e1e47
2022-09-28 17:06:20 -05:00
bwang e7944de81c Add Article Tools feature flag
Bug: T306609
Change-Id: Ia40af4e48c006aeceebd3879ff0aaecbe1b200d4
2022-09-28 15:41:30 -05:00
jenkins-bot ecba35aeca Merge "Remove VectorLanguage A/B test code (WgVectorLanguageInHeaderTreatmentABTest)" 2022-09-26 23:01:34 +00:00
Jon Robson 048d25eb93 Default alert to on
This is the case for all production wikis, so let's mimic production

Change-Id: I749675b759d43375bf7b4cc6a2d18e640ebd1a6f
2022-09-26 10:57:22 -07:00
Jon Robson b452a85fe8 Remove VectorLanguage A/B test code (WgVectorLanguageInHeaderTreatmentABTest)
The removal here is actually relatively straightforward.
References inside OverridableConfigRequirementTest are kept as
the A/B test capability remains after this removal and the tests
here do not relate to the code removed, just examples of how it
can be used.

Bug: T302027
Change-Id: I2dd92adaff1221d8213723e9ee60aa02787d4cc7
2022-09-23 18:18:15 +00:00
Jon Robson 452d59c7ef Echo: Move skinStyles from Echo extension to Vector
Bug: T257143
Change-Id: If52986fe56b65479adabe8233b0fc6df164b5376
2022-09-23 18:13:19 +00:00
Jon Robson 97cf735de2 Icons: Watchstar and wikilove are upgraded
Can be tested by appending ?vectorvisualenhancementnext=1
to URL

Bug: T310838
Bug: T234990
Bug: T234550
Depends-On: I76d0d94c9006cc5f5680849ecdd1c382c16e34ba
Depends-On: Ib7c3021db014827b4b88cac855afc0b54a360f8c
Change-Id: Ie2ffa5c3ecf270c1bb1f315937023ae7ace5ed30
2022-09-08 19:43:35 +00:00
Jon Robson c1e923f120 Icons: Enable feature flag for next set of visual enhancements
Change-Id: I10f5a2ee8fa8121f8e9a5a79c98db492fbec6534
2022-09-02 07:54:13 -07:00
jenkins-bot d59885cf89 Merge "Enable related tabs on Vector" 2022-09-01 20:36:15 +00:00
jenkins-bot b6a6296636 Merge "Reduce dependency on core styles" 2022-08-31 18:08:26 +00:00
Jon Robson 486748ac41 Enable related tabs on Vector
Depends-On: I861e8fe9c80569224548b8569452f8c57a446998
Bug: T313409
Change-Id: I871291c91dfe1f92c1131a2403695394ef3d0533
2022-08-30 14:20:11 -07:00
Jon Robson 9689974d0d AB test: Complain when TOC experiment setup incorrectly
Throw a runtime exception if the TOC experiment is setup correctly.
Otherwise this leads to confusion.

There must be 3 buckets, with 0 unsampled and equally weighted
control and experiment.

Bug: T313435
Change-Id: I09da238ff17b77a053b4dc132624ea19a86253b9
2022-08-30 11:59:42 -07:00
Jon Robson dfede899d6 Reduce dependency on core styles
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Depends-On: Ib5ae640bb260cee46e654228b785c776722c7003
Bug: T316027
Change-Id: I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
2022-08-24 16:16:01 +01:00
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
jenkins-bot 6129fef3a0 Merge "Allow preview on certain article titles" 2022-08-09 16:02:46 +00:00
Jon Robson d771a1d60d Allow preview on certain article titles
The list is exposed in mw.config so banners can work out if the
preview mode is active.

We change the skin the same way MobileFrontend changes the skin.

Bug: T314286
Change-Id: Ib3c90d2640f2fa8cac17514b59aa720e4aba6d96
2022-08-08 19:58:07 +00:00
bwang ef2b0a2372 Remove vector-layout-legacy styles and grid feature flag
Bug: T313559
Change-Id: I050d0e243186ba4341accc26f8d644f55ff995b7
2022-08-08 08:22:26 +00:00
Meno25 afe4a93e65 Update link target of the team page
Link redirected on mediawiki.org

Change-Id: Iee32234585411db7031cdb9e73412904f5e71d45
2022-08-05 12:51:44 +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
jenkins-bot 8e36c72144 Merge "Add "Add topic" button to sticky header" 2022-07-26 22:36:04 +00:00
jenkins-bot 77bd2e5fbd Merge "Sticky header: Add a link to the 'subject' page when on talk pages" 2022-07-26 22:36:01 +00:00
Ed Sanders 23a5261ef6 Add "Add topic" button to sticky header
Bug: T304187
Change-Id: Ib497eb91ec7548e2ba6d1d474a196ada770f955d
2022-07-26 22:15:02 +00:00
jenkins-bot aa925d01d9 Merge "Define non-standard colors for legacy Vector" 2022-07-26 21:27:45 +00:00
Ed Sanders c9a04099d0 Sticky header: Add a link to the 'subject' page when on talk pages
The subject link does not have a consistent ID like the talk link,
so it needs to be computed from the canonical namespace name.

Something similar is done in VE.

Bug: T309424
Change-Id: Ie82ca61aef30204edd09793963b25464febb17fe
2022-07-22 22:24:38 +01:00
Clare Ming 1297733a65 Add text to TOC collapsible button label for accessibility.
- Provide message translations.
- Include other TOC message that was missing.

Bug: T310810
Change-Id: Ibd612b48ea3ef3f9f31f4bb5791c0cb82e447ece
2022-07-22 10:45:40 -06:00
Jon Robson 96a12622c2 Define non-standard colors for legacy Vector
Bug: T213778
Change-Id: I7e350c1d6d6c584ce97d210a9d62190a453693c4
2022-07-21 21:31:31 +00:00
Jon Robson 75ffe2eb36 Layout: Release CSS grid
Results in the following visual changes:
- Footer will always span full screen
- The top of the TOC should align with the hr under the page title

Bug: T312241
Change-Id: I3fc9de5900aff441715f004aed786f95b14657a5
2022-07-21 14:15:12 -07: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 33a6fb6028 Layout: Title should always be above tabs
**UI CHANGES**
- This change will result in expected UI changes so will flag problems
with Pixel.
- Before merging please confirm Pixel reports 31 passed, 47 failed
- After merging, we should update LocalSettings.php to reset these
changes.

Bug: T310054
Change-Id: Ib35c6bfa5493f7dc81b63c42e7fedb8f1e47226b
2022-07-06 15:25:42 +00:00
Clare Ming 6a0907a70b Match default config of TOC to pilot wikis
Bug: T309683
Change-Id: I7f1e727fbf06655daf2b6a359580fc6bf10ca1b9
2022-06-13 10:44:22 -06:00
bwang 93e8cfcd90 Collapse ToC into page title at narrow view ports with CSS/template changes only
Bug: T307900
Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5
2022-06-10 15:49:06 -06:00
jenkins-bot 677684d839 Merge "[Refactor] Separate sidebar persistence code from checkbox hack code" 2022-06-10 21:37:49 +00:00
Jon Robson de0729e604 [Refactor] Separate sidebar persistence code from checkbox hack code
Change-Id: I5d7d8897f656419a71b1327c37e88c9dd7f0767c
2022-06-10 13:55:22 -07:00
Ed Sanders 10322dbd29 skin.json: Fix 'tittle' typo in documentation
Change-Id: I7e27ae3dcc1ade05b00c817a948ec271bc437fc9
2022-06-09 18:50:33 +00:00
Sam Wilson 87e4ca9a21 Exclude from max-width via query string patterns
Add action=edit to the exclusions in $wgVectorMaxWidthOptions
and update the parsing of the query string values for that config
variable to accept a regex.

Bug: T307725
Change-Id: Iba526033d45e18cb340a2648378d3d90ef3ae3c6
2022-06-01 10:00:39 +08:00
Sam Wilson 0ebae6c4ef In max-width mode, constrain the width of page previews
This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.

Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16
2022-05-30 11:52:59 +08:00
Sam Wilson c32c64481d Use new ResourceLoader namespace
To fix Phan errors with the now-deprecated ResourceLoaderContext
class alias.

Bug: T308718
Change-Id: Ifd265d29cee5f8a68e7b3036deaf2ba2b6c49d2e
2022-05-25 10:36:40 +00:00
Mo Abualruz e46eef19d0 Normalise PHP namespaces used in Vector
- `MediaWiki\Skins\Vector\Tests` is now the prefix for all tests in the skin
- we followed PSR conventions of following folder structure after the prefix
- Optimize imports/use order
- update namespace in skin.json

Bug: T303102
Change-Id: Ib76374d81d973c83adfd6c8e7863ff6d797e655d
2022-05-23 09:32:40 +02:00
Jon Robson d74890df63 [Grid preparation] Add feature flag for grid
Additional changes:
* Make the query string parameter optional and if not defined set it
to lowercase configuration name. I think this makes it more predictable
as some configuration flags are prefixed with vector and some without.

This has the following consequences:
languageinheader => vectorlanguageinheader
languageinmainpageheader => vectorlanguageinmainpageheader
languagealertinsidebar => vectorlanguagealertinsidebar
titleabovetabs => vectortitleabovetabs

Note since table of contents query string is used in the A/B test
I've kept that as tableofcontents for now.

Bug: T303484
Change-Id: Iaca026ef5f32836098dc3b6f0f18632fe84fa8d0
2022-05-13 15:21:52 +00:00
Jan Drewniak 29d938b0f9 Create feature flag for VectorTitleAboveTabs feature
Adds a feature called VectorTitleAboveTabs that will be used to
toggle a forthcoming feature that moves the page title above the
tabs (the ones that link to talk/history etc).

Bug: T303549
Change-Id: Ibadb4293eca16a83e5e7a9f90ddcf51fab0a0e41
2022-05-10 12:53:31 -04:00
jenkins-bot ff3d879ee2 Merge "Remove nav element from Vector menus and only render label elements in Vector menus when needed. Add new nav landmarks corresponding to user links, main site nav, and article editing tools. Split out legacy Menu template." 2022-05-03 15:42:02 +00:00
jenkins-bot 3d36fac0ef Merge "Updates for core temp user autocreation feature" 2022-04-28 20:53:35 +00:00
Tim Starling 8d0659b1e6 Updates for core temp user autocreation feature
* Use pt-tmpuserpage for the temp user name.
* Use the userAnonymous icon for the temp user personal tools menu.
* Suppress the logout menu item for temp users.

Depends-On: Ib14a352490fc42039106523118e8d021844e3dfb
Bug: T300263
Change-Id: I8ac5de82f76a9ec58b0fbef85546bc7fd5b793d2
2022-04-28 20:32:53 +00:00
bwang 1d46d78ced Disable TOC in edit mode
Bug: T307112
Change-Id: Ic7bf195972d3f5bfe781a15fc805d7ef1b56e496
2022-04-28 20:09:05 +00:00
Jon Robson 64df4fde20 Remove dancing tabs with CSS only solution
Remove JavaScript that collapses tabs and replace with an easier
to maintain breakpoint based solution.

Tabs will now collapse below the tablet breakpoint

Note: In the case of mw.util.addPortletLink, to add items to the
`views` menu, these will not be collapsed into the more menu and
must now be explicitly added to both menus, ie. if the window is
resized these will hide and not appear in the more menu.

However, when mw.util.addPortletLink attempts to add to `views` menu
when there is not available space, we will redirect those links to
the more (`cactions`) dropdown menu.

Bug: T306229
Change-Id: I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
2022-04-28 17:57:10 +00:00
bwang d54029a523 Remove nav element from Vector menus and only render label elements in Vector menus when needed. Add new nav landmarks corresponding to user links, main site nav, and article editing tools. Split out legacy Menu template.
Bug: T291304
Bug: T301051
Change-Id: I35c20103e4b45139ef1d3f73c23f6a744aa87a3c
2022-04-27 16:52:20 +00:00
Derick A 80b60c153a
Hooks: Migrate Vector skin hooks to the new MediaWiki hook system
Per https://www.mediawiki.org/wiki/Manual:Hooks#Handling_hooks_in_MediaWiki_1.35_and_later,
MediaWiki provides a new hook system. Vector is able to utilize this new
hook system because it requires a MW version >= 1.35, hence the migration.

Bug: T271009
Change-Id: I6e01b151751485339a0d6a6dc6a843f7141d54bb
2022-04-26 23:58:13 +01:00
Jon Robson f38a2afbf6 Restore persistent sidebar
Bug: T305989
Change-Id: I1304c777ad9581cd8b9153ad1e4483e31660857e
2022-04-18 19:44:11 +00:00
bwang 21f124dad5 Fix missing create account link icon and ensure icon attributes aren't showing up in rendered HTML
Bug: T306116
Depends-on: I509dd153ea2c1e04cb89415f185b7abbe0403773
Change-Id: Iaea83098fda7d77fda6629722dcef3e17e21fe06
2022-04-14 11:03:56 -05:00
Clare Ming 28a3c06cdf Replace TOC arrow icon
Bug: T304166
Change-Id: I182c9e5399d95ecea58dcdabb563a98b4e34e47e
2022-04-11 14:56:42 -06:00
Func b61a92f052 Drop the Vector.Config service
It didn't vary by the skin version as documented in the Constants class,
and merely another instance of GlobalVarConfig.

Change-Id: I0acd0366a241e04bb79f6aae5dc52284dfa578df
2022-04-07 04:30:20 +00: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
Tim Starling 254ffbb55a Don't set a user preference on new accounts by default
Make it possible for Vector to be a non-default skin. Only set a user
preference on newly created accounts if that has been explicitly
requested in config.

This should have no effect on WMF production.

Change-Id: I52f62cf7eb78d2be4c59821a3cf29da9619602d9
2022-03-31 14:52:20 +11:00
jenkins-bot ac5c82cfb8 Merge "Drop SkinVector global class alias" 2022-03-29 17:54:46 +00:00
Reedy 0d5e2d184e Drop SkinVector global class alias
Change-Id: I0e35a3c88aced671ef23318bf3970f7f3f261f6a
2022-03-29 17:32:39 +01:00
Jon Robson 413f92561d Restore the classes skin-vector and skin-vector-search-vue to body
The option is set incorrectly.

Change-Id: Iafccb427b87f9a877374745b48b4ec1519de7e11
2022-03-29 08:50:10 -07: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 24b5d5840e Merge "End migration mode" 2022-03-23 17:03:38 +00:00
Jon Robson b109e10cf3 End migration mode
Can be merged when database rows have been updated to
no longer use skin version.

* Drop migration code
* Drop skin version preference
* Drop default skin version and existing accounts skin version
* Move skin definitions into skin.json
* Repurpose SkinVector as an abstract class
* Update READMEs

Bug: T301930
Bug: T294995
Bug: T302627
Change-Id: I7454d8f1cfdef81e7f3df476d8ce86736b46fff2
2022-03-23 16:46:42 +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
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
Jon Robson 6855979a92 [i18n] Table of contents heading
Should be translateable

Change-Id: I3c4515f16b5300a44f89ebdcd426a9d8ac6ad138
2022-03-16 17:18:51 +00:00
Reedy 1dcfe80ac3 Namespace SkinVector* PHP classes
Namespaceless class aliases are left behind for migration purposes.

They can be removed at a later date when dependant extensions
and skins are fully updated.

Bug: T301204
Change-Id: I2b37c1889ff862ec8bb41325fc9f654c673cd115
2022-03-04 13:30:21 +00: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
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
jdlrobson b8122cc40b Separate code from ES6 browsers from ES5 code
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
2021-10-21 15:55:04 -07:00
jenkins-bot 041496585b Merge "Revert "Use searchFooterText slot in typeahead search component"" 2021-10-13 15:01:39 +00:00
Bernard Wang 7575cf97a5 Revert "Use searchFooterText slot in typeahead search component"
This reverts commit b7728ddda5.

Reason for revert: Depends on WVUI release

Change-Id: If97551a8609433b569fbc88800a7bf9ffc137587
2021-10-13 14:34:08 +00:00
jenkins-bot 529ccd1a86 Merge "Use searchFooterText slot in typeahead search component" 2021-10-12 21:34:45 +00:00
jdlrobson ba7d228cea [cleanup] Drop unused messages
Messages listed in ValidSkinNames must be used in a template.
None of these messages are used in templates (confirm by prefixing
with msg- and searching the repository.

Change-Id: I77387d67c27888d9726b1f67aaea484abddc4e2e
2021-10-07 17:03:12 +00:00
bwang b7728ddda5 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: Ic92721d5aaf6b833c882a26e9a60b42ab91546fa
Change-Id: I34a184cc8f10172a7ebf67981731c3694d008446
2021-10-06 11:37:26 -05:00
Clare Ming 67e7eab714 Add edit icons to sticky header
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).

Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
2021-10-05 23:31:19 +00:00
jdlrobson 125ea5dea9 Wire up sticky header search feature
Bug: T289724
Change-Id: I784ea5eb12b6f43d19769ff48a14d3fd4627853c
2021-09-27 14:47:58 -07:00
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00:00
jdlrobson 52204c0f1a Add history and talk page icons to sticky header
Bug: T290597
Change-Id: Ib590399df09a9da8e181b331d4227b0de30b9a8e
2021-09-14 12:34:47 -07:00
jdlrobson 0a47c667d8 Skin style for ULS no longer needed
Fixes upstream in ULS (Ie9e30af5468aea9803d77c9a36e480ba2b2e86a0)
mean these are no longer necessary

Bug: T289630
Change-Id: I1edee874a42b070bc319648496ae80a01b6365fb
2021-09-03 20:13:24 +00:00
Martin Urbanec 71539a7cc6 Add userGroup to skins.vector.icons
Will be used as part of Growth's mentor dashboard.

Bug: T289054
Change-Id: I0055890dcdb451e60b7176069bfcee8f3c8fa886
2021-09-03 14:37:29 +02:00
Clare Ming 21c45837ef Spoof aria-expanded for dropdown menus using checkbox hack
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.

Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
2021-09-01 16:12:26 -06:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.

Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-09-01 12:32:31 -07:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
2021-08-31 10:59:59 -05:00
jenkins-bot a068d6125d Merge "Template directory is set in skin.json" 2021-08-30 17:43:50 +00:00
jenkins-bot fef51f9023 Merge "Improve readability of anon user menu for screenreaders" 2021-08-27 20:36:16 +00:00
jdlrobson 3435f8fd9b Template directory is set in skin.json
Thanks to the upstream changes in T262067 we can make this template
directory relative to the skin and declare it inside skin.json

Bug: T262067
Change-Id: Ieccdf87979d14eeec0834b6b0cecf064d5fd9cfc
2021-08-27 17:36:28 +00:00
bwang d15005408f Improve readability of anon user menu for screenreaders
Bug: T288293
Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b
2021-08-26 12:58:10 -05:00
Clare Ming 1efe0a4203 Remove user links feature flag
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.

Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
2021-08-26 10:07:15 -06:00
jenkins-bot 7afd480266 Merge "Add title attributes to menu icons on hover" 2021-08-25 21:25:17 +00:00
Clare Ming 3dccc74b4b Add title attributes to menu icons on hover
- Add title attribute to Header template for hamburger icon.
- Override tooltip for user links menu icon for anon users.
- Make sure tooltips are empty for legacy version.
- Add translatable strings for new tooltip, title.

Bug: T287494
Change-Id: I84ce6a1eb2a37eb9ea71a40c565c059d156a44ba
2021-08-25 13:20:22 -06:00
jenkins-bot 92e034fbe7 Merge "[refactor] Clean up responsive handling" 2021-08-25 16:17:20 +00:00
jenkins-bot 967962cb51 Merge "Add imageGallery icon for UploadsLink and ContentTranslation menu links" 2021-08-24 18:08:00 +00:00
bwang d9dadf4a83 Add imageGallery icon for UploadsLink and ContentTranslation menu links
Bug: T288541
Change-Id: I9b71869c84c9745abbe233b11bb662aa0d4bb987
2021-08-24 16:57:27 +00:00
jdlrobson 391d9ba509 [refactor] Clean up responsive handling
There is no need for this to be in the constructor. Separate into
its own function that inherits from parent class and existing parent
method isResponsive.

Change-Id: I60d155ec9db99ccfe0b74271dee76275a8a6986c
2021-08-23 15:59:15 +00:00
bwang a50b1db793 Replace deprecated 'content' and 'content-thumbnail' features with 'content-media'
Bug: T287410
Change-Id: Iab67cedd67a03420b9204c92549f616d63266497
2021-08-18 19:08:10 +00:00
Jdlrobson b7464135cc Revert "Add wikibase skin style"
This reverts commit c595cc5106.

Reason for revert: Doesn't work. Must be done inside Wikibase extension.
See Ic576d8de9377813f7fe2d48841c1b6f303579728

Bug: T287206
Change-Id: I9904a72e4965a4124e4784501a3b4e77167a2971
2021-08-13 21:18:53 +00:00
jdlrobson c595cc5106 Add wikibase skin style
Bug: T287206
Change-Id: I6e38ad106eeaaafba21ac55b067be00b8d2a0972
2021-08-12 21:28:38 +00:00
bwang 46d98c90f4 Add sticky header feature flag, query param, and class
Bug: T284463
Change-Id: I520832fa1e0a66bb24479e47c8e8f8011e514299
2021-08-04 18:49:56 +00:00
jenkins-bot 65ea203549 Merge "Remove 'legacy' feature" 2021-08-03 18:28:28 +00:00
bwang 58c87018b2 Remove 'legacy' feature
Bug: T287410
Change-Id: Ibf8c20cfb1c3adb262224a28488c03c64323f509
2021-08-03 11:06:36 -07:00
jdlrobson d0c41d1dfc Run Vector's SkinTemplateNavigation hook last
Depends-On: Iec99be92378dc1a43f39428caffc03e1f594a927
Bug: T287533
Change-Id: I7d840d047627108a0a921ea52d5cb4bd06f36ab5
2021-07-29 14:27:28 +00:00
jenkins-bot 7881d8e651 Merge "Restore print, links, table and message box styles" 2021-07-27 21:45:16 +00:00
jdlrobson 722b5fbf80 Restore print, links, table and message box styles
These should have been added in the migration.
Follow up to 4a93c70

Bug: T278896
Change-Id: I089077d7ff7a9daf0e98b4dc40f04a11b4764277
2021-07-27 21:18:03 +00:00
Nicholas Ray d8f62f780c User menu design tweaks
* Revises UserLinks.less according to the T285786 spec.

* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.

* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.

* Places an end margin on the search box to add space between the user
links and the search box.

Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
2021-07-27 14:25:32 -06:00
jdlrobson 4a93c706b6 [modern/performance] Simplify Vector styles
Bundlesize drops as a result of no longer loading the legacy
code.

Bug: T278896
Change-Id: Ib992dd19356e563af356a616055ac297f9ad0b02
2021-07-23 23:49:14 +00:00
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
jdlrobson 276738b620 Consolidate user links outside of the user menu dropdown into a single new menu
- Adds UserLinks__more template to process the list of user links.
- Simplifies styles in UserLinks.less, and namespace them under .vector-user-menu-more
- Add i18n for the label of the new navigation menu
- Update storybook and typing

Bug: T284584
Change-Id: I92290815869dcb939f01d9aff4aa202f6f004894
2021-07-15 20:27:54 +00:00
Nicholas Ray 91af0e098d Make search toggleable at smaller screen widths
Now that the header collapses at small resolutions
(I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the
search toggle to show the search box when clicked and hides it when the
user clicks outside the search box.

* Adds searchToggle.js to perform handle the toggle behavior of the
searchbox.
* Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less
so that these can be used to set the start margin of the search box
(enabling its start edge to match the tab text start edge).
* Modifies screen.less to only apply search max-width when >=
@width-breakpoint-tablet

Bug: T284242
Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
2021-07-14 00:14:45 +00:00
bwang 0a75e2e627 Ensure userAvatar icon is only used in logged in users
Additional change: A bundlesize increase is required given
recent developments in the user menu.

Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
2021-06-30 22:41:47 +00:00
jenkins-bot 6597bc7d86 Merge "Collapse header at lower resolutions" 2021-06-30 22:11:34 +00:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile

Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
2021-06-30 21:43:35 +00:00
Sam Smith 445ba883a2 search: Disable query highlight for some languages
Following on from I551414b1, disable query highlighting for the list of
languages provided by @TJones in T281797.

The user's interface language can be different from the wiki's content
language and so the former is not available at configuration time. Thus,
we fetch the user's interface language at request time. Fortunately,
@TJones' list of languages is small so there should be little
perceivable performance impact from the perpective of the user.

Additional changes:

- Remove the config.VectorWvuiSearchOptions.value.highlightQuery
  property from skin.json

Bug: T281797
Change-Id: Ib39736a93fa64e82253f88551d125413e672558b
2021-06-30 16:47:46 +01:00
jdlrobson 7d32418513 VectorUseWvuiSearch should reflect production config
At this point most wikis enable this config flag. Explicit overrides
exist for wikis where it is not available (commons and wikidata).

The config on master should always reflect production config so
it's time to change the default.

Change-Id: I8835e070d2636f600f733645119b0f8497eda3e8
2021-06-21 13:26:55 -07:00
bwang 8389de9cb9 Update user menu icon and storybook
Bug: T284748
Change-Id: Icdbfd882490b380871befd3c6606c4b48d225132
2021-06-18 20:30:55 +00:00
Clare Ming b80d97b1e8 Prefix user links menu items with icons
- Add logic in Vector hooks to prefix user menu links with icons.
- Add method for getting icon name based on user menu key.
- Add constant to map user menu keys to associated icon references.
- Include icon treatment for both logged in/out users.

Bug: T276562
Change-Id: Ia69366eb4fbd50b48fe5513ef99048bdc5df64fb
2021-06-07 18:10:54 -06:00
Roan Kattouw 02638ff59d Use the new wvui-search module from MW core
Depends-On: Ifa3abeab2a929e15597fa51b95b4442fe818ef31
Change-Id: I24712ca8e4d9558a17c029a4c59484dc0f5b8fad
2021-06-02 13:40:20 -07:00
jenkins-bot a15fd2eb80 Merge "search: Add option to disable highlighting query" 2021-06-02 19:21:30 +00:00
jenkins-bot 0141be5080 Merge "Create new user menu template for consolidated user links in logged out users" 2021-06-02 19:09:54 +00:00
Sam Smith 2b05a6a203 search: Add option to disable highlighting query
... for the WVUI search autocomplete widget.

The VectorWvuiSearchOptions object is sent to the client whole and
already used as the base props for the app component constructed in the
skins.vector.search RL module. We also define the highlightQuery prop on
that component so that its value can be passed to the WVUI
typeahead-search component.

Bug: T281797
Depends-On: I142810c177b850ecd7015f835bb6630bae00a6ea
Depends-On: Ia5e14fb9d0073a5126a0918f7a94213c671e773a
Change-Id: I551414b111226e690f6a2bc69dabf5edc6fb0a96
2021-06-02 18:51:01 +00:00
bwang 298f945983 Create new user menu template for consolidated user links in logged out users
- Adds mustache template for the new user menu
- Uses new functions for getting user link data that have been factored out of SkinTemplate in the dependent patch
- Refactor new user menu styles to be namespaced inside UserMenu.less

Notes:
- Originally this patch included more storybook changes, but I removed them in favor of this follow up patch: 696651

Bug: T276564
Depends-On: Ia841f92c626ca32a9ad437b3d1cff78309c83ed8
Change-Id: Ib15752428265fdc06a3000f62bdca44c67648974
2021-06-02 09:23:22 -05:00
Volker E 42216de481 Change search button msg key to searchbutton
Bug: T280405
Change-Id: Iea3bf40be029eaa330101b7b9a1bdea191d71416
2021-06-01 15:48:09 -07:00
Jdlrobson efaf3aadf3 Remove mw-body-content from HTML that is not the article body
The `mw-body-content` class is currently decorating various things,
however should be limited to the body of the article. This allows
us to identify the wrapping element without resorting to a selector
that makes use of an identifier and to separate styling concerns of
UI (indicators and site notice) from article content.

Bug: T279388
Change-Id: I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
2021-05-14 00:01:52 +00:00
Clare Ming dc0b679bfa Consolidate user links into personal dropdown menu for logged users.
Pull personal menu items except for user page link into a consolidated dropdown menu based on feature flag using Vector hooks. Add consolidate user links feature flag for logged in/out users. Update styles for personal toolbar. Add logic to template to show legacy toolbar or consolidated toolbar based on feature flag variables.

Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
2021-05-06 12:49:39 -07:00
Nicholas Ray 49f2b25737 Create A/B test harness for Language in header feature
* Adds ab test config to enable/disable the ab test. Defaults to `false`
(ab test disabled).

* Adds a `languageinheader` query param which only takes effect when the
ab test is enabled. The query param is cast to a bool and determines
which treatment is shown. For example, set query param to
`languageinheader=1` to see the new treatment. Set query param to
`languageinheader=0` to see the old treatment. To bucket based on the
user's id or global user's id, don't set the query param.

* Moves the language in header config work that was previously in
ServiceWiring into a `LanguageInHeaderTreatmentRequirement` class so
that unit tests can be done on most of the logic that determines whether
the language in header will show.

* Adds logic to bucket user based on [global] user id.

Bug: T280825
Change-Id: Id538fe6e09002fae6c371109769f3b7d61e7ac6d
2021-05-04 14:41:53 -06:00
jenkins-bot e637cef2c2 Merge "Add config for language in header for logged in/out users" 2021-04-16 17:49:43 +00:00
Clare Ming 8cab50874c Add config for language in header for logged in/out users
Register updated requirement for language in header for logged in and logged out users in Vector's ServiceWiring file. Make VectorLanguageInHeader backwards compatible to handle boolean values when registering LanguageInHeader feature. Update VectorLanguageInHeader variable to array in config to handle different logged states.

Bug: T277588
Change-Id: I37a3a01e83f051cf0679769c8b9b5b41f00d6d72
2021-04-16 10:38:28 -06:00
jdlrobson afaa02ae42 Adjust floating override
Follow up to I3234e7712b8c111b070c35e38425c865ff7213f9
Do not disable the feature entirely as it has other purposes.

Bug: T280260
Change-Id: I47d16eb8186efa83e158713d852b443bce9aee1c
2021-04-15 17:18:29 +00:00
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
Separating most LESS files into 2 ResourceLoader modules and a common
folder:

- skins.vector.styles
- skins.vector.styles.legacy
- common

This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.

Inside each directory are separate folders for `layouts` and
`components`.

The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.

Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.

This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.

Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-04-08 15:47:56 +01:00
jdlrobson bdd7eaacf1 [legacy] Restore old floating style inside Vector
This is a modified revert of Ia1eec412111e8f6af3b45affdc186d9eafd4262c.
This is not applied to modern Vector, for reasons given on ticket.

Bug: T279008
Change-Id: I3234e7712b8c111b070c35e38425c865ff7213f9
2021-04-05 15:07:07 -07:00
jenkins-bot 1b42cd8dd4 Merge "[styles] LanguageButton: Amend icon color by setting opacity" 2021-03-30 23:10:51 +00:00
Volker E 5a1a382c17 [styles] LanguageButton: Amend icon color by setting opacity
Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.

Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
2021-03-30 22:13:50 +00:00
Ammarpad b7bf9a88a3 Use content-parser-output RL SkinModule feature
Require MW 1.36

Bug: T277218
Depends-On: I52f752aa782b09a51e2165300cc75d0e47fa3351
Change-Id: Ia1eec412111e8f6af3b45affdc186d9eafd4262c
2021-03-25 17:34:28 +00:00
jenkins-bot c84d5d38d5 Merge "[modern] Usability improvements to dropdown" 2021-03-08 16:40:52 +00:00
jdlrobson 41d30615a2 [modern] Usability improvements to dropdown
* Don't reveal the menu on hover
* Don't flip the dropdown arrow when open
* Menus close when clicked outside

Bug: T275681
Change-Id: I36f5c46422725a935c962be3194fd37bde1fa769
2021-03-07 18:59:41 +00:00
jdlrobson c9c00e71b0 Disable margin in ext.uls.compactlinks module
On beta cluster, ULS is adding a margin to the language button
meaning it is not vertically aligned.

Follow up to ac62386909

Change-Id: I4b85c391543078da7ef813cf4ddaf30d92be3b8d
2021-03-04 23:25:55 +00:00
jdlrobson 1d01f70e32 Refactor: Separate Language button code into its own JS file
Having this outside the init function makes the code more
easy to understand.

Change-Id: I6bdcb385738ceb986e21075b006db40567386e7b
2021-03-03 00:13:45 +00:00
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton

Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule

Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-03-01 20:01:45 +00:00
Nicholas Ray f549eb58d2 Replace mediawiki.util dependency with mediawiki.Uri in skins.vector.search module
I can't find any usages of `mw.util` in the Vector search code, but
there is a usage of `mw.Uri` in instrumentation.js.

Change-Id: I358295301403bc33be3a183392ed9e39c2378f6c
2021-02-12 11:23:59 -07:00
jdlrobson 4035d3575f Move resource loader definition to skin.json
Now `wvui` is in core, there is no need for this to be conditional.

Depends-On: I91db16946e7ea46f69a6b57b116962f77ce3cd20
Change-Id: Icceaefc63d227ca772a986ad2c6ce28cbdb0a7d6
2021-02-12 01:49:21 +00:00
jdlrobson 591fd316cf Switch back to skin version 1 for now
Per conversation with Bartosz this should have been done in an
explicit commit and probably needs better messaging.

Change-Id: I63f286d1c22dcb7d0bad956f01e8482e5111face
2021-02-11 14:20:09 +00:00
jdlrobson 68b989efb6 Simplify responsive Vector implementation
Vector has a wgVectorResponsive flag. This adds a ResourceLoader
module as well

I propose the configuration is repurposed to disable the min-width
on Vector and enable the viewport tag. This will allow us to use
test.wikipedia.org to test Vector at lower resolutions in future
as well as provide a suitable option for 3rd parties wanting to run
a responsive version of Vector that can be opted into using:

```
$wgVectorResponsive = true;
$wgVectorDefaultSkinVersion = '2';

```

As part of this change, the default skin version is set to 2, in
preparation for the next MediaWiki release. Note on Wikimedia wikis we
explicitly set this version so this will not impact any of our deployed
wikis.

Bug: T242772
Change-Id: I878920f49d18c5d60efd3ac45dc7912d2c62086e
2021-02-10 13:05:14 +00:00
jdlrobson f083eb2716 Add language icon to language button
The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.

Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
2021-02-03 15:38:30 +00:00
Sam Smith 746315bb5b Add search widget treatment A/B test
If the VectorSearchTreatmentABTest config variable is truthy and the
user is loged in, then pick the Core treatment (defined in the
mediawiki.searchSuggest RL module) or Vector's Vue.js-based treatment of
the search widget based on their user ID. If not, then fall back to
picking the treatment based on VectorUseWvuiSearch.

Supporting changes:

* Update initSearchLoader() in skins.vector.js/searchLoader.js to check
  whether the body.skin-vector-search-vue exists

* Remove wgVectorUseWvuiSearch from the skins.vector.js RL module's config

* Update the performance-related metrics collection to check which
  module is being loaded rather that use the above

Bug: T261647
Change-Id: Idc978392f5db14f0ae2b06ade0175fe534f4ae70
2021-01-26 12:02:01 +00:00