I want to create a Tampermonkey/Greasemonkey UserScript that will modify the way that a commit message is displayed in the Bitbucket Pipelines console, in a web browser.
So far, I have written the following JavaScript minimal reproducible example, which works fine on the Bitbucket "commits" page to do 2 things: Enable line wrapping, and set a 2-line height:
// ==UserScript==// @name Bitbucket change display of Git commit messages.user.js// @namespace bitbucket// @include https://bitbucket.org/*// @version 1// @grant none// ==/UserScript==// Guidance:// https://somethingididnotknow.wordpress.com/2013/07/01/change-page-styles-with-greasemonkeytampermonkey/// https://stackoverflow.com/questions/19385698/how-to-change-a-class-css-with-a-greasemonkey-script// You need to use Firefox -> Browser Tools -> Web Developer Tools -> Inspector// (or Google Chrome -> View -> Developer -> Developer Tools -> Inspector),// to see the CSS elements that don't look good.function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style);}/** This function will run after the time delay, to wait for the dynamic content to load. */window.setTimeout(changeCssMessageStyleInGitCommitTable_OnceOnly, 3000);var GIT_COMMIT_TABLE_STYLE_CHANGED = false; // A global flag/** * Make the Git commits table show more text: Make the commit message * display as 2 lines wrapped, without "..." truncation at the end. */function changeCssMessageStyleInGitCommitTable_OnceOnly() { try { // The Message column should not show "...", and not have single-line spacing. // You must get the cssTag names indirectly (without hard-coding), because they change often. let gitCommitFirstTableRow = document.querySelectorAll("tr")[1]; if (gitCommitFirstTableRow == null || !window.location.href.includes("/commits")) { console.log("changeCssMessageStyleInGitCommitTable_OnceOnly() Problem: gitCommitFirstTableRow == null, retrying"); window.setTimeout(changeCssMessageStyleInGitCommitTable_OnceOnly, 3000); return; } var gitCommitFirstMessage = gitCommitFirstTableRow.children[2]; gitCommitFirstMessage = gitCommitFirstMessage.children[0].children[0]; if (!gitCommitFirstMessage.hasAttribute("class")) { console.log(`ERROR 1: gitCommitFirstMessage ${gitCommitFirstMessage} - NO ATTRIBUTE "class". Retrying`); gitCommitFirstMessage = gitCommitFirstTableRow.children[2].children[0].children[1]; if (!gitCommitFirstMessage.hasAttribute("class")) { console.log(`ERROR 2: gitCommitFirstMessage ${gitCommitFirstMessage} - NO ATTRIBUTE "class". Exiting`); return; } } let cssTag1 = gitCommitFirstMessage.getAttribute("class").split(" ")[0]; addGlobalStyle(`.${cssTag1} { white-space: normal; line-height: normal; max-height: 37px }`); // Author names should not show truncated "..." labels var gitCommitFirstAuthor = gitCommitFirstTableRow.children[0].children[0].children[1]; let cssTag2 = gitCommitFirstAuthor.getAttribute("class").split(" ")[0]; addGlobalStyle(`.${cssTag2} { margin-left: 7px; text-overflow: unset; }`); // Reduce the left and right padding of the git commits list var table = document.querySelector("div[spacing='comfortable']"); if (table != null) { let cssTag = table.getAttribute("class").split(" ")[1]; addGlobalStyle(`.${cssTag} { padding: 0px 6px; }`); } GIT_COMMIT_TABLE_STYLE_CHANGED = true; } catch (error) { console.log(`changeCssStylesInGitCommitTable() ERROR: ${error}`); window.setTimeout(changeCssMessageStyleInGitCommitTable_OnceOnly, 6000); // retry } if (GIT_COMMIT_TABLE_STYLE_CHANGED == false) { window.setTimeout(changeCssMessageStyleInGitCommitTable_OnceOnly, 5000); // retry in 5 seconds }}
You can see in the above screenshot how it alters the CSS properties of the "git commit message" text labels, to change them from single-line with "..." truncation, to 2-line with no truncation. That's what I want. Notice the "MERGED" commits display more text. The main code that achieves this is this line:
addGlobalStyle(`.${cssTag1} { white-space: normal; line-height: normal; max-height: 37px }`);Note: You can use the following public repos to test this user-script and see it in action:
- https://bitbucket.org/bitbucketpipelines/official-pipes/commits/
- https://bitbucket.org/bitbucketpipelines/bitbucket-pipes-toolkit/commits/
- https://bitbucket.org/bitbucketpipelines/template-gradle-build/commits/
- Various projects from this Bitbucket user: https://bitbucket.org/bitbucketpipelines/
But when I attempt to do the same thing on the 'Bitbucket Pipelines history' page, it does not work:
// ==UserScript==// @name Bitbucket change display of Pipelines messages.user.js// @namespace bitbucket// @include https://bitbucket.org/*// @version 1// @grant none// ==/UserScript==// Guidance:// https://somethingididnotknow.wordpress.com/2013/07/01/change-page-styles-with-greasemonkeytampermonkey/// https://stackoverflow.com/questions/19385698/how-to-change-a-class-css-with-a-greasemonkey-script// You need to use Firefox -> Browser Tools -> Web Developer Tools -> Inspector// (or Google Chrome -> View -> Developer -> Developer Tools -> Inspector),// to see the CSS elements that don't look good.function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style);}/** Try to change the style immediately on page load */addGlobalStyle(`.gZYlAg { white-space: normal; line-height: normal; max-height: 37px }`);/** This function will run after the time delay, to wait for the dynamic content to load. */window.setTimeout(changeCssStyleInPipelinesHistoryTable_OnceOnly, 3000);var GIT_COMMIT_TABLE_STYLE_CHANGED = false; // A global flag/** * Try to change the style again, after a time delay. * Make the Pipelines history table show more text: Make the commit message * display as 2 lines wrapped, without "..." truncation at the end. */function changeCssStyleInPipelinesHistoryTable_OnceOnly() { try { // The Message column should not show "...", and not have single-line spacing. // You must get the cssTag names indirectly (without hard-coding), because they change often. addGlobalStyle(".gZYlAg { white-space: normal; line-height: normal; max-height: 37px }"); GIT_COMMIT_TABLE_STYLE_CHANGED = true; } catch (error) { console.log(`changeCssStyleInPipelinesHistoryTable_OnceOnly() ERROR: ${error}`); window.setTimeout(changeCssStyleInPipelinesHistoryTable_OnceOnly, 6000); // retry } if (GIT_COMMIT_TABLE_STYLE_CHANGED == false) { window.setTimeout(changeCssStyleInPipelinesHistoryTable_OnceOnly, 5000); // retry in 5 seconds }}For some reason, the above script does not modify any of the CSS styles in the Bitbucket Pipelines page, to enable 2-line text labels. But if I modify the page manually, using Google Chrome ➔View➔Developer➔Developer Tools➔Elements tab ➔ use the 'select element' pointer to click on the element ➔ then set white-space: normal and add max-height: 40px ; then it works fine, as per the screenshots below:
You can use the following public repos to test this user script and see it in action:
- https://bitbucket.org/bitbucketpipelines/template-gradle-build/addon/pipelines/home#!/
- https://bitbucket.org/bitbucketpipelines/official-pipes/addon/pipelines/home#!/
- https://bitbucket.org/bitbucketpipelines/bitbucket-pipes-toolkit/addon/pipelines/home#!/
- https://bitbucket.org/bitbucketpipelines/example-google-app-engine-deploy/addon/pipelines/home#!/
- https://bitbucket.org/bitbucketpipelines/example-aws-s3-deploy/addon/pipelines/home#!/
- Various projects from this Bitbucket user: https://bitbucket.org/bitbucketpipelines/
So my question is: How do I make the script work to set the CSS styles automatically, on the Bitbucket Pipelines page?
- What's wrong with the
addGlobalStyle()approach (with or without the time delays)? - Is there a better way to achieve this kind of page layout modification?