Reverts the border color of the page title introduced in
I5d807f09bfbbceaded756daa78dbb023efcc91dc
Bug: T310533
Change-Id: I877f91bcd4c0915cc495b5237a53bda6ad971497
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.
Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.
Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
This will also apply to the grid layout so this seems a more
appropriate place, given the class relates to search.
Bug: T303484
Change-Id: Ib5b57fd948ecb5eefbf1d66e0e71045aed6e3102
When the vector-sticky-header-enabled class is removed from the body
it means the feature is not enabled, it doesn't mean the sticky header
should be invisible.
Call the hide method instead, and move it out of the function given
its a side effect
Bug: T308343
Change-Id: I4ecd6524146f203af926847812e20275c9573cab
Having a clean slate to work from will help with the development of
introducing the grid
Bug: T303484
Change-Id: I8fb9a9d958e4e73e8bfbf4b797cee1353c915db5
Adds behaviour for conditionally adding the edit button
to the sticky-header based on A/B test bucketing.
This behaviour depends on having the `$wgVectorStickyHeaderEdit` config
set to true for logged-in users:
$wgVectorStickyHeaderEdit = [
"logged_in" => true,
"logged_out" => false
];
as well as an AB test configured with the following buckets:
$wgVectorWebABTestEnrollment = [
'name' => 'vector.sticky_header_edit',
'enabled' => true,
'buckets' => [
'unsampled' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonControl' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonTreatment' => [
'samplingRate' => 1
]
]
];
With that config, this change hides the sticky header for all users
except those in the stickyHeaderEditButtonTreatment bucket.
NOTE: This patch address the sticky header being visible on incorrect
namespaces when the AB test is enabled and the revert of
42b808738a.
Bug: T299959
Bug: T309370
Change-Id: I3effbb3e5f0bb1c8663255936458e3849511dfca
Moves the page's title above the article toolbar (i.e. tabs) based
on the VectorTitleAboveTabs config option. This feature remains
off by default, but can be accessed via the query parameter `vectortitleabovetabs`.
Removes the Navigation.mustache template since it's just a wrapper
for the sidebar + tabs elements, which, with this change, are placed
in different locations in the DOM and don't need a common parent element.
Bug: T303549
Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.
Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16
This reverts commit 42b808738a.
Reason for revert: The sticky header is now showing up in unexpected
places e.g. special pages.
Bug: T299959
Bug: T309370
Change-Id: Ie7f224d84440279ba28e031e13d05984c81a3ad4
Adds behaviour for conditionally adding the edit button
to the sticky-header based on A/B test bucketing.
This behaviour depends on having the `$wgVectorStickyHeaderEdit` config
set to true for logged-in users:
$wgVectorStickyHeaderEdit = [
"logged_in" => true,
"logged_out" => false
];
as well as an AB test configured with the following buckets:
$wgVectorWebABTestEnrollment = [
'name' => 'vector.sticky_header_edit',
'enabled' => true,
'buckets' => [
'unsampled' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonControl' => [
'samplingRate' => 0
],
'stickyHeaderEditButtonTreatment' => [
'samplingRate' => 1
]
]
];
With that config, this change hides the sticky header for all users
except those in the stickyHeaderEditButtonTreatment bucket.
Bug: T299959
Change-Id: If252956bc530d8ce54eeda61f42a93ffa48255cb
The new accessibility rules default to on, so no need to list
it in skin.json but we need to remove the now duplicated style.
Depends-On: Ie1c6c1ba7263c232d874263fdae7427a5ec489f6
Change-Id: I92f622b92adb8735c38a4ebe56eaf5bfc4ae37bf
This reverts commit bf4d843d97.
Reason for revert: These variables were intended as local to layout.
Only layout stylesheet should have access to layout variables. The
risk of having this in the global variables file is that non-layout
rules can be added to components.
Change-Id: I91fd01ed5333555052c243e25d37cd30d6d9bef6
Replacing Less mixin calls of `.transform()`, deprecated
since MW 1.37, with CSS property.
Bug: T308360
Change-Id: Ic965193782a447d34eac4bd19816a7b753c36d44
This makes it accessible elsewhere (such as within WikiEditor; see
the dependent patch) without having to include
all of screen.less.
Bug: T307725
Change-Id: I3fda9886c27fe0b78cf5bd5647d7e497a3aaba0e
Replacing Less mixin calls of `.transition()`, deprecated
since MW 1.37, with CSS property, but constituent properties.
This has been an outcome of recent discussions around design tokens,
which will be simpler to define, more modular, and better scoped. See
T304443 for further information.
Also clarifying, aligning comments.
Bug: T308351
Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
The checkbox hack adds complexity to our layout rules as we must
describe elements based on their siblings. To make these long selectors
easier to reason with and reduce the risk of rebase conflicts as these
shift I'd like to make these variables.
Change-Id: Ie5ff163d0449778a7d343870187da7703d20b754
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled
Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
Creates two new templates:
- ContentHeader.mustache containing the site header and indicators or languages
- ContentSubheader.mustache containing site tagline and conditionally indicators
This changes DOM order.
- It adds the `<header class="mw-body-header">` to all pages,
including special pages & edit pages, not just pages with the language button.
- It moves the #siteSub element (tagline) outside of the
`<div id="bodyContent">` element.
- Adds a clearfix (or margin-collapse fix) to `.vector-body`.
This changes causes a minor difference (perhaps improvement) where on special pages,
the beginning of the content, starting with the `mw-specialpage-summary` element,
was positioned closer to the page title than on regular pages.
The clearfix ensures that the height between the page title and content is consistent across all pages.
Bug: T303549
Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414
Structural change to prepare for CSS grid usage.
ArticleToolbar component is defined and self contained with
all layout rules relating to toolbar
UI regression testing suite shows 6 failures due to pixel alignment
changes to tabs. When comparing to the current release, you should
see 34 failures before /and/ after this change.
Notable changes:
- #mw-head element is no longer present in modern Vector skin
to allow us to distinguish between cached HTML and modern HTML
Bug: T303484
Change-Id: Ia261ea53931217f32a21b33c2ab3d4ec64efa48a
Auto merge commit for the 'Adjust table of contents margins at 1000-1200 breakpoint' patch incorrectly deleted a line from Sidebar.less. I need that deletion in 789210, because it will be backported later today
https://phabricator.wikimedia.org/F35103224
Change-Id: I0404c02d71160ec4537e49fc77489a8a5027a183
This is a follow up to I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
On Special:Userlogin a "more" menu appears that's visible but empty
that should not
Bug: T306229
Change-Id: I9384b3015de9991db41bde8ccc8f404ac533f198
Previously, we relied on setting pointer-events:none on all child
elements of ToC links.
This propagated the click event up to the link itself in Javascript
and allowed us check if an element with the class `.sidebar-toc-link`
was clicked.
Unfortunately as of Chromium 101 this approach causes the entire link
in the sidebar to be unclickable.
Instead, this patch checks if the ToC link or any of it's children
have been clicked (using the less efficient `Element.closest()` ).
Bug: T307271
Change-Id: I2264b7862f6e1ef50c5c722daee81acc39eea54e
* 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
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
When browser preference for reduced motion is enabled:
* Disables bolding of table of contents
* Disables sticky header transition
Bug: T254399
Change-Id: I8ef9e59b258fed977ce370da352b1924832d842b
When the AB test is enabled both the old and new TOC's are in the page's
html but only one is visible. The `.vector-toc-visible` class is also
present and will try to apply a left margin even if the page has been
bucketed into the control or unsampled group.
This patch takes the simplest approach to fix this problem with CSS only
especially given the transient nature of this code (will be removed when
AB test is finished):
* When the page bucketed in the control or unsampled group, prevent
.vector-toc-visible from applying a left-margin through the use of
`:not` selectors.
Additionally:
* Remove unnecessary `margin-left` rule that used to apply to the
mw-workspace-container. Due to the work done in
I2f95d5938674bb8263b6203c5f6a469762bf0cc2, the workspace container
will now always have a computed left margin of zero because it is the
same width as the page container.
Bug: T306366
Change-Id: Icd9572353bb5e29cfda91b095ceb8c2e652864e7
Per T305069#7832390, left edge of searchbox input should line up with
the left edge of the main content area.
Bug: T305069
Change-Id: I737c3cac09ae18c598164b232b6461f72451b3e3
Looks like the selector for `vector-search-box-show-thumbnail` needs to
be adjusted as it is on the same element as the `vector-search-box-vue`
class.
Change-Id: Ief1dadddc082add65ae4bf29c951f2ddefb15d5b
- If TOC A/B test is enabled, page is in treatment group, and
viewport is below tablet, force legacy TOC to render.
- If TOC A/B test is disabled and new TOC feature is enabled,
and viewport is below tablet, neither TOC should render.
Bug: T300975
Change-Id: Ib30c3473eb47d6ac60924f40ccd0e42d29625407
* 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
Headings can also appear in templates inside divs and subtitles.
These do not
get rendered in the table of contents and should not be tracked.
This also excludes headings from the legacy table of contents which
may be in the article during the A/B test
See English Wikipedia examples [[Portal:Biography]] and [[Main page]]
Change-Id: I4ca8933a0e7736157f80e5e68077b153e5bfc81d
- Remove isStickyHeaderAllowed() from stickyHeader.js, move to main.js
- Rename variables in stickyHeader.js to be consistent
Bug: T301429
Change-Id: Ib445a19cbfab52a008b749ea63cef178d6288e6a
- Leverage scrollObserver to use for TOC scroll events.
- Add new hooks to target legacy TOC intersection.
- See corresponding changes (not strict dependency) in related
WME patch 773628 for capturing scroll events from Vector TOC:
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikimediaEvents/+/773628
- Dependency on https://github.com/wikimedia/typescript-types/pull/30
which updates mwHookInstance interface with fire property to prevent
TS error on fire method of mw.hook in scrollObserver.
Bug: T303297
Change-Id: I5c2dd5f3a25ffcb0ed03b76ae28e65eb18ad8d33
- Remove some @ts-ignore statements.
- Update invocation of mw.util.debounce to have correct order of
parameters.
Bug: T303297
Change-Id: I4bb795fbd4d026c21c66e9a3d161afff4d7ef09f
* Eliminates AB.js dependency on sticky header
* Code coverage has been raised to 100%
* Instead of importing ABTestConfig, these props are now passed into the
function along with a token.
* WikimediaEvents hook is now fired when experiment is initialized. The
experiment should not be initialized if it is not enabled.
* Removes several methods (e.g. initAB, getEnabledExperiment) due to the
preceeding changes.
* Adds `isInSample` and `isInTreatmentBucket` methods so that the client
has less work.
Treatment buckets now follow a naming convention so that the client can
do less work querying if the subject is part of the treatment:
* Treatment buckets should have the case-insensitive `treatment`
substring somewhere in their name (e.g. 'treatment',
'stickyHeaderTreatment', 'sticky-header-treatment' )
Bug: T302046
Change-Id: I4febec42b4c471b2f2ef02be2e334bd6d2c31eec
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs
Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
Removed class "vector-menu-checkbox-expanded" and "vector-menu-checkbox-collapsed" in
includes/templates/Menu.mustache and deleted the necessary lines in
resources/common/components/MenuDropdown.less, tests/jest/stickyHeader.test.js,
includes/templates/skin.mustache, skin.json, i18n/en.json and i18n/qqq.json.
Bug: T299173
Change-Id: Ibf8a08e6e5d1a6c607abf170c030a0285e84ad74
This forms a stacking context inside mw-page-container. It allows
overlays appended to the body tag to position themselves over the
Vector interface.
Bug: T301452
Change-Id: Ie187fde43dd8e7f108388c848438545c75d19b09
Can only be merged after I8c0924f6de28b15602969de873a843b4cd69548b
has been in production for 3 days
Bug: T300875
Change-Id: I924a69b37214a34f989f49f0425c701650928e17
Replaced h3 tag in includes/templates/Menu.mustache with label tag.
Replaced h3 elements in .storybook/icons.less, resources/common/components/Menu.less,
resources/common/components/MenuDropdown.less, resources/common/components/MenuPortal.less,
resources/common/components/MenuTabs.less,resources/skins.vector.styles.legacy/components/MenuDropdown.less,
resources/skins.vector.styles/components/UserLinks.less, resources/skins.vector.styles.legacy/components/Sidebar.less
and resources/skins.vector.styles.legacy/layouts/screen.less
by vector-menu-heading.
Bug: T290280
Change-Id: I6eee7d6bc47c74a62166d4579fd4d3da3dc88e88
Updating 'svgo' to v2.8.0 and newest Wikimedia SVG guidelines –
mainly around new whitespace features of SVGO.
Change-Id: Ie48f5e78b3f9b6e7f01b65618c1d6089fa4a2f54
This mostly reverts commit f5ad6fe78a but
keeps the SectionObserverProps typedef.
Instead, we will use @module introduced in
Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e.
Change-Id: I7aff49a3d922889cc99bc4313a6cb416410a7a0d
Server render the table of contents in a collapsed state when the total
number of headings is equal or greater than the value of
`$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of
contents will be server rendered in its "expanded" state.
In addition:
* Revise table of contents tests to call one `assertion` per element so
that it is easier to see the exact element that may fail an assertion.
* Revise table of contents tests to call a mount function that can merge
props to allow for a more flexible set of tests.
* Revise table of contents tests by wrapping a `describe` around tests
that expect the same prop state.
* Adds typedef for table of sections props
Bug: T300973
Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6
Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
From what I could tell, most instances of `toHTMLElement` or @ts-ignore could be fixed by using typeguards or using Element over HTMLElement.
Element is a looser typing than HTMLElement, but given `querySelector` returns `Element|null` and the fact that we were already inconsistently using both Element and HTMLElement in this file, I feel it was a worthwhile tradeoff
Change-Id: I3512a98fa67c13a4383b9497e8588960259b5b68
This uses the sticky header's `.mw-sticky-header-element` utility class
to conditionally offset the table of contents to the height of the
sticky header only when the sticky header is enabled.
Bug: T300077
Change-Id: Ibad97a11e708ba19acf27ca82320f7c3e5f80447
Collapses sub-sections in the new table of contents by default
(except for non-js and reduced-motion users) and expands the
sections when the top-level section link has been clicked.
Refactors the `activateSection` TableOfContents methods into separate
`activateSection` and `deactivateSection` functions.
Adds `expandSection` and `collapseSection` methods.
Adds triangle icon as a visual expand/collapsed indicator
next to all ToC section headings and are hidden via CSS based on
whether or not the section contains subsections.
Adds test for tableOfContents.
Bug: T299361
Change-Id: I36b3ae7f9f633877683bc17a9444c970d7fa7293
Move jsdoc comment closer to the methods they are describing. This also
enables better typehint support.
I36b3ae7f9f633877683bc17a9444c970d7fa7293 will handle revising tableOfContents.js.
Change-Id: Ifcac7cfd88cd3f1c0405611c880a0d101d2aed3b
Given our use of constants for tracking classes this eslint rule
is more an annoyance than helpful.
Change-Id: I37570e3e851997d058f2d93777990dddb3d04089
Rather than test for fetch, limit the code to ES6 browsers.
Depends-On: I96a03796628a74ace93579d45a582711400c09c1
Change-Id: I4ca10182491118e61e155f99c713d4cb1b4fc7f0
Given that these styles deal with the layout of the sidebar button in
the main header and don't make sense in any other context (at least
currently), I think they belong in Header.less.
Change-Id: I191b9a404c82c5a1a80f97d98fa54535fdd53944
We want the link that the user has clicked inside the TOC to be "active"
(e.g. bolded) regardless of whether the browser's scroll position
corresponds to that section. Therefore, we need to temporarily ignore
section observer until the browser has finished scrolling to the section
(if needed).
However, because the scroll event happens asyncronously after the user
clicks on a link and may not even happen at all (e.g. the user has
scrolled all the way to the bottom and clicks a section that is already
in the viewport), determining when we should resume section observer is
a bit tricky.
Because a scroll event may not even be triggered after clicking the
link, we instead allow the browser to perform a maximum number of
repaints before resuming sectionObserver. Per T297614#7687656, Firefox
wasn't consistently activating the table of contents section that the
user clicked even after waiting 2 frames. After further investigation,
it sometimes waits up to 3 frames before painting the new scroll
position so we have that as the limit.
Bug: T297614
Change-Id: If3632529f58c15348a7200258f4f5999ea0dadc4
- Make page title width fill container.
- Remove page title fadeout, replace with ellipsis.
- Prevent language button contents from wrapping.
Bug: T298885
Bug: T300036
Bug: T298887
Change-Id: I6b09f89ed89a9da7406cdf8b3a00698a9dd66d10
Other page elements outside of Vector should be notified that the
content area is changing size, in case they need to adjust the size of
fixed elements. Triggering window.resize should allow them to adapt
without needing to write Vector-specific code.
A specific case of this: the floating edit toolbar when VisualEditor is
open would be incorrectly sized / aligned if you toggled the sidebar in
edit mode.
Bug: T300826
Change-Id: I79e0fc67b5e35c2fb975a0a3048184de0d63813e
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
Html::noticeBox doesn't output any deprecated classes so
will not conflict with any user gadgets now.
Bug: T299625
Change-Id: Ic9aef5c8ff3fae6a79c7cf82cc3c97714cf40b3d
This commits sets up the Table of Contents to bold the active section
when the section is scrolled.
Unfortunately, because our content does not have actual sections but
instead has a flat list of headings and paragraphs, we can't use
IntersectionObserver in the conventional way as it is optimized to find
intersections of elements that are *within* the viewport and the
callback will not reliably fire during certain scenarios (e.g. with fast
scrolling or when the headings are not currently within the viewport).
Furthermore, iterating through a list of elements and calling
`getBoundingClientRect()` can be expensive and can also cause
significant forced synchronous layouts that block the main thread.
The best compromise in terms of performance and function that I've found
is to use a combination of a throttled scroll event listener and
IntersectionObserver's ability to asyncronously find the
boundingClientRect of all elements off the main thread when `.observe`
is called which is the approach this patch takes. Although this is an
unorthodox way to use IntersectionObserver, performance profiles
recorded while holding the "down" arrow and scrolling for 10 seconds
with a 6x CPU throttle are comparable between master and this patch:
master: https://phabricator.wikimedia.org/F34930737
this patch: https://phabricator.wikimedia.org/F34930738
Bug: T297614
Change-Id: I4077d86a1786cc1f4a7d85b20b7cf402960940e7
Vector's tsc version is currently reporting errors that the latest
typescript version doesn't report and vice versa. Upgrade to the latest
version to avoid these discrepancies.
Additionally:
Fix tsc errors that are now reported by updated version
Bug: T297614
Change-Id: I0eb67bcc1a5ce214fcf2d6f6433a5de3a845b6a6
Waiting for one animation frame seems to make the sticky header
re-appear consistently.
Bug: T299114
Change-Id: Ie1230bf861f12e4e18a6adb0f6779c199d6954a1
Before Vue/WVUI lazy loads, we have intermediate search components that
are rendered on the server and that need to be styled based on the
`autoExpandWidth` prop passed to the search component. This commit
refactors VueEnhancedSearchBox to use this class if present.
Additionaly:
* Cleanup fixmes from Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
* Replace `vector-search-box-show-thumbnail` class with
`.vector-search-box-auto-expand-width` class in Header.less now that
the class has been cached in the HTML.
Depends-On: Ic914ecaee591008f987bd6d754fda8628125de7b
Bug: T297531
Change-Id: Ia6b7afa990fa4b04578740b483ba21dbef45a016
IE11 doesn't support the `initial` value which results in hidden user
menu item text. Instead set an explicit value.
Bug: T298746
Change-Id: I89511419b2d2c753be96f9c1eb842ef80623bce7
I haven't found any code responsible for making the scroll position
jump. It looks like Safari is doing this on its own. Looking at the
focus event in detail [1], it looks like there is an `preventScroll`
option you can pass to .focus() which might help in this situation, but
unfortunately, Safari doesn't seem to support this. Therfore, a hack
like this may be necessary.
[1] https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
Bug: T297636
Change-Id: I90651293b7dd0f7f2970ba06255a12617b43661f
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
Per T295085, because of the checkbox hack, these menu would stay open
when navigating back to a page.
Bug: T295085
Change-Id: Ief9523030384b4bcaa00379988e2042b4d177dcc
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
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
