Allow TimestampFormatter to show as a fully cacheable time difference with JS

Created on 8 November 2017, about 7 years ago
Updated 9 November 2023, about 1 year ago

Problem/Motivation

As it turned out in #2500525: Time ago/hence date/time formatting breaks caching; needs appropriate max age and #2686409: Time Ago summary does not render on Manage Display for Timestamp and Datetime fields the TimestampAgoFormatter formatter outputs a string that is very hard to cache. A time difference interval string changes very often making it uncacheable and then the whole page become uncacheable. The big problem here is that we return a string from the server that is refreshes very often. Using a max-age strategy works but it has the drawback of being very bad for the user experience.

Proposed resolution

  1. Use the default TimestampFormatter formatter to show also a time difference formatted dates EDIT: The deprecation is discussed in 📌 Consider deprecating TimestampAgoFormatter Active .
  2. Add a new "Display as a time difference" option (as checkbox) in TimestampFormatter settings. When this setting is On, a Javascript snippet replaces the current output of the formatter, which is a human readable formatted date/time, with a Display as a time difference string expression. Also the "Display as a time difference" settings will be visible and configurable.
  3. The time difference replacement is formatted using a jQuery snippet that converts the actual PHP time difference functionality.

Pros of this solution:

  • Assures a dynamic time difference that can be refreshed by JS with an interval that should be configured in the formatter.
  • Is cacheable.
  • Degrades nice to a normal formatted date/time for non-JS browsers.

Additional improvements:

  • Use the <time ...> HTML5 element.
  • Add a title (tooltip) to <time ...> so that while displaying a time difference string, the user still can see the exact time by hovering with the mouse. The format of the tooltip should be configurable apart from the main date format because we may want a more detailed format than the main one.
  • Allow configuration of time difference string pattern as the actual TimeAgoFormatter does.

Remaining tasks

User interface changes

  • For site builders: New options in TimestampFormatter settings.
  • For users: "Time difference" dates will be up-to-date (no cached) and will refresh in the client browser on a specific interval.

API changes

EDIT: Moved to 📌 Consider deprecating TimestampAgoFormatter Active .

Data model changes

New settings for TimestampFormatter formatter.

Manual testing

  • Create a Timestamp field
  • The formatter is set to "Default". Edit the formatter settings
  • Check the "Display as time difference"
  • Configure
  • Set the refresh interval to a lower value so that you can observe later, in node view, how the field is refreshing
  • Save the formatter settings.
  • Check the formatter settings summary.
  • Create a new node and save.
  • See that the field correctly shows the field value as time difference.
  • Hover with the mouse and check that a detailed time tooltip pops-up
  • Without reloading the page, check that the field is refreshing client side after the refresh interval expires.
  • Disable Javascript and reload the page.
  • Check that the field degrades to a normal time representation.

Formatter settings form


Formatter settings summary

Javascript shows the timestamp as time difference

The time difference refreshes after the refresh interval expires

Javascript disabled degradation

Release notes snippet

In order to show the date/time as time difference (e.g. '2 hours 23 minutes ago') the timestamp default formatter exposes a setting "Display as a time difference" . When enabled, the date/time is showed as time difference using Javascript, so the page remains cacheable. A refresh interval can be configured so that the time difference is refreshed without any page reload.

🐛 Bug report
Status

Fixed

Version

10.1

Component
Datetime 

Last updated about 1 hour ago

Created by

🇷🇴Romania claudiu.cristea Arad 🇷🇴

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States danflanagan8 St. Louis, US

    The recent changes all look good to me. I had a little concern with the last commit, but after a back-and-forth with myself, I'm happy!

  • 🇮🇹Italy gambry Milan

    Swapping the Drupal Global Contribution Weekend 2023 tag with the correct one.

  • Status changed to Needs work over 1 year ago
  • 🇫🇮Finland lauriii Finland

    Left some minor feedback on the MR

  • Status changed to RTBC over 1 year ago
  • 🇷🇴Romania claudiu.cristea Arad 🇷🇴

    @lauriii, fixed your suggestion and answered the other 2 remarks. Setting back to RTBC.

  • Status changed to Needs work over 1 year ago
  • 🇬🇧United Kingdom catch

    Looks like @lauriii's last comment on the MR still needs to be resolved.

  • Status changed to RTBC over 1 year ago
  • 🇷🇴Romania claudiu.cristea Arad 🇷🇴

    I've only removed the class and, as this features already crossed RTBC several times I dare to se as RTBC.

  • Issue was unassigned.
  • 🇷🇺Russia Chi

    Given that the rendered time is updated occasionally via JavaScript do we need to add aria-live attribute to it?

  • 🇷🇴Romania claudiu.cristea Arad 🇷🇴

    This is a complex new feature is constantly moved back and forth with improvement requests that could be solved in followups. Could we, please, postpone this potential improvement to a followup? It becomes more and more expensive to keep this MR alive and aligned

  • 🇮🇳India rckstr_rohan

    Reviewed the Patch on MR !570, worked for me.

  • 🇮🇳India rckstr_rohan

    Considering #235 , checked the rendered time is updated occasionally via JavaScript, yes it needs accessibility work, will try to work on it.

  • Status changed to Needs work over 1 year ago
  • The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • 🇬🇧United Kingdom jonathanshaw Stroud, UK

    I don't believe the bot, so I scheduled a retest

  • Status changed to Needs review over 1 year ago
  • 🇺🇸United States dww

    "Can not add test, MR is not mergeable"

    Bot was right. A couple of merge conflicts in the rebase to today's 10.1.x branch. All of them in core/lib/Drupal/Core/Field/Plugin/Field/FieldFormatter/TimestampFormatter.php in the settingsForm() method. Attached an example of one of the conflicts. I think I resolved it all properly, but I haven't tested. Let's see what the bot says now.

  • Status changed to RTBC over 1 year ago
  • 🇷🇴Romania claudiu.cristea Arad 🇷🇴

    It was just a reroll

  • Status changed to Needs work over 1 year ago
  • 🇬🇧United Kingdom catch

    Given #235 and #236, I checked whether aria-live was an accessibility requirement here or not.

    Docs at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Liv...

    Normally, only aria-live="polite" is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.

    aria-live="assertive" should only be used for time-sensitive/critical notifications that absolutely require the user's immediate attention. Generally, a change to an assertive live region will interrupt any announcement a screen reader is currently making. As such, it can be extremely annoying and disruptive and should only be used sparingly.

    As aria-live="off" is the assumed default for elements, it should not be necessary to set this explicitly, unless you're trying to suppress the announcement of elements which have an implicit live region role (such as role="alert").

    Given this can potentially update very frequently, and it doesn't add new information to the page, it just silently updates information that's already there so that it's up-to-date if you leave a tab open for a long time or similar, I don't think we should add aria-live at all, if we did, we'd be setting it to aria-live="off" which is discouraged.

    I am not really qualified to review the JavaScript in this issue, although to the extent that I can, I really like the approach of optimising the refresh to the maximum possible interval - that should hopefully make this cheap on people's tabs.

    I did find one issue with the layout update path that needs fixing before this can go in - see comments on the MR. Marking needs work for that.

  • Status changed to Needs review over 1 year ago
  • Status changed to RTBC over 1 year ago
  • 🇺🇸United States danflanagan8 St. Louis, US

    The new layout_builder_entity_view_display_presave function as well as the updates to layout_builder_post_update_timestamp_formatter look like what was requested by @catch.

    I also like to change from strpos to str_starts_with, which was a nice touch.

    Back to RTBC, hopefully for the last time. ;)

  • 🇷🇺Russia Chi

    Re #236 I think accessibility is not an improvement but something that needs to be done by default every time a new feature is delivered. I actually came to the same conclusion as #243. Just wanted someone with proper experience confirmed this.

    • catch committed 2c3f5743 on 10.1.x
      Issue #2921810 by claudiu.cristea, nod_, seanB, yogeshmpawar, dww,...
  • Status changed to Fixed over 1 year ago
  • 🇬🇧United Kingdom catch

    Thanks that looks better.

    As mentioned I'm not qualified to sign off on the JS, but I checked who'd reviewed, and it's had extensive review from nod_ and droplet and others, so I think that's covered, and what I can review looked very good.

    The PHP side looks great, it adds some extra form options, but if we didn't have them, I'd probably have asked for them, so I think it's good to have the flexibility those provide.

    Did my best with the issue credits here but it's a very long issue with a lot of contributors, so apologies if I missed anyone.

    Tagging for 10.1.0 release highlights.

  • 🇬🇧United Kingdom longwave UK

    Fixing tag

  • Status changed to Fixed over 1 year ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

  • heddn Nicaragua

    I've opened 🐛 TimestampFormatter / time_diff missing config schema Needs work that is encountered w/ use of these updates.

Production build 0.71.5 2024