Commit graph

64 commits

Author SHA1 Message Date
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
Sam Smith 75ade04dfc hooks: Don't send config variables unnecessarily
The wgVectorDisableSidebarPersistence config variable is only required
when the user is logged in. Don't send it to the client when the user is
logged out.

Bug: T255727
Change-Id: I27eda8c18b438ef3251b2c07a0ed8b0cef6cae64
2020-08-13 15:37:45 +01:00
jdlrobson 53d9452795 Move the personal tools and search into header
To support roll out and avoid issues with cached HTML the new
styles for the new search feature are restricted to HTML where
the body tag has `skin-vector-search-header` class.

For legacy mode, we introduce a new class
`skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()`
selector to ensure the styles ship during the phase where cached
HTML can be served. While this will create some display issues in
browsers that do not support CSS3 selectors, all grade A browsers in
our compatability matrix support this.

Bug: T249363
Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-08-11 23:36:01 +00:00
jenkins-bot 05a82f6069 Merge "Vector manages search functionality and provides config flag" 2020-08-04 17:53:05 +00:00
jdlrobson 580a0aa537 Document stability of undocumented classes
Bug: T248399
Change-Id: I9445d5c0753f7272c3d22d66b8824f8a95b86d41
2020-08-03 17:17:53 -07:00