Commit graph

168 commits

Author SHA1 Message Date
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
Jon Robson 508d5fc548 phan: Suppress error on Vector master blocking commits
Change-Id: Ib864f4c901db2b589a0f71228154487f9128b0bc
2022-10-07 00:40:50 +00:00
Jon Robson d8f242c046 [Visual enhancements next] Restores the badge styling to Echo
Currently clicking on icons will result in the icon changing
style. This is fixed in the follow up patch
I4a0637fc19cf07d545b75fa55e15010b74fc474f

Bug: T257143
Change-Id: Ief51ac0bcab20fc87edf747b5347a5ef9dfdf36f
2022-09-27 23:11:45 +00:00
Jon Robson 7ebcf3ccff Limit upgrading of Echo icons to Visual enhancements feature flag
Currently we appear to be applying our icon/button enhancements to
notifications menu if the icon field is present.

These fields are not provided yet, but soon will be, so limiting
to the feature flag.

Bug: T257143
Change-Id: I2cf49a24f2db632e3ca23f749064929678bc8e19
2022-09-14 23:00:34 +00:00
bwang fc9fe5e719 Add vector-toc-not-collapsed class serverside
Visual changes:
* No reflow on startup

Bug: T316964
Change-Id: I17f2699fec113d92b3f0f223c357654f52eb7eb3
2022-09-08 22:43:56 +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 742f659b10 FeatureManagement: All features have an associated class on the body tag
This is a common need for features, and having these use a standardized
class name will make using them a lot easier.

Change-Id: I0e16c26878e7d4399d2bf57f236523d214951a27
2022-09-01 22:09:48 +00:00
bwang 3881820483 Follow-up: Refactor button/icon class helpers, make portlet classes consistent
- Make 'updateMenuItem' generic, rename to 'updateItemData'
- Make 'appendListItemClass' generic, rename to 'appendClassToItem'
- Remove 'appendClassToListItem' and replace with 'appendClassToItem'
- Create 'updateMenuItemData', 'updateLinkData', and 'updateDropdownMenuData' wrapper functions to be used in Hooks and SkinVector
- Add and update tests

Bug: T307901
Change-Id: I4b12a0c1aab1224d2658bad30ee629f7266c5b7e
2022-08-23 19:18:03 +00:00
jenkins-bot 310bf970bd Merge "Remove .mw-ui-button styles from user-links overflow menu" 2022-08-10 07:39:39 +00:00
jenkins-bot 6129fef3a0 Merge "Allow preview on certain article titles" 2022-08-09 16:02:46 +00:00
Jan Drewniak 5676097135 Remove .mw-ui-button styles from user-links overflow menu
Removes the .mw-ui-button styles from the userpage link
and create account link in the user menu.

Overrides the userpage redlink style so that the link
remains blue even if the userpage doesn't exist.

Visual changes: userpage link and create account link
in header are no longer .mw-ui-buttton styles, but
look like standard blue links. The user links menu shifts
slightly because of this as well.

Bug: T312157
Change-Id: Id98e566952e5875527f38d1edbc8f6e058af4518
2022-08-08 22:12:07 -04:00
Clare Ming eb597645c3 Refactor TOC A/B test to bucket users on backend
- 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
2022-08-08 15:50:28 -06: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 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 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
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
bwang 4ab798441e Refactor SkinVector to use Hooks::updateMenuItems code to process menu data
SkinVector and Hooks both had code to add classes and handle Vector specific template data. This patch simplifies the way we handle menu data to always use Hooks:updateMenuItem. This has an additional side effect of removing instances of mw-ui-icon-before.

Bug: T306628
Change-Id: I73514a0eada4d92705b70e7c2ebd91092fc12544
2022-06-28 21:53:51 +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 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
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
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
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
jenkins-bot 107abe79a0 Merge "Scope ULS styles to when language button is in header" 2022-04-09 00:07:09 +00:00
bwang 40045c6e0e Scope ULS styles to when language button is in header
Bug: T304468
Change-Id: Iebacb6a7bf3412a6ee76eb5c9fdb9471c02dd16c
2022-04-07 14:47:44 -05:00
jenkins-bot 1e75d6f373 Merge "Clean up unused constants and outdated comments" 2022-04-07 18:19:28 +00:00
jenkins-bot 125a8641e5 Merge "Prepare Vector for temporary user accounts" 2022-04-07 17:35:15 +00:00
Func 12c7d6a0ca Clean up unused constants and outdated comments
Change-Id: If6462e3a67726234abe62fd4d02a5d19ff4f02e0
2022-04-07 16:10:52 +00: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
Jon Robson 7e3d0828d5 Prepare Vector for temporary user accounts
Bug: T300263
Change-Id: I603b232da338655e54f372bec5df68dd96adfb2e
2022-04-04 19:45:14 +00:00
Jon Robson eca9fcbf79 Drop the LatestSkinVersionRequirement
The LatestSkinVersionRequirement is problematic for various reasons:

1) It uses the "useskin" query string
parameter which may or may not refer to the correct
skin (in the case of a non-existent skin it will always come to the conclusion that
it is not modern Vector and thus must be legacy).

2) It uses the User object which may or may not be safeToLoad
depending on when called.

The feature seems redundant at this point, as we are separating code
into separate classes Vector and Vector22 and all the features only apply
to modern Vector. I suggest we remove it and use the features explicitly in the skin
intended.

Bug: T305232
Bug: T305262
Bug: T302627
Change-Id: I92fa33547bd601e05ddc8c1468e681892e47c16b
2022-04-04 19:22:38 +00: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
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
Jon Robson b86dbc756c Address some code FIXMEs
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs

Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
2022-03-21 20:29:58 +00:00
bwang 2567e48f64 Fix updateUserLinksDropdownItems not being called
Bug: T304002
Change-Id: Idc9cd3a324f48d2c48243b5011d1559839789539
2022-03-16 22:07:57 +00:00
bwang 2511e35837 Refactor user links functions in Hooks.php to increase test coverage
Change-Id: I8fbf5cdf111dbb1ec06e5e74056ffdef77f77f22
2022-03-11 21:53:06 +00:00
jenkins-bot 61e2e0fbd8 Merge "Add support for icons not prefixed with wikimedia-." 2022-03-08 16:26:06 +00:00
bwang a1afa7ccb3 Ensure watchlist in user menu dropdown has the collapsible class
Bug: T302084
Change-Id: I27d7c0e46ee809185133fd787fc0c6fa5fcdac2e
2022-03-07 23:12:49 +00:00
Jon Robson 35721398b2 Add support for icons not prefixed with wikimedia-.
Needed for I0226892b2047e55d336c085c173e04a6fb4ecfa5

Bug: T257143
Change-Id: Ia24ac074aea329293c443c772229a0d5ac7246f9
2022-03-07 21:56:53 +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
Jon Robson 2a2ee9b4d4 Pass skin name to Hooks::isSkinLegacy
Hooks::isSkinLegacy is only checking the skin version
but not the skin name. This is likely why we are seeing
errors due a mismatch between the result of Hooks::isSkinLegacy
and SkinVector::isLegacy

The parameter is made optional as it is not
always needed. For example in the onGetPreferences
method the skin hasn't been set at this point so all
we need to do is check the skin version.

Bug: T299971
Change-Id: I98465d5f6429f0a57dd0a95efcda71f380f3e842
2022-02-02 13:55:16 -08: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 6cd9cc5be0 Do not try to make watchlist collapsible on wikis where watchlist is disabled
Bug: T299671
Change-Id: I9b44401ad753881ca986157dc06bb4402edc1017
2022-01-20 09:42:58 -08:00
Jon Robson 37ee126a85 Restore icons to user links dropdown
Follow up to
I62562969a00eb96c83af4519e0e34e4a77ed8b19

Bug: T289619
Change-Id: I88a2d4af97227bb69dc9a11ea7ceac54895d2376
2022-01-18 11:14:44 -08:00
Jon Robson 55bcce3cc0 Don't run Vector hook when menu absent from page
While editing I was seeing a fatal due to this error being null
Err on side of caution and check for existence of menu
Follow up to I8309492881142d47eec4da5cc4aa5c6febbd1b35

Bug: T289619
Bug: T299352
Change-Id: I62562969a00eb96c83af4519e0e34e4a77ed8b19
2022-01-18 02:05:37 +00:00
Func 0bd3a30343 Use field name for the hide-if statement
Field name without 'wp' prefix (which is used as the key in html descriptor) is required.
After I58f9df384df8ecc5ebae8cac68ec2251351bc984, values of fields that are supposed to be disabled would be loaded from default, use a miss-matched field name would be treated as disabled.
It works in UI now, but it's not a good idea to strip the 'wp' prefix on the server-side.

Bug: T298819
Change-Id: If98368ad400986afaef3187867f201044ebf0efb
2022-01-17 03:24:10 +00:00
Jon Robson 591e1d296c [Refactor] simplify watchlist link generation and adopt new icon
Bug: T289619
Change-Id: I8309492881142d47eec4da5cc4aa5c6febbd1b35
2022-01-14 00:26:10 +00:00
Clare Ming f4aafdd263 Update hook to check for new vector skin key.
Bug: T298916
Change-Id: I2946b773b8214cb277be61990df46b109a13748c
2022-01-11 16:44:20 -07: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
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 64ee622c73 Validate the value of VectorWebABTestEnrollment
The generation of JavaScript will throw a RuntimeException
making it obvious when an invalid A/B test has been setup.

Bug: T297662
Change-Id: I75b0e923463bf52f8fc5b5c6b7f9baf586053154
2021-12-14 22:22:26 +00: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 3ed167f318 [storybook] Document button usage and update broken stories
* add stories for buttons and icons using wvui and mwui
* Update user link stories
* Add the vector-menu-dropdown-noicon class to more and
variants menu
* Fixes the language button story and simplifies its code.
* Updates Hooks::makeButtonIcon to Hooks::makeIcon which
reflects the method purpose more. It doesn't output button
classes.

Bug: T289514
Change-Id: Ifd750da0c0181ec56f39ff00d653e88bfc848038
2021-09-07 21:23:33 +00:00
jdlrobson b88f2970f7 Simplify how we generate icons and button classes in Vector
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS

Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
2021-09-03 19:25:31 +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
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
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 4974d7d595 Merge "Run Vector's SkinTemplateNavigation hook last" 2021-07-29 23:42:03 +00: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
Clare Ming 27996c496b Remove duplicate login button from user links user menu.
Bug: T287585
Change-Id: I8f040be7f76911ca05268981b270e2eb44b2ff96
2021-07-28 15:32:25 -06: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
ZabeMath e7fbb01aca Avoid using User::setOption()
User::setOption() is deprecated and should be replaced with UserOptionsManager::setOption()

Bug: T277818
Change-Id: If867b4f97918db581d337a32b33cbca2315a71f6
2021-07-18 13:48:44 +02: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
jdlrobson 3dffee277c Refactor the way we add classes to list items
Append mw-ui-icon classes to list item not list link
This allows us to apply a custom padding separate from the icon.

Note due to a bug in how core handles personal user items,
this will result in the icons temporarily disappearing for several
items until If399dfff9bbdd3b03b2ca702face3ec5164bef11 is resolved.
This is okay given the user menu is currently feature flagged.

Bug: T191021
Change-Id: I766aeb4d1bb36cebd0d80ad43ced940dbea96477
2021-07-01 14:25:46 -07: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
jenkins-bot 91aeef476d Merge "search: Disable query highlight for some languages" 2021-06-30 21:01:01 +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
Nicholas Ray b82ecc2173 Remove SkinVector::ICON_USER_LINK_MAP usage
Per T284594, we are now setting the icon key/value when the relevant
menu item is created (e.g see I95f2a0a01134f2c3dfc22083be66c99de26b530f
) to allow for easier reuse of icons across skins.

Additionally:

* Refactor SkinVector to pull the appropriate login/logout icon from
core instead of setting this in Vector

Bug: T284594
Depends-On: I95f2a0a01134f2c3dfc22083be66c99de26b530f
Depends-On: I6292de50c3940f39b0084a2af4f79af78583720f
Change-Id: I02163645937de4b8a2c4375f29851c29462a582d
2021-06-23 18:33:17 +00:00
Jan Drewniak c26ae0f965 Move "logout" button to bottom of user links menu in modern Vector
For modern Vector, removes the logout link in the user menu and places it
below that menu by appending it to the html-after-portal property of the
skin data.

Also modifies the `.vector-user-menu-login` style to accommodate both the
login and logout button.

bug: T281791
Depends-On: If82a736e37174aaadd0ff07019a1fae3759a9e51
Change-Id: I7675230e09a50eaeab448182329f850ad2689514
2021-06-14 23:40:19 +02:00
bwang 34344adbf5 Remove UserMenu and use Menu template instead
- Adds html-before-portlet to Menu.mustache
- Removes UserMenu.mustache and type def
- Factors out getCreateAccountHTML and getLoginHTML for generating HTML used in Menu
- Scopes UserLink template data under "data-vector-user-links"

Follow up to: 298f945983
Bug: T284584
Change-Id: I91104eb7c4fd12756e770561666f4c9a64da57d6
2021-06-11 09:41:58 -05: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
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
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
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 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
Nicholas Ray 8c76a17e43 Move Wvui Search A/B Logic to FeatureManager
FeatureManager allows the logic to be centralized and allows clients to
ask about its state. For instance, SkinVector will make use of it in
I70277c1082a504fbd5f6023e9873e8071de7e35d.

Also:

* Adds WvuiSearchTreatmentRequirementTest to test A/B logic

WvuiSearchTreatmentRequirement/Test logic are adapted from
I878239a85ffbecb5e78d73aed5568c56dbd7d659.

Bug: T270202
Change-Id: Ia02349a7b41c7caf26fbd728e0be7d47488b97e5
2021-01-26 17:36:37 -07: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
Nicholas Ray 53f49c5c64 Rename wgVectorUseCoreSearch to wgVectorUseWvuiSearch
This allows better compatibility with FeatureManager (e.g. can use
requirements such as REQUIREMENT_LATEST_SKIN_VERSION). It will become
especially useful in I70277c1082a504fbd5f6023e9873e8071de7e35d and when
A/B testing search.

Bug: T270202
Change-Id: I3a063e0b085765ea1db3c4478fb30c11b0942b75
2021-01-22 16:25:46 -07:00
jdlrobson 05dc15954d Allow more control over the max-width rules
Bug: T260091
Change-Id: Ie534b0c34e240c588a4cc330898531f1d12df1f0
2021-01-21 18:51:12 +00:00
James D. Forrester 5ef1ddb733 Use User->isRegistered(), not deprecated isLoggedIn()
Bug: T270450
Change-Id: If385757d64664eba148914063fbbe88f72b66fdc
2020-12-19 16:44:06 +00:00
jenkins-bot a9b47f57fb Merge "Development: Allow us to test search with different API hosts" 2020-12-09 00:14:43 +00:00
Sam Smith aa10668e6d [search] Instrument Vue.js-based search widget
Add event listeners and associated helpers to emit SearchSatisfaction
events via the `mediawiki.searchSuggest` protocol.

Bug: T257698
Change-Id: Ica040cd18d6c4bf8a1b1f607bb4647c7e8eb7108
2020-12-08 23:41:19 +00:00
jdlrobson dce24c9784 Development: Allow us to test search with different API hosts
By default the API uses location.host as the host, however during
development it is useful to test against production wikis

For example to test against English Wikipedia:
$wgVectorSearchHost = 'en.wikipedia.org';

Note: Links when clicked will not take the user to the target page, and
instead will take the user to the search results page with a link to
create the page.

The following config can be used to workaround that page:
$wgDisableTextSearch = true;
$wgSearchForwardUrl = "/w/index.php?title=$1";

Change-Id: I5fbac7f54844d7a9d6976007bc0d0ff9938b9f2b
2020-12-08 15:22:45 -08:00
jdlrobson a52da8ddaa Cleanup: Drop unused body feature classes
These are no longer referenced in the code and artifacts of a time
when these were feature flagged.

Change-Id: Ia850ac9fb92033d82a333836ba7ff32312f042a7
2020-12-08 13:29:06 -08:00
Nicholas Ray e0c47dc462 Add Wvui Config to show/hide thumbnails and descriptions
Uses ResourceLoader's virtual config feature to get the config and pass
it down to Wvui's typeahead search component.

Disclaimer: I'm a typescript noob and am not sure if the
config.json.d.ts is correct although it seems to make tsc happy.

Bug: T260167
Change-Id: I2eced14c7df3b795b4de0e5149c2ca9fd598c7be
2020-12-08 13:28:42 -08:00
Jan Drewniak bd83398659 Integrate WVUI search into Vector
Creates a new skins.vector.search module that
replaces the searchSuggest module from MediaWiki core.

This module creates a new Vue app using the WVUI
search widget for the new search experience.

The legacy search input form is still retains on pageload,
and the new search kicks on search input focus.

In order to manage that transition, the legacy search
input is styled to resemble the new WVUI input, and the
new input is manually focused after the component mounts.

Vue is also added as a dev-dependency to help with
type-checking.

Other changes:
* the entry in skin.json is reordered alphabetically after
skins.vector.js

Bug: T264355
Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
2020-12-08 13:27:12 -08:00
jdlrobson eda19bd6e4 Remove SearchInHeader requirement/feature
Styles will be cleaned up further in a follow up.

Bug: T258116
Change-Id: I878239a85ffbecb5e78d73aed5568c56dbd7d659
2020-10-28 20:05:28 +00:00
jenkins-bot 3bc308039c Merge "Make max-width the default for modern Vector" 2020-09-14 20:55:35 +00:00
jdlrobson c8642b2fbe Use feature management for search in header
This will allow us to add the A/B testing requirement for logged in
users.

In preparation for the new A/B test requirement, a custom requirement
is added as the feature management system does not
support OR operations and the desired effect is the case where:

* the SearchInHeader feature flag has been enabled
* OR the SearchInHeaderABTest feature flag has been enabled and the user is bucketed

Bug: T259250
Change-Id: If948603bd598e1b5597345f4268736417f4c3a24
2020-09-13 23:00:16 +00:00
jdlrobson 905ad68bc2 Make max-width the default for modern Vector
Drop max width feature flag.
Max-width will continue to not apply on special pages.

This saves us development effort by not needing to worry about
the case where the flag is not enabled. This flag is not false
in any production wikis.

Change-Id: I7ace4046e6b93ce63dd804da32e576a709485bfb
2020-09-10 20:14:38 +00:00
Sam Smith 4449235516 [Special:Preferences] [PHP] Add HTMLSkinVersionField form field
I177dad88 introduced the skin version user preference field and
associated configuration values. Per T242381, the field is to presented
as a checkbox with the implied storage type of a boolean where a string
is needed. A PreferencesFormPreSave hook handler was added to adapt
values of either data type to the other.  While this was a neat solution
to a minor nit, the adapter's implementation is incompatible with the
GlobalPreferences extension as the PreferencesFormPreSave hook isn't run
whilst saving global preferences.

Rather than adding an equivalent hook to the GlobalPreferences
extension, create a custom field based on a checkbox with the adapter
included. This allows us to:

- Separate the business logic concerned with preserving the user's
  VectorSkinVersion preference if they've simply disabled Vector from
  the adapter

- Simplify the adapter's implementation

- Forego adding hooks to the GlobalPreferences codebase

Additional changes:

- Replace repeated string literals with equivalent constants in
  tests/phpunit/integration/VectorHooksTest.php

Bug: T258493
Change-Id: I628435a4ad676f55534191b8c10147be28be5d73
2020-08-31 12:04:12 -07:00
jdlrobson e7df44a66d Favor SkinTemplateNavigation::Universal
This hook is run on every page. The SkinTemplateNavigation hook
counter intutively is run only on pages which can exist. I think
it's clearer if we only use SkinTemplateNavigation::Universal hook
and keep the logic for when it runs inside our own code.

Bug: T255319
Change-Id: I0835074a6cadf6e9bdcc45299de37dd9328bf9b2
2020-08-20 16:01:27 +00:00
Sam Smith b46751d4ed hooks: Don't use SkinVersionLookup directly
The feature manager abstracts away how a feature is enabled from the
consumer of that feature. Accordingly, replace direct instantiation of
SkinVersionLookup with usage of the Vector.FeatureManager service.

Supporting changes:

- Add Vector\VectorServices, a simple wrapper around
  MediaWiki\MediaWikiServices that allows us to both document and
  type-hint services specific to Vector

- Add Vector\Hooks::isSkinVersionLegacy to minimise repetition

Additional changes:

- Make the MakeGlobalVariablesScript hook handler return early if the
  user isn't using the Vector skin like the other hook handlers

Bug: T256100
Change-Id: I93b5ef39802323c7ac658af8fa7cc312fff68aa7
2020-08-18 11:40:48 +01:00
Sam Smith 8d98ba35da hooks: Document CSS classes used elsewhere
Bug: T256100
Change-Id: I3fef99e5b94ca4dc221282f28c7608f84d8fb746
2020-08-17 15:27:32 -07:00