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
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
In preparation for I30c670e3f195f77a27715c6b494a3088b7a55712, refactor
the search component expand behavior so that it can accomodate the new
changes in WVUI while maintaining backwards compatibility with the
status quo.
Additionally, pass/enable the `auto-expand-width` prop to the main
header's search. This will be inert until the new changes in WVUI have
landed.
Bug: T297531
Change-Id: Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
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
The existence of this code means we can't safely use this service
inside the skin's constructor.
We no longer need this, so that's fine.
Change-Id: Iffd82c00030c4cf1238a931dc971ffb4686d2620
The H1 is available with the correct attributes in core now, so
we can use that instead of our own markup. This also means Vector
will benefit from updates to the heading in core such as main page
special handling.
Bug: T297728
Change-Id: I4d10370678fad6455d73994bf340891760543b71
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
In Commons languages appear in sidebar.
The language button shouldn't show in the sticky header on these wikis
Bug: T297362
Change-Id: I17d283a7c0ad20bdcaf39b234a7fe766880ab28a
Follow up to 9dcfc1f
This simplifies the template by removing the need for the html-class.
The font-size can be provided to the entire content area meaning we don't
need the link-only class
Change-Id: Id5c49358f6ec007b3205ee390cf68334a1e56de5
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
Remove using of User:getOption since this method
will be hard-deprecated. Now it is soft-deprecated.
Bug: T296083
Change-Id: I3194a9c1c5c70592f88bc4dbedc78846d1141768
After I628435a4a, we were asserting a boolean was given because we're
extending HTMLFormField which requires a boolean value. This was safe
because GlobalPrefs would provide a boolean, but that changed with
I594f6297.
We could rework GlobalPrefs once again to ensure only a boolean is
passed in, but since HTMLLegacySkinVersionField already has special
handling around the data types, it seems to make sense to contain the
type transformation in this class.
Simply removing the Assertion is enough to prevent T296068, however
depending on when the global preference was saved (such as since MW
1.38.0-wmf.9 but before wmf.10), it's possible either a bool or a string
was saved, hence we check for both to ensure correct display.
Bug: T296068
Change-Id: If10b948617d2bb8346475f207fe425fb768cb987
Since a margin was added to adjacent sibling spans of icons (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/736919), Vector icon buttons have had too much spacing. This patch removes the extra spacing defined in Vector CSS and the accidental whitespace that was included in the ULS buttons..
Change-Id: I308d1941c5f82cb144c2a9d233fbf44c730413a7
- 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
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
This class is already being added via SkinVector::decoratePortletClass
so the one in the Menu template can be removed.
Bug: T291096
Change-Id: Icb9fa7a1e583ad4ef0138c5bd069aa68598c9b6e
- 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
- Adds aria-hidden="true" to the sticky header
- Adds tabindex="-1" support to Button.mustache and update sticky header button data
- Add tabindex to cloned user menu
Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)
Known limitations:
* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.
[1] https://caniuse.com/mdn-css_properties_scroll-padding-top
Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
When looking at raw html it always looks like something is missing when
there are trailing or leading spaces on attributes.
Just move the space into the conditions and it looks better.
Change-Id: I2a8d3246c43b8345eb819eae5887a39f68cfbdc0
* In legacy Vector, menu items are now wrapped with spans. This
consistency in HTML is required for splitting Vector into two
different skins.
* Vector's portlet link items now support icons
Bug: T289163
Bug: T291722
Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5
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
This is going to be forbidden going forward.
The legacy lookup and overrides are deferred
until they are actually needed to keep the constructor
cheap
Bug: T289163
Change-Id: Ib23360e3439abc828404c1de8e0906915ee7d8b6
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button
Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.
In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.
* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).
* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.
* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.
* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.
Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
- Remove unused button, data from sticky header.
- Simplify template to leave sticky user menu placeholder.
- Update js to clone user menu with new ids.
- Include gadget-injected items in sticky user menu.
Bug: T289816
Change-Id: I23fde537efc2a66a2df22cd2633fbab034b73eb6
* Moves screen variables relating to Header to Header
* Adds a Header storybook entry
* Moves data-logo from Logo template to Header.mustache
* Updates UserLinks to use USER_LINK_PARTIALS
* Renames confusing SearchBox story names
* Updates package.json to use a static folder.
* Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles
since deploys there come earlier
* Removes usages of ID selectors
Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector
Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
- Rework Icon template into Button template to support all button variants
- Update ULS helper functions in SkinVector
- Update StickyHeader template to use the new Button template
- Update Storybook
Bug: T289815
Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362
Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
* 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
- 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
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.
Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
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
- 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
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
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
- Add conditional to check for 'createaccount' permissions based on config.
- Update relevant template to show/hide create account markup.
Note that this solution excludes the use case of extensions using core hooks
to disable account creation. See https://phabricator.wikimedia.org/T288428#7303233.
Bug: T288428
Change-Id: I89852207ee42f5ddd07e5dd6141461c6bfbcd5ac
- 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
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
Register a temporary requirement that is configured the same as the
"LanguageInHeader" requirement. Pass that requirement a custom
configuration, in which the language treatment A/B test is always
enabled. Increment the bucket corresponding to whether the requirement
is met.
Supporting changes:
* Add a version to the base bucket name and set it to 2
Bug: T286932
Change-Id: Ic639687237074a13e7feb3c9084a35db0e5cb902
* 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
Caused by whitespace in HTML
Addresses topic 2 from Alex's feedback in:
T191021#7228591
Bug: T191021
Change-Id: I32de25d4f4927c2ea8059b972a55b79a94691e76
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.
This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.
Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
User::setOption() is deprecated and should be replaced with UserOptionsManager::setOption()
Bug: T277818
Change-Id: If867b4f97918db581d337a32b33cbca2315a71f6
- 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
- Add new OverridableConfigRequirement class.
- Add query parameter constant for user links.
- Update Feature Manager with new requirements.
- Use new class for LanguageInHeader requirement.
- Remove LanguageInHeaderTreatmentRequirement class and test.
- Add unit test to cover user links and language in header.
Bug: T285855
Change-Id: I56b729a9e245ed2ddc85625c0be39f5c26320ac4
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
Additional change: A bundlesize increase is required given
recent developments in the user menu.
Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
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
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
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
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
- 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
- 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
- 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
Merge UserMenu into UserLinks for legacy and modern
Add a story for the UserLinks menu
Fixes: rendering of Skin (legacy) personal tools (the user icon
no longer overlaps)
Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
Have a single template for the UserLinks component, with a single
element wrapping all its subcomponents as discussed.
Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
This follows up I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
In that change, a new class for Vector specific styles should have
been added and the existing CSS referenced. I could have sworn I did
this, but obviously not (perhaps a git rebase or unstage change problem).
We did it for the other skins e.g. Monobook (I90d85c21f4a62e6697f24e3ce388445a0a53c2b0)
but evidently not Vector.
We also have to worry about cached HTML now, the #bodyContent is
the most reliable selector to use for before and after
I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
Additional:
Remove the mixin-clearfix rule on bodyContent - this is now
redundant with the changes in T279388 and should have been
removed.
Bug: T283206
Change-Id: I15103cea72c793589a03ab1a3e7f3b377acb287f
Since we have feature flagged the new user menu feature, it is
imperative we load both sets of styles until the feature has
shipped. This allows us to switch seamlessly between the two
without worrying about cached HTML being served with updated CSS.
To do this, we add a new class to both user menu's distinguishing
the legacy version from the modern version. The styles are then
scoped to these new selectors.
This also fixes some regressions with the legacy user menu in
modern Vector when wgVectorConsolidateUserLinks is disabled.
Notes:
* No caching selector is needed for #pt-userpage given it can only
ever be output for logged in users.
* ID selectors in general are bad, so scoping to mw-portlet-personal-user-menu-legacy
isolates the legacy component allowing it to be rendered alongside the modern UserMenu
Bug: T276561
Change-Id: I068c5233bb25a7b141e66a6726b5761841f83eb2
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
