Issue #2449445 by Cottser, emma.maria: Add "indentation" class back to...

Issue #2449445 by Cottser, emma.maria: Add "indentation" class back to indentation theme hook, use it for styling

core/includes/theme.inc

@@ -1088,7 +1088,7 @@ function template_preprocess_feed_icon(&$variables) {
 function theme_indentation($variables) {
   $output = '';
   for ($n = 0; $n < $variables['size']; $n++) {
-    $output .= '<div class="js-indentation">&nbsp;</div>';
+    $output .= '<div class="js-indentation indentation">&nbsp;</div>';
   }
   return $output;
 }

core/misc/tabledrag.js

@@ -1274,7 +1274,7 @@
       return '<abbr class="warning tabledrag-changed" title="' + Drupal.t('Changed') + '">*</abbr>';
     },
     tableDragIndentation: function () {
-      return '<div class="js-indentation">&nbsp;</div>';
+      return '<div class="js-indentation indentation">&nbsp;</div>';
     },
     tableDragChangedWarning: function () {
       return '<div class="tabledrag-changed-warning messages messages--warning" role="alert">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t('You have unsaved changes.') + '</div>';

core/modules/system/css/system.module.css

@@ -134,14 +134,14 @@ a.tabledrag-handle:focus .handle {
 .touch .draggable.drag a.tabledrag-handle .handle {
   background-position: 50% -32px;
 }
-div.js-indentation {
+.indentation {
   float: left; /* LTR */
   height: 1.7em;
   margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
   padding: 0.42em 0 0.42em 0.6em; /* LTR */
   width: 20px;
 }
-[dir="rtl"] div.js-indentation {
+[dir="rtl"] .indentation {
   float: right;
   margin: -0.4em -0.4em -0.4em 0.2em;
   padding: 0.42em 0.6em 0.42em 0;

core/modules/system/templates/indentation.html.twig

@@ -17,4 +17,4 @@ See https://api.drupal.org/api/function/theme_indentation/8 for details.
 After copying this file to your theme's folder and customizing it, remove this
 HTML comment.
 -->
-{% for i in 1..size if size > 0 %}<div class="indentation">&nbsp;</div>{% endfor %}
+{% for i in 1..size if size > 0 %}<div class="js-indentation indentation">&nbsp;</div>{% endfor %}

core/modules/taxonomy/src/Tests/TaxonomyTermIndentationTest.php

@@ -53,7 +53,7 @@ function testTermIndentation() {
 
     // Submit the edited form and check for HTML indentation element presence.
     $this->drupalPostForm('admin/structure/taxonomy/manage/' . $this->vocabulary->get('vid') . '/overview', $edit, t('Save'));
-    $this->assertPattern('|<div class="js-indentation">&nbsp;</div>|');
+    $this->assertPattern('|<div class="js-indentation indentation">&nbsp;</div>|');
 
     // Check explicitly that term 2's parent is term 1.
     $parents = taxonomy_term_load_parents($term2->id());
@@ -69,7 +69,7 @@ function testTermIndentation() {
 
     $this->drupalPostForm('admin/structure/taxonomy/manage/' . $this->vocabulary->get('vid' ) . '/overview', $edit, t('Save'));
     // All terms back at the root level, no indentation should be present.
-    $this->assertNoPattern('|<div class="js-indentation">&nbsp;</div>|');
+    $this->assertNoPattern('|<div class="js-indentation indentation">&nbsp;</div>|');
 
     // Check explicitly that term 2 has no parents.
     \Drupal::entityManager()->getStorage('taxonomy_term')->resetCache();