Problem/Motivation

Currently, the hover intent behavior is only configurable per site. For a team having multiple people that use the admin toolbar menu, this requires that all members of the team agree on how long the hover delay needs to be. While it does make sense to set the site default on a site wide basis as was implemented by #3440852: Make un-hover delay configurable, it would be more accessible if each individual user could set their preference. That way, a user who likes a fast response can set a low time such as 250 ms, while somebody else on the same team whose hand is less steady or tends to pause their mouse movement without intent can set a long time such as 2000 ms.

Steps to reproduce

1. Go to simplytest.me
2. Create a site using Drupal 11.x-dev and admin_toolbar 3.x-dev
3. Go to /admin/config/user-interface/admin-toolbar

Desired result: An admin can turn on the hover intent feature and set a default time delay which applies to the site unless overridden by a particular user.

Current result: An admin can turn on the hover intent feature and set a default time delay which applies to the site.

4. Go to /user/1/edit

Desired result: The user can set their preferred time delay for the hover intent feature.

Optional additional desired result: The user can set whether or not they want the hover intent feature at all.

Current result: There is no way for the user to set their preferred time delay for the hover intent feature. They have to use the time setting that applies to the entire website.

Proposed resolution

For users that have permission to use the admin tool bar, display a setting on their user page for the hover intent time delay. The value defaults to the website setting but can be overridden by the individual user.

Optionally, also provide a setting as to whether they want the hover intent delay at all, or add a value of zero ms as an option.

Remaining tasks

User interface changes

Same as proposed resolution.

API changes

Data model changes

Issue fork admin_toolbar-3564807

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

charles belov created an issue. See original summary.

dydave’s picture

dydave commented

Thanks a lot Charles (@charles belov), once again, for suggesting this very interesting feature.

After doing a quick search in the module, I found the following piece of code:
https://git.drupalcode.org/project/admin_toolbar/-/blob/3.6.2/admin_tool...

    // Add the configured hoverIntent settings values to the JS of the toolbar.
    $items['administration']['#attached']['drupalSettings']['hoverIntentTimeout'] = $hoverintent_behavior['timeout'];

In other words, the hover delay is currently injected in the Javascript of the page through a 'drupalSettings' variable, which is set in the PHP code (module's file).

After doing a quick search on how this JS variable could be overridden, I found:

 
Which means:
By implementing hook_js_settings_alter in a custom module, it should be possible to override the value of the hover delay (hoverIntentTimeout).
The delay value could then be configured in a custom field in user's account at /admin/config/people/accounts/fields, which would be saved in the database and attached to user's information, perhaps as "Preferences".
The value could then be injected in the page with a small piece of PHP code (hook_js_settings_alter), reading the value from current user's account, defaulting to the one defined in the module's configuration.

Overall, this solution would probably require 10 to 20 lines of code in a custom module + some site building/configuration to add the field in user accounts.
Any permissions could be controlled through the core field system and outside of module's scope.

With this type of implementation, it could perhaps be contributed and built as a recipe?! 🤔
@TODO: Recipes should most likely be further investigated for something like this:
Documentation for Drupal Recipes

Or this could simply be implemented as a custom module with an implementation of the hook and a config/install folder with config files to add/create the hover delay field in user accounts, when the module is installed. 🤔
Or added with some code, unremovable, etc...
I'm sure there could be many possible solutions (see for example modules profile, commerce, metatag, etc...).
 

I think you would understand the costs of adding a new feature to the module, in terms of tests, maintenance, documentation, support, etc...
Therefore, if a particular feature could already be achieved with a different module, component, API or approach in general, we would rather tend to recommend using the existing tools at our disposal, instead of directly considering making code changes to the module.
 

Could you please take a look at the recommended potential solution and let us know if it could be going in the right direction?
(Fulfilling the requirements)

Feel free to let us know if you have any questions or concerns on any aspects of this reply, this issue, or the project in general, we would certainly be glad to help.
Thanks in advance!

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

Sorry for the delayed response; I was out of office.

I am in Quality Assurance, not Development, thus unable to comment on this as it is beyond my knowledge of Drupal or the contribution environment.

dydave opened merge request !199

dydave’s picture

dydave commented
Status: Active » Needs review

OK Charles (@charles belov), no problem 👌

I've given a go with an AI engine which generated 90% of the feature in a new module, leaving only the review, testing, debugging and final touches.
Overall, it greatly helped speeding up the development of the changes in merge request !199 👍

I've pushed an implementation suggested above with basically two hooks in a module file:
https://git.drupalcode.org/project/admin_toolbar/-/blob/18758a4273873152...

Since this is all very experimental, the feature was added as an extra module for now, which would need to be enabled as detailed here:
https://git.drupalcode.org/project/admin_toolbar/-/blob/18758a4273873152...

Through the backend admin 'Extend' page (admin/modules), should work just fine.

Once the module admin_toolbar_hoverintent_timeout_per_user is enabled, you should be able to start using the feature:
1 - Browse to Edit your user account and a new field should be visible in the form: Admin Toolbar Hover Intent Timeout.
2 - Browse to Edit any user account and a new field should be visible in the form: Admin Toolbar Hover Intent Timeout.

The feature implemented in this new module should cover all the initial requirements from the issue summary.

We would greatly appreciate if you could please try testing the changes from MR !199 and let us know if everything works as expected.
Thus, moving issue to Needs review, as an attempt to get more testing feedback, comments and reviews.

We'll see if this feature gets a bit more attention or traction and potentially consider whether it should be integrated to project's code base or should sit somewhere else (in its own project repo, for example).

Feel free to let us know if you encounter any issues while testing or would have any questions, we would surely be glad to help.
Thanks in advance!

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

Sorry for the delay; I was out of office. Thank you very much for the patch; it works for me. I would not have a problem with leaving it as a sub-module that had to be activated as a separate step. My only comments would be to change the wording of:

Custom hover intent timeout in milliseconds for the admin toolbar. Leave empty to use the global setting.

to

Custom hover-intent timeout in milliseconds for the admin toolbar. Leave as "None" to use the website setting.

and:

Admin Toolbar Hover Intent Timeout

to

Admin Toolbar Hover-Intent Timeout

I tested as follows on simplytest.me:

Steps:
1. Log in as admin
2. Go to /admin/modules
3. Filter on Toolbar
4. Check Admin Toolbar Hover Intent Timeout Per User
5. Click Install
6. Add two users test and test2 as Content Editors
7. Go to /admin/config/user-interface/admin-toolbar
8. Set hoverIntent timeout (ms) to 750ms
9. Click Save configuration
10. In a private window, log in as test
11. Set hoverIntent timeout (ms) to 2000ms
12. Click Save
13. Interact with the menu

Expected and actual results: Moving the pointer off the menu leaves the menu open for about two seconds

14. In another browser, log in as test
15. Interact with the menu

Expected and actual results: Moving the pointer off the menu leaves the menu open for about 3/4 second

charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

Actually, thinking about it, if "None" causes use of the global setting, what if someone actually wants 0ms?

Would the correct list for a user actually be:

  • None
  • 0ms
  • 250ms
  • 500ms
  • 750ms
  • 1000ms
  • 1250ms
  • 1500ms
  • 1750ms
  • 2000ms
dydave’s picture

dydave commented

OK Charles (@charles belov), no worries at all 👌
Thanks again for the great and positive feedback!

Just a quick reply to let you know the suggested changes have been made, including adding '0 ms' to the list of values.

Please let us know if you see anything else, we would surely be glad to make the suggested changes.
Thanks in advance ! 😊