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
