Commit graph

241 commits

Author SHA1 Message Date
jdlrobson 5ac25943a2 Refactor: All messages should be listed from skin.json
This allows us easily to identify in templates what messages are
used and where, as well as allow us an easy way to tell when
messages are no longer being used.

Change-Id: I610224d551ebea54ae32e9e79901befe80cfd5ce
2020-08-28 17:12:10 +00:00
jdlrobson e7df44a66d Favor SkinTemplateNavigation::Universal
This hook is run on every page. The SkinTemplateNavigation hook
counter intutively is run only on pages which can exist. I think
it's clearer if we only use SkinTemplateNavigation::Universal hook
and keep the logic for when it runs inside our own code.

Bug: T255319
Change-Id: I0835074a6cadf6e9bdcc45299de37dd9328bf9b2
2020-08-20 16:01:27 +00:00
Timo Tijhof 31c5273ef9 skins.vector.styles: Remove PNG fallback and merge skins.vector.icons module
* Remove the PNG fallbacks for chevronHorizontal-….svg and menu.svg.

  As of T248061, these are no longer needed.

* Added the one line of trivial CSS directly to skins.vector.styles
  instead of through its own module.

  This helps recovers the module cost of vue module deployed this
  week (from  Ib6c8f890fb3d6e7), which is currently empty and unused.

  With T253582, we'll be able to recover a lot more budget in
  this area.

Bug: T258766
Change-Id: I6bc4cf541eefd00e2e428f918664a26da331c1a9
2020-08-13 13:53:46 +01:00
jdlrobson 53d9452795 Move the personal tools and search into header
To support roll out and avoid issues with cached HTML the new
styles for the new search feature are restricted to HTML where
the body tag has `skin-vector-search-header` class.

For legacy mode, we introduce a new class
`skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()`
selector to ensure the styles ship during the phase where cached
HTML can be served. While this will create some display issues in
browsers that do not support CSS3 selectors, all grade A browsers in
our compatability matrix support this.

Bug: T249363
Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-08-11 23:36:01 +00:00
mainframe98 ddc32a5833 Provide messages through skin options
Bug: T259664
Depends-On: Ie52aadd6b7de8c4db66de662f2f03e295c29034d
Change-Id: Ib03c0683aa00d334224e7b3507098dedcc848e44
2020-08-05 10:24:34 +02:00
Peter Ovchyn 7b8bad23f2 Vector manages search functionality and provides config flag
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
2020-08-04 00:06:31 +00:00
jdlrobson 2c74f08d3e Merge SkinVector and VectorTemplate (step 2/2)
Rename SkinTemplateVector to restore SkinVector

Bug: T251212
Change-Id: I7e06a4cc226f3434c0f655212a464b8b98bcc7f4
2020-07-30 12:20:13 -07:00
jdlrobson ee6974ad35 Merge SkinVector and VectorTemplate (step 1/2)
Please note I7e06a4cc226f3434c0f655212a464b8b98bcc7f4 should be
merged at the same time as this patch.

== The background ==
All extensions have been weaned of BaseTemplate hooks in
Wikimedia projects.

This change now means that Vector will no longer run
any BaseTemplate hooks. See the epic T253809 for the
implementation details.

== The change ==
BaseTemplate will now have nothing to do with the rendering of
Vector. The skin version is added to express the significance of
breaking compatibility with 3rd party extensions.

We TEMPORARILY remove SkinVector to retain git blame. SkinTemplateVector will
be renamed SkinVector in the follow up (see 2/2)
Update skin.json to use SkinTemplateVector for the skin (this will be fixed
in a follow up).

The isLegacy method is moved to SkinTemplateVector.

Changes of note:
* html-debuglog is no longer needed. SkinMustache includes this information on
the skins behalf
* html-printtail and html-headelement are now not needed in the master template
and added by SkinMustache
* Skin::getAfterPortlet does not provide the `after-portlet` wrapping element provided
by BaseTemplate::getAfterPortlet so this is added
* SkinTemplate::getFooterIcons does not support the options that BaseTemplate::getFooterIcons
does so any icons which do not have an image must be manually checked for and unset

Known changes to HTML output as a result of intentionally
delegating their output to the core SkinMustache class:
* A new line is removed between the body element and #mw-page-base
* #mw-html-debug-log now appears at the end of the body element
* #printfooter is now a child of #mw-content-text rather than sibling.

Bug: T251212
Change-Id: I4e89beb96f6401ed7e51bafdf0aac408f5a2c42f
2020-07-30 11:18:45 -07:00
Jan Drewniak a8c79f3d52 Add config to disable sidebar state persistence for logged-in users.
Bug: T255727
Change-Id: Id28e0bc5249ba68b5de2a078a259e9964f619ef7
2020-07-17 09:32:21 -07:00
Jan Drewniak 1fac82f895 Sidebar persistence for logged-in users in modern Vector.
- 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
2020-07-09 00:28:52 +02:00
jenkins-bot 36a1516f96 Merge "Implement Page, Workspace, Content, and Article Toolbar Containers" 2020-07-08 01:21:49 +00:00
Nicholas Ray 092a2957af Implement Page, Workspace, Content, and Article Toolbar Containers
This patch closely follows the desired guidelines/desired
styles Alex Hollender has put forth in his prototype, but uses
multiple containers to achieve this look since our DOM order/structure
is different than the DOM structure in the prototype. The following
containers are used, but unlike his prototype, they are sometimes used
more than once:

* Page Container: Contains every other container and limits the overall
max-width of the white part of the page.

* Workspace Container: Contains the sidebar and content container. The
sidebar is displaced ~30 pixels to the start (left) of the workspace
container at all times.

* Content Container: Contains the content. The max-width of this changes
depending on whether you are on a special page/history page vs. other
pages.

* Article Toolbar Container: Contains the article toolbar. The max-width
of this is always the same as the max-width of the article content as we
don't want the toolbar to move when going from the article page to the
history/special page.

Changes to be aware:

* To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is
temporarily feature flagged and defaults to being "off".

* Note that layout-max-width.less is a temporary file made to meet the
feature flag requirement of T246420 (intended to derisk the deployment).
After the deploy, we should merge most if not all of the rules into
layout.less where the max-width design will become the default.

* Per Jon's code review comment, I have relaxed the indenting of
skin.mustache to make the diff easier to reason about. If desired, the
correct indenting can be achieved in a (much less risky) follow-up
commit.

Bug: T246420
Bug: T153043
Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-07-07 18:34:38 -06:00
jenkins-bot 4ae06bff0a Merge "[modern] Fix rendering of main element in IE10 & 11 (again)" 2020-07-07 21:54:17 +00:00
Volker E 9efd8a9268 [modern] Fix rendering of main element in IE10 & 11 (again)
Add 'normalize' module to modern Vector.
In I420e5315aee74f59995c358083f969b059bfe3c0 the commit message
did not reflect the actual change and we added normalize to
legacy accidentally instead of modern. This patch adds it to modern correctly.
In that commit message we said
"Legacy Vector was not upgraded to use HTML5 semantic elements,
therefore does not need the module." however on further reflection
there is benefit to keeping this in legacy as after further changes
made in I4601cc938f7a1 this will bring the same consistency in all
Wikimedia deployed skins.
Following-up I420e5315aee74f59995c358083f969b059bfe3c0

Bug: T256092
Change-Id: I3ba46cb993524e8fa0ad262ab4b6cba829498e87
2020-07-07 21:28:02 +00:00
Peter Ovchyn ac140d53e6 Select initial side bar visibility depends on user login state and defaults
Bug: T254230
Change-Id: If121b6c8187ef6b8562d135bd1c40403be3e9564
2020-07-07 21:11:02 +03:00
jenkins-bot f967641628 Merge "[modern] Fix rendering of main element in IE10 & 11" 2020-07-06 22:03:55 +00:00
Vas Jaremchuk 1874e40d87 Drop wgVectorResponsive support from modern Vector
Move the body of enableResponsiveMode method into the onBeforePageDisplayMobile hook.
Replace BeforePageDisplayMobile hook with BeforePageDisplay hook.

Bug: T254378
Change-Id: I63da1b67bf2b85c644e4af196bf894efc4797433
2020-07-02 22:08:37 +03:00
Volker E df6ed76ec8 [modern] Fix rendering of main element in IE10 & 11
Adding ResourceLoader 'normalize' feature module to the modern styles.
Legacy Vector was not upgraded to use HTML5 semantic elements,
therefore does not need the module.
Similar to Demian's approach with reverted 'html5'
I8f1c79037d14b89982e449708f4f1cefacab4439

Bug: T256092
Change-Id: I420e5315aee74f59995c358083f969b059bfe3c0
Depends-On: I4601cc938f7a10dce4f643e22356f8c5a39e4ac9
2020-06-29 17:21:10 -07:00
Jdlrobson 05f00d2adc Revert "[modern] Fix broken rendering of main and dialog elements in IE9-11"
This reverts commit 3926ffa8ca.

Reason for revert: After consideration of the new task T256520 this shipping a normalize CSS feature seems like a much better approach
to solving this problem, particularly since `template` and `dialog`
are unused in our code.

Change-Id: I20391cc6c1f5a50127cd84bd7c0f17a20ab92528
2020-06-29 20:01:55 +00:00
AronDemian 3926ffa8ca [modern] Fix broken rendering of main and dialog elements in IE9-11
Adds the new ResourceLoader feature_file 'html5' to the modern styles.
The legacy layout was not upgraded to use HTML5 semantic elements,
therefore does not need these.

Bug: T256092
Depends-On: I3e4abb5fc8e55b7138fc1c86543777c845bed88e
Change-Id: I8f1c79037d14b89982e449708f4f1cefacab4439
2020-06-26 17:17:07 +00:00
AronDemian 2ccc975f0a [modern] Move sidebar checkbox above content, sidebar button into header
- Sidebar's checkbox hack CSS selectors adjusted.

Bug: T246420
Change-Id: I1cc1ad4eb1938c4931b1ae881b3878fbd6bb7a39
2020-06-23 07:09:38 +02:00
Ammar Abdulhamid a04fc71f30 Vector: Use OutputPageBodyAttributes hook to add body attributes
This means dropping usage of Skin::addToBodyAttributes method
from Skin to pave way for its deprecation/removal.

The parent method is no-op, so this will not create duplicate with
the hook

Bug: T255698
Change-Id: Ieeccdd9ec3fdb3e3fc1a3016cfa87e0b8364aa3a
2020-06-18 14:30:40 +01:00
AronDemian abf886d2b9 Drop VectorUseSimpleSearch config flag
For compatibility with gadgets always outputs the simpleSearch ID.

Bug: T254620
Change-Id: I0ed456f90f066129016f798a3ce65ba52bfc11e8
2020-06-06 23:16:07 +02:00
Stephen Niedzielski a0d2c2497b [fix][RTL] flip menu collapse button icon
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
2020-06-03 17:09:38 -06:00
Volker E fd250975c4 Fix misconception on icon coloring
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
2020-06-02 23:06:49 -06:00
Volker E 4200a8665c Naming convention using 'skin' as entrance point
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
2020-05-28 20:58:01 -07: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
jdlrobson 5b31c49e15 BaseTemplate:makeListItem is deprecated
Use SkinTemplateNavigation hook instead and copy the collapsible
behavior to the menu function

The code inside getSkinData that checks VectorUseIconWatch is
redundant as it duplicates checks already inside
SkinTemplate::buildContentNavigationUrls
It is enough to simplify check whether watch or unwatch is
present in the array.

Bug: T251212
Change-Id: If6b10b0ddcbd4b21dd13a2813e60b604c3a23415
2020-05-19 16:02:01 -07:00
Stephen Niedzielski 108393daf1 [dev][Legacy][JS] Split Legacy mode JavaScript into new ResourceLoader module
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
2020-05-11 15:29:56 -06:00
Stephen Niedzielski 8a915e6829 [config] Temporarily default to Legacy mode
For all accounts, temporarily default to the Legacy skin version. This
is to prevent regressions for third-parties until master has a complete
logo and is in a shippable state. This change should be reverted as soon
as interim changes in Latest mode are finished.

Do these defaults need to be set elsewhere for development?

Change-Id: I3c39352efe276b8574ab5d27fdab22901bc30b46
2020-05-04 07:25:38 -06:00
Stephen Niedzielski 4b9d307c33 [doc] fix reference in VectorDefaultSkinVersionForNewAccounts config
Nick Ray identified in I7982b4c34283ba81d0232ee6f501c44cf0a74b98 that
the config documentation for `VectorDefaultSkinVersionForNewAccounts`
incorrectly referenced `VectorDefaultSkinVersion` for existing accounts.
This should be `VectorDefaultSkinVersionForExistingAccounts`. This patch
fixes the reference.

Bug: T251415
Change-Id: I840831773f4b5996c4b7ffb9f29576830d55916f
2020-05-01 07:58:16 -06:00
jenkins-bot 337244ebdf Merge "[modern] A new version of Vector with a new logo" 2020-04-30 21:47:44 +00:00
jdlrobson 6a9ee465bc [modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.

Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.

Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.

Sample config:

$wgLogos = [
        'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
        'tagline' => [
                'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
                'width' => 117,
                'height' => 13,
        ],
        '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
        'wordmark' => [
                'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
                'width' => 116,
                'height' => 18,
        ],
];

Coauthor: Aron Manning

Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-04-30 14:11:54 -07:00
Stephen Niedzielski 709772fa12 [fix] "Existing account only" skin version config
de76ab5 added the config,
`$wgVectorDefaultSkinVersionForExistingAccounts`. Its usage in
`Hooks::onUserGetDefaultOptions()` was invoked not only for existing
accounts but anonymous users _as well._  This is a bug, due to my own
misconceptions about the hook, that went against both the config's name
and its documentation.

Unfortunately, user sessions are unavailable in
`Hooks::onUserGetDefaultOptions()` so it does not seem to be possible to
determine whether the active user is an anonymous or existing account.
This patch drops the hook and centralizes all version determination
logic in SkinVersionLookup::getVersion(). SkinVersionLookup requires a
the active User object and can make the anonymous / existing account
determination by checking login state.

The issued was identified while responding to review feedback given by
@polishdeveloper / @pmiazga in
I52d80942b4270c008d4e45050589ed9220255a50.

Bug: T251415
Change-Id: I7982b4c34283ba81d0232ee6f501c44cf0a74b98
2020-04-29 18:36:03 +00:00
Reedy 46549db31e Move some more classes to AutoloadNamespaces
Bug: T187154
Change-Id: I7e9407c1b0e03ccb699e4a11b6b44529d70fee3d
2020-04-18 03:59:38 +01:00
Volker E 2a8a116587 Bump Vector to depend on MediaWiki 1.35.0
To minimise reports from users with mismatched skins an MediaWiki and given the
pending changes anticipated by the updates to Vector, we will bump Vector's version.

This repo is not meant to have supported 1.31 in master for years
(since the REL1_31 branch point, which for this repo is f0327dc55 from 2018-04-17 yet very few
backports have been made to this repos REL1_31 branch.

This will massively reduce work for Wikimedia development teams; 
we don't need to try to maintain backwards compatibility.

Change-Id: Ie4635fa0a7cbc2d115b2093bc5bc1a72a160afaf
2020-04-16 18:36:17 +00:00
Stephen Niedzielski c9d5b2e4fb [dev] [JS] Move JavaScript to package modules
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
2020-04-10 09:39:25 -06:00
Stephen Niedzielski d1072d0fdf [dev] add skin version query parameter override
As described in the readme but not implemented until now, this patch
enables the skin version to be specified as a URL query parameter. This
is useful for testing both skin versions during development and on wiki,
as well as enabling sharing URLs with a specific skin (Vector) and skin
version (1 or 2).

Obtaining the actual skin version requires tying together three input
sources, WebRequest, User, and Config. It seems simple but it'd be easy
to botch. For this reason, a helper class to correctly interrogate them
and tests are provided.

Bug: T244481
Change-Id: I52d80942b4270c008d4e45050589ed9220255a50
2020-04-02 16:22:26 -06:00
jdlrobson 4615f7d6d1 skins.vector.styles.legacy needs to define legacy feature
Caused by If32b59036e5cd62cbb804944ca93fa1a101c5129. Looks like
that patch clashed with Ic7af947cfd5a5df4218f006232ede4ee7ed36c62
which touched same good without a merge conflict.

Bug: T247566
Change-Id: I0c918842ac2243e47bda702fb8fdc19ce57b005e
2020-03-18 20:20:43 -07:00
jenkins-bot f1d8a9e472 Merge "Ship different ResourceLoader module for different versions" 2020-03-12 21:30:38 +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 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 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
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
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
James D. Forrester 1cbb7ee653 Follow-up 2dbe4d7: Stop documenting wgVectorPrintLogo, never read
Change-Id: Ia968e72e1672e9afb4a11ddbfc89ef7e891dc0d3
2020-02-18 13:22:35 -08:00
jdlrobson 2dbe4d7af1 Drop usage of mediawiki.skinning.interface module in favor of SkinModule
Thanks to the dependent change, the print logo is now provided
in core so we can remove the custom Vector ResourceLoader module

ResourceLoaderLessModule is replaced with a ResourceLoaderSkinModule
and gains the features capability replacing the need for
'mediawiki.skinning.interface' making use of the changes added in
6845912bcf1.

Note that for cached HTML both 'mediawiki.skinning.interface'
and skins.vector.styles will be loaded. We can avoid this
by renaming skins.vector.styles if necessary (but I'm not
sure if we'd want to do that)

Bug: T232140
Depends-On: I00899c16c0325f36b671baf17e88c2b5187b3526
Change-Id: I569e0d800e147eabc7852567acd140108613f074
2020-02-05 10:02:47 +08:00
jdlrobson 58457f8ae8 Dev: Vector is rearranged like other skins and extensions
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
2020-01-28 16:57:38 +08:00
Stephen Niedzielski 11d60dd88a [hygiene] [skin.json] simplify BeforePageDisplayMobile hook
Since only one hook is specified for the BeforePageDisplayMobile hook,
replace the array of hooks with the single hook used.

Change-Id: Ic89a262f3fdba93c3ee10387b3b05137ce9dc4ad
2020-01-17 20:08:01 +00:00
jenkins-bot 9cf4eb0e7e Merge "Hygiene: remove vectorConfig and use the getConfig" 2020-01-13 22:43:12 +00:00
Piotr Miazga 02d4e4929f Hygiene: remove vectorConfig and use the getConfig
The SkinVector implements IContextSource, thus it has to provide
the getConfig() method. Vector skin is currently using
it's own `vectorConfig` in one place and it passes the VectorConfig
to the VectorTemplate class. Sadly the VectorConfig is the same
thing what $this->getConfig() provides. There is no need to make
this code more complex by handling two different config containers
which at the end are the same GlobalVarConfig instances.

If we decide to handle VectorConfigs differently, let's thing it
through, for now we should simplify code and remove all uncessary
logic. Thanks to that, there is also no need to override the
setupTemplate().

Change-Id: I89c8a77f7d96f867c8c72e61f9e104e14d9512d9
2020-01-13 23:01:42 +01:00
Ammar Abdulhamid 672dd7b9a8 Upgrade skin.json schema to manifest_version 2
Bug: T242469
Change-Id: Idb96560efc8517ee8d353e856eb3a272af51ed4c
2020-01-13 04:40:02 +01:00
Timo Tijhof b7b8c77c1e Update ResourceModuleSkinStyles for jquery.ui change
Follows-up I9070ad905 in MediaWiki core.

Depends-On: I9070ad9052319f5ca2bc67e0ffaf502db0f13ceb
Bug: T219604
Change-Id: Ib13bf24f4d8fa8da932b57439e2b52ec10545f3c
2019-10-16 23:44:40 +01:00
Timo Tijhof e5c837e3eb Remove unused 'jquery.tabIndex' dependency
Follows-up bfc5a57.

Bug: T226148
Bug: T233676
Change-Id: Icb4a2458c40482a45172ce09f6ec14c4f7d1ccdf
2019-10-04 00:07:44 +00:00
DannyS712 5de3655dfc Fix typo in skin.json ResourceModuleSkinStyles
Bug: T234003
Change-Id: I75ca8af43f68ea88eaed2244abac312de6d3edc4
2019-09-27 18:35:00 +00:00
Timo Tijhof f169c8b3f9 Use mw.util.debounce() in collapsibleTabs.js
Bug: T213426
Depends-On: If370b959b2617d0f506ac3ed344af8c6a667e70d
Change-Id: Ib006a570f9405bbd48bb7e81a3d98b562df22b00
2019-09-11 19:29:46 +00:00
Isarra e08fc06fbd Style RelatedArticle cards
If RelatedArtcles uses the SkinAfterContent hook (depends-on patch)
and we move the hook out of the main content block (parent patch),
it needs some styles to remain consistent.

Bug: T181242
Change-Id: I2c5d4034890a5164896c1ef0570b31465a275890
Depeds-on: Iebd759c0d1a536768d18953f372664df762d9e04
2019-06-20 18:14:27 +00:00
Ed Sanders 10ed1061bf Remove jquery.ui.spinner skin styles
Bug: T219403
Depends-On: Ifed9074cb49d146b4cd7e366bfc028854daf027b
Change-Id: If10a09e2bd2266244c4916ce480a77048de8736d
2019-03-28 19:19:41 +00:00
Volker E 221b0b165a Remove obsolete Special:Preferences styles after its transformation to OOUI
These removed styles match no elements in the
Special:Preferences page since the OOUI transformation.

Bug: T208923
Change-Id: Iccbdcea5d5f769edfd8640c536e31289da9ee954
2018-11-07 12:50:57 -08:00
Volker E 7f308fa6b2 Restructure 'screen-hd' CSS rules
Concatenating all `margin-left` rules. This has 0 byte-saving
impact after gzipping at all, it's just about code style.
Also applying coding convention on media query in 'skin.json'.

Change-Id: Ica8557fcd519dea913fe4c30b1be1bfe0d0919c0
2018-10-13 12:02:06 -07:00
Timo Tijhof 2fa3b7f69a Move class files to includes/
Cleans up the top-level directory a bit.

Change-Id: I29d3b8b7098def77e643232a386d8ba834d35704
2018-03-12 16:52:48 -07:00
Kunal Mehta 1c2eeb1fdc Use SPDX 3.0 license identifier
SPDX released version 3 of their license list (<https://spdx.org/licenses/>),
which changed the FSF licenses to explicitly end in -only or -or-later
instead of relying on an easy to miss + symbol.

Bug: T183858
Change-Id: Ie8a20191fd9505eb5f0a6a3a010a602d2a44a58e
2018-02-16 10:41:02 -08:00
Tulsi Bhagat 336e7e5084 Removed deprecated position statements from resource loader module
Bug: T184257
Change-Id: I7be029b0ca3c44e1fb049d5987742c83585b54a7
2018-02-12 21:09:09 +00:00
Bartosz Dziewoński 7abf395766 Revert "Revert "Print styles in Vector are no longer feature flagged""
The revert looks like it has been performed incorrectly,
and I found a much better solution to the task anyway.

This reverts commit 7d2fc6df27.

Bug: T178028
Bug: T183640
Change-Id: Ib46c69b061b522fc6365459297ad3f3d4f4d0d0d
2017-12-27 11:26:29 +00:00
Paladox 7d2fc6df27 Revert "Print styles in Vector are no longer feature flagged"
This reverts commit c863b94302.

This breaks the MediaWiki Installer ui.

Bug: T183640
Change-Id: I9f249db503c4df6ab9d87b97d9f2d1dca80744ba
2017-12-23 19:17:49 +00:00
Umherirrender 1c0725da94 Rename file Hooks.php to match class
Change-Id: I59058d580d6b4ced5b7744c46baf074042467df7
2017-12-09 21:32:56 +01:00
jdlrobson c863b94302 Print styles in Vector are no longer feature flagged
Remove feature flagging of print styles

Changes:
* Merge experimental module into skins.vector.styles
* Update skins.vector.styles RL class to support LESS variable
* Remove feature flag class in HTML and LESS (update indents in
LESS file)

Bug: T178028
Change-Id: I8d5c59c5c9f415ffbd7fa41a512cbea87887e9e7
2017-11-02 11:04:58 -07:00
Baha 413870d350 Add print logo
Logo cannot be displayed as a background image because it won't be
visible in print unless the user prints backgrounds too.

A sample configuration looks like this:

$wgVectorPrintLogo = [
	'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
	'width' => 174,
	'height' => 27
];

The solution presented in the patch has a downside of not being able
to scale images down if their dimensions are bigger than the
dimensions specified in the config variable. For example, if we want
to go with an SVG image, then IE8 won't be able to render it.
Alternatively, if we want to go with a PNG image, its dimensions need
to match the exact dimensoins in the config variable, otherwise the
image will show up larger or smaller depending on its dimensions.

A more complicated approach of scaling images using `transform: scale`
hasn't been used because we wanted to keep the configuration simple
while supporting the majority of our users. With the current change,
we can reuse the existing configuration options from Minerva, for
exmaple. It would look something like this:

$wgVectorPrintLogo = [
	'url' => $wgMFCustomLogos['copyright'],
	'width' => $wgMFCustomLogos['copyright-width'],
	'height' => $wgMFCustomLogos['copyright-height']
];

Bug: T169826
Change-Id: If8f9f8d95fd3c955ece37d6c8ab6995596189667
2017-08-01 10:55:53 -04:00
jdlrobson 3a3e7ac046 Feature flagged print styles
These are feature flagged to allow editors to test before making
them the default. A class is added to the body tag to allow us
to switch between old and new styles at a later date.

To start with we introduce some typography improvements.
Further iterations will focus on other elements.

Changes:
* headings were previously diluted in the body content and difficult to spot.
This evens out the spacing between last content and its own content block.
* clear ownership of <p>s with its heading
* We would like to match Latex style body typography with single column.
The new styles reduce the number of pages by around 20-25%
* hyperlink underline -
This is a community requested feature. We do not use color in print styles
because it's printer friendly. Because of this, it is not possible to indicate
blue links in articles. If a user wants to know if this article exists on wikipedia,
it's not possible given solution.
We would like to underline the <a> tags in print styles.
it's better for accessibility as well.

Bug: T169823
Change-Id: I453ae43099796a74c39d965b796f2fa13942106c
2017-07-20 11:54:55 -07:00
jdlrobson e53b4cf522 Vector should operate in responsive mode when the mobile skin
With MobileFrontend installed applying
?useskin=vector&useformat=mobile will ensure that responsive vector
mode is invoked.

I'm keen to do this, as it would help to have more examples of skins
that are MobileFrontend aware as part of the work I am doing in
T166748

Change-Id: I81edd855a5e96400d1179fb10907fcc30ea43ef7
2017-07-03 15:57:49 -07:00
Jack Phoenix d575e3878a Optimization: move styles specific to redirect pages out of common.less
HT MatmaRex

Change-Id: I6169692547378379dbc935976ad83cf4f366eeeb
2017-06-15 16:13:42 +03:00
Ed Sanders 53cabcfe66 Use new placeholder mixin
Also fix site search to use use the same shade of grey
as is used in OOUI and mw-ui.

Depends-On: I96686bb53cee1a833db8f4d0b691d5e4a1b82885
Change-Id: Ib6437b13760e8c13d06927cb45ef674a5f301e35
2017-02-23 16:37:16 +00:00
jo12bar 565011c5c4
Use global variable for tablet media query in responsive.less
The Vector skin's responsive mode originally used 768px as a hardcoded
value for the media query set up in skin.json. I attempted to
switch to the @deviceWidthTablet global Less variable provided by
MediaWiki inside skin.json, but this would not work under any
circumstances. Evidently, ResourceLoader does not compile Less, so
it just ignores the media query if it contains a Less variable.
I was forced to leave the media query within skin.json blank
and hard-code it into responsive.less. When using the
@deviceWidthTablet variable inside responsive.less, it worked
fine. Obviously this is not ideal, as I am bypassing ResourceLoader,
but I have no other choice. See this comment (T124994#2864136) for
details.

Bug: T124994
Change-Id: I28565e5ba88be41dcd9cb38fc09cffe29d263e06
2016-12-13 15:27:38 -08:00
David Lynch d7bb03f11d oojs-ui.styles is now oojs-ui-core.styles
Bug: T127742
Change-Id: Ic32f721cd5fd5d7cf524c83fefd39c490a94f2d1
2016-02-29 10:59:59 -06:00
Matt Russell f71e92733a Remove mediawiki.sectionAnchor
The feature was reverted in 5205405385397782b5288b429f49c9d8c97ac6c6 almost a
year ago, so it's pretty safe to say this styling is unnecessary.

This essentially reverts 2466e550e5.

Change-Id: I88b6465d5554d334cc34893bb0acf548a5fc440b
2016-02-23 18:49:01 +11:00
jdlrobson 3603dce8ea Allow styles to run on mobile
Any skins. prefixed ResourceLoader style modules are okay to run on mobile
given they should only run in the context of the skin.

See I7c000165c61a4bd2094f23b6ffd96335f7f7818f
with that patch and the following enabled:
$wgMFDefaultSkinClass = 'SkinVector';
$wgVectorResponsive = true;

you'll be able to use the Vector skin in mobile mode.

Change-Id: I7b796385ce9786c2c7900e5acc36b1b4dbbb5b97
2016-01-29 16:16:50 +00:00
Bartosz Dziewoński 7f977f572d Actually apply personal bar z-index hack to modal OOUI window managers
Follow-up to 15a990b888. That didn't
work, the module is not named 'ooui'. And had it worked, it'd have
removed all the regular OOjs UI styles from the Vector skin, by
replacing them instead of adding.

Bug: T105300
Change-Id: Ic11147e9800788152621402eef7819191024aa71
2015-12-18 22:30:23 +01:00
Derk-Jan Hartman 33d736d0f2 Rework Vector style of Preferences to prevent FOUC
Depends on: I24d9b16

Bug: T115692
Change-Id: I59f0f4538132e60a457c5c93139c04fff24fd2b2
2015-11-08 19:43:21 +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
Kunal Mehta d65660be53 Add MediaWiki version requirement to skin.json
Change-Id: I081e837641119bff4a16e442302f0e4503c5d04a
2015-09-23 08:31:56 -07:00
Ed Sanders 15a990b888 Apply personal bar z-index hack to modal OOUI window managers
Bug: T105300
Change-Id: I1b618b76f0ed917aad74394881115399d9636030
2015-08-08 14:15:06 -07:00
Kunal Mehta ac43e74cfb Unbreak styles for installer
The installer hardcodes and expects to find a "skin.vector.styles"
module in skin.json, so moving it into a hook broke the styles. Moved it
back into skin.json, and left a comment so future developers don't make
the same mistake.

The responsive code is now a separate module,
"skins.vector.styles.responsive", which is only added to the page output
if VectorResponsive is enabled.

Bug: T106747
Change-Id: I7540b7871531ef650e799f012477cef6cdd32fb7
2015-07-23 17:05:26 -07:00
Jack Phoenix cec2337aac Make Vector more responsive
This functionality is off by default, behind a configuration variable
($wgVectorResponsive) by popular developer demand.

CSS/LESS code by James Hare, with tweaks and testing by Jack Phoenix.

Bug: T46387
Change-Id: Ib611357bbce739b1d193abaf89c228ba52613d6a
2015-07-18 16:54:33 +00:00
Kunal Mehta b7df704d1e Set manifest_version in skin.json
Bug: T100745
Change-Id: I0ed0f42d5cb40b26043b829c9b85a15a19ce53c0
2015-06-08 13:28:29 -07:00
jenkins-bot d564596781 Merge "Skin styles for mediawiki.notification should not be overriden" 2015-05-07 13:38:02 +00:00
Gilles Dubuc d4fef458af Explicitly define module position
Style modules currently added through addModuleStyles default
to being in the head ("top" position). This is an unhealthy default,
since only critical styles that are needed at pageload should be
in the head. In order to be able to switch the default to "bottom",
existing module positions have to be defined explicitly.

Bug: T97410
Change-Id: Ic3d188fe5a833a97027a06cd62c4acef691669bf
2015-05-05 17:36:36 +02:00
jdlrobson e1ce793b53 Skin styles for mediawiki.notification should not be overriden
Should be concatenated.
See: Iba35692d38a8248096153146bc296b1079352f01

Change-Id: Ib4891ff0b3b123d49871b5887d05b885bcea6b4f
2015-05-04 21:04:08 +01:00
paladox 23f2c6a8fc Add skin.json, deprecate and empty PHP entry point
Bug: T87875
Change-Id: I0e298137e27e2a4c7ced5213ea90aef4cd991376
2015-04-30 20:02:32 +01:00