TamperMonkey ShotGrid Field IDs

shotgrid_field_ids.js

// ==UserScript==
// @name         ShotGrid Field IDs
// @namespace    https://maximumfx.nl/
// @version      v1.0.0
// @description  Add ShotGrid field ids to the info overview.
// @author       MaximumFX
// @match        https://*.shotgunstudio.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=shotgunstudio.com
// @grant        none
// ==/UserScript==

// Convenience function to execute your callback only after an element matching readySelector has been added to the page.
// Example: runWhenReady('.search-result', augmentSearchResults);
// Gives up after 1 minute.
function runWhenReady(readySelector, callback) {
    var numAttempts = 0;
    var tryNow = function() {
        var elem = document.querySelector(readySelector);
        if (elem) {
            callback(elem);
        } else {
            numAttempts++;
            if (numAttempts >= 34) {
                console.warn('Giving up after 34 attempts. Could not find: ' + readySelector);
            } else {
                setTimeout(tryNow, 250 * Math.pow(1.1, numAttempts));
            }
        }
    };
    tryNow();
}

(function() {
    'use strict';

    runWhenReady(".info_tab_content [sg_id]", () => {
        [...document.querySelectorAll(".info_tab_content [sg_id]")].forEach(elem => {
            const text_elem = elem.querySelector("[sg_selector='field:name'] div")
            text_elem.textContent = text_elem.textContent.trim() + ` (${elem.getAttribute('sg_id').replace('field:', '')})`
        })
        console.info('Added ShotGrid field ids.');
    })
})();

You can use the Stylebot extension to add the following CSS for better readability:

div.sgc_fields table.auto_width td.field_label {
    width: 40%;
}
div.sgc_fields table.auto_width td.field_label div.field_name_box {
    display: inline-block;
    width: 100%;
    overflow-wrap: break-word;
    overflow: unset;
    white-space: break-spaces;
}