Issue #1893072 by Pete B, nod_: Use details element on module page.

core/modules/system/css/system.admin.css

@@ -93,38 +93,45 @@ small .admin-link:after {
 #system-modules td {
   vertical-align: top;
 }
-#system-modules .expand .inner {
-  background: transparent url(../../../misc/menu-collapsed.png) left .6em no-repeat;
-  margin-left: -12px;
-  padding-left: 12px;
-}
-#system-modules .expanded .expand .inner {
-  background: transparent url(../../../misc/menu-expanded.png) left .6em no-repeat;
-}
 #system-modules label {
   color: #1d1d1d;
   font-size: 1.15em;
 }
-#system-modules .description {
-  cursor: pointer;
-}
-#system-modules .description .inner {
+#system-modules details {
   color: #5c5c5b;
-  height: 20px;
   line-height: 20px;
   overflow: hidden; /* truncates descriptions if too long */
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-#system-modules .expanded .description .inner {
+#system-modules details[open] {
   height: auto;
   overflow: visible;
   white-space: normal;
 }
-#system-modules .expanded .description .text {
+#system-modules details[open] summary .text {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
+  text-transform: none;
+}
+#system-modules td details a {
+  color: #5C5C5B;
+  border: 0px;
+}
+#system-modules td details {
+  border: 0px;
+  margin: 0px;
+  height: 20px;
+}
+#system-modules td details summary {
+  padding: 0px;
+  text-transform: none;
+  font-weight: normal;
+  cursor: default;
+}
+#system-modules td {
+  padding-left: 0px;
 }
 
 @media screen and (max-width: 40em) {

core/modules/system/system.admin.inc

@@ -508,6 +508,7 @@ function system_modules($form, $form_state = array()) {
         array('data' => t('Name'), 'class' => array('name')),
         array('data' => t('Description'), 'class' => array('description', RESPONSIVE_PRIORITY_LOW)),
       ),
+      '#attributes' => array('class' => array('package-listing')),
       // Ensure that the "Core" package comes first.
       '#weight' => $package == 'Core' ? -10 : NULL,
     );
@@ -1161,7 +1162,7 @@ function theme_system_modules_details($variables) {
     $row[] = array('class' => array('module'), 'data' => $col2);
 
     // Add the description, along with any modules it requires.
-    $description = '<span class="details"><span class="text table-filter-text-source">' . drupal_render($module['description']) . '</span></span>';
+    $description = '';
     if ($version || $requires || $required_by) {
       $description .= ' <div class="requirements">';
       if ($version) {
@@ -1184,7 +1185,14 @@ function theme_system_modules_details($variables) {
       $description .= $links;
       $description .= '</div>';
     }
-    $col4 = '<div class="inner" tabindex="0" role="button"><span class="module-description-prefix visually-hidden">Show description</span> ' . $description . '</div>';
+    $details = array(
+      '#type' => 'details',
+      '#title' => '<span class="text"> ' . drupal_render($module['description']) . '</span>',
+      '#attributes' => array('id' => $module['enable']['#id'] . '-description'),
+      '#description' => $description,
+      '#collapsed' => TRUE,
+    );
+    $col4 = drupal_render($details);
     $row[] = array('class' => array('description', 'expand'), 'data' => $col4);
 
     $rows[] = $row;

core/modules/system/system.modules.js

@@ -2,68 +2,6 @@
 
 "use strict";
 
-$.extend(Drupal.settings, {
-  hideModules: {
-    method: 'toggle',
-    duration: 0
-  }
-});
-
-/**
- * Show/hide the requirements information on modules page.
- */
-Drupal.behaviors.hideModuleInformation = {
-  attach: function (context, settings) {
-    var $table = $('#system-modules').once('expand-modules');
-    var effect = settings.hideModules;
-    if ($table.length) {
-      var $tbodies = $table.find('tbody');
-
-      // Fancy animating.
-      $tbodies.on('click keydown', '.description', function (e) {
-        if (e.keyCode && (e.keyCode !== 13 && e.keyCode !== 32)) {
-          return;
-        }
-        e.preventDefault();
-        var $tr = $(this).closest('tr');
-        var $toggleElements = $tr.find('.requirements, .links');
-
-        $toggleElements[effect.method](effect.duration)
-          .promise().done(function() {
-            $tr.toggleClass('expanded');
-          });
-
-        // Change screen reader text.
-        $tr.find('.module-description-prefix').text(function () {
-          if ($tr.hasClass('expanded')) {
-            return Drupal.t('Hide description');
-          }
-          else {
-            return Drupal.t('Show description');
-          }
-        });
-      });
-      // Makes the whole cell a click target.
-      $tbodies.on('click', 'td.checkbox', function (e) {
-        e.stopPropagation();
-        var input = $(this).find('input').get(0);
-        if (!input.readOnly && !input.disabled) {
-          input.checked = !input.checked;
-        }
-      });
-      // Catch the event on the checkbox to avoid triggering previous handler.
-      $tbodies.on('click', 'input', function (e) {
-        e.stopPropagation();
-      });
-      // Don't close the row when clicking a link in the description.
-      $tbodies.on('click', '.description a', function (e) {
-        e.stopPropagation();
-      });
-    }
-    $table.find('.requirements, .links').hide();
-  }
-};
-
 /**
  * Filters the module list table by a text input search string.
  *
@@ -112,7 +50,7 @@ Drupal.behaviors.tableFilterByText = {
     if ($table.length) {
       $rowsAndDetails = $table.find('tr, details');
       $rows = $table.find('tbody tr');
-      $details = $table.find('details');
+      $details = $rowsAndDetails.filter('.package-listing');
 
       $input.on('keyup', filterModuleList);
     }