7

Screenshot

enter image description here

About

A recent change moved question stats (ask date, view count, and active date) from the sidebar to under the question title. Like others, you may find this distracting, because the information is only occasionally useful, yet its new position results in it being the second thing you read on every page.

This userscript runs on any SE site, and restores the question stats back to their prior position in the sidebar, removing them from just below the title.

This is intended for desktop users. The position change was probably made to make it easier for those with narrow screens to see the stats. Should work on any browser that supports userscripts and ES6, including Chrome and FF.

For compatibility with Roomba Forecaster and with any other older userscripts that depended on the old location of question stats in the sidebar, make sure this userscript runs before they do, so that the #qinfo table it creates can be found by the other userscripts.

Code

// ==UserScript==
// @name             Stack Sidebar Question Stats
// @author           CertainPerformance
// @description      Puts question stats in the sidebar, rather than at the top of the page
// @version          1.2
// @include          /https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/questions/\d+/
// @run-at           document-start
// @grant            none
// ==/UserScript==

/* For compatibility with Roomba Forecaster
 * and with any other older userscripts that depended on the old location of question stats in the sidebar
 * Make sure this userscript runs before they do, so that the #qinfo table it creates can be found by the other userscripts
 * https://www.mturkcrowd.com/threads/how-to-change-execution-order-of-userscripts-and-customize-excluded-pages.152/
 */

if (document.readyState === 'loading') {
  window.addEventListener('DOMContentLoaded', moveQuestionStats);
} else {
  moveQuestionStats();
}

function moveQuestionStats() {
  const topQuestionStatsContainer = document.querySelector('#question-header + div.grid');
  const statusCells = {};
  for (const cell of topQuestionStatsContainer.querySelectorAll('#question-header + div.grid > .grid--cell')) {
      const content = (cell.textContent.trim().split(/[^a-z]/i)[0] || '').toLowerCase();
      if (content) {
          statusCells[content] = cell;
      }
  }
  const askedCell = statusCells.asked;
  const possibleActiveCell = statusCells.active;
  const viewedCell = statusCells.viewed;
  const askedTitle = askedCell.title;
  const askedTimeHTML = askedCell.children[1].outerHTML;
  const viewCountTextContent = viewedCell.lastChild.textContent;

  // This element also acts as the horizontal separator between the title and the question body;
  // clear, but do not remove
  topQuestionStatsContainer.textContent = '';

  const sidebar = document.querySelector('#sidebar');
  const newSideQuestionStatsContainer = document.createElement('div');
  sidebar.insertAdjacentElement('afterbegin', newSideQuestionStatsContainer);
  newSideQuestionStatsContainer.className = 'module question-stats';
  newSideQuestionStatsContainer.innerHTML = `
  <table id="qinfo">
    <tbody>
      <tr>
        <td>
          <p class="label-key">asked</p>
        </td>
        <td style="padding-left: 10px">
          <p class="label-key" title="${askedTitle}">
            <b>
              ${askedTimeHTML}
            </b>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="label-key">viewed</p>
        </td>
        <td style="padding-left: 10px">
          <p class="label-key">
            <b>${viewCountTextContent}</b>
          </p>
        </td>
      </tr>
      ${(() => {
        if (!possibleActiveCell) {
          return '';
        }
        const activeTitle = possibleActiveCell.title;
        const activeTextContent = possibleActiveCell.children[1].textContent;
        return `
        <tr>
          <td>
            <p class="label-key">active</p>
          </td>
          <td style="padding-left: 10px">
            <p class="label-key">
              <b>
                <a href="?lastactivity" class="lastactivity-link" title="${activeTitle}">${activeTextContent}</a>
              </b>
            </p>
          </td>
        </tr>`
        })()
      }
    </tbody>
  </table>
  `;
}
  • 2
    Userscripts are more convenient for people to install if served directly from a URL. Probably the easiest way to do that is to have the script in a GitHub repository. Doing so would allow users to automatically obtain updates to the script, when that's needed due to yet more changes by SE. A GitHub Gist would also work, but doesn't provide the ability to have people make PRs or post issues. Either way, that allows you to include a direct install link, which users can click to install. Personally, prefer to go to the actual file and review it first (e.g. then click the "raw" link on GitHub). – Makyen Jul 26 at 10:35
  • Ironically, one of the delays in updating Roomba Forecaster was making sure that it worked regardless of which order the scripts ran in :-). Version 2.2.0 of Roomba Forecaster has been released. It should work with any execution order. However, having Stack Sidebar Question Stats run prior to any other scripts that rely on the old structure of the Sidebar should help quite a bit. – Makyen Jul 26 at 16:03
  • 2
    Because this isn't hosted as a separate file anywhere, I created a GitHub Gist of it. The primary reason is so people can click on an install link. I'd much rather there be such a link available to somewhere hosted by you. I'll try to keep that Gist updated, but if you move this to somewhere from which people can click to install, I'll redirect installs to that location. – Makyen Jul 26 at 16:08

You must log in to answer this question.

Browse other questions tagged .