- Hooking into mw.util.addPortlet
- merged in tests from: I3258388d74c103515e3f0680304f9a376e439a35
possible follow-ups:
- tooltips support
- custom attributes support
- Adapting portlets of types dropdown, tab to vector skin. Check patch set 10 for a starting point
Depends-on: I79bad8661e34e653d41e6cb1cd4462ac5c6bc3b1
Bug: T303488
Change-Id: I35a51df6ece2e48e086e722337d4c6bba427eeb4
New menu items can be added via
```
var node = mw.util.addPortletLink('p-dock-bottom', '#', 'hello' )
if (node) {
node.querySelector('a').classList.add( 'mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-button' )
}
```
Bug: T336431
Change-Id: I8c5c5414cda9d268631ba0fade90e1a44c104ff1
The language dropdown currently impacts rendering due to making use of
visibility: hidden as space must be allocated for it on the page.
However when ULS is installed it is never used. As some JS to take
that into account so it doesn't impact the rendering of the page.
Since ULS may not be installed we have to consider that case and
retain the existing behaviour for those wiki (this should only
impact 3rd parties)
Bug: T340715
Change-Id: Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba
* Factor out mixin for right aligning menus
VISUAL CHANGE:
Results in a slight change to the alignment of the user menu.
Bug: T339321
Change-Id: I5c3a03161b1f2372d2ca25ba47dcd40065f4f2cc
The languages alert is misleading when there are no languages and the user has JS disabled.
This change adds a class to the alert if there are 0 languages, and then adds "display: none" to the alert if the client-nojs class is present. This is the same approach being used for the language switcher button.
Bug: T326185
Change-Id: Iee292d661ed1f47700f588053712f5f547022b17
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
