Commit Graph

90 Commits

Author SHA1 Message Date
Jan Drewniak c26ae0f965 Move "logout" button to bottom of user links menu in modern Vector
For modern Vector, removes the logout link in the user menu and places it
below that menu by appending it to the html-after-portal property of the
skin data.

Also modifies the `.vector-user-menu-login` style to accommodate both the
login and logout button.

bug: T281791
Depends-On: If82a736e37174aaadd0ff07019a1fae3759a9e51
Change-Id: I7675230e09a50eaeab448182329f850ad2689514
2021-06-14 23:40:19 +02:00
bwang 34344adbf5 Remove UserMenu and use Menu template instead
- Adds html-before-portlet to Menu.mustache
- Removes UserMenu.mustache and type def
- Factors out getCreateAccountHTML and getLoginHTML for generating HTML used in Menu
- Scopes UserLink template data under "data-vector-user-links"

Follow up to: 298f945983
Bug: T284584
Change-Id: I91104eb7c4fd12756e770561666f4c9a64da57d6
2021-06-11 09:41:58 -05:00
Clare Ming b80d97b1e8 Prefix user links menu items with icons
- Add logic in Vector hooks to prefix user menu links with icons.
- Add method for getting icon name based on user menu key.
- Add constant to map user menu keys to associated icon references.
- Include icon treatment for both logged in/out users.

Bug: T276562
Change-Id: Ia69366eb4fbd50b48fe5513ef99048bdc5df64fb
2021-06-07 18:10:54 -06:00
bwang 298f945983 Create new user menu template for consolidated user links in logged out users
- Adds mustache template for the new user menu
- Uses new functions for getting user link data that have been factored out of SkinTemplate in the dependent patch
- Refactor new user menu styles to be namespaced inside UserMenu.less

Notes:
- Originally this patch included more storybook changes, but I removed them in favor of this follow up patch: 696651

Bug: T276564
Depends-On: Ia841f92c626ca32a9ad437b3d1cff78309c83ed8
Change-Id: Ib15752428265fdc06a3000f62bdca44c67648974
2021-06-02 09:23:22 -05:00
Jan Drewniak 7258a7cb86 Use escaped() instead of parse() in SkinVector::createULSLanguageButton
Bug: T282540
Change-Id: Ie8f0fe262f34e669d49f98efc27c179b257786dc
2021-05-24 14:07:25 +02:00
jenkins-bot 81947cbd67 Merge "Remove unused $contentNavigation from `getTemplateData` method" 2021-05-14 20:20:54 +00:00
Nicholas Ray 7ab2edb2fa Remove unused $contentNavigation from `getTemplateData` method
This is not used in the method and, from the surface, appears to be
extraneous.

Change-Id: I63b1eba54f8ce11296c187b292010e415a2915af
2021-05-14 12:13:14 -06:00
jdlrobson 6998c536d4 Both UserMenu stylesheets should be shipped in modern
Since we have feature flagged the new user menu feature, it is
imperative we load both sets of styles until the feature has
shipped. This allows us to switch seamlessly between the two
without worrying about cached HTML being served with updated CSS.

To do this, we add a new class to both user menu's distinguishing
the legacy version from the modern version. The styles are then
scoped to these new selectors.

This also fixes some regressions with the legacy user menu in
modern Vector when wgVectorConsolidateUserLinks is disabled.

Notes:
* No caching selector is needed for #pt-userpage given it can only
ever be output for logged in users.
* ID selectors in general are bad, so scoping to mw-portlet-personal-user-menu-legacy
isolates the legacy component allowing it to be rendered alongside the modern UserMenu

Bug: T276561
Change-Id: I068c5233bb25a7b141e66a6726b5761841f83eb2
2021-05-14 10:13:09 -07:00
jenkins-bot b41e224ec6 Merge "Refactor: Renaming mustache variable `page-isarticle` to `is-article`" 2021-05-10 09:38:08 +00:00
Jan Drewniak c22dc8d95b Refactor: Renaming mustache variable `page-isarticle` to `is-article`
Modifies this variable name to use proper hyphen-case and
prioritizes the type of variable rather than it's source.

This prioritization makes sense in Mustache templates because the
variable is a boolean and is used exclusively in if statements,
e.g. {{#is-article}} ... {{/is-article}}

Change-Id: I72e9baf0a979d922b8217aabe8cf0c40699f891b
2021-05-10 08:55:06 +00:00
jdlrobson e7a4ecf9db Refactor: Clarify functions that return booleans and template booleans
We prefix templates that are booleans with "is-" and tend to prefix
functions that return booleans with "if" or "should"

This renames the new "shouldConsolidateLinks" method.

Follow up to I1c305d89bece147a6f1b478441119c3169abfbdd

Change-Id: I6a5908b8b35ca6bceec8b864e3ac651fc7e8ced8
2021-05-06 23:51:56 +00:00
Clare Ming dc0b679bfa Consolidate user links into personal dropdown menu for logged users.
Pull personal menu items except for user page link into a consolidated dropdown menu based on feature flag using Vector hooks. Add consolidate user links feature flag for logged in/out users. Update styles for personal toolbar. Add logic to template to show legacy toolbar or consolidated toolbar based on feature flag variables.

Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
2021-05-06 12:49:39 -07:00
Jan Drewniak 80d734b4d2 Place language button near bottom of Main page.
In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.

This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.

Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271
2021-05-05 13:42:19 +02:00
Nicholas Ray 2ff3308ac4 Remove 'noexternallanglinks' check from `canHaveLanguages`
`noexternallanglinks` is a magic word that can be used to
suppress/modify the languages produced by wikibase [1]. Most importantly
though, languages can still appear even with the usage of this magic
word. Therefore, this check can be removed.

[1] https://www.mediawiki.org/wiki/Wikibase/Installation/Advanced_configuration#noexternallanglinks

Bug: T277517
Change-Id: I1f532b3e669564f570b47451693ddb15757a6101
2021-04-21 10:45:06 -06:00
Jan Drewniak 980c8453ce Hide languages-in-header button when no additional languages
Hides the languages-in-header feature if there is only one
available language.
Also factors the additional classes required for the language
button into a separate function.

Note: Hiding the language button is a temporary solution
until T275147 is resolved.

Bug: T276950
Change-Id: I241abc6061bba12a6a209074fa4c2d2c89cea930
2021-03-29 23:07:26 +00:00
jdlrobson 0d2e38375c Languages should not appear in side bar on modern Vector special pages
Follow up to 52edeee

Bug: T273144
Change-Id: I22b33d2090dcd814658ecc2f155d86a5b1791fc3
2021-03-03 22:48:00 +00:00
jenkins-bot 175723f2e5 Merge "Disable language button on certain pages" 2021-03-02 08:04:34 +00:00
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton

Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule

Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-03-01 20:01:45 +00:00
jdlrobson 52edeeea1c Disable language button on certain pages
The logic is based on the existing logic for the "Add language links"
however with the additional constraint that the page is not a special
page.

To avoid multiple expensive calls to getLanguages method,
the getLanguagesCached method is introduced.

Bug: T273144
Change-Id: I1085efca1e10c9b6f1305c2238664e0b2ec69123
2021-03-01 18:03:26 +00:00
jdlrobson 68b989efb6 Simplify responsive Vector implementation
Vector has a wgVectorResponsive flag. This adds a ResourceLoader
module as well

I propose the configuration is repurposed to disable the min-width
on Vector and enable the viewport tag. This will allow us to use
test.wikipedia.org to test Vector at lower resolutions in future
as well as provide a suitable option for 3rd parties wanting to run
a responsive version of Vector that can be opted into using:

```
$wgVectorResponsive = true;
$wgVectorDefaultSkinVersion = '2';

```

As part of this change, the default skin version is set to 2, in
preparation for the next MediaWiki release. Note on Wikimedia wikis we
explicitly set this version so this will not impact any of our deployed
wikis.

Bug: T242772
Change-Id: I878920f49d18c5d60efd3ac45dc7912d2c62086e
2021-02-10 13:05:14 +00:00
Nicholas Ray e3abac06a6 Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate
* We add the `.mw-interlanguage-selector` class to the
.vector-menu-heading in the server rendered HTML. `ext.uls.interface.js`
later attaches a click handler to this selector that loads the rest of
ULS.

* We hide the dropdown arrow for js users and only show it again if
ext.uls.interface module isn't installed or is not being loaded.

* When the `ext.uls.interface` module has been loaded, we hide the checkbox
and checkbox hack menu in favor of showing the ULS popover.

Additionally:

* Adds '.vector-menu-heading' class to menu headings.

* Change h3 selector to `.vector-menu-heading`.

Bug: T273232
Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa
2021-02-05 15:03:07 -07:00
jdlrobson 36eda30e0f Language button should use a new id to identify itself
This breaks existing integrations with extensions which will need
to be revisited as part of this redesign.

Change-Id: Iabf627e6926d4574f27448400d76210386ebdaa2
2021-02-04 20:27:13 +00:00
jdlrobson f083eb2716 Add language icon to language button
The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.

Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
2021-02-03 15:38:30 +00:00
jdlrobson ef0ab0724e The label of the language button refers to the number of languages
Instead of "In another language" the button label will be
"0 languages", "1 language" or "X languages"

Bug: T268241
Change-Id: I293a1d5f4885f76cc5f62169ee24b52c234f9229
2021-02-03 15:34:43 +00:00
Nicholas Ray 1e7ed6b2e1 Make expanding search input dependent on $wgVectorWvuiSearchOptions
Per T270202#6767750 the input should expand when focused before WVUI
loads. However, the input should *only* expand when `showThumbnail` is
`true` in `$wgVectorWvuiSearchOptions` to match how its done in WVUI
where it takes into account the size of the thumbnails. When
`showThumbnail` is false, it should not expand as the input won't match
WVUI and the WVUI load transition will be jarring.

To test locally, toggle between true/false in your LocalSettings.php:

```
$wgVectorWvuiSearchOptions = [
  "showThumbnail" => false,
];
```
Bug: T270202
Change-Id: I70277c1082a504fbd5f6023e9873e8071de7e35d
2021-01-26 17:37:22 -07:00
jdlrobson 355b188db4 Languages can be moved out of sidebar
A new config flag wgVectorLanguageInHeader is added to allow
us to render languages in sidebar or outside sidebar, in the
header.

it defaults to false to allow for further development and to
not disrupt the status quo.

To accomodate the new menu, a new header is added based on the design
in Minerva to contain the heading and language button. The language
button is floated to the right.

The new menu is not styled. That exercise is left for the follow up
task T268241

No caching implications of this change, as legacy and modern
experiences remain touched without changing the default value of the
new config flag

Bug: T260738
Change-Id: I5af1522cac3831c1c833388461fe254c03191f65
2021-01-22 09:10:49 -08:00
jdlrobson 68b52a77e2 Usages of page-langcode dropped for html-user-language-attributes
html-user-language-attributes contains not only the lang attribute
but also the direction. There doesn't seem any value in regenerating
just lang attribute

Change-Id: I93e8081be1e81adf16d40bff54f0cc22c7155dd7
2021-01-20 16:13:12 -08:00
jdlrobson 9f1a1fa829 Simplify menu code
SkinMustache in core provides most of what is required for Vector to
generate its menus.  In the interest of having a canonical source of
truth for menus across all skins, Vector should use this data.

To ensure the HTML generated is (mostly) the same after this patch to
prior, a few modifications are necessary:

* The data from core is decorated so that Vector can continue having its
  own custom class names on menus. This is done using the
  decoratePortletClass method.
* There is no support for a menu having a header representing the
  selected menu item, as is currently the case with variants. This is
  achieved via an extension to getPortletData. It's assumed that later
  when variants are merged with languages, this can be removed.
* Menus are agnostic to how they are displayed, so we must continue to
  add the is-dropdown template variable to drop down menus. In future we
  may want to rethink our Menu partial to make this unnecessary in PHP.
* The portal-first class is redundant in the modern Vector as we can
  use the first-child selector. Previously we introduced a class to
  service the legacy skin where this rule doesn't apply as #p-logo is
  the first child.  However, the legacy skin can do this using a special
  next sibling selector instead.

Bug: T268157
Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
2021-01-04 19:02:34 +00:00
James D. Forrester 5ef1ddb733 Use User->isRegistered(), not deprecated isLoggedIn()
Bug: T270450
Change-Id: If385757d64664eba148914063fbbe88f72b66fdc
2020-12-19 16:44:06 +00:00
jdlrobson ffa19b2ae3 Use the SkinMustache template variable for the main page link
Bug: T248752
Depends-On:  I98fc4755e6a736efc2210f8b6ddf4a1cc4eea378
Change-Id: I077abba357e503c79901b64be2ccbb3f2efe1c18
2020-11-16 13:18:18 -08:00
jdlrobson 227534102a Separate opt out data from sidebar
In preparation for using the data provided by SkinMustache class
we need to separate the opt out data from the rest of the sidebar.
The opt out data is specific to Vector.

Change-Id: I4461da92c1787d272bbf99e6644bdb9e6c388a68
2020-11-05 22:08:00 +00:00
jdlrobson eda19bd6e4 Remove SearchInHeader requirement/feature
Styles will be cleaned up further in a follow up.

Bug: T258116
Change-Id: I878239a85ffbecb5e78d73aed5568c56dbd7d659
2020-10-28 20:05:28 +00:00
jdlrobson 14e8b4d5b7 Use SkinMustache value for user messages
This is now provided in the core SkinMustache interface and
is not needed here.

Change-Id: Iaee8fad2b1fd5e72beee544b0c2e8f62ff371073
2020-10-09 11:38:38 -07:00
jdlrobson 89fee04f0b Drop unsupported skin CSS classes
Drop support for vectorMenu, vectorTabs and
vectorMenuCheckbox, body, menu selectors in preference
for standard selectors.

This change will impact a large amount of user scripts/styles but should
not impact any gadgets.

These classes were kept around for user scripts and styles however are not
needed internally. As we transition to a more maintainable skin menu
system, it is time to lose these selectors even though this will cause
disruption.

Vector now will use the mw-portlet class rather than the vector-menu
class in its own CSS styling, however it keeps the other classes to
allow differentiation of the different types of menu.

Changes to test: Previously the tests assumed all portlets were empty
when checking the classes. This is very rare, so its better to check
the classes of non-empty portlets, so several tests are updated
accordingly to drop the emptyPortlet class.

Bug: T262092
Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101
2020-10-01 19:50:24 +00:00
jdlrobson 4fad68ed0b Source footer data from SkinMustache
SkinMustache now provides this data in a slightly modified form.
Use it.

Change-Id: I060a8acfab6e7e2eea14e84fd4a5cad23677390b
2020-09-30 23:08:38 +00:00
jdlrobson c0ccbcb6f8 Prefer local data to parent data (attempt 2)
There was some confusion during the code review of
4dbe4076d6

In the case of array_merge, anything defined as the second parameter
with the same key as the first will override the data in the first. This
means the current situation is that parent data replaces any local data.

However, we want the local data to be preferred.
Specifically, the call to  $this->getFooterData() must override
the data set parent::getTemplateData. This is not happening with the current
ordering.

Without this change, Ib2af1f72c0508870b20321dffc8af2158d0dbd55
will result in the footer not rendering.

Bug: T262730
Change-Id: Iaf701c054314f210e40a82b5277e9914edccc493
2020-09-29 22:20:09 +00:00
jdlrobson 711a41812a Use newly available Skin::getPortletData method to get mw-portlet class
Kept as simple as possible for now. The new class is added but no classes
are removed. This will be done in a follow up.

Bug: T256897
Bug: T253938
Change-Id: Ib31a9d8f2ac14e63b63e82abd4a9aa1fcb956f45
2020-09-29 00:09:26 +00:00
jdlrobson 4dbe4076d6 Prefer local data to parent data
The + operator will drop any existing keys. The data from
Vector should have precedence as the data coming from core may be
in a different format.

Noticed while upstreaming data for footer.

Change-Id: Icc772733577e0b165acdbc8a9b6143bd5410c33a
2020-09-29 00:09:15 +00:00
Sam Smith 58c1c9ddf5 SearchBox: Fix data-search-loc attribute
Following on from I0edbd89, set the data-search-loc attribute to
"header-navigation" for legacy Vector.

Bug: T256100
Change-Id: I113c56ac9b18df46ebc13b9985aea03ba82419bd
2020-09-25 14:42:08 +01:00
Ammar Abdulhamid ef45378c01 Remove ULS extension hack and anon placeholder code
The anon placeholder is now provided by core. The styles will remain to
style it to suit Vector needs.

This ULS hack is no longer needed as the extension is already using array
plus operator which does set union, so it only appends the right-hand array
to the left-hand array. Some string concatenation that prevented it from
working correctly has now been resolved by Ice379cd in core.

Bug: T263382
Change-Id: I5691529ab8c59f4053cff38ea6f7dd01c326c074
2020-09-23 21:23:04 +01:00
jenkins-bot 05b6753937 Merge "Clarify documentation of SkinVector::__construct()" 2020-09-21 21:04:00 +00:00
Ammar Abdulhamid cf895f19e2 Clarify documentation of SkinVector::__construct()
With I5772eb7 merged in core, it's no longer accurate to say that the
$options param is optional.

It's important to note this now, before someone report it as a bug.

Since the method is a public API and technically does not require a
parameter, no one will expect that following the rules (providing no
argument, as in `$skin = new SkinVector`) will throw fatal exception.

Bug: T262233
Change-Id: I771e5cc8ff205943016a26854da18088817b9238
2020-09-21 16:59:04 +00:00
jdlrobson 5095b5c2f1 Vector supports language variant logos
Given I7184f2f5dd7fdb49fb928265bbf711ef9fd555c9 we can now
use the data generated by core which has the benefit of being
configurable per language variant.

Bug: T261153
Change-Id: I7a77f164da53c362da225ae3d13635f9ddca529f
2020-09-18 10:59:23 -07:00
Sam Smith 7cbc30ebac SearchBox: Add data-search-loc attribute
The mediawiki.searchSuggest protocol part of the SearchSatisfaction
instrumentation reads the value of an element with the "data-search-loc"
attribute and sets the event's inputLocation property accordingly.

Set the appropriate value for the attribute in
SkinVector::getTemplateData and render the attribute in
the SearchBox.mustache template.

Bug: T256100
Change-Id: I0edbd8906a042072b2055adc2889b083b2c6cac4
2020-09-17 18:24:24 +00:00
jenkins-bot d72b0daa24 Merge "Use feature management for search in header" 2020-09-14 12:50:16 +00:00
jdlrobson c8642b2fbe Use feature management for search in header
This will allow us to add the A/B testing requirement for logged in
users.

In preparation for the new A/B test requirement, a custom requirement
is added as the feature management system does not
support OR operations and the desired effect is the case where:

* the SearchInHeader feature flag has been enabled
* OR the SearchInHeaderABTest feature flag has been enabled and the user is bucketed

Bug: T259250
Change-Id: If948603bd598e1b5597345f4268736417f4c3a24
2020-09-13 23:00:16 +00:00
jdlrobson d61cae0086 Don't change function signature of buildSidebar
Rename buildSidebar to getTemplateDataSidebar to reflect what it is
doing in Vector rather than overloading it with template data generation.

Changing the return value has consequences on refactors
inside core a Skin::buildSidebar returns an array not an
associative array.

Change-Id: I0a4913c21af6ac3f5259cee8583aa121756251c1
2020-09-04 21:55:11 +00:00
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
jenkins-bot feae33a4e6 Merge "Remove VectorBeforeFooter hook" 2020-08-13 22:36:09 +00: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