As part of comparing Vue search with legacy search, we need to track how
long it takes to lazy load the wvui library. A similar metric was added
to measuring the mediawiki.searchSuggest module in
I0fa6b8904bd43c87a68e9161f00d686a0e588966.
This commit adds the following metrics which will only be used in our
synthetic tests. We are not doing RUM tests at this time.
To test locally, add the following to your LocalSettings.php and append
the query param `useskinversion=2` e.g.
(http://localhost:8181/wiki/Test?useskinversion=2):
```
$wgVectorUseCoreSearch = false;
```
Marks:
* mwVectorVueSearchLoadStart: Marks the start of loading the search
module.
* mwVectorVueSearchLoadEnd: Marks the end of loading the search
module.
Measures:
* mwVectorVueSearchLoadStartToLoadEnd: Measures the time it takes to
load the search module.
Bug: T251544
Change-Id: I14e44b45a66213821d69cd22395fedbae747da88
Provides a loading indicator to show while the new Vue.js based
search widget loads. Given that the new widget will pull down the
entire Vue.js runtime, it's likely that there will be a delay
before the search suggestions appear. This loader is meant to
improve the perceived loading experience of the new widget.
Adds:
- New searchLoader.js file containing loading behaviour.
- This overrides the code searchSuggest loading behaviour.
- New SearchBoxLoader.less file containing the loader styles.
- i18n message: 'vector-search-loader'.
- The Event type to jsdoc.json
Bug: T254695
Change-Id: I6b5f0a60018954e10b9e80792030b67b2ec33e5a
Add onSkinPageReadyConfig hook that overrides module after page loaded
The new module is currently empty pending further work in the
feature branch.
Depends-On: I0dc38e74052027f26a70d58b5f520e5830e0d55d
Bug: T257706
Change-Id: Ib6c8f890fb3d6e751f5f01a6576614b9cc9b440c
- Creates a new user-preference called 'VectorSidebarVisible'
which stores the sidebar hidden/collapsed state for logged-in
users.
- Updates that user-preference on the client whenever the sidebar
is expanded or collapsed.
- Refactors the sidebar related javascript into a separate file.
Bug: T255727
Change-Id: Ib1ce934f3646cd8feebf0d3b15c38b5b969ec957
Currently, the `aria-expanded` attribute is placed on the checkbox
element. However, since Ife287fc8c6e0d2aee5facf42d5d4308dea918ee3, the
checkbox is excluded from the accessibility tree, and this attribute
should be placed on the label button instead.
This commit prepares for future changes [1] to the checkbox hack interface
in a backwards compatible way:
* Passes button to `updateAriaExpanded` function
* Passes button to `bindUpdateAriaExpandedOnInput` function
[1] Ia2755e189babbd70945b66a1a812fc3ece40b577
Change-Id: Icc6ba994d57ea1f8050aa408aebc8c81f03d8783
There's a longstanding Chrome bug that causes CSS transitions to show in
their terminal states. This patch works around the issue by limiting
transitions to JavaScript users only via the `client-js` class which is
added to the root `html` Node some time after page content loads. The
effect is a better overall experience for everyone but transitions
unfortunately no longer appear for no-JS devices.
I am unable to reproduce this issue in Vector's configuration. This
patch should only be merged as a last resort.
Bug: T246419
Bug: T234570
Change-Id: Ifcb2bf1fddb85113a4858b7a210ded3954952e6e
Fix the icon button directionality in right-to-left languages.
Previously, the button was hardcoded to support left-to-right only.
- Replace the skin.vector.icons' `.mw-ui-icon-wikimedia-{name}:before`
`selector` in skin.json with a placeholder, `{name}`. I don't think
this selector should be needed but it seems to be erroneous not have
one. I believe this issue of wanting a null selector was encountered
in Minerva or MobileFrontend but am unable to locate the past
discourse.
- Add check and unchecked menu button selectors to skin.json that set
the appropriate background image. This shards some of the styles out
of Less and into ResourceLoader-land but it's worthwhile.
- Revise the name of horizontal collapse icon to describe its form not
function, "collapseHorizontal" to "chevronHorizontal". This has been
an established convention that was missed a couple patches back.
- Add a flipped chevronHorizontal for RTL. I used Inkscape to do the
flip and tried to match the style of the original by hand. Feel free
to edit further.
- Drop the now unnecessary icon flipping JavaScript and initial Mustache
class. This enables a real CSS-only solution for the icons.
Bug: T246419
Change-Id: I60f65b3c595bf18d309b667d9a0b066691b90c97
It's advisable to rely on default icon color and set it's color
by opacity. With that we've got a better playing field to respond
to user interaction with icon color changes, not relying on
several icons at once for different states and also being
backwards-compatible for a variety of browsers.
Change-Id: Iaff869774007ed962104d704103f0392a3516f4f
Bug: T246419
Using 'skin' as entrance point files, similar to already existing
convention in MediaWiki land with 'skin.json' or 'SkinVector.php' as
example in Vector skin. Replacing Apache inspired 'index' convention.
Also renaming legacy to 'skin-legacy' to be clear on file base that it's
a modification of 'skin'.
Bug: T249073
Change-Id: Ief1c469724d4ffe238d307407c3ddb46f2e1abfa
Add a menu button that toggles the panel's (also referred to as a
sidebar) collapse state. When the screen is wide enough, animate the
transition.
The menu icon from OOUI is copied into Vector to avoid two
ResourceLoaders modules (collapseHorizontal icon isn't ready for
inclusion in the OOUI icon pack and ResourceLoaderOOUIIconPackModule
doesn't support images).
Additional polish and collaboration is needed but this patch fulfills
the scope of its referenced task.
Bug: T246419
Depends-On: I8e153c0ab927f9d880a68fb9efb0bf37b91d26b2
Change-Id: Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a
The collapsible sidebar adds a new JavaScript dependency and behavior to
Latest mode only. There are a number of ways of to make the deviation
but we think now is the time to start splitting by module.
This patch adds a new ResourceLoader module, skins.vector.legacy.js, and
moves the existing JavaScript into it. The old module, skins.vector.js,
has been given a currently matching index.js entry point that references
the collapsible tabs' files by reaching across directories. It's not
quite ideal as usually ResourceLoader modules and directory structures
strive for 1:1 correspondence but this patch makes the bold assertions
that it's better than a file copy, better than a new
"skins.vector.common.js" ResourceLoader module, more compatible than a
symlink, and the existing jQuery tabs implementation will eventually be
replaced in Latest mode.
A "Legacy" module was added instead of a "Latest" with the assumption
that active development should generally be considered "latest" and
Legacy an intentional distinction.
Bug: T246419
Change-Id: I9980403f1ee5897c27ac0331f0b51a5bcbdff778
Move all Vector JavaScript to ResourceLoader `packageFiles`[0] which are
much more compatible with modern development practices:
- The entrypoint is the first `packageFiles` entry (unless specified
otherwise). All other JavaScript must be explicitly executed.
- Remove a level of indentation due to IIFEs from every JavaScript file.
Regretfully, ESLint does not support modules except in ES6+ so the
otherwise useful `no-implicit-globals` rule must be disable. The
change comes with a comment so we always remember.
- IDEs and other tooling understand Node.js-like `module.exports` /
`require()`.
This change seemed the most sensible way to start developing new
JavaScript in Vector needed by the collapsible sidebar.
[0]: https://www.mediawiki.org/wiki/ResourceLoader/Package_modules
Change-Id: I287e604d5b1055aa97b5f987c24872755757ea1a
Lift the mists of confusion by checking that all JavaScript types align.
No ignores! This is the JavaScript equivalent to Phan.
This patch adds the necessary infrastructure for verifying typing and
fixes the few flaws found.
Bug: T239262
Change-Id: I2557471421196ea46cd13dfb786a52968fbfcc97
* jsdoc.json was copied from Minerva. The markdown plugin from that
config was removed since there no usages of that in Vector.
* Added latest jsdoc dependency to package.json
* Copied 'jsdoc' task from Minerva into Vector. Revised storybook output
so that multiple docs (storybook + jsdoc) could be in /docs
* Made collapsibleTabs.js JSDoc compliant (This was really the only
thing using jsduck syntax)
* Modified Gruntfile stylelinter to ignore docs folder
Bug: T239258
Change-Id: Id07d591ffe7bf0ac021109051e89b91ffdcf4c78
A resources folder is the defacto-standard across mediawiki repos.
Vector now mirrors those by describing where files served by ResourceLoader
are located.
Change-Id: Ib7d8575112e8afaaa84221a6f30a15b34b51eb24
