feature #49012 [WebProfilerBundle] Display date/time elements in the …

…user local timezone (javiereguiluz)

This PR was squashed before being merged into the 6.3 branch.

Discussion
----------

[WebProfilerBundle] Display date/time elements in the user local timezone

| Q             | A
| ------------- | ---
| Branch?       | 6.3
| Bug fix?      | no
| New feature?  | yes
| Deprecations? | no
| Tickets       | -
| License       | MIT
| Doc PR        | -

On Symfony Slack, `@tarlepp` suggested to render all `<time>` elements in the user local timezone. I think it's a great idea, so this PR implements it.

**A question remains**: should we display date/times in the user timezone AND locale; or on their timezone BUT always in English, like the rest of the interface?

Some examples:

### Main profile datetime

(I'm seeing it in Spanish; each developer will see it on their own language)

<img width="708" alt="profiler-profile-datetime" src="https://user-images.githubusercontent.com/73419/212952339-0519ad06-d210-4959-8f44-4b99f25ce7a9.png">

### Search results datetime

<img width="1109" alt="profiler-search-results-datetime" src="https://user-images.githubusercontent.com/73419/212952428-6d0d8ff7-b28d-4c8e-95b0-6a629290f3bb.png">

### Logger timestamps

<img width="309" alt="profiler-logs-datetime" src="https://user-images.githubusercontent.com/73419/212952471-dcf3754e-aaca-42e8-8a15-3d9f9ab846ed.png">

Commits
-------

206c5f0 [WebProfilerBundle] Display date/time elements in the user local timezone

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig

@@ -138,7 +138,7 @@
                     %}
                     <tr class="log-status-{{ css_class }}" data-type="{{ log.type }}" data-priority="{{ log.priority }}" data-channel="{{ log.channel }}" style="{{ 'event' == log.channel or 'DEBUG' == log.priorityName ? 'display: none' }}">
                         <td class="log-timestamp">
-                            <time title="{{ log.timestamp|date('r') }}" datetime="{{ log.timestamp|date('c') }}">
+                            <time class="newline" title="{{ log.timestamp|date('r') }}" datetime="{{ log.timestamp|date(constant('\DateTime::RFC3339_EXTENDED')) }}" data-convert-to-user-timezone data-render-as-time data-render-with-millisecond-precision>
                                 {{ log.timestamp|date('H:i:s.v') }}
                             </time>
 

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

@@ -910,12 +910,49 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                 document.querySelector('#log-filter-priority .filter-active-num').innerText = (priorities.length === selectedPriorities.length) ? 'All' : selectedPriorities.length;
                 document.querySelector('#log-filter-channel .filter-active-num').innerText = (channels.length === selectedChannels.length) ? 'All' : selectedChannels.length;
             },
+
+            convertDateTimesToUserTimezone: function() {
+                const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+                document.querySelectorAll('time[data-convert-to-user-timezone]').forEach((timeElement) => {
+                    const iso8601Datetime = timeElement.getAttribute('datetime');
+                    const dateInUserTimezone = new Date(iso8601Datetime);
+
+                    let options = {};
+                    if (timeElement.hasAttribute('data-render-as-datetime')) {
+                        options = {
+                            year: 'numeric', month: 'long', day: 'numeric',
+                            hour: 'numeric', minute: 'numeric', second: 'numeric'
+                        };
+                    } else if (timeElement.hasAttribute('data-render-as-date')) {
+                        options = { year: 'numeric', month: 'long', day: 'numeric' };
+                    } else if (timeElement.hasAttribute('data-render-as-time')) {
+                        options = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
+                    }
+
+                    if (timeElement.hasAttribute('data-render-with-millisecond-precision')) {
+                        options.fractionalSecondDigits = 3;
+                    }
+
+                    /* dates/times are always rendered in English to match the rest of the Profiler interface */
+                    timeElement.textContent = dateInUserTimezone.toLocaleString('en', options);
+
+                    if (undefined !== userTimezoneName) {
+                        const existingTitle = timeElement.getAttribute('title');
+                        const newTitle = null === existingTitle
+                            ? `Date/times shown in your timezone: ${userTimezoneName}`
+                            : existingTitle + ` (date/times shown in your timezone: ${userTimezoneName})`;
+                        timeElement.setAttribute('title', newTitle);
+                    }
+                });
+            },
         };
     })();
 
     Sfjs.addEventListener(document, 'DOMContentLoaded', function() {
         Sfjs.createTabs();
         Sfjs.createToggles();
+        Sfjs.convertDateTimesToUserTimezone();
     });
 }
 /*]]>*/</script>

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig

@@ -79,7 +79,7 @@
                         </dd>
 
                         <dt>Profiled on</dt>
-                        <dd><time datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
+                        <dd><time data-convert-to-user-timezone data-render-as-datetime datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
 
                         <dt>Token</dt>
                         <dd>{{ profile.token }}</dd>

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

@@ -466,6 +466,11 @@ input[type="radio"], input[type="checkbox"] {
     box-shadow: none;
 }
 
+time[data-render-as-date],
+time[data-render-as-time] {
+    white-space: nowrap;
+}
+
 /* Used to hide elements added for accessibility reasons (the !important modifier is needed here) */
 .visually-hidden {
     border: 0 !important;

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/results.html.twig

@@ -49,8 +49,12 @@
                             {{ _self.profile_search_filter(request, result, 'url') }}
                         </td>
                         <td class="text-small">
-                            <span class="nowrap">{{ result.time|date('d-M-Y') }}</span>
-                            <span class="nowrap newline">{{ result.time|date('H:i:s') }}</span>
+                            <time data-convert-to-user-timezone data-render-as-date datetime="{{ result.time|date('c') }}">
+                                {{ result.time|date('d-M-Y') }}
+                            </time>
+                            <time class="newline" data-convert-to-user-timezone data-render-as-time datetime="{{ result.time|date('c') }}">
+                                {{ result.time|date('H:i:s') }}
+                            </time>
                         </td>
                         <td class="nowrap"><a href="{{ path('_profiler', { token: result.token }) }}">{{ result.token }}</a></td>
                     </tr>