This should result in no visible change to Vector 2022.
Font-size is already being overriden inside Vector 2022 on the
.vector-body class
Bug: T336548
Change-Id: I4ef46a7b6cad1c40ca10c76c2f38087ef34a1cfb
- Update SearchBox.mustache markup to use codex styles
- Scope old SearchBox markup to LegacySearchBox.mustache
- Add handling for thumbnail and autoexpand search variants
- Adds a 'Search' button to SearchBox.mustache matching the initial non vue search box with the Codex design
- Refactor SearchBox CSS so styles are scoped better
Visual changes:
A "Search" button now appears on page load when it previously only appeared after loading in Vue
Bug: T337966
Change-Id: Ibcffe00292ab4f9f5f9919982d578793cf8594de
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php
85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons
PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.
Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
This replaces the local variable for line-height with the design token
of same value.
Bug: T331403
Change-Id: I08a5edfc355f36a16e780912af6945b2c4f50252
For pages with interlanguage links, this link has no event listener
and only functions as a plain link to the corresponding Wikidata page.
Bug: T336931
Change-Id: I8c1456b3c524824ccc59aee5f999c8017c59fc0b
This changes the value substantially, from 719px to 1119px. There is
only one usage of this variable, which is updated in
Iac1697a5ba899901f203652e2356a96d34c991be.
Depends-On: Iac1697a5ba899901f203652e2356a96d34c991be
Change-Id: I837a7fc7f5c21d88a3211dd054a62f7ea3f4b943
This allows the styles to be applied on browsers without JS support, notably the rule that hides the button.
Bug: T337580
Change-Id: I604d0c6362e2c424c38cbf5b798a5ac619bd70cf
When AB bucketing via ABRequirements.php in Vector,
the browser has no awareness of this bucketing and buckets users
once more via mw.experiments.getBucket() in AB.js.
mw.experiments uses a different algorithm than ABRequirements.php,
causing a mismatch between the server-side bucketing
and the client-side bucketing.
This patch overrides that client-side bucketing by
adding classes to the HTML element that are recognized
by AB.js
Bug: T335972
Change-Id: I0549a8dee23ebe7cd68465f8403e4f7aac76633e
This reverts commit 4ef136e7e6.
Reason for revert: This is made obsolete by
Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a when wmf/1.41.0-wmf.8
has been cut.
Change-Id: I1d6c737b6a2d9fa2d123d29a1e0ab740a854c9e5
Applying central Codex design tokens in new architecture.
This should already show the working principle of the new architecture.
Replacing `@z-index-menu` by `z-index-dropdown`.
Note this is also removing obsolete `@z-index-sidebar-button`.
Bug: T285592
Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
This reverts commit b6603a591f.
Reason for revert: Causes the login and create account to be flushed
together (will add screenshot on ticket)
Change-Id: Ib25f21e85eb9984dfa9fcf50a50198c5d2ba7bed
Currently the A/B test enrollment code is limited to the
sticky header experiment. Instead of doing that, always check it
inside skin.js and run it if necessary.
Now it's possible for this to run twice, keep track of whether
the init function has been called and make sure it doesn't get called
more than once.
Bug: T335309
Change-Id: Icfef13b019319d07686a06e06846789faf790ed6
Removes the permanent scrollbars from Vector 2022
as well at the 100% height on `.mw-page-container`.
The permanent scrollbars ( overflow-y:scroll) are
an artifact of legacy Vector and no longer serve
a (known) purpose.
The 100% height on `.mw-page-container` was originally
added to fix T257518, however that fix is no longer
necessary with the use of CSS Grid for layout.
Bug: T335883
Change-Id: I57bb0274a9d51269bb58ae7904c0517742716ec8
- Refactor the TOC toggle button position
- Move the TOC/pinnable scrollable element from
`.vector-pinnable-element` to `.vector-pinned-container`
and `.vector-dropdown-content`.
- Applies The Fade™️, as well as a vh max-height, to both
pinned menus and dropdowns.
Changes the way The Fade™️ is positioned by using
position:sticky so that it can be applied to
dropdowns, sidebar menus as well as all ToC permutations.
Bug: T335155
Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
Introduces Codex-based spacing variables for the
padding of the content area.
Padding is adjusted by using CSS custom properties
assigned at the HTML element, then changes only
these custom properties at the new breakpoint.
Also folds in changes from 3433525 (add top-margin
to indicators) into the zebra module.
Bug: T335155
Change-Id: Ic4883b86043882bd2ef5f71b3079896caab87531
These items are vertically centered via flexbox already,
so this isnt needed. Results in expected visual changes.
Results in expected visual changes.
Bug: T334881
Change-Id: I05409ec591f9ade179e93262b855bba6bd0e4a12
Refactors the bottom border in the zebra update
so that it doesn't require flexwrap on the
`.vector-page-titlebar` element, which can cause the
PagTitlebar layout to break when the page title is
longer than one line.
The challenge with the underline in Zebra is that we
want to use padding to create the white background on the
content elements, but we *don't* want the underline
to stretch to edge of the box (which is what bottom-border
or box-shadow would produce), instead we want the
underline to only span the width of the content.
Bug: T335633
Change-Id: Ib942ff4e7674397cd7f0e1004a9e402169fbd206
Moves the CSS rule that hides the #siteSub element by
default into /resources/common/typography.less in
order to prevent it from being feature flagged
(and thereby overriding the specificity of on-wiki edits)
during the Zebra update.
Bug: T335625
Change-Id: If41fadc6a369ab371f6c1e75e9cf3022a01574a0
Makes the columns that contain the ToC and Page Tools
menu equal width.
Moves these width declarations into the grid.less file
and converts them, as well as a few associated width
variables, to rems.
Widens the content column to maintain the same
line-length as pre-zebra, due to the extra side-padding
on the content container.
Scopes the non-zebra grid.less less file to the
zebra-disabled flag.
Bug: T335155
Change-Id: Iab9c5a13c90089c1775e6184eb10b7b4fd31a846
Removing 'mediawiki.ui/variables.less' `@import`, which is now
fully replaced by skin-aware 'mediawiki.skin.variables.less'
standard.
Bumping required MediaWiki core version to >= v1.41.0.
Also
- replacing deprecated keys with new Codex token equivalent keys
Bug: T319381
Bug: T332541
Change-Id: I87bd258a24d8ca8b789f8355fe6495eca4cebb85
In 3cea6d41, files were split between the zebra/non-zabra modules
and scoped to the top-level zebra-enabled/disabled class.
Since some selectors already target the html element, ampersands
were added to these selectors to append the zebra-enabled/disabled
class to them.
This rule PageTools.less was overlooked.
Change-Id: I5057a409da31ba6c4b2310048f8690154ca43e16
Implements the zebra design update via the
skins.vector.zebra.styles module.
Refactors:
- Moves common variable and mixin imports from
individual files to skin.less file.
- Applies font-sizes to menu containers instead
of individual menu links.
- Adds mixins for dropdown and content-box styles.
- Unifies padding for pinned and unpinned menu states
(including TOC).
Bug: T332600
Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e
.vector-feature-zebra-design-enabled {
@import "./screen.less"
}
To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.
getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.
Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
Creates a new skins.vector.zebra.styles module that
will hold style modifications for the Vector Zebra update.
Affected files are copied from skins.vector.styles
without modification (at this point) to improve
revision history in git.
The new module should compile without error and existing
styles should not be affected.
Bug: T332600
Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
This refactor seeks to make it easier to separate
feature flagged styles by wrapping the imports in
a top-level feature-flag selector, e.g:
.vector-feature-zebra-design-disabled {
@import './layouts/preZebra.less';
}
This change does the following:
- Moves all file @imports to skin.less
- Removes unnecessary @import from MainMenu.less
- Moves .mixin-page-container() to mixins.less
- Moves @min-width-supported variable to variables.less
- Scopes existing Zebra styles at the skin.less file @import level
- Removes selectors ending with ampersands
The last changes makes it easer to reason about changes
specifically when wrapping entire file imports in a selector
since the ampersand ends up inheriting its value
from the skin.less file.
No visual differences are expected with this change.
Bug: T332600
Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
The limited control will be pointed to on page load
When wgVectorPageLoadIndicator is set to true (defaults
to false)
Clicking the button should show the indicator.
Additional change:
* Update config.json to reflect new state
(Follow up to 28ada2dc)
Bug: T333601
Change-Id: I188ed7226b9a1530e54b1aaa80caa0830bf73633
Drop usages of $.closest in favor of ES6 closest
We also no longer need to check for whether closest is available
now that we do not need to worry about ES5 code.
Change-Id: I2442a4f69f8181dd761ca7ac418839cfca26a36f
Follow up to 87dd101a
* bump coverage to reflect improved test state
* remove ts-ignore statements
* Drop eslint-disable-next-line compat/compat rules in ES6 code
* Drop TypeScript checking on Jest files
* Identifies an existing usage of ES7 includes method in place
where ES6 browsers need to be supported.
* Update App.vue booleans to default to false. Note this doesn't
impact our usage of the search app as we always pass these values
in.
* Drop unused eslintEs6.json configuration file
Change-Id: Ib6f1ef77bf4e27ecdcc54b5fb963818437f8195c
Update setupIntersectionObservers so it only contains code
that uses observers. Other code is moved to the skin.js entry point
along with other features.
Change-Id: Ia11b4e07f899426687c616ce2054e0df9d36ab7c
* Upgrade @wikimedia/types-wikimedia to allow us to drop several
@ts-ignores
* Merges eslint rules now that ES6 is default everywhere
* Runs autofix command
* Fixes various prefer-const errors
Change-Id: Iee5bcb93f10a76d80dbeec813f6387c13438263e
With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.
Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
Making it easier to add configuration variables to JavaScript
in future. This will be used for the pointer indicator.
Change-Id: I65396a3867e7e92d7385ebaa573fb48105ecb9fd
Removes checkbox.js and related styles as well
as rules for #mw-sidebar-checkbox which was removed
in a previous patch.
Bug: T332090
Change-Id: I168c1161a1d3365e79c2ff6b1c2ab5455f7c4c00
Removes several styles that were used for
expanding/collapsing the table of contents at narrow
widths for non-js users as well as the main menu
for no-js users.
Existing `.vector-menu-checkbox` styles address this
use-case with the addition of a display:none rule for the
two affected checkboxes.
Related to the Page Tools clean-up since these styles
were once scoped to the .vector-page-tools-disabled
class.
Bug: T332090
Change-Id: I13efd4a87bacecb0e9f5a5e44d5e15861d632c62
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
Splits the click handler for pinnable elements into
separate functions to reduce indentation and
maybe improve testability.
The click handler for pinnable elements is now
placed in a function called `togglePinnableElement()`
and attached to the click event via `.bind()`.
Class toggling is split into a separate
function called `togglePinnableClasses()` as well.
This should have no functional impact.
Change-Id: Ib27a469f6eb7e28360203d09db3315c6bde5c890
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb
- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width
Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980
Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
Pages that are not supported in other languages should not display the
ULS when the language button is clicked. Instead, a simple message
explaining that the page contents are supported in other languages
should be displayed inside the dropdown. Additionally, the language
button should be modified for these non-content pages, to non include
any label and be quiet instead of progressive.
This patch implements these specifications by appropriately modifying
the mustache templates and the underlying skin classes.
Bug: T316559
Change-Id: I37d8e61a1287b31d1a304d2a955f532b9b8fa505
* Don't hide language button
This code can be removed now T287206 is resolved.
Also simplify legacy logic - as the language menu
is always a portlet there.
Additional changes:
* Create LanguageButtonDropdown component to distinguish
this code from the LanguageButton in the sticky header.
* Fixes a style in LanguageButtonDropdown.less which wasn't
accounting for multiple vector-menu-content classes
Bug: T320927
Bug: T325017
Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
This should be a no-op since Wikibase change I6a7a42a64c (commit
19267799da), which enables the wikibase.vector.searchClient module on
wikidatawiki as well; assuming no problems turn up when that is
deployed, we should be able to merge this soon afterwards.
Bug: T316093
Change-Id: I8d7aaf67d98cc015d94bb6aa1c71a92905dad024
Follows-Up: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term
Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools
Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
- Register new feature for main menu pinned
- Update UserPreferenceRequirement to optionally handle default config values
- Add nav landmarks for the main menu
Bug: T317900
Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
- Rename data-portlets-main-menu to data-main-menu
- Rename MainMenuContents.mustache to MainMenu
- Replace usage of .vector-main-menu-contents in favor of .vector-main-menu
- Add classes to PinnableContainer
- Use PinnableContainer and PinnableElement in main menu
- Remove MainMenuDropdown.less
Bug: T317900
Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
This allows '.vector-main-menu' to correspond to MainMenu.mustache, and 'vector-page-tools' with PageTools.mustache
Bug: T317900
Change-Id: I65c0d7cffbdf1cf9e59cde0c0fc4dca788e799de
- getTocData is moved into VectorComponentTableOfContents and it's test file
The following changes were made to the main menu, toc and page tools PHP components
- Avoid passing in $skin to the constructor
- Handle isPinned logic inside the component
- Add a public ID constant to the components
- Dropdown data for each feature use the same naming convention
Bug: T317900
Change-Id: I77a617a6c1d93bccd3b6e59353299f5534624e53
This partially reverts 94c7f31082.
Headings inside wrapper divs etc. actually are rendered in the table
of contents.
Bug: T318044
Bug: T324869
Change-Id: Ie3181d9e9605cd2b5897b12931572057e80d6661
While removing this we also noticed that we check the value of
isMainPage. This doesn't seem like a good idea as most main pages
do not have a table of contents, so it seems like adding
unnecessary complexity for a state that doesn't exist in practice.
The existing code path also doesn't work as it adds a table of contents
unstyled to the page.
Bug: T324874
Change-Id: Idaeff6ace5912ea74ed9d335526027c4690ac8fa
This was an artifact that remained after the switch from data-is-persistent to
data-feature-name. It can and should be removed now.
Change-Id: I6b50d243c7de3d46fb8c4baf398574d5c4247497
* Leverage the infrastructure around feature management to handle the page tools
pinning and persistence
* Make pinnableHeader.js leverage features.js if the data-feature-name attribute
is set
* Sets tests/.eslintrc.json ecmaVersion to 2018 to enable destructuring in test
files.
* Adds a isPinned helper method to pinnableElement
* Add a logged in requirement so that the pinned feature is disabled for
anon users.
Bug: T322051
Change-Id: Ib86282216882fa94e37b7088a3f4bd0c1bcf6cd4
In preparation for 856718 where pinnableElement.js makes use of features.js,
move features.js and limitedWidthToggle.js out of the skins.vector.js module and
into the skins.vector.es6 module. This will make it easier to use by
pinnableElement.js without needing the es6 module to depend on the es5 module.
This does have the negative side-effect of causing the limited width feature to
not be supported by IE11 (and other non-ES6 browsers), however this tradeoff was
discussed with our product manager to be acceptable. Additionally, this
maintains the status quo as the toggle button does not currently show in IE11
(which may be a bug).
Bug: T322051
Change-Id: If0e8cb98deabe847c2cc71fddb90ca36d15e5f8f
This is an incomplete styling of the menu.
This should be enough to start an initial design
review and unblock other work on the dropdown.
Out of scope for this patch:
- Pinning (being done in T317900)
- Design (will be done in follow up)
This should cause no visual regressions in Pixel.
Bug: T317899
Change-Id: Id7b47cc16fc8cf93d406687198ba37acf7a9cf24
As far as I can tell, this has been dead code ever since it was
introduced in change Ica040cd18d (commit aa10668e6d), and was never
called; the effective search URL was initially constructed via inputs to
the search form (e.g. a hidden input for wprov), and later the separate
urlGenerator.js was added. (Also, “suggestion” is not a valid
Special:Search paramater as far as I can tell.)
Also add some tests for the separate urlGenerator.js, to make up for the
other tests being removed.
This reduces the module size of skins.vector.search enough that we can
decrease the bundle size test config to 3.2 kB [KiB].
Change-Id: I6be5ba362402c2c2ec582d9a0192c80f46e7a7ce
If the wgVectorSearchClient supports it (the default implementation
doesn’t), add a visible-item-limit to the cdx-typeahead-search, and wire
up the resulting load-more event (new in Codex v0.3) to load additional
search results on scroll.
The hard-coded visibleItemLimit (7) is chosen to match the default limit
of the wbsearchentities API, but ultimately arbitrary; we can look into
how to make this number configurable later, if necessary.
This increases the module size enough that we need to bump the bundle
size a bit more.
Bug: T322333
Change-Id: Iadade9cbf48457cfeabc78439624602ec3f98782
Co-Authored-By: Jon Robson <jdlrobson@gmail.com>
Needed-By: I67fac3b209d6a1ab2661e1e1c0681edd8472ac6c
- The collapsible ToC absolute positioning solution has been preserved to be used on no-js mobile resolutions
- The collapsible ToC grid based positioning solution has been removed
- ToC styles have been refactored and organzied
This patch involves HTML changes. In order to avoid additional complexity, this patch disables the collapsible ToC feature for users above the mobile viewport with cached HTML. The ToC continues to be automatically collapsed on mobile viewports for cached HTML users.
This patch results in 9 expected visual changes. In order to see them you need to take the following steps:
1. Run `./pixel.js reference`
2. Checkout the following PR in pixel https://github.com/wikimedia/pixel/pull/149
3. Run ./pixel.js test -c 859143
It should look like this: https://jmp.sh/ZVQqDZw7
Bug: T318013
Change-Id: Iea0d73005b91589c58ae38a3a640fa90c18a860d
Since Wikibase change I01afb269d6 (commit ee4c555878), Wikibase has a
copy of the “is wikidatawiki” condition to temporarily continue
supporting the old search on Vector 2022. As suggested by Michael there,
we can change the condition here to avoid having the same check in two
places, and instead detect whether Wikibase loaded the legacy search
ResourceLoader module (which means we shouldn’t install the new search)
or not (in which case Wikibase Repo is either not installed at all, or
it’s providing a custom wgVectorSearchClient to support the new search).
With this change in place, once Wikibase is ready to support the new
search everywhere (including on Wikidata proper), we only need to change
the condition in one place (in Wikibase), and can then clean up the code
here at any later time.
Bug: T316093
Change-Id: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
These styles are not going to be needed in the main menu so are
not generic. Moving to the PageTools component.
Bug: T317899
Change-Id: I17b8ecd645c593c0368ea158265dbf8f6a575345
Vector 2022 sidebar is automatically collapsed on
exactly 1000px breakpoint. Should do that at 999px.
Bug: T321745
Change-Id: I052e99ccfda10786fabf54ea6cf089aeb3ce4e75
This patch involves cached HTML changes
- Replace '-content-container' id with '-unpinned-container'
- Replace '-content' id with '-pinnable-element'
- Rename pinnableHeader.js to pinnableElement.js
- Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close
- Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close
- Rename .vector-dropdown-content to .vector-pinnable-element
- Add new PinnableElement.less stylesheet
Bug: T318013
Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
The Dropdown component should be considered the dropdown folder going
forward. This should be distinguished as a different component that
composes the Dropdown component
Since the template itself is rather simple it seems preferable to have
duplicate templates that describe the actual component (PageTools,
VariantsDropdown and LanguageButton)
MenuDropdown is renamed Dropdown and styles that don't correspond to the
Dropdown component are moved to the relevant components.
MenuContents mustache template (future component) is added to DRY up
several of the new templates.
Bug: T320927
Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
[Visual Changes in this patch]
This patch introduces changes to whitespace inside the Mustache template
which corresponds to an HTML change, resulting
33 minor changes in pixel, the spacing of the ToC label shifts by
1 pixel
- Remove page tools feature flag from TOC
- Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed
- Remove now unused `moveToc()`
- Update jest tests to use PinnableHeader
Bug: T318013
Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
Makes the dropdown styles compatible with the pinned state of the
menu so that both states can share the same styles.
- New vector-menu-heading mixin shared between main menu headings
and dropdown headings.
- New @font-size-dropdown variable so font-size is consistent in
dropdown and pinned state.
- Ensure hidden 'more' menu works in both pinned and dropdown state.
- Removes extra <ul><li> from PinnableDropdownContents.mustache, as the
child Menu template already contain <ul><li> elements.
Bug: T318434
Change-Id: Ie1a56d8584c1dc3f20c6643ff4cfc740be4007fa
This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border
Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
Refactors styles for limited width toggle and
fixes issue with close icon not appearing.
Bug: T319449
Change-Id: If53c3921e54565c47eb0868329e0b79f60073792
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar
Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
