Remove usages of .js class from core

Created on 25 January 2015, almost 10 years ago
Updated 13 June 2024, 5 months ago

Sub-issue of #2412945: Determine which additional asset libraries should be in the critical path/loaded i/t header (core/drupal, core/dropbutton) โ†’ .

The .js class:

- is not used very much - only a couple of stylesheets in core reference it and most of that usage looks vestigial
- is easily added by contrib
- triggers a layout invalidation on every page view

It's also the only reason to keep drupal.js in the header, if we decided it was necessary and were actually using it, which itself would be a performance hit.

๐Ÿ“Œ Task
Status

Needs work

Version

11.0 ๐Ÿ”ฅ

Component
Javascriptย  โ†’

Last updated 2 days ago

  • Maintained by
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom @justafish
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance @nod_
Created by

๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

Live updates comments and jobs are added and updated live.
  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

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.

  • last update about 1 year ago
    Custom Commands Failed
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia gauravvvv Delhi, India

    I have attached patch for 11.x, please review
    Also the issue reported in #16 & 14 are no longer reproducible with this patch. thanks

  • last update about 1 year ago
    30,371 pass
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia gauravvvv Delhi, India

    Fixed the build errors.

  • Status changed to Needs work about 1 year ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Think there's some BC to consider before just fully removing no?

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia yash.rode pune

    yash.rode โ†’ made their first commit to this issueโ€™s fork.

  • Merge request !8370Converted to MR โ†’ (Open) created by yash.rode
  • Pipeline finished with Failed
    5 months ago
    Total: 728s
    #196238
  • Pipeline finished with Failed
    5 months ago
    #196266
  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

    The MR is only removing usages of the class, not the class itself, so there is no bc issue with the current MR. I think we could keep this issue to remove usages and open a second issue to stop adding the class.

    I do think we need some kind of bc layer here because CSS written to use the js class will just stop working without it.

    The class is set in:

    drupal.init.js

    document.documentElement.className += ' js';

    One possibility for bc would be to add a new module to core, which does exactly this via altering a js file into the core library definition, enable that module by default in a post update, but have it uninstalled for new sites (or sites that uninstall it). We could then deprecate that module in Drupal 11 and make it obsolete in Drupal 12. Just writing that out makes me think two issues would make this easier to get done rather than trying to tackle both here.

  • Pipeline finished with Failed
    5 months ago
    Total: 172s
    #196313
  • Pipeline finished with Success
    5 months ago
    Total: 677s
    #196322
  • Status changed to Needs work 5 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Sounds like a good plan, updated issue summary

  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

    @smustgrave in #44 I was suggesting to do that plan in a new issue, not in this one because I think it'll be a bit complex to attempt both. I've opened ๐Ÿ“Œ Move the .js class logic into a new module, then deprecate it for removal in Drupal 12 Active and adjusted the issue summary.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Oh I had read it that maybe it could be included here but cool.

    So in regards to this ticket of removing, did a search for .js in css files and found more instances

  • Status changed to Needs work 5 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave
  • Assigned to Mithun S
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Mithun S Bangalore

    Currently looking into this.

  • Issue was unassigned.
  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Mithun S Bangalore

    Removed the pending .js class from the css files and added a commit. Please review.

  • Pipeline finished with Success
    5 months ago
    Total: 660s
    #197770
  • ๐Ÿ‡จ๐Ÿ‡ญSwitzerland berdir Switzerland

    I'm very confused about this change. See my MR comment, js might not be used much directly, but the js-show and js-hide classes have 10+ usages in core alone and the proposed change completely breaks the functionality of that.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    How come issue summary was removed?

  • ๐Ÿ‡ซ๐Ÿ‡ทFrance andypost
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

    .js-show and .js-hide should not be included here.

    Those are now implemented without having to execute or load any JavaScript at all:

    /**
     * Use the scripting media features for modern browsers to reduce layout shifts.
     */
    @media (scripting: enabled) {
      /* Extra specificity to override previous selector. */
      .js-hide.js-hide {
        display: none;
      }
      .js-show {
        display: block;
      }
    

    from <code>core/modules/system/css/components/js.module.css

    i.e. we have a CSS-only implementation for .js-show and .js-hide, the .js class is only added so that .js .js-hide works, which is not necessary with the media query.

    So this issue should be about removing the JavaScript implementation and the .js class, leaving the CSS-only implementation intact.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Hiding patches for clarity.

    I'm not seeing the removal of js-hide or js-show in the MR?

  • Status changed to Needs work 5 months ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

    @smustgrave it's https://git.drupalcode.org/project/drupal/-/merge_requests/8370/diffs#e8... as pointed out by @berdir in the MR

    That is the thing that makes .js-hide work on browsers that don't support @media (scripting: enabled), which used to be all of them when it was added, but is not necessary now (except there are a couple of 'unknowns' on https://caniuse.com/?search=media%20scripting%3A)

    This file should have been the only ever usage of the class in core or anywhere else, because the whole point of it is to make .js-hide and .js-show work, not for styling things independently of those, but it's clear that usages have crept in over time.

    That CSS would need to be handled in ๐Ÿ“Œ Move the .js class logic into a new module, then deprecate it for removal in Drupal 12 Active but should be left here.

Production build 0.71.5 2024