Commit graph

600 commits

Author SHA1 Message Date
Jan Drewniak 97783e5bd8 Use the data-ve-target-container attribute to position VE
Uses the data attribute `data-ve-target-container` to determine where
on the page to insert VisualEditor. Also moves the #siteSub back into
the #bodyContent container. This makes the SiteSub match the font-size
it had in legacy Vector & positions the VE toolbar between the tabs
and the tagline.

Bug: T310197
Bug: T310839
Depends-On: Idae6755c90eacaab1a9daa88c6e28850d427810c
Change-Id: Idb2a743c93316786d6d36e1989cf6620a6092281
2022-06-23 00:39:19 +00:00
Jon Robson 49c8b5f514 [Fix] Adjustment to legacy menu templates
Follow up to c5cfd4d

1) Partial paths are incorrect
These are not a problem with our current Mustache template
parser but could break with any changes in our PHP implementation

2) Add dedicated class to legacy menus

On the longer term this will allow us to further separate the
old and new CSS.

Change-Id: I056b033855c28f919a4af99784620503f10b9dcb
2022-06-22 22:42:39 +00:00
bwang f473129485 Add support for floating TOC lower down the page
This patch only handles the first case listed in the task description

Bug: T308689
Change-Id: I4e7dbded7a8206633a98653aaf4ced3fd2b6f69d
2022-06-21 16:02:11 +00:00
Jon Robson 64ee3686b8 Cached CSS is no longer a problem
The !important is retained for cached HTML and will be retained
for another release cycle

Cached HTML will continue to be a problem until next deploy. The CSS
cleanup will thus be fixed in a follow up
(I47b7a0bc9c5dad5451f1dbb5e32e513643a1534b)

Bug: T307900
Change-Id: I47b7a0bc9c5dad5451f1dbb5e32e513643a1534b
2022-06-16 17:48:29 +00:00
jenkins-bot d529efeaf8 Merge "Follow-up: Update menu label elements" 2022-06-13 14:37:25 +00:00
bwang 93e8cfcd90 Collapse ToC into page title at narrow view ports with CSS/template changes only
Bug: T307900
Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5
2022-06-10 15:49:06 -06:00
Jon Robson 664b6c5cc5 [Grid] Vector 2022 layout uses CSS grid
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.

Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
2022-06-07 17:23:08 +00:00
bwang 467d994123 Follow-up: Update menu label elements
- Update the modern menu template to avoid using aria-hidden on the `label` element, and avoid using a `label` element when no checkbox is present.
- Revert legacy menu template to use h3 elements


Bug: T301051
Change-Id: I6ab10e35f0d67d70877e55cca5a512c2af4cb972
2022-06-06 23:59:13 +00:00
Jon Robson a018a909d9 [Grid] Minor HTML restructure for grid
Make the sidebar and content siblings of the header element. This
will allow us to easily apply grid column and rows to these elements.

Bug: T303484
Change-Id: I0a91eddbddbe58781892eddb93edfc3d58777968
2022-06-06 14:58:20 -07:00
Jon Robson 02fb90531b [Grid] Add TableOfContentsContainer
In preparation for grid work where the table of contents will
be moved into a new container.

Bug: T303484
Change-Id: I931d5148e314c1c05f0474b47be5efd7c166144d
2022-06-03 22:27:22 +00:00
jenkins-bot f94c86c3e0 Merge "Exclude from max-width via query string patterns" 2022-06-01 16:15:01 +00:00
jenkins-bot 54991e1d13 Merge "Remove unnecessary inner-tag whitespace and self-closing tags" 2022-06-01 15:05:50 +00:00
Sam Wilson 87e4ca9a21 Exclude from max-width via query string patterns
Add action=edit to the exclusions in $wgVectorMaxWidthOptions
and update the parsing of the query string values for that config
variable to accept a regex.

Bug: T307725
Change-Id: Iba526033d45e18cb340a2648378d3d90ef3ae3c6
2022-06-01 10:00:39 +08:00
Jan Drewniak a3cef30154 Move page title above article toolbar menus
Moves the page's title above the article toolbar (i.e. tabs) based
on the VectorTitleAboveTabs config option. This feature remains
off by default, but can be accessed via the query parameter `vectortitleabovetabs`.

Removes the Navigation.mustache template since it's just a wrapper
for the sidebar + tabs elements, which, with this change, are placed
in different locations in the DOM and don't need a common parent element.

Bug: T303549
Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
2022-05-31 18:06:11 -04:00
Sam Wilson c32c64481d Use new ResourceLoader namespace
To fix Phan errors with the now-deprecated ResourceLoaderContext
class alias.

Bug: T308718
Change-Id: Ifd265d29cee5f8a68e7b3036deaf2ba2b6c49d2e
2022-05-25 10:36:40 +00:00
Volker E 06708ba198 Remove unnecessary inner-tag whitespace and self-closing tags
Self-closing tags are so XHTML. HTML5 allows them on some elements, but
doesn't require them. Cleaning up for consistency and for a few bits
saved to clients.

Change-Id: I781b8d79bbd5dd1ee75a167718964c1142ecfc5d
2022-05-24 14:46:37 -07:00
jenkins-bot dafe3c8fd4 Merge "Handle accessible labels differently for dropdown and portal menus" 2022-05-24 15:09:04 +00:00
Mo Abualruz e46eef19d0 Normalise PHP namespaces used in Vector
- `MediaWiki\Skins\Vector\Tests` is now the prefix for all tests in the skin
- we followed PSR conventions of following folder structure after the prefix
- Optimize imports/use order
- update namespace in skin.json

Bug: T303102
Change-Id: Ib76374d81d973c83adfd6c8e7863ff6d797e655d
2022-05-23 09:32:40 +02:00
Jon Robson d74890df63 [Grid preparation] Add feature flag for grid
Additional changes:
* Make the query string parameter optional and if not defined set it
to lowercase configuration name. I think this makes it more predictable
as some configuration flags are prefixed with vector and some without.

This has the following consequences:
languageinheader => vectorlanguageinheader
languageinmainpageheader => vectorlanguageinmainpageheader
languagealertinsidebar => vectorlanguagealertinsidebar
titleabovetabs => vectortitleabovetabs

Note since table of contents query string is used in the A/B test
I've kept that as tableofcontents for now.

Bug: T303484
Change-Id: Iaca026ef5f32836098dc3b6f0f18632fe84fa8d0
2022-05-13 15:21:52 +00:00
bwang 9e665f9034 Handle accessible labels differently for dropdown and portal menus
An issue was found in QA where certain browser/screenreader combos could not read `aria-labelledby`+`aria-label`. Instead, we avoid using `aria-labelledby` and the `label` element entirely and apply the accessible label directly to the `input`. This great simplifies our labelling and improves screenreader support, while also allowing us to hide the `label` element to reduce verbosity.
Because the `label` element is used differently in the portal menu, we use the `is-portal` variable to maintain the old markup for portal menus

Bug: T301051
Change-Id: I5a0f7d5d78838fabe561095b33176e7162b31aea
2022-05-12 22:11:22 +00:00
Jon Robson 78369c51d3 Omit ArticleToolbar in Navigation when title above tabs
Change-Id: Ib3d9c28e4dbbf1deb85adccec84f208f086c1a04
2022-05-12 11:04:10 -07:00
jenkins-bot ef42ef7e66 Merge "Create feature flag for VectorTitleAboveTabs feature" 2022-05-11 19:53:11 +00:00
jenkins-bot 8d1dbab356 Merge "Simplify TOC spacing styles/logic by reusing the visible sticky header class" 2022-05-10 22:18:26 +00:00
bwang 2f32d1378c Fix personal tools navigation landmark label
Bug: T291304
Change-Id: I62c24cf739048b794cc33045cbe2333ecb51efdb
2022-05-10 17:12:46 +00:00
Jan Drewniak 29d938b0f9 Create feature flag for VectorTitleAboveTabs feature
Adds a feature called VectorTitleAboveTabs that will be used to
toggle a forthcoming feature that moves the page title above the
tabs (the ones that link to talk/history etc).

Bug: T303549
Change-Id: Ibadb4293eca16a83e5e7a9f90ddcf51fab0a0e41
2022-05-10 12:53:31 -04:00
bwang 91e2e55a10 Simplify TOC spacing styles/logic by reusing the visible sticky header class
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled

Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
2022-05-10 11:39:05 -05:00
jenkins-bot b6847038f8 Merge "[HTML] Refactor Content header templates" 2022-05-06 18:43:34 +00:00
Jan Drewniak 1288c97179 [HTML] Refactor Content header templates
Creates two new templates:
- ContentHeader.mustache containing the site header and indicators or languages
- ContentSubheader.mustache containing site tagline and conditionally indicators

This changes DOM order.
- It adds the `<header class="mw-body-header">` to all pages,
  including special pages & edit pages, not just pages with the language button.
- It moves the #siteSub element (tagline) outside of the
  `<div id="bodyContent">` element.
- Adds a clearfix (or margin-collapse fix) to `.vector-body`.

This changes causes a minor difference (perhaps improvement) where on special pages,
the beginning of the content, starting with the `mw-specialpage-summary` element,
was positioned closer to the page title than on regular pages.

The clearfix ensures that the height between the page title and content is consistent across all pages.

Bug: T303549
Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414
2022-05-06 15:37:04 +00:00
Jon Robson 305fbdacf8 [Grid preparation] ArticleToolbar component
Structural change to prepare for CSS grid usage.
ArticleToolbar component is defined and self contained with
all layout rules relating to toolbar

UI regression testing suite shows 6 failures due to pixel alignment
changes to tabs. When comparing to the current release, you should
see 34 failures before /and/ after this change.

Notable changes:
- #mw-head element is no longer present in modern Vector skin
to allow us to distinguish between cached HTML and modern HTML

Bug: T303484
Change-Id: Ia261ea53931217f32a21b33c2ab3d4ec64efa48a
2022-05-05 21:13:01 +00:00
Jon Robson 9a2b3d6275 [Grid preparation] Structure the header
Restructure the header to have two child elements

Change-Id: Ib5b7f31419ae6b62f62878947651b8ab843a3955
2022-05-05 17:54:28 +00:00
jenkins-bot ff3d879ee2 Merge "Remove nav element from Vector menus and only render label elements in Vector menus when needed. Add new nav landmarks corresponding to user links, main site nav, and article editing tools. Split out legacy Menu template." 2022-05-03 15:42:02 +00:00
Jon Robson a1e5fd5fcc On special page do not show empty more menu to low resolutions
This is a follow up to I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
On Special:Userlogin a "more" menu appears that's visible but empty
that should not

 Bug: T306229
Change-Id: I9384b3015de9991db41bde8ccc8f404ac533f198
2022-05-02 20:22:44 +00:00
Tim Starling 8d0659b1e6 Updates for core temp user autocreation feature
* Use pt-tmpuserpage for the temp user name.
* Use the userAnonymous icon for the temp user personal tools menu.
* Suppress the logout menu item for temp users.

Depends-On: Ib14a352490fc42039106523118e8d021844e3dfb
Bug: T300263
Change-Id: I8ac5de82f76a9ec58b0fbef85546bc7fd5b793d2
2022-04-28 20:32:53 +00:00
Jon Robson 64df4fde20 Remove dancing tabs with CSS only solution
Remove JavaScript that collapses tabs and replace with an easier
to maintain breakpoint based solution.

Tabs will now collapse below the tablet breakpoint

Note: In the case of mw.util.addPortletLink, to add items to the
`views` menu, these will not be collapsed into the more menu and
must now be explicitly added to both menus, ie. if the window is
resized these will hide and not appear in the more menu.

However, when mw.util.addPortletLink attempts to add to `views` menu
when there is not available space, we will redirect those links to
the more (`cactions`) dropdown menu.

Bug: T306229
Change-Id: I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
2022-04-28 17:57:10 +00:00
bwang d54029a523 Remove nav element from Vector menus and only render label elements in Vector menus when needed. Add new nav landmarks corresponding to user links, main site nav, and article editing tools. Split out legacy Menu template.
Bug: T291304
Bug: T301051
Change-Id: I35c20103e4b45139ef1d3f73c23f6a744aa87a3c
2022-04-27 16:52:20 +00:00
Derick A 80b60c153a
Hooks: Migrate Vector skin hooks to the new MediaWiki hook system
Per https://www.mediawiki.org/wiki/Manual:Hooks#Handling_hooks_in_MediaWiki_1.35_and_later,
MediaWiki provides a new hook system. Vector is able to utilize this new
hook system because it requires a MW version >= 1.35, hence the migration.

Bug: T271009
Change-Id: I6e01b151751485339a0d6a6dc6a843f7141d54bb
2022-04-26 23:58:13 +01:00
jenkins-bot cdc2df8e66 Merge "Always collapse Echo alert on "wide" headers" 2022-04-20 16:39:12 +00:00
jenkins-bot ff4a1ba89c Merge "Replace h2 in TOC with p and remove aria-hidden" 2022-04-19 21:04:20 +00:00
Jon Robson 5ef40f2f73 Always collapse Echo alert on "wide" headers
Bug: T301583
Change-Id: Ib4baab3ab814a79f45d8d19cfe4e499307852d52
2022-04-19 21:02:54 +00:00
jenkins-bot 065f3409b5 Merge "Replace Action::getActionName by IContextSource::getActionName" 2022-04-19 18:11:25 +00:00
bwang 9473758efd Replace h2 in TOC with p and remove aria-hidden
Ideally the TOC has an h2 after the article title h1, but because of the TOC sticky positioning and its placement in the grid, we cant use an h2 without messing up the heading order.

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

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

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

Bug: T303484
Change-Id: Ie85451b721b64aee42eb4b356f38c3621ce40b5e
2022-04-11 18:12:43 +00:00