Commit graph

1059 commits

Author SHA1 Message Date
Umherirrender d0ac534749 Replace Action::getActionName by IContextSource::getActionName
Change-Id: I41bb15527e5ff9296a53205608c596291d485876
2022-04-19 10:46:48 +02:00
jenkins-bot 7565486e09 Merge "Restore persistent sidebar" 2022-04-18 21:47:34 +00:00
Mortal303 8b51041003 Move Vector menu class logic into Menu mustache template
Replaced “vector-menu-heading” with ‘’(empty string) in “$portletData['heading-class'] = '';”
in includes/SkinVector.php and updated accordingly the includes/templates/Menu.mustache file.
Updated “vector-menu-heading” with ‘’(empty string) in stories/LanguageButton.stories.data.js,
stories/UserLinks.stories.data.js, and tests/phpunit/integration/SkinVectorTest.php respectively
SkinVector and Storybook are cleaned up.

Bug: T290281
Change-Id: I4ca16953799b3dc52e45674bb398c78f14cfc842
2022-04-18 15:18:53 -05:00
Jon Robson f38a2afbf6 Restore persistent sidebar
Bug: T305989
Change-Id: I1304c777ad9581cd8b9153ad1e4483e31660857e
2022-04-18 19:44:11 +00:00
bwang 282fe1aa51 Fix missing create account link follow up
Follow up to 58b6831

Bug: T306116
Change-Id: I2989657f871b0a312e68c4af7757029b0c9c9f24
2022-04-15 18:57:14 +00:00
bwang 58b6831e4d Rely on core to provide accesskey/title attributes, update search toggle location in DOM
Bug: T299980
Depends-on: Ide214de5f246b38689799e20db9e8a4671d9b7ac
Change-Id: I43eb04ec095cc9c1d683df9da05887595c2eddfb
2022-04-14 13:53:07 -07:00
bwang 21f124dad5 Fix missing create account link icon and ensure icon attributes aren't showing up in rendered HTML
Bug: T306116
Depends-on: I509dd153ea2c1e04cb89415f185b7abbe0403773
Change-Id: Iaea83098fda7d77fda6629722dcef3e17e21fe06
2022-04-14 11:03:56 -05:00
Clare Ming 28a3c06cdf Replace TOC arrow icon
Bug: T304166
Change-Id: I182c9e5399d95ecea58dcdabb563a98b4e34e47e
2022-04-11 14:56:42 -06:00
Jon Robson 9f6295426f Prepare for grid layout
Add a legacy class to allow us to transition out certain CSS
with new grid system

Bug: T303484
Change-Id: Ie85451b721b64aee42eb4b356f38c3621ce40b5e
2022-04-11 18:12:43 +00:00
jenkins-bot 107abe79a0 Merge "Scope ULS styles to when language button is in header" 2022-04-09 00:07:09 +00:00
Jon Robson 3432cf2c80 Only consider article ID if A/B test enabled
The article ID shouldn't matter for display of table of contents
unless the A/B test is enabled.

This also has the added benefit of making the content provider
work with table of contents on articles again (content provider articles
always have a page id of 0)

Change-Id: I6af5e1476827828d0974ecbb110476ac1e5dc0c9
2022-04-08 20:04:24 +00:00
bwang 40045c6e0e Scope ULS styles to when language button is in header
Bug: T304468
Change-Id: Iebacb6a7bf3412a6ee76eb5c9fdb9471c02dd16c
2022-04-07 14:47:44 -05:00
jenkins-bot 1e75d6f373 Merge "Clean up unused constants and outdated comments" 2022-04-07 18:19:28 +00:00
jenkins-bot 125a8641e5 Merge "Prepare Vector for temporary user accounts" 2022-04-07 17:35:15 +00:00
jenkins-bot 6fc95b72ba Merge "Drop the Vector.Config service" 2022-04-07 16:54:01 +00:00
Func 12c7d6a0ca Clean up unused constants and outdated comments
Change-Id: If6462e3a67726234abe62fd4d02a5d19ff4f02e0
2022-04-07 16:10:52 +00:00
Func b61a92f052 Drop the Vector.Config service
It didn't vary by the skin version as documented in the Constants class,
and merely another instance of GlobalVarConfig.

Change-Id: I0acd0366a241e04bb79f6aae5dc52284dfa578df
2022-04-07 04:30:20 +00:00
bwang f1c70e99b7 Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons
Bug: T303766
Change-Id: Idda4f286a42152af1d233588a1839ada5491ce95
2022-04-06 17:24:34 -05:00
bwang aa8ec1a878 Revert unnecessary TOC section id change
Change-Id: I62736b47557b79929b8ad984d6709e762b3db549
2022-04-05 15:38:00 -05:00
Nicholas Ray 6fbf08a198 Build A/B test bucketing infrastructure for the table of contents.
* Bucket and sample on server by using the
  `WikimediaEvents.WebABTestArticleIdFactory` service from
  WikimediaEvents (soft dependency)
* Add linkHijack.js so that users bucketed in one group have the
  possibility of remaining in that group if they click a link to another
  page.

Bug: T302046
Depends-On: Ie6627de98effb3d37a3bedda5023d08af319837f
Change-Id: Iff231a976c473217b0fa4da1aa9a8d1c2a1a19f2
2022-04-04 17:06:29 -06:00
jenkins-bot 19f114281a Merge "Drop the LatestSkinVersionRequirement" 2022-04-04 20:18:35 +00:00
Jon Robson 7e3d0828d5 Prepare Vector for temporary user accounts
Bug: T300263
Change-Id: I603b232da338655e54f372bec5df68dd96adfb2e
2022-04-04 19:45:14 +00:00
Jon Robson eca9fcbf79 Drop the LatestSkinVersionRequirement
The LatestSkinVersionRequirement is problematic for various reasons:

1) It uses the "useskin" query string
parameter which may or may not refer to the correct
skin (in the case of a non-existent skin it will always come to the conclusion that
it is not modern Vector and thus must be legacy).

2) It uses the User object which may or may not be safeToLoad
depending on when called.

The feature seems redundant at this point, as we are separating code
into separate classes Vector and Vector22 and all the features only apply
to modern Vector. I suggest we remove it and use the features explicitly in the skin
intended.

Bug: T305232
Bug: T305262
Bug: T302627
Change-Id: I92fa33547bd601e05ddc8c1468e681892e47c16b
2022-04-04 19:22:38 +00:00
bwang 733990f881 Small clean up and TOC update
Change-Id: Ic093888cb2b06d8eef95a1317d791e7e1627d0f6
2022-04-01 13:14:02 -05:00
Tim Starling 254ffbb55a Don't set a user preference on new accounts by default
Make it possible for Vector to be a non-default skin. Only set a user
preference on newly created accounts if that has been explicitly
requested in config.

This should have no effect on WMF production.

Change-Id: I52f62cf7eb78d2be4c59821a3cf29da9619602d9
2022-03-31 14:52:20 +11:00
jenkins-bot 530658f160 Merge "Enable table of contents on all namespaces" 2022-03-29 21:34:18 +00:00
Reedy 0d5e2d184e Drop SkinVector global class alias
Change-Id: I0e35a3c88aced671ef23318bf3970f7f3f261f6a
2022-03-29 17:32:39 +01:00
Clare Ming 1d574b86f1 Add fade to indicate scrollability in TOC
Bug: T302076
Change-Id: Ib803239602333e2a8232a26a10477a0f9933b819
2022-03-28 15:58:26 -06:00
jenkins-bot cd04b72058 Merge "Table of contents links to beginning of article" 2022-03-24 23:51:52 +00:00
Jon Robson dfdf72140c Table of contents links to beginning of article
Bug: T301254
Change-Id: Icb0b0646f81c1070c8f47dd3297225a074f74773
2022-03-24 20:46:35 +00:00
Jon Robson 56164a4275 Enable table of contents on all namespaces
Bug: T304168
Change-Id: Ib61f801640e77c34573c166072f0fb302687e8b1
2022-03-24 08:56:13 -07:00
jenkins-bot 1b8ee10357 Merge "Add data-event-name attributes to legacy and sidebar TOC" 2022-03-23 22:00:45 +00:00
Jon Robson b109e10cf3 End migration mode
Can be merged when database rows have been updated to
no longer use skin version.

* Drop migration code
* Drop skin version preference
* Drop default skin version and existing accounts skin version
* Move skin definitions into skin.json
* Repurpose SkinVector as an abstract class
* Update READMEs

Bug: T301930
Bug: T294995
Bug: T302627
Change-Id: I7454d8f1cfdef81e7f3df476d8ce86736b46fff2
2022-03-23 16:46:42 +00:00
bwang ac54984d75 Add data-event-name attributes to legacy and sidebar TOC
Bug: T302934
Depends-on: I5ef98d5f5713d3d99bc5f7f8112ba2d1e0f62e22
Change-Id: I5806c346abf0375c85248659c636ae3b2d73f661
2022-03-21 22:32:56 +00:00
jenkins-bot eb0e05dff1 Merge "Address some code FIXMEs" 2022-03-21 21:15:49 +00:00
jenkins-bot 1a2197f27d Merge "Make sure label text is not selectable" 2022-03-21 21:06:29 +00:00
Jon Robson b86dbc756c Address some code FIXMEs
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs

Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
2022-03-21 20:29:58 +00:00
jenkins-bot 08efa139be Merge "Remove custom handling of aria-expanded in Vector checkbox hack buttons" 2022-03-21 18:03:14 +00:00
Mortal303 ae50914d4e Remove custom handling of aria-expanded in Vector checkbox hack buttons
Removed class "vector-menu-checkbox-expanded" and "vector-menu-checkbox-collapsed" in
includes/templates/Menu.mustache and deleted the necessary lines in
resources/common/components/MenuDropdown.less, tests/jest/stickyHeader.test.js,
includes/templates/skin.mustache, skin.json, i18n/en.json and i18n/qqq.json.

Bug: T299173
Change-Id: Ibf8a08e6e5d1a6c607abf170c030a0285e84ad74
2022-03-21 23:14:51 +05:30
dylsss 78fcf8e1ea Make sure label text is not selectable
The label text must be enclosed in a span tag in order for it to inherit the rules here: https://gerrit.wikimedia.org/g/mediawiki/core/+/master/resources/src/mediawiki.ui.button/button.less#36

Bug: T296129
Change-Id: I8782a4745704d07fad7ba44c56c476973be90f60
2022-03-21 00:01:06 +00:00
Jon Robson f3f777818c Never show an empty table of contents
This doesn't seem to have got updated when we revised the data format
in T299065.

Bug: T303860
Change-Id: Ib955950e014668fe434da4a1654e977eb43f7dd8
2022-03-17 22:24:24 +00:00
jenkins-bot 1d2e4dda6c Merge "[i18n] Table of contents heading" 2022-03-16 23:40:43 +00:00
bwang 2567e48f64 Fix updateUserLinksDropdownItems not being called
Bug: T304002
Change-Id: Idc9cd3a324f48d2c48243b5011d1559839789539
2022-03-16 22:07:57 +00:00
Jon Robson 6855979a92 [i18n] Table of contents heading
Should be translateable

Change-Id: I3c4515f16b5300a44f89ebdcd426a9d8ac6ad138
2022-03-16 17:18:51 +00:00
bwang 2511e35837 Refactor user links functions in Hooks.php to increase test coverage
Change-Id: I8fbf5cdf111dbb1ec06e5e74056ffdef77f77f22
2022-03-11 21:53:06 +00:00
jenkins-bot 61e2e0fbd8 Merge "Add support for icons not prefixed with wikimedia-." 2022-03-08 16:26:06 +00:00
bwang a1afa7ccb3 Ensure watchlist in user menu dropdown has the collapsible class
Bug: T302084
Change-Id: I27d7c0e46ee809185133fd787fc0c6fa5fcdac2e
2022-03-07 23:12:49 +00:00
Jon Robson 35721398b2 Add support for icons not prefixed with wikimedia-.
Needed for I0226892b2047e55d336c085c173e04a6fb4ecfa5

Bug: T257143
Change-Id: Ia24ac074aea329293c443c772229a0d5ac7246f9
2022-03-07 21:56:53 +00:00
Reedy 1dcfe80ac3 Namespace SkinVector* PHP classes
Namespaceless class aliases are left behind for migration purposes.

They can be removed at a later date when dependant extensions
and skins are fully updated.

Bug: T301204
Change-Id: I2b37c1889ff862ec8bb41325fc9f654c673cd115
2022-03-04 13:30:21 +00:00
Jon Robson a0d399b1e2 Unset data-toc in SkinVector
Bug: T302461
Change-Id: I61cf5d3c9016d5997ae56ba18c5eb877e9f68d91
2022-03-03 11:00:10 -08:00
jenkins-bot 288c8b95b2 Merge "Update Vector menu CSS to use vector-menu-heading instead of h3" 2022-03-02 19:21:10 +00:00
Mortal303 ab11cc9adb Update Vector menu CSS to use vector-menu-heading instead of h3
Replaced h3 tag in includes/templates/Menu.mustache with label tag.
Replaced h3 elements in .storybook/icons.less, resources/common/components/Menu.less,
resources/common/components/MenuDropdown.less, resources/common/components/MenuPortal.less,
resources/common/components/MenuTabs.less,resources/skins.vector.styles.legacy/components/MenuDropdown.less,
resources/skins.vector.styles/components/UserLinks.less, resources/skins.vector.styles.legacy/components/Sidebar.less
and resources/skins.vector.styles.legacy/layouts/screen.less
by vector-menu-heading.

Bug: T290280
Change-Id: I6eee7d6bc47c74a62166d4579fd4d3da3dc88e88
2022-03-02 20:05:36 +05:30
Clare Ming 338e0e72ac Fix language alert regression
- Add test for SkinVector::shouldLanguageAlertBeInSidebar() method.
- Change some methods to protected status -- acknowledging this is not
an optimal change. Until we can pull out some of the language checks
into its own class with injected dependencies (title, feature manager,
languages), this is an interim solution to try to catch regressions
since the conditional states for showing the alert are complex and
ultimately temporary. Extracting the language checks into their own
class can be done in a follow up ticket to help optimize testing
language checks in isolation.

Bug: T302018
Change-Id: I99b7df3029e0af86e4d67b3f446d4ce99260d33e
2022-03-01 15:37:43 -07:00
jenkins-bot 98bc2ee412 Merge "Switch order of sidebar menu and article toolbar in DOM" 2022-02-23 16:39:20 +00:00
bwang 5f0c0cb294 Use TOC template data for showing collapsible section arrows
Bug: T299361
Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd
Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-22 15:47:23 -06:00
bwang e9d2f5e37f Switch order of sidebar menu and article toolbar in DOM
In order to make the TOC go below the sidebar menu, we must reorder the sidebar menu to be directly before the sticky TOC element.
This change involves cached HTML, so this change is separated out from the rest of the CSS changes to be merged first.

Bug: T300875
Change-Id: I8c0924f6de28b15602969de873a843b4cd69548b
2022-02-22 17:21:10 +00:00
jenkins-bot a47f14658c Merge "Move table of contents code to SkinVector22" 2022-02-21 23:53:50 +00:00
Jon Robson ed4b45f44a Move table of contents code to SkinVector22
This avoids the RuntimeException in old Vector, and means
we can safely enable this on the beta cluster

Note, for any users that are in migration mode e.g. skin is
set to 'vector' and the skin version is set to 2 they will
not see a table of contents in the sidebar or article.

This won't be a problem in production provided T299104
is resolved before we enable.

Change-Id: I942a1cb933e7364600fe1af7491aca20546545e5
2022-02-21 23:36:15 +00:00
Nicholas Ray 6e9506dcad Dynamically expand/collapse sub-sections in ToC based on # of headings
Server render the table of contents in a collapsed state when the total
number of headings is equal or greater than the value of
`$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of
contents will be server rendered in its "expanded" state.

In addition:

* Revise table of contents tests to call one `assertion` per element so
  that it is easier to see the exact element that may fail an assertion.
* Revise table of contents tests to call a mount function that can merge
  props to allow for a more flexible set of tests.
* Revise table of contents tests by wrapping a `describe` around tests
  that expect the same prop state.
* Adds typedef for table of sections props

Bug: T300973
Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6
Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-21 14:58:51 -07:00
Nicholas Ray 29e40714bc Offset the TableOfContents top property only when the sticky header is shown
This uses the sticky header's `.mw-sticky-header-element` utility class
to conditionally offset the table of contents to the height of the
sticky header only when the sticky header is enabled.

Bug: T300077
Change-Id: Ibad97a11e708ba19acf27ca82320f7c3e5f80447
2022-02-17 12:20:15 -06:00
bwang 301e09916d Toggle ToC sections when clicking toggle button
Bug: T300167
Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-16 15:48:28 -06:00
Jan Drewniak 7d32ec80d3 Collapse ToC by default & expand sections when clicking section headings
Collapses sub-sections in the new table of contents by default
(except for non-js and reduced-motion users) and expands the
sections when the top-level section link has been clicked.

Refactors the `activateSection` TableOfContents methods into separate
`activateSection` and `deactivateSection` functions.
Adds `expandSection` and `collapseSection` methods.

Adds triangle icon as a visual expand/collapsed indicator
next to all ToC section headings and are hidden via CSS based on
whether or not the section contains subsections.

Adds test for tableOfContents.

Bug: T299361
Change-Id: I36b3ae7f9f633877683bc17a9444c970d7fa7293
2022-02-15 00:09:50 -05:00
jenkins-bot d94c685f02 Merge "Use bodyClasses option to register static classes on skin" 2022-02-08 16:25:02 +00:00
Reedy ee76b72905 SkinVector: Minor cleanup
Change-Id: I788710e17ebed933cc70b0cd88138b0a1051d72c
2022-02-06 22:48:51 +00:00
Jon Robson 6f7a6bb24b Use bodyClasses option to register static classes on skin
Bug: T298734
Change-Id: Ia2ae8e1c655aff8783c2602da992632cd5877bf8
2022-02-04 18:44:43 +00:00
jenkins-bot 3ea4800c40 Merge "Add recursive template for toc" 2022-02-03 20:55:15 +00:00
Jon Robson ddcf51a9ec Drop skin override
This is often used by gadgets/scripts to request
information from the API. Given `vector` means old Vector
now that leads to styling issues.

The unfortunate side effect of this is that any code
checking mw.config('skin') === 'vector' will no longer work
and we'll likely need to patch various gadgets accordingly.

Bug: T300814
Change-Id: Ic920e91960cf81790096395256b75f8ed0dc4173
2022-02-03 19:00:24 +00:00
jenkins-bot 59c89b2db7 Merge "Overriding getPortletData will soon be deprecated" 2022-02-03 16:28:27 +00:00
jenkins-bot c03a5974cb Merge "Pass skin name to Hooks::isSkinLegacy" 2022-02-02 22:52:54 +00:00
Jon Robson 9b8d1b64cb Overriding getPortletData will soon be deprecated
See Ib8fc4cd183df3ed059a2d7000c56ab0a11d34f47

Bug: T299456
Change-Id: I743088e2665f8b304fb6273e912f9a6e5ff92e66
2022-02-02 14:37:36 -08:00
Jon Robson 2a2ee9b4d4 Pass skin name to Hooks::isSkinLegacy
Hooks::isSkinLegacy is only checking the skin version
but not the skin name. This is likely why we are seeing
errors due a mismatch between the result of Hooks::isSkinLegacy
and SkinVector::isLegacy

The parameter is made optional as it is not
always needed. For example in the onGetPreferences
method the skin hasn't been set at this point so all
we need to do is check the skin version.

Bug: T299971
Change-Id: I98465d5f6429f0a57dd0a95efcda71f380f3e842
2022-02-02 13:55:16 -08:00
Jon Robson c59a3b756f Fix the opt in URl
Hash fragment is wrong

Bug: T300097
Change-Id: I9e63606b66195a3b3db95e519514019dbd7d1bdb
2022-02-02 18:54:13 +00:00
jdlrobson d8382ec96b Drop search related feature flags
Given Wikidata is the only project using modern Vector,
and the only project where the search API is not applicable,
this will result in a loss of autocomplete on Wikidata.org
which will fall back to the non-JS mode.

Bug: T290688
Change-Id: Iece5a4efd43e09cd90c842c9c134ca115b35f2b2
2022-01-31 21:00:22 +00:00
jenkins-bot fa3c528bef Merge "Don't show language alert on main page if it has no languages" 2022-01-31 18:15:49 +00:00
jenkins-bot af39ad98ea Merge "Language alert box should use Html::noticeBox" 2022-01-31 17:05:57 +00:00
Clare Ming 5d2bc68da1 Don't show language alert on main page if it has no languages
Bug: T299581
Change-Id: Idc5b702626249ebec5d627e7b88fd6adf3e3750a
2022-01-31 09:43:15 -07:00
Clare Ming 588d273360 Fix issues with language alert in sidebar:
- Don't show language alert if:
  - language button is not in header
  - on main page
  - on special page
- Update message with sitename.

Bug: T299581
Bug: T295555
Change-Id: I6290ea440e6b4673f29939376ac47ab53a882001
2022-01-28 13:58:31 -07:00
Jon Robson e1f1899dae Add recursive template for toc
Depends-On: I5ceec7f7bdea8b16ba0b300486ec0c4f2202b602
Bug: T299065
Change-Id: I0205596f0f7c0f452e80bd6a1f49e59e8388b4b8
2022-01-28 19:58:57 +00:00
Jon Robson 029110810e Language alert box should use Html::noticeBox
Html::noticeBox doesn't output any deprecated classes so
will not conflict with any user gadgets now.

Bug: T299625
Change-Id: Ic9aef5c8ff3fae6a79c7cf82cc3c97714cf40b3d
2022-01-27 15:35:38 -08:00
jenkins-bot 0e08ae8c17 Merge "Rely on core TOC data to show the TOC in Vector" 2022-01-27 20:10:29 +00:00
bwang d244f43e39 Rely on core TOC data to show the TOC in Vector
Bug: T298796
Depends-on: I406acf333d28b3898e3bc4968d05224febd09b3c
Change-Id: Iebb9c86b409a49d211c320f540b9af409b604b5b
2022-01-26 16:14:17 -06:00
Nicholas Ray 3c433a5315 Add sectionObserver and tableOfContents component JS to respond to intersection changes
This commits sets up the Table of Contents to bold the active section
when the section is scrolled.

Unfortunately, because our content does not have actual sections but
instead has a flat list of headings and paragraphs, we can't use
IntersectionObserver in the conventional way as it is optimized to find
intersections of elements that are *within* the viewport and the
callback will not reliably fire during certain scenarios (e.g. with fast
scrolling or when the headings are not currently within the viewport).
Furthermore, iterating through a list of elements and calling
`getBoundingClientRect()` can be expensive and can also cause
significant forced synchronous layouts that block the main thread.

The best compromise in terms of performance and function that I've found
is to use a combination of a throttled scroll event listener and
IntersectionObserver's ability to asyncronously find the
boundingClientRect of all elements off the main thread when `.observe`
is called which is the approach this patch takes. Although this is an
unorthodox way to use IntersectionObserver, performance profiles
recorded while holding the "down" arrow and scrolling for 10 seconds
with a 6x CPU throttle are comparable between master and this patch:

master: https://phabricator.wikimedia.org/F34930737
this patch:  https://phabricator.wikimedia.org/F34930738

Bug: T297614
Change-Id: I4077d86a1786cc1f4a7d85b20b7cf402960940e7
2022-01-26 14:11:43 -07:00
Jon Robson 9fba9b6b9e Do not load common.js twice
An error in both of these modules. This module is additive (it doesn't
replace the existing user module) so only needs to add new pages, not
append to existing pages.

Bug: T300070
Change-Id: I3ba2ce82ba924972d0f9fea763328510aef41f8e
2022-01-25 20:10:31 +00:00
Jon Robson b1cdf4acae Opt in link should be different in migration mode
In migration mode the control for opting out is different

Bug: T299927
Change-Id: Ie824c9051c929641e5ebab7a7b4a062e469ed6a0
2022-01-25 00:54:51 +00:00
Jon Robson 435c903523 Fix bug in SkinVersionLookup
Bug: T299971
Change-Id: Icd8874315bf3c5846b00e8c34eb1a739c4a0feba
2022-01-24 13:34:06 -08:00
jenkins-bot 92e5d4fd46 Merge "Avoid escaping TOC section titles" 2022-01-21 16:30:47 +00:00
jenkins-bot efb6b4d152 Merge "Respect useskin when operating in MigrationMode" 2022-01-20 22:20:33 +00:00
bwang 3abd70392b Avoid escaping TOC section titles
Change-Id: I81f92627642c20d0770b2bc3223e056fc646365a
2022-01-20 12:31:11 -06:00
jenkins-bot 555db12047 Merge "Use 'toc' skin option and render with new TableOfContents mustache template" 2022-01-20 18:09:34 +00:00
Jon Robson 6cd9cc5be0 Do not try to make watchlist collapsible on wikis where watchlist is disabled
Bug: T299671
Change-Id: I9b44401ad753881ca986157dc06bb4402edc1017
2022-01-20 09:42:58 -08:00
Jon Robson 94bab9f45f Respect useskin when operating in MigrationMode
Bug: T299171
Change-Id: I7c183949c358a5eb07c273044f63ac6474a62ad2
2022-01-19 22:33:28 +00:00
bwang 8a957c0163 Use 'toc' skin option and render with new TableOfContents mustache template
Bug: T297611
Change-Id: I8332f7b9c9574d8dece4f7111b299b95533cf386
2022-01-19 14:38:51 -06:00
Jon Robson 1149d3d611 Drop watchlist in user menu feature flag
Working correctly. No longer needed.

Additional change:
* add tooltip to menu

Depends-On: I418ce75bda8015520d1f1742ddcdfefbc8b9a162
Bug: T289619
Change-Id: I42f21ca8836e5042d07102e1516ca386478dfabc
2022-01-19 16:10:32 +00:00
Jon Robson 37ee126a85 Restore icons to user links dropdown
Follow up to
I62562969a00eb96c83af4519e0e34e4a77ed8b19

Bug: T289619
Change-Id: I88a2d4af97227bb69dc9a11ea7ceac54895d2376
2022-01-18 11:14:44 -08:00
Jon Robson 55bcce3cc0 Don't run Vector hook when menu absent from page
While editing I was seeing a fatal due to this error being null
Err on side of caution and check for existence of menu
Follow up to I8309492881142d47eec4da5cc4aa5c6febbd1b35

Bug: T289619
Bug: T299352
Change-Id: I62562969a00eb96c83af4519e0e34e4a77ed8b19
2022-01-18 02:05:37 +00:00
Func 0bd3a30343 Use field name for the hide-if statement
Field name without 'wp' prefix (which is used as the key in html descriptor) is required.
After I58f9df384df8ecc5ebae8cac68ec2251351bc984, values of fields that are supposed to be disabled would be loaded from default, use a miss-matched field name would be treated as disabled.
It works in UI now, but it's not a good idea to strip the 'wp' prefix on the server-side.

Bug: T298819
Change-Id: If98368ad400986afaef3187867f201044ebf0efb
2022-01-17 03:24:10 +00:00
Jon Robson 591e1d296c [Refactor] simplify watchlist link generation and adopt new icon
Bug: T289619
Change-Id: I8309492881142d47eec4da5cc4aa5c6febbd1b35
2022-01-14 00:26:10 +00:00
Nicholas Ray 699579e646 Add clarifying comment for why scroll padding is applied to html tag.
Change-Id: I9f4b44536b1e8aace41c8699a0d1946a54aa0bfe
2022-01-13 11:59:59 -07:00
Clare Ming f4aafdd263 Update hook to check for new vector skin key.
Bug: T298916
Change-Id: I2946b773b8214cb277be61990df46b109a13748c
2022-01-11 16:44:20 -07:00
jenkins-bot 25bfcf4d00 Merge "Ensure sticky header language button only shows when there are multiple languages and when ULS is enabled" 2022-01-07 23:42:51 +00:00
bwang 3dda2dda5b Ensure sticky header language button only shows when there are multiple languages and when ULS is enabled
Bug: T298705
Bug: T297579
Change-Id: Iae5db6fd0ec6ae66bb16e8579f14d3e799bf3cbd
2022-01-07 15:42:57 -06:00
jenkins-bot 0488310612 Merge "Restore gadget support to new internal skins" 2022-01-07 20:41:44 +00:00
jenkins-bot 84ed8343c2 Merge "Vector is split into 2 skins" 2022-01-07 20:16:57 +00:00
jdlrobson 99cf6eb5be Restore gadget support to new internal skins
For vector-2022 skin:
* MediaWiki:Vector.css and MediaWiki:Vector.js are added via the
existing ResourceLoader hook.
* User:<name>/vector.js and User:<name>/vector.css are added via new
VectorResourceLoader modules

Bug: T297758
Change-Id: I37e9a9d353695502213c7a651530995252d9505f
2022-01-07 00:18:17 +00:00
jdlrobson 7d2d50873f Vector is split into 2 skins
A new vector-2022 skin is added. This will be the eventual home
of the new Vector skin when we are ready to migrate.

Please see SkinVector class for the migration plan to simulate this
as part of testing.

Bug: T291098
Change-Id: Ibaddf94a5bfb5e21bbbaf1e0aa1b343a3f566d2d
2022-01-06 15:52:10 -08:00
Nicholas Ray 3028a4f9d8 Refactor search component expand behavior and add auto-expand-width prop to search component
In preparation for I30c670e3f195f77a27715c6b494a3088b7a55712, refactor
the search component expand behavior so that it can accomodate the new
changes in WVUI while maintaining backwards compatibility with the
status quo.

Additionally, pass/enable the `auto-expand-width` prop to the main
header's search. This will be inert until the new changes in WVUI have
landed.

Bug: T297531
Change-Id: Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
2022-01-04 15:14:49 -07:00
bwang bd799ecc2e Add watchstar to sticky header (alternative)
Bug: T294759
Depends-on: I88af8585e8fc75f77ebef867d267199aeb2c6592
Change-Id: I15c409830ef8970ff7319b4dd447904443949b8d
2021-12-21 09:40:48 -08:00
jdlrobson 9444bc3e86 DRY up mw-ui- class generation
Repeated in multiple places now, making it harder to change
button/icon classes.

Change-Id: I3799d065ac0c4ccdc900cbebe9140fb8ea657008
2021-12-17 10:06:46 -08:00
jenkins-bot c6691a191d Merge "Disable table of contents in article body" 2021-12-17 00:17:16 +00:00
jdlrobson ef59d7b973 Disable table of contents in article body
This will currently remove table of contents in article body
for legacy and modern skin.

To prevent us deploying this in current form, a check is
added in generateHTML

This requires an adjustment of OverridableConfigRequirement to
support requirements which do not vary on whether the user is
logged in or not.

Bug: T297610
Change-Id: I847a284229e498b3aa04c16ea3f84c360e735052
2021-12-16 16:11:05 -07:00
jenkins-bot 44ef14574f Merge "Drop language A/B test bucketing check" 2021-12-16 22:00:45 +00:00
jdlrobson 5a8a3d0d13 Drop language A/B test bucketing check
The existence of this code means we can't safely use this service
inside the skin's constructor.

We no longer need this, so that's fine.

Change-Id: Iffd82c00030c4cf1238a931dc971ffb4686d2620
2021-12-16 12:15:47 -08:00
bwang 321e6b19e1 Move watchlist button out of user menu dropdown and adds temporary feature flag
Bug: T289619
Change-Id: I57addbed2ea8ead5d98bce659f3db1f88f8a5094
2021-12-15 23:21:37 +00:00
jdlrobson 44aeee5d83 Vector uses html-title-heading
The H1 is available with the correct attributes in core now, so
we can use that instead of our own markup. This also means Vector
will benefit from updates to the heading in core such as main page
special handling.

Bug: T297728
Change-Id: I4d10370678fad6455d73994bf340891760543b71
2021-12-15 22:27:48 +00:00
jenkins-bot 9efaaf8afa Merge "Add feature flag for sticky table of contents" 2021-12-15 18:16:16 +00:00
Clare Ming 72fecd41f2 Add feature flag for sticky table of contents
- Add TOC feature requirement.
- Update data for SkinVector.
- Add TOC template.

Bug: T297610
Change-Id: I90bc5e21ba187ac9dd74d5e97763834795a0545b
2021-12-14 16:26:58 -07:00
jdlrobson 64ee622c73 Validate the value of VectorWebABTestEnrollment
The generation of JavaScript will throw a RuntimeException
making it obvious when an invalid A/B test has been setup.

Bug: T297662
Change-Id: I75b0e923463bf52f8fc5b5c6b7f9baf586053154
2021-12-14 22:22:26 +00:00
jdlrobson 983437312b Don't add language button to sticky header on pages without languages in content
In Commons languages appear in sidebar.
The language button shouldn't show in the sticky header on these wikis

Bug: T297362
Change-Id: I17d283a7c0ad20bdcaf39b234a7fe766880ab28a
2021-12-13 20:04:50 +00:00
jenkins-bot dc6bd9af95 Merge "Remove need for html-class template property" 2021-12-10 18:03:22 +00:00
jenkins-bot 2e492515b3 Merge "Add language switching alert in sidebar for language in header" 2021-12-10 17:04:06 +00:00
jdlrobson ca501bb581 Remove need for html-class template property
Follow up to 9dcfc1f

This simplifies the template by removing the need for the html-class.
The font-size can be provided to the entire content area meaning we don't
need the link-only class

Change-Id: Id5c49358f6ec007b3205ee390cf68334a1e56de5
2021-12-10 08:40:01 -08:00
Clare Ming 9dcfc1ff27 Add language switching alert in sidebar for language in header
- Add i18n messages.
- Update relevant data methods in Vector.
- Update sidebar template + styles.
- Add new template partial for sidebar actions.
- Add feature flag to turn on/off alert.

Bug: T295555
Change-Id: I232ce13770917d51495391f4b8d8d1a3a8a7afb8
2021-12-09 16:37:36 -07:00
jenkins-bot d0116e07f9 Merge "Make ULS in header quiet progressive button" 2021-12-09 17:33:03 +00:00
bwang b79290f5c9 Make ULS in header quiet progressive button
Bug: T291286
Change-Id: Id1e056330606b87bafb8f43e7ff28d96290465b4
2021-12-09 15:27:04 +00:00
jenkins-bot a7c16c7f30 Merge "Feature flag language button in main page header" 2021-12-08 23:11:53 +00:00
Nicholas Ray 24a5817315 Feature flag language button in main page header
Per the ticket, when this flag is enabled (and the
VectorLanguageInHeader config is enabled) we want to move the language
button from the bottom of the main page to beside the main page's title.

This config can be toggled with the `languageinmainpageheader` query
param (e.g. `?languageinmainpageheader=1`).

Bug: T293470
Change-Id: I41b4677f80b939810d16907b508ab29936f8629c
2021-12-08 15:11:25 -07:00
Clare Ming 43c1fee6b4 Add data-event-name attribute to sticky search icon.
Bug: T296999
Change-Id: I3d5d8534f1946a9e9c876451fb7f7605712827e4
2021-12-07 16:30:15 -07:00
jdlrobson f0ed70d709 Restores language button icon font size
The font size of icons should never be changed. Since it's also a span

Bug: T296212
Change-Id: I8bf4e9a7d43a9e5206d3ff6d89e2c3f74fa0d25a
2021-12-01 01:08:49 +00:00
vladshapik 262a520a2c Avoid using User::getOption
Remove using of User:getOption since this method
will be hard-deprecated. Now it is soft-deprecated.

Bug: T296083
Change-Id: I3194a9c1c5c70592f88bc4dbedc78846d1141768
2021-11-29 23:46:05 +00:00
jenkins-bot 5e7dc81e38 Merge "Ensure sticky header ULS is tracked by DesktopWebUIActionsTracking" 2021-11-23 16:09:45 +00:00
jenkins-bot ed4ec0079a Merge "HTMLLegacySkinVersionField: accept string 'default' value" 2021-11-23 11:27:41 +00:00
MusikAnimal 5207a15b91 HTMLLegacySkinVersionField: accept string 'default' value
After I628435a4a, we were asserting a boolean was given because we're
extending HTMLFormField which requires a boolean value. This was safe
because GlobalPrefs would provide a boolean, but that changed with
I594f6297.

We could rework GlobalPrefs once again to ensure only a boolean is
passed in, but since HTMLLegacySkinVersionField already has special
handling around the data types, it seems to make sense to contain the
type transformation in this class.

Simply removing the Assertion is enough to prevent T296068, however
depending on when the global preference was saved (such as since MW
1.38.0-wmf.9 but before wmf.10), it's possible either a bool or a string
was saved, hence we check for both to ensure correct display.

Bug: T296068
Change-Id: If10b948617d2bb8346475f207fe425fb768cb987
2021-11-23 00:57:25 -05:00
bwang 90a3a226e7 Ensure sticky header ULS is tracked by DesktopWebUIActionsTracking
Bug: T289815
Change-Id: I1960614e12a50a20af157874b925610d29dfa2c7
2021-11-19 16:51:37 +00:00
bwang 54639c4af3 Fix icon button spacing, make it consistent with margin defined in core
Since a margin was added to adjacent sibling spans of icons (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/736919), Vector icon buttons have had too much spacing. This patch removes the extra spacing defined in Vector CSS and the accidental whitespace that was included in the ULS buttons..

Change-Id: I308d1941c5f82cb144c2a9d233fbf44c730413a7
2021-11-18 18:55:00 +00:00
Clare Ming 457dcfc472 Add scroll event + init A/B test logging to sticky header, AB js
- Pull IntersectionObserver into new file to share observer with different callbacks:
  - Wrap show/hide functionality of sticky header in conditionals based on user test group or by default.
  - Fire hooks for scroll event tracking in WME.
- Add new js for A/B test functions and variables:
  - Fire hook to send data for A/B test initialization.
- Update main js to include scrollObserver, A/B test init functionality.
- Add A/B test config.
- Update ResourceLoader package dependencies for sticky header.
- Though not a strict dependency, see I42e3e7c2084c1e88363d5d1662630ed23a28c4d2 in WME repo which uses these hooks to log scroll events.
- This patch includes changes from I56f40e706f8706fde1c0891a0561dd32c5e02bfc which were consolidated here for simplicity and ease of review - related to T292587 which calls for logging an init event for bucketing of users during A/B testing.

Bug: T292586
Change-Id: If6446e1e84cea3649905808c4f0e9f6862255fa3
2021-11-09 15:00:25 -07:00
jdlrobson 768a07ec6c Add sticky header edit feature flag
Can be disabled via &vectorstickyheaderedit=0 or configuration
change.

This will allow us to fine tune the edit features without blocking
deploying the existing feature.

Bug: T294383
Change-Id: Ic282ea4f2ff0108eeaa154c8a77e4e5fd30daeae
2021-10-26 21:59:29 +00:00
jenkins-bot 68aa856916 Merge "Remove duplicate vector-menu-dropdown class" 2021-10-25 22:59:52 +00:00
Nicholas Ray 24dbcd1a1a Remove duplicate vector-menu-dropdown class
This class is already being added via SkinVector::decoratePortletClass
so the one in the Menu template can be removed.

Bug: T291096
Change-Id: Icb9fa7a1e583ad4ef0138c5bd069aa68598c9b6e
2021-10-25 09:55:42 -06:00
Fomafix 574bbfd549 Combine return paths in getLanguagesCached
Also use single quotes instead of double quotes and fix typos.

Change-Id: Ibfd855f55f38ea824d38ad858b654d8229838cd1
2021-10-23 12:55:37 +00:00
Nicholas Ray 876d3ddf39 Make dropdown menus toggle with enter key
Bug: T291096
Change-Id: Ia5d1a33aa04dab09f1454ade4816fdb9d48f1eca
2021-10-21 09:59:58 -06:00
jdlrobson 358d81ddce [a11y] Add title attributes to logout, talk and history and DRY up code.
* Addresses feedback in:
** T289816#7440605
** T283505#7440585
Change-Id: I98abdab8c3eb20567af527e6a8bf75faa5670d6b
2021-10-19 08:47:00 -07:00
Clare Ming fa15608f3e Fix article title in sticky header template.
Bug: T289814
Change-Id: Ie12097f722053eb9efb557a1e9668d26104a7091
2021-10-18 14:00:47 -06:00
Clare Ming 6c009f87c0 Make edit icons in sticky header untabbable for VO/screen readers.
Bug: T290201
Change-Id: I5248db6ab29b1a9a995a5053d84e63cfb7b9fd93
2021-10-12 16:02:52 -06:00
Clare Ming c4d1d8c579 Switch order of edit icons in sticky header.
Bug: T289723
Change-Id: If54184eb28d32a189e539c74967918241ddcae41
2021-10-06 09:32:35 -06:00
jenkins-bot 29b35c25ac Merge "Add edit icons to sticky header" 2021-10-05 23:49:35 +00:00
Clare Ming 67e7eab714 Add edit icons to sticky header
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).

Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
2021-10-05 23:31:19 +00:00
jenkins-bot ba00180eed Merge "Logo scales with font-size" 2021-10-05 19:21:04 +00:00
bwang 405b52054f Update sticky header to be hidden to screen readers and not tabbable
- Adds aria-hidden="true" to the sticky header
- Adds tabindex="-1" support to Button.mustache and update sticky header button data
- Add tabindex to cloned user menu

Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9
2021-09-30 09:47:57 -05:00
jenkins-bot 74736571e7 Merge "templates: Move spaces into conditions for cleaner html" 2021-09-29 22:39:06 +00:00
Nicholas Ray 1209b388e9 Add scroll padding to the root element when the sticky header is enabled
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)

Known limitations:

* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.

[1] https://caniuse.com/mdn-css_properties_scroll-padding-top

Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
2021-09-29 14:25:26 -06:00
Umherirrender 5e4b0ef26a templates: Move spaces into conditions for cleaner html
When looking at raw html it always looks like something is missing when
there are trailing or leading spaces on attributes.
Just move the space into the conditions and it looks better.

Change-Id: I2a8d3246c43b8345eb819eae5887a39f68cfbdc0
2021-09-29 14:06:07 +02:00
jdlrobson e12fe1dbb0 Logo scales with font-size
Bug: T291895
Depends-On: Ie86a5b59fbf93a400796a4cac3724207830092b5
Change-Id: I194a11316e8ac68319f41c6a79b2c9cd081a4b66
2021-09-28 21:44:53 +00:00
jenkins-bot 20135a348e Merge "Wire up sticky header search feature" 2021-09-27 22:58:34 +00:00
jdlrobson 125ea5dea9 Wire up sticky header search feature
Bug: T289724
Change-Id: I784ea5eb12b6f43d19769ff48a14d3fd4627853c
2021-09-27 14:47:58 -07:00
jenkins-bot f9405739ed Merge "Vector menu items are wrapped in spans + improve Vector addPortletLink support" 2021-09-27 19:38:36 +00:00
jdlrobson a6c0b21044 Vector menu items are wrapped in spans + improve Vector addPortletLink support
* In legacy Vector, menu items are now wrapped with spans. This
  consistency in HTML is required for splitting Vector into two
  different skins.
* Vector's portlet link items now support icons

Bug: T289163
Bug: T291722
Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5
2021-09-25 05:01:55 +00:00
jenkins-bot ce1888e6b6 Merge "Update anon user menu introduction link to be localized and not hardcoded" 2021-09-24 20:54:57 +00:00
bwang 8e35a09964 Update anon user menu introduction link to be localized and not hardcoded
Bug: T290813
Change-Id: I38bd95abbca0fea68a795986971da02ea25b1c36
2021-09-24 13:40:16 -05:00
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00:00
jenkins-bot 67cd5b7db3 Merge "Do not use User session in the constructor" 2021-09-23 19:25:04 +00:00
Ammarpad 99930c4722 Defer to core for more template data
Bug: T289221
Depends-On: Ieb5398c3505602dfbf77d97f24f3d19f703924b8
Change-Id: Ib3ffe0b3f4fd7342b749cd827f40faa7a429bf23
2021-09-23 07:28:40 +01:00
jdlrobson d4befe8c39 Do not use User session in the constructor
This is going to be forbidden going forward.
The legacy lookup and overrides are deferred
until they are actually needed to keep the constructor
cheap

Bug: T289163
Change-Id: Ib23360e3439abc828404c1de8e0906915ee7d8b6
2021-09-23 01:36:42 +00:00
Ammarpad 2bcfac0f07 Remove redundant template data
These values are already provided in core

Bug: T289221
Change-Id: I36f5a22e3e866bc41502a9a53ec502b145955fbf
2021-09-22 19:18:05 +01:00
bwang 809a972676 Fix sticky header language button
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button

Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
2021-09-21 19:59:16 +00:00
Clare Ming bdc8852a1c Add aria-label to language dropdown menus
- Update portlet data.
- Update menu template.
- Add translatable strings.

Bug: T289523
Change-Id: I9b8f40843609c0192afdabd3117167b933155842
2021-09-15 12:25:23 -06:00
jenkins-bot 3c894154df Merge "Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector" 2021-09-15 16:43:41 +00:00
Nicholas Ray 93745e4800 Add search to sticky header
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.

In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.

* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).

* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.

* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.

* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.

Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-14 16:58:07 -07:00
jenkins-bot 8f2a5c58f2 Merge "Add history and talk page icons to sticky header" 2021-09-14 23:26:06 +00:00
jenkins-bot bd1dab6bb8 Merge "[Storybook] Add Header component" 2021-09-14 21:45:53 +00:00
jdlrobson 52204c0f1a Add history and talk page icons to sticky header
Bug: T290597
Change-Id: Ib590399df09a9da8e181b331d4227b0de30b9a8e
2021-09-14 12:34:47 -07:00
jenkins-bot b7ef3d9a0e Merge "Add page title to sticky header" 2021-09-14 19:31:33 +00:00
jenkins-bot 53d1508f62 Merge "Add user menu to sticky header" 2021-09-14 19:23:13 +00:00
Clare Ming 3362e62ef2 Add page title to sticky header
- Fade out after 500px.

Bug: T289814
Bug: T290596
Change-Id: Ice3054f417707261d7c06769cb92aa170cfadba1
2021-09-14 19:12:29 +00:00
Clare Ming 755f10cd0b Add user menu to sticky header
- Remove unused button, data from sticky header.
- Simplify template to leave sticky user menu placeholder.
- Update js to clone user menu with new ids.
- Include gadget-injected items in sticky user menu.

Bug: T289816
Change-Id: I23fde537efc2a66a2df22cd2633fbab034b73eb6
2021-09-14 12:57:08 -06:00
jdlrobson ad5c127239 [Storybook] Add Header component
* Moves screen variables relating to Header to Header
* Adds a Header storybook entry
* Moves data-logo from Logo template to Header.mustache
* Updates UserLinks to use USER_LINK_PARTIALS
* Renames confusing SearchBox story names
* Updates package.json to use a static folder.
* Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles
since deploys there come earlier
* Removes usages of ID selectors

Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
2021-09-14 18:33:10 +00:00
bwang 687c6a50d8 Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector

Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
2021-09-14 10:47:05 -05:00
libraryupgrader 1a54f2daa8 build: Updating composer dependencies
* mediawiki/mediawiki-phan-config: 0.10.6 → 0.11.0
* php-parallel-lint/php-parallel-lint: 1.3.0 → 1.3.1

Additional changes:
* composer.json: Updated phpcs command in composer test (T280592).
* composer.json: Added phpcs command to scripts (T280592).

Change-Id: Icdd62e1e68c64f0137b11d1aeae5def531abac1d
2021-09-10 22:54:21 +00:00
jdlrobson 31dba307ed [refactor] SearchBox uses Icon template partial
Change-Id: I8ff49b85dd2151618e48251e0fc38152a50ca381
2021-09-09 18:57:37 +00:00
bwang 62149265e9 Add ULS to sticky header
- Rework Icon template into Button template to support all button variants
- Update ULS helper functions in SkinVector
- Update StickyHeader template to use the new Button template
- Update Storybook

Bug: T289815
Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362
Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
2021-09-08 12:39:55 -05:00
jdlrobson 3ed167f318 [storybook] Document button usage and update broken stories
* add stories for buttons and icons using wvui and mwui
* Update user link stories
* Add the vector-menu-dropdown-noicon class to more and
variants menu
* Fixes the language button story and simplifies its code.
* Updates Hooks::makeButtonIcon to Hooks::makeIcon which
reflects the method purpose more. It doesn't output button
classes.

Bug: T289514
Change-Id: Ifd750da0c0181ec56f39ff00d653e88bfc848038
2021-09-07 21:23:33 +00:00
jenkins-bot fed987d079 Merge "Simplify how we generate icons and button classes in Vector" 2021-09-03 19:54:03 +00:00
jdlrobson b88f2970f7 Simplify how we generate icons and button classes in Vector
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS

Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
2021-09-03 19:25:31 +00:00
Nicholas Ray 1ab4600e4d Add 'is-language-in-header' key back in
Looks like this was an unintentional deletion from

I16223ce849267e718aad22b8a24b2327332ac8b7

Change-Id: I56350d7e936b4d179c1bd12376ffebf295897a99
2021-09-02 13:56:59 -06:00
Clare Ming 21c45837ef Spoof aria-expanded for dropdown menus using checkbox hack
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.

Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
2021-09-01 16:12:26 -06:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
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
2021-09-01 12:32:31 -07:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- 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
2021-08-31 10:59:59 -05:00
jenkins-bot a068d6125d Merge "Template directory is set in skin.json" 2021-08-30 17:43:50 +00:00
jenkins-bot fef51f9023 Merge "Improve readability of anon user menu for screenreaders" 2021-08-27 20:36:16 +00:00
jdlrobson 3435f8fd9b Template directory is set in skin.json
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
2021-08-27 17:36:28 +00:00
bwang d15005408f Improve readability of anon user menu for screenreaders
Bug: T288293
Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b
2021-08-26 12:58:10 -05:00
Clare Ming 1efe0a4203 Remove user links feature flag
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
2021-08-26 10:07:15 -06:00
jenkins-bot 30cdc5894e Merge "Do not show create account link for private wikis." 2021-08-25 21:40:46 +00:00
jenkins-bot 6e6be4fbf5 Merge "Replace deprecated CentralIdLookup::factory" 2021-08-25 21:31:27 +00:00
jenkins-bot 7afd480266 Merge "Add title attributes to menu icons on hover" 2021-08-25 21:25:17 +00:00
Clare Ming cd2a186469 Do not show create account link for private wikis.
- 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
2021-08-25 21:23:49 +00:00
Clare Ming 3dccc74b4b Add title attributes to menu icons on hover
- 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
2021-08-25 13:20:22 -06:00
TChin a841713f35 Replace deprecated CentralIdLookup::factory
Bug: T289713
Change-Id: Icba4d81d66a40012658172929ed4e015c074b903
2021-08-25 13:58:49 -04:00
jdlrobson 391d9ba509 [refactor] Clean up responsive handling
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
2021-08-23 15:59:15 +00:00
Sam Smith e6e2120099 Fix language treatment A/B test bucket counting
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
2021-08-09 19:48:38 +01:00
bwang 46d98c90f4 Add sticky header feature flag, query param, and class
Bug: T284463
Change-Id: I520832fa1e0a66bb24479e47c8e8f8011e514299
2021-08-04 18:49:56 +00:00
jenkins-bot 4974d7d595 Merge "Run Vector's SkinTemplateNavigation hook last" 2021-07-29 23:42:03 +00:00
jdlrobson d0c41d1dfc Run Vector's SkinTemplateNavigation hook last
Depends-On: Iec99be92378dc1a43f39428caffc03e1f594a927
Bug: T287533
Change-Id: I7d840d047627108a0a921ea52d5cb4bd06f36ab5
2021-07-29 14:27:28 +00:00
jenkins-bot 7ebd1ddc92 Merge "Remove duplicate login button from user links user menu." 2021-07-28 22:02:06 +00:00
Clare Ming 27996c496b Remove duplicate login button from user links user menu.
Bug: T287585
Change-Id: I8f040be7f76911ca05268981b270e2eb44b2ff96
2021-07-28 15:32:25 -06:00
Clare Ming f89a5b2d0b Add statsd counter for languages A/B test
Bug: T286932
Change-Id: I86ef358bfd5316e1f89fb1fde16f1cddade4d211
2021-07-28 13:26:45 -06:00
jenkins-bot 63dcfb720d Merge "Copy interwiki links into sidebar" 2021-07-27 21:21:20 +00:00
Nicholas Ray d8f62f780c User menu design tweaks
* 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
2021-07-27 14:25:32 -06:00
bwang a27b6f7096 Copy interwiki links into sidebar
Bug: T287206
Change-Id: I951b2a277f9484f8e2735951d85c0766098607b5
2021-07-27 12:08:11 -05:00
libraryupgrader 8dc9511bbc build: Updating dependencies
composer:
* mediawiki/mediawiki-codesniffer: 36.0.0 → 37.0.0

npm:
* svgo: 2.3.0 → 2.3.1
  * https://npmjs.com/advisories/1754 (CVE-2021-33587)
* postcss: 7.0.35 → 7.0.36
  * https://npmjs.com/advisories/1693 (CVE-2021-23368)
* trim-newlines: 3.0.0 → 3.0.1
  * https://npmjs.com/advisories/1753 (CVE-2021-33623)
* prismjs: 1.23.0 → 1.24.1
  * https://npmjs.com/advisories/1762 (CVE-2021-32723)

Change-Id: Ief0fe110b6746c209085502cf4639429a4116ab5
2021-07-24 01:35:45 +00:00
jdlrobson f66cc87898 Removes additional space between language button label and icon
Caused by whitespace in HTML

Addresses topic 2 from Alex's feedback in:
T191021#7228591

Bug: T191021
Change-Id: I32de25d4f4927c2ea8059b972a55b79a94691e76
2021-07-21 21:50:10 +00:00
jdlrobson 13de4ff225 Prepare for updated mw-ui-icon implementation in Vector
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
2021-07-20 18:52:40 +00:00
ZabeMath e7fbb01aca Avoid using User::setOption()
User::setOption() is deprecated and should be replaced with UserOptionsManager::setOption()

Bug: T277818
Change-Id: If867b4f97918db581d337a32b33cbca2315a71f6
2021-07-18 13:48:44 +02:00
jenkins-bot 2e5ecae6d2 Merge "Consolidate user links outside of the user menu dropdown into a single new menu" 2021-07-15 20:48:37 +00:00
jdlrobson 276738b620 Consolidate user links outside of the user menu dropdown into a single new menu
- 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
2021-07-15 20:27:54 +00:00
jenkins-bot 73fd6c0290 Merge "Add querystring parameter override for user links, language in header." 2021-07-15 19:26:35 +00:00
Clare Ming cb3d5742da Add querystring parameter override for user links, language in header.
- 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
2021-07-15 16:51:48 +00:00
Clare Ming 19173ea296 Move userpage link to precede notifications
Update user links template to reshuffle order.

Bug: T285728
Change-Id: Ie33a513a9a72e9d659d04a76bb38d8fb1977fb19
2021-07-12 13:06:18 -06:00
jdlrobson 3dffee277c Refactor the way we add classes to list items
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
2021-07-01 14:25:46 -07:00
bwang 0a75e2e627 Ensure userAvatar icon is only used in logged in users
Additional change: A bundlesize increase is required given
recent developments in the user menu.

Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
2021-06-30 22:41:47 +00:00
jenkins-bot 6597bc7d86 Merge "Collapse header at lower resolutions" 2021-06-30 22:11:34 +00:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
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
2021-06-30 21:43:35 +00:00
jenkins-bot 91aeef476d Merge "search: Disable query highlight for some languages" 2021-06-30 21:01:01 +00:00
Sam Smith 445ba883a2 search: Disable query highlight for some languages
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
2021-06-30 16:47:46 +01:00
jdlrobson 62d0cf8d92 Dropdown toggles trigger click tracking instrumentation
Bug: T284542
Change-Id: Ib019c616bc53ebab50ed9eeef05b6d9712958f38
2021-06-24 23:08:19 +00:00
jenkins-bot b8545c4b5e Merge "Remove whitespace from page title template" 2021-06-24 22:16:07 +00:00
bwang 9dc295945c Remove whitespace from page title template
Bug: T282318
Change-Id: Idd36ad20545e04706bbc9bfa034c65fc0d6bba16
2021-06-24 16:47:31 +00:00
Nicholas Ray b82ecc2173 Remove SkinVector::ICON_USER_LINK_MAP usage
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
2021-06-23 18:33:17 +00:00
Clare Ming d9f4c51b4e Add icon prefix to login link
Add classes to prefix login link with login icon.

Bug: T276562
Change-Id: I2b188a25986a717436af223a469b05c95e5b2d88
2021-06-22 09:18:06 -06:00
jenkins-bot 45598d0ec3 Merge "Update user menu icon and storybook" 2021-06-21 14:42:26 +00:00
jenkins-bot 30eb4196b9 Merge "Skin: Convert number of languages to interface language" 2021-06-21 14:22:40 +00:00
bwang 8389de9cb9 Update user menu icon and storybook
Bug: T284748
Change-Id: Icdbfd882490b380871befd3c6606c4b48d225132
2021-06-18 20:30:55 +00:00
Sam Smith 78929d58da Skin: Convert number of languages to interface language
Bug: T283955
Change-Id: Ic601cf94907bdec329021a48101da13a979af106
2021-06-18 17:18:52 +00:00
bwang 22e343eecb Ensure login button is only rendered for anon users
Bug: T276561
Change-Id: I0f4fa94b4caacc45b299d7518523aa906ff65849
2021-06-16 14:01:06 -05:00
Jan Drewniak c26ae0f965 Move "logout" button to bottom of user links menu in modern Vector
For modern Vector, removes the logout link in the user menu and places it
below that menu by appending it to the html-after-portal property of the
skin data.

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

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

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

Bug: T276562
Change-Id: Ia69366eb4fbd50b48fe5513ef99048bdc5df64fb
2021-06-07 18:10:54 -06:00
Clare Ming 06d0afbcb3 Update styles for user-interface-preferences in user links menu.
- Add new menu to UserLinks template.
- Fix styles for user links toolbar.

Bug: T282196
Change-Id: I42d6e6e11d76b2d25b2720a617f2fb2e545eb4b6
2021-06-05 02:01:17 +00:00
bwang b5aa055900 Update UserLinks styles to use classes instead of ids
Follow up to: 298f945983

Change-Id: I5bc28501d0ae4c2597796dbf1ed9c10eacadad62
2021-06-02 22:16:59 +00:00
bwang 298f945983 Create new user menu template for consolidated user links in logged out users
- Adds mustache template for the new user menu
- Uses new functions for getting user link data that have been factored out of SkinTemplate in the dependent patch
- Refactor new user menu styles to be namespaced inside UserMenu.less

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

Bug: T276564
Depends-On: Ia841f92c626ca32a9ad437b3d1cff78309c83ed8
Change-Id: Ib15752428265fdc06a3000f62bdca44c67648974
2021-06-02 09:23:22 -05:00
jdlrobson 6300923601 Storybook should include UserLinks
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
2021-05-27 19:27:27 +00:00
jenkins-bot 1c3a214b24 Merge "Refactor: Create UserLinks component" 2021-05-25 18:49:47 +00:00
jdlrobson 96bf1e8276 Refactor: Create UserLinks component
Have a single template for the UserLinks component, with a single
element wrapping all its subcomponents as discussed.

Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
2021-05-25 16:57:35 +00:00
jenkins-bot d7e22f7f20 Merge "Use escaped() instead of parse() in SkinVector::createULSLanguageButton" 2021-05-24 16:02:39 +00:00
Jan Drewniak 7258a7cb86 Use escaped() instead of parse() in SkinVector::createULSLanguageButton
Bug: T282540
Change-Id: Ie8f0fe262f34e669d49f98efc27c179b257786dc
2021-05-24 14:07:25 +02:00
jdlrobson 3306124038 Introduce the vector-body class
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
2021-05-21 13:50:31 -07:00
jenkins-bot 81947cbd67 Merge "Remove unused $contentNavigation from getTemplateData method" 2021-05-14 20:20:54 +00:00
Nicholas Ray 7ab2edb2fa Remove unused $contentNavigation from getTemplateData method
This is not used in the method and, from the surface, appears to be
extraneous.

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

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

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

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

Bug: T276561
Change-Id: I068c5233bb25a7b141e66a6726b5761841f83eb2
2021-05-14 10:13:09 -07:00
Jdlrobson efaf3aadf3 Remove mw-body-content from HTML that is not the article body
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
2021-05-14 00:01:52 +00:00
Nicholas Ray de5a640c0b Allow languageinheader query param to fully control treatment of languages
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
2021-05-13 12:04:12 -06:00
jenkins-bot b41e224ec6 Merge "Refactor: Renaming mustache variable page-isarticle to is-article" 2021-05-10 09:38:08 +00:00
Jan Drewniak c22dc8d95b Refactor: Renaming mustache variable page-isarticle to is-article
Modifies this variable name to use proper hyphen-case and
prioritizes the type of variable rather than it's source.

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

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

This renames the new "shouldConsolidateLinks" method.

Follow up to I1c305d89bece147a6f1b478441119c3169abfbdd

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

Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
2021-05-06 12:49:39 -07:00
jenkins-bot bea00bc290 Merge "Create A/B test harness for Language in header feature" 2021-05-05 17:33:38 +00:00
jenkins-bot 888e17bd47 Merge "Place language button near bottom of Main page." 2021-05-05 17:08:18 +00: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 49f2b25737 Create A/B test harness for Language in header feature
* 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
2021-05-04 14:41:53 -06:00
libraryupgrader 932c8d541e build: Updating composer dependencies
* mediawiki/mediawiki-codesniffer: 35.0.0 → 36.0.0
* php-parallel-lint/php-parallel-lint: 1.2.0 → 1.3.0

Change-Id: Ib71722afb42c300ec3d6a3cd3bfab7eddde18bdf
2021-05-04 12:41:27 +00:00
Sam Smith 5998d82056 templates: Remove role deprecation HTML comments
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
2021-04-30 15:44:52 +01: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
Clare Ming 8cab50874c Add config for language in header for logged in/out users
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
2021-04-16 10:38:28 -06:00
jenkins-bot d6b7ef0a8e Merge "Hide languages-in-header button when no additional languages" 2021-03-30 18:23:55 +00: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
Ammarpad b7bf9a88a3 Use content-parser-output RL SkinModule feature
Require MW 1.36

Bug: T277218
Depends-On: I52f752aa782b09a51e2165300cc75d0e47fa3351
Change-Id: Ia1eec412111e8f6af3b45affdc186d9eafd4262c
2021-03-25 17:34:28 +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 4035d3575f Move resource loader definition to skin.json
Now `wvui` is in core, there is no need for this to be conditional.

Depends-On: I91db16946e7ea46f69a6b57b116962f77ce3cd20
Change-Id: Icceaefc63d227ca772a986ad2c6ce28cbdb0a7d6
2021-02-12 01:49:21 +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
jenkins-bot 0c330185b1 Merge "Add language icon to language button" 2021-02-04 04:03:32 +00:00
jenkins-bot 497b0aad8a Merge "The label of the language button refers to the number of languages" 2021-02-04 02:59:48 +00:00
Jan Drewniak 5014c17570 Place indicators under page title
Fixes error in 03d61e12, indicators should be placed below
page title.

Bug: T248761
Change-Id: I61dcef0567373f28fd479b21ffa940a6e223ac16
2021-02-03 23:19:30 +01: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
jenkins-bot 625c4bd099 Merge "Move #mw-panel into #mw-navigation" 2021-01-27 21:26:31 +00:00
Nicholas Ray 16b34aa750 Move #mw-panel into #mw-navigation
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
2021-01-26 19:31:43 -07: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
Nicholas Ray 8c76a17e43 Move Wvui Search A/B Logic to FeatureManager
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
2021-01-26 17:36:37 -07:00
Nicholas Ray 2789e27a29 Correct config comment
`VectorUseCoreSearch` was changed to `VectorUseWvuiSearch` in
I3a063e0b085765ea1db3c4478fb30c11b0942b75.

Change-Id: Icc9f944ea695999133293bc9e90ac0818f746191
2021-01-26 13:59:41 -07:00
Sam Smith 746315bb5b Add search widget treatment A/B test
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
2021-01-26 12:02:01 +00:00
jenkins-bot 93578b0d77 Merge "Create .mw-body-header element for body content" 2021-01-26 02:56:20 +00:00
Jan Drewniak 03d61e12c9 Create .mw-body-header element for body content
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
2021-01-25 23:57:47 +01:00
jenkins-bot 27ad6eab12 Merge "Rename wgVectorUseCoreSearch to wgVectorUseWvuiSearch" 2021-01-25 22:47:49 +00:00
jenkins-bot 162cf8449d Merge "Languages can be moved out of sidebar" 2021-01-25 22:38:12 +00:00
Nicholas Ray 53f49c5c64 Rename wgVectorUseCoreSearch to wgVectorUseWvuiSearch
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
2021-01-22 16:25:46 -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
jenkins-bot 87dfbda424 Merge "Usages of page-langcode dropped for html-user-language-attributes" 2021-01-21 22:33:04 +00:00
jenkins-bot 0867954219 Merge "Allow more control over the max-width rules" 2021-01-21 19:27:10 +00:00
jdlrobson 05dc15954d Allow more control over the max-width rules
Bug: T260091
Change-Id: Ie534b0c34e240c588a4cc330898531f1d12df1f0
2021-01-21 18:51:12 +00:00
Raymond a002c3aeae Add missing / for self-closing input element
Consistency tweak, all other input elements do have the /

Bug: T272597
Change-Id: I9a4b44dda928a071634edcbea5cef2f19eef8881
2021-01-21 14:46:45 +01: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
Isarra 538ccb24d8 Use {{link-mainpage}} in legacy sidebar same as new logo
Bug: T271873
Change-Id: I370d2ddfb233f882929f4d79ee4cfc690576ed85
2021-01-13 00:29:58 +00:00
jdlrobson d1fa2e6090 Fix template references
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
2021-01-06 13:56:01 -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
jenkins-bot c07310165a Merge "Use User->isRegistered(), not deprecated isLoggedIn()" 2020-12-19 17:06:44 +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
Umherirrender c643250755 Add missing @return to Requirement
even with type hint there should be the full phpdoc to be consistent

Change-Id: I74f2fec23d655deee5704b0ab432cba5c7921ab6
2020-12-18 22:55:08 +01:00
jenkins-bot a9b47f57fb Merge "Development: Allow us to test search with different API hosts" 2020-12-09 00:14:43 +00:00
Sam Smith aa10668e6d [search] Instrument Vue.js-based search widget
Add event listeners and associated helpers to emit SearchSatisfaction
events via the `mediawiki.searchSuggest` protocol.

Bug: T257698
Change-Id: Ica040cd18d6c4bf8a1b1f607bb4647c7e8eb7108
2020-12-08 23:41:19 +00:00
jdlrobson dce24c9784 Development: Allow us to test search with different API hosts
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
2020-12-08 15:22:45 -08:00
jdlrobson a52da8ddaa Cleanup: Drop unused body feature classes
These are no longer referenced in the code and artifacts of a time
when these were feature flagged.

Change-Id: Ia850ac9fb92033d82a333836ba7ff32312f042a7
2020-12-08 13:29:06 -08:00
Nicholas Ray e0c47dc462 Add Wvui Config to show/hide thumbnails and descriptions
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
2020-12-08 13:28:42 -08:00
Jan Drewniak bd83398659 Integrate WVUI search into Vector
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
2020-12-08 13:27:12 -08:00
jenkins-bot 601b0fbd81 Merge "build: Updating mediawiki/mediawiki-codesniffer to 33.0.0" 2020-11-17 23:03:58 +00:00
Umherirrender 6d992c65b0 build: Updating mediawiki/mediawiki-codesniffer to 33.0.0
Change-Id: I4ef344e62ce996b9d03d08b47c0f869ead417f7b
2020-11-17 23:33:50 +01: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
Nicholas Ray 9031db0b20 Remove #jump-to-nav div
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
2020-10-09 10:37:33 -06: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 3bc308039c Merge "Make max-width the default for modern Vector" 2020-09-14 20:55:35 +00:00
jdlrobson 7449c7fdf6 A/B test of search in header for logged in users
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
2020-09-14 14:22:46 +01: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 905ad68bc2 Make max-width the default for modern Vector
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
2020-09-10 20:14:38 +00:00
Nicholas Ray 78787d9665 Switch to navigation-first DOM order under $wgVectorIsSearchInHeader feature flag
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
2020-09-09 18:31:35 +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
jenkins-bot e77bd199f9 Merge "[Special:Preferences] [PHP] Add HTMLSkinVersionField form field" 2020-08-31 19:28:41 +00:00
Sam Smith 4449235516 [Special:Preferences] [PHP] Add HTMLSkinVersionField form field
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
2020-08-31 12:04:12 -07:00
jdlrobson a39ebf7954 Don't render escaped HTML as HTML
Follow up to I610224d551ebea54ae32e9e79901befe80cfd5ce

Change-Id: I44caf1b484c86674bc1f86dfe42bc259dfa1f2ab
2020-08-31 09:45:47 -07: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
jdlrobson e7df44a66d Favor SkinTemplateNavigation::Universal
This hook is run on every page. The SkinTemplateNavigation hook
counter intutively is run only on pages which can exist. I think
it's clearer if we only use SkinTemplateNavigation::Universal hook
and keep the logic for when it runs inside our own code.

Bug: T255319
Change-Id: I0835074a6cadf6e9bdcc45299de37dd9328bf9b2
2020-08-20 16:01:27 +00:00
Sam Smith b46751d4ed hooks: Don't use SkinVersionLookup directly
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
2020-08-18 11:40:48 +01:00
Sam Smith 8d98ba35da hooks: Document CSS classes used elsewhere
Bug: T256100
Change-Id: I3fef99e5b94ca4dc221282f28c7608f84d8fb746
2020-08-17 15:27:32 -07:00
jenkins-bot 95896ff703 Merge "hooks: Don't send config variables unnecessarily" 2020-08-17 20:44:34 +00:00
jenkins-bot feae33a4e6 Merge "Remove VectorBeforeFooter hook" 2020-08-13 22:36:09 +00:00
Sam Smith 75ade04dfc hooks: Don't send config variables unnecessarily
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
2020-08-13 15:37:45 +01:00
jdlrobson 53d9452795 Move the personal tools and search into header
To support roll out and avoid issues with cached HTML the new
styles for the new search feature are restricted to HTML where
the body tag has `skin-vector-search-header` class.

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

Bug: T249363
Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-08-11 23:36:01 +00:00
mainframe98 ddc32a5833 Provide messages through skin options
Bug: T259664
Depends-On: Ie52aadd6b7de8c4db66de662f2f03e295c29034d
Change-Id: Ib03c0683aa00d334224e7b3507098dedcc848e44
2020-08-05 10:24:34 +02:00
jenkins-bot 05a82f6069 Merge "Vector manages search functionality and provides config flag" 2020-08-04 17:53:05 +00:00
Sam Smith e60734a773 documentation: Align @package annotations
Following on from I9445d5c, align the @package annotations in
the Vector\FeatureManagement namespace and subnamespaces.

Bug: T248399
Change-Id: Icd287a52d149123bca5d9f0c55154f932f55148e
2020-08-04 12:48:11 +01:00
jdlrobson 580a0aa537 Document stability of undocumented classes
Bug: T248399
Change-Id: I9445d5c0753f7272c3d22d66b8824f8a95b86d41
2020-08-03 17:17:53 -07:00
Peter Ovchyn 7b8bad23f2 Vector manages search functionality and provides config flag
Add onSkinPageReadyConfig hook that overrides module after page loaded
The new module is currently empty pending further work in the
feature branch.

Depends-On: I0dc38e74052027f26a70d58b5f520e5830e0d55d
Bug: T257706
Change-Id: Ib6c8f890fb3d6e751f5f01a6576614b9cc9b440c
2020-08-04 00:06:31 +00:00
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
jenkins-bot edb3fef5b9 Merge "Refactor: Replace PHP complexity with JS simplicity" 2020-08-03 18:47:09 +00:00
Jack Phoenix 3ea7bec6db Don't add Vector-specific <body> classes when not using Vector
Hooks are global, unlike the old Skin addToBodyAttributes() method, which was per-skin.

Follow-up to a04fc71f30

Change-Id: Ic8a581256c4775ba45b2c5188d678751ba9c7023
2020-08-01 21:05:57 +03: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
Ed Sanders ad6c4ea6f3 Fix Yoda conditionals
Change-Id: I5074e8555154c421f4821de37c79d85e1a33d68d
2020-07-30 17:02:33 +01:00
Ammar Abdulhamid ea52da4dd0 Remove VectorAfterToolbox hook
Bug: T258814
Change-Id: I56c7efec0df021b3af3205ba80ea33b8fa470880
2020-07-27 00:18:51 +01:00
jenkins-bot c7e9719b9b Merge "Add config to disable sidebar state persistence for logged-in users." 2020-07-17 16:57:18 +00:00
Jan Drewniak a8c79f3d52 Add config to disable sidebar state persistence for logged-in users.
Bug: T255727
Change-Id: Id28e0bc5249ba68b5de2a078a259e9964f619ef7
2020-07-17 09:32:21 -07:00
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
DannyS712 56dbfd9a46 Restore div wrapper around print footer
Div with a `printfooter` class that is hidden on normal page views

Bug: T257914
Change-Id: Ibd3e73076f290a92671c7cdd72672921fa64fc05
2020-07-14 12:28:45 +00:00
jenkins-bot b540dadfb3 Merge "Max-Width Layout: Make footer width match content width to avoid overlap with sidebar" 2020-07-14 01:27:27 +00:00
Nicholas Ray d5cb58b3f0 Max-Width Layout: Make footer width match content width to avoid overlap with sidebar
* `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
2020-07-13 18:26:18 -06:00
jdlrobson 7a16ae249e Rename template variables to mirror SkinMustache
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
2020-07-13 21:57:40 +00:00
jdlrobson c405ffb155 Cleanup: Template variables
- 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
2020-07-13 14:10:14 -07:00
jdlrobson 81daa1ab7a Deprecate VectorTemplate
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
2020-07-10 17:19:25 +00:00
jenkins-bot 6a078bc246 Merge "VectorTemplate: use skin->Msg() instead of msg()" 2020-07-09 21:27:52 +00:00
Jan Drewniak 1fac82f895 Sidebar persistence for logged-in users in modern Vector.
- Creates a new user-preference called 'VectorSidebarVisible'
which stores the sidebar hidden/collapsed state for logged-in
users.
- Updates that user-preference on the client whenever the sidebar
is expanded or collapsed.
- Refactors the sidebar related javascript into a separate file.

Bug: T255727
Change-Id: Ib1ce934f3646cd8feebf0d3b15c38b5b969ec957
2020-07-09 00:28:52 +02:00
daniel c9ff9c2856 VectorTemplate: use skin->Msg() instead of msg()
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
2020-07-08 11:39:22 -07:00
Nicholas Ray 092a2957af Implement Page, Workspace, Content, and Article Toolbar Containers
This patch closely follows the desired guidelines/desired
styles Alex Hollender has put forth in his prototype, but uses
multiple containers to achieve this look since our DOM order/structure
is different than the DOM structure in the prototype. The following
containers are used, but unlike his prototype, they are sometimes used
more than once:

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

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

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

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

Changes to be aware:

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

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

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

Bug: T246420
Bug: T153043
Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-07-07 18:34:38 -06:00
Peter Ovchyn ac140d53e6 Select initial side bar visibility depends on user login state and defaults
Bug: T254230
Change-Id: If121b6c8187ef6b8562d135bd1c40403be3e9564
2020-07-07 21:11:02 +03:00
Ammar Abdulhamid 436d959304 Call MWDebug::getHTMLDebugLog() directly
Bug: T256927
Change-Id: If4c7f66198e65546ebc15401d345fbf990cb9eb2
2020-07-03 10:39:37 +01:00
Vas Jaremchuk 1874e40d87 Drop wgVectorResponsive support from modern Vector
Move the body of enableResponsiveMode method into the onBeforePageDisplayMobile hook.
Replace BeforePageDisplayMobile hook with BeforePageDisplay hook.

Bug: T254378
Change-Id: I63da1b67bf2b85c644e4af196bf894efc4797433
2020-07-02 22:08:37 +03:00
Volker E a9b35fa2e4 Use core .mixin-clearfix() instead of DOM element
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
2020-07-01 11:20:26 -07:00
jenkins-bot 9aee83fbb8 Merge "[refactor] Drop form-id template property" 2020-06-26 11:50:32 +00:00
jenkins-bot d02a2d1d7e Merge "[refactor] encapsulate footer data in single function" 2020-06-26 11:42:30 +00:00
Nicholas Ray bfc95effdb Move sidebar into header to improve tab order
* 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
2020-06-25 16:55:34 -06:00
jenkins-bot 7c6d6372c7 Merge "Put ARIA roles and attributes into context" 2020-06-25 19:20:34 +00:00
jdlrobson 87f08dcf5b [refactor] Drop form-id template property
In preparation for using the SkinMustache class and
core buildSearchProps method [1],
and to reduce the risk of that change,
move the ID from the template
data to the template itself:

[1] https://github.com/wikimedia/mediawiki/blob/master/includes/skins/SkinMustache.php#L93

Change-Id: I8d62ea6b1adf6ef0cbfa20e1876806eba70b169f
2020-06-25 18:21:38 +00:00
jdlrobson a6940fe355 [refactor] encapsulate footer data in single function
Move the VectorBeforeFooter hook code into its own function
This adds consistency with the getMenuData function.

Change-Id: I6483fd200747852246e9cc587f57b1a21a2f0a44
2020-06-25 18:20:01 +00:00
Volker E e9a48021c2 Put ARIA roles and attributes into context
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
2020-06-25 11:13:58 -07:00
Volker E 16abb4ff84 Remove unused mw-checkbox-hack-target class
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
2020-06-24 17:31:11 -07:00
AronDemian 0e5cd53163 Make search jumplink's target the search input instead of the container
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
2020-06-24 20:45:25 +00:00
AronDemian 2ccc975f0a [modern] Move sidebar checkbox above content, sidebar button into header
- Sidebar's checkbox hack CSS selectors adjusted.

Bug: T246420
Change-Id: I1cc1ad4eb1938c4931b1ae881b3878fbd6bb7a39
2020-06-23 07:09:38 +02:00
jdlrobson 823c3f0bb9 Separate languages portal from other portals in sidebar
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
2020-06-22 15:28:02 -07:00
Taavi Väänänen 9cd4a17c6c Drop unused override for deprecated method SkinVector::shouldPreloadLogo
The parent method was deprecated in MW 1.32 and this override has been unused
ever since.

Bug: T255474
Change-Id: I811f7b3a6dba0bb1eebf36ed52e363affc8511d2
2020-06-21 16:28:06 +03:00
Ammar Abdulhamid a04fc71f30 Vector: Use OutputPageBodyAttributes hook to add body attributes
This means dropping usage of Skin::addToBodyAttributes method
from Skin to pave way for its deprecation/removal.

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

Bug: T255698
Change-Id: Ieeccdd9ec3fdb3e3fc1a3016cfa87e0b8364aa3a
2020-06-18 14:30:40 +01:00
jenkins-bot 6d012b93b0 Merge "Vector: Drop support for SkinTemplateToolboxEnd" 2020-06-12 21:09:25 +00:00
Ammar Abdulhamid aa1f661276 Vector: Drop support for SkinTemplateToolboxEnd
No longer called by any deployed code.

Bug: T253783
Change-Id: I01b03983cb7109c61c2739bd26fd5662105e390e
2020-06-12 21:24:29 +01:00
Ammar Abdulhamid 14e794b109 Simplify Vector buildSidebar() method
Follow up: I76e3bea

Bug: T253416
Change-Id: Ie98a32dfd6c5675835cfc0fa8ab4da9a33409600
2020-06-12 19:05:03 +01:00
jenkins-bot 888e710976 Merge "Replace deprecated classes with modern ones" 2020-06-11 22:57:13 +00:00
Volker E 7e7bdb4f54 Replace deprecated classes with modern ones
Following-up I00b4d2fd795195cd9c8add650a3b3cafdced5465
it's now time to settle on `.vector-menu*` classes.

Change-Id: I8669d402b6b757cd5bf59a5e0df377b6023b0700
2020-06-11 14:05:15 -07:00
Ammar Abdulhamid f4b548250d Vector should not call BaseTemplate::getToolbox
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
2020-06-11 20:19:32 +00:00
jdlrobson a6dd9b25c5 Model indicators as their own template rather than a block of HTML
This reverts commit be3843e2a3 and
makes a few corrections.

Bug: T251212
Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f
2020-06-09 14:30:08 -07:00
jdlrobson 31fd25b43d Move html-printtail template variable to SkinVector
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
2020-06-09 14:28:23 -07:00
Volker E 4466eb3a2f Use semantic HTML5 elements where applicable
`[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
2020-06-09 17:43:45 +00:00
AronDemian abf886d2b9 Drop VectorUseSimpleSearch config flag
For compatibility with gadgets always outputs the simpleSearch ID.

Bug: T254620
Change-Id: I0ed456f90f066129016f798a3ce65ba52bfc11e8
2020-06-06 23:16:07 +02:00
jenkins-bot 802ec0988b Merge "[fix][RTL] flip menu collapse button icon" 2020-06-04 03:47:48 +00:00
Stephen Niedzielski a0d2c2497b [fix][RTL] flip menu collapse button icon
Fix the icon button directionality in right-to-left languages.
Previously, the button was hardcoded to support left-to-right only.

- Replace the skin.vector.icons' `.mw-ui-icon-wikimedia-{name}:before`
  `selector` in skin.json with a placeholder, `{name}`. I don't think
  this selector should be needed but it seems to be erroneous not have
  one. I believe this issue of wanting a null selector was encountered
  in Minerva or MobileFrontend but am unable to locate the past
  discourse.

- Add check and unchecked menu button selectors to skin.json that set
  the appropriate background image. This shards some of the styles out
  of Less and into ResourceLoader-land but it's worthwhile.

- Revise the name of horizontal collapse icon to describe its form not
  function, "collapseHorizontal" to "chevronHorizontal". This has been
  an established convention that was missed a couple patches back.

- Add a flipped chevronHorizontal for RTL. I used Inkscape to do the
  flip and tried to match the style of the original by hand. Feel free
  to edit further.

- Drop the now unnecessary icon flipping JavaScript and initial Mustache
  class. This enables a real CSS-only solution for the icons.

Bug: T246419
Change-Id: I60f65b3c595bf18d309b667d9a0b066691b90c97
2020-06-03 17:09:38 -06:00
Jdlrobson be3843e2a3 Revert "Model indicators as their own template rather than a block of HTML"
This reverts commit 0536bda116 which had a few problems. Thanks Timo for pointing them out.

Change-Id: Ie43a2068fdb14cc7c65eb670e93787f1fe12c6b3
2020-06-03 19:41:15 +00:00
jdlrobson 0536bda116 Model indicators as their own template rather than a block of HTML
Bug: T251212
Change-Id: I44b1e17f21112896d2bef54d04f17df861bb3dbb
2020-06-03 18:25:51 +00:00
jenkins-bot ed0fc73f75 Merge "Avoid using get indirection in VectorTemplate" 2020-06-03 18:15:53 +00:00
jdlrobson 6022b032ea Avoid using get indirection in VectorTemplate
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
2020-06-03 17:53:13 +00:00
Volker E fd250975c4 Fix misconception on icon coloring
It's advisable to rely on default icon color and set it's color
by opacity. With that we've got a better playing field to respond
to user interaction with icon color changes, not relying on
several icons at once for different states and also being
backwards-compatible for a variety of browsers.

Change-Id: Iaff869774007ed962104d704103f0392a3516f4f
Bug: T246419
2020-06-02 23:06:49 -06:00
Stephen Niedzielski ca2b1a6972 [config] Change the sidebar's default state to open
The sidebar in Latest mode supports collapsing and expanding (or hidden
and visible). Initially, expanded is wanted.

Bug: T246419
Change-Id: I0777f58fb9441aa834a29afa1b52185ad1b58ca7
2020-06-01 21:44:44 +00:00
jdlrobson e84809c44b Cleanup: Standardise msg keys
Keys prefixed with msg- should relate to i18n keys. Fix the existing
template variables where that's not the case.

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

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

Change-Id: I34f04f3d217dc8caa4dcc29e60058951a6555b1e
2020-06-01 20:11:14 +00:00
Volker E 4200a8665c Naming convention using 'skin' as entrance point
Using 'skin' as entrance point files, similar to already existing
convention in MediaWiki land with 'skin.json' or 'SkinVector.php' as
example in Vector skin. Replacing Apache inspired 'index' convention.
Also renaming legacy to 'skin-legacy' to be clear on file base that it's
a modification of 'skin'.

Bug: T249073
Change-Id: Ief1c469724d4ffe238d307407c3ddb46f2e1abfa
2020-05-28 20:58:01 -07:00
jenkins-bot 15a30c26f8 Merge "[feature] add menu button to toggle panel visibility" 2020-05-28 02:57:14 +00:00
Stephen Niedzielski 5195f5fd67 [feature] add menu button to toggle panel visibility
Add a menu button that toggles the panel's (also referred to as a
sidebar) collapse state. When the screen is wide enough, animate the
transition.

The menu icon from OOUI is copied into Vector to avoid two
ResourceLoaders modules (collapseHorizontal icon isn't ready for
inclusion in the OOUI icon pack and ResourceLoaderOOUIIconPackModule
doesn't support images).

Additional polish and collaboration is needed but this patch fulfills
the scope of its referenced task.

Bug: T246419
Depends-On: I8e153c0ab927f9d880a68fb9efb0bf37b91d26b2
Change-Id: Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a
2020-05-28 02:14:13 +00:00
jenkins-bot 6a1458eada Merge "Reduce distribution of legacy classes" 2020-05-26 21:01:55 +00:00
jdlrobson cb7ca11274 Reduce distribution of legacy classes
The .menu class historically only needs to apply to dropdowns.
the .vectorMenuCheckbox is inconsistent with the other classes on the
menu so we should begin its deprecation.

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

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

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

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

Change-Id: I103ab2d8e9f3aa65550823829b60ad9a0a04b7eb
2020-05-26 11:03:08 -07:00
jenkins-bot 30047cc70e Merge "BaseTemplate:makeListItem is deprecated" 2020-05-21 21:31:39 +00:00
jdlrobson 5b31c49e15 BaseTemplate:makeListItem is deprecated
Use SkinTemplateNavigation hook instead and copy the collapsible
behavior to the menu function

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

Bug: T251212
Change-Id: If6b10b0ddcbd4b21dd13a2813e60b604c3a23415
2020-05-19 16:02:01 -07:00
jenkins-bot 35b0675c5d Merge "[dev] use skin name constant instead of string" 2020-05-18 22:41:13 +00:00
Stephen Niedzielski 4d96738c7b [dev] use skin name constant instead of string
Use centralized symbol for "vector" instead of hardcoded string.

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

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

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

These changes are aligned with the splits for JavaScript.

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

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

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

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

I see no matches for these selectors in code search.

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

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

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

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

Change-Id: I85659d22dc2f2a803c2a7b1e57033b18900353df
2020-05-11 23:09:24 +00:00
Stephen Niedzielski 108393daf1 [dev][Legacy][JS] Split Legacy mode JavaScript into new ResourceLoader module
The collapsible sidebar adds a new JavaScript dependency and behavior to
Latest mode only. There are a number of ways of to make the deviation
but we think now is the time to start splitting by module.

This patch adds a new ResourceLoader module, skins.vector.legacy.js, and
moves the existing JavaScript into it. The old module, skins.vector.js,
has been given a currently matching index.js entry point that references
the collapsible tabs' files by reaching across directories. It's not
quite ideal as usually ResourceLoader modules and directory structures
strive for 1:1 correspondence but this patch makes the bold assertions
that it's better than a file copy, better than a new
"skins.vector.common.js" ResourceLoader module, more compatible than a
symlink, and the existing jQuery tabs implementation will eventually be
replaced in Latest mode.

A "Legacy" module was added instead of a "Latest" with the assumption
that active development should generally be considered "latest" and
Legacy an intentional distinction.

Bug: T246419
Change-Id: I9980403f1ee5897c27ac0331f0b51a5bcbdff778
2020-05-11 15:29:56 -06:00
jdlrobson ace1ffaba1 Minor: Remove unused Portal.mustache
Should have been removed in
I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f

Presumably got readded while addressing a rebase conflict

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

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

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

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

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

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

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

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

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

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

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

Bug: T251212
Change-Id: Ibb2a69801d3b004a0a174308d3ac04d1d228807c
2020-05-05 13:07:14 -07:00
Nicholas Ray 91c25bc253 Add title attribute to opt-out link
The opt-out link was missing a tooltip which is important for
accessibility and to help people gain more context as to what it does.

Bug: T250093
Change-Id: Ie6cbaf5c941615d1662700415b8f1823987a563d
2020-05-05 09:52:20 -06:00
jdlrobson 97121a228f [Minor] Favor msg and getConfig over getMsg and ->config
Change-Id: I69ff5b8fc51292f745e0aa496b8129053c9d2f23
2020-05-01 19:11:58 +00:00
jenkins-bot 48b680744d Merge "Use consistent function names to SkinVector" 2020-04-30 22:16:06 +00:00
jenkins-bot 337244ebdf Merge "[modern] A new version of Vector with a new logo" 2020-04-30 21:47:44 +00:00
jdlrobson 6a9ee465bc [modern] A new version of Vector with a new logo
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.

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

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

Sample config:

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

Coauthor: Aron Manning

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

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

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

Bug: T251415
Change-Id: I7982b4c34283ba81d0232ee6f501c44cf0a74b98
2020-04-29 18:36:03 +00:00
Sam Smith d4c2e2b441 [Hygiene] featureManager: ComplexRequirement -> Requirement
FeatureManager::registerRequirement registering an instance of
SimpleRequirement with ::registerComplexRequirement was awkward.

Changes:

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

* Rename FeatureManager::registerComplexRequirement to
  ::registerRequirement

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

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

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

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

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

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

Bug: T246170
Change-Id: I07280c4c7a2054439153e76359f712281049df0b
2020-04-28 18:15:39 +02:00
AronDemian 487eda02f4 [cleanup] Drop empty class attribute from #footer > ul elements
Change-Id: Ice0241b054cbc296e9f0adf1d2920023316c8ca0
2020-04-28 02:05:30 +00:00
jenkins-bot b2dee16b63 Merge "Add .mw-footer CSS class & replace #footer selector with it" 2020-04-27 22:49:47 +00:00
AronDemian c2e9a7b366 Add .mw-footer CSS class & replace #footer selector with it
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
2020-04-27 14:55:28 -07:00
jdlrobson b42493a476 Refactor: DRY up menu creation!
Bug: T249372
Change-Id: I098e6921e8f7ef65dacacf09b9c25f70c945e58e
2020-04-27 13:36:39 -07:00
jdlrobson 0b8693ccec Refactor: Make VectorTabs template data conform with MenuDefinition
menu-id -> id
menu-label-id -> label-id
msg-label -> label
empty-portlet -> class

Bug: T249372
Change-Id: I15fd88269b3d111ff47e64f3669575afaeea9f97
2020-04-22 05:18:44 +00:00
jdlrobson 286b07b20a Refactor: Make VectorMenu template data conform with MenuDefinition
menu-id -> id
menu-label-id -> label-id
msg-label -> label
empty-portlet -> class

Bug: T249372
Change-Id: I50bf2424f9077ac987e03a1e552577bf7c48b3bb
2020-04-22 05:18:29 +00:00
Sam Smith 37fc80d562 [Hygiene] featureManager: Move SimpleRequirement...
... to the Vector\FeatureManagement\Requirements namespace.

Change-Id: I205eff9d257c040874fe31e5eda33b4e8cb229cc
2020-04-21 18:22:07 +01:00
Sam Smith cee5ee0003 Make legacy mode a feature
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
2020-04-21 10:57:11 -06:00
Stephen Niedzielski 3b906fdd66 [dev] Fix indent in VectorTemplate data
Jon spotted this in Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a.

Bug: T246419
Change-Id: Ie760610898c1754ac0640e8077faa6ec79da66c1
2020-04-17 14:23:56 -06:00
Volker E c3f9194144 Fix Special:Preferences sub section link
Now links to nested sub sections are possible with
I33318b3fb73a27ce8013 in.

Bug: T248644
Change-Id: I92d0910191dcab0a7fe43ba6976c6773384688a7
2020-04-17 00:08:42 +00:00
jdlrobson 703903daac [legacy] Split sidebar code and mark layout as legacy in preparation for new layout
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
2020-04-16 11:29:03 -07:00
jdlrobson 4d91d52dfc Add a special class to identify the first portal
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
2020-04-15 23:39:33 +00:00
jdlrobson 63ee9450b7 Refactor: Standardize menu data (DRY!)
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
2020-04-13 16:11:40 -07:00
Stephen Niedzielski 16670834d7 [dev] [Mustache] replace spaces with tabs
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
2020-04-08 15:40:56 -06:00
VolkerE 087808ece6 Revert "Move indicators underneath #firstHeading in DOM"
This reverts commit f400fc57c3.

Bug: T248761
Change-Id: I3a4f1202d5e1cca9f82d1735cc498049fa25613c
2020-04-08 13:43:10 +00:00
Volker E f400fc57c3 Move indicators underneath #firstHeading in DOM
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
2020-04-06 17:06:31 -07:00
Stephen Niedzielski d1072d0fdf [dev] add skin version query parameter override
As described in the readme but not implemented until now, this patch
enables the skin version to be specified as a URL query parameter. This
is useful for testing both skin versions during development and on wiki,
as well as enabling sharing URLs with a specific skin (Vector) and skin
version (1 or 2).

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

Bug: T244481
Change-Id: I52d80942b4270c008d4e45050589ed9220255a50
2020-04-02 16:22:26 -06:00
AronDemian f2fad08fb7 Define the legacy and modern root template names in the same location (improve locality)
Follow-up to I580fe55ca6aeb35dae8afee41e87172a5a729c7b

Change-Id: Iea8be07c7a86c5ca258ffdfa07fa52713cb1d6d5
2020-04-02 01:55:55 +02:00
jdlrobson c8001f91b1 Split legacy and modern experience on template level
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
2020-03-31 14:35:00 -07:00
jdlrobson 872519ab94 Drop the Navigation component
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
2020-03-30 15:26:34 -07:00
jenkins-bot d2b19192c7 Merge "Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions" 2020-03-27 00:36:29 +00:00
Nicholas Ray ec382a8c86 Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions
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
2020-03-26 17:39:47 -06:00
Stephen Niedzielski 6b6bed86ed [docs] [dev] [PHP] [FeatureManager] revise docs and add DynamicConfigRequirement test
Address some feedback from I7a2cdc2dfdf20d78e4548f07cf53994563b234b3:

- Miscellaneous documentation improvements.
- Add a false case test to `DynamicConfigRequirement->isMet()`.

Bug: T244481
Change-Id: Ic5637f42da755f871c5a6d545e14effd3ac8c670
2020-03-26 20:39:40 +00:00
jdlrobson 4091a6729f Document setupTemplate method and mark Vector as @final
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
2020-03-25 18:04:16 +00:00
jenkins-bot f855c3948e Merge "featureManager: Add DynamicConfigRequirement requirement" 2020-03-25 15:20:47 +00:00
Nicholas Ray 9964e56156 Mustache Documentation: Cleanup/Clarify Mustache template params
* 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
2020-03-18 14:47:31 -07:00
Sam Smith 84226b41b6 featureManager: Add DynamicConfigRequirement requirement
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
2020-03-18 10:10:42 +00:00
Stephen Niedzielski bd7bd75569 [JavaScript] Validate types
Lift the mists of confusion by checking that all JavaScript types align.
No ignores! This is the JavaScript equivalent to Phan.

This patch adds the necessary infrastructure for verifying typing and
fixes the few flaws found.

Bug: T239262
Change-Id: I2557471421196ea46cd13dfb786a52968fbfcc97
2020-03-16 09:10:08 -06:00
jdlrobson 9a3a3d3c96 Ship different ResourceLoader module for different versions
To have a clean break for upcoming changes we will duplicate
index.less into legacy.less and create a new module to clearly
separate new styles from old.

The preferred name however does come with some caching challenges.
Cached HTML served to anons will continue to load the style module
`skins.vector.styles` for a period of 1-4 weeks

Provided we are careful with our changes during this period this
should be okay.

Change-Id: If32b59036e5cd62cbb804944ca93fa1a101c5129
2020-03-12 13:36:52 -07:00
jdlrobson 59747a58c8 Separate first portal in sidebar from rest
This allows us to insert HTML underneath the first portal or wrap
the portal in a containing element in future if we want to target
additional CSS to it

Change-Id: Ied28d95407b8d59fc819bb07a2cce3242bd93088
2020-03-11 23:34:11 +00:00
jenkins-bot c3bbe2acb3 Merge "docs: Improve VectorTemplate Mustache param docs" 2020-03-11 20:25:56 +00:00
Sam Smith d14caf2f11 featureManager: Add Requirement interface
FeatureManager::registerRequirement established the interface for a
requirement: its name and whether it's met.

However, the Feature Manager also needs to handle scenarios where a
requirement needs additional context before it can be considered met.
That context may not be available when the application is booting, e.g.
checking if the user is logged in; or the logic is complicated enough
that it should be under test.

Changes:

- Add the Requirement interface and update FeatureManager to work with
  implementations of it

- Maintain B/C by constructing an instance of a the SimpleRequirement
  DTO

Bug: T244481
Change-Id: Id95d9e5d7125492968d0e15515224aadbc3075f8
2020-03-09 11:06:26 +00:00
Sam Smith 64bd4601b4 featureManager: Add typehints
I735fd640 bumped the required MediaWiki version to 1.31. That version
dropped support for PHP 5.x.

Wherever possible, update FeatureManager's methods to use PHP 7.0.x's
scalar and return type declarations.

Bug: T244481
Change-Id: Ib5636d0ec5ec7f0c93b5b3317a12635668b589e2
2020-03-09 11:05:21 +00:00
Timo Tijhof 406012f863 docs: Improve VectorTemplate Mustache param docs
Separate value type from value groups, to clarify that e.g.
something coming from a hook does not mean it should not have "html-".

Change-Id: I52fdd6995241e1d64f23fd8154997de813f674f4
2020-03-06 22:53:04 +00:00
jenkins-bot ecfd7a2b28 Merge "featureManager: Set -> Requirement" 2020-03-06 21:45:20 +00:00
Sam Smith 3f95820467 featureManager: Set -> Requirement
As was noted in https://phabricator.wikimedia.org/T244481#5859513, the
term "set" doesn't seem natural. Piotr Miazga (polishdeveloper, pmiazga)
and Nicholas Ray (nray) suggested a number of good replacements,
including "requirement." Serendipitously, this term is already used in
FeatureManager's documentation.

Bug: T244481
Change-Id: I559c2d4149db69235cdd4bb880697deb1a145743
2020-03-06 17:23:46 +00:00
jdlrobson cdd5ebd74d Use template partials rather than HTML strings
CHANGES to  index.mustache:
Changes can be understood by looking at the diff of
the file stories/skin.stories.js

The additional changes in stories folder export the data passed to
those templates. A new file is used as exporting any variable in a
file suffixed stories.js will be assumed to be a story entry.

The changes to index.mustache are as follows:
* html-footer is replaced with data-footer and Footer
component is rendered via template partial
* html-navigation is replaced with data-navigation and
Navigation component is rendered via template partial

CHANGES to Navigation.mustache:
Changes are best explained by looking at the diff to
stories/navigation.stories.js
and navigation.stories.data.js
* html-personal-menu is replaced with data-personal-menu

Bug: T245456
Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-03-03 09:28:52 -08:00
jdlrobson 0ba99a1e97 Make sure Vector skin preferences always follows skin
Sections can be nested. Using rendering/skin as the parent
means that Vector's skin preference will always come straight
after the skin preference and before Popups.

A change in core is needed to update the selector for the element which
shows/hides the subsection as well as provide a generic message key to
replace the one inside this repository.

Note: If the "Vector" specific heading is needed, we can achieve this
with a little more work but that is a conversation for another time.

Depends-On: Idd06bcfe7935e16732a6a95c1253dbf95c8aca2e
Bug: T246162
Change-Id: I4be9764ddca186e5bfd493678afd62d446072e8f
2020-02-29 00:35:50 +00:00
polishdeveloper 48988c8ab0 Instead of accessing $data property use set/get/html methods
For better encapsulation and future possibility to create Skin API
we have to stop accesing properties and start using getters/setters
instead. Once we start doing that we should be able to provide a
clear interface for our templating system.

Bug: T246161
Change-Id: Ib3539b1e3bc12341c79913af3c95acad8619cff4
2020-02-28 22:06:00 +01:00
jdlrobson 698752e38a [Dev] processTemplate used in one place
Moving all the templateParser calls to one function
so its easier to see how the template is composed.

The diff of changes to the stories folder highlight
the internal changes which are:

* html-portals replaced with html-sidebar in main template
* new Sidebar template added which outputs to html-sidebar
* Mention of "MainMenu" replaced with better understood "Sidebar"

This is precursory work to adopt templatePartials

Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-26 12:28:40 -08:00
Stephen Niedzielski de76ab59c1 [Special:Preferences] [PHP] Add skin version user preference and configs
Add a Vector-specific user preference to Special:Preferences for
toggling skin version, either Legacy Vector or the latest Vector.

The presentation of the new preference section and the default values
for anonymous, new, and existing accounts are configurable via
$wgVectorShowSkinPreferences, $wgVectorDefaultSkinVersion (to be used by
the feature manager in T244481),
$wgVectorDefaultSkinVersionForExistingAccounts, and
$wgVectorDefaultSkinVersionForNewAccounts. These configurations default
to the fullest experience so that third-party configuration is minimal.
See skin.json for details. The configurations are each tested in
VectorHooksTest.php.

When presentation is enabled, the new preference appears as a checkbox;
enabled is Legacy mode and disable is latest. There are a number of
unfortunate details:

- Showing and hiding a checkbox is supported by OOUI. Showing and hiding
  a whole section (Vector skin preferences, in this case) is not so this
  additional client JavaScript functionality is added in Core (see
  Iaf68b238a8ac7a4fb22b9ef5d6c5a3394ee2e377).
- Stylization as a checkbox is wanted. However, the implied storage type
  for OOUI checkboxes is a boolean. This is not wanted in the event that
  another skin version is added (e.g., '3' or 'alpha'). As a workaround,
  the preference is converted from a boolean to a version string ('1' or
  '2') on save in Hooks::onPreferencesFormPreSave() and from a version
  string to a checkbox enable / disable string ('1' or '0') in
  onGetPreferences(). There a number of test cases to help cover these
  concerning details.

Documentation for overriding the skin version as a URL query parameter
is provided in anticipation of T244481.

Bug: T242381
Bug: T245793
Depends-On: Iaf68b238a8ac7a4fb22b9ef5d6c5a3394ee2e377
Depends-On: Ifc2863fca9cd9efd11ac30c780420e8d89e8cb22
Change-Id: I177dad88fc982170641059b6a4f53fbb38eefad6
2020-02-26 12:56:10 -07:00
Sam Smith 9177c22365 features: Add minimalist feature manager
With complex additions to Vector's codebase like the Desktop Improvement
Program upcoming, it's important that we have a shared, intuitive
language to talk about features and their requirements. Centralising
the registration of features and creating an API satisfies does exactly
this.

This change introduces a greatly-reduced version of Piotr Miazga's
(polishdeveloper, pmiazga) original proposed API and associated
scaffolding classes for feature management in Vector, which itself was
based upon his work in MobileFrontend/MinervaNeue. This is done to
establish a foundation upon which we can build the more sophisticated
parts of Piotr's proposal in a piecemeal basis, thereby minimising risk.

Distinct from Piotr's proposed API is the ability to register sets and
features that are always enabled or disabled.

Additionally:

- A Vector.FeatureManager service is registered but not used

- A list of proposed immediate next steps is included

Bug: T244481
Change-Id: Ie53c41d479eaf15559d5bb00f269774760360bde
2020-02-26 11:49:29 +00:00
jdlrobson 2d914d04ea Remove renderNavigation function for readability
The renderNavigation function provides an unnecessary level of
abstraction which I'd argue hurts readability of these functions.
Let's remove it.

Change-Id: Iad1c4db606404fecf4d5ae98981df9f05d3f661e
2020-02-17 22:20:18 +00:00
jdlrobson 2dbe4d7af1 Drop usage of mediawiki.skinning.interface module in favor of SkinModule
Thanks to the dependent change, the print logo is now provided
in core so we can remove the custom Vector ResourceLoader module

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

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

Bug: T232140
Depends-On: I00899c16c0325f36b671baf17e88c2b5187b3526
Change-Id: I569e0d800e147eabc7852567acd140108613f074
2020-02-05 10:02:47 +08:00
jenkins-bot c0e7cff97a Merge "Introduce PHPUnit tests in Vector" 2020-01-31 17:30:33 +00:00
polishdeveloper 09671d768f Introduce PHPUnit tests in Vector
To make it happen, we also need to provide a way to
inject different TemplateParser.

Change-Id: I14d8474a2b52f040b688245cbd5bd6f12dddf846
2020-01-31 16:48:43 +01:00
jdlrobson ea2bcd44f2 Add storybook to Vector
- Update package.json with the new dependencies.
- A script storybook.sh pulls down CSS and LESS imports from external
dependencies. This copies the approach taken in Popups and MobileFrontend.
- Icons from external repos are maintained within the repo in SVG-only form.
Using load.php modules is also possible, but will pull down other unnecessary icons
and break if any of these modules are changed. Decided that we should manually maintain
these for the time being given there are only 3 icons.
- Several LESS files now import the variables file. I think it's useful for stories
to only import the CSS they use as this encourages us to modularise our CSS. Before these
imports were not necessary as they inherit imports from index.less. This will have no impact
on the bundle size as the LESS compiler silently discards duplicate imports
- stories/utils.js provides a useful placeholder function for generalising our hook entry
points.

Bug: T242674
Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-31 16:59:15 +08:00
jdlrobson 12e2287894 Simplify logo generation
Use a template variable only for html attributes of the logo
Move static HTML into Navigation.mustache

Change-Id: If37015b9ce4f37e264b6f25956e4d0ca35e8cdff
2020-01-30 02:11:05 +00:00
jdlrobson 0cdf0c238a Dev: Complete initial porting of Vector to Mustache
Bug: T240062
Change-Id: I18cb1fda6850646a38314a7d2dd356103f04ec28
2020-01-29 13:21:34 +00:00
polishdeveloper efe0ec6356 Deprecation: Deprecate Vector specific hooks
Vector provides two vector specific hooks:
 - VectorAfterToolbox
 - VectorBeforeToolbox

Instead of supporting Vector specific stuff we should aim
for a nice global skin api and allow other 3rd party to
extend MediaWiki functionality no matter which skin is currently
on.

Bug: T240062
Change-Id: I245f1316e79f814ba04f4e0a0223d4f0596cf39e
2020-01-24 16:20:50 +00:00
jdlrobson 80b5ccc634 Dev: Break Footer out into template
Add a new Footer template for modelling the footer of
Vector.

Bug: T240062
Change-Id: I60a243abeb5650542ca6f6fac8401a622faaabac
2020-01-17 13:10:37 -08:00
jdlrobson 9f82f58ea9 Dev: Include closed body and html tags in getTrail
This will allow us to render in Storybook without having issues
with unclosed tags. it also mirrors how html-headelement works
(obscuring the opening of the body and html tags)

Bug: T240062
Bug: T242674
Change-Id: I216a920c68bf3da9de55a75fc53451c68c9cc753
2020-01-17 19:16:32 +00:00
jenkins-bot 4ce1e8c1f2 Merge "SkinTemplateToolboxEnd hook output not displaying in Vector" 2020-01-14 22:58:53 +00:00
jdlrobson f416e21bc5 SkinTemplateToolboxEnd hook output not displaying in Vector
Broken in I882db161e5462cf88aa48c9cfd91448eb97a4a77

Bug: T240062
Change-Id: I94bbf79c6c2743a5769935287593aa48780bfb71
2020-01-14 14:37:12 -08:00
jenkins-bot f1aaa1ec91 Merge "Replaces $user->isWatching call with WatchedItemStore isWatching service call" 2020-01-14 22:30:09 +00:00
Jan Drewniak 361e0d6f71 Extract Portal mustache component from VectorTemplate.php
A Portal (or portlet) in the Vector context is a section of the
sidebar menu (e.g. Tools, Languges etc.).

The hook that places content between the portals (or portlets?)
such as `SkinTemplateToolboxEnd` and `otherlanguages` has been
enclosed inside of an output buffer so that any content it
produces can be passed to a template.

Bug: T239248, T240062
Change-Id: I882db161e5462cf88aa48c9cfd91448eb97a4a77
2020-01-14 22:44:58 +01:00
Jan Drewniak 093cc20ee0 Extract VectorMenu.mustache component from VectorTemplate
Extracts a new VectorMenu mustache component from VectorTemplate.
VectorMenu is the "more" menu that appears at small widths instead of the
Read/Edit/View History menu near the top of the Vector skin.

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

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

Change-Id: I89c8a77f7d96f867c8c72e61f9e104e14d9512d9
2020-01-13 23:01:42 +01:00
jenkins-bot f40247a9d4 Merge "Hygiene: remove SkinVector::setupSkinUserCss" 2020-01-13 19:38:35 +00:00
jenkins-bot 68af887faf Merge "Convert $templateParser in VectorTemplate.php into an instance variable" 2020-01-13 19:37:56 +00:00
Jan Drewniak a706618a9d Convert $templateParser in VectorTemplate.php into an instance variable
Change-Id: Iaebfaefdd0722d1e63cb73585e0148f54fcdd77e
2020-01-13 15:40:57 +01:00
Piotr Miazga 8a8a44ca00 Hygiene: remove SkinVector::setupSkinUserCss
Tthe SkinVector::steupSkinUserCss is deprecated and
we should use the ::getDefaultModules instead.

Change-Id: I359049d0f159a0dfc374d1c0124e8989aeb4182d
2020-01-13 14:14:39 +01:00
libraryupgrader b1978d572f build: Updating mediawiki/mediawiki-codesniffer to 29.0.0
Change-Id: I336d23b2d322d1ae1a4c3101e69088c11eb9f43c
2020-01-13 06:06:46 +00:00
Jan Drewniak d29adb5dcc Fix uerlangattributes echoing output from PersonalMenu component
Followup to 4f471bfa5e

Bug: T240062
Change-Id: I13c099befc98b42f28e58a669df495b9324190f4
2020-01-10 13:15:17 +01:00
Vedmaka 2fce68778c Replaces $user->isWatching call with WatchedItemStore isWatching service call
Bug: T208766
Change-Id: I178b1a1aa0106d82f1b336f2bda5c6371468d741
2020-01-09 21:50:40 +00:00
Jan Drewniak 4f471bfa5e Extract PersonalMenu,mustache component from VectorTemplate
PersonalMenu is the login/logout notifications etc. menu at the very
top of the Vector skin.

Bug: T239248, T240062
Change-Id: Iae224cbd838e44669a9f27e6dd303c6c3b402d41
2020-01-09 16:01:46 +01:00
libraryupgrader cfe2ff0864 build: Updating mediawiki/mediawiki-phan-config to 0.9.0
Additional changes:
* Added .eslintcache to .gitignore.

Add check for unset 'class' attribute.

Change-Id: Ib5b8993e89f4cb8f2f5325cbbc1e02401dd19d81
2019-12-22 20:11:34 +01:00
Stephen Niedzielski 9d427dcb30 [Hygiene] [Mustache] rename SearchComponent to SearchBox
For consistency with VectorTabs, rename SearchComponent to only imply
component. At least two word names seems like a good target (instead of
just "Search") for grepability and standard component style conventions.

Bug: T239248
Change-Id: I1e4f7270ba29c2f35f08e92f8a28cd8a2ec8fe87
2019-12-06 17:00:42 -07:00
Stephen Niedzielski 60148a1a92 [Hygiene] [Mustache] improve template parameters and docs
Add typing expectations to search box template parameters. Add context
expectations to search box and tabs templates.

Bug: T239248
Change-Id: I4ff1920f5489b68ef73a219ceeceb1f5511fc9e8
2019-12-06 17:00:42 -07:00
Stephen Niedzielski e0b29624d1 Fix: tab attributes
The tab attributes were mistakenly being echoed instead of passed by
value. E.g., http://localhost:8181/wiki/A?uselang=he.

Bug: T239248
Change-Id: Ia0af96df717948743a2d66f8432b47e6f8a9c8f1
2019-12-06 17:00:39 -07:00
jenkins-bot 11ad91633f Merge "Move namespace & view tabs into a VectorTabs.mustache component" 2019-12-04 15:44:38 +00:00
Jan Drewniak c12c5f06db Move namespace & view tabs into a VectorTabs.mustache component
Creates a new VectorTabs.mustache component and uses it to render
the namespace & view tabs.

Bug: T239248
Change-Id: I859e4e95a2a12470f66564db547679c9f0a16727
2019-12-04 15:51:02 +01:00
Stephen Niedzielski 71672d60b3 Fix: search header attribute escaping
Broken in my previous commit, d6f4aaa. This causes attributes to be
doubly escaped. For example,
http://localhost:8181/wiki/Main_Page?uselang=he.

Change-Id: I9776a3c355081dc5fec7753edf256f55dfe6045b
2019-12-03 16:05:56 -07:00
Stephen Niedzielski d6f4aaa88e Hygiene: extract VectorTemplate inline HTML to SearchComponent Mustache file
Extract SearchComponent.mustache from VectorTemplate. The "search"
message is now escaped by the template parser. As is, htmlspecialchars()
for "wgScript".

A later patch will change each component renderer function as well as
renderNavigation() to return a string.

Change-Id: I3084b7e0ef73d320c85ee780c9eff13ecea92906
2019-11-20 16:41:05 -05:00
Stephen Niedzielski c9f15a4206 Hygiene: move VectorTemplate inlined PHP to variables
Move template logic outside of the template and into variables. This
will allow a future refactor to move the template to a separate
template-only file.

Change-Id: I91c2df11106cf09428a890a2d96ecbddb18ef0fe
2019-11-20 16:35:04 -05:00
jenkins-bot 501b94f1b4 Merge "Hygiene: divide VectorTemplate.renderNavigation()" 2019-11-20 20:00:40 +00:00
Stephen Niedzielski 625ec18f81 Hygiene: divide VectorTemplate.renderNavigation()
Cut up renderNavigation() into several discrete methods. Smaller methods
are easier to read and reason about.

Change-Id: I4e55d858ab1745fb2baddef02f7046ec842eb149
2019-11-18 15:26:20 -05:00
Piotr Miazga 2f355a3e11 Hygiene: remove getPageClasses
Looks like the SkinVector::getPageClasses is doing nothing, only
calling the Skin::getPageClasses and returning the output.

Change-Id: I5becaa1505d46cbf9a07b8bfe73ddf324b740876
2019-11-18 15:13:24 -05:00
Timo Tijhof a5fe72696b Remove extra <span> from Vector tabs
No longer needed as of I8237976e0587.

Bug: T236410
Change-Id: I5a59c136de4572e5f11b52cc11bc93251c972369
2019-10-25 15:22:57 +00:00
Simon Legner 6b99f35cbe Cleaning a[redundant] is done in BaseTemplate
Relates to I630410aea2852f7a72fea67bbf256b3561ea0f3f.

Change-Id: I0e0ccad14236dfbfc82f38e8e4316a431dd38d7a
2019-08-21 18:03:47 +00:00
Isarra 411a015ec5 Move DataAfterContent outside of main content block
Bug: T226199
Change-Id: Ie04d8d2bb1d44ec8a1c03fcc6f807668bab0377c
2019-06-20 17:55:55 +00:00
Fomafix 3aeac1615b SkinVector: Call parent::__construct in constructor
With this change the constructor of the parent class gets called like if
there is no local constructor. This allows the ancestor classes to
initialize themself in their constructor.

Change-Id: I4ec1ec935afa25b59be4020fca9ac71f23e62ad0
2019-05-12 11:36:38 +02:00
Timo Tijhof d56792addb Fix <h1> to be present even if title is "0"
Regression from 74b9803d9a, caused by a bug in LightNCandy which
caused {{foo}} to render "0", and {{#foo}} to pass as true with "0", but then
in {{#foo}}<b>{{foo}}</b>{{/foo} render as empty string producing "<b></b>".
In other words, the conditional is passing and the inner block is executed,
but the placeholder is mistakenly converting "0" => null => "" (empty string),
causing the <h1> to render but without any text in it.

Work around this bug by simply removing the conditional. Several other skins
already don't have this conditional and it's unclear why or in what
situation MediaWiki would send OutputPage to SkinTemplate without a title.

I think it would make sense in such rare case to still have a consistent
layout for extensions and gadgets to interact with and not omit the H1
element, but render it with the value that OutputPage gave it, even if it
is the empty string.

Bug: T219864
Change-Id: I6e04b512d2fe2e949ff5385cb38ceebe392fb255
2019-04-02 19:47:38 +01:00
Michael Große 3669843c9f Fix invalid lang attribute on first heading
Bug: T219359
Change-Id: I0d6e036b65da024278fb492c6dfe44c79efb1e98
2019-03-28 11:54:40 +01:00
Jdlrobson 74b9803d9a Start extracting rendering from PHP into Mustache
This reverts commit 8d0377d926
now a conversation has happened.

Bug: T217172
Change-Id: Id51bbd4358bdcc1131c11e13d5548e9c0474e711
2019-03-05 13:22:24 +00:00
Isarra 8d0377d926 Revert "Start extracting rendering from PHP into Mustache"
This reverts commit a3ca2c3e16.

Reason for revert: This requires wider discussion before moving
forward, and a more complete implementation even once we do have
consensus.

No associated task exists on which to view or continue this
discussion: linked task briefly mentions Mustache in general as an
option as part of a much wider topic, but doesn't concern this
specifically.

Issues that should be discussed include:
* What the intent even is here: is this for one skin only? Is this
  the intended path forward for all of them? Depending on which, we
  have other issues: for the former case, that it is quite
  unhelpful in terms of maintenance and further development having
  more random code diversity out there, especially in this
  half-completed state; or if it is indeed intended for all of them,
  that an RfC is needed before anything is merged, as that is a very
  significant change.
* That using Mustache in MediaWiki does add (usually minor)
  performance overhead; we need to clearly establish in the task that
  this is indeed worth it here.

Change-Id: I0bafa55b554aa8a38553e20c75859ec5eec2c062
2019-01-28 16:49:48 +00:00
Timo Tijhof d306e07824 template: Avoid raw HTML parameter for jump link labels
Change-Id: I6c638118988b6fbea95697817edf8c59c0ef6a6b
2019-01-22 21:13:05 -08:00
Timo Tijhof 9cc0ca983c template: Remove is_callable check for getIndicators()
The VectorTemplate class extends BaseTemplate, which has defined
this method since MW 1.25. The Vector skin master branch supports
MW 1.29+ only.

Change-Id: I83c6add9e8c02df028ca5905934e7d367dbe2209
2019-01-22 21:13:05 -08:00
Timo Tijhof a3ca2c3e16 Start extracting rendering from PHP into Mustache
Bug: T140664
Change-Id: I249fead8e1c7bc5dc295457bd46b05e7ed389414
2019-01-22 21:13:05 -08:00
Fomafix c68a21e78a Remove space before Xml::expandAttributes()
Xml::expandAttributes() outputs a space at the beginning before it
outputs the attributs.
This change avoids a double space between the attributes.

Before this change the HTML contains:

  <a class="mw-wiki-logo" href="..."  title="...">

After this change the HTML contains:

  <a class="mw-wiki-logo" href="..." title="...">

Change-Id: I486d26bd56a4410766f40b78466c2f3559f3a1ff
2019-01-14 06:46:33 +01:00
Fomafix 82cbdb8111 Avoid empty class="" without value
Before this change the HTML contains:

<div id="p-personal" role="navigation" class="" ...>
or
<div id="p-personal" role="navigation" class=" emptyPortlet" ...>

After this change the HTML contains:

<div id="p-personal" role="navigation" ...>
or
<div id="p-personal" role="navigation" class="emptyPortlet" ...>

Change-Id: Ic686b958940afc958693d0031ac31e5f783960a9
2019-01-13 20:02:01 +01:00