Commit graph

1510 commits

Author SHA1 Message Date
AronDemian cc6a7cca61 Remove unnecessary devdependency 'stylelint'
package-lock.json regenerated using the following process to ensure a clean slate:
rm -r node_modules package-lock.json  ;  npm i

Bug: T247004
Change-Id: Ie7720509ef37b178538a54854c28153ed73e375e
2020-03-13 06:50:23 +01:00
jenkins-bot f1d8a9e472 Merge "Ship different ResourceLoader module for different versions" 2020-03-12 21:30:38 +00:00
jenkins-bot 09fedcc4bb Merge "[Refactor] Move HD styles into separate importable LESS file" 2020-03-12 20:57:50 +00:00
jdlrobson 9a3a3d3c96 Ship different ResourceLoader module for different versions
To have a clean break for upcoming changes we will duplicate
index.less into legacy.less and create a new module to clearly
separate new styles from old.

The preferred name however does come with some caching challenges.
Cached HTML served to anons will continue to load the style module
`skins.vector.styles` for a period of 1-4 weeks

Provided we are careful with our changes during this period this
should be okay.

Change-Id: If32b59036e5cd62cbb804944ca93fa1a101c5129
2020-03-12 13:36:52 -07:00
jdlrobson aecd83e528 [Refactor] Move HD styles into separate importable LESS file
Change-Id: Ie596a7906b0e876fc00c1b821c23ceb9d13147e2
2020-03-12 12:52:44 -07:00
jdlrobson b8a8c56284 Get legacy styles from ResourceLoaderSkinModule
Instead of relying on Skin::getDefaultModules to get
`mediawiki.legacy.styles` make the legacy style feature an explicit
opt in choice by including it in the features list.

This is done on the assumption that Icb910a563273bde92a09b1bb92857d5b6e3
will shortly be merged to deprecate this module to avoid double loading
the styles.

Bug: T242177
Depends-On: Icb910a563273bde92a09b1bb92857d5b6e348baa
Change-Id: Ic7af947cfd5a5df4218f006232ede4ee7ed36c62
2020-03-12 19:52:18 +00:00
Stephen Niedzielski 46276cd9dd [fix] [LESS] Move print style variables to query
Move print LESS variables within the print media query. When these
styles were collapsed into an index.less import via ac069fb, they lost
their outer print media query which caused them to override screen
styles.

Bug: T247537
Change-Id: I45502facd27f4a7a6c33436da2f1870bbd91a4ff
2020-03-12 10:49:44 -06:00
Translation updater bot 864cc97092 Localisation updates from https://translatewiki.net.
Change-Id: I17512d362f5a5f94b7c74914a02d2bbc5152226d
2020-03-12 08:20:11 +01:00
jdlrobson 59747a58c8 Separate first portal in sidebar from rest
This allows us to insert HTML underneath the first portal or wrap
the portal in a containing element in future if we want to target
additional CSS to it

Change-Id: Ied28d95407b8d59fc819bb07a2cce3242bd93088
2020-03-11 23:34:11 +00:00
jenkins-bot af4cbc2f57 Merge "[dev] Run npm t on Git pre-commit hook" 2020-03-11 21:54:08 +00:00
jenkins-bot c3bbe2acb3 Merge "docs: Improve VectorTemplate Mustache param docs" 2020-03-11 20:25:56 +00:00
Stephen Niedzielski f4f7f3623c [dev] Run npm t on Git pre-commit hook
Execute `npm test` prior to committing. This saves back-and-forth with
Jenkins. This is the same configuration used by Popups,
MobileFrontend, MinervaNeue, NearbyPages, ContentTranslation, and
others.

Change-Id: If61ab4f28b0ccd38492d11a4cd8a92a97b2eb582
2020-03-11 07:49:48 -06:00
jenkins-bot f1cad1b040 Merge "[dev] Consolidate ResourceLoader LESS style files" 2020-03-11 11:51:02 +00:00
AronDemian ea22d059f2 Fix iOS Safari searchbox appearance
Sets
* `-webkit-appearance: none;` for iOS and
* `-moz-appearance: textfield;` for Firefox that also applies 
  `-webkit-appearance`.

Bug: T247299
Change-Id: Iefc77bba54b85442862176e1875974f19b64193b
2020-03-10 22:16:28 +00:00
Stephen Niedzielski ac069fbec1 [dev] Consolidate ResourceLoader LESS style files
Move styles.less to index.less and import print.less from it. This keeps
the reasoning about styles constrained to LESS instead of spread out
over LESS _and_ ResourceLoader. The former is preferable since LESS is
more standardized than ResourceLoader.

The approach of moving styles.less to index.less and then referencing
print.less was chosen with the intent that it'd be easier to assume
styles are screen styles unless a media query says otherwise.

This patch also makes the variables import common among print and screen
styles.

Bug: T246419
Change-Id: I981d0937aaacb7cba082c337f98c90e90b46b340
2020-03-10 15:29:15 -06:00
Stephen Niedzielski 713d0ac2fd [dev] Favor LESS media queries to ResourceLoader
Prior to this patch, Vector used a mixture of LESS media queries and
ResourceLoader (RL) media queries[0]. So far as I can tell[1], the
latter only instructs RL to wrap the contents of a LESS file within a
query (there are no conditionals placed on style loading). Further,
according to a coauthor of RL (Roan), RL media query support was most
likely a replacement for `@media foo { @import foo.css }` to inline
print styles from a separate style sheet which Vector itself does not
use. The LESS solution is much more intuitive since it's not MediaWiki-
specific and only the LESS code needs to be considered instead of LESS
_and_ the RL configuration in skin.json.

This patch moves both screen media queries to screen.less for the
aforementioned consistency and to avoid nesting queries. It is hoped
that these changes will help make future work easier, such as those to
margin likely to take place in making the sidebar collapsible.

[0]: https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Media_queries
[1]: http://localhost:8181/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector

Bug: T246419
Change-Id: Ic0adfa254f3e81dfa87a26899f3aa585645956f1
2020-03-10 13:13:42 -06:00
jenkins-bot 524b534e14 Merge "featureManager: Add Requirement interface" 2020-03-10 17:08:59 +00:00
jenkins-bot fbc24715e7 Merge "featureManager: Add typehints" 2020-03-10 17:08:57 +00:00
Nicholas Ray 892eb489e6 Move watchstar import out of VectorTabs.less and into screen.less
* VectorTabs.stories.js and Navigation.stories.js were updated to
reflect this change.

Bug: T243281
Change-Id: I96a3b9b2c9a8d799a5835de1f296bc1a779803ee
2020-03-10 10:04:46 -06:00
libraryupgrader 15041cf0ee build: Updating acorn to 6.4.1
* https://npmjs.com/advisories/1488

Change-Id: Ifed5a93c0cb894d5a15d5134bf72e0f8aab92c5a
2020-03-09 21:48:09 +00:00
Sam Smith d14caf2f11 featureManager: Add Requirement interface
FeatureManager::registerRequirement established the interface for a
requirement: its name and whether it's met.

However, the Feature Manager also needs to handle scenarios where a
requirement needs additional context before it can be considered met.
That context may not be available when the application is booting, e.g.
checking if the user is logged in; or the logic is complicated enough
that it should be under test.

Changes:

- Add the Requirement interface and update FeatureManager to work with
  implementations of it

- Maintain B/C by constructing an instance of a the SimpleRequirement
  DTO

Bug: T244481
Change-Id: Id95d9e5d7125492968d0e15515224aadbc3075f8
2020-03-09 11:06:26 +00:00
Sam Smith 64bd4601b4 featureManager: Add typehints
I735fd640 bumped the required MediaWiki version to 1.31. That version
dropped support for PHP 5.x.

Wherever possible, update FeatureManager's methods to use PHP 7.0.x's
scalar and return type declarations.

Bug: T244481
Change-Id: Ib5636d0ec5ec7f0c93b5b3317a12635668b589e2
2020-03-09 11:05:21 +00:00
libraryupgrader e9d9949048 build: Updating acorn to 7.1.1
* https://npmjs.com/advisories/1488

Change-Id: I4a6240c578be9b490cb824e24dbc252be60d9c7b
2020-03-08 19:06:33 +00:00
AronDemian 6ebd95832d Re-crush SVG files with unified SVGO rules
Bug: T178867
Change-Id: Ia8b2db651d2c8fd5fd949dcd07e45beed82f33a4
2020-03-08 04:12:50 +00:00
AronDemian b9968d9d93 build: Add 'svgo', SVG minifier script and unify SVGO rules
Adds:
- npm run svgmin
- .svgo.yaml: unified SVGO rules from Wikimedia coding conventions

Bug: T247004
Change-Id: I7017ecfebb811fa8d626747a830ad000774bbf2f
2020-03-07 19:47:58 -08:00
Timo Tijhof 406012f863 docs: Improve VectorTemplate Mustache param docs
Separate value type from value groups, to clarify that e.g.
something coming from a hook does not mean it should not have "html-".

Change-Id: I52fdd6995241e1d64f23fd8154997de813f674f4
2020-03-06 22:53:04 +00:00
jenkins-bot ecfd7a2b28 Merge "featureManager: Set -> Requirement" 2020-03-06 21:45:20 +00:00
Sam Smith 3f95820467 featureManager: Set -> Requirement
As was noted in https://phabricator.wikimedia.org/T244481#5859513, the
term "set" doesn't seem natural. Piotr Miazga (polishdeveloper, pmiazga)
and Nicholas Ray (nray) suggested a number of good replacements,
including "requirement." Serendipitously, this term is already used in
FeatureManager's documentation.

Bug: T244481
Change-Id: I559c2d4149db69235cdd4bb880697deb1a145743
2020-03-06 17:23:46 +00:00
Translation updater bot 478f0b5b24 Localisation updates from https://translatewiki.net.
Change-Id: I0888ea0891fb103e6429923f638d1cbe3e6956ff
2020-03-06 07:55:41 +01:00
AronDemian 1b340724d4 Separate scripts npm test and npm run build, remove npm run doc from test
- npm doc: unchanged, but no longer called by 'test'
  * it is run on its own by 'mwext-node10-rundoc-docker' CI job.
  * successful build of the documentation is necessary for JenkinsBot to accept the patch
- npm test: runs only 'lint' as of now, future possibility: qunit tests too
  * run by CI job 'mwgate-node10-docker'
- npm build: runs 'test' and 'doc'
  * NOT run by CI jobs

Bug: T247004
Change-Id: I3e6e1ebb220ceb1a1591cb7087bbd071b1bacf8f
2020-03-05 23:43:39 +00:00
AronDemian 71ec758beb Add script 'npm run lint:fix' to fix trivial lint errors
Bug: T247004
Change-Id: Id40b82f64a5c29af4a8e2c7935623df6761d25b1
2020-03-05 22:26:06 +01:00
AronDemian 834f4f837f Port 'storybook' scripts to windows, merge 'jsdoc' into 'doc'
additional changes:
* the jsdoc npm command is removed intentionally to
avoid polluting package.json with too many jobs.

Change-Id: Ie49de1c4b7a40a835ea1b3f8bcdbb779ba919860
2020-03-05 17:48:01 +00:00
Nicholas Ray e8a403e342 Rename Storybook Files to Reflect Their Respective Component
* Following up on the work from
Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619, this commit renames the
storybook files/storybook names to their respective component name.

e.g. personalNavigation.stories.js => PersonalMenu.stories.js

Bug: T243281
Change-Id: I68054663c5a597f90a826b6f75bf399382dca609
2020-03-03 18:32:55 +00:00
Nicholas Ray 9823538683 Isolate Vector Styles to their Respective Component
This will help with the encapsulation/reusability of each component.

* Stylesheets were renamed to reflect their respective component name
(e.g. search.less became SearchBox.less)

* Styles were isolated to each component:

* navigation.less now only contains classes that are relevant to
Navigation.mustache.
  * personalNavigation.less, search.less, and tabs.less
    imports were removed and made first-class styles.
  * several selectors were moved into common.less
  * #p-logo was moved into sidebar

* tabs.less was renamed to VectorTabs.less and styles specific to
VectorMenu.less were put into VectorMenu.less

* Storybook was updated to reflect changes

Bug: T243281
Change-Id: Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619
2020-03-03 18:20:19 +00:00
jdlrobson cdd5ebd74d Use template partials rather than HTML strings
CHANGES to  index.mustache:
Changes can be understood by looking at the diff of
the file stories/skin.stories.js

The additional changes in stories folder export the data passed to
those templates. A new file is used as exporting any variable in a
file suffixed stories.js will be assumed to be a story entry.

The changes to index.mustache are as follows:
* html-footer is replaced with data-footer and Footer
component is rendered via template partial
* html-navigation is replaced with data-navigation and
Navigation component is rendered via template partial

CHANGES to Navigation.mustache:
Changes are best explained by looking at the diff to
stories/navigation.stories.js
and navigation.stories.data.js
* html-personal-menu is replaced with data-personal-menu

Bug: T245456
Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-03-03 09:28:52 -08:00
Translation updater bot d6f9d0c1ff Localisation updates from https://translatewiki.net.
Change-Id: I8fbe972c796aac6ddda091764bcd146ab62eb2c6
2020-03-03 07:57:51 +01:00
Translation updater bot 3683a52f91 Localisation updates from https://translatewiki.net.
Change-Id: Ib604ee279875b1f518e7dc53902006bd0667f05e
2020-03-02 08:39:02 +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
polishdeveloper 48988c8ab0 Instead of accessing $data property use set/get/html methods
For better encapsulation and future possibility to create Skin API
we have to stop accesing properties and start using getters/setters
instead. Once we start doing that we should be able to provide a
clear interface for our templating system.

Bug: T246161
Change-Id: Ib3539b1e3bc12341c79913af3c95acad8619cff4
2020-02-28 22:06:00 +01:00
Translation updater bot 611c4ae035 Localisation updates from https://translatewiki.net.
Change-Id: I29b92bc0a9af7559e9d366bd5cba179ab12712da
2020-02-28 07:57:34 +01:00
jenkins-bot 5b1d77fb9d Merge "Replace Grunt tasks with npm scripts in package.json" 2020-02-27 17:48:52 +00:00
Jan Drewniak 98b70067c9 Replace Grunt tasks with npm scripts in package.json
Adds the following npm scripts:
- npm run lint
- npm run lint:js
- npm run lint:styles
- npm run lint:i18n

Bug: T242781
Change-Id: I0c2cfce73a02029b9d0c4d329309aff477cb02d4
2020-02-27 16:32:12 +01:00
Translation updater bot 2b5c6563c8 Localisation updates from https://translatewiki.net.
Change-Id: Idc32101f93d2554652f01c58f8327dc04fd7a6d0
2020-02-27 08:12:32 +01:00
jenkins-bot 0588f817b9 Merge "Add 'jsdoc-wmf-theme' to jsdoc" 2020-02-26 23:14:08 +00:00
jdlrobson 698752e38a [Dev] processTemplate used in one place
Moving all the templateParser calls to one function
so its easier to see how the template is composed.

The diff of changes to the stories folder highlight
the internal changes which are:

* html-portals replaced with html-sidebar in main template
* new Sidebar template added which outputs to html-sidebar
* Mention of "MainMenu" replaced with better understood "Sidebar"

This is precursory work to adopt templatePartials

Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-26 12:28:40 -08: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
polishdeveloper 4819772ac5 Bump required MediaWiki version
1. As MediaWiki documentation says, in order to use AutoloadNamespaces,
   we require at MediaWiki 1.31. See
   https://www.mediawiki.org/wiki/Manual:Extension.json/Schema#AutoloadNamespaces

2. The most recent obsolete version of MW is v1.30. Bump the required
   version to the most recent LTS version, v1.31

Bug: T244481
Change-Id: I735fd64085601376bf1917b2df5a7dbeeb55108f
2020-02-26 16:58:14 +00:00
jenkins-bot 6b0958c56b Merge "features: Add minimalist feature manager" 2020-02-26 16:06:32 +00:00
Sam Smith 9177c22365 features: Add minimalist feature manager
With complex additions to Vector's codebase like the Desktop Improvement
Program upcoming, it's important that we have a shared, intuitive
language to talk about features and their requirements. Centralising
the registration of features and creating an API satisfies does exactly
this.

This change introduces a greatly-reduced version of Piotr Miazga's
(polishdeveloper, pmiazga) original proposed API and associated
scaffolding classes for feature management in Vector, which itself was
based upon his work in MobileFrontend/MinervaNeue. This is done to
establish a foundation upon which we can build the more sophisticated
parts of Piotr's proposal in a piecemeal basis, thereby minimising risk.

Distinct from Piotr's proposed API is the ability to register sets and
features that are always enabled or disabled.

Additionally:

- A Vector.FeatureManager service is registered but not used

- A list of proposed immediate next steps is included

Bug: T244481
Change-Id: Ie53c41d479eaf15559d5bb00f269774760360bde
2020-02-26 11:49:29 +00:00
Translation updater bot 029ebd1cba Localisation updates from https://translatewiki.net.
Change-Id: I591eda4685ffbb18881b999a0c1ef09bfcdfbfbe
2020-02-26 07:59:09 +01:00