The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.
Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed
Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
Thanks to the upstream changes in T262067 we can make this template
directory relative to the skin and declare it inside skin.json
Bug: T262067
Change-Id: Ieccdf87979d14eeec0834b6b0cecf064d5fd9cfc
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.
Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
- Add conditional to check for 'createaccount' permissions based on config.
- Update relevant template to show/hide create account markup.
Note that this solution excludes the use case of extensions using core hooks
to disable account creation. See https://phabricator.wikimedia.org/T288428#7303233.
Bug: T288428
Change-Id: I89852207ee42f5ddd07e5dd6141461c6bfbcd5ac
- Add title attribute to Header template for hamburger icon.
- Override tooltip for user links menu icon for anon users.
- Make sure tooltips are empty for legacy version.
- Add translatable strings for new tooltip, title.
Bug: T287494
Change-Id: I84ce6a1eb2a37eb9ea71a40c565c059d156a44ba
There is no need for this to be in the constructor. Separate into
its own function that inherits from parent class and existing parent
method isResponsive.
Change-Id: I60d155ec9db99ccfe0b74271dee76275a8a6986c
Register a temporary requirement that is configured the same as the
"LanguageInHeader" requirement. Pass that requirement a custom
configuration, in which the language treatment A/B test is always
enabled. Increment the bucket corresponding to whether the requirement
is met.
Supporting changes:
* Add a version to the base bucket name and set it to 2
Bug: T286932
Change-Id: Ic639687237074a13e7feb3c9084a35db0e5cb902
* Revises UserLinks.less according to the T285786 spec.
* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.
* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.
* Places an end margin on the search box to add space between the user
links and the search box.
Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
Caused by whitespace in HTML
Addresses topic 2 from Alex's feedback in:
T191021#7228591
Bug: T191021
Change-Id: I32de25d4f4927c2ea8059b972a55b79a94691e76
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.
This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.
Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
User::setOption() is deprecated and should be replaced with UserOptionsManager::setOption()
Bug: T277818
Change-Id: If867b4f97918db581d337a32b33cbca2315a71f6
- Adds UserLinks__more template to process the list of user links.
- Simplifies styles in UserLinks.less, and namespace them under .vector-user-menu-more
- Add i18n for the label of the new navigation menu
- Update storybook and typing
Bug: T284584
Change-Id: I92290815869dcb939f01d9aff4aa202f6f004894
- Add new OverridableConfigRequirement class.
- Add query parameter constant for user links.
- Update Feature Manager with new requirements.
- Use new class for LanguageInHeader requirement.
- Remove LanguageInHeaderTreatmentRequirement class and test.
- Add unit test to cover user links and language in header.
Bug: T285855
Change-Id: I56b729a9e245ed2ddc85625c0be39f5c26320ac4
Append mw-ui-icon classes to list item not list link
This allows us to apply a custom padding separate from the icon.
Note due to a bug in how core handles personal user items,
this will result in the icons temporarily disappearing for several
items until If399dfff9bbdd3b03b2ca702face3ec5164bef11 is resolved.
This is okay given the user menu is currently feature flagged.
Bug: T191021
Change-Id: I766aeb4d1bb36cebd0d80ad43ced940dbea96477
Additional change: A bundlesize increase is required given
recent developments in the user menu.
Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile
Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
Following on from I551414b1, disable query highlighting for the list of
languages provided by @TJones in T281797.
The user's interface language can be different from the wiki's content
language and so the former is not available at configuration time. Thus,
we fetch the user's interface language at request time. Fortunately,
@TJones' list of languages is small so there should be little
perceivable performance impact from the perpective of the user.
Additional changes:
- Remove the config.VectorWvuiSearchOptions.value.highlightQuery
property from skin.json
Bug: T281797
Change-Id: Ib39736a93fa64e82253f88551d125413e672558b
Per T284594, we are now setting the icon key/value when the relevant
menu item is created (e.g see I95f2a0a01134f2c3dfc22083be66c99de26b530f
) to allow for easier reuse of icons across skins.
Additionally:
* Refactor SkinVector to pull the appropriate login/logout icon from
core instead of setting this in Vector
Bug: T284594
Depends-On: I95f2a0a01134f2c3dfc22083be66c99de26b530f
Depends-On: I6292de50c3940f39b0084a2af4f79af78583720f
Change-Id: I02163645937de4b8a2c4375f29851c29462a582d
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
- 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
- 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
- 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
Merge UserMenu into UserLinks for legacy and modern
Add a story for the UserLinks menu
Fixes: rendering of Skin (legacy) personal tools (the user icon
no longer overlaps)
Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
Have a single template for the UserLinks component, with a single
element wrapping all its subcomponents as discussed.
Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
This follows up I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
In that change, a new class for Vector specific styles should have
been added and the existing CSS referenced. I could have sworn I did
this, but obviously not (perhaps a git rebase or unstage change problem).
We did it for the other skins e.g. Monobook (I90d85c21f4a62e6697f24e3ce388445a0a53c2b0)
but evidently not Vector.
We also have to worry about cached HTML now, the #bodyContent is
the most reliable selector to use for before and after
I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
Additional:
Remove the mixin-clearfix rule on bodyContent - this is now
redundant with the changes in T279388 and should have been
removed.
Bug: T283206
Change-Id: I15103cea72c793589a03ab1a3e7f3b377acb287f
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
The `mw-body-content` class is currently decorating various things,
however should be limited to the body of the article. This allows
us to identify the wrapping element without resorting to a selector
that makes use of an identifier and to separate styling concerns of
UI (indicators and site notice) from article content.
Bug: T279388
Change-Id: I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
Before this commit the `languageinheader` query param would only take
effect if the A/B test was enabled AND the query param was set. Per
T282543, we want the query param to take effect regardless of the state
of the language/AB test config.
To see new treatment, set `languageinheader=1`.
To see old treatment, set `languageinheader=0`.
Bug: T282543
Change-Id: I6a06e90b6e46a6fd7506a5ddeaf071b893ebfe8e
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
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
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
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
* Adds ab test config to enable/disable the ab test. Defaults to `false`
(ab test disabled).
* Adds a `languageinheader` query param which only takes effect when the
ab test is enabled. The query param is cast to a bool and determines
which treatment is shown. For example, set query param to
`languageinheader=1` to see the new treatment. Set query param to
`languageinheader=0` to see the old treatment. To bucket based on the
user's id or global user's id, don't set the query param.
* Moves the language in header config work that was previously in
ServiceWiring into a `LanguageInHeaderTreatmentRequirement` class so
that unit tests can be done on most of the logic that determines whether
the language in header will show.
* Adds logic to bucket user based on [global] user id.
Bug: T280825
Change-Id: Id538fe6e09002fae6c371109769f3b7d61e7ac6d
Sending these comments to all users incurs small performance penalty on
both sides. Further, the intended audience for the comments is
vanishingly small when compared to all users and we have more direct
avenues to contact that audience, i.e. the Technical Village Pump.
Remove the HTML comments related to the deprecation of the
role="navigation|main" attributes on the navigation and main elements.
Bug: T281025
Change-Id: I4735c435fc31c5ba4fbf99e9d9bf12adc466b02f
`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
Register updated requirement for language in header for logged in and logged out users in Vector's ServiceWiring file. Make VectorLanguageInHeader backwards compatible to handle boolean values when registering LanguageInHeader feature. Update VectorLanguageInHeader variable to array in config to handle different logged states.
Bug: T277588
Change-Id: I37a3a01e83f051cf0679769c8b9b5b41f00d6d72
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
* 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
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
Now `wvui` is in core, there is no need for this to be conditional.
Depends-On: I91db16946e7ea46f69a6b57b116962f77ce3cd20
Change-Id: Icceaefc63d227ca772a986ad2c6ce28cbdb0a7d6
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
* 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
This breaks existing integrations with extensions which will need
to be revisited as part of this redesign.
Change-Id: Iabf627e6926d4574f27448400d76210386ebdaa2
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
Instead of "In another language" the button label will be
"0 languages", "1 language" or "X languages"
Bug: T268241
Change-Id: I293a1d5f4885f76cc5f62169ee24b52c234f9229
Not only might this make more sense from an accessibility standpoint
(because sidebar is also part of navigation and there is a heading with
that name), but it should also hide the sidebar when printing as there
are core styles that hide #mw-navigation.
[1] 3b381b71e9/resources/src/mediawiki.skinning/commonPrint.css (L31)
Bug: T265217
Change-Id: I7f936defa177ba172e4253ee6450040ffa52e257
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
FeatureManager allows the logic to be centralized and allows clients to
ask about its state. For instance, SkinVector will make use of it in
I70277c1082a504fbd5f6023e9873e8071de7e35d.
Also:
* Adds WvuiSearchTreatmentRequirementTest to test A/B logic
WvuiSearchTreatmentRequirement/Test logic are adapted from
I878239a85ffbecb5e78d73aed5568c56dbd7d659.
Bug: T270202
Change-Id: Ia02349a7b41c7caf26fbd728e0be7d47488b97e5
`VectorUseCoreSearch` was changed to `VectorUseWvuiSearch` in
I3a063e0b085765ea1db3c4478fb30c11b0942b75.
Change-Id: Icc9f944ea695999133293bc9e90ac0818f746191
If the VectorSearchTreatmentABTest config variable is truthy and the
user is loged in, then pick the Core treatment (defined in the
mediawiki.searchSuggest RL module) or Vector's Vue.js-based treatment of
the search widget based on their user ID. If not, then fall back to
picking the treatment based on VectorUseWvuiSearch.
Supporting changes:
* Update initSearchLoader() in skins.vector.js/searchLoader.js to check
whether the body.skin-vector-search-vue exists
* Remove wgVectorUseWvuiSearch from the skins.vector.js RL module's config
* Update the performance-related metrics collection to check which
module is being loaded rather that use the above
Bug: T261647
Change-Id: Idc978392f5db14f0ae2b06ade0175fe534f4ae70
For language-in-header feature, edits the <header> element to
contain:
- page title,
- language selector
- tagline (siteSub)
- Indicators
These elements are associated with header/meta content so grouping
them inside one header element makes sense semantically.
Bug: T248761
Change-Id: Ief6c4936d1ebe381432369f8d86419da5f7c6cae
This allows better compatibility with FeatureManager (e.g. can use
requirements such as REQUIREMENT_LATEST_SKIN_VERSION). It will become
especially useful in I70277c1082a504fbd5f6023e9873e8071de7e35d and when
A/B testing search.
Bug: T270202
Change-Id: I3a063e0b085765ea1db3c4478fb30c11b0942b75
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
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
Seems less risky to fix this rather than revert, given a revert will
just mean more risk when we do it again, especially if the codebase
changes again and future manual rebases fail.
Bug: T271364
Change-Id: I7f63d6f07b6b715a9f31c83d572814da33ff2796
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
Add event listeners and associated helpers to emit SearchSatisfaction
events via the `mediawiki.searchSuggest` protocol.
Bug: T257698
Change-Id: Ica040cd18d6c4bf8a1b1f607bb4647c7e8eb7108
By default the API uses location.host as the host, however during
development it is useful to test against production wikis
For example to test against English Wikipedia:
$wgVectorSearchHost = 'en.wikipedia.org';
Note: Links when clicked will not take the user to the target page, and
instead will take the user to the search results page with a link to
create the page.
The following config can be used to workaround that page:
$wgDisableTextSearch = true;
$wgSearchForwardUrl = "/w/index.php?title=$1";
Change-Id: I5fbac7f54844d7a9d6976007bc0d0ff9938b9f2b
These are no longer referenced in the code and artifacts of a time
when these were feature flagged.
Change-Id: Ia850ac9fb92033d82a333836ba7ff32312f042a7
Uses ResourceLoader's virtual config feature to get the config and pass
it down to Wvui's typeahead search component.
Disclaimer: I'm a typescript noob and am not sure if the
config.json.d.ts is correct although it seems to make tsc happy.
Bug: T260167
Change-Id: I2eced14c7df3b795b4de0e5149c2ca9fd598c7be
Creates a new skins.vector.search module that
replaces the searchSuggest module from MediaWiki core.
This module creates a new Vue app using the WVUI
search widget for the new search experience.
The legacy search input form is still retains on pageload,
and the new search kicks on search input focus.
In order to manage that transition, the legacy search
input is styled to resemble the new WVUI input, and the
new input is manually focused after the component mounts.
Vue is also added as a dev-dependency to help with
type-checking.
Other changes:
* the entry in skin.json is reordered alphabetically after
skins.vector.js
Bug: T264355
Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
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
The "Jump to navigation" link was removed as part of
Ic553fab3bde25769b103d899b92b3b694c00c384 which makes this div seemingly
obsolete (Volker pointed this out). It has a faily ominous comment above
it so might need more investigation if it will break anything.
Change-Id: Ida97cb640885dc2ea4dfda5b475672eb1ad973f2
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
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
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
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
Following on from I0edbd89, set the data-search-loc attribute to
"header-navigation" for legacy Vector.
Bug: T256100
Change-Id: I113c56ac9b18df46ebc13b9985aea03ba82419bd
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
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
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
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
A new config flag is added that buckets 50% of users into the old
header and the 50% into the new header.
Bug: T249363
Change-Id: I8b4fa475f9cd7e61ad2989e2a1485e7e64c8ab3f
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
Drop max width feature flag.
Max-width will continue to not apply on special pages.
This saves us development effort by not needing to worry about
the case where the flag is not enabled. This flag is not false
in any production wikis.
Change-Id: I7ace4046e6b93ce63dd804da32e576a709485bfb
This moves the header, navigation, sidebar, and article toolbar to be
before the content in the DOM. As a result, a lot of absolute
positioning logic can be removed and styles can be simplified.
Note that although the sidebar was moved from the header into the
workspace container allowing it to de-absolutely positioned, its
absolute positioning was kept intact as it has a fair amount of
complexity that should be handled in a separate task.
To activate, set `$wgVectorIsSearchInHeader = true;`
Changes that could cause concern:
* The "jump to search" link was removed as the search is now much
earlier in the DOM and I questioned the value of keeping this. However,
it can be added back in if this change is contentious.
* A "jump to content" link was added to account for the new DOM order.
* Because the sidebar was taken out of the header, users will not be
able to tab from the sidebar button into the sidebar without additional
tweaking (e.g. should we add JS to enable this?). It was deemed that
this work can be saved as a follow-up task.
* I applied `overflow-y: auto` to the `mw-page-container` because the
header's top margin was collapsing and caused whitespace to appear
between the viewport and the header. Alternatively, we could apply a top
padding to the page container and remove the header's top margin. I went
for the simplest solution but am open to alternatives.
* I left the footer as-is in this patch to minimize risk. It might be
cleaner later on to move the footer inside the workspace container which
would leave only one workspace container.
Bug: T261802
Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
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
I177dad88 introduced the skin version user preference field and
associated configuration values. Per T242381, the field is to presented
as a checkbox with the implied storage type of a boolean where a string
is needed. A PreferencesFormPreSave hook handler was added to adapt
values of either data type to the other. While this was a neat solution
to a minor nit, the adapter's implementation is incompatible with the
GlobalPreferences extension as the PreferencesFormPreSave hook isn't run
whilst saving global preferences.
Rather than adding an equivalent hook to the GlobalPreferences
extension, create a custom field based on a checkbox with the adapter
included. This allows us to:
- Separate the business logic concerned with preserving the user's
VectorSkinVersion preference if they've simply disabled Vector from
the adapter
- Simplify the adapter's implementation
- Forego adding hooks to the GlobalPreferences codebase
Additional changes:
- Replace repeated string literals with equivalent constants in
tests/phpunit/integration/VectorHooksTest.php
Bug: T258493
Change-Id: I628435a4ad676f55534191b8c10147be28be5d73
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
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
The feature manager abstracts away how a feature is enabled from the
consumer of that feature. Accordingly, replace direct instantiation of
SkinVersionLookup with usage of the Vector.FeatureManager service.
Supporting changes:
- Add Vector\VectorServices, a simple wrapper around
MediaWiki\MediaWikiServices that allows us to both document and
type-hint services specific to Vector
- Add Vector\Hooks::isSkinVersionLegacy to minimise repetition
Additional changes:
- Make the MakeGlobalVariablesScript hook handler return early if the
user isn't using the Vector skin like the other hook handlers
Bug: T256100
Change-Id: I93b5ef39802323c7ac658af8fa7cc312fff68aa7
The wgVectorDisableSidebarPersistence config variable is only required
when the user is logged in. Don't send it to the client when the user is
logged out.
Bug: T255727
Change-Id: I27eda8c18b438ef3251b2c07a0ed8b0cef6cae64
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
Following on from I9445d5c, align the @package annotations in
the Vector\FeatureManagement namespace and subnamespaces.
Bug: T248399
Change-Id: Icd287a52d149123bca5d9f0c55154f932f55148e
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
Hooks are global, unlike the old Skin addToBodyAttributes() method, which was per-skin.
Follow-up to a04fc71f30
Change-Id: Ic8a581256c4775ba45b2c5188d678751ba9c7023
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
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
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
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
* `mw-content-container` now wraps the footer (as well as the content)
because we want the footer to match the content width at all times and
to expand with the content when the sidebar is closed (at small viewport
widths or when on history/special pages)
* `mw-footer-container` margins were replaced with padding to avoid
issues with margin collapsing.
* Applied a white background to sidebar to handle the case of the
sidebar overflowing the `mw-page-container`. When that happens, we at
least want the text in the sidebar to be legible.
* Closely related, `mw-page-container`'s `overflow: hidden` style was
removed to prevent `mw-page-container` from cutting off the sidebar. The
purpose of this style was make it appear as if the sidebar was being
hidden by `mw-page-container`, but tweaking the sidebar's translation
animation to achieves this effect as well.
Bug: T257518
Change-Id: I89edf89b2ac4abe2053f0c9b366f143133ff420f
The renames made in this patch mirror the upstream change in
I3f7b2e5f07d03ac04ecdcba585194d619abe35e0 in preparation for adopting
the SkinMustache class.
Renames:
* 'data-indicators => 'array-indicators'
* 'html-bodycontent' => 'html-body-content'
* 'html-undelete' => 'html-undelete-link'
* 'html-sitenotice' => 'html-site-notice'
* 'html-catlinks' => 'html-categories'
* 'html-dataaftercontent' => 'html-after-content'
* 'html-userlangattributes' => 'html-user-language-attributes'
Adjustments
* 'html-debuglog' is moved into html-printtail for consistency with
SkinMustache in core
* html-printfooter is now a part of html-bodycontent for consistency with
SkinMustache in core
Note: the activity of removing html-printtail and html-headelement from
the templates will be done when we adopt SkinMustache.
Bug: T257630
Depends-On: Ibac9729eaa96a38bc730a0132b102a894f6a172d
Change-Id: Ie92bda7846767c3cc9a1937c96a7fc08415b1bae
- Remove unused html-prebodyhtml template variable
- Don't use html- prefixed variables as if statements - this is
not supported by Mustache. (set to '' to confirm)
Change-Id: I0c860b4b2277e1796afa3e482cf61e95ef4fb342
In 1.36 we will be removing this class and adopting SkinMustache.
Signal to developers that this is considered an internal class
as notice of that intention.
Change-Id: Ib62a5352a73eb6189ba85f4034da1b0857fd31aa
- 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
VectorTemplate was overriding msg() in QuickTemplate
in a way that broke the method's
contract, and changed the return type in an incompatible way.
Note while getMsg would also work here, this will reduce the
risk in the upcoming I4e89beb96f6401ed7e51bafdf0aac408f5a2c42f
change.
Change-Id: I95e4e7dcd5ed353917d2706c78663f748775b365
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
Move the body of enableResponsiveMode method into the onBeforePageDisplayMobile hook.
Replace BeforePageDisplayMobile hook with BeforePageDisplay hook.
Bug: T254378
Change-Id: I63da1b67bf2b85c644e4af196bf894efc4797433
Removing presentational `<div class="visualClear"></div>` in process.
Only leaving in for legacy/layout.less and adding comment for future
evaluation if clearfix is continuously needed. In modern we've
got all parts of Vector in our awareness without featuring `float`s.
Bug: T254195
Depends-On: Iddf8f1dffc2d30299b89b3f4966b7fe8ee63090b
Change-Id: I673c28c2d7da4f96c31121d9aec6558e390de24e
* Moves the sidebar into the header so that user can tab directly from
the sidebar button into the sidebar (when open).
* Because the sidebar is absolutely positioned inside the header and the
header applies a top-margin, we need to adjust the top position
calculation for the sidebar.
* Removes the checkbox from the accessibility tree through CSS `display:
none;` instead of HTML attributes.
* Given that the checkbox is not able to receive focus, the
`#mw-sidebar-checkbox:focus ~ .mw-header .mw-checkbox-hack-button` CSS
rule is obsolete and moved instead to the label button. An additional
outline: 0 rule was added to remove the dotted outline that Firefox
applies.
* Makes the "Skip to navigation" jump link point to the sidebar now.
After the sidebar has been tabbed through, the rest of the navigation
can be tabbed to.
Bug: T246420
Change-Id: I981da3650854568bb9cfbf3c6c59e7625e7d094c
Move the VectorBeforeFooter hook code into its own function
This adds consistency with the getMenuData function.
Change-Id: I6483fd200747852246e9cc587f57b1a21a2f0a44
Hide checkbox from AT by adding `aria-hidden="true" to checkbox
and disable tabbing in via tabindex="-1". Both attributes are temporarily
added and might be removed when the checkbox receives `display: none` in
upcoming patch.
Add
- `role="button"`,
- `aria-controls` and
- `tabindex="0"
to button turned label for ATs via `role` definition, make it focusable
and use `aria-controls` for connection to sidebar id.
Bug: T254851
Change-Id: Ife287fc8c6e0d2aee5facf42d5d4308dea918ee3
Even if we were to use it, we might sign up for side-effects when
more than one checkbox hack is used per view.
Change-Id: Ic31e48a4bf3e39e903300acd522b7af0391fafa9
The exact search input element as target focus the searchbox. It saves
AT users a user action, while still remaining read out due to connected
label in screen readers.
Change-Id: I83003fbbb5b6903038d1ca8b323302cb8f52e841
In preparation for moving the languages out of the sidebar (T256023)
and to facilitate experimentation in the Universal Language Selector
extension, we should separate the data from the languages portal
from other portals.
Note the languages portal has traditionally appeared at the bottom
of the sidebar, so this can be done safely in the same way we
introduced data-portals-first
Change-Id: I4be06278ec256cc55aee36c2946339fb49d21b46
The parent method was deprecated in MW 1.32 and this override has been unused
ever since.
Bug: T255474
Change-Id: I811f7b3a6dba0bb1eebf36ed52e363affc8511d2
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
Following-up I00b4d2fd795195cd9c8add650a3b3cafdced5465
it's now time to settle on `.vector-menu*` classes.
Change-Id: I8669d402b6b757cd5bf59a5e0df377b6023b0700
Because the method will soon be deprecated, and by calling it, it can
override hook modification on 'nav_urls' and 'feeds' arrays.
Bug: T253416
Depends-On: I3d7aa93bea47131371e58d2cd2e2d81fd1d7421e
Depends-On: Iab67e1430d55ef9bbf01bfb4e64dd5e36b954eda
Depends-On: I05dae74b5071ffc668c3569566239052575edfb9
Change-Id: I76e3bea5403e3a6994b911017e2254307588499c
As part as our move away from VectorTemplate construct html-printtail
using Skin methods. This copies the logic in
BaseTemplate::getTrail
Bug: T251212
Change-Id: I6a0c0b65f59fcf1f1550ec20d106f0143f681935
`[role]`s are retained for now as they are harmless although
redundant when added to HTML5 elements.
`role="contentinfo"` on `footer` is a special case to address
a known VoiceOver bug.
Bug: T66477
Change-Id: I540d9a41fc7fd580c5d61b90480e8745ae145850
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
Begin our journey away from BaseTemplate by
moving VectorTemplate code to SkinVector. In future all
methods will live here but to lower risk, I've only targetted
the get method.
Bug: T251212
Change-Id: I58c2ff5edaacc2d5e45492c121cf0f87d08b623f
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
The sidebar in Latest mode supports collapsing and expanding (or hidden
and visible). Initially, expanded is wanted.
Bug: T246419
Change-Id: I0777f58fb9441aa834a29afa1b52185ad1b58ca7
Keys prefixed with msg- should relate to i18n keys. Fix the existing
template variables where that's not the case.
Change-Id: I33587a09a9803a3667eaeea95ce3e1753439f413
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
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
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
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
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
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
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
* 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
This unblocks reverting HTML5 elements.
A longer term fix is brewing in
If6b10b0ddcbd4b21dd13a2813e60b604c3a23415
Change-Id: I85659d22dc2f2a803c2a7b1e57033b18900353df
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
Should have been removed in
I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f
Presumably got readded while addressing a rebase conflict
Bug: T249372
Change-Id: Iaff98d8b4770e82277463f39800dd7571e1ed50b
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
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
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
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
the PersonalMenu should be generalised. In future we will use it as
the template for all menus
Bug: T249372
Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
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
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
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
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
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
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
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
- 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
Does not add `.mw-footer-*` CSS classes to `ul#footer-*` and
`li#footer-*-*` to save bandwidth.
NOTE:
- The former id selectors can be removed form the styles after the varnish cache
is updated with the new DOM.
- The modern version still uses the legacy layout at this stage.
Bug: T248137
Change-Id: Ica9f8c43617c624648fa12dc86ebb3daa10f0409
Changes:
- Add the LatestSkinVersionRequirement requirement class, which lazily
evaluates the application state to get the version of the skin for the
request.
This majority of this class is taken from Stephen Niedzielski's
Vector\SkinVersionLookup class, which was introduced in d1072d0fdf.
- Register an instance of LatestSkinVersionRequirement and register the
'LatestSkin' feature that requires that requirement
- Re-introduce SkinVector::isLegacy and make it defer to the Feature
Manager
Bug: T244481
Change-Id: If6b82a514aa5afce73e571abdd8de60b16a62fa8
Going into the new version of Vector, we'll want to rewrite the layout
rules entirely and decouple the sidebar from the logo.
To prepare for this we will move the layout file into a legacy folder.
We also separate Sidebar styles needed for the legacy mode from the old mode.
This will allow us to make changes to the header in new Vector without having to touch
or test the legacy codebase via a new file layout.less and using the existing sidebar
code.
Bug: T246170
Change-Id: Ieb4f8f2b2f0e4f48d76a210ab30acd08e3e83bcb
In new Vector, the logo will no longer be present, so we need a more
future proof way of determining what the first portal is.
A new class `portal-first` is added (no decision about adopting BEM
has been made yet).
Cached pages will continue to use the old selector for now.
Change-Id: I6ac4493bb1f63686b48ff0c22b18d50d9fffb51d
VectorTemplate has various functions that repeat themselves, only
differing in their choice of names.
This refactor begins by focusing on the personal menu and introducing
a generic getMenuData function. Hardcoded `p-personal` is replaced with
an `id` template key and `msg-label` is renamed `label`.
Future patches will simplify VectorTemplate by using this new
function.
You'll note the resulting PersonalMenu.mustache file is identical
to VectorTabs. These will be merged in I098e6921e8f7ef65dacacf09b9c25f70c945e58e
Bug: T249372
Change-Id: I5ae44a1008b065381eeff93f9fa625be5c5a9de9
The Mustache templates were a bit of a mix of tabs and spaces. I like
spaces personally but dislike inconsistency within the project more. Use
tabs.
Change-Id: I22b777489d7281b42d1ab1981b47b2a71d3b639a
Adding `margin-top` property only with sibling selector for now
until cache is cleared.
Also removing already inherited from
`.mw-body-content` properties `position`,
`font-size` and `line-height` of same value.
Bug: T248761
Change-Id: I1ea5e08927a96ac69c1b65f248ae0420968b4d00
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
The new template 'index.mustache' drops the Navigation
template partial (component) - instead embedding it in
the master template given its lack of usability.
Note to reviewer: Please ensure index.mustache and
legacy.mustache are identical.
Change-Id: I580fe55ca6aeb35dae8afee41e87172a5a729c7b
It is not the most useful of components and adds an additional layer
of complexity similar to multiple inheritance chains that we find in
Object oriented programming.
I suggest we use index.mustache going forward for laying out the different
components and use components/template partials for reusable components.
Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
This commit is singularly focused on adding a link to the sidebar for
Vector, logged-in users. It does the bare minimum to fulfill the
requirements of T243281.
Additionally, it will help to answer the question "Do we need to use
abstractions (other than maybe different templates) to separate Legacy
Vector from Vector" by intentionally leaving out any abstractions in
order to make it easier to compare with a follow-up patch
(Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions.
It is a good thing to question whether or not we need addtional
abstractions in VectorTemplate and if they will help us as unnecessary
abstractions can have the opposite effect and just lead to further
frustrations down the road.
Therefore, I urge you, the reviewer, to let me know your thoughts! If
abstractions are viewed as not making our lives any easier, the
follow-up patches may be completely discarded and that's totally okay
with me. :) I think it's a good think to talk about now though.
Important changes:
* The VectorTemplate constructor was changed to allow injecting the
config, templateParser, and isLegacy boolean (only the config was
allowed before this commit). According to MediaWiki's Stable Interface
Policy, "Constructor signatures are generally considered unstable unless
explicitly declared stable for calling" [3]. Given that VecorTemplate's
constructor is not marked as stable, it is justified to do this without
warning according to the policy.
* Due to the above, the 'setTemplate' method is no longer needed and was
marked as deprecated.
* VectorTemplateTest was made to adapt to the new VectorTemplate
constructor. Additionally, it now extends from
MediaWikiIntegrationTestCase which my intelliphense server can pick up.
I *think* MediaWikiTestCase is just an alias to
MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed
to MediaWikiIntegrationTestCase in [2], but I'm willing to change it
back if there is pushback to this.
Open questions:
* What are VectorTemplate's responsibilities? To me, it acts right now
as a controller (because it echos the full HTML string from the
template), a model (because SkinTemplate::prepareQuickTemplate sets data
on it which it later retrieves through `$this->get()`), a presenter
(because it adds data tailored for a web-centric view), and a view
(because it renders HTML strings instead of letting the view/template be
solely responsible for that). Arguably, some business logic might be
mixed in there as well (because it checks to see if a User is logged
in/has necessary permissions to show x which my changes here add to).
This might not be a problem if we keep VectorTemplate relatively small,
but will it remain this way as we progress further in Desktop
Improvements?
* How do we write tests for VectorTemplate without exposing unnecessary
public methods? For example, if I want to test the `getSkinData()`
method to see what state will be sent to the template, how should I do
this? One option might be to use `TestingAccessWrapper` to expose these
private methods which is what
`VectorTemplateTest::testbuildViewsProps()` does. Another option is to
accept this method as public. Is there a better way? Keep in mind that
even with access to this method, there might be many things to mock.
[1] 0030cb525b/tests/common/TestsAutoLoader.php (L64)
[2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76
[3] https://www.mediawiki.org/wiki/Stable_interface_policy
Bug: T243281
Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
Address some feedback from I7a2cdc2dfdf20d78e4548f07cf53994563b234b3:
- Miscellaneous documentation improvements.
- Add a false case test to `DynamicConfigRequirement->isMet()`.
Bug: T244481
Change-Id: Ic5637f42da755f871c5a6d545e14effd3ac8c670
Various skins may extend SkinVector (although none are in production)
(https://github.com/search?q=%22extends+SkinVector%22&type=Code)
This makes it clear we no longer support that behaviour.
Because of the skins that are extending SkinVector currently we have
not resorted to using the final keyword at this time.
Depends-On: Ie3759c2acbf53c628577f6b05cfed17e0998a6bb
Bug: T248399
Change-Id: I2af8b2930c80f888791247bdaa2ae1c80576317e
* Content.mustache doc param order was modified to follow the html structure
order (with html-dataAfterContent at bottom ). `html-userlangattributes`
was added to param documention since it was absent.
* Footer.mustache doc param order was modified to follow the html structure
order (with `html-userlangattributes` placed after `html-vector-before-footer`)
* Navigation.mustache was modified to remove `html-sidebar`,
`html-navigation-left-tabs` and `html-navigation-right-tabs` params from
doc since those are absent from Navigation.mustache.
* `data-namespace-tabs`, `data-variants`, `data-page-actions`,
`data-page-actions-more`, `data-search-box`, `data-sidebar` params were
added in Navigation.mustache documentation since those are present.
Bug: T243281
Change-Id: I321f8d61ad0305f508521e8d4d805e846103b357
We expect the vast majority of requirements and features to be defined
in services as possible. However, there are some "complex" requirements
that require additional application/HTTP request state. Unfortunately,
service wiring is done before some of that state is available.
I65702426 attempted to work around this by requiring clients of the
Feature Manager to pass that additional state on every interaction with
the system. Those complex requirements would then select the parts of
the state that they required when it was required. However
implementations of \IContextSource are God objects and their use should
be limited.
Whilst reviewing I65702426, Stephen Niedzielski mentioned that the
application state being available is a requirement. This remarkably
simple solution:
- Keeps the Requirement interface and FeatureManager API free of God
objects;
- Is true to the nature of the Feature Manager - it makes clear and
centralizes the various checks for application state being available
across the codebase; and
- Inject a Requirement implementations' dependencies at construction
time
It just so happens that the $wgFullyInitialised variable flags whether
the application state is available...
Changes:
- Add the the FeatureManager\Requirements\DynamicConfigRequirement class
and tests. The DynamicConfigRequirement lazily evaluates a single
configuration value whenever ::isMet is invoked
- Register an DynamicConfigRequirement instance, configured to evaluate
$wgFullyInitialised while constructing the Vector.FeatureManager
service
Bug: T244481
Change-Id: I7a2cdc2dfdf20d78e4548f07cf53994563b234b3
