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
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
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
Sets
* `-webkit-appearance: none;` for iOS and
* `-moz-appearance: textfield;` for Firefox that also applies
`-webkit-appearance`.
Bug: T247299
Change-Id: Iefc77bba54b85442862176e1875974f19b64193b
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
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
* VectorTabs.stories.js and Navigation.stories.js were updated to
reflect this change.
Bug: T243281
Change-Id: I96a3b9b2c9a8d799a5835de1f296bc1a779803ee
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
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
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
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
- 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
additional changes:
* the jsdoc npm command is removed intentionally to
avoid polluting package.json with too many jobs.
Change-Id: Ie49de1c4b7a40a835ea1b3f8bcdbb779ba919860
* 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
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
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
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
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
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
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
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
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
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
doc.wikimedia.org is a helpful resource when iterating on a codebase.
Now that the Desktop Improvements Project is underway, Vector will be
iterated on heavily. Like MobileFrontend, generate documentation with
Doxygen so that it can be published on doc.wikimedia.org.
Note well that:
- The CALL_GRAPH and CALLER_GRAPH statements have been removed as they
were being set to the default value (NO)
- DOT_FONTSIZE was increased from 10 to 12
Bug: T242779
Change-Id: I7cc2eae2cf950293eee0028873bc6f1c89443977
