Add a screenshot page

front/src/css/dashboard.css

@@ -29,43 +29,6 @@
   font-weight: bold;
   margin: 0.5em 0 1em;
 }
-.summary .globalScore .screenshotWrapper.desktop {
-  display: inline-block;
-  position: relative;
-  border: 0.2em solid #AAA;
-  background: #000;
-  padding: 0.5em;
-  border-top-left-radius: 0.4em;
-  border-top-right-radius: 0.4em;
-}
-.summary .globalScore .screenshotWrapper.desktop:before {
-  position: absolute;
-  width: 15em;
-  height: 0.6em;
-  bottom: -0.75em;
-  left: -1em;
-  background: #CCC;
-  border-bottom-left-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
-  content: " ";
-}
-.summary .globalScore .screenshotWrapper.desktop:after {
-  position: absolute;
-  width: 0.4em;
-  height: 0.2em;
-  bottom: -0.55em;
-  left: 12.5em;
-  background: lime;
-  content: " ";
-}
-.summary .globalScore .screenshotWrapper.desktop > div {
-  width: 12em;
-  height: 6.75em;
-  overflow: scroll;
-}
-.summary .globalScore .screenshot {
-  width: 100%;
-}
 .summary .notations {
   display: table;
   width: 80%;

front/src/css/main.css

@@ -113,6 +113,43 @@ h1 span {
   margin-top: 4em;
   color: black;
 }
+.screenshotWrapper.desktop {
+  display: inline-block;
+  position: relative;
+  border: 0.2em solid #AAA;
+  background: #000;
+  padding: 0.5em;
+  border-top-left-radius: 0.4em;
+  border-top-right-radius: 0.4em;
+}
+.screenshotWrapper.desktop:before {
+  position: absolute;
+  width: 15em;
+  height: 0.6em;
+  bottom: -0.75em;
+  left: -1em;
+  background: #CCC;
+  border-bottom-left-radius: 0.2em;
+  border-bottom-right-radius: 0.2em;
+  content: " ";
+}
+.screenshotWrapper.desktop:after {
+  position: absolute;
+  width: 0.4em;
+  height: 0.2em;
+  bottom: -0.55em;
+  left: 12.5em;
+  background: lime;
+  content: " ";
+}
+.screenshotWrapper.desktop > div {
+  width: 12em;
+  height: 6.75em;
+  overflow: scroll;
+}
+.screenshotWrapper.desktop .screenshotImage {
+  width: 100%;
+}
 .star {
   font-weight: bold;
 }

front/src/css/screenshot.css

@@ -0,0 +1,7 @@
+.screenshot.board {
+  text-align: center;
+}
+.screenshot .screenshotWrapper {
+  font-size: 2.08333333333333em;
+  margin-bottom: 0.5em;
+}

front/src/js/app.js

@@ -6,6 +6,7 @@ var yltApp = angular.module('YellowLabTools', [
     'dashboardCtrl',
     'queueCtrl',
     'ruleCtrl',
+    'screenshotCtrl',
     'timelineCtrl',
     'runsFactory',
     'resultsFactory',
@@ -46,6 +47,10 @@ yltApp.config(['$routeProvider', '$locationProvider',
                 templateUrl: 'views/timeline.html',
                 controller: 'TimelineCtrl'
             }).
+            when('/result/:runId/screenshot', {
+                templateUrl: 'views/screenshot.html',
+                controller: 'ScreenshotCtrl'
+            }).
             when('/result/:runId/rule/:policy', {
                 templateUrl: 'views/rule.html',
                 controller: 'RuleCtrl'

front/src/js/controllers/screenshotCtrl.js

@@ -0,0 +1,38 @@
+var screenshotCtrl = angular.module('screenshotCtrl', ['resultsFactory', 'menuService']);
+
+screenshotCtrl.controller('ScreenshotCtrl', ['$scope', '$rootScope', '$routeParams', '$location', 'Results', 'Runs', 'Menu', function($scope, $rootScope, $routeParams, $location, Results, Runs, Menu) {
+    $scope.runId = $routeParams.runId;
+    $scope.Menu = Menu.setCurrentPage(null, $scope.runId);
+    
+    function loadResults() {
+        // Load result if needed
+        if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
+            Results.get({runId: $routeParams.runId}, function(result) {
+                $rootScope.loadedResult = result;
+                $scope.result = result;
+                init();
+            }, function(err) {
+                $scope.error = true;
+            });
+        } else {
+            $scope.result = $rootScope.loadedResult;
+            init();
+        }
+    }
+
+    function init() {
+        
+    }
+
+    $scope.testAgain = function() {
+        Runs.save({
+                url: $scope.result.params.url,
+                waitForResponse: false,
+                screenshot: true
+            }, function(data) {
+                $location.path('/queue/' + data.runId);
+            });
+    };
+
+    loadResults();
+}]);

front/src/less/dashboard.less

@@ -32,48 +32,6 @@
         font-weight: bold;
         margin: 0.5em 0 1em;
     }
-
-    .screenshotWrapper.desktop {
-        display: inline-block;
-        position: relative;
-        border: 0.2em solid #AAA;
-        background: #000;
-        padding: 0.5em;
-        border-top-left-radius: 0.4em;
-        border-top-right-radius: 0.4em;
-
-        &:before {
-            position: absolute;
-            width: 15em;
-            height: 0.6em;
-            bottom: -0.75em;
-            left: -1em;
-            background: #CCC;
-            border-bottom-left-radius: 0.2em;
-            border-bottom-right-radius: 0.2em;
-            content: " ";
-        }
-
-        &:after {
-            position: absolute;
-            width: 0.4em;
-            height: 0.2em;
-            bottom: -0.55em;
-            left: 12.5em;
-            background: lime;
-            content: " ";
-        }
-
-        > div {
-            width: 12em;
-            height: 6.75em;
-            overflow: scroll;
-        }
-    }
-
-    .screenshot {
-        width: 100%;
-    }
 }
 
 .summary .notations {

front/src/less/main.less

@@ -113,6 +113,49 @@ h1 span {
 }
 
 
+.screenshotWrapper.desktop {
+    display: inline-block;
+    position: relative;
+    border: 0.2em solid #AAA;
+    background: #000;
+    padding: 0.5em;
+    border-top-left-radius: 0.4em;
+    border-top-right-radius: 0.4em;
+
+    &:before {
+        position: absolute;
+        width: 15em;
+        height: 0.6em;
+        bottom: -0.75em;
+        left: -1em;
+        background: #CCC;
+        border-bottom-left-radius: 0.2em;
+        border-bottom-right-radius: 0.2em;
+        content: " ";
+    }
+
+    &:after {
+        position: absolute;
+        width: 0.4em;
+        height: 0.2em;
+        bottom: -0.55em;
+        left: 12.5em;
+        background: lime;
+        content: " ";
+    }
+
+    > div {
+        width: 12em;
+        height: 6.75em;
+        overflow: scroll;
+    }
+
+    .screenshotImage {
+        width: 100%;
+    }
+}
+
+
 .star {
     font-weight: bold;
     span {

front/src/less/screenshot.less

@@ -0,0 +1,8 @@
+.screenshot.board {
+    text-align: center;
+}
+
+.screenshot .screenshotWrapper {
+    font-size: 2.08333333333333em;
+    margin-bottom: 0.5em;
+}

front/src/main.html

@@ -12,6 +12,7 @@
     <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/screenshot.css">
     <link rel="stylesheet" type="text/css" href="/css/timeline.css">
     <link rel="stylesheet" type="text/css" href="/css/about.css">
     <!-- endbuild -->
@@ -27,6 +28,7 @@
     <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/screenshotCtrl.js"></script>
     <script src="/js/controllers/timelineCtrl.js"></script>
     <script src="/js/models/resultsFactory.js"></script>
     <script src="/js/models/runsFactory.js"></script>

front/src/views/dashboard.html

@@ -10,11 +10,13 @@
             </div>
         </div>
         <div>
-            <div class="screenshotWrapper desktop">
-                <div>
-                    <img class="screenshot" ng-src="{{result.screenshotUrl}}"/>
+            <a href="/result/{{result.runId}}/screenshot">
+                <div class="screenshotWrapper desktop">
+                    <div>
+                        <img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
+                    </div>
                 </div>
-            </div>
+            </a>
         </div>
     </div>
 

front/src/views/screenshot.html

@@ -0,0 +1,14 @@
+<div ng-include="'views/resultSubHeader.html'"></div>
+<div class="screenshot board">
+    <h2>Screenshot</h2>
+
+    <div class="screenshotWrapper desktop">
+        <div>
+            <img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
+        </div>
+    </div>
+
+    <p>(scroll on the screenshot to see under the fold)</p>
+
+    <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
+</div>

lib/screenshotHandler.js

@@ -96,7 +96,7 @@ var screenshotHandler = function() {
     this.toBuffer = function(image) {
         var deferred = Q.defer();
 
-        image.toBuffer('jpg', {quality: 85}, function(err, buffer){
+        image.toBuffer('jpg', {quality: 90}, function(err, buffer){
             if (err) {
                 debug('Could not save image to buffer');
                 debug(err);

lib/server/controllers/frontController.js

@@ -7,7 +7,7 @@ var FrontController = function(app) {
     var cacheDuration = 365 * 24 * 60 * 60 * 1000; // One year
     var assetsPath = (app.get('env') === 'development') ? '../../../front/src' : '../../../front/build';
     
-    var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/rule/:policy', '/queue/:runId'];
+    var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/screenshot', '/result/:runId/rule/:policy', '/queue/:runId'];
     routes.forEach(function(route) {
         app.get(route, function(req, res) {
             res.setHeader('Cache-Control', 'public, max-age=20');