Better handling of CSS parsing errors

This commit is contained in:
Gaël Métais
2014-09-26 16:50:42 +02:00
parent 06ea90f073
commit a02fd2496f
4 changed files with 116 additions and 22 deletions
+1
View File
@@ -28,6 +28,7 @@ var PhantomasWrapper = function() {
'analyze-css': true,
'skip-modules': [
'blockDomains', // not needed
'analyzeCss', // overriden
'domComplexity', // overriden
'domMutations', // not compatible with webkit
'domQueries', // overriden
+7 -15
View File
@@ -261,17 +261,6 @@
<div class="notation">CSS complexity</div>
<div class="criteria">
<div class="table">
<div ng-if="cssParsingError">
<div class="label">CSS syntax error</div>
<div class="result"></div>
<div class="info">
<div class="icon-question" ng-click="cssRulesTooltip = true"></div>
<modal-dialog show="cssRulesTooltip" dialog-title="Parsing error while analyzing CSS">
<p>You cannot let this kind of problem on your website!</p>
<p>Use a <a href="http://jigsaw.w3.org/css-validator" target="_blank">CSS validator</a> to find where the syntax error is.</p>
</modal-dialog>
</div>
</div>
<div ng-if="phantomasResults.metrics.cssRules">
<div class="label">Rules count</div>
<div class="result">{{phantomasResults.metrics.cssRules}}</div>
@@ -305,14 +294,17 @@
<div class="notation">Bad CSS</div>
<div class="criteria">
<div class="table">
<div ng-if="cssParsingError">
<div ng-if="phantomasResults.metrics.cssParsingErrors">
<div class="label">CSS syntax error</div>
<div class="result"></div>
<div class="result">
{{phantomasResults.metrics.cssParsingErrors}}
<show-offenders modal-title="CSS syntax errors" metric-name="cssParsingErrors" phantomas-results="phantomasResults"></show-offenders>
</div>
<div class="info">
<div class="icon-question" ng-click="cssRulesTooltip = true"></div>
<modal-dialog show="cssRulesTooltip" dialog-title="Parsing error while analyzing CSS">
<p>You cannot let this kind of problem on your website!</p>
<p>Use a <a href="http://jigsaw.w3.org/css-validator" target="_blank">CSS validator</a> to find where the syntax error is.</p>
<p>Yellow Lab Tools failed to parse a CSS file. I doubt the problem comes from the css parser.</p>
<p>Maybe a <a href="http://jigsaw.w3.org/css-validator" target="_blank">CSS validator</a> can help you.</p>
</modal-dialog>
</div>
</div>
+2 -7
View File
@@ -70,9 +70,6 @@ app.controller('ResultsCtrl', function ($scope) {
});
}
// Check if the CSS was correctly parsed
$scope.cssParsingError = (!$scope.phantomasResults.metrics.cssRules && $scope.phantomasResults.metrics.cssCount > 0);
// Grab the notes
$scope.notations = {
domComplexity: getDomComplexityScore(),
@@ -261,9 +258,7 @@ app.controller('ResultsCtrl', function ($scope) {
}
function getCSSComplexityScore() {
if ($scope.cssParsingError) {
return 'F';
} else if (!$scope.phantomasResults.metrics.cssRules) {
if (!$scope.phantomasResults.metrics.cssRules) {
return 'NA';
}
@@ -289,7 +284,7 @@ app.controller('ResultsCtrl', function ($scope) {
}
function getBadCssScore() {
if ($scope.cssParsingError) {
if ($scope.phantomasResults.metrics.cssParsingErrors) {
return 'F';
} else if (!$scope.phantomasResults.metrics.cssRules) {
return 'NA';