refined-github / refined-github

:octocat: Browser extension that simplifies the GitHub interface and adds useful features

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hide inactive deployments

fxedel opened this issue · comments

We use continuous deployment with Heroku, and on each push, there's a message like this: "XY deployed to repo-name-pr-123 1 minute ago"

As soon as there's a new deployment, the old message gets replaced with "XY temporarily deployed to ..." as seen below:

Screenshot current

(Note: The Inactive label isn't even clickable to provide more information)

These inactive deployments actually give no information – they're no longer accessible and the information when something was deployed isn't really important. However, the inactive messages annoy me when reading the commit history. I'd really like them to be completely hidden, like so:

Screenshot wished

The html code for the whole deployment history item is the following:

<div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEzOkRlcGxveWVkRXZlbnQxNTA4OTAxNjcx">
  <div class="js-socket-channel js-updatable-content" data-channel="pull_request:169853716" data-url="/_render_node/MDEzOkRlcGxveWVkRXZlbnQxNTA4OTAxNjcx/pull_requests/events/deployed">
    <div class="discussion-item discussion-item-deployed">
      <h3 class="discussion-item-header f5 text-normal" id="event-1508901671">
        ...
        <span class="deployment-meta">
          <span class="deployment-status-label is-inactive">Inactive</span>
        </span>
      </h3>
    </div>
  </div>
</div>

The important class is is-inactive (possible selector: .js-timeline-item .deployment-status-label.is-inactive): It indicates that this item is inactive and differentiates it from active items. (The stylesheet also mentions these classes: .is-error, .is-failure, .is-active, .is-pending)

I suggest searching for that selector via JavaScript and adding a custom class or data-tag to the containing .js-timeline-item, so that we can select the whole inactive item with another selector, like .js-timeline-item[refined-github-inactive-item]. A simple CSS rule would add a display: none and we're done.

Edit: One should only hide the .discussion-item, not the whole .js-timeline-item.

@fxedel This sounds right and in line with what we do in similar situations. Could you create a pull request implementing it? Thanks!

This CSS needs to be placed near the one hiding issue renames

@hkdobrev Great! I'll try to implement it soon ...