WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Offenders layout for DOM inserts

Browse Source
This commit is contained in:
Gaël Métais
2015-01-17 09:21:50 +01:00
parent bce7a1ad9a
commit a4f22a8542
5 changed files with 205 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/css/rule.css
+50 -3
View File
@@ -82,17 +82,64 @@
font-size: 3em;
margin-bottom: 1em;
}
.offenders .eltButton {
display: inline-block;
position: relative;
background: #efe;
padding: 0 0.5em;
margin: 0.2em 0;
border-radius: 0.4em;
z-index: 1;
}
.offenders .eltButton.opens {
padding-right: 0.75em;
}
.offenders .eltButton.opens:after {
position: relative;
left: 0.5em;
content: '\25BC';
font-size: 0.8em;
}
.offenders .eltButton > div {
display: none;
position: absolute;
right: 0;
min-width: 100%;
background: inherit;
border-bottom-left-radius: 0.4em;
border-bottom-right-radius: 0.4em;
border-top: 1px solid #999;
}
.offenders .eltButton .domTree {
text-align: left;
white-space: nowrap;
}
.offenders .eltButton .domTree > div {
margin: 0.5em;
}
.offenders .eltButton .domTree > div div {
margin-left: 1em;
}
.offenders .eltButton:hover {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: #ffe0cc;
z-index: 2;
}
.offenders .eltButton:hover > div {
display: block;
}
.offendersHtml {
display: inline-block;
}
.offendersHtml .domTree div {
.domTree div {
text-align: left;
margin-left: 1em;
}
.offendersHtml .domTree div span:only-child {
.domTree div span:only-child {
font-weight: bold;
}
.offendersHtml .domTree div span:only-child span {
.domTree div span:only-child span {
font-style: italic;
font-weight: normal;
}
front/src/less/rule.less
+68 -10
View File
@@ -90,19 +90,77 @@
}
}
.offendersHtml {
display: inline-block;
.offenders {
.eltButton {
display: inline-block;
position: relative;
background: #efe;
padding: 0 0.5em;
margin: 0.2em 0;
border-radius: 0.4em;
z-index: 1;
.domTree div {
text-align: left;
margin-left: 1em;
&.opens {
padding-right: 0.75em;
span:only-child {
font-weight: bold;
span {
font-style: italic;
font-weight: normal;
&:after {
position: relative;
left: 0.5em;
content: '\25BC';
font-size: 0.8em;
}
}
> div {
display: none;
position: absolute;
right: 0;
min-width: 100%;
background: inherit;
border-bottom-left-radius: 0.4em;
border-bottom-right-radius: 0.4em;
border-top: 1px solid #999;
}
.domTree {
text-align: left;
white-space: nowrap;
> div {
margin: 0.5em;
div {
margin-left: 1em;
}
}
}
&:hover {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: #ffe0cc;
z-index: 2;
& > div {
display: block;
}
}
}
}
.offendersHtml {
display: inline-block;
}
.domTree div {
text-align: left;
margin-left: 1em;
span:only-child {
font-weight: bold;
span {
font-style: italic;
font-weight: normal;
}
}
}
lib/metadata/policies.js
+10 -3
View File
@@ -38,8 +38,8 @@ var policies = {
"isAbnormalThreshold": 10,
"offendersTransformFn": function(offenders) {
return offenders.map(function(offender) {
var results = /^(.*): (\d) occurrences$/.exec(offender);
return '<b>#' + results[1] + '</b>: ' + results[2] + ' occurrences';
var parts = /^(.*): (\d) occurrences$/.exec(offender);
return '<b>#' + parts[1] + '</b>: ' + parts[2] + ' occurrences';
});
}
},
@@ -49,7 +49,14 @@ var policies = {
"message": "<p>Working with the DOM in JavaScript triggers layout calculations and slows down the page.</p><p>Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.</p>",
"isOkThreshold": 10,
"isBadThreshold": 400,
"isAbnormalThreshold": 1000
"isAbnormalThreshold": 1000,
"offendersTransformFn": function(offenders) {
return offenders.map(function(offender) {
var parts = /^"(.*)" appended to "(.*)"$/.exec(offender);
return offendersHelpers.domPathToButton(parts[1]) + ' appended to ' + offendersHelpers.domPathToButton(parts[2]);
});
}
},
"DOMqueries": {
"tool": "phantomas",
lib/offendersHelpers.js
+33 -1
View File
@@ -1,7 +1,6 @@
var OffendersHelpers = function() {
this.domPathToArray = function(str) {
return str.split(/\s?>\s?/);
@@ -60,6 +59,39 @@ var OffendersHelpers = function() {
return this.domTreeToHTML(domTree);
};
this.domPathToButton = function(domPath) {
var domArray = this.domPathToArray(domPath);
var domTree = this.listOfDomPathsToHTML([domPath]);
if (domArray[0] === 'html') {
return '<div class="eltButton htmlButton"><b>html</b></div>';
}
if (domArray[0] === 'body') {
if (domArray.length === 1) {
return '<div class="eltButton bodyButton"><b>body</b></div>';
} else {
return '<div class="eltButton domButton opens">DOM element <b>' + domArray[domArray.length - 1] + '</b>' + domTree + '</div>';
}
}
if (domArray[0] === 'head') {
return '<div class="eltButton headButton"><b>head</b></div>';
}
if (domArray[0] === 'DocumentFragment') {
if (domArray.length === 1) {
return '<div class="eltButton fragButton">Fragment</div>';
} else {
return '<div class="eltButton fragEltButton opens">Fragment element <b>' + domArray[domArray.length - 1] + '</b>' + domTree + '</div>';
}
}
// Not attached element, such as just created with document.createElement()
if (domArray.length === 1) {
return '<div class="eltButton aloneButton">Created element <b>' + domPath + '</b></div>';
} else {
return '<div class="eltButton aloneEltButton opens">Created element <b>' + domArray[domArray.length - 1] + '</b>' + domTree + '</div>';
}
};
};
module.exports = new OffendersHelpers();
test/core/offendersHelpersTest.js
+44
View File
@@ -80,4 +80,48 @@ describe('offendersHelpers', function() {
});
describe('domPathToButton', function() {
it('should transform html', function() {
var result = offendersHelpers.domPathToButton('html');
result.should.equal('<div class="eltButton htmlButton"><b>html</b></div>');
});
it('should transform body', function() {
var result = offendersHelpers.domPathToButton('body');
result.should.equal('<div class="eltButton bodyButton"><b>body</b></div>');
});
it('should transform head', function() {
var result = offendersHelpers.domPathToButton('head');
result.should.equal('<div class="eltButton headButton"><b>head</b></div>');
});
it('should transform a standard in-body element', function() {
var result = offendersHelpers.domPathToButton('body > div#colorbox > div#cboxContent');
result.should.equal('<div class="eltButton domButton opens">DOM element <b>div#cboxContent</b><div class="domTree"><div><span>body</span><div><span>div#colorbox</span><div><span>div#cboxContent</span></div></div></div></div></div>');
});
it('should transform a domFragment element', function() {
var result = offendersHelpers.domPathToButton('DocumentFragment');
result.should.equal('<div class="eltButton fragButton">Fragment</div>');
});
it('should transform a domFragment element', function() {
var result = offendersHelpers.domPathToButton('DocumentFragment > div#colorbox > div#cboxContent');
result.should.equal('<div class="eltButton fragEltButton opens">Fragment element <b>div#cboxContent</b><div class="domTree"><div><span>DocumentFragment</span><div><span>div#colorbox</span><div><span>div#cboxContent</span></div></div></div></div></div>');
});
it('should transform an not-attached element', function() {
var result = offendersHelpers.domPathToButton('div#sizcache');
result.should.equal('<div class="eltButton aloneButton">Created element <b>div#sizcache</b></div>');
});
it('should transform an not-attached element path', function() {
var result = offendersHelpers.domPathToButton('div > div#sizcache');
result.should.equal('<div class="eltButton aloneEltButton opens">Created element <b>div#sizcache</b><div class="domTree"><div><span>div</span><div><span>div#sizcache</span></div></div></div></div>');
});
});
});