Commit graph

184 commits

Author SHA1 Message Date
ksarabia a1c2d5ca35 Add new utility function for detecting pinned elements
* Introduces a new utility function, `hasPinnedElements()`, that allows us to check whether there are any pinned elements in the HTML document based on their CSS class names.
* This function will be useful for detecting pinned elements and can be used within WikimediaEvents.


Bug: T346106
Change-Id: I4283cd234ba71acce1e5cbadabf8aeb17cd8d86e
2023-09-29 21:17:24 +00:00
Sergio Gimeno 76c21734d6 Apply body styles to mw teleport target
Bug: T347199
Change-Id: Ibd5d8c7cc7880678fae498a451cfd417f1f8e1b8
2023-09-26 20:16:57 +00:00
Moh'd Khier Abualruz c88d72f1d7 [anon prefs] TOC pinned / unpinned
- Status should persist across page views for anonymous users
- Added 'toc-pinned' as a persistable feature in features.js and FeatureManager.php.
- Handling for cached HTML supporting both new and old class names for pinned/unpinned TOC

Based-On: I0fbe0ab458c5bd55d659d3c35a8fbaa6cd6ec0e1

Bug: T316060
Change-Id: Iad8523037ed364f09962b2d6ca0a3d50d7bd2266
2023-09-14 21:37:50 +00:00
Jon Robson 2ea12a11ef Remove limited width cached HTML handling
Bug: T343843
Change-Id: Ib49e8325fddef90e202d4e753526af45ed7b2c26
2023-08-10 22:04:32 +00:00
Jon Robson beb466521b Fix suffix check
Follow up to I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
Caught by Pixel.

Bug: T341641
Change-Id: If11d78bc48648647b9aab48908214058270eea57
2023-08-09 16:42:42 +00:00
Jon Robson 93a4b76b00 Fixes the pinning functionality
Pinning functionality was broken in
I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
as it breaks the check against "legacy" feature
classes. We should resort to using the legacy mode
when neither of the new classes can be found.

Bug: T341641
Change-Id: If97a393140175fd41551c3db14b19becb8d9f460
2023-08-08 23:18:12 +00:00
Jon Robson e5bf8adad7 Limited width uses new client preferences system
* Update classes to use clientpref-1 and clientpref-0 suffix for limited width
I've limited this to the only client preference for now to reduce
risk.
* For cached HTML retain existing CSS rules, and continue saving
a cookie
* Migrate cookie if found for newly generated pages. This will be
to ensure the old cookie and new cookie are in sync (this should be
a one time operation)

Depends-On: I1e635f843ac9b2f248b1f7618134598e80291b38
Bug: T341641
Change-Id: I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
2023-08-04 21:31:21 +00:00
Jon Robson 6b81214687 Fix issues with addPortlet handler
Follow up to I35a51df6ece2e48e086e722337d4c6bba427eeb4

1) the insertBefore function raises a JS error
2) We must take into account portlets added before the
Vector hook is registered.
3) Register the portlet in main. Loading the module should
not have side effects.

Bug: T303488
Change-Id: Iee6b308d6da63bc53bcba0fa5bb383d88787892a
2023-07-26 13:51:06 -07:00
Moh'd Khier Abualruz 4b4fc6c6c9 Add hook support for mw.util.addPortlet method
- Hooking into mw.util.addPortlet
- merged in tests from: I3258388d74c103515e3f0680304f9a376e439a35

possible follow-ups:
- tooltips support
- custom attributes support
- Adapting portlets of types dropdown, tab to vector skin. Check patch set 10 for a starting point

Depends-on: I79bad8661e34e653d41e6cb1cd4462ac5c6bc3b1
Bug: T303488
Change-Id: I35a51df6ece2e48e086e722337d4c6bba427eeb4
2023-07-26 13:37:09 +03:00
Jon Robson 48b1263533 Performance: Language dropdown menu should be hidden when ULS is enabled
The language dropdown currently impacts rendering due to making use of
visibility: hidden as space must be allocated for it on the page.

However when ULS is installed it is never used. As some JS to take
that into account so it doesn't impact the rendering of the page.

Since ULS may not be installed we have to consider that case and
retain the existing behaviour for those wiki (this should only
impact 3rd parties)

Bug: T340715
Change-Id: Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba
2023-07-07 17:17:42 +00:00
bwang 6a57506ae8 Separate vector-menu classes from Dropdowns
Bug: T319358
Change-Id: Idf05c1664c026f58487ba34af5ede8a11e695baf
2023-06-27 10:14:29 -05:00
bwang 8cc436ac4b Replace search loader indicator with Codex pending search message
Bug: T321106
Change-Id: Ic27ecf16277725f6a08038a5501d0903a2494b5f
2023-06-20 13:32:48 -05:00
jenkins-bot 84864d21de Merge "Drop styles for cached HTML" 2023-06-16 16:32:31 +00:00
jenkins-bot 0ff1b2f3da Merge "Prevent Skins Vector from setting preferences for temporary accounts" 2023-06-14 20:38:33 +00:00
tsepothoabala e5ef6f5f64 Prevent Skins Vector from setting preferences for temporary accounts
Bug: T337874
Change-Id: I83ca625276569349abcd6622d295137c5c4ffe2c
2023-06-14 11:05:27 -07:00
Jon Robson 24d69726f3 Drop styles for cached HTML
Performance: This reclaims 1.3kb of CSS.

Bug: T336526
Change-Id: I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d
2023-06-14 10:52:44 -07:00
Jon Robson 48d8ad0415 Forbid jQuery in new code
Follow up to I9d07acffa6f8133ec3e44ceba3d1fa5b27b81258

Change-Id: I5240c414cc4f4e4cc832647791b4a2c96acbc845
2023-06-13 15:45:43 -07:00
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00
jenkins-bot aec05c9a37 Merge "languageButton: Use click method instead of dispatchEvent" 2023-06-08 20:35:39 +00:00
Ed Sanders a1cdf551b5 Use jQuery fake events for sticky header edit buttons
The native ones do not trigger the VE code.

Partially reverts I5f4464e5bfa.

Bug: T336639
Change-Id: Ie088ddb7f73a2ed0b3b830fc28336d93e41c4ce5
2023-06-05 14:52:01 +01:00
Ed Sanders fe6720c7f8 Remove config and AB test code for edit buttons in sticky header
Bug: T337955
Change-Id: I8ebeeca1712e335d886faa498849fcb3f7f6e1ab
2023-06-01 18:00:07 +01:00
Func 8457b64a83 languageButton: Use click method instead of dispatchEvent
For pages with interlanguage links, this link has no event listener
and only functions as a plain link to the corresponding Wikidata page.

Bug: T336931
Change-Id: I8c1456b3c524824ccc59aee5f999c8017c59fc0b
2023-06-01 02:27:24 +08:00
jaydenb 679eb9f5e5
Move LimitedWidthToggle styles to skin.vector.styles
This allows the styles to be applied on browsers without JS support, notably the rule that hides the button.

Bug: T337580
Change-Id: I604d0c6362e2c424c38cbf5b798a5ac619bd70cf
2023-05-27 18:11:04 +01:00
bwang 197e4f45ed Remove limited toggle notification on page load
Also removes VectorLimitedWidthIndicator config

Bug: T336197
Change-Id: I6005c0cf4933647d5dda3df2c95650aca3fde5cd
2023-05-26 09:52:08 +00:00
Jon Robson 484b3cbee0 Use document feature classes to extract A/B test state
Bug: T335972
Change-Id: Ic0c04dfd022d0cd4141d2498d38ff1de67ad004c
2023-05-25 19:05:38 +00:00
Jon Robson 7c29c5ff03 Revert "Override mw.experiments.getBucket() via body classes"
This reverts commit b599da4153.

Change-Id: I977b352ee71faa25c3921205025ba326e05a0f9b
2023-05-25 21:38:48 +03:00
Jan Drewniak b599da4153 Override mw.experiments.getBucket() via body classes
When AB bucketing via ABRequirements.php in Vector,
the browser has no awareness of this bucketing and buckets users
once more via mw.experiments.getBucket() in AB.js.

mw.experiments uses a different algorithm than ABRequirements.php,
causing a mismatch between the server-side bucketing
and the client-side bucketing.

This patch overrides that client-side bucketing by
adding classes to the HTML element that are recognized
by AB.js

Bug: T335972
Change-Id: I0549a8dee23ebe7cd68465f8403e4f7aac76633e
2023-05-24 18:21:30 -04:00
jenkins-bot 425a7a5024 Merge "styles: Apply Codex z-index tokens" 2023-05-22 16:46:01 +00:00
bwang 27e821a486 Consolidate watchstar icon updating logic under watchstar.js
Depends-on: Ib11177df52d46ecda2ace50ac78672ed3d5fd5c9
Bug: T336640
Bug: T336641
Change-Id: If2573409cd1af4580f89b33c32cd0441e7a80735
2023-05-16 13:18:47 -05:00
Volker E 6865b7e7f4 styles: Apply Codex z-index tokens
Applying central Codex design tokens in new architecture.
This should already show the working principle of the new architecture.
Replacing `@z-index-menu` by `z-index-dropdown`.
Note this is also removing obsolete `@z-index-sidebar-button`.

Bug: T285592
Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
2023-05-15 17:34:36 -07:00
Jon Robson 0acb55fc8e Run A/B test enrollment code for any A/B test
Currently the A/B test enrollment code is limited to the
sticky header experiment. Instead of doing that, always check it
inside skin.js and run it if necessary.

Now it's possible for this to run twice, keep track of whether
the init function has been called and make sure it doesn't get called
more than once.

Bug: T335309
Change-Id: Icfef13b019319d07686a06e06846789faf790ed6
2023-05-11 14:36:42 -07:00
Jan Drewniak fdb1ba3b30 Add padding to limited-width toggle to account for close icon
Bug: T336274
Change-Id: I435976d785785759e0eca6612ef2cd1b47cd63af
2023-05-09 15:14:29 +00:00
bwang 6f13caa775 Remove VectorTableOfContentsBeginning flag
Bug: T334969
Change-Id: I9e931b7cdc443e73a41c92f5368f81b35285437e
2023-05-08 22:25:03 +00:00
jenkins-bot c069ada615 Merge "Update user menu and watchstar buttons to be consistent with spec" 2023-05-04 18:34:04 +00:00
bwang d8bcb73647 Update user menu and watchstar buttons to be consistent with spec
Depends-on: Ibd762c810e1d89047e39ce3af792b43689bf11e3
Bug: T335909
Change-Id: I5b42780416b466cc3fc33d29220aef2979ac3239
2023-05-03 15:47:00 -07:00
Moh'd Khier Abualruz fef0ced503 Ensure page load popupNotification is closed when the toggle button is clicked
Bug: T335153
Change-Id: Iafe0f08554d8844acb60ef9fdd1fce4594459aac
2023-05-03 15:16:15 -05:00
bwang c7001374ff Make limited width button consistent with button spec
Bug: T334881
Bug: T326323
Change-Id: I97cd6d9ede39993cd58274eaff2749aa654e4777
2023-05-02 13:32:22 -05:00
bwang dd2284cf16 Update instances of Button.mustache to use to use VectorComponentButton
Bug: T334881
Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a
2023-05-02 18:00:41 +00:00
Moh'd Khier Abualruz 07ef69de96 popupNotification Fix memory leaks
-Fixes container id

relates to: I90e88ef0c6cb880205f4fb6505d997826d923690

Bug: T335153
Change-Id: I7eb307c95860afad40369551f1e801c72843a080
2023-05-01 12:11:29 +02:00
Moh'd Khier Abualruz c076c85070 popupNotification Fix memory leaks
Bug: T335153
Change-Id: I90e88ef0c6cb880205f4fb6505d997826d923690
2023-04-25 14:51:25 +02:00
Moh'd Khier Abualruz ecdf2ced2c popupNotification Javascript tests
Bug: T333345
Change-Id: If65a86b2d6a8345f127a0803fd64cfa9f13a8630
2023-04-20 14:09:33 -07:00
Nicholas Ray 630d47792a Fix InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList'
Bug: T335149
Change-Id: I9dad78af21ca7ee272a3661f5869e6337909dc05
2023-04-20 13:44:36 -06:00
Nicholas Ray c61d57c72a Fix TypeError: trigger.attr is not a function
Code was assuming jQuery.Object when it is now an Element.

Bug: T335148
Change-Id: I4755607f991889468294e022015a6a7e4becbb6c
2023-04-20 13:05:21 -06:00
bwang 4f76994970 Add custom limited width popup
Bug: T333601
Change-Id: I663d6a391aeeb05c27f2f2b8829c22325b528b39
2023-04-17 22:35:52 +00:00
Jon Robson 080b6958e8 Use modern ES6 methods
* Prefer dispatchEvent to $.trigger
* Prefer Object.assign to $.extend
* Prefer URLSearchParams to $.params
* Prefer getAttribute / properties to $.attr
* Prefer document.querySelectorAll over $.find

Change-Id: I5f4464e5bfa11b401e663f0b8761fc6092380627
2023-04-14 13:38:38 -07:00
Jon Robson 2622472983 Point out the limited width control
The limited control will be pointed to on page load
When wgVectorPageLoadIndicator is set to true (defaults
to false)

Clicking the button should show the indicator.

Additional change:
* Update config.json to reflect new state
(Follow up to 28ada2dc)

Bug: T333601
Change-Id: I188ed7226b9a1530e54b1aaa80caa0830bf73633
2023-04-14 17:15:56 +00:00
Jon Robson 10033b294e Drop ES5 compatible code
Drop usages of $.closest in favor of ES6 closest

We also no longer need to check for whether closest is available
now that we do not need to worry about ES5 code.

Change-Id: I2442a4f69f8181dd761ca7ac418839cfca26a36f
2023-04-13 00:27:22 +00:00
Jon Robson 2499e834bb Remove Eslint disable and TypeScript ignore rules, bump coverage
Follow up to 87dd101a
* bump coverage to reflect improved test state
* remove ts-ignore statements
* Drop eslint-disable-next-line compat/compat rules in ES6 code
* Drop TypeScript checking on Jest files
* Identifies an existing usage of ES7 includes method in place
where ES6 browsers need to be supported.
* Update App.vue booleans to default to false. Note this doesn't
impact our usage of the search app as we always pass these values
in.
* Drop unused eslintEs6.json configuration file

Change-Id: Ib6f1ef77bf4e27ecdcc54b5fb963818437f8195c
2023-04-13 00:20:44 +00:00
Jon Robson d4a7fb6479 Rearrange setupIntersectionObservers
Update setupIntersectionObservers so it only contains code
that uses observers. Other code is moved to the skin.js entry point
along with other features.

Change-Id: Ia11b4e07f899426687c616ce2054e0df9d36ab7c
2023-04-12 17:39:36 +00:00
Jon Robson 87dd101a69 Consolidate and fix eslint errors, dropping ts-ignores
* Upgrade @wikimedia/types-wikimedia to allow us to drop several
@ts-ignores
* Merges eslint rules now that ES6 is default everywhere
* Runs autofix command
* Fixes various prefer-const errors

Change-Id: Iee5bcb93f10a76d80dbeec813f6387c13438263e
2023-04-11 16:56:31 -07:00