8000 feature #49012 [WebProfilerBundle] Display date/time elements in the … · symfony/symfony@adbfcfa · GitHub
[go: up one dir, main page]
Skip to content

Commit adbfcfa

Browse files
fabpotfabpot
committed
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
2 parents bcfa507 + 206c5f0 commit adbfcfa

File tree

5 files changed

+50
-4
lines changed

5 files changed

+50
-4
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138
%}
139139
<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' }}">
140140
<td class="log-timestamp">
141-
<time title="{{ log.timestamp|date('r') }}" datetime="{{ log.timestamp|date('c') }}">
141+
<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>
142142
{{ log.timestamp|date('H:i:s.v') }}
143143
</time>
144144

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -910,12 +910,49 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
910910
document.querySelector('#log-filter-priority .filter-active-num').innerText = (priorities.length === selectedPriorities.length) ? 'All' : selectedPriorities.length;
911911
document.querySelector('#log-filter-channel .filter-active-num').innerText = (channels.length === selectedChannels.length) ? 'All' : selectedChannels.length;
912912
},
913+
914+
convertDateTimesToUserTimezone: function() {
915+
const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
916+
917+
document.querySelectorAll('time[data-convert-to-user-timezone]').forEach((timeElement) => {
918+
const iso8601Datetime = timeElement.getAttribute('datetime');
919+
const dateInUserTimezone = new Date(iso8601Datetime);
920+
921+
let options = {};
922+
if (timeElement.hasAttribute('data-render-as-datetime')) {
923+
options = {
924+
year: 'numeric', month: 'long', day: 'numeric',
925+
hour: 'numeric', minute: 'numeric', second: 'numeric'
926+
};
927+
} else if (timeElement.hasAttribute('data-render-as-date')) {
928+
options = { year: 'numeric', month: 'long', day: 'numeric' };
929+
} else if (timeElement.hasAttribute('data-render-as-time')) {
930+
options = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
931+
}
932+
933+
if (timeElement.hasAttribute('data-render-with-millisecond- 8000 precision')) {
934+
options.fractionalSecondDigits = 3;
935+
}
936+
937+
/* dates/times are always rendered in English to match the rest of the Profiler interface */
938+
timeElement.textContent = dateInUserTimezone.toLocaleString('en', options);
939+
940+
if (undefined !== userTimezoneName) {
941+
const existingTitle = timeElement.getAttribute('title');
942+
const newTitle = null === existingTitle
943+
? `Date/times shown in your timezone: ${userTimezoneName}`
944+
: existingTitle + ` (date/times shown in your timezone: ${userTimezoneName})`;
945+
timeElement.setAttribute('title', newTitle);
946+
}
947+
});
948+
},
913949
};
914950
})();
915951
916952
Sfjs.addEventListener(document, 'DOMContentLoaded', function() {
917953
Sfjs.createTabs();
918954
Sfjs.createToggles();
955+
Sfjs.convertDateTimesToUserTimezone();
919956
});
920957
}
921958
/*]]>*/</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
</dd>
8080

8181
<dt>Profiled on</dt>
82-
<dd><time datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
82+
<dd><time data-convert-to-user-timezone data-render-as-datetime datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
8383

8484
<dt>Token</dt>
8585
<dd>{{ profile.token }}</dd>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -466,6 +466,11 @@ input[type="radio"], input[type="checkbox"] {
466466
box-shadow: none;
467467
}
468468

469+
time[data-render-as-date],
470+
time[data-render-as-time] {
471+
white-space: nowrap;
472+
}
473+
469474
/* Used to hide elements added for accessibility reasons (the !important modifier is needed here) */
470475
.visually-hidden {
471476
border: 0 !important;

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,12 @@
4949
{{ _self.profile_search_filter(request, result, 'url') }}
5050
</td>
5151
<td class="text-small">
52-
<span class="nowrap">{{ result.time|date('d-M-Y') }}</span>
53-
<span class="nowrap newline">{{ result.time|date('H:i:s') }}</span>
52+
<time data-convert-to-user-timezone data-render-as-date datetime="{{ result.time|date('c') }}">
53+
{{ result.time|date('d-M-Y') }}
54+
</time>
55+
<time class="newline" data-convert-to-user-timezone data-render-as-time datetime="{{ result.time|date('c') }}">
56+
{{ result.time|date('H:i:s') }}
57+
</time>
5458
</td>
5559
<td class="nowrap"><a href="{{ path('_profiler', { token: result.token }) }}">{{ result.token }}</a></td>
5660
</tr>

0 commit comments

Comments
 (0)
0