The extra complexity provided by these SVG source code constructs is
apparently not needed. They look the same as before.
Change-Id: Iff2ef6b8549d182655b6eb1f3f93d0389e1b4c6b
Removes configuration for
1. Custom sidebar pinning
2. Default sidebar visibility for logged in & anons
The first config is no longer necessary because
the main menu now uses the pinnable header for
showing/hiding and persisting it's state.
The second config is no longer necessary since
the Page Tools menu moves many sidebar items into
a different location.
Bug: T332090
Change-Id: Iaf25237757dc1e43e096b8c5991e9dd31ad25c2d
This removes CSS selectors associated with the Page tools
feature flag, i.e. `vector-feature-page-tools-disabled` as
well as `vector-feature-page-tools-enabled` by removing
the 'disabled' styles and integrating the 'enabled' styles
into the default page tools code.
Bug: T332090
Change-Id: I382e12ca7ce741a3071582ffa84da03c2ba9e343
- Move the header and skip link out of .mw-page-container-inner and the grid
- Wrap the header and sticky header with a .vector-header-container element, allowing us to easily update header styles in the future
- Update sticky header to use a <div> to fix a11y error. Update searchToggle.js to use .vector-header-container rather than <header>
Bug: T332449
Bug: T330438
Change-Id: I038fc17cbb88a29dbe8d7841b824761a91d38405
[EXPECTED VISUAL CHANGE]
Following Codex typography definitions. This minor change results in a
2px higher heading.
Bug: T332171
Change-Id: I5ac39492d8efc5c24e4340983e2b6973b7252c8f
svgo ^2.8.0 → ^3.0.2
Amending to new `cleanupIds` plugin name.
Re-crushing SVGs while at it.
Bug: T333158
Change-Id: I29e74ec1240142af3440004b68ac985558836410
I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06 provides neutral values for
the Codex tokens in mediawiki.skin.defaults.less in MW core, and expects
skins to import the appropriate Codex themes in their
mediawiki.skin.variables.less.
For both legacy Vector and Vector 2022, import the Codex tokens for the
wikimedia-ui-legacy theme. We need to use the legacy theme because
Vector and Vector 2022 have a base font size of 14px; the non-legacy
theme assumes a base font size of 16px.
Remove some variable assignments that are now redundant, because their
values are the same as the Codex tokens we're importing.
After importing the Codex tokens, override some of their values where
necessary so that all variables' values stay the same(*). We should
consider whether to remove some of these overrides in a follow-up patch,
but keeping everything the same for now makes this change less
disruptive.
(*) As in the core change, one variable's value does change:
- @max-width-breakpoint-tablet from calc(719px) to 719px
but this change has no visual impact.
Bug: T325237
Depends-On: I3a8c89d8558022077be1f32c6a6f4733b6302948
Change-Id: I3c5c8f9fc4b1841f8f8bdbcf27de82291d1fabbd
Follow example in skinStyles and give these their own folders.
The problem with using "legacy" is that it could be interpreted as meaning
legacy LESS variables e.g. deprecated variables.
Change-Id: Ie456dfbd703a0e7a0ad783909ca3ef5e86450d9c
[Visual change]
Height of the article toolbar is reduced, this is done by reducing the
padding on the top of the tabs and reducing the margin on the
top of the Watchstar and Wikilove icons.
Bug: T316950
Change-Id: Ic2a3146eab901c834712d23f80277e313c42d907
They are included in the DOM for screen readers but there's a good
chance the user copy-pasting text from an article does _not_ wish to
copy-paste these visually-hidden-for-most-users accessibility
helper links.
Bug: T295647
Change-Id: I13f4cbb88930becf38bc0f10d4288c8c9c496522
* Ensure 8px spacing between all icons and buttons
* Move buttons to separate container, so they aren't
grouped with -icons.
* Reducing horizontal padding of quiet labelled buttons
to 5px to match spec.
Bug: T326571
Change-Id: I71c3aee82152f048c347f80747972d526039a8f0
This patch removes the old style rules for .vector-toc-pinned after one
week of cache.
Also removes 'data-name' which was no longer used
Bug: T325032
Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
Per T325086, the TOC should expand and activate the section that corresponds to
the window's hash fragment.
Additional changes:
* Moves logic that runs on page load to determine the
intersection from section observer to main.js, since the hash fragment can
take precedence over the scroll position (e.g. when scrolled all the way to the
bottom).
* Make section observer's pause() cancel any pending intersection calculations
so that it doesn't interfere with other async logic.
* Moves onHeadingClick and onToggleClick logic to activate and expand a section
to tableOfContents.js to facilitate unit testing this behavior with clicks and
hash fragment changes.
Bug: T325086
Change-Id: I8a2cf0e6a96467fae97608450b321c181155e424
Follow the solution we have on Minerva (mobile site)
and break long links in page.
Additional change:
Mostly whitespace updates. Use git diff -w to see.
Bug: T327334
Change-Id: I8d7e6a31b3a76375245da312e99f637766ffff8c
There's a lot of .mw-body-content out there that shouldn't have this
margin applied. Switch it to #mw-content-text so that it's only applied
to the actual article content.
Bug: T331458
Change-Id: Ia040f85ed484db21129c3673808bc2ad71962ec3
Increasing scroll-padding-top on HTML element
to account for TOC button placement on mobile
resolutions.
Bug: T314419
Change-Id: I5c3efa0f20f052ec74e91a6287f561c9e0105f90
This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.
This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.
This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.
Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
Follow up to I3484a790ce8ebadf21054ac1d222d5632b2dc5a4
__Template__
The template is not particularly useful - it is only ever
used once in this context and features a static ID which means
it can never be reused. It is also tied to the #vector-toc-collapsed-checkbox
element. In current form it doesn't make sense to have this template.
Maybe in future, I could see an argument for a PinnableTableOfContents component
that wrapped the checkbox and nav element, and generalized the IDs but
currently there's no pressing need or value for that.
__Layouts__
The existing Pinned and Unpinned stylesheets are concerned with how the table
of contents is layed out holistically with regards to other components and
features enabled on the page. I think these should therefore be organized as such.
The way I reason with this, is these styles would be irrelevant in a component
library if the component was rendered in isolation.
Bug: T328719
Change-Id: I9ff0e0eeb35f215a8cae5950d08dc1277b662a71
Break bare external links, which potentially would cause the
viewport or width restricted content to overflow.
Bug: T327334
Change-Id: Ia83e2cde7646670de0a1b09ba9457e1cfc47ce0f
Follow up to Ib42d532d4e900c01061e1c5e39c03b17f0619c46
Hoist hook binding into main.js and update tests
main.js now only tests hook wire up.
tableOfContents calls reloadTableOfContents directly.
Bug: T316025
Change-Id: Ia06feab7cfb47a64ac3519bd7bd0428dc661045a
* When wikipage.tableOfContents is executed, the table of contents has been
replaced so we should update the sections associated with the section
observer as the old sections no longer exist in theDOM.
* If VisualEditor repaints the page, we should update the elements associated
with the table of contents as the body-content element no longer exists in the page.
* When VisuaLEditor is active we should disable the intersection observer as
there is no table of contents to update.
Minor changes:
* Light refactor of large function in main.js
* reloadTableOfContents returns a promise and now fires a new hook
wikipage.tableOfContents.vector to signal when it is finished which
has also been requested by community members. This allows the code in main.js
to update elements at relevant point in time
* Add FIXME note (doing this would have been considerable work)
* I've added a call to mw.log.warn which would have saved me considerable
debugging time for this issue to diagnose the issue.
Bug: T316037
Bug: T316025
Change-Id: Ib42d532d4e900c01061e1c5e39c03b17f0619c46
Previously for the table of contents A/B test we triggered
scroll events when the table of contents was scrolled into
view. Now this is never referenced, so the code is cleaned
up to only apply to when the title is scrolled into view.
Change-Id: Ie9a5c4b6d88068d914cbbcc3d046ac288d49172b
- We had to add nav element to wrap TOC in all places
- Make sure proper nav is only displayed so landmark do not get confused
- Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit
- Run lint:fix:js and lint:fix:styles
- Fix maxSize in bundlesize.config.json
Bug: T324505
Change-Id: I36d26240b87de33318ff1edf97a410872a438103
- Fixes TOC button being transparent (https://jmp.sh/jbuivqlM). FYI the fixed width toggle button has the same issue.
- Add replace `html-vector-heading-icon` with Icon.mustache
Bug: T320453
Depends-on: I9a990ea8de63fb336391bea11b4503d447fb9d4f
Change-Id: I39397f8e98f79a2fdde9a8d785690133ea5a2619
This reverts commit 8d0659b1e6.
The logic for temporary users is now centralized inside
MediaWiki core, so Vector has no need to check whether a user
is temporary and instead work with the data it's given.
Depends-On: I36815aaef81ec7368e240a780e90bd574785df74
Bug: T328725
Change-Id: Ie30dd6a77ef391f74a435e0b9df74793ffdf73bb
- Removes 'mw-ui-quiet' class from the TOC button when below the page title, meaning the TOC is just using default button styles. However, these styles are still not to spec due to button/icon tech debt (https://jmp.sh/jbuivqlM). The styles are fixed in the following patch
- DRY up TOC CSS
- Fix no-js collapsed TOC styles
Results in 4 expected visual changes. Note, the button styles are still incorrect and will be fixed in the next patch
https://jmp.sh/nHujNdVK
Bug: T315932
Bug: T320453
Depends-on: I490eb6244a35f18149844a87297c5f1ccc5b7df9
Change-Id: Id11805029b78847734d15041d31c2538412cf20a
To improve user experience when using gadgets and extensions that
cause layout shifts after page load, we want the anchor node selection
algorithm to only pick nodes in the content column or spanning full
width of the page.
Bug: T330108
Change-Id: Id996f766a535a487fb6bafe6a06a98d1a60ac8e3
Large diff mostly to
hoist setupTableOfContents above main where it is used
(originally part of Id11805029b78847734d15041d31c2538412cf20a)
Change-Id: Icc41a86546ebc90ae35989ccd4dbb38b214efbb8
- Prevents the addPortletLinkHandler function from looping
over the same links multiple times by indexing
the HTMLElement instead of just the ID, which is an
optional parameter.
- Conditionally adds the icon class if the ID parameter
exists.
- Refactors the function to calculate the width of the
vector toolbar.
- Adds Jest tests to account for the dual icon scenario
and updates existing Jest tests.
Bug: T327369
Change-Id: I2a0934405efebd0e95919bc523d711866236a7e6
- Update naming convention to use dropdown instead of menu
Follow-up: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Change-Id: Ie51f7fc280eeef8470613c07850dad83e4435ee8
Per T318169#8601576, the space between the top of the TOC and Page tools to the
top of the viewport or bottom of the sticky header should be 30px.
* Revises the page tools columnEnd grid to begin at the top of the titlebar to
enable 30px of top padding on the page tools
* Consolidates some styles in TableOfContentsPinned.less
VISUAL CHANGE: table of contents moves down page.
Bug: T318169
Bug: T319315
Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
Rather than try to build individually build login, logout, and create account menu items, we handle them the same as all other user links menu items in Hooks.php. While Hooks isnt ideal, there currently isnt a good path for moving that code to SkinComponents until core provides menu data. In the meantime, this patch reduces code complexity and prevents bugs like T324638.
This approach also allows us to move user links logic from SkinVector22 to VectorComponentUserLinks.php, and ensures the user links dropdown contains multiple menus, which allows us to reuse styles from page tools dropdowns.
Expected 11 visual changes:
* minor visual change where the user links dropdown has an
additional 4px vertical padding.
This padding was originally added to the page tools dropdowns
per Alex's request, but Alex also said that dropdowns should share
the same spacing. This change makes the styles all consistent
* Order of talk and contribution links have been swapped
Bug: T289212
Bug: T319356
Bug: T328954
Change-Id: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Follow-up to 886437, which suggested moving the bottom padding of the scroll
indicator's parent to the `mixin-vector-scroll-indicator-mixin`. This makes
sense because if the correct amount of bottom padding isn't applied, the scroll
indicator could overlap the text when scrolled all the way to the bottom.
Bug: T318169
Change-Id: I94f98ae75f9b80484114a2413caf2cb0c237e8ba
* Adds sticky behavior to pinned page tools
* Moves scroll indicator styles into a mixin shared by TOC and page tools
* Replaces the 10px magic number in the TOC used to calculate the bottom padding with the
@padding-vertical-dropdown-menu variable.
* Increases the pinned TOC max-height per T319315
* Corrects spacing between bottom of sticky header and top of TOC after discussion with designer
* Causes 43 visual changes in Pixel that include intentional changes and subpixel
rendering changes associated with the `contain: paint` rule.
Bug: T318169
Bug: T319315
Change-Id: Ica0c4e0de1825d37d8136b589a9bf5decc96855e
Use CSS to decide whether to show the button or not. This retains the
existing logic for hiding the button on any page where the action is not
view.
Bug: T327795
Change-Id: If74246418f87c871c01cb7b2b62f6c59263bf976
The TypeaheadSearch component in Codex switched from using content-box
to border-box for the dimensions of its menu items, reducing their
height by 2px (because of the top and bottom border). Update the
height calculation for the loading indicator accordingly.
Bug: T322383
Change-Id: I5367e402fa8ac9891358bb2f7ba87584b2835a9a
Overrides the `wikibase.client.init` module to
better style the interlanguage link button in
Vector 2022.
Also adds the `.mw-list-item` class to that link
so that it maintains consistency with the other
menu list items.
Bug: T328069
Change-Id: I5c84b7f036afb4b8dc11e92a59dff8000f068e67
Only do this when JS is enabled and the Vue search (Codex
TypeaheadSearch) is going to be loaded. Without this, when viewing
Vector with an increased browser font size, Codex's icon scales up but
ours doesn't, causing the icon to grow and jump when Codex loads.
Set the icon's size in relative units (em instead of px), and change the
background position so it stays in the same place.
Change-Id: Ie0b33797f9da75dc758a8afbe58eb004d90f3776
This reverts commit 45247802db.
Reason for revert: This is causing the TOC button to become focused on page load
Change-Id: Ib3d5ca79372dd40587879cbb39846e4c9ed9eb21
No longer needed now that the underlying cause has been fixed.
This reverts commit 5bcc1597ca.
Bug: T327229
Change-Id: I69ae0634446ea546a1d221932caf3e61bebaa6d0
Depends-On: I71f1cc0d08bfd02e1a9edb6cbfd849f10f929f3c
Clicking the bolded text in the search footer didn't work. This change
fixes that by working around the underlying issue, rewriting the search
footer template to use v-html instead of v-i18n-html. I don't know
exactly know why this works, but it does. Hopefully we'll be able to
fix the underlying issue and undo this workaround in the future.
Bug: T327229
Change-Id: I5d05d6ade1a34b12163bb96aa888ed3cfee78b4d
Move feature classes to HTML element - this is significant
for anonymous as placing the classes on the body tag breaks
the browser's ability to parse the article concurrently
with the stylesheet download, because inline scripts
are spec'ed to be able to see document.styleSheets.
Changes:
* Feature classes are moved from BODY tag to HTML tag
* For now disable localStorage storage until we've worked out
the storage mechanism in core.
Bug: T321498
Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
In production this is always true, so remove feature flag.
Retain A/B testing code in case it is still needed.
Bug: T324799
Change-Id: Ia2057eb69d0a8d3e6e51acb5729a4399fb17a18b
Adds an extra grid area for content translation
so that it doesn't interfere with the page header
on user contribution pages.
Bug: T327715
Change-Id: I68d2c9dbe50dcdfe1924f29a96b48ab07bcc5f10
Adding 'contain: paint' to the TOC container works around the issue.
This property is intended to prevent element's rendering from
affecting other elements, so it makes sense that this works.
https://developer.mozilla.org/en-US/docs/Web/CSS/contain
Because this property also clips the rendering of the element to its
bounding box (similar to 'overflow: hidden'), we need to move some
negative margins to this element from its children, otherwise the TOC
expand/collapse arrows would be cut off.
Bug: T327460
Change-Id: I34f414a99608450882e83c0ff22e64c05dff8807
The pinnable element would cause exceptions on older versions of
Safari during the setup and the ToC menu would show instead of being
pinned and hidden.
Bug: T327602
Change-Id: I99b656d0070d3e9af5641274134736b742c28f58
Extra:
- Reactivated active list element, This still does not work if the current active gets edited.
- Removed pinning event reattach as we do not replace teh full element anymore.
Known Issues:
- Collapse/Expand not working
Bug: T326839
Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
The media query for the CSS portion of this feature
should not include the `screen` portion because
that's included in the top-level import in skin.less.
Bug: T326364
Change-Id: I1ab0e321dde908982834c92ee428b512218bbe3d
The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.
Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
Fixes this https://phabricator.wikimedia.org/F36201839, which you can see for anon users, who have an empty "Actions" menu inside the page tools dropdown
Follow-up: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
Change-Id: I617b37fbdb7b300a4266fd9f927d81e6a63d74bc
The search box was overlapping the logo when increasing the browser's default
font size as a result of the logo's width using relative units and the column
using pixels [1]. This converts the column to use relative units so that it can
scale with the logo's width and not overlap.
[1] https://phabricator.wikimedia.org/F36201423
Bug: T326863
Change-Id: I08b54908f0f2b81ac4b8f506d4bfaea14350f399
At resolutions below 1000px, we want pinned elements
such as the Page Tools menu and Main Menu to collapse.
This behaviour is temporary and when the browser is resized,
the pinned elements should revert to their previous pinned state.
We also want to remove the ability to pin these menus at
low resolutions, so the "hide/move" button is hidden.
A new matchMedia event handler is added to PinnableElement.js
to handle this behaviour.
CSS is also added to hide the pinned menus at low resolution.
This is to account for the situation where the page is loaded
at narrow widths, with pinned elements,
and the JS hasn't loaded yet.
features.js is refactors so that class toggling can happen
independently of saving the state to user preferences
(since we want to toggle the classes but not save the state
at lower resolutions).
Bug: T326364
Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
