Add a warning message when CSS analyzing fails #2

app/node_views/results.html

@@ -277,6 +277,36 @@
                         </div>
                     </div>
                 </div>
+                <div>
+                    <div ng-if="!phantomasResults.metrics.cssParsingErrors" class="A">A</div>
+                    <div ng-if="phantomasResults.metrics.cssParsingErrors" class="F">F</div>
+                    <div class="notation">CSS syntax errors</div>
+                    <div ng-if="!phantomasResults.metrics.cssParsingErrors" class="criteria"></div>
+                    <div ng-if="phantomasResults.metrics.cssParsingErrors" class="criteria">
+                        <div class="table">
+                            <div class="warning">
+                                <div class="label">CSS files with syntax errors</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="cssParsingErrorsTooltip = true"></div>
+                                    <modal-dialog show="cssParsingErrorsTooltip" dialog-title="Parsing error while analyzing CSS">
+                                        <p>Yellow Lab Tools failed to parse a CSS file. I doubt the problem comes from the css parser.</p>
+                                        <p>
+                                            Direct links to the <b>W3C CSS Validator</b> for the following stylesheet(s):
+                                            <ul>
+                                                <li ng-repeat="stylesheet in cssW3cDirectUrls">
+                                                    <a href="{{stylesheet.w3c}}" target="_blank">{{stylesheet.url}}</a>
+                                                </li>
+                                            </ul>
+                                    </modal-dialog>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div>
                     <div ng-class="notations.cssComplexity">{{notations.cssComplexity}}</div>
                     <div class="notation">CSS complexity</div>
@@ -331,6 +361,11 @@
                                     </modal-dialog>
                                 </div>
                             </div>
+                            <div ng-if="phantomasResults.metrics.cssParsingErrors">
+                                <div class="label">(<ng-pluralize count="phantomasResults.metrics.cssParsingErrors" when="{'one': '1 file', 'other': '{} files'}"></ng-pluralize> couldn't be parsed)</div>
+                                <div class="result"></div>
+                                <div class="info"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -339,20 +374,6 @@
                     <div class="notation">Bad CSS</div>
                     <div class="criteria">
                         <div class="table">
-                            <div ng-if="phantomasResults.metrics.cssParsingErrors" class="warning">
-                                <div class="label">CSS syntax error</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>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>
                             <div ng-if="phantomasResults.metrics.cssImports" class="warning">
                                 <div class="label">Uses of @import</div>
                                 <div class="result">
@@ -518,6 +539,11 @@
                                     </modal-dialog>
                                 </div>
                             </div>
+                            <div ng-if="phantomasResults.metrics.cssParsingErrors">
+                                <div class="label">(<ng-pluralize count="phantomasResults.metrics.cssParsingErrors" when="{'one': '1 file', 'other': '{} files'}"></ng-pluralize> couldn't be parsed)</div>
+                                <div class="result"></div>
+                                <div class="info"></div>
+                            </div>
                         </div>
                     </div>
                 </div>

app/public/scripts/resultsCtrl.js

@@ -64,6 +64,19 @@ app.controller('ResultsCtrl', function ($scope) {
             }
         });
 
+        // If there are some CSS parsing errors, prepare the W3C CSS Validator direct URLs
+        if ($scope.phantomasResults.offenders.cssParsingErrors) {
+            $scope.cssW3cDirectUrls = [];
+            $scope.phantomasResults.offenders.cssParsingErrors.forEach(function(errorString, index) {
+                var stylesheet = errorString.split(' ')[0];
+                var w3cUrl = 'http://jigsaw.w3.org/css-validator/validator?profile=css3&usermedium=all&warning=no&vextwarning=true&lang=en&uri=' + encodeURIComponent(stylesheet);
+                $scope.cssW3cDirectUrls.push({
+                    url: stylesheet,
+                    w3c: w3cUrl
+                });
+            });
+        }
+
         // Grab the notes
         $scope.notations = {
             domComplexity: getDomComplexityScore(),
@@ -283,9 +296,7 @@ app.controller('ResultsCtrl', function ($scope) {
     }
 
     function getBadCssScore() {
-        if ($scope.phantomasResults.metrics.cssParsingErrors) {
-            return 'F';
-        } else if (!$scope.phantomasResults.metrics.cssRules) {
+        if (!$scope.phantomasResults.metrics.cssRules) {
             return 'NA';
         }