Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.
Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
Follow up to 5dee570cb2.
It seems the mount works slightly different in that it creates a div,
appends by the App element to the element you give it, after
clearing all it's child nodes.
The previous behaviour was that the old element was /replaced/
by the App element.
Bug: T296889
Change-Id: Iee7493c032f4de5389207bba288a1a70e4cd14f3
Move A/B test code to AB.js
Consolidate the show/hide code spread across scrollObserver
and stickyHeader by adding a show and hide function.
This is needed to fix T296680
Change-Id: Ia2e0c50278df0dfc1600610f281be20f4cc755c2
- Permits logging for scroll events without sticky header.
- Update function name to be more precise.
Bug: T292586
Change-Id: I441b4bf81bc4a36a03f0f1c215d86b01dce2911d
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
- 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
This reverts commit da832cc53d.
Reason for revert: Bartosz reports this made
things worse, so probably best to go with
the VisualEditor selector approach.
Change-Id: Ifcb18c7a388986df44424f9a58be35314c3d3e2c
- 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
Returning to `a.external` over only `.external` as it's used widely
within MediaWiki and skins and it needs to kick in in appropriate
places.
`.external` is besides one false positive only for anchor elements,
nonetheless more specific is simpler and more fail-safe than the
other way round.
Change-Id: I3e2fec26d1f835b11f9a66fdf4ba7faeca12d9d2
Port the initialization code for the Vue search to use Vue.createMwApp()
instead of new Vue( ... ). The former mimicks Vue 3's API for mounting
components.
Without this change, this code breaks in Vue 3 (even in compatibility
mode) because the compat support for new Vue(...) is imperfect. By the
time renderFn is called, the searchForm container has already been
emptied by Vue's internal mounting code.
Instead, inspect searchForm and generate the prop list before mounting,
then pass the props to createMwApp() and mount the component.
Bug: T294476
Depends-On: I1fcdcf7bf87f5af2deb9763a231f2c360ea45b23
Change-Id: I5b6e66051d97e75f8f03b8258894daba22525797
stickyHeader.js, a file in the "skins.vector.es6" module, clones the
user menu. Because of this, it must initialize before dropdownMenu.js, a
file in the "skins.vector.js" module, in order for dropdownMenu.js to
bind the correct checkboxHack event listeners to the user menu in the
sticky header.
Therefore, change the es6 module to export its main method. The
skins.vector.js module can then use mw.loader.using to ensure the
skins.vector.es6 module initialization happens first in browsers that
support es6. Browsers that don't support es6 will continue to initialize
the skins.vector.js module.
Bug: T291096
Change-Id: I1bb6f2da9703ed2679eacfdb42b9818efe614ab9
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
Current expected behaviour: the editor experience will
load and the user will be thrown to the top of the page.
Bug: T293158
Change-Id: I3585616c2244a6b91ef5f160beb1cf51af3599aa
- Can now use const/let
- No need for feature detection for things like fetch and closest
as we can assume they exist if ES6 support is available
Change-Id: I85b01add13fd74e1514119498815403e42a09af0
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
- 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
- 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
One of the goals with desktop improvements is to not make any
visible changes to the original Vector skin.
In T289163 we wrapped links in a span, and moved the font-size
declaration to the span. The padding of the link is now applying
with font-size 16px.
Bug: T289163
Change-Id: Ifbf6f7a4c5cb6fda6389b33fc9962bdb03dd1f43
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
* 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
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button
Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
Given we don't want to change the color in modern Vector we must rely on this
ugly hack to change the link color.
This can be revisited when Vector has been split into two skins
which can use 'mediawiki.skin.variables.less'.
Bug: T288739
Change-Id: I17401f897dce4e6adca9d05008899d28ff02517c
The user menu dropdown was announcing to screenreaders as "Personal tools expanded collapsed". This is due to the core icon classes causing the spans to be display: block. This patch adds !important to the relevant display styles to ensure the statuses are always read out correctly
Bug: T253650
Change-Id: I0b51af5da98af1bd0c0029db54420e395242842d
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
This makes the code more readable and allows us to apply
the suffixing in other places in the sticky header.
Change-Id: I44008c18a3faea2089bc93eb5ce7fea1cad1aaec
- 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
We have many styles related to the layout and visibility of search that
are only useful in the context of the main header. Since many of these
elements have classes that will also be in the sticky header, we should
scope these rules to the main header so that we avoid an uphill battle
of styles trying to override eachother.
Additional changes:
* We previously had a mix of #p-search and .vector-search-box selectors
for the same element in the CSS. Header.less now only uses
.vector-searchbox to avoid specificity wars.
* Removed nearly all of the #p-search rules previously found on L147 -
L167 in screen.less after observing nothing relatively bad happening
when they were removed.
Bug: T289724
Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
Vector should use the variables defined in core for red links
Bug: T288739
Depends-On: I799b46664f01c5631fb9d1ae4f5c43caeeaac818
Change-Id: Idcf5a54d76a1343d3407821b8a5b8d8ece8af9d0
- Show sticky header after bottom of first h1.
- Hide sticky header before bottom of first h1.
- Add media query for reduce motion preference.
Bug: T290101
Change-Id: I2b1ecd31ac360a1ef5bf2f016978d6e0665a316c
