Github: clockify widget does not appear on _some_ issues

[wgmo]

The key difference here:

• In the issue on a private repository, which does not show the clockify widget, the HTML is considerably different from that on the page which has a working clockify widget!

I took a look at the HTML on the two pages to see if there's an obvious reason the controls aren't inserted, and there is!

Clearly the heuristic by which the clockify extension injects the button and time field into the page no longer recognises this div as the location in which it needs to be placed, since the gh-header-actions class is not used here on the problem page!

Example of a non-working page (from an issue in one of our company internal repositories) (can't share entire URL since it wouldn't work for external people, but it's not on a custom domain or anything; it has the form https://github.com/CompanyName/repository_name/issues/12345 and the clockify widget used to work here):

I have reformatted the HTML since as delivered by github it's all on one line:

<div aria-label="Header" role="region" data-testid="issue-header">
    <div class="Box-sc-g0xbh4-0 eWXGum">
        <div class="Box-sc-g0xbh4-0 krPEL" data-component="TitleArea" data-size-variant="medium">
            <h1 class="Box-sc-g0xbh4-0 fqsNdN prc-Heading-Heading-6CmGO" data-component="PH_Title"
                style="--custom-font-size: 26px,26px,var(--text-title-size-large, 32px),var(--text-title-size-large, 32px); --custom-line-height: 1.25; --custom-font-weight: normal;">
                <bdi class="Box-sc-g0xbh4-0 lhNOUb markdown-title" data-testid="issue-title">Reconsider
                    tqdm?</bdi>&nbsp;<span class="Box-sc-g0xbh4-0 cLmiVw">#1355</span></h1>
        </div>
        <div class="Box-sc-g0xbh4-0 kuCWTy">
            <div class="Box-sc-g0xbh4-0 vcYPI">
                <div class="Box-sc-g0xbh4-0 cQpCwc"><button type="button" data-testid="edit-issue-title-button"
                        aria-label="Rename issue" class="prc-Button-ButtonBase-c50BI" data-loading="false"
                        data-no-visuals="true" data-size="medium" data-variant="default"
                        aria-describedby=":r0:-loading-announcement"><span data-component="buttonContent"
                            data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text"
                                class="prc-Button-Label-pTQ3x">Edit</span></span></button>
                    <div class="Box-sc-g0xbh4-0 lkyTpy">
                        <div class="d-none"></div><a type="button"
                            href="/CompanyName/repository_name/issues/new/choose" target="_blank"
                            class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true"
                            data-size="medium" data-variant="primary" aria-describedby=":r2:-loading-announcement"><span
                                data-component="buttonContent" data-align="center"
                                class="prc-Button-ButtonContent-HKbr-"><span data-component="text"
                                    class="prc-Button-Label-pTQ3x">New issue</span></span></a>
                    </div><button data-component="IconButton" type="button" tabindex="0"
                        class="Box-sc-g0xbh4-0 prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj"
                        data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible"
                        aria-describedby=":r4:-loading-announcement" aria-labelledby=":r3:"><svg aria-hidden="true"
                            focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16"
                            fill="currentColor"
                            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;">
                            <path
                                d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z">
                            </path>
                            <path
                                d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
                            </path>
                        </svg></button><span class="Tooltip__StyledTooltip-sc-e45c7z-0 fLAhLl position-absolute"
                        data-direction="s" aria-label="Copy link" aria-hidden="true" id=":r3:" popover="auto">Copy
                        link</span>
                </div>
            </div>
        </div>
        <div class="Box-sc-g0xbh4-0 kcuWpx" data-component="PH_Actions">
            <div class="Box-sc-g0xbh4-0 cQpCwc"><button type="button" data-testid="edit-issue-title-button"
                    aria-label="Rename issue" class="prc-Button-ButtonBase-c50BI" data-loading="false"
                    data-no-visuals="true" data-size="medium" data-variant="default"
                    aria-describedby=":r5:-loading-announcement"><span data-component="buttonContent"
                        data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text"
                            class="prc-Button-Label-pTQ3x">Edit</span></span></button>
                <div class="Box-sc-g0xbh4-0 lkyTpy">
                    <div class="d-none"></div><a type="button" href="/CompanyName/repository_name/issues/new/choose"
                        target="_blank" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true"
                        data-size="medium" data-variant="primary" aria-describedby=":r7:-loading-announcement"><span
                            data-component="buttonContent" data-align="center"
                            class="prc-Button-ButtonContent-HKbr-"><span data-component="text"
                                class="prc-Button-Label-pTQ3x">New issue</span></span></a>
                </div><button data-component="IconButton" type="button" tabindex="0"
                    class="Box-sc-g0xbh4-0 prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false"
                    data-no-visuals="true" data-size="medium" data-variant="invisible"
                    aria-describedby=":r9:-loading-announcement" aria-labelledby=":r8:"><svg aria-hidden="true"
                        focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16"
                        fill="currentColor"
                        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;">
                        <path
                            d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z">
                        </path>
                        <path
                            d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
                        </path>
                    </svg></button><span class="Tooltip__StyledTooltip-sc-e45c7z-0 fLAhLl position-absolute"
                    data-direction="s" aria-label="Copy link" aria-hidden="true" id=":r8:" popover="auto"
                    style="top: 164px; left: 1287.75px;">Copy link</span>
            </div>
        </div>
    </div>
</div>

Here's an example of the "gh-header-show" div (inside which the button appears) from a working page (from a clockify issue!) at #280 ... again I reformatted for legibility, but the delivered HTML was already a bit formatted / indented, on delivery, here.

<div class="gh-header-show ">
    <div class="d-flex flex-column flex-md-row">
        <div
            class="gh-header-actions mt-0 mb-3 mb-md-2 ml-1 flex-md-order-1 flex-shrink-0 d-flex flex-items-center gap-1 clockify clockify0">
            <form id="clockify-manual-input-form"><input class="clockify-input clockify-input-default"
                    placeholder="Add time (e.g. 15m)"></form>
            <div style="padding: 3px 14px;"
                title="#280 Integration Issue with Todoist: Tags and Projects Not Auto-Filled"
                class="clockifyButton clockifyButtonId0" id="clockifyButton">
                <div style="display: flex; align-items: center; cursor: pointer;"><svg width="16" height="16"
                        viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M11.0065 2.04616C11.4838 1.56806 11.3811 0.764579 10.7508 0.522636C9.8712 0.185007 8.91622 0 7.91809 0C3.54505 0 0 3.5511 0 7.93162C0 12.3121 3.54505 15.8632 7.91809 15.8632C8.91006 15.8632 9.85941 15.6805 10.7345 15.3468C11.3664 15.1059 11.4702 14.3009 10.992 13.8219C10.6822 13.5115 10.2133 13.4391 9.79745 13.5775C9.20813 13.7738 8.57779 13.88 7.92268 13.88C4.6429 13.88 1.9841 11.2167 1.9841 7.93131C1.9841 4.64592 4.6429 1.98259 7.92268 1.98259C8.58253 1.98259 9.21724 2.09041 9.81022 2.28937C10.2263 2.42902 10.6962 2.35702 11.0065 2.04616Z"
                            fill="#60747D"></path>
                        <path
                            d="M9.11681 8.02279C9.11681 8.57666 8.66782 9.02564 8.11396 9.02564C7.5601 9.02564 7.11111 8.57666 7.11111 8.02279C7.11111 7.46893 7.5601 7.01994 8.11396 7.01994C8.66782 7.01994 9.11681 7.46893 9.11681 8.02279Z"
                            fill="#60747D"></path>
                        <path
                            d="M9.65974 5.15543C9.3005 5.5124 9.3005 6.09115 9.65974 6.44812C10.019 6.80509 10.6014 6.80509 10.9607 6.44812L13.9528 3.47494C14.312 3.11797 14.312 2.53922 13.9528 2.18225C13.5936 1.8253 13.0111 1.8253 12.6519 2.18225L9.65974 5.15543Z"
                            fill="#60747D"></path>
                        <path
                            d="M9.65974 10.7078C9.3005 10.3508 9.3005 9.7721 9.65974 9.41513C10.019 9.05816 10.6014 9.05816 10.9607 9.41513L13.9528 12.3883C14.312 12.7453 14.312 13.324 13.9528 13.681C13.5936 14.0379 13.0111 14.0379 12.6519 13.681L9.65974 10.7078Z"
                            fill="#60747D"></path>
                    </svg><span style="margin-left: 5px; float: none; position: relative; color: rgb(68, 68, 68);"><span
                            class="clockify-button-inactive" clockify-button-inactive-span="">
                            Start timer
                        </span></span></div>
            </div>

            <a data-hotkey="c" href="/clockify/browser-extension/issues/new/choose" data-view-component="true"
                class="flex-md-order-2 Button--primary Button--small Button"> <span class="Button-content">
                    <span class="Button-label">New issue</span>
                </span>
            </a>

            <div class="flex-auto text-right d-block d-md-none">
                <a href="#issue-comment-box" class="py-1">Jump to bottom</a>
            </div>
        </div>

        <h1 class="gh-header-title mb-2 lh-condensed f1 mr-0 flex-auto wb-break-word">
            <bdi class="js-issue-title markdown-title">Integration Issue with Todoist: Tags and Projects Not
                Auto-Filled</bdi>
            <span class="f1-light color-fg-muted">#280</span>
        </h1>
    </div>
</div>

It's not immediately clear to me what an appropriate fix here would be ... insert the clockify elements after the div which has the attribute data-component="TitleArea" or simply do a similar append into the div with attribute data-testid="issue-header" or maybe aria-label="Header"? I believe this would put it in the right place ... but feels fragile. Maybe no less fragile than the existing method, which is now broken for me!!

Over to you for thoughts, Clockify developers!

Quick pic of the folded HTML ... I imagine that the two clockify controls should be added to the list of three divs shown here:

[Drakula44]

I tried inserting it in data-component="PH_Title" by copying insert for '.gh-header-actions:not(.clockify)', and replacing it with 'div[data-component="PH_Actions"]:not(.clockify)', and it works fine. I did not have time to check how to extract issue id and title.

One more note this is probably related to new feature of parent and subissues in github. That feature is still in beta so not sure will this fix work when features is fully released.