Created
December 20, 2024 03:01
-
-
Save mandy-h/abd40fdab97a82cd1540345954a9c40a to your computer and use it in GitHub Desktop.
Adobe Launch CSS Selectors Highlighter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Run in browser console. Highlights elements on the page that match selectors added via the Adobe Launch UI. | |
| * Currently this does not handle selectors that are used in custom code, nor does it check for new elements that are | |
| * added onto the page after the code is executed. | |
| */ | |
| /** | |
| * Loops over a single dataElement or rule object to find the value of 'elementSelector' property, if present. | |
| * @param {object} obj - The dataElement or rule object | |
| * @returns {(string|null)} selector | |
| */ | |
| function findSelector(obj) { | |
| let selector = null; | |
| if (obj instanceof Array) { | |
| for (const arrayEl of obj) { | |
| selector = findSelector(arrayEl); | |
| if (selector) { | |
| break; | |
| } | |
| } | |
| } else { | |
| for (const prop in obj) { | |
| if (prop === 'elementSelector') { | |
| // Return the value of the 'elementSelector' property | |
| return obj[prop]; | |
| } | |
| if (obj[prop] instanceof Object || obj[prop] instanceof Array) { | |
| selector = findSelector(obj[prop]); | |
| if (selector) { | |
| break; | |
| } | |
| } | |
| } | |
| } | |
| return selector; | |
| } | |
| /** | |
| * Returns an array of objects containing the selectors and the names of the data elements / rules where they are being used. | |
| * @param {('dataElements'|'rules')} type | |
| * @returns {object[]} selectors | |
| */ | |
| function compileSelectors(type) { | |
| const selectors = []; | |
| Object.entries(window._satellite._container[type]).forEach((el) => { | |
| const selector = findSelector(el); | |
| let usage; | |
| if (type === 'dataElements') { | |
| usage = el[0]; | |
| } else if (type === 'rules') { | |
| usage = el[1]['name']; | |
| } | |
| selector && selectors.push({ selector, usage }); | |
| }); | |
| return selectors; | |
| } | |
| function main() { | |
| const dataElementSelectors = compileSelectors('dataElements'); | |
| const ruleSelectors = compileSelectors('rules'); | |
| const allSelectors = [...dataElementSelectors, ...ruleSelectors]; | |
| const highlightStyle = 'border: 1px dashed #00f !important; background: #51fafc !important;'; | |
| try { | |
| // Print all selectors in the console | |
| console.table(allSelectors); | |
| // Highlight elements on the page and set tooltip text | |
| allSelectors.forEach((selector, index) => { | |
| Array.from(document.querySelectorAll(selector.selector)).forEach((el) => { | |
| // Set styles in such a way that they trump all other styles | |
| const newStyles = `${el.getAttribute('style') || ''}; ` + highlightStyle; | |
| el.setAttribute('style', newStyles); | |
| // Info displayed on hover | |
| el.title += `[${index}] "${selector.selector}" ${selector.usage}\n`; | |
| }); | |
| }); | |
| } catch (error) { | |
| // Print console errors when an invalid CSS selector is found, but don't stop code execution | |
| console.error(error); | |
| } | |
| } | |
| main(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment