如何使用用户脚本更改 Bitbucket Pipelines 仪表板上的换行？

Question

我想创建一个用户脚本来修改提交消息在 Web 浏览器的 Bitbucket Pipelines 控制台中的显示方式。

到目前为止，我已经编写了以下 JavaScript，它在 Bitbucket“提交”页面上运行良好。它做了两件事：

启用换行。
设置 2 行高。

// ==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/
// 

// 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
    }
}

您可以在上面的屏幕截图中看到它如何更改“git 提交消息”文本标签的 CSS 属性，以将它们从单行更改为“...”截断, 到 2 行，没有截断。这是我想要的。请注意“MERGED”提交显示更多文本。实现这一点的主要代码是这一行：

addGlobalStyle(`.${cssTag1} { white-space: normal; line-height: normal; max-height: 37px }`);

注意：您可以使用以下 public 存储库来测试此用户脚本并查看其运行情况：

https://bitbucket.org/bitbucketpipelines/official-pipes/commits/
https://bitbucket.org/bitbucketpipelines/bitbucket-pipes-toolkit/commits/
https://bitbucket.org/bitbucketpipelines/template-gradle-build/commits/
这个 Bitbucket 用户的各种项目：https://bitbucket.org/bitbucketpipelines/

但是当我尝试在 'Bitbucket Pipelines history' 页面上做同样的事情时，它不起作用:

// ==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/
// 

// 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
    }
}

出于某种原因，上述脚本没有修改 Bitbucket Pipelines 页面中的任何 CSS 样式，以启用 2 行文本标签。

但是如果我手动修改页面，通过转到 Developer Tools → Elements 选项卡 → 使用 'select element' 指针单击元素 *rarr；然后设置 white-space: normal 并添加 max-height: 40px ；然后它工作正常：

您可以使用以下 public 存储库来测试此用户脚本并查看其实际效果：

如何让脚本在 Bitbucket 管道页面上自动设置 CSS 样式？

addGlobalStyle() 方法有什么问题（有或没有时间延迟）？
有没有更好的方法来实现这种页面布局修改？

Answer 1

为了简化您的脚本，您可以使用 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。

对于您的第一个脚本，您可以使用纯 CSS 而不是尝试获取元素，获取其 class 名称，然后对其应用一些样式 class.

这是我想出的：

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;
}

管道 table 位于带有 different origin. In order to apply custom styles to them, you need to 的 iframe 中，在本例中为 https://bitbucket-pipelines.prod.public.atl-paas.net/*.

CSS 应该是这样的：
```
table > tbody > tr > td[headers="pipeline"] p:first-child {
    white-space: normal;
    line-height: normal;
    max-height: 37px;
}
```

有关所用 CSS 选择器的更多信息：

如何使用用户脚本更改 Bitbucket Pipelines 仪表板上的换行？

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

javascript

css

userscripts

tampermonkey