Commit Graph

80 Commits

Author SHA1 Message Date
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
mainframe98 ddc32a5833 Provide messages through skin options
Bug: T259664
Depends-On: Ie52aadd6b7de8c4db66de662f2f03e295c29034d
Change-Id: Ib03c0683aa00d334224e7b3507098dedcc848e44
2020-08-05 10:24:34 +02:00
jdlrobson 580a0aa537 Document stability of undocumented classes
Bug: T248399
Change-Id: I9445d5c0753f7272c3d22d66b8824f8a95b86d41
2020-08-03 17:17:53 -07:00
Ammar Abdulhamid 2cd45072b4 Drop support for building sidebar portal with non-standard format
Bug: T259306
Change-Id: I2015ddc9bfad614e54427d0de4e7874092cfbfe0
2020-08-03 19:38:34 +00:00
jdlrobson ed7fd252cd Refactor: Replace PHP complexity with JS simplicity
In PHP we add collapsible classes to all elements except watchstar
so that certain tabs can be collapsed under the more menu in JS.
This adds unnecessary complexity to our codebase and is not used
if JS is disabled.

To simplify this and bring Vector's PHP consistency with core this
logic is moved to JavaScript.

Bug: T259372
Change-Id: I2acbf7089198118626368ee8a37615d2de062f83
2020-07-31 22:15:08 +00:00
jdlrobson d24d858264 Cleanup: Drop unnecessary isLegacy checks
The has-logo property is redundant:
The Sidebar in legacy is its own component. The logo is always
rendered in the legacy sidebar.

data-emphasized-sidebar-action can be unconditionally sent
The legacy sidebar doesn't use it, so there is no need to conditionally
add a check for legacy

These two changes allow us to remove the isLegacy property in favor
of the single use of the isLegacy method.

Change-Id: Ie7ee3cec29b20d07db81799484627254d4a78f5f
2020-07-30 15:10:57 -07:00
jdlrobson 1aab97ec03 Cleanup: Drop unused template variable
html-printfooter is no longer used now that core provides
this as part of html-body-content

Change-Id: Ib9d6b5ce56ecde38f5de948dc0f80c7a3e42d2b3
2020-07-30 20:38:36 +00:00
Ammar Abdulhamid a7c983a2ed Remove VectorBeforeFooter hook
Bug: T255214
Change-Id: Iac66823119c7279f5e922b0e258602dd6c4ca5c4
2020-07-30 13:27:04 -07: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
jdlrobson 39a333452b Refactor: html-userlangattributes -> html-user-language-attributes
This matches the name in core and is needed in preparation for
switching to SkinMustache

Additional change:
The JS variable htmluserlangattributes is renamed
"htmlUserLanguageAttributes"

Change-Id: I306ebb615f720852fb35c25ac240d6b802d05ecc
2020-07-15 10:18:45 -07:00