Commit graph

150 commits

Author SHA1 Message Date
jdlrobson e84809c44b Cleanup: Standardise msg keys
Keys prefixed with msg- should relate to i18n keys. Fix the existing
template variables where that's not the case.

Change-Id: I33587a09a9803a3667eaeea95ce3e1753439f413
2020-06-01 21:05:56 +00:00
jdlrobson df2895f610 Cleanup: Use consistent naming in SearchBox
We have conventions about template variable naming.

* Drop camel case
* Prefix message keys with `msg-` followed by message key name
* Prefix HTML with `html-`

Change-Id: I34f04f3d217dc8caa4dcc29e60058951a6555b1e
2020-06-01 20:11:14 +00: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
jenkins-bot 15a30c26f8 Merge "[feature] add menu button to toggle panel visibility" 2020-05-28 02:57:14 +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
jenkins-bot 6a1458eada Merge "Reduce distribution of legacy classes" 2020-05-26 21:01:55 +00:00
jdlrobson cb7ca11274 Reduce distribution of legacy classes
The .menu class historically only needs to apply to dropdowns.
the .vectorMenuCheckbox is inconsistent with the other classes on the
menu so we should begin its deprecation.

Bug: T253329
Change-Id: I00b4d2fd795195cd9c8add650a3b3cafdced5465
2020-05-26 20:22:08 +00:00
jdlrobson d49eb1e0ff Merge EmphasizedSidebarAction.less into Sidebar.less
The opt in link is part of the sidebar in the current modern version
of vector. The legacy sidebar has been split out and frozen. For this
reason I think it makes sense to move the styles for the button into
the sidebar stylesheet.

The class name is renamed to reflect the hierarchy. We are not using
BEM but we are using hyphens to describe location so the newly proposed
names `mw-sidebar` and `mw-sidebar-action` seem more applicable than
the previous generic class names.

This doesn't impact caching given anonymous users cannot see the opt
in/out link.

Change-Id: I2991e941592a0678f40c73bb6daeab71ada6b7c3
2020-05-26 18:53:25 +00:00
jdlrobson fbdda96d22 Drop unnecessary phan suppression
This is no longer needed with the changes in core
(Ie33f85a77299da8f3b98ab8b363761d1f8277708)

Change-Id: I103ab2d8e9f3aa65550823829b60ad9a0a04b7eb
2020-05-26 11:03:08 -07:00
jenkins-bot 30047cc70e Merge "BaseTemplate:makeListItem is deprecated" 2020-05-21 21:31:39 +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
jenkins-bot 35b0675c5d Merge "[dev] use skin name constant instead of string" 2020-05-18 22:41:13 +00:00
Stephen Niedzielski 4d96738c7b [dev] use skin name constant instead of string
Use centralized symbol for "vector" instead of hardcoded string.

Change-Id: I44d6b3e64cd424b6624ce5c050616e5bb281fbc8
2020-05-18 14:56:13 -06:00
Volker E eabfe6d16e Make class attribute optional when empty
Change-Id: I5a9d81f650dfa4178e7b1e4e835ef5efb5acacf0
2020-05-17 17:37:57 -07:00
DannyS712 6ac9079202 VectorTemplate: SkinTemplateToolboxEnd hook isn't deprecated
Bug: T252906
Change-Id: I6eedc41d02b9f64cefb9c8d749226489ada6aae2
2020-05-15 20:56:24 +00:00
Stephen Niedzielski 0fac9045ac [dev][Legacy] split sidebar Mustache and Less
Split out the sidebar in advance of significant Latest mode only
changes.

The Less split was made by adding a new Sidebar.less file that imports
the Legacy implementation.

The Mustache split was made by file copying the existing implementation
into a legacy/ subfolder. Both the Legacy and Latest implementations
were then stripped of templates not applicable to their modes.

These changes are aligned with the splits for JavaScript.

Bug: T246419
Change-Id: Ib82769ea16bfc09efe8a088220aab55bdde0d381
2020-05-15 18:05:30 +00:00
jdlrobson 4086d850e5 Show empty language portal if HTML has been added after portal
Bug: T252800
Change-Id: Iefe0ed2728b6fd08da8f3e58edbfaae7d27d1a2d
2020-05-14 15:25:38 -07:00
jdlrobson 0846c8463d Allow plain text labels in side bar
Follow up to I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f

Bug: T252727
Change-Id: I91e6e535e2da672b41d31cee709084beb87af47a
2020-05-14 08:23:49 -07:00
jdlrobson e048c2a729 Refactor: Simplify and standardize menu definitions
* Standardise the menu markup. This means all menus in Vector will now
be wrapped in a div and will have a heading.
* All menus now have the vector-menu class. Styles specific to personal tools
are moved to layout since these are concerned with placement.
* The ul class will always have menu class.
* emptyPortal class is generalised into vector-menu-empty for consistency
with other classes and moved from common.less into Menu.less
* Standardise hooks - BaseTemplateAfterPortlet can now be run on any
menu.

Changes to HTML:
* lang and dir attributes are moved from the h3 up to the div element
.vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3
* for non portals ul.menu" is now wrapped in a div.vector-menu-content

This change does impact the following CSS selectors which will need to be updated:

I see no matches for these selectors in code search.

```
 #p-variants > ul
 #p-namespaces > ul
 #p-personal > ul
 #p-views > ul
 #p-cactions > ul

```
Using global-search.toolforge.org I see one match
for p-variants, 26 for p-namespaces, 30 for p-personal,
36 for p-views and 7 for p-cactions. I see this as acceptable
breakage provided a user notice is sent out which it has been
(T252447)

Bug: T249372
Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145
2020-05-12 15:17:38 -07:00
jenkins-bot 4e661112e8 Merge "[dev][Legacy][JS] Split Legacy mode JavaScript into new ResourceLoader module" 2020-05-12 22:05:18 +00:00
Volker E 9581bdaa09 Revert "Use semantic HTML5 elements where applicable"
This reverts commit 125af06692.

Change-Id: I21fa5460017235c43f6ccf0ce815364d50bf1e34
2020-05-12 00:05:30 +00:00
jdlrobson 4679efc000 [build] Disable phan rule (for now)
This unblocks reverting HTML5 elements.
A longer term fix is brewing in
If6b10b0ddcbd4b21dd13a2813e60b604c3a23415

Change-Id: I85659d22dc2f2a803c2a7b1e57033b18900353df
2020-05-11 23:09:24 +00: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
jdlrobson ace1ffaba1 Minor: Remove unused Portal.mustache
Should have been removed in
I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f

Presumably got readded while addressing a rebase conflict

Bug: T249372
Change-Id: Iaff98d8b4770e82277463f39800dd7571e1ed50b
2020-05-08 10:05:18 -07:00
jenkins-bot 60a13aa4ac Merge "Don't "break" the variants by breaking early" 2020-05-08 15:29:49 +00:00
AronDemian b0281fa450 Add CSS class on body to mark the skin version
Adds class 'skin-vector-legacy' for legacy layout.

Bug: T251648
Change-Id: I52938689fc7d99a710510349aaa573a87864a367
2020-05-08 16:30:26 +02:00
jdlrobson 01dbda42ca Don't "break" the variants by breaking early
Hope you enjoyed the pun, as this is an unfortunate bug to have
slipped into production.

While previously we breaked after finding the selected items
prior to I098e6921e8f7ef65dacacf09b9c25f70c945e58e we shouldn't do
that any more as we're using the same loop to iterate through and
generate our items!

Bug: T251521
Change-Id: I92c28e8fba684d7977dfd207ff939ac07a7a07af
2020-05-08 07:21:59 -07:00
jdlrobson 9f2ca0d072 Refactor: Portal is also a Menu
To complete the refactor, the Portal is also refactored
as a Menu using the getMenu function.

An old code path supporting portals outputted by hooks with
strings is marked as deprecated to simplify this code in future.

array-portals-first -> data-portals-first (the value is not
an array)

Changes:
* $this->getLanguages and  $this->getToolbox() always returns an array (see BaseTemplate)
but we previously supported portals made using raw HTML. Let's move away from that
behaviour and deprecate it.
* Hooks are moved into buildSidebarProps and marked as deprecated where possible
(SkinTemplateToolboxEnd). SidebarBeforeOutput can be used instead.

Bug: T249372
Change-Id: I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f
2020-05-07 16:56:59 -07:00
jenkins-bot 6f57028553 Merge "Use semantic HTML5 elements where applicable" 2020-05-07 22:14:50 +00:00
Volker E 125af06692 Use semantic HTML5 elements where applicable
Also remove superflous `role` attributes in modern Vector. Only leaving
`role="contentinfo"` on `footer` to address a known VoiceOver bug.
And leaving `role="main"` in legacy Vector due to possible old
Internet Explorer and screenreader combinations, which we can
test specifically for with this separation.

Bug: T66477
Bug: T252090
Change-Id: I422ef2a4cf7aa94e5cac4d95efb4b2d2c8c6617d
2020-05-07 14:45:35 -07:00
jdlrobson 4dfe4a97c9 Class names with hyphens preferred over camel case
The classes were recently changed so provided this is merged before
next branch cut no need to worry about cached HTML.

Bug: T249073
Change-Id: Ib20c7a359bda858df89ebb245e682d321dd5acd0
2020-05-07 14:43:13 -07:00
jdlrobson 9cd47c5339 Refactor: VectorMenu merged in to Menu
Bug: T249372
Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a
2020-05-06 16:09:22 -07:00
jdlrobson a43e79c1d3 Refactor: Merge VectorTabs into Menu
Bug: T249372
Change-Id: Ib6ae191b31564dc23a3b1d6aedf48cbaaad006af
2020-05-06 10:23:58 -07:00
jdlrobson a3bb097cf8 Refactor: Generalise personal menu
the PersonalMenu should be generalised. In future we will use it as
the template for all menus

Bug: T249372
Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
2020-05-05 17:34:44 -07:00
jenkins-bot 4086a4c824 Merge "Refactor: Remove indirection (where alternatives exist)" 2020-05-05 20:34:03 +00:00
jdlrobson 7efe7c3468 Refactor: Remove indirection (where alternatives exist)
The get method while well intended, adds an unnecessary level of
indirection to our code and can't be easily typechecked. Using
the methods directly (which if you review core code, these all
directly map to those methods) makes the code much more of a pleasure
to read.

Bug: T251212
Change-Id: Ibb2a69801d3b004a0a174308d3ac04d1d228807c
2020-05-05 13:07:14 -07: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
jdlrobson 97121a228f [Minor] Favor msg and getConfig over getMsg and ->config
Change-Id: I69ff5b8fc51292f745e0aa496b8129053c9d2f23
2020-05-01 19:11:58 +00:00
jenkins-bot 48b680744d Merge "Use consistent function names to SkinVector" 2020-04-30 22:16:06 +00: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
jenkins-bot ec6307e669 Merge "[fix] "Existing account only" skin version config" 2020-04-29 18:55:30 +00: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
Sam Smith d4c2e2b441 [Hygiene] featureManager: ComplexRequirement -> Requirement
FeatureManager::registerRequirement registering an instance of
SimpleRequirement with ::registerComplexRequirement was awkward.

Changes:

* Rename FeatureManager::registerRequirement to
  ::registerSimpleRequirement, which is exactly what it does!

* Rename FeatureManager::registerComplexRequirement to
  ::registerRequirement

Bug: T244481
Change-Id: I612af959cee4cdcd0bdcda51a81b86ed61ee2e16
2020-04-29 15:26:50 +01:00
jdlrobson d9f4a2b041 Use consistent function names to SkinVector
In future we'll convert VectorTemplate to SkinVector. In preparation
for this we create wrapper functions getMsg and getConfig so that
the interface for VectorTemplate is more similar to SkinVector.

Bug: T251212
Change-Id: I1f839d3147499d67e1c7cf71cf934bb7d20beedb
2020-04-28 15:32:06 -07:00
jenkins-bot db29a88ee0 Merge "Add buildSidebar method" 2020-04-28 20:49:31 +00:00
jenkins-bot 1a62d2d264 Merge "[cleanup] Drop empty class attribute from #footer > ul elements" 2020-04-28 18:41:40 +00:00
jdlrobson df681e031d Add buildSidebar method
Move all the sidebar generation logic into a new VectorTemplate
function.

The name mirrors the function name in SkinVector. In future,
( I7a14f74728703c50874935e9d77b35ad9434b436)
we will move this code into SkinVector where it will be able
to call parent::buildSidebar()

Bug: T251212
Change-Id: I0a4838120f6ffd3d3d798f876e3463a3f16af95b
2020-04-28 10:44:39 -07:00
AronDemian f6cbbbfd95 [modern] Add Header element and styles
- Removed `#mw-head-base`.
- `#mw-page-base` -> `.mw-header-placeholder`.
- `#mw-head` moved down to `@height-header` to make space for new header.
- Content moved down to `@height-header + @height-tabs`.

Added Less variables:
- @height-header: 69px;
- @height-logo-icon: 50px;
- @height-header--inner: 54px;
- @height-tabs: 2.5em;

Style splits:
- Added Header.less
- @height-header: 2.5em;

Bug: T246170
Change-Id: I07280c4c7a2054439153e76359f712281049df0b
2020-04-28 18:15:39 +02:00
AronDemian 487eda02f4 [cleanup] Drop empty class attribute from #footer > ul elements
Change-Id: Ice0241b054cbc296e9f0adf1d2920023316c8ca0
2020-04-28 02:05:30 +00:00