Skip to content

Instantly share code, notes, and snippets.

@conroywhitney
Last active August 29, 2015 14:14
Show Gist options
  • Save conroywhitney/3deb27f7beba55986c80 to your computer and use it in GitHub Desktop.
Save conroywhitney/3deb27f7beba55986c80 to your computer and use it in GitHub Desktop.
/*
* Copy this into the Chrome JS console at one of the following domains
* dropbox.com, slack.com, getbootstrap.com, or semantic-ui.com
* Depending on which xpath is set (defaults to theme.buttons.primary)
* Will output all CSS styles for the target element
*/
var
hostname = window.location.hostname,
domain = hostname.substr(0, hostname.indexOf('.', 4)).replace('www.', '').replace('-', ''),
themes = {
dropbox: {
buttons: {
primary: '//*[@id="signup-container"]/div[2]/div/form/button',
secondary: '//*[@id="page-content"]/div[3]/div[2]/a[2]'
},
text: {
primary: '//*[@id="page-content"]/div[3]/div[1]/div[1]/div[2]/p[1]',
secondary: '//*[@id="page-content"]/div[3]/div[1]/div[1]/div[2]/p[2]',
link: '//*[@id="page-header"]/a[2]'
},
inputs: {
text: '//*[@id="pyxl3839271058322690198"]'
}
},
slack: {
buttons: {
primary: '//*[@id="video_form"]/div[2]/div/form/input[6]',
secondary: '//*[@id="signin_link"]'
},
text: {
primary: '//*[@id="landing"]/div[1]/div[1]/h1',
secondary: '//*[@id="landing"]/div[1]/div[1]/p[1]',
link: '//*[@id="landing"]/div[4]/div/p/a[5]'
},
inputs: {
text: '//*[@id="email"]'
}
},
getbootstrap: {
buttons: {
primary: '/html/body/div[2]/div/a',
secondary: '//*[@id="content"]/div/p[2]/a'
},
text: {
primary: '/html/body/div[1]/div/h2',
secondary: '/html/body/div[1]/div/p[1]',
link: '/html/body/div[1]/div/div/div[1]/p/a[1]'
},
inputs: {
text: null
}
},
semanticui: {
buttons: {
primary: '//*[@id="example"]/div[4]/div[1]/div[5]/div/div[2]/div',
secondary: '//*[@id="example"]/div[4]/div[1]/div[5]/div/div[3]/a'
},
text: {
primary: '//*[@id="example"]/div[4]/div[1]/div[3]/div[1]/div[1]/h1',
secondary: '//*[@id="example"]/div[4]/div[1]/div[3]/div[1]/div[1]/p',
link: '//*[@id="example"]/div[4]/div[1]/div[5]/div/div[3]/p/a[1]'
},
inputs: {
text: '//*[@id="example"]/div[4]/div[1]/div[4]/div/div/form/div/div/input'
}
}
},
theme = themes[domain],
/* --------------------------------------------- */
/* CHANGE THIS TO WHICH ITEM YOU WANT TO INSPECT */
xpath = theme.buttons.primary,
/* --------------------------------------------- */
$elem = $x(xpath)[0],
stylez = window.getComputedStyle($elem, null),
value = stylez.getPropertyValue(style)
;
for(var i = 0; i < stylez.length; i++) {
var
style = stylez[i],
value = stylez.getPropertyValue(style)
;
console.log(style + ": "+ value + "\n");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment