WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'analyze-css-0.7.0'

Browse Source
This commit is contained in:
Gaël Métais
2014-11-12 09:04:01 +01:00
parent c85d5042e0 9937670a2e
commit ace02138ff
2 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+36 -1
View File
@@ -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
+3 -1
View File
@@ -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 +