Merge branch 'analyze-css-0.7.0'

app/node_views/results.html

@@ -309,6 +309,28 @@
                                     </modal-dialog>
                                 </div>
                             </div>
+                            <div ng-if="phantomasResults.metrics.cssComplexSelectorsByAttribute" ng-class="{'warning': phantomasResults.metrics.cssComplexSelectorsByAttribute > 100}">
+                                <div class="label">Complex attributes selector</div>
+                                <div class="result">
+                                    {{phantomasResults.metrics.cssComplexSelectorsByAttribute}}
+                                    <show-offenders modal-title="Complex attributes selector" metric-name="cssComplexSelectorsByAttribute" phantomas-results="phantomasResults"></show-offenders>
+                                </div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssComplexSelectorsByAttributeTooltip = true"></div>
+                                    <modal-dialog show="cssComplexSelectorsByAttributeTooltip" dialog-title="Avoid complex attribute expressions">
+                                        <p>Complex attributes selectors are one of these:
+                                            <ul>
+                                                <li>.foo[type*=bar] (contains bar)</li>
+                                                <li>.foo[type^=bar] (starts with bar)</li>
+                                                <li>.foo[type|=bar] (starts with bar or bar-)</li>
+                                                <li>.foo[type$=bar] (ends with bar)</li>
+                                                <li>.foo[type~=bar baz] (bar or baz)</li>
+                                            </ul>
+                                        </p>
+                                        <p>Their matching process needs more CPU and it has a cost on performances.</p>
+                                    </modal-dialog>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -345,7 +367,7 @@
                                     </modal-dialog>
                                 </div>
                             </div>
-                            <div ng-if="phantomasResults.metrics.cssDuplicatedSelectors" ng-class="{'warning': phantomasResults.metrics.cssDuplicatedSelectors > 100}">
+                            <div ng-if="phantomasResults.metrics.cssDuplicatedSelectors" ng-class="{'warning': phantomasResults.metrics.cssDuplicatedSelectors > 80}">
                                 <div class="label">Duplicated selectors</div>
                                 <div class="result">
                                     {{phantomasResults.metrics.cssDuplicatedSelectors}}
@@ -358,6 +380,19 @@
                                     </modal-dialog>
                                 </div>
                             </div>
+                            <div ng-if="phantomasResults.metrics.cssDuplicatedProperties" ng-class="{'warning': phantomasResults.metrics.cssDuplicatedProperties > 50}">
+                                <div class="label">Duplicated properties</div>
+                                <div class="result">
+                                    {{phantomasResults.metrics.cssDuplicatedProperties}}
+                                    <show-offenders modal-title="Duplicated properties" metric-name="cssDuplicatedProperties" phantomas-results="phantomasResults"></show-offenders>
+                                </div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssDuplicatedPropertiesTooltip = true"></div>
+                                    <modal-dialog show="cssDuplicatedPropertiesTooltip" dialog-title="Remove duplicated properties">
+                                        <p>This is the number of property definitions duplicated within a selector.</p>
+                                    </modal-dialog>
+                                </div>
+                            </div>
                             <div ng-if="phantomasResults.metrics.cssEmptyRules" ng-class="{'warning': phantomasResults.metrics.cssEmptyRules > 100}">
                                 <div class="label">Empty rules</div>
                                 <div class="result">

app/public/scripts/resultsCtrl.js

@@ -262,7 +262,8 @@ app.controller('ResultsCtrl', function ($scope) {
 
         var note = 'A';
         var score = $scope.phantomasResults.metrics.cssRules +
-                    $scope.phantomasResults.metrics.cssComplexSelectors * 5;
+                    $scope.phantomasResults.metrics.cssComplexSelectors * 5 +
+                    $scope.phantomasResults.metrics.cssComplexSelectorsByAttribute * 15;
         if (score > 500) {
             note = 'B';
         }
@@ -290,6 +291,7 @@ app.controller('ResultsCtrl', function ($scope) {
 
         var note = 'A';
         var score = $scope.phantomasResults.metrics.cssDuplicatedSelectors +
+                    $scope.phantomasResults.metrics.cssDuplicatedProperties +
                     $scope.phantomasResults.metrics.cssEmptyRules +
                     $scope.phantomasResults.metrics.cssExpressions * 10 +
                     $scope.phantomasResults.metrics.cssImportants * 2 +