Align and rename release-download-count (#2139)

.github/CODEOWNERS

@@ -3,7 +3,7 @@ source/features/tags-dropdown.tsx @HardikModha
 source/features/tag-changelog-link.tsx @HardikModha
 source/features/link-to-file-in-file-history.tsx @HardikModha
 source/features/default-to-rich-diff.tsx @idasbiste
-source/features/show-asset-download-count.tsx @dotconnor
+source/features/release-download-count.tsx @dotconnor
 source/features/indented-code-wrapping.tsx @notlmn
 source/features/open-issue-to-latest-comment.tsx @dotconnor
 source/features/highest-rated-comment.tsx @lubien

source/content.ts

@@ -101,7 +101,7 @@ import './features/hide-disabled-milestone-sorter';
 import './features/tag-changelog-link';
 import './features/link-to-file-in-file-history';
 import './features/clean-sidebar';
-import './features/show-asset-download-count';
+import './features/release-download-count';
 import './features/open-issue-to-latest-comment';
 import './features/highest-rated-comment';
 import './features/clean-issue-filters';

source/features/release-download-count.css

@@ -0,0 +1,10 @@
+/* Aligns it right */
+.rgh-release-download-count {
+	margin-left: auto;
+}
+
+/* Simulates fixed columns */
+.rgh-release-download-count + small {
+	min-width: 4.5em;
+	text-align: right;
+}

source/features/show-asset-download-count.tsx → source/features/release-download-count.tsx

@@ -1,10 +1,10 @@
+import './release-download-count.css';
 import React from 'dom-chef';
 import select from 'select-dom';
 import features from '../libs/features';
 import * as api from '../libs/api';
 import * as icons from '../libs/icons';
 import {getOwnerAndRepo} from '../libs/utils';
-import {wrap} from '../libs/dom-utils';
 
 interface Asset {
 	name: string;
@@ -73,22 +73,24 @@ async function init(): Promise<void | false> {
 			// Match the asset in the DOM to the asset in the API response
 			for (const [index, {name, downloadCount}] of sortedDownloads.entries()) {
 				if (name === assetName.textContent) {
-					// Place next to asset size, keeping both aligned right
-					wrap(assetName.closest('.Box-body')!.querySelector('small')!,
-						<div className="flex-shrink-0 text-gray">
-							<small className="mr-2" style={index === 0 ? {fontWeight: 'bold'} : {}} title="Downloads">
-								{icons.cloudDownload()} {prettyNumber(downloadCount)}
+					const classes = 'rgh-release-download-count mr-2 text-gray' + (index === 0 ? ' text-bold' : '');
+					// Place next to asset size
+					assetName
+						.closest('.Box-body')!
+						.querySelector('small')!
+						.before(
+							<small className={classes} title="Downloads">
+								{prettyNumber(downloadCount)} {icons.cloudDownload()}
 							</small>
-						</div>
-					);
+						);
 				}
 			}
 		}
 	}
 }
 
 features.add({
-	id: 'show-asset-download-count',
+	id: 'release-download-count',
 	description: 'Adds a download count next to release assets.',
 	screenshot: 'https://user-images.githubusercontent.com/14323370/58944460-e1aeb480-874f-11e9-8052-2d4dc794ecab.png',
 	include: [

source/options-storage.ts

@@ -50,8 +50,8 @@ if (!location.protocol.startsWith('http') && !migrationsRun) {
 				}
 			},
 
-			// Example to for renamed features:
 			featureWasRenamed('move-marketplace-link-to-profile-dropdown', 'deprioritize-marketplace-link'), // Merged on June 7th
+			featureWasRenamed('show-asset-download-count', 'release-download-count'), // Merged on June 9th
 
 			// Removed features will be automatically removed from the options as well
 			OptionsSync.migrations.removeUnused