Improve UX of dim-bots by disabling the feature on click (refined-g…

…ithub#6374)

readme.md

@@ -249,7 +249,7 @@ Thanks for contributing! 🦋🙌
 - [](# "clean-pinned-issues") [Changes the layout of pinned issues from side-by-side to a standard list.](https://user-images.githubusercontent.com/1402241/84509958-c82a3c00-acc4-11ea-8399-eaf06a59e9e4.png)
 - [](# "quick-label-removal") [Adds one-click buttons to remove labels in conversations.](https://user-images.githubusercontent.com/36174850/89980178-0bc80480-dc7a-11ea-8ded-9e25f5f13d1a.gif)
 - [](# "clean-conversation-headers") [Removes duplicate information in the header of issues and PRs ("User wants to merge X commits from Y into Z")](https://user-images.githubusercontent.com/44045911/112314137-a34b0680-8ce3-11eb-9e0e-8afd6c8235c2.png)
-- [](# "dim-bots") [Dims commits and PRs by bots to reduce noise.](https://user-images.githubusercontent.com/1402241/65263190-44c52b00-db36-11e9-9b33-d275d3c8479d.gif)
+- [](# "dim-bots") [Dims commits and PRs by bots to reduce noise.](https://user-images.githubusercontent.com/1402241/220607557-f8ea0863-f05b-48c8-a447-1fec42af0afd.gif)
 - [](# "esc-to-cancel") [Adds a shortcut to cancel editing a conversation title: <kbd>esc</kbd>.](https://user-images.githubusercontent.com/35100156/98303086-d81d2200-1fbd-11eb-8529-70d48d889bcf.gif)
 - [](# "no-duplicate-list-update-time") [Hides the update time of conversations in lists when it matches the open/closed/merged time.](https://user-images.githubusercontent.com/1402241/111357166-ac3a3900-864e-11eb-884a-d6d6da88f7e2.png)
 - [](# "linkify-user-labels") [Links the "Contributor" and "Member" labels on comments to the author’s commits on the repo.](https://user-images.githubusercontent.com/1402241/177033344-4d4eea63-e075-4096-b2d4-f4b879f1df31.png)

source/features/dim-bots.css

@@ -1,46 +1,21 @@
-/*
-READ BEFORE EDITING. Some selectors match the same items ("focused" selector vs non-focused); make sure to update them in tandem.
-Commits that have a long commit message will not be dimmed after the user uncollapses the `<details>` element.
-*/
-
-.rgh-dim-bots--after-hover {
-	--rgh-dim-bots-delay: 1000s; /* #5158 */
-}
-
-.rgh-dim-bot:not(.rgh-tagged) .mb-1,
-.rgh-dim-bot:not(.rgh-tagged) .Box-row--drag-hide, /* PR row */
-.rgh-dim-bot:not(.rgh-tagged) .mb-1 ~ .d-flex,
-.rgh-dim-bot:not(.rgh-tagged) > .d-md-block,
-.rgh-dim-bot:not(.rgh-tagged) .labels, /* PR labels */
-.rgh-dim-bot:not(.rgh-tagged) .text-small.color-fg-muted /* PR meta */ {
-	/* Delay the "focused" status so it's not too annoying when moving the mouse over a list of dimmed items. */
-	transition: 0.1s;
-	transition-delay: 0.3s;
-	transition-property: opacity, margin-bottom, visibility;
+.rgh-dim-bots > *,
+.rgh-dim-bots .Box-row--drag-hide {
+	transition: 100ms opacity;  /* Match `mark-merge-commits-in-list` */
 }
 
-/*
-ALL the following rules define the non-focused state
-*/
-
-.rgh-dim-bot:not(.rgh-tagged, .navigation-focus, :hover, .Details--on) .mb-1, /* Commit titles, dim */
-.rgh-dim-bot:not(.rgh-tagged, .navigation-focus, :hover) .Box-row--drag-hide { /* PR row, dim */
-	opacity: 20%;
-	transition-delay: 0s;
+.rgh-dim-bots:not(.rgh-tagged, :hover) > *, /* Commit titles, dim */
+.rgh-dim-bots:not(.rgh-tagged, :hover) .Box-row--drag-hide { /* PR row, dim */
+	opacity: 40%; /* Match `mark-merge-commits-in-list` */
 }
 
-.rgh-dim-bot:not(.rgh-tagged, .navigation-focus, :hover, .Details--on) .mb-1 ~ .d-flex,
-.rgh-dim-bot:not(.rgh-tagged, .navigation-focus, :hover, .Details--on) > .d-md-block {
-	opacity: 20%;
-	margin-bottom: -1.6em;
-	visibility: hidden;
-	/* Delay visibility transition for a slightly shorter time than --rgh-dim-bots-delay, to make the animation smoother */
-	transition-delay: 0s, var(--rgh-dim-bots-delay), calc(var(--rgh-dim-bots-delay) - 0.1s);
+/* Reset commit title spacing */
+.rgh-dim-bots:not(.rgh-tagged, .rgh-interacted) .min-width-0 .mb-1 {
+	margin-bottom: 0 !important;
 }
 
-.rgh-dim-bot:not(.rgh-tagged, .navigation-focus, :hover) .labels, /* PR labels */
-.rgh-dim-bot:not(.rgh-tagged, .navigation-focus, :hover) .text-small.color-fg-muted /* PR meta */ {
-	margin-bottom: -2em;
-	visibility: hidden;
-	transition-delay: 0s, var(--rgh-dim-bots-delay), calc(var(--rgh-dim-bots-delay) - 0.1s);
+.rgh-dim-bots:not(.rgh-tagged, .rgh-interacted) .mb-1 ~ *, /* Commit metadata */
+.rgh-dim-bots:not(.rgh-tagged, .rgh-interacted) .dropdown-signed-commit, /* Commit verified label */
+.rgh-dim-bots:not(.rgh-tagged, .rgh-interacted) .flex-shrink-0 .BtnGroup, /* Commit buttons on side */
+.rgh-dim-bots:not(.rgh-tagged, .rgh-interacted) .min-width-0 > :is(.d-block, .d-flex) /* PR */ {
+	display: none !important;
 }

source/features/dim-bots.tsx

@@ -1,8 +1,10 @@
 import './dim-bots.css';
 import select from 'select-dom';
 import * as pageDetect from 'github-url-detection';
+import delegate from 'delegate-it';
 
 import features from '../feature-manager';
+import preserveScroll from '../helpers/preserve-scroll';
 
 const botNames = [
 	'actions-user',
@@ -31,22 +33,34 @@ const prSelectors = [
 	'.labels [href$="label%3Abot"]', // PR tagged with `bot` label
 ];
 
-function init(): void {
+const dimBots = features.getIdentifiers(import.meta.url);
+
+function undimBots(event: Event): void {
+	const resetScroll = preserveScroll(event.target as HTMLElement);
+	for (const bot of select.all(dimBots.selector)) {
+		bot.classList.add('rgh-interacted');
+	}
+
+	resetScroll();
+}
+
+function init(signal: AbortSignal): void {
 	for (const bot of select.all(commitSelectors)) {
 		// Exclude co-authored commits
 		if (select.all('a', bot.parentElement!).every(link => link.matches(commitSelectors))) {
-			bot.closest('.commit, .Box-row')!.classList.add('rgh-dim-bot');
+			bot.closest('.commit, .Box-row')!.classList.add(dimBots.class);
 		}
 	}
 
 	for (const bot of select.all(prSelectors)) {
-		bot.closest('.commit, .Box-row')!.classList.add('rgh-dim-bot');
+		bot.closest('.commit, .Box-row')!.classList.add(dimBots.class);
 	}
 
-	// Delay collapsing, but only after they're collapsed on load #5158
-	requestAnimationFrame(() => {
-		select('#repo-content-turbo-frame .js-navigation-container')!.classList.add('rgh-dim-bots--after-hover');
-	});
+	// Undim on mouse focus
+	delegate(document, dimBots.selector, 'click', undimBots, {signal});
+
+	// Undim on keyboard focus
+	document.documentElement.addEventListener('navigation:keydown', undimBots, {once: true, signal});
 }
 
 void features.add(import.meta.url, {
@@ -57,7 +71,16 @@ void features.add(import.meta.url, {
 	exclude: [
 		pageDetect.isBlank, // Prevent error on empty lists #5544
 	],
-	awaitDomReady: true, // TODO: Feature needs a rewrite
+	awaitDomReady: true, // TODO: Rewrite with :has()
 	deduplicate: 'has-rgh-inner',
 	init,
 });
+
+/*
+
+Test URLs
+
+- Commits: https://github.com/typed-ember/ember-cli-typescript/commits/master?after=5ff0c078a4274aeccaf83382c0d6b46323f57397+174
+- PRs: https://github.com/OctoLinker/OctoLinker/pulls?q=is%3Apr+is%3Aclosed
+
+*/

source/features/mark-merge-commits-in-list.css

@@ -1,3 +1,7 @@
+.rgh-merge-commit > div > * {
+	transition: 100ms opacity; /* Match `dim-bots` */
+}
+
 .rgh-merge-commit:not(.navigation-focus, :hover) > div > * {
-	opacity: 40%;
+	opacity: 40%; /* Match `dim-bots` */
 }

source/features/mark-merge-commits-in-list.tsx

@@ -73,7 +73,7 @@ Test URLs
 
 - isPRConversation: https://github.com/refined-github/refined-github/pull/6194
 - isPRCommitList: https://github.com/refined-github/refined-github/pull/6194/commits
-- isCommitList: https://github.com/babel/babel/commits/master?after=ddd40bf5c7ad8565fc990f26142f85613958a329+104
+- isCommitList: https://github.com/typed-ember/ember-cli-typescript/commits/master?after=5ff0c078a4274aeccaf83382c0d6b46323f57397+174
 - isCompare: https://github.com/refined-github/sandbox/compare/e8b25d3e...b3d0d992
 
 */