Library information alter should not be context-aware

Created on 28 June 2022, almost 2 years ago
Updated 20 June 2024, 7 days ago

This is a hard one to explain.

We were having issues where a page where the dialog dependencies added by this module were needed so that the dialog rendered properly and they werent.

Locally it was working and after a lot of hours of debugging I found the library definitions were being cached on production but not locally. I figured this was because on production there was traffic and we were getting the libraries definitions wrongly cached.

Problem is that gin_toolbar_library_info_alter() is checking on _gin_toolbar_gin_is_active, so not adding the dependencies, but the definitions are indeed cached without them. When a logged in page where _gin_toolbar_gin_is_active() would actually be active and the dependencies expected to be added, they are not.

I don't think hook_info_alter() is supposed to be dynamic. That's something that changes globally once and not run again. If adding those dependencies depends on a lot of different issues, I think this needs to be done on some other hook/way.

As a workaround I will add this to my theme:

libraries-extend:
  core/drupal.dialog:
    - claro/claro.drupal.dialog
    - gin/dialog
  core/ckeditor:
    - gin/gin_ckeditor
    - gin/ckeditor
  core/drupal.ajax:
    - claro/ajax
    - gin/ajax
  media_library/widget:
    - claro/media_library.theme
    - gin/media_library
  media_library/view:
    - claro/media_library.theme
    - gin/media_library
πŸ› Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

πŸ‡¦πŸ‡·Argentina hanoii πŸ‡¦πŸ‡·UTC-3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¨πŸ‡­Switzerland saschaeggi Zurich

    Closing as no progress has been made and no further reports have been made.

    If this is still a problem feel free to reopen it.

  • Status changed to Active 9 months ago
  • πŸ‡§πŸ‡ͺBelgium andreasderijcke Antwerpen / Gent

    I made a mini module to demonstrate the issue. Find modal_test.zip attached.

    I've tested this in a clean Drupal 10.1.3 install, using 'drush site:install' + enable gin and gin_toolbar for admin theme. No other changes than adding the 'modal_test' module. Of course caching is enabled.

    After install of 'modal_test', as anonymous user, browse to page '/modal-test/page-for-modal' and click 'Open modal'. This should show:

    Next, as admin the same page and modal should show as

    Both cases are as expected, according to #3308200-7: Why do I see dialog.css in my theme? β†’ .

    Now, clear the caches and view the page and modal again as admin. This should show the same as the previous images.
    Now view again as anonymous, this should show the broken theming:

    In the browser inspector you can see gin theming is applied and missing CSS variables:

    Clear the cache, refresh the page as anonymous and see the modal again as shown in the first image.

  • πŸ‡§πŸ‡ͺBelgium andreasderijcke Antwerpen / Gent

    About solving this, removing

    if ($extension == 'core' && isset($libraries['drupal.dialog'])) {
        $libraries['drupal.dialog']['dependencies'][] = 'claro/claro.drupal.dialog';
        $libraries['drupal.dialog']['dependencies'][] = 'gin/dialog';
     }
    

    from gin_toolbar_library_info_alter() solves the problem for anonymous, proving that adding the dependencies in that hook is the problem.
    Is extending those libraries in that still required? Removing it entirely, refreshing the page as admin, the modal still shows in Gin theming.

  • πŸ‡§πŸ‡ͺBelgium andreasderijcke Antwerpen / Gent
  • Status changed to Needs review 9 months ago
  • πŸ‡§πŸ‡ͺBelgium andreasderijcke Antwerpen / Gent

    Since having the Gin dialog style bleed into the frontend theme is a design choice, as far as I can tell right now, making sure the Gin CSS variables are available in the frontend fixes the problem of the broken dialogs when the cache is 'wrong'.

    For the real problem, that the additions in gin_toolbar_library_info_alter are not context aware, I have no suggestion at this time.
    Depending on the choices made for Gin 4.x, the problem might become moot.

    So, for now, see the MR for work suggested workaround + additions in the README to point out the design choice and how to 'opt-out';

  • πŸ‡§πŸ‡ͺBelgium andreasderijcke Antwerpen / Gent

    Patch attached, corresponding with the MR at moment of writing.

  • πŸ‡¨πŸ‡¦Canada Liam Morland Ontario, CA πŸ‡¨πŸ‡¦

    Liam Morland β†’ made their first commit to this issue’s fork.

  • Pipeline finished with Success
    4 months ago
    Total: 131s
    #115014
  • πŸ‡³πŸ‡±Netherlands ricovandevin

    A combination of

    libraries-extend:
      core/drupal.dialog:
        - claro/claro.drupal.dialog
        - gin/dialog

    to force the dialog CSS to be loaded independent of how the cache was filled and the patch from #10 to force the CSS variables to be loaded provides an acceptable workaround for this issue.

    For the long term solution I'd prefer a proper opt-in or opt-out for using the Gin dialog styling for both users with and without permission to see the Gin toolbar. In my opinion the styling should always be the same in both cases for consistency. I think I have a slight preference for an opt-in as it feels bit weird that enabling a toolbar module has an effect on dialog styling. On the other hand I think the Gin toolbar styling is much prettier without any doubt. :-)

Production build 0.69.0 2024