Looking for a script to show countdown timer below posts for easier edits

Question

On Stack Exchange sites, edits that are made within 5 minutes of posting a question or answer aren't counted. This is called the grace period.

For example, if you post a new answer, and edit it after the 5-minute grace period, this is how it'll look like:

If you make the edit within the grace period, then it'll look like:

It'd be great if you can see a countdown timer that starts counting down immediately after you post a question or answer. Is there a script that does this?

Answer 1

Here's a Greasemonkey / Tampermonkey script that'll run a stop watch until an edit reaches 5 minutes of age. Give it a try and see what you think. It might have bugs, but it's close enough for government work I think. (That's a United States idiom meaning it has the mediocre quality one might expect from the lowest bidder, but it works well enough.) Bear in mind that it only works on new posts and post edits, not on comments.

Edit: I added the script to GitHub (direct install) so you can install it without having to copypaste this code block.

// ==UserScript==
// @name         SE realtime dates
// @namespace    http://stackapps.com/
// @description  show Stack Exchange timestamps as realtime counters
// @match        *://stackexchange.com/*
// @match        *://*.stackexchange.com/*/*
// @match        *://stackoverflow.com/*/*
// @match        *://*.stackoverflow.com/*/*
// @match        *://stackapps.com/*/*
// @match        *://serverfault.com/*/*
// @match        *://superuser.com/*/*
// @match        *://askubuntu.com/*/*
// @match        *://mathoverflow.net/*/*
// @version      1.2.1
// @downloadURL  https://github.com/calraith/gm_scripts/raw/master/se_grace_timer.user.js
// @grant        none
// ==/UserScript==

function setIntervalWithContext(code, delay, context) {
    return setInterval(function() {
        code.call(context);
    }, delay);
}

function startTimer(el) {
    if (!el.title) return;
    this.el = el;
    this.interval = setIntervalWithContext(function() {
        if (!this.el) return clearInterval(this.interval);
        var x = (new Date() - new Date(this.el.title.replace(' ','T'))) / 1000;
        if (x>299&&x<360) this.el.innerHTML = '5 mins ago';
        if (isNaN(x) || x > 299 || x < 0) return clearInterval(this.interval);
        var m = Math.floor(x / 60) % 60,
            s = Math.floor(x % 60),
            s = (s < 10) ? '0' + s : s;
        this.el.innerHTML = m+':'+s+' ago';
    }, 250, this);
    timers.push(this.interval);
}

function addTimers() {
    while (timers.length) clearInterval(timers.pop());
    var timestamps = document.getElementsByClassName('relativetime');
    for (var i=0; i<timestamps.length; i++) {
        var stopwatch = new startTimer(timestamps[i]);
    }
}

var timers = [];
addTimers();
addEventListener('click', function() { setTimeout(addTimers, 1000) }, true);