Skip to content

Instantly share code, notes, and snippets.

@paceaux
Last active August 22, 2018 01:06
Show Gist options
  • Save paceaux/6984508 to your computer and use it in GitHub Desktop.
Save paceaux/6984508 to your computer and use it in GitHub Desktop.
CSSOM debugger See the stylesheets and the rules in the stylesheets.
window.analyzer = {
init: function (object, id) {
this.functions.appendTable(id);
this.functions.setupHeaders(object);
this.functions.addData(object);
this.functions.addCaption("Analysis of the stylesheets");
},
data: {},
helpers: {
wrapper: function (id) {
var wrap;
if (document.getElementById(id)) {
wrap = document.getElementById(id);
} else {
wrap = document.createElement('div');
wrap.setAttribute("id", id)
document.body.appendChild(wrap);
}
return wrap;
},
bootstrapTable: function () {
var self = window.analyzer;
self.data.table = document.createElement('table');
self.data.table.sortable = true;
self.data.tBody = document.createElement('tbody');
analyzer.data.table.appendChild(self.data.tBody);
},
createBodyRows: function (list) {
var self = window.analyzer,
ll = list.length,
i;
for (i = 0; i <= ll; i++) {
var row = self.data.tBody.insertRow(i);
self.helpers.createCells(list[0], row, 'td');
}
},
createCells: function (item, row, el) {
var self = window.analyzer,
i = 0,
itemProp;
for (var itemProp in item) {
if (typeof item[itemProp] !== 'function') {
if (el == 'td') {
var cell = row.insertCell(i);
cell.setAttribute('headers', itemProp);
} else {
var th = document.createElement('th');
cell = row.appendChild(th);
}
i++;
}
}
self.data.columnCount = i;
},
loadHeadingData: function (item, row) {
var self = window.analyzer,
colCount = self.data.columnCount,
i = 0;
for (var itemProp in item) {
if (typeof item[itemProp] !== 'function') {
var thisCell = row.cells[i],
val = document.createTextNode(itemProp);
thisCell.appendChild(val);
i++;
}
}
},
createHeader: function (list) {
var self = window.analyzer,
item = list[0];
self.data.table.createTHead();
self.data.table.tHead.className = "table__header";
var tHeadRow = self.data.table.tHead.insertRow(0);
tHeadRow.className = "table__header__row";
self.helpers.createCells(item, tHeadRow, 'th');
self.helpers.loadHeadingData(item, self.data.table.tHead.rows[0]);
},
createFooter: function (list) {
var self = window.analyzer,
item = list[0];
self.data.table.createTFoot();
self.data.table.tFoot.className = "table__footer";
var tHeadRow = self.data.table.tFoot.insertRow(0);
tHeadRow.className = "table__footer__row";
self.helpers.createCells(item, tHeadRow, 'th');
self.helpers.loadHeadingData(item, self.data.table.tFoot.rows[0]);
},
addRowData: function (list) {
var self = window.analyzer,
ll = list.length,
tbody = self.data.table.tBodies[0],
rows = tbody.rows,
i = 0;
for (var row in rows) {
var item = list[i],
z = 0,
thisRow = rows[row];
for (var itemProp in item) {
if (typeof item[itemProp] !== 'function') {
var val = self.helpers.filterDatum(item, itemProp);
var content = self.helpers.convertContent(val),
thisCell = thisRow.cells[z];
thisCell.appendChild(content);
z++;
}
}
i++;
}
},
convertContent: function (val) {
var content;
if (typeof val == 'object' && val !== null) {
var content = document.createElement('ul');
val.forEach(function (el, i) {
var item = document.createElement('li');
item.innerHTML = el;
content.appendChild(item);
});
} else {
content = document.createTextNode(val);
}
return content;
},
convertToArray: function (ruleList) {
ruleList = Array.prototype.slice.call(ruleList);
var newArray = [];
ruleList.forEach(function (el, i) {
if (el.cssText) {
newArray.push(el.cssText);
} else if (el.mediaText) {
newArray.push(el.mediaText)
}
});
console.log(newArray);
return newArray;
},
filterDatum: function (item, itemProp) {
var self = window.analyzer,
value = item[itemProp];
switch (itemProp) {
case "ownerNode":
value = value.nodeName;
break;
case "cssRules":
if (value !== null) {
var value = self.helpers.convertToArray(value);
}
break;
case "rules":
if (value !== null) {
var value = self.helpers.convertToArray(value);
}
break;
case "media":
if (value !== null) {
var value = self.helpers.convertToArray(value);
}
break;
default:
value = value;
break;
}
return value;
}
},
functions: {
appendTable: function (id) {
var self = window.analyzer,
wrapper = self.helpers.wrapper(id);
self.helpers.bootstrapTable();
wrapper.appendChild(self.data.table);
},
setupHeaders: function (list) {
var self = window.analyzer;
self.helpers.createHeader(list);
self.helpers.createFooter(list);
},
addData: function (list) {
var self = window.analyzer;
self.helpers.createBodyRows(list);
self.helpers.addRowData(list);
},
addCaption: function (caption) {
var self = window.analyzer;
caption = document.createTextNode(caption);
self.data.table.createCaption();
self.data.table.caption.appendChild(caption);
}
}
};
window.analyzer.init(document.styleSheets, 'css');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment