bitbucket-history.md

BitBucket Has Problems - The Deployment History View

Have you ever gone to the deployment history screen only to be greeted by dates like "Two Weeks Ago" or "Last Month" and thought "wow that's so useful!" Of course not, because it's not.

Enter: the ✨ magic ✨ of CSS and Javascript

How Do I Use This?

You ask. I dunno.

No, really.

Ok, I use Arc Browser which has a nifty Boosts feature, and this here is a "Boost". You could probably use something like TamperMonkey or even write your own extension, really I'm just injecting some CSS and JS to make Bitbucket useable.

CSS

This will show the dates in the deployment popover

What it looks like

Before:

After:

The code

[id^="deployment-changes-tabs"] td div[title]::after {
    display: flex;
    content: attr(title)
}

Javascript

The actual deployment history list is a bit trickier - it uses a tooltip library to "helpfully" pop up dates quickly when hovering. Someone at Atlassian knew we wanted this info quickly, and got halfway there. I'd love to have been on the refinement for that feature: "we want users to be able to quickly access this information, but we don't want them to see it immediately."

What it looks like

Before:

After:

The code

// Make this longer if the environment list takes a bit to load, or you see the warning
const pageReadyTimeout = 3000; // 5000 seems safest

// This should be a couple seconds after pageReadyTimeout
const listReadyTimeout = 1000;

document.addEventListener('DOMContentLoaded', () => {
	setTimeout(() => {
		comeOnOut();
		setTimeout(() => {
			comeOnOut();
			setTimeout(showMeTheDates, 500);
		}, listReadyTimeout);
	}, pageReadyTimeout);
});

// Force all tooltips to render once
const comeOnOut = async () => {
	console.info('🧐 Getting tooltips out of hiding...');

	const parents = document.querySelectorAll(
		'[data-testid="deployment-history"] [data-testid="environment-card"] div:nth-child(4) div[role="presentation"] div',
	);

	parents.forEach((el) => {
		el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
	});
};

const showMeTheDates = () => {
	console.info('🤌 Getting the goods...');

	const tooltipHolders = document.querySelectorAll(
		'div[role="presentation"] [aria-describedby$="-tooltip"]:not([role="img"])',
	);

	if (2 > tooltipHolders.length) {
		console.warn('😭 There should be more than 1, you may need to increase the timeouts');
	}

	tooltipHolders.forEach((el) => {
		el.dispatchEvent(
			new MouseEvent('mouseover', {
				view: window,
				bubbles: true,
				cancelable: true,
			}),
		);

		const portals = document.querySelectorAll('div.atlaskit-portal');
		const tooltipPortal = portals[portals.length - 1];
		el.innerHTML = tooltipPortal.textContent;
	});
};