Commit graph

1718 commits

Author SHA1 Message Date
AronDemian ba8ec2f842 Split Searchbox layout styles for legacy and modern
No changes made to the CSS rules.
* 'SearchBox.less' is the common part that won't change in modern.
* layout styles copied to both 'layout.less'

Bug: T249363
Change-Id: I340b9e7e91960713c0ebb4d3d26e2ae2d5628f37
2020-07-14 13:01:35 -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
libraryupgrader c4cc51d744 build: Updating lodash to 4.17.19
* https://npmjs.com/advisories/1523
* CVE-2019-10744

Change-Id: Id98f8d8854499931f5d59de6ebfb02d56ea342a8
2020-07-11 15:46:35 +00:00
jenkins-bot 02c44e7302 Merge "[docs] Fix typos in comments" 2020-07-10 22:22:56 +00:00
jenkins-bot a6efa2ff11 Merge "Deprecate VectorTemplate" 2020-07-10 17:41:57 +00: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 3775356d54 Merge "Add enter/spacebar keyboard support to sidebar." 2020-07-09 21:45:50 +00:00
jenkins-bot 6a078bc246 Merge "VectorTemplate: use skin->Msg() instead of msg()" 2020-07-09 21:27:52 +00:00
Jan Drewniak 2b5857f624 Add enter/spacebar keyboard support to sidebar.
Bug: T255727
Depends-On: I388ac873997aa02d713ae7453216e0cb7d983993
Change-Id: Ie438db4f752c77aa40191d2bceb83f52d3371c6c
2020-07-09 22:38:15 +02:00
Volker E aaf8b7721a [docs] Fix typos in comments
Following-up Ib1ce934f3646cd8fe.

Change-Id: Id32cbfb5256d55e6c9d8b081a126ca0275b7565d
2020-07-09 00:47:27 -07: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
jenkins-bot 36a1516f96 Merge "Implement Page, Workspace, Content, and Article Toolbar Containers" 2020-07-08 01:21:49 +00: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
jdlrobson 04bcd93adf Logo shouldn't import layout
This explains a few issues that were occuring in the storybook
relating to modern/legacy.

Follow up to 5195f5fd6 which doesn't reference why.

Components should not import styles relating to one of the Vector
versions. They should all be self contained.

Change-Id: I6f9ef974be97f8be593cd2b79ce37c3e517d549f
2020-07-07 22:22:24 +00:00
jenkins-bot 4ae06bff0a Merge "[modern] Fix rendering of main element in IE10 & 11 (again)" 2020-07-07 21:54:17 +00:00
Volker E 9efd8a9268 [modern] Fix rendering of main element in IE10 & 11 (again)
Add 'normalize' module to modern Vector.
In I420e5315aee74f59995c358083f969b059bfe3c0 the commit message
did not reflect the actual change and we added normalize to
legacy accidentally instead of modern. This patch adds it to modern correctly.
In that commit message we said
"Legacy Vector was not upgraded to use HTML5 semantic elements,
therefore does not need the module." however on further reflection
there is benefit to keeping this in legacy as after further changes
made in I4601cc938f7a1 this will bring the same consistency in all
Wikimedia deployed skins.
Following-up I420e5315aee74f59995c358083f969b059bfe3c0

Bug: T256092
Change-Id: I3ba46cb993524e8fa0ad262ab4b6cba829498e87
2020-07-07 21:28:02 +00: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
Translation updater bot 5b28e0b014 Localisation updates from https://translatewiki.net.
Change-Id: Ic17c717f3d8d95344b66f22fe3e542bf1c564307
2020-07-07 09:33:06 +02:00
jenkins-bot f967641628 Merge "[modern] Fix rendering of main element in IE10 & 11" 2020-07-06 22:03:55 +00:00
jenkins-bot 08b26f072a Merge "Call MWDebug::getHTMLDebugLog() directly" 2020-07-06 16:09:04 +00:00
Translation updater bot c999645f27 Localisation updates from https://translatewiki.net.
Change-Id: Ie034abdfbe2c408be2f796815489cc4751ac2340
2020-07-06 09:57:41 +02:00
Ammar Abdulhamid 436d959304 Call MWDebug::getHTMLDebugLog() directly
Bug: T256927
Change-Id: If4c7f66198e65546ebc15401d345fbf990cb9eb2
2020-07-03 10:39:37 +01:00
Translation updater bot cface50471 Localisation updates from https://translatewiki.net.
Change-Id: I7bb6e81f3b4bf2f7cd98a3dafe3f4041e5a2ee01
2020-07-03 08:36:29 +02: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
Translation updater bot 13ba8ebe6a Localisation updates from https://translatewiki.net.
Change-Id: I6a53604782ced348824c048851c43a226310a6f6
2020-07-02 08:45:21 +02:00
Ed Sanders 36e91dc04f build: Update devDependencies
Applies new ESLint documentation rules

Change-Id: I7fe458cf52e98baf92f3baec2d9ff54484326673
2020-07-01 14:43:39 -07:00
jenkins-bot 9a1897be82 Merge "Use core .mixin-clearfix() instead of DOM element" 2020-07-01 18:45:47 +00: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
Translation updater bot 6dbd7337af Localisation updates from https://translatewiki.net.
Change-Id: I9b156cb82c81981af5ae6dd22d8961ade4ed0229
2020-07-01 08:45:25 +02:00
jenkins-bot a14e22fac4 Merge "Update CheckboxHack interface for future placement of aria-expanded on label button" 2020-06-30 01:13:42 +00:00
Volker E df6ed76ec8 [modern] Fix rendering of main element in IE10 & 11
Adding ResourceLoader 'normalize' feature module to the modern styles.
Legacy Vector was not upgraded to use HTML5 semantic elements,
therefore does not need the module.
Similar to Demian's approach with reverted 'html5'
I8f1c79037d14b89982e449708f4f1cefacab4439

Bug: T256092
Change-Id: I420e5315aee74f59995c358083f969b059bfe3c0
Depends-On: I4601cc938f7a10dce4f643e22356f8c5a39e4ac9
2020-06-29 17:21:10 -07:00
jenkins-bot 09100a9a45 Merge "Revert "[modern] Fix broken rendering of main and dialog elements in IE9-11"" 2020-06-29 20:25:02 +00:00
Jdlrobson 05f00d2adc Revert "[modern] Fix broken rendering of main and dialog elements in IE9-11"
This reverts commit 3926ffa8ca.

Reason for revert: After consideration of the new task T256520 this shipping a normalize CSS feature seems like a much better approach
to solving this problem, particularly since `template` and `dialog`
are unused in our code.

Change-Id: I20391cc6c1f5a50127cd84bd7c0f17a20ab92528
2020-06-29 20:01:55 +00:00
Nicholas Ray b40c3f3743 Update CheckboxHack interface for future placement of aria-expanded on label button
Currently, the `aria-expanded` attribute is placed on the checkbox
element. However, since Ife287fc8c6e0d2aee5facf42d5d4308dea918ee3, the
checkbox is excluded from the accessibility tree, and this attribute
should be placed on the label button instead.

This commit prepares for future changes [1] to the checkbox hack interface
in a backwards compatible way:

* Passes button to `updateAriaExpanded` function

* Passes button to `bindUpdateAriaExpandedOnInput` function

[1] Ia2755e189babbd70945b66a1a812fc3ece40b577

Change-Id: Icc6ba994d57ea1f8050aa408aebc8c81f03d8783
2020-06-29 13:31:24 -06:00
Translation updater bot 91597ec441 Localisation updates from https://translatewiki.net.
Change-Id: Idb350347f40aa506db72d94ea0adfc2324a9dffa
2020-06-29 16:28:38 +02:00
AronDemian 3926ffa8ca [modern] Fix broken rendering of main and dialog elements in IE9-11
Adds the new ResourceLoader feature_file 'html5' to the modern styles.
The legacy layout was not upgraded to use HTML5 semantic elements,
therefore does not need these.

Bug: T256092
Depends-On: I3e4abb5fc8e55b7138fc1c86543777c845bed88e
Change-Id: I8f1c79037d14b89982e449708f4f1cefacab4439
2020-06-26 17:17:07 +00: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 1de7f38f4f Merge "[less] Merge 'content.less' and 'typography.less'" 2020-06-25 20:29:16 +00:00
jenkins-bot 7c6d6372c7 Merge "Put ARIA roles and attributes into context" 2020-06-25 19:20:34 +00:00
Volker E d2a0ae588a [less] Merge 'content.less' and 'typography.less'
This separation introduced in I8dbc29b7a19f7f doesn't work as well
as expected. All but strictly `.mw-jump-link` rule are typographic
rules.
In the current mish-mash of when to apply typographic styles only to
article content (`.mw-body`, `mw-body-content`, `.mw-parser-output`,
`#mw-data-after-content`?) inherited from core, it makes looking up
and finding issues between typographic styles harder, and leads to
unnecessary complexity instead of clean separation of concerns.
This question surfaced in where would link styles belong originated in
T213778.

Change-Id: I521185d505d8688f076dd09acbedb22e801f772e
2020-06-25 18:45:19 +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