Commit graph

62 commits

Author SHA1 Message Date
Jan Drewniak 1dad545f63 Adds loading indicator for new search module
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
2020-09-08 13:59:41 +00:00
Stephen Niedzielski 5195f5fd67 [feature] add menu button to toggle panel visibility
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
2020-05-28 02:14:13 +00:00
Nicholas Ray 91c25bc253 Add title attribute to opt-out link
The opt-out link was missing a tooltip which is important for
accessibility and to help people gain more context as to what it does.

Bug: T250093
Change-Id: Ie6cbaf5c941615d1662700415b8f1823987a563d
2020-05-05 09:52:20 -06:00
Nicholas Ray ec382a8c86 Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions
This commit is singularly focused on adding a link to the sidebar for
Vector, logged-in users. It does the bare minimum to fulfill the
requirements of T243281.

Additionally, it will help to answer the question "Do we need to use
abstractions (other than maybe different templates) to separate Legacy
Vector from Vector" by intentionally leaving out any abstractions in
order to make it easier to compare with a follow-up patch
(Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions.

It is a good thing to question whether or not we need addtional
abstractions in VectorTemplate and if they will help us as unnecessary
abstractions can have the opposite effect and just lead to further
frustrations down the road.

Therefore, I urge you, the reviewer, to let me know your thoughts! If
abstractions are viewed as not making our lives any easier, the
follow-up patches may be completely discarded and that's totally okay
with me. :) I think it's a good think to talk about now though.

Important changes:

* The VectorTemplate constructor was changed to allow injecting the
config, templateParser, and isLegacy boolean (only the config was
allowed before this commit). According to MediaWiki's Stable Interface
Policy, "Constructor signatures are generally considered unstable unless
explicitly declared stable for calling" [3]. Given that VecorTemplate's
constructor is not marked as stable, it is justified to do this without
warning according to the policy.

* Due to the above, the 'setTemplate' method is no longer needed and was
marked as deprecated.

* VectorTemplateTest was made to adapt to the new VectorTemplate
constructor. Additionally, it now extends from
MediaWikiIntegrationTestCase which my intelliphense server can pick up.
I *think* MediaWikiTestCase is just an alias to
MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed
to MediaWikiIntegrationTestCase in [2], but I'm willing to change it
back if there is pushback to this.

Open questions:

* What are VectorTemplate's responsibilities? To me, it acts right now
as a controller (because it echos the full HTML string from the
template), a model (because SkinTemplate::prepareQuickTemplate sets data
on it which it later retrieves through `$this->get()`), a presenter
(because it adds data tailored for a web-centric view), and a view
(because it renders HTML strings instead of letting the view/template be
solely responsible for that). Arguably, some business logic might be
mixed in there as well (because it checks to see if a User is logged
in/has necessary permissions to show x which my changes here add to).
This might not be a problem if we keep VectorTemplate relatively small,
but will it remain this way as we progress further in Desktop
Improvements?

* How do we write tests for VectorTemplate without exposing unnecessary
public methods? For example, if I want to test the `getSkinData()`
method to see what state will be sent to the template, how should I do
this? One option might be to use `TestingAccessWrapper` to expose these
private methods which is what
`VectorTemplateTest::testbuildViewsProps()` does. Another option is to
accept this method as public. Is there a better way? Keep in mind that
even with access to this method, there might be many things to mock.

[1] 0030cb525b/tests/common/TestsAutoLoader.php (L64)
[2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76
[3] https://www.mediawiki.org/wiki/Stable_interface_policy

Bug: T243281
Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-26 17:39:47 -06:00
Umherirrender af4ce06bf6 Fix indent in en.json
Change-Id: I240883c739175b7b242b4bdd7c29c8e0997c8efd
2020-03-20 22:04:04 +01:00
jdlrobson 0ba99a1e97 Make sure Vector skin preferences always follows skin
Sections can be nested. Using rendering/skin as the parent
means that Vector's skin preference will always come straight
after the skin preference and before Popups.

A change in core is needed to update the selector for the element which
shows/hides the subsection as well as provide a generic message key to
replace the one inside this repository.

Note: If the "Vector" specific heading is needed, we can achieve this
with a little more work but that is a conversation for another time.

Depends-On: Idd06bcfe7935e16732a6a95c1253dbf95c8aca2e
Bug: T246162
Change-Id: I4be9764ddca186e5bfd493678afd62d446072e8f
2020-02-29 00:35:50 +00:00
Stephen Niedzielski de76ab59c1 [Special:Preferences] [PHP] Add skin version user preference and configs
Add a Vector-specific user preference to Special:Preferences for
toggling skin version, either Legacy Vector or the latest Vector.

The presentation of the new preference section and the default values
for anonymous, new, and existing accounts are configurable via
$wgVectorShowSkinPreferences, $wgVectorDefaultSkinVersion (to be used by
the feature manager in T244481),
$wgVectorDefaultSkinVersionForExistingAccounts, and
$wgVectorDefaultSkinVersionForNewAccounts. These configurations default
to the fullest experience so that third-party configuration is minimal.
See skin.json for details. The configurations are each tested in
VectorHooksTest.php.

When presentation is enabled, the new preference appears as a checkbox;
enabled is Legacy mode and disable is latest. There are a number of
unfortunate details:

- Showing and hiding a checkbox is supported by OOUI. Showing and hiding
  a whole section (Vector skin preferences, in this case) is not so this
  additional client JavaScript functionality is added in Core (see
  Iaf68b238a8ac7a4fb22b9ef5d6c5a3394ee2e377).
- Stylization as a checkbox is wanted. However, the implied storage type
  for OOUI checkboxes is a boolean. This is not wanted in the event that
  another skin version is added (e.g., '3' or 'alpha'). As a workaround,
  the preference is converted from a boolean to a version string ('1' or
  '2') on save in Hooks::onPreferencesFormPreSave() and from a version
  string to a checkbox enable / disable string ('1' or '0') in
  onGetPreferences(). There a number of test cases to help cover these
  concerning details.

Documentation for overriding the skin version as a URL query parameter
is provided in anticipation of T244481.

Bug: T242381
Bug: T245793
Depends-On: Iaf68b238a8ac7a4fb22b9ef5d6c5a3394ee2e377
Depends-On: Ifc2863fca9cd9efd11ac30c780420e8d89e8cb22
Change-Id: I177dad88fc982170641059b6a4f53fbb38eefad6
2020-02-26 12:56:10 -07:00
Volker E 5a4a589916 Unify user messages for Vector.js and Vector.css
Those messages have been untouched since introduction, but should be
unified. They are put on top of corresponding pages like
https://en.m.wikipedia.org/wiki/MediaWiki:Vector.js

Change-Id: Ib40a38dba553bf10070fedf368ba8ea581d2b4b9
2020-02-19 14:10:42 -08:00
Timo Tijhof b843094a2d Re-implement and improve mw-jump links with pure CSS
* Improve their accessibility by giving both links
  a full label "Jump to x" and "Jump to y" instead
  of "Jump to: ", "x", "y".

  This also makes things much better for localisation, for which
  we generally discourage use of concatenation.

* Use pure CSS for the toggling of the visibility on focus,
  instead of relying on JavaScript. Especially given the
  JS comes form core's 'jquery.mw-jump' module, which is
  considered technical debt per T195256. Alternatively,
  that could be copied to vector.js, but pure CSS
  is possible, so why not.

* Use plain <a> links in the HTML instead of wrapped in a <div>.
  This solves the long-standing problem whereby the margin
  between #contentSub and #mw-content-text had to be awkwardly
  negated and overridden in core and on various to make sure that
  the wrapper itself would become visible as needed, in a way that
  has margin around this. This whole problem doesn't apply when
  simply using inline links that aren't part of the regular flow
  with .mixin-screen-reader-text. On focus, the individually
  focussed link appears in regular flow, without the need for
  any custom styles.

* This uses :not(:focus) to naturally make it render in the default
  way on focus, and visibibly hidden/clipped otherwise.
  This is supported in IE9+ and Android 2+.
  There is a way to make it work with CSS2 for IE7-8, by applying
  the mixin to '.mw-jump-link' only and then undoing all of
  'position', 'width', 'height', 'clip', and 'margin' on :focus.
  But I'm not sure that's worth it here. The fallback in IE7-8
  for not supporting ":not(:focus)" is that the accessibility
  link is simply visible always, which seems like a good fallback
  for accessibility, and doesn't hurt anything.

Bug: T195256
Change-Id: Icaadb290f692b3617688d32cbb66dfb007f1c82c
2018-05-24 00:08:02 +00:00
Siebrand a5496bcd75 Revert "Update namemsg to convention"
My bad... skinname-<skinname> is used in core to get the skin name.

This reverts commit ac0d123ba8.

Change-Id: I3c7780f9f08081238744fde094804ea8f5dd191a
2015-09-28 09:42:39 +00:00
Paladox ac0d123ba8 Update namemsg to convention
Bug: T113632
Change-Id: I86323ac69d420927c852eb9197fba3d589e73f1b
2015-09-25 18:26:57 +01:00
Bartosz Dziewoński d28f09df31 Move Vector skin from core
This is the final step of the process described at
<https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>.

Corresponding core change: Idfc38503.

Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 13:38:34 +02:00