- New night theme added via Codex `.cdx-mode-dark();` mixin.
- CSS custom properties separated from skin.less.
- Font-size rem conversion removed since Codex now uses rems.
- bundlesize increased by 1kb ( followup from
Icfcb5c7418061a5727580f0685054356ba4edb72 ).
- Icons that use background-images are inverted for night-theme.
- Linter error fixed for long-lines in clientPreferences.js
Co-Author: <Bernard Wang> bwang@wikimedia.org
Bug: T354889
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
The new night theme will add about 1kb of CSS to the page due
to additional styles in Codex and additional styles in Vector to
be added in I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
Since the bundle size increase is a precursor to updating Codex
this is done now rather than as part of the patch that introduces
night theme.
Bug: T354889
Change-Id: Icfcb5c7418061a5727580f0685054356ba4edb72
Codex 1.5.0 requires a bit more overhead, due to ex. the
use of fallback variable definitions in the main design
tokens file now that we are introducing CSS vars.
Change-Id: I539f4523b8d15a7815b303078529eb945c479be4
- Loaded new skins.vector.search.codex.scripts module in skin.json, with only the CdxTypeaheadSearch component with codexScriptOnly flag set to true.
- Included skins.vector.search.codex.scripts in the script loading configuration for Vector22 within skin.json.
- Turned off the "interface-message-box" feature within Vector22's skins.vector.styles configuration in skin.json, as Codex now supplies these styles.
- Fix the style selector to add `.cdx-button` to `.vector-limited-width-toggle` in BottomDock.less since using the codex style
- Substituted "codex-search-styles" with "skins.vector.search.codex.styles" in the existing configuration.
- Ensured the availability of skins.vector.search.codex.scripts module for use, marking it in the list of modules in skin.js.
- Modified App.vue to utilize skins.vector.search.codex.scripts instead of @wikimedia/codex-search.
- Update App.test.js.snap to the latest output form
- Update bundlesize.config.json with newest values
Bug: T356677
Change-Id: I7fc223db01171efe6656792530d4b625be4c8edc
- 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
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
* 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
- Account for 10 Kbs in the case wikibase is enabled for scripts budget
- Message generation centralised function
- Added bundlesize.config.json file path to message.
- Update the message to show in Kbs
Bug: T350338
Change-Id: I8490cd7aa4468b54bab05960c8c594093167cb72
*. Current budget didn't take into account:
** RelatedArticles
** FlaggedRevisions
** VisualEditor
* Vector legacy budget is set to Vector 2022 to ensure both skins
have similar performance demands.
* Adds workaround for T350514
Bug: T346813
Bug: T350338
Change-Id: I3377bec5e1c368d30e77e22e93b2e44bbfe883bd
Follow up to Id5c28ecec20c4a74a113dd8781b6a022391ae443
Certain modules may only load if a page exists, so using an existing
title may catch more issues in CI.
Bug: T346813
Change-Id: I399f97720702c038ade6394f0193c27feb4a3bc8
- Add ModulesSizeTest.php that checks the total loaded scripts and styles budget sizes and checks if they exceed the budgets assigned in bundlesize.config.json.
- Changed the json structure of bundlesize.config.json to support both ModulesSizeTest.php and BundleSizeTest.php.
- Handled the new data structure in the BundleSizeTest.php so the dataProvider gets proper data.
Bug: T346813
Change-Id: Id5c28ecec20c4a74a113dd8781b6a022391ae443
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
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
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
- 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
After wgParserEnableLegacyMediaDOM is disabled.
Bug: T314318
Needed-By: Ic587b1b9b8d22f3aef38e8823613815faaa09d9d
Change-Id: Ib54b49d546423dd1b4416c82585bbb686950b29c
- 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
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
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
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
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
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
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.
Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
Structural change to prepare for CSS grid usage.
ArticleToolbar component is defined and self contained with
all layout rules relating to toolbar
UI regression testing suite shows 6 failures due to pixel alignment
changes to tabs. When comparing to the current release, you should
see 34 failures before /and/ after this change.
Notable changes:
- #mw-head element is no longer present in modern Vector skin
to allow us to distinguish between cached HTML and modern HTML
Bug: T303484
Change-Id: Ia261ea53931217f32a21b33c2ab3d4ec64efa48a
When browser preference for reduced motion is enabled:
* Disables bolding of table of contents
* Disables sticky header transition
Bug: T254399
Change-Id: I8ef9e59b258fed977ce370da352b1924832d842b
This commits sets up the Table of Contents to bold the active section
when the section is scrolled.
Unfortunately, because our content does not have actual sections but
instead has a flat list of headings and paragraphs, we can't use
IntersectionObserver in the conventional way as it is optimized to find
intersections of elements that are *within* the viewport and the
callback will not reliably fire during certain scenarios (e.g. with fast
scrolling or when the headings are not currently within the viewport).
Furthermore, iterating through a list of elements and calling
`getBoundingClientRect()` can be expensive and can also cause
significant forced synchronous layouts that block the main thread.
The best compromise in terms of performance and function that I've found
is to use a combination of a throttled scroll event listener and
IntersectionObserver's ability to asyncronously find the
boundingClientRect of all elements off the main thread when `.observe`
is called which is the approach this patch takes. Although this is an
unorthodox way to use IntersectionObserver, performance profiles
recorded while holding the "down" arrow and scrolling for 10 seconds
with a 6x CPU throttle are comparable between master and this patch:
master: https://phabricator.wikimedia.org/F34930737
this patch: https://phabricator.wikimedia.org/F34930738
Bug: T297614
Change-Id: I4077d86a1786cc1f4a7d85b20b7cf402960940e7
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).
Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
Styling should not depend on IDs to allow us to have multiple
searches in the page.
Precursor for wiring up search in the sticky header.
This also tweaks performance metrics to track separate metrics
for the sticky header search
Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.
Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.
Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
- Keep double-dash class name for cached HTML.
- Update instances of renamed class in less + js.
Bug: T253671
Change-Id: Ieb1ce630e8fa84167e2ca8497f66a20183fdaf90
