[TASK] Show content as accordions in element information modal

The element information modal displays both field information for the
current record and its references.
The more fields there are in a table and the more content the specific
record contains, the more the reference sections disappear from view.

The three sections are now displayed as accordions to enable the user
to decide for themselves which sections are relevant to them.
In addition, the display of non-existent records in the reference
sections has been adjusted and information about the paths/storage
locations has been removed, as these can already be viewed in the
record's editing mask.

Resolves: #102469
Releases: main
Change-Id: Ia4ba85921d7be2ab30477e8248d4fb8734f6eaaf
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81873
Tested-by: Garvin Hicking <gh@faktor-e.de>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Reviewed-by: Stefan Bürk <stefan@buerk.tech>
Reviewed-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Tested-by: Stefan Bürk <stefan@buerk.tech>
Reviewed-by: Garvin Hicking <gh@faktor-e.de>

Build/Sources/Sass/component/_table.scss

@@ -101,6 +101,15 @@
         width: 15ch;
     }
 
+    .col-fieldname {
+        min-width: 200px;
+        width: 200px;
+
+        @include media-breakpoint-up('md') {
+            width: 250px;
+        }
+    }
+
     .col-recordtitle {
         width: 250px;
     }

Build/Sources/TypeScript/backend/element-information.ts

@@ -0,0 +1,59 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+import Icons from '@typo3/backend/icons';
+
+/**
+ * Module: @typo3/backend/element-information
+ * @exports @typo3/backend/element-information
+ */
+class ElementInformation {
+  constructor() {
+    DocumentService.ready().then((): void => {
+      document.querySelectorAll('div[data-persist-collapse-state]').forEach((element: HTMLElement): void => {
+        const isCollapsed: boolean = !element.classList.contains('show');
+        const collapseTrigger: HTMLElement = document.querySelector('.t3js-toggle-table[data-bs-target="#' + element.id + '"]');
+        if (collapseTrigger !== null) {
+          collapseTrigger.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
+          collapseTrigger.classList.toggle('collapsed', isCollapsed);
+          const collapseIcon: HTMLElement = collapseTrigger.querySelector('.t3js-icon');
+          if (collapseIcon !== null) {
+            this.replaceIcon(isCollapsed, collapseIcon)
+          }
+        }
+      })
+
+      new RegularEvent('show.bs.collapse', this.toggleCollapseIcon.bind(this)).bindTo(document);
+      new RegularEvent('hide.bs.collapse', this.toggleCollapseIcon.bind(this)).bindTo(document);
+    });
+  }
+
+  private toggleCollapseIcon(e: Event): void {
+    const collapseIcon: HTMLElement = document.querySelector('.t3js-toggle-table[data-bs-target="#' + (e.target as HTMLElement).id + '"] .t3js-icon');
+    if (collapseIcon !== null) {
+      this.replaceIcon(e.type === 'hide.bs.collapse', collapseIcon)
+    }
+  }
+
+  private replaceIcon(isCollapsed: boolean, collapseIcon: HTMLElement): void {
+    Icons
+      .getIcon((isCollapsed ? 'actions-view-list-expand' : 'actions-view-list-collapse'), Icons.sizes.small)
+      .then((icon: string): void => {
+        collapseIcon.replaceWith(document.createRange().createContextualFragment(icon));
+      });
+  }
+}
+
+export default new ElementInformation();

typo3/sysext/backend/Resources/Public/Css/backend.css

@@ -3469,6 +3469,10 @@ typo3-backend-form-selecttree-toolbar{display:block;border-bottom:1px solid rgba
 .table .col-datetime{width:14ch;white-space:nowrap;box-sizing:content-box}
 .table .col-avatar{width:32px;box-sizing:content-box}
 .table .col-action,.table .col-username{width:15ch}
+.table .col-fieldname{min-width:200px;width:200px}
+@media (min-width:768px){
+.table .col-fieldname{width:250px}
+}
 .table .col-recordtitle{width:250px}
 .table .col-action,.table .col-recordtitle,.table .col-state{min-width:120px}
 .table .col-differences,.table .col-task{min-width:400px}

typo3/sysext/core/Resources/Private/Language/locallang_core.xlf

@@ -571,6 +571,15 @@ Do you want to continue WITHOUT saving?</source>
 			<trans-unit id="show_item.php.viewItem" resname="show_item.php.viewItem">
 				<source>View Item</source>
 			</trans-unit>
+			<trans-unit id="show_item.php.fieldValues" resname="show_item.php.fieldValues">
+				<source>Field values</source>
+			</trans-unit>
+			<trans-unit id="show_item.php.general" resname="show_item.php.general">
+				<source>General</source>
+			</trans-unit>
+			<trans-unit id="show_item.php.references" resname="show_item.php.references">
+				<source>References</source>
+			</trans-unit>
 			<trans-unit id="show_item.php.referencesToThisItem" resname="show_item.php.referencesToThisItem">
 				<source>References to this item</source>
 			</trans-unit>
@@ -629,7 +638,7 @@ Do you want to continue WITHOUT saving?</source>
 				<source>FTP AREA</source>
 			</trans-unit>
 			<trans-unit id="show_item.php.missing_record" resname="show_item.php.missing_record">
-				<source>Missing</source>
+				<source>Record is missing!</source>
 			</trans-unit>
 			<trans-unit id="db_new.php.pagetitle" resname="db_new.php.pagetitle">
 				<source>New record</source>

typo3/sysext/core/Resources/Private/Language/locallang_mod_web_list.xlf

@@ -40,7 +40,7 @@
 				<source>Are you sure you want to delete all marked records from the table '%s'?</source>
 			</trans-unit>
 			<trans-unit id="showInfo" resname="showInfo">
-				<source>Display information</source>
+				<source>Info</source>
 			</trans-unit>
 			<trans-unit id="edit" resname="edit">
 				<source>Edit record</source>