Group fields into fieldsets

This groups translation fields into fieldsets based on their
'data-parent' attribute, and adds some styling to the fieldsets
to make them visually distinct. It also fixes an error with the
top of the first field not lining up with the top of the
image display box.

Bug: T214452

assets/translate.less

@@ -61,6 +61,11 @@ body.translate {
         .language-selectors {
           display: flex;
           align-items: center;
+          > * {
+            // Get rid of the margin from the following three elements, so the .language-selectors can be treated the
+            // same as the .buttons element (for vertical positioning).
+            margin-bottom: 0;
+          }
           .source-lang-widget {
             flex: 2;
             text-align: left;
@@ -80,7 +85,12 @@ body.translate {
         }
 
         .oo-ui-fieldLayout {
-          margin-bottom: 1.5rem;
+          margin-bottom: 0.75rem;
+        }
+        fieldset:not(:first-child) {
+          margin-top: 0;
+          padding-top: 0.75rem;
+          border-top: 1px solid @wmui-color-base80;
         }
         .source-lang-not-found label {
           font-style: italic;

public/assets/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "app": {
       "css": [
-        "assets/app.cdb1250c.css"
+        "assets/app.1709d2c7.css"
       ],
       "js": [
         "assets/app.10e4979a.js"

public/assets/manifest.json

@@ -1,5 +1,5 @@
 {
-  "assets/app.css": "assets/app.cdb1250c.css",
+  "assets/app.css": "assets/app.1709d2c7.css",
   "assets/app.js": "assets/app.10e4979a.js",
   "assets/grabbing.cur": "assets/a8c874b93b3d848f39a71260c57e3863.cur",
   "assets/grab.cur": "assets/b06c243f534d9c5461d16528156cd5a8.cur",

src/Controller/TranslateController.php

@@ -11,6 +11,7 @@
 use OOUI\ButtonInputWidget;
 use OOUI\DropdownInputWidget;
 use OOUI\FieldLayout;
+use OOUI\FieldsetLayout;
 use OOUI\HorizontalLayout;
 use OOUI\LabelWidget;
 use OOUI\TextInputWidget;
@@ -126,7 +127,9 @@ public function translate(
 
         // Messages.
         $translations = $svgFile->getInFileTranslations();
-        $formFields = [];
+        $currentFieldset = new FieldsetLayout();
+        $fieldsets = [$currentFieldset];
+        $prevTranslation = null;
         foreach ($translations as $tspanId => $translation) {
             // Do not display translations that are only white-space. https://stackoverflow.com/a/4167053/99667
             // @TODO SvgFile should probably be handling this for us.
@@ -151,14 +154,22 @@ public function translate(
                     'infusable' => true,
                 ]
             );
-            $formFields[] = $field;
+
+            // Start a new fieldset if the current translation's parent is different to the previous's.
+            if ($prevTranslation
+                && $prevTranslation['fallback']['data-parent'] !== $translation['fallback']['data-parent']) {
+                $currentFieldset = new FieldsetLayout();
+                $fieldsets[] = $currentFieldset;
+            }
+            $currentFieldset->addItems([$field]);
+            $prevTranslation = $translation;
         }
 
         return $this->render('translate.html.twig', [
             'page_class' => 'translate',
             'title' => Title::text($filename),
             'filename' => $normalizedFilename,
-            'fields' => $formFields,
+            'fieldsets' => $fieldsets,
             'download_button' => $downloadButton,
             'upload_button' => $uploadButton,
             'language_selectors' => $languageSelectorsLayout,

templates/translate.html.twig

@@ -32,8 +32,8 @@
         <div class="form-column">
             {{ language_selectors|raw }}
             <div class="translation-fields">
-                {% for field in fields %}
-                    {{ field|raw }}
+                {% for fieldset in fieldsets %}
+                    {{ fieldset|raw }}
                 {% endfor %}
             </div>
         </div>