Pail/var-highlighter.js

const getVarElements = () => [
    ...getClassNameElementsArray('hl-variable'),
    ...getClassNameElementsArray('hl-variable-2'),
    ...getClassNameElementsArray('hl-def'),
    ...getClassNameElementsArray('hl-attribute'),
    ...getClassNameElementsArray('hl-property'),
    ...getClassNameElementsArray('hl-tag'),
    ...getClassNameElementsArray('hl-string'),
    ...getClassNameElementsArray('hl-string-2'),
    ...getClassNameElementsArray('hl-type')
]

const selectedClass = 'sages-selected-variable'

let currentSelected

const cleanVarName = varName => {
    if (varName.startsWith('/') && varName.endsWith('>')) {
        varName = varName.substring(1, varName.length - 1)
    }
    varName = varName.replaceAll('"', "'")
    return varName
}

const selectVar = varName => {
    if (!varName) {
        return
    }
    varName = cleanVarName(varName)
    // Clear existing colors
    getClassNameElementsArray(selectedClass)
        .forEach(e => e.classList.remove(selectedClass))

    // Color vars with matching text
    getVarElements()
      .filter(e => cleanVarName(e.innerText) === varName)
      .forEach(e => e.classList.add(selectedClass))

    currentSelected = varName
}

const getTagMatching = (name, matcher) => {
    const elements = Object.values(document.getElementsByTagName(name)).filter(matcher)
    return elements.length ? elements[0] : null
}

const addVariableClickers = skipExpandos => {
    const getSearchButton = () => getTagMatching(
        'button', e => e.dataset?.testid === 'search-action-button')

    const getSearchBox = () => getTagMatching('input', e => e.name === 'changes-search-input')

    if (!skipExpandos) {
        getClassNameElementsArray('expand-context-button').forEach(e => {
            const currentOnClick = e.onclick
            e.onclick = (...args) => {
                currentOnClick && currentOnClick(...args)
                setTimeout(() => {
                    selectVar(currentSelected)
                    addVariableClickers(true)
                }, CURRENT_PAGE_DELAY)
            }
        })
    }

    getVarElements()
      .forEach(e => {
          e.onclick = () => selectVar(e.innerText)
          e.ondblclick = () => {
              let searchBox = getSearchBox()

              if (!searchBox) {
                  getSearchButton()?.click()
                  searchBox = getSearchBox()
              }

              searchBox.value = e.innerText
              searchBox.dispatchEvent(new window.Event('change', { bubbles: true }))
          }
      })

}


addFix(() => {
    const styleSheet = document.createElement('style')
    styleSheet.innerText = `
        .${selectedClass} {
            background: rgb(255, 253, 170) !important;
            border-radius: 3px;
            padding: 2px !important;
            margin: -2px !important;
            /*
            padding-left: 2px !important;
            padding-right: 2px !important;
            margin-left: -2px !important;
            margin-right: -2px !important;
            */
        }`

    document.head.appendChild(styleSheet)
    addVariableClickers()
    selectVar(currentSelected)
})