From 9937670a2e0516435af9eba76e209b96dd56818e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Mon, 27 Oct 2014 16:57:51 +0100
Subject: [PATCH] Add rules for cssComplexSelectorsByAttribute and
 cssDuplicatedProperties

---
 app/node_views/results.html       | 37 ++++++++++++++++++++++++++++++-
 app/public/scripts/resultsCtrl.js |  4 +++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/app/node_views/results.html b/app/node_views/results.html
index 3113b2c..879a17e 100644
--- a/app/node_views/results.html
+++ b/app/node_views/results.html
@@ -310,6 +310,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>
@@ -346,7 +368,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}}
@@ -359,6 +381,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">
diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js
index 26248a2..d8c9aaf 100644
--- a/app/public/scripts/resultsCtrl.js
+++ b/app/public/scripts/resultsCtrl.js
@@ -296,7 +296,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';
         }
@@ -324,6 +325,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 +