Render the date picker icon the way Contao does

The template assembled the tag by hand, with the size fixed at 20 pixels and an
inline "vertical-align:-6px" tuned to it. Anything that resizes the icon put it
out of line, and an inline style is beyond the reach of a stylesheet.

Going through the image event instead brings along what was missing: the size
comes from the file, a dark companion is looked for, the tooltip finds its
target, the icon carries a label, and the pointer says it can be clicked.

Author: zonky2

src/Contao/View/Contao2BackendView/ContaoWidgetManager.php

@@ -49,6 +49,8 @@
 use ContaoCommunityAlliance\DcGeneral\Exception\DcGeneralRuntimeException;
 use ContaoCommunityAlliance\DcGeneral\InputProviderInterface;
 use ContaoCommunityAlliance\DcGeneral\SessionStorageInterface;
+use ContaoCommunityAlliance\Contao\Bindings\ContaoEvents;
+use ContaoCommunityAlliance\Contao\Bindings\Events\Image\GenerateHtmlEvent;
 use Symfony\Component\EventDispatcher\EventDispatcherInterface;
 use Symfony\Contracts\Translation\TranslatorInterface;
 
@@ -549,6 +551,7 @@ public function renderWidget($property, $ignoreErrors = false, ?PropertyValueBag
             ->set('widget', $isHideInput ? null : $widget->parse())
             ->set('hasErrors', $isHideInput ? null : $widget->hasErrors())
             ->set('strDatepicker', $isHideInput ? null : $this->getDatePicker($propInfo->getExtra(), $widget))
+            ->set('datepickerIcon', $this->renderDatePickerIcon($widget->id))
             // We used the var blnUpdate before.
             ->set('blnUpdate', false)
             ->set('strHelp', $isHideInput ? '' : $this->generateHelpText($property, $widget))
@@ -753,4 +756,30 @@ protected function getDatePicker(array $propExtra, Widget $widget)
 
         return '';
     }
+
+    /**
+     * Render the icon that opens the date picker.
+     *
+     * Through the image event rather than assembled by hand: only there does Contao get to look
+     * for a "--dark" companion and take the size from the file, and only there does the tooltip
+     * find its target. Contao core renders the very same icon this way.
+     *
+     * @param string $widgetId The id of the widget the picker belongs to.
+     *
+     * @return string
+     */
+    private function renderDatePickerIcon(string $widgetId): string
+    {
+        $dispatcher = $this->getEnvironment()->getEventDispatcher();
+        assert($dispatcher instanceof EventDispatcherInterface);
+
+        $event = new GenerateHtmlEvent(
+            'assets/datepicker/images/icon.svg',
+            $this->translator->trans('MSC.datepicker', [], 'contao_default'),
+            'id="toggle_' . $widgetId . '" style="cursor:pointer" data-contao--tooltips-target="tooltip"'
+        );
+        $dispatcher->dispatch($event, ContaoEvents::IMAGE_GET_HTML);
+
+        return $event->getHtml() ?? '';
+    }
 }

src/Resources/contao/templates/dcbe_general_field.html5

@@ -16,7 +16,7 @@ assert($translator instanceof \Symfony\Contracts\Translation\TranslatorInterface
   <?php else: ?>
       <?= $this->widget ?>
       <?php if($this->strDatepicker): ?>
-        <img src="/assets/datepicker/images/icon.svg" width="20" height="20" id="toggle_<?= $this->strId ?>" style="vertical-align:-6px;">
+        <?= $this->datepickerIcon ?>
         <?php /* Run inline like Contao core does - the input exists at this point and a ready-event would not fire again on Turbo navigations. */ ?>
         <script><?= $this->strDatepicker; ?></script>
       <?php endif; ?>