Commit graph

155 commits

Author SHA1 Message Date
vladshapik 262a520a2c Avoid using User::getOption
Remove using of User:getOption since this method
will be hard-deprecated. Now it is soft-deprecated.

Bug: T296083
Change-Id: I3194a9c1c5c70592f88bc4dbedc78846d1141768
2021-11-29 23:46:05 +00:00
bwang 90a3a226e7 Ensure sticky header ULS is tracked by DesktopWebUIActionsTracking
Bug: T289815
Change-Id: I1960614e12a50a20af157874b925610d29dfa2c7
2021-11-19 16:51:37 +00:00
jdlrobson 768a07ec6c Add sticky header edit feature flag
Can be disabled via &vectorstickyheaderedit=0 or configuration
change.

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

Bug: T294383
Change-Id: Ic282ea4f2ff0108eeaa154c8a77e4e5fd30daeae
2021-10-26 21:59:29 +00:00
Fomafix 574bbfd549 Combine return paths in getLanguagesCached
Also use single quotes instead of double quotes and fix typos.

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

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

Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9
2021-09-30 09:47:57 -05:00
Nicholas Ray 1209b388e9 Add scroll padding to the root element when the sticky header is enabled
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)

Known limitations:

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

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

Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
2021-09-29 14:25:26 -06:00
jenkins-bot 20135a348e Merge "Wire up sticky header search feature" 2021-09-27 22:58:34 +00:00
jdlrobson 125ea5dea9 Wire up sticky header search feature
Bug: T289724
Change-Id: I784ea5eb12b6f43d19769ff48a14d3fd4627853c
2021-09-27 14:47:58 -07:00
jenkins-bot f9405739ed Merge "Vector menu items are wrapped in spans + improve Vector addPortletLink support" 2021-09-27 19:38:36 +00:00
jdlrobson a6c0b21044 Vector menu items are wrapped in spans + improve Vector addPortletLink support
* In legacy Vector, menu items are now wrapped with spans. This
  consistency in HTML is required for splitting Vector into two
  different skins.
* Vector's portlet link items now support icons

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

Precursor for wiring up search in the sticky header.

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

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

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

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

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

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

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

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

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

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

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

Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-14 16:58:07 -07:00
jdlrobson 52204c0f1a Add history and talk page icons to sticky header
Bug: T290597
Change-Id: Ib590399df09a9da8e181b331d4227b0de30b9a8e
2021-09-14 12:34:47 -07:00
jenkins-bot b7ef3d9a0e Merge "Add page title to sticky header" 2021-09-14 19:31:33 +00:00
Clare Ming 3362e62ef2 Add page title to sticky header
- Fade out after 500px.

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

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

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

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

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

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

I16223ce849267e718aad22b8a24b2327332ac8b7

Change-Id: I56350d7e936b4d179c1bd12376ffebf295897a99
2021-09-02 13:56:59 -06:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.

Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-09-01 12:32:31 -07:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
2021-08-31 10:59:59 -05:00
jenkins-bot a068d6125d Merge "Template directory is set in skin.json" 2021-08-30 17:43:50 +00:00
jenkins-bot fef51f9023 Merge "Improve readability of anon user menu for screenreaders" 2021-08-27 20:36:16 +00:00
jdlrobson 3435f8fd9b Template directory is set in skin.json
Thanks to the upstream changes in T262067 we can make this template
directory relative to the skin and declare it inside skin.json

Bug: T262067
Change-Id: Ieccdf87979d14eeec0834b6b0cecf064d5fd9cfc
2021-08-27 17:36:28 +00:00
bwang d15005408f Improve readability of anon user menu for screenreaders
Bug: T288293
Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b
2021-08-26 12:58:10 -05:00
Clare Ming 1efe0a4203 Remove user links feature flag
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.

Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
2021-08-26 10:07:15 -06:00
jenkins-bot 30cdc5894e Merge "Do not show create account link for private wikis." 2021-08-25 21:40:46 +00:00
jenkins-bot 7afd480266 Merge "Add title attributes to menu icons on hover" 2021-08-25 21:25:17 +00:00
Clare Ming cd2a186469 Do not show create account link for private wikis.
- Add conditional to check for 'createaccount' permissions based on config.
- Update relevant template to show/hide create account markup.

Note that this solution excludes the use case of extensions using core hooks
to disable account creation. See https://phabricator.wikimedia.org/T288428#7303233.

Bug: T288428
Change-Id: I89852207ee42f5ddd07e5dd6141461c6bfbcd5ac
2021-08-25 21:23:49 +00:00
Clare Ming 3dccc74b4b Add title attributes to menu icons on hover
- Add title attribute to Header template for hamburger icon.
- Override tooltip for user links menu icon for anon users.
- Make sure tooltips are empty for legacy version.
- Add translatable strings for new tooltip, title.

Bug: T287494
Change-Id: I84ce6a1eb2a37eb9ea71a40c565c059d156a44ba
2021-08-25 13:20:22 -06:00
jdlrobson 391d9ba509 [refactor] Clean up responsive handling
There is no need for this to be in the constructor. Separate into
its own function that inherits from parent class and existing parent
method isResponsive.

Change-Id: I60d155ec9db99ccfe0b74271dee76275a8a6986c
2021-08-23 15:59:15 +00:00
jdlrobson d0c41d1dfc Run Vector's SkinTemplateNavigation hook last
Depends-On: Iec99be92378dc1a43f39428caffc03e1f594a927
Bug: T287533
Change-Id: I7d840d047627108a0a921ea52d5cb4bd06f36ab5
2021-07-29 14:27:28 +00:00