Commit graph

383 commits

Author SHA1 Message Date
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