From 312e33d15d655ebe188e4e027965cf12acddc1ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Thu, 25 Sep 2014 18:15:37 +0200
Subject: [PATCH] Handle the case when the CSS parsing fails

---
 app/node_views/results.html       | 22 ++++++++++++++++++++++
 app/public/scripts/resultsCtrl.js | 12 ++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/node_views/results.html b/app/node_views/results.html
index a22f0cb..371bd80 100644
--- a/app/node_views/results.html
+++ b/app/node_views/results.html
@@ -289,6 +289,17 @@
                     <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>
@@ -322,6 +333,17 @@
                     <div class="notation">Bad CSS</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.cssDuplicatedSelectors">
                                 <div class="label">Duplicated selectors</div>
                                 <div class="result">
diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js
index 28f17ad..63f77c1 100644
--- a/app/public/scripts/resultsCtrl.js
+++ b/app/public/scripts/resultsCtrl.js
@@ -70,6 +70,10 @@ 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(),
             domManipulations: getDomManipulationsScore(),
@@ -300,7 +304,9 @@ app.controller('ResultsCtrl', function ($scope) {
     }
 
     function getCSSComplexityScore() {
-        if (!$scope.phantomasResults.metrics.cssRules) {
+        if ($scope.cssParsingError) {
+            return 'F';
+        } else if (!$scope.phantomasResults.metrics.cssRules) {
             return 'NA';
         }
 
@@ -326,7 +332,9 @@ app.controller('ResultsCtrl', function ($scope) {
     }
 
     function getBadCssScore() {
-        if (!$scope.phantomasResults.metrics.cssRules) {
+        if ($scope.cssParsingError) {
+            return 'F';
+        } else if (!$scope.phantomasResults.metrics.cssRules) {
             return 'NA';
         }