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

Front-end build for perfs - #11

Browse Source
This commit is contained in:
Gaël Métais
2015-01-09 13:54:00 +01:00
parent 7c8ffec254
commit db39e79cf7
16 changed files with 209 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/css/icons.css
+1 -1
View File
@@ -1,6 +1,6 @@
@font-face {
font-family: "fontsmith-icons";
src: url("/front/fonts/icons.woff") format("woff");
src: url("/fonts/icons.woff") format("woff");
font-weight: normal;
font-style: normal;
}
front/src/css/main.css
+1 -1
View File
@@ -1,6 +1,6 @@
@font-face {
font-family: "fontsmith-icons";
src: url("/front/fonts/icons.woff") format("woff");
src: url("/fonts/icons.woff") format("woff");
font-weight: normal;
font-style: normal;
}
front/src/fonts/icons.woff
BIN
View File
Binary file not shown.
front/src/js/app.js
+6 -6
View File
@@ -25,27 +25,27 @@ yltApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'front/views/index.html',
templateUrl: 'views/index.html',
controller: 'IndexCtrl'
}).
when('/queue/:runId', {
templateUrl: 'front/views/queue.html',
templateUrl: 'views/queue.html',
controller: 'QueueCtrl'
}).
when('/about', {
templateUrl: 'front/views/about.html',
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
}).
when('/result/:runId', {
templateUrl: 'front/views/dashboard.html',
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl'
}).
when('/result/:runId/timeline', {
templateUrl: 'front/views/timeline.html',
templateUrl: 'views/timeline.html',
controller: 'TimelineCtrl'
}).
when('/result/:runId/rule/:policy', {
templateUrl: 'front/views/rule.html',
templateUrl: 'views/rule.html',
controller: 'RuleCtrl'
}).
otherwise({
front/src/less/icons.less
+10 -10
View File
@@ -1,24 +1,24 @@
@lab-font-family: "fontsmith-icons";
@lab-value: "\e004";
@lab: '"fontsmith-icons"' '"\\e004"';
@list-font-family: "fontsmith-icons";
@list-value: "\e003";
@list: '"fontsmith-icons"' '"\\e003"';
@loop-font-family: "fontsmith-icons";
@loop-value: "\e002";
@loop: '"fontsmith-icons"' '"\\e002"';
@warning-font-family: "fontsmith-icons";
@warning-value: "\e000";
@warning: '"fontsmith-icons"' '"\\e000"';
@question-font-family: "fontsmith-icons";
@question-value: "\e001";
@question: '"fontsmith-icons"' '"\\e001"';
@lab-font-family: "fontsmith-icons";
@lab-value: "\e004";
@lab: '"fontsmith-icons"' '"\\e004"';
@list-font-family: "fontsmith-icons";
@list-value: "\e003";
@list: '"fontsmith-icons"' '"\\e003"';
@bars-font-family: "fontsmith-icons";
@bars-value: "\e005";
@bars: '"fontsmith-icons"' '"\\e005"';
@arrow-left3-font-family: "fontsmith-icons";
@arrow-left3-value: "\e006";
@arrow-left3: '"fontsmith-icons"' '"\\e006"';
@loop-font-family: "fontsmith-icons";
@loop-value: "\e002";
@loop: '"fontsmith-icons"' '"\\e002"';
.icon-font-family(@char) {
font-family: ~`@{char}[0]`;
@@ -49,7 +49,7 @@
@font-face {
font-family: "fontsmith-icons";
src:url("/front/fonts/icons.woff") format("woff"),
src:url("/fonts/icons.woff") format("woff"),
;
font-weight: normal;
font-style: normal;
front/src/main.html
+24 -26
View File
@@ -3,30 +3,34 @@
<meta charset="utf-8">
<title>Yellow Lab Tools</title>
<base href="/">
<link rel="icon" type="image/png" href="/public/img/favicon.png">
<link rel="icon" type="image/png" href="/img/favicon.png">
<link rel="stylesheet" type="text/css" href="/front/css/main.css">
<link rel="stylesheet" type="text/css" href="/front/css/index.css">
<link rel="stylesheet" type="text/css" href="/front/css/dashboard.css">
<link rel="stylesheet" type="text/css" href="/front/css/queue.css">
<link rel="stylesheet" type="text/css" href="/front/css/rule.css">
<link rel="stylesheet" type="text/css" href="/front/css/timeline.css">
<link rel="stylesheet" type="text/css" href="/front/css/about.css">
<!-- build:css /css/styles.css-->
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link rel="stylesheet" type="text/css" href="/css/dashboard.css">
<link rel="stylesheet" type="text/css" href="/css/queue.css">
<link rel="stylesheet" type="text/css" href="/css/rule.css">
<link rel="stylesheet" type="text/css" href="/css/timeline.css">
<link rel="stylesheet" type="text/css" href="/css/about.css">
<!-- endbuild -->
<!-- build:js /js/all.js -->
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/front/js/app.js"></script>
<script src="/front/js/controllers/indexCtrl.js"></script>
<script src="/front/js/controllers/aboutCtrl.js"></script>
<script src="/front/js/controllers/dashboardCtrl.js"></script>
<script src="/front/js/controllers/queueCtrl.js"></script>
<script src="/front/js/controllers/ruleCtrl.js"></script>
<script src="/front/js/controllers/timelineCtrl.js"></script>
<script src="/front/js/models/resultsFactory.js"></script>
<script src="/front/js/models/runsFactory.js"></script>
<script src="/front/js/services/menuService.js"></script>
<script src="/front/js/directives/gradeDirective.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/indexCtrl.js"></script>
<script src="/js/controllers/aboutCtrl.js"></script>
<script src="/js/controllers/dashboardCtrl.js"></script>
<script src="/js/controllers/queueCtrl.js"></script>
<script src="/js/controllers/ruleCtrl.js"></script>
<script src="/js/controllers/timelineCtrl.js"></script>
<script src="/js/models/resultsFactory.js"></script>
<script src="/js/models/runsFactory.js"></script>
<script src="/js/services/menuService.js"></script>
<script src="/js/directives/gradeDirective.js"></script>
<!-- endbuild -->
<head>
<body ng-app="YellowLabTools">
@@ -38,13 +42,7 @@
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
if ('@@googleAnalyticsId'.indexOf('UA-') === 0) {
ga('create', '@@googleAnalyticsId', 'auto');
}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');if('@@googleAnalyticsId'.indexOf('UA-')===0){ga('create','@@googleAnalyticsId','auto');}
</script>
</body>
</html>
front/src/views/dashboard.html
+3 -6
View File
@@ -1,4 +1,4 @@
<div ng-include="'/front/views/resultSubHeader.html'"></div>
<div ng-include="'views/resultSubHeader.html'"></div>
<div class="summary board">
<div class="globalScore" ng-if="globalScore === 0 || globalScore > 0">
@@ -16,11 +16,8 @@
<div class="category">{{category.label}}</div>
<div class="criteria">
<div class="table" title="Click to see details">
<div ng-repeat="ruleName in category.rules"
ng-if="result.rules[ruleName]"
ng-init="rule = result.rules[ruleName]"
ng-class="{'warning': rule.abnormal}"
ng-click="showRulePage(ruleName)">
<div ng-repeat="ruleName in category.rules" ng-if="result.rules[ruleName]" ng-init="rule = result.rules[ruleName]"
ng-class="{'warning': rule.abnormal}" ng-click="showRulePage(ruleName)">
<div class="grade">
<grade score="rule.score"></grade>
</div>
front/src/views/queue.html
+1 -3
View File
@@ -8,9 +8,7 @@
</div>
<div ng-if="status.statusCode == 'awaiting'">
<div class="status">
<ng-pluralize count="status.position" when="{
'one': 'Waiting behind 1 other test',
'other': 'Waiting behind {} other tests'}">
<ng-pluralize count="status.position" when="{'one': 'Waiting behind 1 other test', 'other': 'Waiting behind {} other tests'}">
</ng-pluralize>
</div>
<p class="statusSubMessage">(auto-refresh activated)</p>
front/src/views/rule.html
+2 -5
View File
@@ -1,4 +1,4 @@
<div ng-include="'/front/views/resultSubHeader.html'"></div>
<div ng-include="'views/resultSubHeader.html'"></div>
<div class="rule board">
<div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
@@ -19,10 +19,7 @@
</div>
<div class="offenders">
<h3>
<ng-pluralize count="rule.offenders.length || 0"
when="{'0': 'No offenders',
'one': '1 offender',
'other': '{} offenders'}">
<ng-pluralize count="rule.offenders.length || 0" when="{'0': 'No offenders', 'one': '1 offender', 'other': '{} offenders'}">
</ng-pluralize>
</h3>
<div class="offendersTable">
front/src/views/timeline.html
+16 -21
View File
@@ -1,4 +1,4 @@
<div ng-include="'/front/views/resultSubHeader.html'"></div>
<div ng-include="'views/resultSubHeader.html'"></div>
<div class="execution board">
<h2>Javascript Timeline</h2>
<p>This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.</p>
@@ -9,14 +9,14 @@
<div ng-repeat="duration in timeline track by $index"
class="interval"
ng-class="{
domCreation: $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domInteractive,
domInteractive: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domInteractive
&& $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domContentLoaded,
domContentLoaded: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domContentLoaded
&& $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domContentLoadedEnd,
domContentLoadedEnd: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domContentLoadedEnd
&& $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domComplete,
domComplete: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domComplete
domCreation: $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domInteractive,
domInteractive: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domInteractive
&& $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domContentLoaded,
domContentLoaded: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domContentLoaded
&& $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domContentLoadedEnd,
domContentLoadedEnd: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domContentLoadedEnd
&& $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domComplete,
domComplete: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domComplete
}">
<div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
<div class="tooltip detailsOverlay">
@@ -70,14 +70,12 @@
<div><!-- details --></div>
<div>Timestamp</div>
</div>
<div ng-repeat="node in profilerData"
ng-if="(!warningsFilterOn || node.warning || node.error)
&& (!textFilterOn || !textFilter.length || node.searchIndex.indexOf(textFilter) >= 0)"
ng-class="{
showingDetails: node.showDetails,
jsError: node.error,
windowPerformance: node.windowPerformance
}">
<div ng-if="(!warningsFilterOn || node.warning || node.error) && (!textFilterOn || !textFilter.length || node.searchIndex.indexOf(textFilter) >= 0)"
ng-repeat="node in profilerData" ng-class="{
showingDetails: node.showDetails,
jsError: node.error,
windowPerformance: node.windowPerformance
}">
<div class="index">{{$index + 1}}</div>
<div class="type">{{node.data.type}}</div>
@@ -90,10 +88,7 @@
</div>
<div class="details">
<div ng-class="{
'icon-question': !node.warning && !node.error,
'icon-warning': node.warning || node.error
}"
<div ng-class="{'icon-question': !node.warning && !node.error, 'icon-warning': node.warning || node.error}"
ng-click="onNodeDetailsClick(node)"
ng-if="node.data.type != 'jQuery loaded' && node.data.type != 'jQuery version change' && !node.windowPerformance"></div>