How can I change the line wrapping on the Bitbucket Pipelines dashboard with a userscript?

Question

I want to create a 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, which works fine on the Bitbucket "commits" page. It does two things:

Enable line wrapping.
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, by going to Developer Tools → Elements tab → use the 'select element' pointer to click on the element *rarr; then set white-space: normal and add max-height: 40px ; then it works fine:

You can use the following public repos to test this userscript and see it in action:

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?

score 1 · Accepted Answer · answered Nov 14 '21 at 14:26

To simplify your scripts, you can use GM_addStyle - a Tampermonkey's native method - to apply your CSS. However, if your scripts are just going to include a call to GM_addStyle, then you should probably use an extension like Stylus.

For your first script, you can use pure CSS instead of attempting to get the element, fetch its class name, then apply some styles to that class.

Here's what I came up with:

table > tbody > tr > :nth-child(3) div[title] {
    white-space: normal;
    line-height: normal;
    max-height: 37px;
}

table > tbody > tr > :first-child div:nth-child(2) {
    margin-left: 7px;
    text-overflow: unset;
}

div[spacing='comfortable'] {
    padding: 0px 6px;
}

The pipelines table is in an iframe with a different origin. In order to apply custom styles to them, you need to add the iframe's src to @include/@match, in this case, https://bitbucket-pipelines.prod.public.atl-paas.net/*.

The CSS should look like this:
```
table > tbody > tr > td[headers="pipeline"] p:first-child {
    white-space: normal;
    line-height: normal;
    max-height: 37px;
}
```

More information on the CSS selectors used:

How can I change the line wrapping on the Bitbucket Pipelines dashboard with a userscript?

1 Answers1