Commit graph

74 commits

Author SHA1 Message Date
Nicholas Ray 76eb7caa2f Update typescript to latest (v4.5.5)
Vector's tsc version is currently reporting errors that the latest
typescript version doesn't report and vice versa. Upgrade to the latest
version to avoid these discrepancies.

Additionally:

Fix tsc errors that are now reported by updated version

Bug: T297614
Change-Id: I0eb67bcc1a5ce214fcf2d6f6433a5de3a845b6a6
2022-01-24 16:35:45 -07:00
Nicholas Ray d9ef1ad66d Fix TypeError: document.querySelectorAll(...).forEach is not a function
Bug: T298910
Change-Id: Iaa67f36278af7805c5d915737d6b30e98b3f8484
2022-01-10 13:34:01 -07:00
bwang 80141b61c9 Use core checkbox hack consistently for all dropdown and provide custom JS enhancements for the sidebar button
Depends-on: Id74a80cda6cf460cc2b579269b8d5b2ce81c8ca5
Change-Id: Ibd9518dab78d1d9a541b501d920fe3bd4d362093
2021-12-21 23:33:59 +00:00
Nicholas Ray 3187fa41ad Close .vector-menu-dropdown menus in modern Vector beforeunload
Per T295085, because of the checkbox hack, these menu would stay open
when navigating back to a page.

Bug: T295085
Change-Id: Ief9523030384b4bcaa00379988e2042b4d177dcc
2021-12-13 17:24:44 -07:00
jenkins-bot 04ff34bd0c Merge "Initialize the skins.vector.es6 module before the skins.vector.js module" 2021-11-04 18:11:29 +00:00
Nicholas Ray c741759cab Initialize the skins.vector.es6 module before the skins.vector.js module
stickyHeader.js, a file in the "skins.vector.es6" module, clones the
user menu. Because of this, it must initialize before dropdownMenu.js, a
file in the "skins.vector.js" module, in order for dropdownMenu.js to
bind the correct checkboxHack event listeners to the user menu in the
sticky header.

Therefore, change the es6 module to export its main method. The
skins.vector.js module can then use mw.loader.using to ensure the
skins.vector.es6 module initialization happens first in browsers that
support es6. Browsers that don't support es6 will continue to initialize
the skins.vector.js module.

Bug: T291096
Change-Id: I1bb6f2da9703ed2679eacfdb42b9818efe614ab9
2021-11-03 11:03:18 -06:00
Nicholas Ray 7f58c88934 Add comment to dropdownMenus.js regarding the CHECKBOX_HACK_BUTTON_SELECTOR
Per request [1], a clarifying comment was added explaining that our
checkbox hack implementation has drifted from the core's recommendation.

[1] https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/732732/2/resources/skins.vector.js/dropdownMenus.js#7

Bug: T291096
Change-Id: I3a5bc9d463bace11185affbb21320d86fc1c5d99
2021-11-02 17:58:52 -06:00
jdlrobson b8122cc40b Separate code from ES6 browsers from ES5 code
This will allow us to write ES6 code for the new features which
is limited to those browsers.

For browsers that do not support ES6, the code will not execute
because of the "es6" flag. Doing this will help us avoid issues
like T293402

Change-Id: Iffb7098cb22395e33b87352fb4f08516f6f25e6f
2021-10-21 15:55:04 -07:00
jenkins-bot 62347f0a74 Merge "Make dropdown menus toggle with enter key" 2021-10-21 20:22:41 +00:00
Nicholas Ray 876d3ddf39 Make dropdown menus toggle with enter key
Bug: T291096
Change-Id: Ia5d1a33aa04dab09f1454ade4816fdb9d48f1eca
2021-10-21 09:59:58 -06:00
jdlrobson c16fa80006 Sticky header: Add user page link to user menu in sticky header
Bug: T292557
Change-Id: Ia72c214ef6384dfeae21556aa4007eb6075f0057
2021-10-21 15:15:51 +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
bwang a1b523a9d5 Avoid calling forEach on searchbox NodeList for older browsers
Bug: T293402
Change-Id: Ic2d10ca9c664c284fc9b5433b5ff1cc32d98c960
2021-10-18 17:56:05 +00:00
Clare Ming 67e7eab714 Add edit icons to sticky header
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).

Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
2021-10-05 23:31:19 +00:00
bwang 8758f87c4b Replace getVectorMenu function with jQuery equivalent
Bug: T292319
Change-Id: I9c9a179b3bcce9eccdf7037818823568f77f2b35
2021-10-04 17:55:49 +00:00
jenkins-bot 17ccb9ab3a Merge "Accommodate other sticky elements with sticky header" 2021-09-30 23:17:26 +00:00
Clare Ming e30c3408cf Accommodate other sticky elements with sticky header
- Update sticky header js to apply top offsets.

Bug: T289817
Change-Id: Id0e7bf7b018fbbfb2a9c1932314bf67f245b465d
2021-09-30 16:35:55 -06:00
bwang 405b52054f Update sticky header to be hidden to screen readers and not tabbable
- Adds aria-hidden="true" to the sticky header
- Adds tabindex="-1" support to Button.mustache and update sticky header button data
- Add tabindex to cloned user menu

Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9
2021-09-30 09:47:57 -05:00
jenkins-bot 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 84023ff39c Merge "Allow multiple search components on the same page" 2021-09-24 17:04:14 +00: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
bwang a1f9122eed Prevent gadgets from adding to the sticky header user menu via addPortletLink
Bug: T291426
Change-Id: Ibe8837111011179245745c7b645f046efdbc6ee5
2021-09-23 12:17:55 -05:00
Clare Ming bdad84a7c9 Restrict sticky header to specified namespaces
- Hardcode allowable namespaces, actions for now in relevant js.

Bug: T290347
Change-Id: If482505be5de4b3e5bf130530f27f0d917ecaaa0
2021-09-17 19:07:04 +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 f271c86238 [refactor] DRY up attribute suffixing
This makes the code more readable and allows us to apply
the suffixing in other places in the sticky header.

Change-Id: I44008c18a3faea2089bc93eb5ce7fea1cad1aaec
2021-09-14 23:34:48 +00:00
jdlrobson 21a21f7e93 [refactor] reduce usages of typescript type declarations
While needed for cloned elements, others can be avoided by
using more general Element class

Change-Id: Iaee121a9f746e9729b5ecbdec80915bf05c11655
2021-09-14 23:34:36 +00:00
jdlrobson 52204c0f1a Add history and talk page icons to sticky header
Bug: T290597
Change-Id: Ib590399df09a9da8e181b331d4227b0de30b9a8e
2021-09-14 12:34:47 -07:00
jenkins-bot 53d1508f62 Merge "Add user menu to sticky header" 2021-09-14 19:23:13 +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
jenkins-bot 82832b137a Merge "Remove disable dropdown behavior" 2021-09-13 07:05:25 +00:00
Clare Ming e639c9287d Make sticky header functional/visible
- Show sticky header after bottom of first h1.
- Hide sticky header before bottom of first h1.
- Add media query for reduce motion preference.

Bug: T290101
Change-Id: I2b1ecd31ac360a1ef5bf2f016978d6e0665a316c
2021-09-07 16:10:21 -06:00
Clare Ming af317dbc58 Restrict sticky heaader visibility
- Hide if javascript disabled.
- Hide at lower resolutions.

Bug: T289714
Change-Id: I0c669c7fc46fda7bf5055d20cc1cd54d472a9330
2021-09-03 14:19:24 -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
jdlrobson c8dd4e9ed1 Remove disable dropdown behavior
Now that we bind the ULS dialog to the checkbox element,
(see c08ae11) the default behaviour of the checkbos is prevented,
so it is impossible for the dropdown to ever
be shown when ULS is enabled and clicked so this code no longer
serves any purpose.

Depends-On: I97a69c30b27cb1ded06451389e086229561c3589
Change-Id: Ic9d03dea12ee8bb2d7430eccd70e4343e3805d36
2021-08-31 20:53:41 +00: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
Clare Ming 129bf5c350 Update vector menu hide dropdown class to use BEMish convention.
- Keep double-dash class name for cached HTML.
- Update instances of renamed class in less + js.

Bug: T253671
Change-Id: Ieb1ce630e8fa84167e2ca8497f66a20183fdaf90
2021-08-24 15:33:41 +00:00
jdlrobson 5a0214afc9 Copy class across to new language link item
If the Vector code runs before the Wikibase code,
the Wikibase code will not work as the CSS selector
will no longer match.

Bug: T287206
Change-Id: I8555b60f2463ad19efadd57bccbb91ae4e2cc528
2021-08-10 13:17:30 -07:00
jdlrobson 85ffc0805e Do not rely on load order for disabling language button fallback
Some code disables the dropdown behaviour when ULS is loaded, however
it does not always appear to be working as the `ext.uls.interface`
module may be loaded for other things unrelated to the compact
languages link button.

The safest thing to do for now seems to be to check the configuration
flag wgULSisCompactLinksEnabled. In future, perhaps a hook event could
be added to ULS and that could be subscribed to instead.

Bug: T287191
Change-Id: I0cf8d387919078aabc9e77a0a452f8b3364016ee
2021-07-28 16:59:48 -07:00
bwang a27b6f7096 Copy interwiki links into sidebar
Bug: T287206
Change-Id: I951b2a277f9484f8e2735951d85c0766098607b5
2021-07-27 12:08:11 -05:00
Nicholas Ray 91af0e098d Make search toggleable at smaller screen widths
Now that the header collapses at small resolutions
(I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the
search toggle to show the search box when clicked and hides it when the
user clicks outside the search box.

* Adds searchToggle.js to perform handle the toggle behavior of the
searchbox.
* Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less
so that these can be used to set the start margin of the search box
(enabling its start edge to match the tab text start edge).
* Modifies screen.less to only apply search max-width when >=
@width-breakpoint-tablet

Bug: T284242
Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
2021-07-14 00:14:45 +00:00
jdlrobson 0b024a4a4d Allow disabling of the new compact languages button
Depends-On: I726c61d4c6895a28b999781752535e0ddc961744
Bug: T282149
Change-Id: I436554d9d51470d277d59c2c71e08124735e12fd
2021-06-14 15:49:43 +00:00
Nicholas Ray 8eba1da250 Silence eslint compat/compat for search performance instrumentation
Eslint is throwing compat warnings on every commit in Vector. This
commit silences those warnings.

Change-Id: I0e914c6179745415e916fadd382d86baa72e3e63
2021-05-05 14:37:35 -06:00
jdlrobson b183ac3bf3 Inform anonymous A/B test by tracking time from navigationStart
This will inform us on the approach taken in
I315ea30b88e43f3df29b0a0b37907272ec77d0a7

Additional change:
Flesh out TypeScript with eventLogging interface

Bug:  T275807
Change-Id: I9789cd1dfab5181fa093bce46c5c9b0d338339f5
2021-03-23 10:40:20 -07:00
jdlrobson 41d30615a2 [modern] Usability improvements to dropdown
* Don't reveal the menu on hover
* Don't flip the dropdown arrow when open
* Menus close when clicked outside

Bug: T275681
Change-Id: I36f5c46422725a935c962be3194fd37bde1fa769
2021-03-07 18:59:41 +00:00
jdlrobson 1d01f70e32 Refactor: Separate Language button code into its own JS file
Having this outside the init function makes the code more
easy to understand.

Change-Id: I6bdcb385738ceb986e21075b006db40567386e7b
2021-03-03 00:13:45 +00:00
Nicholas Ray e3abac06a6 Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate
* We add the `.mw-interlanguage-selector` class to the
.vector-menu-heading in the server rendered HTML. `ext.uls.interface.js`
later attaches a click handler to this selector that loads the rest of
ULS.

* We hide the dropdown arrow for js users and only show it again if
ext.uls.interface module isn't installed or is not being loaded.

* When the `ext.uls.interface` module has been loaded, we hide the checkbox
and checkbox hack menu in favor of showing the ULS popover.

Additionally:

* Adds '.vector-menu-heading' class to menu headings.

* Change h3 selector to `.vector-menu-heading`.

Bug: T273232
Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa
2021-02-05 15:03:07 -07:00