`collapsible-content-button` - Restore feature (#7021)

1 files changed, 27 insertions, 2 deletions

diff --git a/source/features/collapsible-content-button.tsx b/source/features/collapsible-content-button.tsx
index 93fb5469..5eeae580 100644
--- a/source/features/collapsible-content-button.tsx
+++ b/source/features/collapsible-content-button.tsx
@@ -3,6 +3,7 @@ import {FoldDownIcon} from '@primer/octicons-react';
 import * as pageDetect from 'github-url-detection';
 import * as textFieldEdit from 'text-field-edit';
 import delegate, {DelegateEvent} from 'delegate-it';
+import {elementExists} from 'select-dom';
 
 import features from '../feature-manager.js';
 import smartBlockWrap from '../helpers/smart-block-wrap.js';
@@ -35,15 +36,39 @@ function addContentToDetails({delegateTarget}: DelegateEvent<MouseEvent, HTMLBut
 }
 
 function addButtons(referenceButton: HTMLElement): void {
+	const classes
+	= elementExists('md-ref', referenceButton)
+		? [
+			'toolbar-item',
+			'btn-octicon',
+			'p-2',
+			'p-md-1',
+			'tooltipped',
+			'tooltipped-sw',
+			'rgh-collapsible-content-btn',
+		]
+		: [
+			'Button',
+			'Button--iconOnly',
+			'Button--invisible',
+			'Button--medium',
+			'tooltipped',
+			'tooltipped-sw',
+			'rgh-collapsible-content-btn',
+		];
+
 	referenceButton.after(
-		<button type="button" className="toolbar-item btn-octicon p-2 p-md-1 tooltipped tooltipped-sw rgh-collapsible-content-btn" aria-label="Add collapsible content">
+		<button type="button" className={classes.join(' ')} aria-label="Add collapsible content">
 			<FoldDownIcon/>
 		</button>,
 	);
 }
 
 function init(signal: AbortSignal): void {
-	observe('md-ref', addButtons, {signal});
+	observe([
+		'md-ref', // TODO: Drop in June 2024
+		'.ActionBar-item:has([data-md-button=\'ref\'])',
+	], addButtons, {signal});
 	delegate('.rgh-collapsible-content-btn', 'click', addContentToDetails, {signal});
 }