Visual changes: 11 expected in Pixel
- Elements on the right side of page toolbar are now flush with the rest of the content
Change-Id: Id02cd379687fa292188a447c85951e7a87ade509
Only apply sticky header offset to mw-sticky-header-element if the
header is actually sticky, currently at min-desktop-width of 1000px
Bug: T313187
Bug: T313619
Change-Id: I081c694b263a68498468b837cffa1cbea136d36f
Splits MenuDropdown styles into modern and legacy styles.
Leaves a common MenuDropdownCheckbox.less file (for lack
of a better name) for common styles related to the checkbox
behaviour and dropdown menu resets.
Adds a new file in common/mixins.less for a shared
dropdown mixin.
Bug: T312157
Change-Id: Ib60b25ea3121843ed5ed54820d6295a81289b332
Test by adding .vector-toc-collapsed class to the body
We use grid only when supported for grade C browsers.
Visual changes:
* Slight changes to position of the button and title
(movement by a pixel or 2)
Bug: T311447
Change-Id: Ib16c7b5b35be66776d013833e29f24f3f5316d9b
Wrong watchstar icons were specified when splitting the watchstar
into modern and legacy Vector in 3c0559a7.
Change-Id: Ice369f5d81818b093014cf508c2d4336c66368ed
When the article exist only in one language, currently we do not show
language selector. This prevents showing the entry points to create article
in other languages by various means.
Show the language selector so that options like translate, interlanguage
links, language settings can be shown.
Bug: T275147
Bug: T290436
Depends-On: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
Change-Id: I7fb68457c1203d824fe7433c9f272f300a483c44
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.
Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
Consolidates the CSS responsible for styling chevrons into one
implementation. This removes the need for custom padding and
background positioning for the following components:
- "more" menu
- user menu
- watchstar
- language button
- languge button in sticky header
Instead of absolutely positioning the chevron on these components,
the parent label element is set to `display: inline-flex` so that
the chevron is vertically aligned and given enough space by default.
The watchstar, although not a chevron, is also given the
`display: inline-flex` treatment so that it can be aligned with
other elements in the toolbar.
This new implementation requires splitting the watchstar
component into legacy and modern due to a quirk in Firefox that
causes a bug with the watchstar in legacy Vector.
NOTE: This change causes visual changes due to the difference in
centering the chevrons via flexbox vs percentage positions.
Bug: T308344, T310838
Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
IE9 is out of basic supported browsers, so removing this fallback.
Also using “Flexbox” as standard term in comment.
Bug: T306486
Bug: T308344
Change-Id: I6fcb0c4b54fea3d05593ae294c05e046131c93d2
Removing old PNG divider fallbacks, which were included for IE9, old
Firefox and Chrome browsers and are not mission critical even when not
rendered to unknown browsers.
Bug: T306486
Bug: T308344
Change-Id: I8a6622237a1cbb8116930a12e632329618d5c291
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
and #left-navigation tab elements with floats.
Then for vertical alignment, sets the child <li> elements and
<a> elements to inline block.
Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
Vector 2022, which previously applied to H3 labels in the
sidebar, which are no longer targeted by the styles in
MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
ArticleToolbar.less
This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.
Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right
Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.
NOTE: Update addresses the reason for revert 5599cf2 and compatibility
with CSS Grid layout by adding a clearfix (display:flow-root)
for #right-navigation and #left-navigation elements inside toolbar.
Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I1482a81d16c53e0ba1977b0d98ba8c8a21362a6c
Also de-coupling border and background vars as they are aimed to
be fully replaced by tokens in future.
Bug: T313243
Change-Id: I5b7e46b6d2a0cc6975cb3c760645eaf2d5d30de5
This reverts commit 0c5e6ed9fe.
Reason for revert: I was so focused on testing the current layout
I forgot to test the more important grid layout, which is being
deployed this week. The "from mediawiki" tagline is overlapping
with the tabs.
Change-Id: I3c53a8d243caf84e5c2766d730ced3d7da345026
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
and #left-navigation tab elements with floats.
Then for vertical alignment, sets the child <li> elements and
<a> elements to inline block.
Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
Vector 2022, which previously applied to H3 labels in the
sidebar, which are no longer targeted by the styles in
MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
ArticleToolbar.less
This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.
Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right
Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]
Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I77f3dd8e8ccfe3a1d9693746106d9783cc0d38b9
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar
[More details about change]
- Migrate search app from Vue 2 to Vue 3; update tests
accordingly
- Remove dependence on WVUI and use Codex instead, via the special
`@wikimedia/codex-search` package
- Update search app to use CdxTypeaheadSearch, which no longer
takes in props related to the search client or fetch start/end
instrumentation. Instead, directly use the restSearchClient
and call fetch start/end events in the search app.
- Handle hideDirection in the search app/API response formatting
code, not within the TypeaheadSearch component
- Handle showing/hiding the search button in the app
- Move the WVUI URL generator into Vector
- Update server-rendered search box styles to match design updates
included with CdxTypeaheadSearch
- Replace references to WVUI with references to Codex
- Update values of various LESS variables to match Codex, and update
searchBox styling to prevent jankiness when the searchBox is replaced
with the Codex TypeaheadSearch component
The VectorWvuiSearchOptions config variable has been maintained and
will be updated to a code-agnostic name in a future patch.
Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
- Update TOC bottom padding to match spec in T304166.
Before (30px): https://phabricator.wikimedia.org/F35312302
After (20px): https://phabricator.wikimedia.org/F35312299
- Rearrange/combine some selectors in TableOfContents.less
- Delete some unnecessary styles/selectors
- Rename variables in TableOfContents.less
Change-Id: Ifffc434dcab4256a0c3ae8faf43a342935b820ff
This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open
https://jmp.sh/xZhkU6q
No pixel regressions
Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8
Restore header margin between search and user links, as its
still needed for grid (Fixes F35282398)
Bug: T303484
Change-Id: Ie8cf4adcadff430ebfc675029635e6c22061b238
Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:
[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)
[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)
Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
SkinVector and Hooks both had code to add classes and handle Vector specific template data. This patch simplifies the way we handle menu data to always use Hooks:updateMenuItem. This has an additional side effect of removing instances of mw-ui-icon-before.
Bug: T306628
Change-Id: I73514a0eada4d92705b70e7c2ebd91092fc12544
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
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
Having a clean slate to work from will help with the development of
introducing the grid
Bug: T303484
Change-Id: I8fb9a9d958e4e73e8bfbf4b797cee1353c915db5
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
Replacing Less mixin calls of `.transform()`, deprecated
since MW 1.37, with CSS property.
Bug: T308360
Change-Id: Ic965193782a447d34eac4bd19816a7b753c36d44
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
- 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
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
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
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs
Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
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
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
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
- 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
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
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
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
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
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
- 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
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
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
