According to a Google contact, given we set viewport to 1000px
for mobile devices viewing Vector get a tap delay.
The solution was suggested in https://developer.chrome.com/blog/300ms-tap-delay-gone-away?hl=en
and Peter has confirmed helps improve performance.
A supports query is added to limit this rule to only browsers where
it applies.
Bug: T358380
Change-Id: Ifd7d8951e06e3ba0faaed354492d23e6e0bc8f69
- Add new module 'skins.vector.search.codex.styles' to skin.json
- Added 'skins.vector.search.codex.styles' to bundlesize.config.json
- Replace the old styles module 'codex-search-styles' with the new one 'skins.vector.search.codex.styles' in skin.js
Bug: T353844
Change-Id: If3cbcac64242c403b42811159882741fda132555
- Exclude the checkbox in the TOC from the hack done in https://phabricator.wikimedia.org/T333394
- This patch might not be needed as a restructure of codex import to vector could resolve most of the issues
Bug: T344066
Change-Id: I35b2ffa7a761e3ea1460fa97642966486791bab9
Temporarily hard-codes some CSS background rules after Codex's
CSS-icon mixins stopped supplying them upstream (after changing
to use mask-image in icons).
Bug: T358160
Change-Id: I13be424c58b105472ef22f14e4381693f2985cd8
The margin and font rules are being overriden in DiscussionsTools
using equal specificity. The correction to the load order in
ResourceLoader skin module in
I83ac918ad8807c65aab2cd1dd8d7d2cd34b512af will break this.
Bug: T354975
Bug: T357929
Change-Id: I15eaf43c6750c76363ec804eda9b8ca6ec4709c2
These are currently being overriden by styles inside core
which also set margin to 0.
In I83ac918ad8807c65aab2cd1dd8d7d2cd34b512af these would override the
default leading to unintended UI changes.
Bug: T354975
Change-Id: I379ad6293bd1aa2a9304369969978cea684da98a
The LESS mixin average is not compatible with CSS variables
so replace the call with the equivalent code.
Change-Id: I148eaca747352ffdc9d1423f20d34bd5a1d0e447
Working on feature flag not having this is causing confusion. This
will speed up development by allowing me to more easily determine what
mode I am in at all times.
Change-Id: I5d4168bbf7df41f4754b36c6e6aa4955dbc609bb
Using an 8px gap by default. 8px is used a few times in vector-2022.
Wrapping is useful for userpages with a lot of indicators.
Bug: T340810
Change-Id: I75b59c633a6ff7a8bfdc624e6e5ba06f35fb6aee
VISUAL CHANGE:
* The gap between the title and the text "From mediawiki"
decreases - this is an improvement.
Bug: T357022
Change-Id: I436171448ca69413a004024157b24d502aa63bea
Update <p> spacing to improve consistency of ul/ol spacing,
also update heading spacing to be more consistent,
relying on mw defaults more
This reverts commit 8d3bda7867.
Bug: T352875
Change-Id: I46bf5e3713b4648e9c3facf5e927e924ba51b23f
The night mode setting should only show up if the feature flag
is enabled.
The messages are currently added to Vector, but we may want to upstream
these to core in future.
Change-Id: Idcd53399fa06821bbf5f463d1a242ecf59442c70
In the mobile site we want to show a notification when settings
are changed. In some cases we want to reload the page.
Bug: T350170
Change-Id: I71bd97de8e041d641aded02b8fdf84359f6d830b
This reverts commit 984a8a03ae.
Reason for revert: For anonymous users this was triggering the
error "Cannot read properties of null (reading 'contains')"
Change-Id: I0bd78d195768c95b188208fa6fbab60fb483ed87
The latest update of 'svgo' dependency includes three optimizations on
converting path commands, which
- improves closing paths and how we determine if to use absolute or
relative commands.
- round arc or convert to lines based on the geometric sagitta
- convert cubic Bézier curves to quadratic Bézier curves where possible
Also unifiying npm command to qua standard notation `minify:svg`.
Bug: T354875
Change-Id: I4fffd9efd430786911fe36e409d2575bfab719bd
Merges all of the styles in the Zebra module into the default styles.
- skins.vector.zebra.styles ResourceLoader module is removed.
- FIXME's related to Zebra styles are removed.
- Top-level "&" that were used for scoping to feature-flag are removed.
- `$wgVectorZebraDesign` feature flag is removed.
Bug: T347712
Change-Id: I0177541ae87a5d070d5317629ca38de93613d620
- Vertically aligns the sidebar TOC
and main-menu text, update after sticky-pinned
container was split into separate elements.
- Consolidate position: sticky and contain: paint styles onto sticky-pinned-container elements
47 expectecd visual changes to desktop-dev
Bug: T351697
Change-Id: I76b3e875f5793d3442e84215447a0ab9fa818300
preparing html and css to avoid caching issues
caused by differences between zebra and non-zebra HTML.
Bug: T347712
Bug: T351830
Change-Id: I6f8ae635ba38937729b77ea8517ef2eae0ae12f7
Adds bigger bottom margin (1em) while keeping
the smaller top margin (0.5em) as was previously define.
This keeps the headings close to the paragraphs
while seperating paragraphs from each other.
Bug: T351754
Change-Id: I833372002654ea30deb110af44fb412722bc0ccd
Adds different font-sizes and line-heights for the custom
font-size UI. The custom font-size preference options are now:
1. Compact - 14px font-size & 22px line-height
2. Standard - 16px font-size & 24px line-height
3. Open - 20px font-size & 26px line-height
This removes the "xl" font-size option
(`vector-feature-custom-font-size-3`) and it's related i18n messages,
and changes the remaining message to match the new options.
The default font-size, when the custom font-size feature is disabled,
is "compact".
Bug: T351693
Change-Id: I5975a78ce7327f314fd55de55c222ac08d801fbd
- Add appearance.svg file and classes
- Update the icon name in php
- Update icon name in test data and Snapshot
To test: change return value of
isClientPreferencesPinned() from SkinVector22
PHP Class to false
Bug: T351142
Change-Id: If61f3019430be3cb9c926b09bc397e27d8e636f2
This reverts commit 7a8059d767.
Reason for revert: Didn't realize this changes the paragraph spacing in the legacy styles module instead of the Vector 2022 module.
Change-Id: I08f2a6b1f43fc088e6552fb6a9011b41ebb698a2
.vector-body p now should have top and bottom margins as 1em instead of 0.5em which translate now to 14px instead of 7px
Bug: T351754
Change-Id: Ifd405d7754f9062d9a84237560495a36d1dab8e9
Removes padding from the top and bottom of the
.mw-body element so that the border of the sidebar
menus align with border of the tab area.
Also removes the bottom margin on the sidebar menus
so that the bottom of the menus align with the bottom
of the content. (This was an artifact from the gray
background design).
**Visual Changes**
- The content will move up by 8px with this change.
- The bottom of the TOC will also move down by 24px
to align with the content.
Bug: T351432
Change-Id: If0a8189b228ffb6fb63dfd8be40955653caa0b34
Aligns the text of the sidebar TOC with the
main menu using negative margins. This only
affects the TOC in the sidebar position.
Bug: T351697
Change-Id: Ie4e78379e8682636ebf72913e995b69e922b4983
Add CSS to support new HTML markup for headings with section edit
links, which will soon be used by Parsoid page views (T269630)
and by the old parser (T13555). Keep the old rules to provide
temporary support for cached page HTML and emergency opt-outs,
as well as permanent support for plain headings on special pages
and in Parsoid edit mode HTML.
See documentation page for further explanation:
https://www.mediawiki.org/wiki/Heading_HTML_changes
Depends-On: I44587461582d648b56ef0c9c7ae0c322895c69c2
Bug: T13555
Bug: T269630
Change-Id: I62d7e8ad7d8f25d145ec1f33230d6043982aec1e
* This moves down the client pref menu
* For now when page tools is collapsed the client preference menu
is hidden. This will be revisited when we implement pinning
in the next sprint.
Bug: T350417
Change-Id: Ic94d6fd2c4ccb667b0ae602d03c564f88a14b8ec
Known problems:
- For now, this can only be rendered by manually updating
the isClientPreferencesPinned local variable in SkinVector22
This will be addressed in T351141
- The icon is not correct. This will be addressed in
https://phabricator.wikimedia.org/T351142
Bug: T350195
Change-Id: I0b1ec445c4d292bbf417a39dbc5d2032b563f525
* Refactor client preferences to support different render locations
such as the sidebar or user menu.
* Make use of Codex markup.
Bug: T350195
Bug: T350417
Change-Id: I13eeb9cafc888faba4a5bf0390c1b6db1e3f0259
* This makes the function hyper-specific and only looks for main menu
and page tools pinned states to return true.
* Renames function
Bug: T349924
Change-Id: I8e3a90b71c7f9acc5c217d76ed3a004342c503cd
- Add images to resource/images
- Use images in the config of onGetBetaFeaturePreferences for vector-2022
Bug: T349321
Change-Id: Ib359d49719dd5854c3f060f3484c098d93c35c06
Changes the skins.vector.zebra.styles module to match
the current Vector 2022 styles.
**Visual changes**
(All pertaining to zebra.vector.zebra.styles)
- There are no grey backgrounds
- Context boxes with white backgrounds and drop-shadows
are removed
- Page-tools sidebar width is the same as TOC sidebar width
- Content container is narrowed from 960px to 948px to prevent
shifting content when pinning TOC or main menu.
Bug: T347638
Change-Id: If6e1ef21f076f6a9f0f8cafb2d745a7c13afb471
- The Less variable @font-size-base--trident-hack is removed
- All instances of font-size: @font-size-base--trident-hack; usage is removed from Vector 2022
Bug: T349010
Change-Id: Ie131b8f0dbb4d8050d33df969c1c49963ddc95e2
Replacing the legacy Vector breakpoint tokens with the Codex
standard ones. All names have been unified, only some legacy values
remain for backwards compatibility.
Also
- replacing a wrongly applied min-width with the correct max-width
token,
- replacing a width with an equal value min-width one and
- removing the now equal value mobile min-width one.
Note that we can't do some reference magic here alike
`@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as
this would take the Codex value from skin variables and not the legacy
value.
Also note, that we could move all those Vector legacy definitions into
Vector's 'mediawiki.skin.variables.less' file(s), but that would mean
that extensions don't rely on the Codex default values, but on Vector's
and we want latter to move to the standard, also in foresight of
further standardization to build for all feature teams like a
shared Grid.
Bug: T331403
Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
Adds functionality to update the pinnable header class
(pinned or unpinned) after is has been moved via
movePinnableElement().
Bug: T348039
Change-Id: I23552bdbb3390222c2c8efbd5f9122a4d5021a00
Vector 2022:
mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle','#', 'Hello world');
Or if preferred it can be added to the pinned menu
mw.util.addPortlet('p-twinkle-pinnable', 'TW', '#p-tb');
mw.util.addPortletLink('p-twinkle-pinnable','#', 'Hello world');
Bug: T342815
Change-Id: Id58515e72bfbd5f700aa573a122529c6efdfea9d
Vector:
mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle','#', 'Hello world');
Additional changes:
* Add aria labels to gadget created menus
Additional changes to template
* Remove self closing tag on input[checkbox] in template
* Rearrange vector-menu and vector-menu-dropdown classes
for consistency between two approaches
Bug: T342815
Change-Id: I938928c3625099ad49bec8aafb11f91190a9f494
Replaces font-sizes that are between 12-14
px with ones that equal 14px. This involved
converting some values to rems as well as changing
their size.
@font-size-tabs (a computed 13px value) is removed
in favour of unit( @font-size-small, rem).
This removal requires the following changes:
* Removing max-height & box-sizing from tabs, since
they used @font-size-tabs for size calculations
* modifying .mixin-vector-arrowed-dropdown-toggle()
to use `unit( 12 / @font-size-browser, rem )` instead
of `unit( 16 / @font-size-tabs / @font-size-browser, em )`
* Changes to the position of `.vector-toc-toggle` since
it's width/height depended on
.mixin-vector-arrowed-dropdown-toggle()
Opportunistic refactor:
- `.mixin-vector-legacy-menu-heading-arrow()`
is removed from Zebra
Expected visual changes:
font-sizes below refer to computed values, actual values
are now set in rems.
* Text in tabs is 14px not 13px
* #siteSub is 14px not 12.8px
* #contentSub is 14px not 11.76px
* #contentSub line height is default, not 1.2
* dropdown [hide] labels are 14px instead of 13px
*************************
*****VISUAL CHANGE*****
*************************
: 91 changes in Pixel due to content being pushed
down due to bigger font-size in toolbar.
Bug: T346062
Bug: T261334
Change-Id: I6cfc800bb8dfed206670e5365bdc55e5d7357a4a
Introduces CSS custom properties for the purposes
of enabling client-side customizable font sizes.
CSS custom properties are contained in a Less file,
which imports values from Codex and converted them to rems
using the Less unit() function.
Includes ADR on CSS custom properties decisions.
Bug: T348984
Change-Id: Ic5e62d55f3c3585fe3a00e41f29f88d3a2f7470b
Removing all references to WikimediaUI Base and replacing them with
the Codex equivalents.
Also removing variables redefinitions that are not needed anymore.
Only value difference is a last family added before general fallback
called 'Source Serif Pro', which basically will never be visible due to
the general availability of Georgia and Times.
Also removing general font stack comments, see Codex design tokens
comments for these context explanations.
Bug: T334934
Change-Id: I61aa44e40830ffdb308aaea4ca30af0f25ba2274
The width of the screen changes when the pinnableElement is pinned
or un-pinned. Other features may need to react to this, like for
example the RevisionSlider extension.
Triggering a window.resize is a generic way to make sure these
changes can be handled by other elements on the page.
Bug: T336729
Depends-On: Iba22924b660f2709c0680aa6fbeb0feba92cfa76
Change-Id: I49878fdd8794273919bf961648fd93fdcf9511af
Adds a config option to control the Readability prototype
survey tool on a per-wiki basis.
Minor fixes:
- Adds missing i18n messages to the tool for slider labels
- Ensures tool only runs on Vector 2022 skin
- Wraps the initialization in an IIFE
Change-Id: Ia65a0043dab5e9a23d4ef401ed83914e4f3d2882
Adds screen resolution (`${window.innerWidth} x ${window.innerHeight}`)
to the prefilled feedback form for the typography prototype.
Change-Id: I38ec6fe5232c1d90df6d5d56b0f0cb32acdcc64e
Creates an interactive prototype for gathering
feedback on users typography preferences.
This prototype is meant to be temporary and is
built soley for feedback purposes for the
WMF Accessibility for reading project.
The prototype code is:
- for logged-in users only
- hidden under the API user preference "vector-typography-survey"
- disabled by default
It is intended to be enabled via a banner that calls
code similar to:
new mw.Api().saveOption( 'vector-typography-survey', 1 )
Bug: T347208
Change-Id: I8d8914a0fa16d40cb22ed0e61832bc5bbabe1c78
Switching from width() to outerWidth(true) will output the same value for the default Vector legacy CSS, but for tabs given a border/margin with custom CSS, it will prevent an infinite expand/collapse loop at specific resolutions.
Bug: T347793
Change-Id: I97bc01ce4c4117fe2a95dc7f0ff227cbc96ccbb9
* Introduces a new utility function, `hasPinnedElements()`, that allows us to check whether there are any pinned elements in the HTML document based on their CSS class names.
* This function will be useful for detecting pinned elements and can be used within WikimediaEvents.
Bug: T346106
Change-Id: I4283cd234ba71acce1e5cbadabf8aeb17cd8d86e
