Commit graph

68 commits

Author SHA1 Message Date
Jdrewniak 9b93a64fdf Follow-up to f115016 - Add beta tag & feedback link to Appearance menu
Addresses edge-cases for feedback link for dark-mode.
- Feedback link should not be visible if dark-mode gadget is enabled.
- Feedback link should not be visible if page is excluded from dark mode.

Additionally, turns feedback link green after click
and prevents further clicks on link (without removing link,
since removing the link changes the margins on the text)
and adds heart icon beside success message.

Bug: T367871
Change-Id: Idff14ffa7e8f497ec38250cf10252e998c234057
2024-07-03 18:40:39 -04:00
Jon Robson 92307893fa Client preferences should user new user preference API
Follow up to Ic40da2af8ea46bd42cbebbdbceda2431bd8600ae

Bug: T341278
Change-Id: Iaaf75d9c91d594d826b556fc7d04965a3a3bd3a9
2024-06-18 12:26:16 -08:00
Ed Sanders 7e7486c4a5 build: Update eslint-config-wikimedia to 0.28.0 and autofix
Change-Id: I350941a711d2304fc968b3ba1f1e0afa5878578e
2024-06-06 16:22:05 +01:00
Steph Toyofuku 4a0c2cb684 Disable night mode if gadget detected
While our implementation of night mode is in beta, we want to respect
the existing night mode gadget and disable night mode in favor of the
gadget, providing a notice with an option to disable the gadget and
reload the page

Additionally, raise the max bundle size to account for the additional
code added

Note: the tests still aren't exactly where I'd like them to be, but
hopefully they raise confidence a little bit with reviewing this patch

Additional changes:
* Upgrade to latest version of TypeScript types and remove several
@ts-ignore statements

Bug: T365083
Change-Id: I9583ee7ebf8c810ddd504193d568034c954d28f2
2024-05-30 20:23:38 +00:00
bwang e42b235669 Wrap tables with JS
Depends-on: Ia271a57776e6f38384c5855727ab82fd7af83241
Bug: T330527
Change-Id: I756f8e1bcd86867bee52962a0d1c2dbb34ca75eb
2024-05-24 15:49:54 -05:00
bwang 0109218ab9 Rename client preference menu to appearance menu
Bug: T362808
Change-Id: Id6800d38eebf433cf0c9e3f179dd83df2eefd1fb
2024-04-29 15:38:20 +00:00
libraryupgrader d22fd0d7ab build: Updating npm dependencies
* eslint-config-wikimedia: 0.26.0 → 0.27.0
* @wikimedia/codex: 1.3.5 → 1.4.0
* @wikimedia/codex-icons: 1.3.5 → 1.4.0

Change-Id: I3dbc33dde89f03b188918e29f89434aafc3690a9
2024-04-21 21:57:17 +00:00
Jon Robson 3f7f355a2e Support legacy message box styles markup in JavaScript
Log a console warning to assist developers in migrating to the new
markup.

Bug: T360633
Change-Id: Iaa1a3fc3b910c5fe491459fc82c61bc329f3408d
2024-03-21 18:19:52 +00:00
Moh'd Khier Abualruz b3ab84f9e5 Vector - Rename the skin night mode classes to more readable classes
The classes:
- skin-night-mode-clientpref-0
- skin-night-mode-clientpref-1
- skin-night-mode-clientpref-2
is being replaced with
- skin-theme-clientpref-day
- skin-theme-clientpref-night
- skin-theme-clientpref-os

Other Changes:
- Change vector-night-mode preference to vector-theme
- Add skin-theme-os-label and other messages to skins.vector.clientPreferences
- Remove skin-night-mode-* messages from skins.vector.clientPreferences

Bug: T359983
Change-Id: I31eb086e623a97df9fbd004425559e05b0cae170
2024-03-20 23:54:47 +00:00
Moh'd Khier Abualruz 182bb7519b Migrate uses of codex-search in Vector to use CodexModule
- Loaded new skins.vector.search.codex.scripts module in skin.json, with only the CdxTypeaheadSearch component with codexScriptOnly flag set to true.
- Included skins.vector.search.codex.scripts in the script loading configuration for Vector22 within skin.json.
- Turned off the "interface-message-box" feature within Vector22's skins.vector.styles configuration in skin.json, as Codex now supplies these styles.
- Fix the style selector to add `.cdx-button` to `.vector-limited-width-toggle` in BottomDock.less since using the codex style
- Substituted "codex-search-styles" with "skins.vector.search.codex.styles" in the existing configuration.
- Ensured the availability of skins.vector.search.codex.scripts module for use, marking it in the list of modules in skin.js.
- Modified App.vue to utilize skins.vector.search.codex.scripts instead of @wikimedia/codex-search.
- Update App.test.js.snap to the latest output form
- Update bundlesize.config.json with newest values

Bug: T356677
Change-Id: I7fc223db01171efe6656792530d4b625be4c8edc
2024-03-13 15:58:26 +00:00
Moh'd Khier Abualruz a8eb85f3d5 Replace use of codex-styles in beta feature with CodexModule ResourceLoader
- Add new module 'skins.vector.search.codex.styles' to skin.json
- Added 'skins.vector.search.codex.styles' to bundlesize.config.json
- Replace the old styles module 'codex-search-styles' with the new one 'skins.vector.search.codex.styles' in skin.js

Bug: T353844
Change-Id: If3cbcac64242c403b42811159882741fda132555
2024-02-27 17:40:11 +00:00
bwang e964cbb785 Add Vector night mode feature flag
Bug: T355065
Change-Id: Ica63eb61ee042e8684168f6787b27a5e58e38bee
2024-02-05 11:33:37 -08:00
jenkins-bot 3961cbcfb4 Merge "Deactivate sticky header menus and search when sticky header is hidden attempt 2" 2024-01-30 19:36:34 +00:00
Bernard Wang 8172710236 Deactivate sticky header menus and search when sticky header is hidden attempt 2
This reverts commit 47e58d53d4.

Reason for revert: second attempt at the patch

Bug: T325083
Change-Id: I2190005fcad41ad61bbd02ea3603e222fc58ceb8
2024-01-30 18:14:21 +00:00
jenkins-bot 851bc5aecd Merge "Revert "Deactivate sticky header menus and search when sticky header is hidden"" 2024-01-30 02:48:24 +00:00
Jdlrobson 47e58d53d4 Revert "Deactivate sticky header menus and search when sticky header is hidden"
This reverts commit 984a8a03ae.

Reason for revert: For anonymous users this was triggering the
error "Cannot read properties of null (reading 'contains')"

Change-Id: I0bd78d195768c95b188208fa6fbab60fb483ed87
2024-01-30 02:24:15 +00:00
jenkins-bot 3d747b504a Merge "Deactivate sticky header menus and search when sticky header is hidden" 2024-01-30 00:56:46 +00:00
bwang c893934ee7 Fix linter warnings
Change-Id: I24c3ecb7858142dc1b90cf1e34456691660157f1
2024-01-29 17:06:53 +00:00
bwang 984a8a03ae Deactivate sticky header menus and search when sticky header is hidden
Bug: T325083
Bug: T336965
Change-Id: Ie2cc38b1cadf239f8350d47eba1f2fefc60e1f28
2024-01-18 14:24:36 -06:00
Jon Robson 7d5caf3f66 Generalize skins.vector.clientPreferences library for use in MobileFrontend
Bug: T354224
Change-Id: I6949c4f49ec34b8e47036da4222a5f3ff491af32
2024-01-17 14:51:29 -08:00
James D. Forrester 1c93d0514b build: Upgrade eslint-config-wikimedia from 0.25.1 to 0.26.0
Bug: T345100
Change-Id: I51fdef33d517ce4f2f50930bc46dddb2f497677c
2024-01-11 14:19:57 -05:00
Moh'd Khier Abualruz 412c1f2d83 Create a sidebar for user preferences
* Adds mustache for sidebar
* Adds file to render sidebar

Bug: T350417
Change-Id: I691c8a0487e158e96027109c223569224f03a102
2023-11-14 14:33:01 -08:00
Jon Robson 44d9f74c8f Client preferences: Support different render locations, use Codex
* Refactor client preferences to support different render locations
such as the sidebar or user menu.
* Make use of Codex markup.

Bug: T350195
Bug: T350417
Change-Id: I13eeb9cafc888faba4a5bf0390c1b6db1e3f0259
2023-11-09 19:04:03 +00:00
Jon Robson 076f957c5d Drop p-namespaces backwards compatibility script
Bug: T347907
Change-Id: Ib2bec20315440f89a0ca375f0e2b65b7a041006d
2023-10-24 18:43:28 +00:00
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 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
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
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
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 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
Jon Robson c3e57e0ecd Merge skins.vector.es6 into skins.vector.js
With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.

Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
2023-04-11 23:18:46 +00:00
Jan Drewniak 40130dbf5f Follow-up to 6e8a98ca removing checkbox.js
Removes checkbox.js and related styles as well
as rules for #mw-sidebar-checkbox which was removed
in a previous patch.

Bug: T332090
Change-Id: I168c1161a1d3365e79c2ff6b1c2ab5455f7c4c00
2023-04-06 01:01:21 -04:00
Jan Drewniak 15be8a0340 Remove custom sidebar config
Removes configuration for
1. Custom sidebar pinning
2. Default sidebar visibility for logged in & anons

The first config is no longer necessary because
the main menu now uses the pinnable header for
showing/hiding and persisting it's state.

The second config is no longer necessary since
the Page Tools menu moves many sidebar items into
a different location.

Bug: T332090
Change-Id: Iaf25237757dc1e43e096b8c5991e9dd31ad25c2d
2023-03-31 13:09:04 -04:00
Nicholas Ray 87959c8a59 Move limitedWidthToggle.js and features.js to skins.vector.es6 module
In preparation for 856718 where pinnableElement.js makes use of features.js,
move features.js and limitedWidthToggle.js out of the skins.vector.js module and
into the skins.vector.es6 module. This will make it easier to use by
pinnableElement.js without needing the es6 module to depend on the es5 module.

This does have the negative side-effect of causing the limited width feature to
not be supported by IE11 (and other non-ES6 browsers), however this tradeoff was
discussed with our product manager to be acceptable. Additionally, this
maintains the status quo as the toggle button does not currently show in IE11
(which may be a bug).

Bug: T322051
Change-Id: If0e8cb98deabe847c2cc71fddb90ca36d15e5f8f
2022-12-07 16:45:52 -07:00
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
Jon Robson 0eb8811e7a Limited width toggle
* Introduce a generalized feature toggle system that uses user
preferences or localStorage for anons (right now the latter is out
of scope but will be explored in a follow up)
* Feature flagged to VisualEnhancementNext for now, given the dependency
on icon size

Bug: T319449
Change-Id: I7343a3f38b720411d5ef5f3414f25f475b0bb84a
2022-11-01 16:29:43 +00:00
Nicholas Ray 97147857b2 Add vector-tab-noicon class to tabbed menus when menu items are added by gadgets
* Removes server rendered vector-tab-noicon class from legacy Vector as it is
not currently used.

* Adds menuTabs.js responsible for adding the vector-tab-noicon class when menu
items are added to tabbed menus. This is only used in vector-22.

* Adds unit test

Bug: T320691
Change-Id: Iffad86125f8754305f592ddc19d894866bd6dedc
2022-10-20 18:21:58 -06:00
Jon Robson 44ee12c717 [Visual enhancements next] Make the Echo buttons functional
This completes the changes to Echo inside the
vectorvisualenhancementnext=1 feature flag

Bug: T257143
Change-Id: I8f3904815c90ef1a10a2342c5c70363c8b9e1e47
2022-09-28 17:06:20 -05:00
Jon Robson 97cf735de2 Icons: Watchstar and wikilove are upgraded
Can be tested by appending ?vectorvisualenhancementnext=1
to URL

Bug: T310838
Bug: T234990
Bug: T234550
Depends-On: I76d0d94c9006cc5f5680849ecdd1c382c16e34ba
Depends-On: Ib7c3021db014827b4b88cac855afc0b54a360f8c
Change-Id: Ie2ffa5c3ecf270c1bb1f315937023ae7ace5ed30
2022-09-08 19:43:35 +00:00
Jon Robson 486748ac41 Enable related tabs on Vector
Depends-On: I861e8fe9c80569224548b8569452f8c57a446998
Bug: T313409
Change-Id: I871291c91dfe1f92c1131a2403695394ef3d0533
2022-08-30 14:20:11 -07:00
Jan Drewniak 936bb1d739 Append icon to links created via mw.util.addPortletLink
For modern Vector, the preferred way to place an icon
beside a link is with a dedicated <span> element instead
of a `:before` pseudo-element.

This change appends a <span> element with an icon to
links created by mw.util.addPortletLink instead of
using the `.mw-ui-icon-before` class.

Bug: T314798
Change-Id: I019470d9ca38a6bd63a690882bed03b5f1ac03c4
2022-08-16 15:50:34 -04:00
bwang e5251a1448 Ensure collapsible TOC is closed when links are clicked
Bug: T310828
Depends-on: I2783928740e6a0684476a642f812cc6647be8e3f
Change-Id: I0bab194465f89637eecb43590eb8d29b5f2fd7d2
2022-07-26 19:03:16 +00:00
Jon Robson de0729e604 [Refactor] Separate sidebar persistence code from checkbox hack code
Change-Id: I5d7d8897f656419a71b1327c37e88c9dd7f0767c
2022-06-10 13:55:22 -07:00
Volker E 7eb818543e styles: Replace deprecated Less .transform() mixin with standard CSS
Replacing Less mixin calls of `.transform()`, deprecated
since MW 1.37, with CSS property.

Bug: T308360
Change-Id: Ic965193782a447d34eac4bd19816a7b753c36d44
2022-05-16 23:24:53 +01:00
Volker E 2adab440a5 styles: Replace deprecated Less .transition() mixin with standard CSS
Replacing Less mixin calls of `.transition()`, deprecated
since MW 1.37, with CSS property, but constituent properties.
This has been an outcome of recent discussions around design tokens,
which will be simpler to define, more modular, and better scoped. See
T304443 for further information.
Also clarifying, aligning comments.

Bug: T308351
Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
2022-05-13 20:37:22 +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
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
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