Version 1.2.3

Conflicts:
	public/css/site.min.css

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -2,6 +2,7 @@
 # Config files
 config/development.json
 config/production.json
+config/test.json
 
 # Generated npm files
 node_modules

.travis.yml

@@ -0,0 +1,24 @@
+
+# Language/versions
+language: node_js
+node_js:
+  - "0.10"
+
+# Services setup
+services:
+  - mongodb
+
+# Build script
+before_script:
+  - npm install -g grunt-cli
+  - cp config/test.sample.json config/test.json
+  - grunt start-test &
+  - sleep 5 # give server time to start
+script: 'grunt ci'
+
+# Notifications
+notifications:
+ email:
+   - j.robinson@nature.com
+   - perry.harlock@nature.com
+   - rowan.manning@nature.com

CONTRIBUTING.md

@@ -31,8 +31,23 @@ Coding Guidelines
 * Don't commit code without passing tests (run `grunt test`).
 
 
+Versioning
+----------
+
+We use [Semantic Versioning][semver] in this project. The process for releasing a new version is as follows; this should only be done by core contributors – you don't need to include a tagged version in your pull-requests.
+
+* Switch to `master` and merge the `develop` branch into it
+* Update the version number in `package.json` and `README.md`
+* Commit the changes with the message: "Version x.x.x" (x.x.x being the new version number)
+* Tag the commit with the version number (just the numbers, no "version" or "v")
+* Push with tags: `git push --tags`
+* Check out the `develop` branch, merge `master` into it, and push
+* On GitHub, add [release notes][release-notes] for the new version. The title should be "Version x.x.x", and the description should be a list of new features/fixes
+
 
 [bugs]: https://github.com/nature/pa11y-dashboard/issues?labels=bug&state=open
 [ready]: https://github.com/nature/pa11y-dashboard/issues?labels=ready&state=open
 [issues]: https://github.com/nature/pa11y-dashboard/issues
-[milestones]: https://github.com/nature/pa11y-dashboard/issues/milestones
+[milestones]: https://github.com/nature/pa11y-dashboard/issues/milestones
+[release-notes]: https://github.com/nature/pa11y-dashboard/releases
+[semver]: http://semver.org/

Gruntfile.js

@@ -34,6 +34,15 @@ module.exports = function (grunt) {
 			}
 		},
 
+		mochaTest: {
+			functional: {
+				src: ['test/functional/**/*.js'],
+				options: {
+					reporter: 'spec'
+				}
+			}
+		},
+
 		nodemon: {
 			development: {
 				options: {
@@ -43,6 +52,15 @@ module.exports = function (grunt) {
 						NODE_ENV: 'development'
 					}
 				}
+			},
+			test: {
+				options: {
+					cwd: __dirname,
+					file: 'index.js',
+					env: {
+						NODE_ENV: 'test'
+					}
+				}
 			}
 		},
 
@@ -58,7 +76,7 @@ module.exports = function (grunt) {
 						'public/js/vendor/bootstrap/js/dropdown.js',
 						'public/js/vendor/bootstrap/js/tooltip.js',
 						'public/js/vendor/flot/jquery.flot.js',
-						'public/js/vendor/flot/jquery.flot.categories.js',
+						'public/js/vendor/flot/jquery.flot.time.js',
 						'public/js/vendor/flot/jquery.flot.selection.js',
 						'public/js/vendor/flot/jquery.flot.resize.js',
 						'public/js/site.js'
@@ -84,12 +102,15 @@ module.exports = function (grunt) {
 	grunt.loadNpmTasks('grunt-contrib-less');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
 	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.loadNpmTasks('grunt-mocha-test');
 	grunt.loadNpmTasks('grunt-nodemon');
 
 	grunt.registerTask('lint', ['jshint']);
+	grunt.registerTask('test', ['mochaTest']);
 	grunt.registerTask('compile', ['less', 'uglify']);
 	grunt.registerTask('start', ['nodemon:development']);
-	grunt.registerTask('default', ['compile', 'lint']);
+	grunt.registerTask('start-test', ['nodemon:test']);
-	grunt.registerTask('ci', ['compile', 'lint']);
+	grunt.registerTask('default', ['compile', 'lint', 'test']);
+	grunt.registerTask('ci', ['lint', 'test']);
 
 };

README.md

@@ -1,20 +1,21 @@
 pa11y-dashboard
 ===============
 
-pa11y-dashboard is a visual web interface to the [pa11y][pa11y] accessibility reporter.
+pa11y-dashboard is a web interface to the [pa11y][pa11y] accessibility reporter; allowing you to focus on *fixing* issues rather than hunting them down.
 
-**Current Version:** *1.0.0-beta.3*  
+**Current Version:** *1.2.3*  
+**Build Status:** [![Build Status][travis-img]][travis]  
 **Node Version Support:** *0.10*
 
 
-![The Dashboard Page](https://f.cloud.github.com/assets/1225142/1269563/2fc6e4e0-2cfb-11e3-8f49-e74a9d49bb32.jpg)
+![dashboard](https://f.cloud.github.com/assets/1225142/1549567/f0361e72-4de8-11e3-8d14-3fe6900cc15d.jpg)
-![The URL Page](https://f.cloud.github.com/assets/1225142/1297247/f749f3a0-30dd-11e3-9920-583f86f3c8f9.jpg)
+![results-page](https://f.cloud.github.com/assets/1225142/1549568/f225aa54-4de8-11e3-8b25-ef2f405997a3.jpg)
 
 
 Setup
 -----
 
-pa11y-dashboard requires [Node.js][node] 0.10+ and [pa11y-webservice][pa11y-webservice] to be installed and running. You'll need to follow the setup guide for pa11y-webservice before setting up pa11y-dashboard.
+pa11y-dashboard requires [Node.js][node] 0.10+, [PhantomJS][phantom], and [MongoDB][mongo] to be installed. See the [pa11y][pa11y] and [pa11y-webservice][pa11y-webservice] documentation for more information on these dependencies.
 
 You'll then need to clone this repo locally and install dependencies with `npm install`.
 
@@ -23,6 +24,7 @@ Once you have a local clone, you'll need to copy some sample configuration files
 ```sh
 $ cp config/development.sample.json config/development.json
 $ cp config/production.sample.json config/production.json
+$ cp config/test.sample.json config/test.json
 ```
 
 Each of these files defines configurations for a different environment. If you're just running the application locally, then you should be OK with just development configurations. The [available configurations are documented here](#configurations).
@@ -32,9 +34,10 @@ Now that you've got your application configured, you can run in each mode with t
 ```sh
 $ NODE_ENV=production node .   # Run in production
 $ NODE_ENV=development node .  # Run in development
+$ NODE_ENV=test node .         # Run in test
 ```
 
-See [development instructions](#development) for more information about running locally (and restarting automatically when files change).
+Check the [development instructions](#development) for more information about running locally (and restarting automatically when files change).
 
 
 Configurations
@@ -42,26 +45,43 @@ Configurations
 
 The boot configurations for pa11y-dashboard are as follows. Look at the sample JSON files in the repo for example usage.
 
-### webservice
-*(string)* The base URL of the [pa11y-webservice][pa11y-webservice] instance you intend on using.
-
 ### port
 *(number)* The port to run the application on.
 
+### noindex
+*(boolean)* If set to `true` (default), the dashboard will not be indexed by search engines. Set to `false` to allow indexing.
+
+### readonly
+*(boolean)* If set to `true`, users will not be able to add, delete or run URLs (defaults to `false`).
+
+### siteMessage
+*(string)* A message to display prominently on the site home page. Defaults to `null`.
+
+### webservice
+This can either be an object containing [pa11y-webservice configurations][pa11y-webservice-config], or a string which is the base URL of a [pa11y-webservice][pa11y-webservice] instance you are running separately.
+
 
 Development
 -----------
 
 To develop pa11y-dashboard, you'll need to clone the repo and get set up as outlined in the [setup guide](#setup). You'll also need [Grunt][grunt] to be installed globally in order to run tests, you can do this with `npm install -g grunt-cli`.
 
+Once you've done this, you'll need to start the application in test mode with:
+
+```sh
+$ grunt start-test
+```
+
 Now you'll be able to run the following commands:
 
 ```sh
-$ grunt          # Run the lint and test tasks together
+$ grunt             # Run the lint and test tasks together
-$ grunt lint     # Run JSHint with the correct config
+$ grunt lint        # Run JSHint with the correct config
-$ grunt compile  # Compile front-end assets
+$ grunt compile     # Compile front-end assets
-$ grunt start    # Run app in development mode, restarting if files change
+$ grunt start       # Run app in development mode, restarting if files change
-$ grunt watch    # Watch for file changes and compile assets
+$ grunt start-test  # Run app in test mode, restarting if files change
+$ grunt test        # Run functional tests
+$ grunt watch       # Watch for file changes and compile assets
 ```
 
 Code with lint errors or failing tests will not be accepted, please use the build tools outlined above.
@@ -79,7 +99,11 @@ pa11y-dashboard is licensed under the [GNU General Public License 3.0][gpl].
 
 [gpl]: http://www.gnu.org/licenses/gpl-3.0.html
 [grunt]: http://gruntjs.com/
+[mongo]: http://www.mongodb.org/
 [node]: http://nodejs.org/
 [pa11y]: https://github.com/nature/pa11y
 [pa11y-webservice]: https://github.com/nature/pa11y-webservice
-[supervisor]: https://github.com/isaacs/node-supervisor
+[pa11y-webservice-config]: https://github.com/nature/pa11y-webservice#configurations
+[phantom]: http://phantomjs.org/
+[travis]: https://travis-ci.org/nature/pa11y-dashboard
+[travis-img]: https://travis-ci.org/nature/pa11y-dashboard.png?branch=master

app.js

@@ -11,12 +11,18 @@ module.exports = initApp;
 
 // Initialise the application
 function initApp (config, callback) {
+	config = defaultConfig(config);
+
+	var webserviceUrl = config.webservice;
+	if (typeof webserviceUrl == 'object') {
+		webserviceUrl = 'http://' + webserviceUrl.host + ':' + webserviceUrl.port + '/';
+	}
 
 	var app = new EventEmitter();
 	app.address = null;
 	app.express = express();
 	app.server = http.createServer(app.express);
-	app.webservice = createClient(config.webservice);
+	app.webservice = createClient(webserviceUrl);
 
 	// Compression
 	app.express.use(express.compress());
@@ -51,8 +57,12 @@ function initApp (config, callback) {
 		year: (new Date()).getFullYear(),
 		version: pkg.version,
 		repo: pkg.homepage,
-		bugtracker: pkg.bugs
+		bugtracker: pkg.bugs,
+		noindex: config.noindex,
+		readonly: config.readonly,
+		siteMessage: config.siteMessage
 	});
+
 	app.express.use(function (req, res, next) {
 		res.locals.isHomePage = (req.path === '/');
 		res.locals.host = req.host;
@@ -61,12 +71,15 @@ function initApp (config, callback) {
 
 	// Load routes
 	require('./route/index')(app);
-	require('./route/new')(app);
 	require('./route/task/index')(app);
-	require('./route/task/delete')(app);
-	require('./route/task/run')(app);
 	require('./route/result/index')(app);
 	require('./route/result/download')(app);
+	if (!config.readonly) {
+		require('./route/new')(app);
+		require('./route/task/delete')(app);
+		require('./route/task/run')(app);
+		require('./route/task/edit')(app);
+	}
 
 	// Error handling
 	app.express.get('*', function (req, res) {
@@ -93,3 +106,14 @@ function initApp (config, callback) {
 	});
 
 }
+
+// Get default configurations
+function defaultConfig (config) {
+	if (typeof config.noindex !== 'boolean') {
+		config.noindex = true;
+	}
+	if (typeof config.readonly !== 'boolean') {
+		config.readonly = false;
+	}
+	return config;
+}

config/development.sample.json

@@ -1,4 +1,12 @@
 {
-	"webservice": "http://localhost:3000/",
+	"port": 4000,
-	"port": 4000
+	"noindex": true,
+	"readonly": false,
+
+	"webservice": {
+		"database": "mongodb://localhost/pa11y-webservice-dev",
+		"host": "0.0.0.0",
+		"port": 3000,
+		"cron": "0 30 0 * * *"
+	}
 }

config/production.sample.json

@@ -1,4 +1,12 @@
 {
-	"webservice": "http://localhost:3000/",
+	"port": 4000,
-	"port": 4000
+	"noindex": true,
+	"readonly": false,
+
+	"webservice": {
+		"database": "mongodb://localhost/pa11y-webservice",
+		"host": "0.0.0.0",
+		"port": 3000,
+		"cron": "0 30 0 * * *"
+	}
 }

config/test.sample.json

@@ -0,0 +1,12 @@
+{
+	"port": 4000,
+	"noindex": true,
+	"readonly": false,
+
+	"webservice": {
+		"database": "mongodb://localhost/pa11y-webservice-test",
+		"host": "0.0.0.0",
+		"port": 3000,
+		"cron": "0 30 0 * * *"
+	}
+}

index.js

@@ -18,4 +18,14 @@ require('./app')(config, function (err, app) {
 		console.error(chalk.grey(stack.join('\n')));
 	});
 
+	// Start the webservice if required
+	if (typeof config.webservice === 'object') {
+		require('pa11y-webservice')(config.webservice, function (err, webservice) {
+			console.log('');
+			console.log(chalk.underline.cyan('pa11y-webservice started'));
+			console.log(chalk.grey('mode: %s'), process.env.NODE_ENV);
+			console.log(chalk.grey('uri:  %s'), webservice.server.info.uri);
+		});
+	}
+
 });

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pa11y-dashboard",
-	"version": "1.0.0-beta.3",
+	"version": "1.2.3",
 	"private": true,
 
 	"description": "pa11y-dashboard is a visual web interface to the pa11y accessibility reporter",
@@ -25,7 +25,8 @@
 		"express": "~3.4",
 		"express-hbs": "~0.2",
 		"moment": "~2.2",
-		"pa11y-webservice-client-node": "git+ssh://git@github.com:nature/pa11y-webservice-client-node.git#1.0.0-beta.7",
+		"pa11y-webservice": "~1.3",
+		"pa11y-webservice-client-node": "~1.1",
 		"underscore": "~1.5"
 	},
 	"devDependencies": {
@@ -35,10 +36,14 @@
 		"grunt-contrib-less": "~0.8",
 		"grunt-contrib-uglify": "~0.2",
 		"grunt-contrib-watch": "~0.5",
-		"grunt-nodemon": "~0.1"
+		"grunt-mocha-test": "~0.7",
+		"grunt-nodemon": "~0.1",
+		"jsdom": "~0.8",
+		"proclaim": "~2.0",
+		"request": "~2.27"
 	},
 
 	"scripts": {
 		"start": "node ."
 	}
-}
+}

public/js/site.js

@@ -17,8 +17,13 @@ $(document).ready(function(){
             hoverable: true
         },
         xaxis: {
-            mode: 'categories',
+            mode: 'time',
-            tickLength: 0
+            tickLength: 0,
+            minTickSize: [1, 'day'],
+            timeformat: '%d %b'
+        },
+        yaxis: {
+            tickDecimals: 0
         },
         lines: {
             lineWidth: 3
@@ -112,7 +117,7 @@ $(document).ready(function(){
     }
 
     function getXAxisLabel (el) {
-        return el.find('[data-role="category"]').html();
+        return el.find('[data-role="date"]').attr('data-value');
     }
 
     function storeDatum (el, label) {
@@ -132,9 +137,9 @@ $(document).ready(function(){
 
     function getData() {
         return [
-            { color: 'rgb(231, 76, 60)', label: 'Errors', data:  data.error },
+            { color: 'rgb(216, 61, 45)', label: 'Errors', data:  data.error },
-            { color: 'rgb(243, 156, 18)', label: 'Warnings', data:  data.warning  },
+            { color: 'rgb(168, 103, 0)', label: 'Warnings', data:  data.warning  },
-            { color: 'rgb(52, 152, 219)', label: 'Notices', data:  data.notice }
+            { color: 'rgb(23, 123, 190)', label: 'Notices', data:  data.notice }
         ];
     }
 
@@ -167,12 +172,20 @@ $(document).ready(function(){
 
     $.each(datasets, function(key, val) {
         var lowerCaseValue = (val.label.substring(0, val.label.length - 1)).toLowerCase();
-        choiceContainer.append('<li class="text-center '+
+        choiceContainer.append(
-        lowerCaseValue +'"><label for="id' + key +
+            '<li class="text-center ' + lowerCaseValue + '">' +
-        '"><input type="checkbox" name="' + key +
+                '<div class="series-checkbox-container">' +
-        '" checked="checked" id="id' + key +
+                    '<input type="checkbox"' +
-        '"/><span class="stat-type">' + val.label +
+                        'name="' + key + '" ' +
-        '</span></label></li>');
+                        'checked="checked" ' +
+                        'id="id' + key + '"' +
+                        '/>' +
+                    '<label for="id' + key + '">' +
+                        '<span class="stat-type">' + val.label + '</span>' +
+                    '</label>' +
+                '</div>' +
+            '</li>'
+        );
     });
     
     choiceContainer.find('input').click(plotAccordingToChoices);
@@ -192,7 +205,7 @@ $(document).ready(function(){
     }
 
     function showTooltip(x, y, contents) {
-        $('<div data-role="tooltip" class="tooltip in"><div class="tooltip-inner">' +
+        $('<div data-role="tooltip" class="tooltip tooltip-graph in"><div class="tooltip-inner">' +
         contents +
         '</div></div>').css({top: y + 5,left: x + 5}).appendTo('body').fadeIn(200);
     }
@@ -203,8 +216,13 @@ $(document).ready(function(){
             if (previousPoint != item.dataIndex) {
                 previousPoint = item.dataIndex;
                 $('[data-role="tooltip"]').remove();
-                var y = item.datapoint[1].toFixed(0);
+                var count = item.datapoint[1].toFixed(0);
-                var contents = '<h6 class="crunch">' + y + ' ' + item.series.label + '</h6>';
+                var date = $.plot.formatDate(new Date(item.datapoint[0]), '%d %b' +
+                '<small> (%H:%M)</small>');
+                var contents = '<p class="crunch">' +
+                    date + '<br/>' +
+                    count + ' ' + item.series.label +
+                '</[h6]>';
                 showTooltip(item.pageX, item.pageY, contents);
             }
         } else {

public/less/ie8and.less

@@ -0,0 +1,93 @@
+// Making up for the non support of IE8 and IE7 in Bootstrap 3
+
+// Amend the width of container if you want to here
+@container-md-ie8: @container-md;
+
+@grid-adjustment: percentage(@grid-gutter-width / @container-md-ie8);
+
+.ie7, .ie8 {
+	* {
+		box-sizing: content-box;
+	}
+	.clearfix {
+	    *zoom: 1;
+	}
+	ul, ol {
+		margin-left:0;
+	}
+
+	.container {
+		width: @container-md-ie8;
+	}
+
+	.col-md-1,
+	.col-md-2,
+	.col-md-3,
+	.col-md-4,
+	.col-md-5,
+	.col-md-6,
+	.col-md-7,
+	.col-md-8,
+	.col-md-9,
+	.col-md-10,
+	.col-md-11 {
+		float: left;
+	}
+	.col-md-1  { width: percentage((1 / @grid-columns)) - @grid-adjustment; }
+	.col-md-2  { width: percentage((2 / @grid-columns)) - @grid-adjustment; }
+	.col-md-3  { width: percentage((3 / @grid-columns)) - @grid-adjustment; }
+	.col-md-4  { width: percentage((4 / @grid-columns)) - @grid-adjustment; }
+	.col-md-5  { width: percentage((5 / @grid-columns)) - @grid-adjustment; }
+	.col-md-6  { width: percentage((6 / @grid-columns)) - @grid-adjustment; }
+	.col-md-7  { width: percentage((7 / @grid-columns)) - @grid-adjustment; }
+	.col-md-8  { width: percentage((8 / @grid-columns)) - @grid-adjustment; }
+	.col-md-9  { width: percentage((9 / @grid-columns)) - @grid-adjustment; }
+	.col-md-10 { width: percentage((10/ @grid-columns)) - @grid-adjustment; }
+	.col-md-11 { width: percentage((11/ @grid-columns)) - @grid-adjustment; }
+	.col-md-12 { width: 100% - @grid-adjustment; }
+
+	// Push and pull columns for source order changes
+	.col-md-push-0  { left: auto; }
+	.col-md-push-1  { left: percentage((1 / @grid-columns)); }
+	.col-md-push-2  { left: percentage((2 / @grid-columns)); }
+	.col-md-push-3  { left: percentage((3 / @grid-columns)); }
+	.col-md-push-4  { left: percentage((4 / @grid-columns)); }
+	.col-md-push-5  { left: percentage((5 / @grid-columns)); }
+	.col-md-push-6  { left: percentage((6 / @grid-columns)); }
+	.col-md-push-7  { left: percentage((7 / @grid-columns)); }
+	.col-md-push-8  { left: percentage((8 / @grid-columns)); }
+	.col-md-push-9  { left: percentage((9 / @grid-columns)); }
+	.col-md-push-10 { left: percentage((10/ @grid-columns)); }
+	.col-md-push-11 { left: percentage((11/ @grid-columns)); }
+
+	.col-md-pull-0  { right: auto; }
+	.col-md-pull-1  { right: percentage((1 / @grid-columns)); }
+	.col-md-pull-2  { right: percentage((2 / @grid-columns)); }
+	.col-md-pull-3  { right: percentage((3 / @grid-columns)); }
+	.col-md-pull-4  { right: percentage((4 / @grid-columns)); }
+	.col-md-pull-5  { right: percentage((5 / @grid-columns)); }
+	.col-md-pull-6  { right: percentage((6 / @grid-columns)); }
+	.col-md-pull-7  { right: percentage((7 / @grid-columns)); }
+	.col-md-pull-8  { right: percentage((8 / @grid-columns)); }
+	.col-md-pull-9  { right: percentage((9 / @grid-columns)); }
+	.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
+	.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
+
+	// Offsets
+	.col-md-offset-0  { margin-left: 0; }
+	.col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+	.col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+	.col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+	.col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+	.col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+	.col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+	.col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+	.col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+	.col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+	.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+	.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+
+	.clearfix {
+	    *zoom: 1;
+	}
+}

public/less/main.less

@@ -58,4 +58,5 @@
 @import "site-responsive.less";
 
 // Stupid ie
-@import "site-ie8and.less";
+@import "ie8and.less";
+@import "site-ie8and.less";

public/less/site-ie8and.less

@@ -1,75 +1,5 @@
 // Making up for the non support of IE8 and IE7 in Bootstrap 3
 .ie7, .ie8 {
-	.container {
-		width: @container-md;
-	}
-	.col-md-1,
-	.col-md-2,
-	.col-md-3,
-	.col-md-4,
-	.col-md-5,
-	.col-md-6,
-	.col-md-7,
-	.col-md-8,
-	.col-md-9,
-	.col-md-10,
-	.col-md-11 {
-		float: left;
-	}
-	.col-md-1  { width: percentage((1 / @grid-columns)); }
-	.col-md-2  { width: percentage((2 / @grid-columns)); }
-	.col-md-3  { width: percentage((3 / @grid-columns)); }
-	.col-md-4  { width: percentage((4 / @grid-columns)); }
-	.col-md-5  { width: percentage((5 / @grid-columns)); }
-	.col-md-6  { width: percentage((6 / @grid-columns)); }
-	.col-md-7  { width: percentage((7 / @grid-columns)); }
-	.col-md-8  { width: percentage((8 / @grid-columns)); }
-	.col-md-9  { width: percentage((9 / @grid-columns)); }
-	.col-md-10 { width: percentage((10/ @grid-columns)); }
-	.col-md-11 { width: percentage((11/ @grid-columns)); }
-	.col-md-12 { width: 100%; }
-
-	// Push and pull columns for source order changes
-	.col-md-push-0  { left: auto; }
-	.col-md-push-1  { left: percentage((1 / @grid-columns)); }
-	.col-md-push-2  { left: percentage((2 / @grid-columns)); }
-	.col-md-push-3  { left: percentage((3 / @grid-columns)); }
-	.col-md-push-4  { left: percentage((4 / @grid-columns)); }
-	.col-md-push-5  { left: percentage((5 / @grid-columns)); }
-	.col-md-push-6  { left: percentage((6 / @grid-columns)); }
-	.col-md-push-7  { left: percentage((7 / @grid-columns)); }
-	.col-md-push-8  { left: percentage((8 / @grid-columns)); }
-	.col-md-push-9  { left: percentage((9 / @grid-columns)); }
-	.col-md-push-10 { left: percentage((10/ @grid-columns)); }
-	.col-md-push-11 { left: percentage((11/ @grid-columns)); }
-
-	.col-md-pull-0  { right: auto; }
-	.col-md-pull-1  { right: percentage((1 / @grid-columns)); }
-	.col-md-pull-2  { right: percentage((2 / @grid-columns)); }
-	.col-md-pull-3  { right: percentage((3 / @grid-columns)); }
-	.col-md-pull-4  { right: percentage((4 / @grid-columns)); }
-	.col-md-pull-5  { right: percentage((5 / @grid-columns)); }
-	.col-md-pull-6  { right: percentage((6 / @grid-columns)); }
-	.col-md-pull-7  { right: percentage((7 / @grid-columns)); }
-	.col-md-pull-8  { right: percentage((8 / @grid-columns)); }
-	.col-md-pull-9  { right: percentage((9 / @grid-columns)); }
-	.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
-	.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
-
-	// Offsets
-	.col-md-offset-0  { margin-left: 0; }
-	.col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
-	.col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
-	.col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
-	.col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
-	.col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
-	.col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
-	.col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
-	.col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
-	.col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
-	.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
-	.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
-
 	.legend {
 		display: block;
 		width: 100%;
@@ -83,9 +13,6 @@
 	.tooltip-inner {
 		background-color: #000000;
 	}
-	.clearfix {
-	    *zoom: 1;
-	}
 	.date {
 		font-size:85%;
 	}
@@ -98,34 +25,30 @@
 	.stat-type {
 		font-size:floor(@font-size-base * 0.65); // ~10px;
 	}
+	.aside .action-buttons .btn {
+		width:79%;
+	}
+	.pull-right.dropdown-menu {
+		right:134px;
+	}
+	.run-details .pull-right.dropdown-menu {
+		right:64px;
+	}
+	.date-selector .btn-full-width {
+		width:90%;
+	}
 }
 
 .ie7 {
-	ul {
-		margin-left:0;
-	}
-	.col-md-2 { width:14%; }
-	.col-md-3 { width:22%; }
-	.col-md-4  {
-		width: 32%;
-		padding:0 5px;
-	}
-	.col-md-9 { width:72%; }
-	.col-md-10 { width:80%; } 
-	.col-md-12 { width: 97%; }
-
 	.aside .task-stats li {
 		width:31.5%;
 	}
-	.aside .action-buttons .btn {
-		width:79%;
-	}
 	.date-selector {
 		zoom:1;
 	}
 	.zfix {
 		position:relative;
-		z-index:100;
+		z-index:1001;
 	}
 	.list-group li .list-group-item {
 		margin:0;
@@ -137,5 +60,24 @@
 	}
 	.date-selector {
 		margin-top:-155px;
+
+		.btn-full-width {
+			width:100%;
+		}
 	}
-}
+	.sr-only {
+		position:relative;
+	}
+	.breadcrumb li {
+		vertical-align: top;
+		zoom: 1;
+		display: inline;
+		margin-right:10px;
+	}
+	.pull-right.dropdown-menu {
+		right:0px;
+	}
+	.run-details .pull-right.dropdown-menu {
+		right:82px;
+	}
+}

public/less/site-nojavascript.less

@@ -10,7 +10,7 @@
 	.date-links.hidden {
 		display:none !important;
 	}
-	.date-selector .btn-group:hover ul.date-links {
+	.btn-group:hover ul {
 		display:block !important;
 	}
 	table.hidden {

public/less/site-responsive.less

@@ -32,16 +32,17 @@
 	.date {
 		margin-top:10px;
 		float:right;
-		font-size:;
 	}
 	.other-tasks {
 		.sr-only();
 	}
-	.action-buttons,
 	.task-stats,
 	.btn-full-width {
 		margin-bottom:0;
 	}
+	.action-buttons {
+		margin-bottom:20px;
+	}
 	.aside {
 		margin-bottom:15px;
 	}
@@ -55,7 +56,7 @@
 			float:none;
 
 			li {
-				width:33%;
+				width:25%;
 			}
 		}
 	}
@@ -65,12 +66,18 @@
 		margin-top:0;
 		margin-bottom:25px;
 	}
+	.readonly-mode .date {
+		margin-top:0;
+		margin-bottom:5px;
+		float:none;
+	}
 	.graph-spacer {
 		padding-bottom:20px;
 		margin-bottom:15px;
 	}
 	.action-buttons {
 		margin-top:10px;
+		margin-bottom:0;
 
 		.btn-full-width {
 			margin-bottom:10px;
@@ -122,6 +129,11 @@
 			margin-bottom:20px;
 		}
 	}
+	.footer .nav {
+		li {
+			width:50%;
+		}
+	}
 }
 @media (max-width:479px) {
 	.graph {
@@ -131,6 +143,15 @@
 	.series-checkboxes li {
 		font-size:floor(@font-size-base * 0.8); // ~12px;
 	}
+	.task-header .h3 {
+		float:none !important;
+		text-align:center;
+		margin-bottom:15px !important;
+		padding:10px;
+	}
+	.task-header h1 {
+		margin-bottom:3px;
+	}
 }
 @media (max-width:360px) {
 	.delete-button {
@@ -157,4 +178,4 @@
 			}
 		}
 	}
-}
+}

public/less/site.less

@@ -70,7 +70,7 @@
 }
 .dropdown-toggle {
 	margin-top:0;
-	margin-bottom:10px;
+	margin-bottom:5px;
 }
 .list-group {
 	li .list-group-item {
@@ -86,15 +86,24 @@
 		border-bottom-right-radius:3px;
 		margin-bottom:0;
 	}
-} 
+}
-.delete-button {
+.options-button {
 	position:absolute;
 	top:5px;
 	right:20px;
-	color:@brand-danger;
 }
-.delete-button:hover {
+.footer a, .breadcrumb a {
-	color:lighten(@brand-danger, 8%);
+	text-decoration:underline;
+}
+.breadcrumb a {
+	&:hover, &:active, &:focus {
+		text-decoration: none;
+	}
+}
+.site-message {
+	.glyphicon {
+		margin-right:6px;
+	}
 }
 
 /* Type */
@@ -175,10 +184,10 @@
 		transition: background 0.5s;
 		-webkit-transition: background 0.5s;
 	}
-	.delete-button {
+	.options-button {
 		display:none;
 	}
-	&:hover .delete-button {
+	&:hover .options-button {
 		display:block;
 	}
 	.task-card-link:hover,
@@ -198,6 +207,9 @@
 		text-align:center;
 		color:@badge-color;
 	}
+	.dropdown-menu {
+		top:25px;
+	}
 }
 
 
@@ -219,13 +231,23 @@
 .task-header {
 	margin-bottom:30px;
 
+	h1 {
+		margin-bottom:6px;
+	}
+
 	h2 {
 		word-wrap:break-word;
 	}
+	.h4 {
+		margin-bottom:22px;
+	}
 }
 .date {
 	margin-top:5px;
 }
+.readonly-mode .date {
+	margin-top:40px;
+}
 .tasks-list {
 	padding:15px;
 	margin-bottom:30px;
@@ -301,7 +323,7 @@ ul.date-links {
 	}
 
 	&.single-result {
-		margin-top:-55px;
+		margin-top:-52px;
 
 		.show-stats {
 			display:none;
@@ -327,19 +349,27 @@ ul.date-links {
 }
 .series-checkboxes {
 	margin-top:15px;
-	
+
 	li {
 		width:32%;
 		margin-right:2%;
 		border-radius: @border-radius-base;
 
 		label {
-			padding:2px 4px;
 			margin-bottom:0;
 		}
 
+		.series-checkbox-container {
+			padding:2px 4px 3px 4px;
+		}
+
+		input {
+			margin:5px auto 3px auto;
+		}
+
 		input, label {
 			cursor: pointer;
+			display:block;
 		}
 
 		&:last-child {
@@ -355,6 +385,14 @@ ul.date-links {
 	margin-top:-24px;
 	margin-right:35px
 }
+.flot-x-axis {
+	.flot-tick-label {
+		max-width:45px !important;
+	}
+}
+.tooltip-graph {
+	font-size:12px;
+}
 
 /* New task page */
 .standards-lists {
@@ -378,8 +416,3 @@ ul.date-links {
 		}
 	}
 }
-
-/* Sidebar */
-.action-buttons {
-	margin-bottom:30px;
-}

public/less/variables-flatly.less

@@ -13,16 +13,16 @@
 @gray-dark:              #616D6E;
 @gray:                   #6C7878;
 @gray-light:             #7C8C8D;
-@gray-lighter:           #ecf0f1;
+@gray-lighter:           #eaeff1;
 
 // Brand colors
 // -------------------------
 
 @brand-primary:         #2C3E50;
-@brand-success:         #00A18C;
+@brand-success:         #00806F;
-@brand-warning:         #F39C12;
+@brand-warning:         #A86700;
-@brand-danger:          #E74C3C;
+@brand-danger:          #D83D2D;
-@brand-info:            #3498DB;
+@brand-info:            #177BBE;
 
 // Scaffolding
 // -------------------------
@@ -551,7 +551,7 @@
 // Breadcrumbs
 // -------------------------
 @breadcrumb-bg:               lighten(@gray-lighter, 4%);
-@breadcrumb-color:            lighten(@gray-dark, 3%);
+@breadcrumb-color:            @gray-dark;
 @breadcrumb-active-color:     @breadcrumb-color;
 
 

route/result/download.js

@@ -46,13 +46,13 @@ function route (app) {
     app.express.get('/:id/:rid.csv', getTaskAndResult, function (req, res) {
         var task = res.locals.task;
         var result = res.locals.result;
-        var rows = ['"code", "message", "type"'];
+        var rows = ['"code","message","type"'];
         result.results.forEach(function (msg) {
             rows.push([
                 JSON.stringify(msg.code),
                 JSON.stringify(msg.message),
                 JSON.stringify(msg.type)
-            ].join(', '));
+            ].join(','));
         });
         res.attachment(getDownloadFileName(task, result, 'csv'));
         res.send(rows.join('\n'));

route/task/delete.js

@@ -15,7 +15,7 @@ function route (app) {
 			}
 			res.render('task/delete', {
 				task: presentTask(task),
-				isTaskPage: true
+				isTaskSubPage: true
 			});
 		});
 	});

route/task/edit.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var _ = require('underscore');
+var presentTask = require('../../view/presenter/task');
+var getStandards = require('../../data/standards');
+
+module.exports = route;
+
+// Route definition
+function route (app) {
+
+	app.express.get('/:id/edit', function (req, res, next) {
+		app.webservice.task(req.params.id).get({}, function (err, task) {
+			if (err) {
+				return next();
+			}
+			var standards = getStandards().map(function (standard) {
+				if (standard.title === task.standard) {
+					standard.selected = true;
+				}
+				standard.rules = standard.rules.map(function (rule) {
+					if (task.ignore.indexOf(rule.name) !== -1) {
+						rule.ignored = true;
+					}
+					return rule;
+				});
+				return standard;
+			});
+			res.render('task/edit', {
+				edited: (typeof req.query.edited !== 'undefined'),
+				standards: standards,
+				task: presentTask(task),
+				isTaskSubPage: true
+			});
+		});
+	});
+
+	app.express.post('/:id/edit', function (req, res, next) {
+		app.webservice.task(req.params.id).get({}, function (err, task) {
+			if (err) {
+				return next();
+			}
+			req.body.ignore = req.body.ignore || [];
+			app.webservice.task(req.params.id).edit(req.body, function (err) {
+				if (err) {
+					task.name = req.body.name;
+					task.ignore = req.body.ignore;
+					var standards = getStandards().map(function (standard) {
+						if (standard.title === task.standard) {
+							standard.selected = true;
+						}
+						standard.rules = standard.rules.map(function (rule) {
+							if (task.ignore.indexOf(rule.name) !== -1) {
+								rule.ignored = true;
+							}
+							return rule;
+						});
+						return standard;
+					});
+					return res.render('task/edit', {
+						error: err,
+						standards: standards,
+						task: task,
+						isTaskSubPage: true
+					});
+				}
+				res.redirect('/' + req.params.id + '/edit?edited');
+			});
+		});
+	});
+
+}

test/functional/helper/navigate.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsdom = require('jsdom');
+var request = require('request');
+
+module.exports = createNavigator;
+
+// Create a navigate function
+function createNavigator (baseUrl, store) {
+	return function (opts, callback) {
+
+		store.body = null;
+		store.dom = null;
+		store.request = null;
+		store.response = null;
+		store.status = null;
+		store.window = null;
+
+		request({
+			url: baseUrl + opts.endpoint,
+			method: opts.method || 'GET',
+			body: opts.body,
+			json: true,
+			qs: opts.query,
+			followAllRedirects: true
+		}, function (err, res, body) {
+
+			store.body = body;
+			store.request = res.request;
+			store.response = res;
+			store.status = res.statusCode;
+
+			if (opts.nonDom) {
+				store.window = null;
+				store.dom = null;
+				callback();
+			} else {
+				jsdom.env(
+					store.body,
+					function (err, window) {
+						store.window = window;
+						store.dom = window.document;
+						callback();
+					}
+				);
+			}
+
+		});
+
+	};
+}

test/functional/helper/webservice.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var createClient = require('pa11y-webservice-client-node');
+
+module.exports = createWebserviceClient;
+
+// Create a webservice client
+function createWebserviceClient (config) {
+	var webserviceUrl = config.webservice;
+	if (typeof webserviceUrl == 'object') {
+		webserviceUrl = 'http://' + webserviceUrl.host + ':' + webserviceUrl.port + '/';
+	}
+	return createClient(webserviceUrl);
+}

test/functional/route/index.js

@@ -0,0 +1,79 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should display an "Add new URL" button', function () {
+		var elem = this.last.dom.querySelectorAll('[data-test=add-task]');
+		assert.strictEqual(elem.length, 1);
+		assert.strictEqual(elem[0].getAttribute('href'), '/new');
+	});
+
+	it('should display all of the expected tasks', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.strictEqual(tasks.length, 3);
+		assert.match(tasks[0].textContent, /npg home\s+\(wcag2aa\)/i);
+		assert.match(tasks[1].textContent, /npg home\s+\(wcag2aaa\)/i);
+		assert.match(tasks[2].textContent, /nature news\s+\(section508\)/i);
+	});
+
+	it('should have links to each task', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001"]').length, 1);
+		assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002"]').length, 1);
+		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003"]').length, 1);
+	});
+
+	it('should display an "Edit" button for each task', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/edit"]').length, 1);
+		assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/edit"]').length, 1);
+		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/edit"]').length, 1);
+	});
+
+	it('should display a "Delete" button for each task', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/delete"]').length, 1);
+		assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/delete"]').length, 1);
+		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/delete"]').length, 1);
+	});
+
+	it('should display a "Run" button for each task', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/run"]').length, 1);
+		assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/run"]').length, 1);
+		assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/run"]').length, 1);
+	});
+
+	it('should display the task result counts if the task has been run', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.match(tasks[0].textContent, /1\s*errors/i);
+		assert.match(tasks[0].textContent, /2\s*warnings/i);
+		assert.match(tasks[0].textContent, /3\s*notices/i);
+	});
+
+	it('should display a message indicating that there are no results if the task has not been run', function () {
+		var tasks = this.last.dom.querySelectorAll('[data-test=task]');
+		assert.match(tasks[2].textContent, /no results/i);
+	});
+
+	it('should not display an alert message', function () {
+		assert.strictEqual(this.last.dom.querySelectorAll('[data-test=alert]').length, 0);
+	});
+
+});

test/functional/route/new.js

@@ -0,0 +1,136 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /new', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/new'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should not display an error message', function () {
+		assert.strictEqual(this.last.dom.querySelectorAll('[data-test=error]').length, 0);
+	});
+
+	it('should have an "Add new URL" form', function () {
+		var form = this.last.dom.querySelectorAll('[data-test=new-url-form]')[0];
+		assert.isDefined(form);
+		assert.strictEqual(form.getAttribute('action'), '/new');
+		assert.strictEqual(form.getAttribute('method'), 'post');
+	});
+
+	describe('"Add New URL" form', function () {
+
+		beforeEach(function () {
+			this.form = this.last.dom.querySelectorAll('[data-test=new-url-form]')[0];
+		});
+
+		it('should have a "name" field', function () {
+			var field = this.form.querySelectorAll('input[name=name]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'text');
+			assert.strictEqual(field.getAttribute('value'), '');
+		});
+
+		it('should have a "url" field', function () {
+			var field = this.form.querySelectorAll('input[name=url]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'url');
+			assert.strictEqual(field.getAttribute('value'), '');
+		});
+
+		it('should have a "standard" field', function () {
+			var field = this.form.querySelectorAll('select[name=standard]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.querySelectorAll('option').length, 4);
+		});
+
+		it('should have "ignore" fields', function () {
+			var fields = this.form.querySelectorAll('input[name="ignore[]"]');
+			assert.isDefined(fields);
+			assert.notStrictEqual(fields.length, 0);
+		});
+
+	});
+
+});
+
+describe('POST /new', function () {
+
+	describe('with invalid query', function () {
+
+		beforeEach(function (done) {
+			var req = {
+				method: 'POST',
+				endpoint: '/new',
+				body: {
+					name: '',
+					url: ''
+				}
+			};
+			this.navigate(req, done);
+		});
+
+		it('should send a 200 status', function () {
+			assert.strictEqual(this.last.status, 200);
+		});
+
+		it('should display an error message', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[data-test=error]').length, 1);
+		});
+
+	});
+
+	describe('with valid query', function () {
+
+		beforeEach(function (done) {
+			var req = {
+				method: 'POST',
+				endpoint: '/new',
+				body: {
+					name: 'Example',
+					url: 'http://example.com/',
+					standard: 'WCAG2AA'
+				}
+			};
+			this.navigate(req, done);
+		});
+
+		it('should send a 200 status', function () {
+			assert.strictEqual(this.last.status, 200);
+		});
+
+		it('should create the task', function (done) {
+			this.webservice.tasks.get({}, function (err, tasks) {
+				assert.strictEqual(tasks.length, 4);
+				done();
+			});
+		});
+
+		it('should redirect me to the new URL page', function () {
+			assert.match(this.last.request.uri.pathname, /^\/[a-z0-9]{24}$/i);
+		});
+
+		it('should not display an error message', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[data-test=error]').length, 0);
+		});
+
+		it('should display a success message', function () {
+			var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+			assert.isDefined(alert);
+			assert.match(alert.textContent, /url has been added/i);
+		});
+
+	});
+
+});

test/functional/route/result/download.js

@@ -0,0 +1,53 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/<result-id>.csv', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/def000000000000000000001.csv',
+			nonDom: true
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should output CSV results', function () {
+		assert.match(this.last.body, /^"code","message","type"/);
+	});
+
+});
+
+describe('GET /<task-id>/<result-id>.json', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/def000000000000000000001.json',
+			nonDom: true
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should output JSON results', function () {
+		var json = this.last.body;
+		assert.strictEqual(json.task.name, 'NPG Home');
+		assert.strictEqual(json.task.url, 'nature.com');
+		assert.strictEqual(json.count.error, 1);
+		assert.strictEqual(json.count.warning, 2);
+		assert.strictEqual(json.count.notice, 3);
+		assert.isArray(json.results);
+	});
+
+});

test/functional/route/result/index.js

@@ -0,0 +1,55 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/<result-id>', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/def000000000000000000001'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should display a "Download CSV" button', function () {
+		var elem = this.last.dom.querySelectorAll('[data-test=download-csv]');
+		assert.strictEqual(elem.length, 1);
+		assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.csv');
+	});
+
+	it('should display a "Download JSON" button', function () {
+		var elem = this.last.dom.querySelectorAll('[data-test=download-json]');
+		assert.strictEqual(elem.length, 1);
+		assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.json');
+	});
+
+	it('should display a link back to the task', function () {
+		assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]')[0]);
+	});
+
+	it('should display errors', function () {
+		var elem = this.last.dom.querySelectorAll('[data-test=task-errors]')[0];
+		assert.isDefined(elem);
+		assert.match(elem.textContent, /errors \( 1 \)/i);
+	});
+
+	it('should display warnings', function () {
+		var elem = this.last.dom.querySelectorAll('[data-test=task-warnings]')[0];
+		assert.isDefined(elem);
+		assert.match(elem.textContent, /warnings \( 2 \)/i);
+	});
+
+	it('should display notices', function () {
+		var elem = this.last.dom.querySelectorAll('[data-test=task-notices]')[0];
+		assert.isDefined(elem);
+		assert.match(elem.textContent, /notices \( 3 \)/i);
+	});
+
+});

test/functional/route/task/delete.js

@@ -0,0 +1,65 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/delete', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/delete'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should have a "Delete URL" form', function () {
+		var form = this.last.dom.querySelectorAll('[data-test=delete-url-form]')[0];
+		assert.isDefined(form);
+		assert.strictEqual(form.getAttribute('action'), '/abc000000000000000000001/delete');
+		assert.strictEqual(form.getAttribute('method'), 'post');
+	});
+
+	it('should display a link back to the task page', function () {
+		assert.greaterThan(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]').length, 0);
+	});
+
+});
+
+describe('POST /<task-id>/delete', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'POST',
+			endpoint: '/abc000000000000000000001/delete'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should delete the task', function (done) {
+		this.webservice.task('abc000000000000000000001').get({}, function (err) {
+			assert.strictEqual(err.message, 'Error 404');
+			done();
+		});
+	});
+
+	it('should redirect me to the home page', function () {
+		assert.strictEqual(this.last.request.uri.pathname, '/');
+	});
+
+	it('should display a success message', function () {
+		var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+		assert.isDefined(alert);
+		assert.match(alert.textContent, /been deleted/i);
+	});
+
+});

test/functional/route/task/edit.js

@@ -0,0 +1,102 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/edit', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/edit'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should have an "Edit URL" form', function () {
+		var form = this.last.dom.querySelectorAll('[data-test=edit-url-form]')[0];
+		assert.isDefined(form);
+		assert.strictEqual(form.getAttribute('action'), '/abc000000000000000000001/edit');
+		assert.strictEqual(form.getAttribute('method'), 'post');
+	});
+
+	it('should display a link back to the task page', function () {
+		assert.greaterThan(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]').length, 0);
+	});
+
+	describe('"Edit URL" form', function () {
+
+		beforeEach(function () {
+			this.form = this.last.dom.querySelectorAll('[data-test=edit-url-form]')[0];
+		});
+
+		it('should have a "name" field', function () {
+			var field = this.form.querySelectorAll('input[name=name]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'text');
+			assert.strictEqual(field.getAttribute('value'), 'NPG Home');
+		});
+
+		it('should have a disabled "url" field', function () {
+			var field = this.form.querySelectorAll('input[name=url]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'url');
+			assert.strictEqual(field.getAttribute('value'), 'nature.com');
+			assert.isDefined(field.getAttribute('disabled'));
+		});
+
+		it('should have a disabled "standard" field', function () {
+			var field = this.form.querySelectorAll('select[name=standard]')[0];
+			assert.isDefined(field);
+			assert.isDefined(field.getAttribute('disabled'));
+		});
+
+		it('should have "ignore" fields', function () {
+			var fields = this.form.querySelectorAll('input[name="ignore[]"]');
+			assert.isDefined(fields);
+			assert.notStrictEqual(fields.length, 0);
+		});
+
+	});
+
+});
+
+describe('POST /<task-id>/edit', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'POST',
+			endpoint: '/abc000000000000000000001/edit',
+			body: {
+				name: 'foo',
+				ignore: ['bar', 'baz']
+			}
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should edit the task', function (done) {
+		this.webservice.task('abc000000000000000000001').get({}, function (err, task) {
+			assert.strictEqual(task.name, 'foo');
+			assert.deepEqual(task.ignore, ['bar', 'baz']);
+			done();
+		});
+	});
+
+	it('should display a success message', function () {
+		var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+		assert.isDefined(alert);
+		assert.match(alert.textContent, /been saved/i);
+	});
+
+});
+

test/functional/route/task/index.js

@@ -0,0 +1,96 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>', function () {
+
+	describe('when task has results', function () {
+
+		beforeEach(function (done) {
+			var req = {
+				method: 'GET',
+				endpoint: '/abc000000000000000000001'
+			};
+			this.navigate(req, done);
+		});
+
+		it('should send a 200 status', function () {
+			assert.strictEqual(this.last.status, 200);
+		});
+
+		it('should display an "Edit" button', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/edit"]').length, 1);
+		});
+
+		it('should display a "Delete" button', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/delete"]').length, 1);
+		});
+
+		it('should display a "Run" button', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/run"]').length, 1);
+		});
+
+		it('should display a "Download CSV" button for the latest result', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001.csv"]').length, 1);
+		});
+
+		it('should display a "Download JSON" button for the latest result', function () {
+			assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001.json"]').length, 1);
+		});
+
+		it('should display links to all results', function () {
+			assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001"]')[0]);
+			assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000003"]')[0]);
+		});
+
+		it('should display errors', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=task-errors]')[0];
+			assert.isDefined(elem);
+			assert.match(elem.textContent, /errors \( 1 \)/i);
+		});
+
+		it('should display warnings', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=task-warnings]')[0];
+			assert.isDefined(elem);
+			assert.match(elem.textContent, /warnings \( 2 \)/i);
+		});
+
+		it('should display notices', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=task-notices]')[0];
+			assert.isDefined(elem);
+			assert.match(elem.textContent, /notices \( 3 \)/i);
+		});
+
+	});
+
+	describe('when task has no results', function () {
+
+		beforeEach(function (done) {
+			var req = {
+				method: 'GET',
+				endpoint: '/abc000000000000000000003'
+			};
+			this.navigate(req, done);
+		});
+
+		it('should send a 200 status', function () {
+			assert.strictEqual(this.last.status, 200);
+		});
+
+		it('should display a "Run" button', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=run-task]');
+			assert.strictEqual(elem.length, 1);
+			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000003/run');
+		});
+
+		it('should display a message indicating that there are no results', function () {
+			var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+			assert.isDefined(alert);
+			assert.match(alert.textContent, /there are no results to show/i);
+		});
+
+	});
+
+});

test/functional/route/task/run.js

@@ -0,0 +1,31 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/run', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/run'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should redirect me to the task page', function () {
+		assert.strictEqual(this.last.request.uri.pathname, '/abc000000000000000000001');
+	});
+
+	it('should display a success message', function () {
+		var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+		assert.isDefined(alert);
+		assert.match(alert.textContent, /new results are being generated/i);
+	});
+
+});

test/functional/setup.js

@@ -0,0 +1,36 @@
+/* global afterEach, before */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var config = require('../../config/test.json');
+var createNavigator = require('./helper/navigate');
+var createWebserviceClient = require('./helper/webservice');
+var loadFixtures = require('pa11y-webservice/data/fixture/load');
+var request = require('request');
+
+// Run before all tests
+before(function (done) {
+	this.baseUrl = 'http://localhost:' + config.port;
+	this.last = {};
+	this.navigate = createNavigator(this.baseUrl, this.last);
+	this.webservice = createWebserviceClient(config);
+	assertTestAppIsRunning(this.baseUrl, function () {
+		loadFixtures('test', config.webservice, done);
+	});
+});
+
+// Run after each test
+afterEach(function (done) {
+	loadFixtures('test', config.webservice, done);
+});
+
+// Check that the test application is running, and exit if not
+function assertTestAppIsRunning (url, done) {
+	request(url, function (err) {
+		if (err) {
+			console.error('Error: Test app not started; run with `grunt start-test`');
+			process.exit(1);
+		}
+		done();
+	});
+}

view/helper/date.js

@@ -17,4 +17,9 @@ function helper (register) {
 		return moment(context).fromNow();
 	});
 
+	register('date-timestamp', function (context) {
+		return moment(context).valueOf();
+	});
+
+
 }

view/index.html

@@ -1,7 +1,16 @@
 {{#content "title"}}pa11y-dashboard{{/content}}
 
+{{#if siteMessage}}
+    <div class="col-md-12 clearfix" data-test="alert">
+        <div class="alert alert-info site-message">
+            <h3 class="crunch-top"><span class="pull-left glyphicon glyphicon-exclamation-sign"></span> Important</h3>
+            <p class="h5">{{siteMessage}}</p>
+        </div>
+    </div>
+{{/if}}
+
 {{#deleted}}
-    <div class="col-md-12 clearfix">
+    <div class="col-md-12 clearfix" data-test="alert">
         <div class="alert alert-info">
             <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
             <strong>Bye Bye URL</strong>

view/layout/default.html

@@ -9,13 +9,15 @@
 	<title>{{block "title"}}</title>
 	<meta name="description" content="{{block "description"}}"/>
 
+	{{#if noindex}}<meta name="robots" content="noindex"/>{{/if}}
+
 	<link rel="icon" type="image/png" href="favicon.png" />
 
 	<!-- For mobile devices. -->
 	<meta name="viewport" content="width=device-width"/>
 
 	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,700,900,400italic"/>
-	<link rel="stylesheet" href="/css/site.min.css"/>
+	<link rel="stylesheet" href="/css/site.min.css?v={{version}}"/>
 
 </head>
 <!--[if IE 7]><body class="ie7"><![endif]-->
@@ -30,7 +32,11 @@
 	{{> breadcrumb}}
 
 	<div class="container">
-		<div class="row">
+		{{#if readonly}}
+			<div class="row readonly-mode">
+		{{else}}
+			<div class="row">
+		{{/if}}
 			<section>
 				<div class="section" role="main">
 					{{{body}}}
@@ -41,7 +47,7 @@
 
 	{{> page-footer}}
 
-	<script type="text/javascript" src="/js/site.min.js"></script>
+	<script type="text/javascript" src="/js/site.min.js?v={{version}}"></script>
 	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/vendor/flot/excanvas.min.js"></script><![endif]-->
 
 </body>

view/new.html

@@ -3,14 +3,14 @@
 	Add a new URL
 {{/content}}
 
-<form role="form" class="col-md-12" action="/new" method="post">
+<form role="form" class="col-md-12" action="/new" method="post" data-test="new-url-form">
 
 	<div class="legend">
 		<h1 class="h2 crunch-top">Add a new URL</h1>
 	</div>
 
 	{{#error}}
-		<div class="col-md-12 clearfix">
+		<div class="col-md-12 clearfix" data-test="error">
 			<div class="alert alert-danger">
 				<strong>Oh my gosh!</strong>
 				<p>{{.}}</p>
@@ -58,8 +58,8 @@
 				<ul class="list-unstyled">
 					{{#rules}}
 						<li>
-							<label title="{{description}}" data-role="rules-tooltip" class="checkbox">
+							<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
-								<input type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
+							<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
 								{{name}}
 							</label>
 						</li>

view/partial/breadcrumb.html

@@ -7,13 +7,16 @@
 					{{#if isNewTaskPage}}
 						<li class="active">Add URL</li>
 					{{/if}}
-			  		{{#if isTaskPage}}
+					{{#if isTaskPage}}
-					  <li class="active">{{simplify-url task.url}}</li>
+					  <li class="active">{{task.name}}</li>
+					{{/if}}
+					{{#if isTaskSubPage}}
+						<li><a href="{{task.href}}">{{task.name}}</a></li>
 					{{/if}}
 					{{#if isResultPage}}
-						<li><a href="{{task.href}}">{{simplify-url task.url}}</a></li>
+						<li><a href="{{task.href}}">{{task.name}}</a></li>
-				  		<li class="active">Results for {{date-format mainResult.date format="DD MMM YYYY"}}</li>
+						<li class="active">Results for {{date-format mainResult.date format="DD MMM YYYY"}}</li>
-			  		{{/if}}
+					{{/if}}
 				</ol>
 			</div>
 		</div>

view/partial/graph.html

@@ -23,7 +23,7 @@
 			<tbody>
 			{{#results}}
 				<tr data-role="url-stats">
-					<td data-role="category">{{date-format date format="DD MMM YYYY"}}</td>
+					<td data-value="{{date-timestamp date}}" data-role="date">{{date-format date format="DD MMM YYYY"}}</td>
 					<td class="text-center" data-label="error">{{count.error}}</td>
 					<td class="text-center" data-label="warning">{{count.warning}}</td>
 					<td class="text-center" data-label="notice">{{count.notice}}</td>
@@ -32,4 +32,4 @@
 			</tbody>
 		</table>
 	</div>
-</div>
+</div>

view/partial/page-footer.html

@@ -1,10 +1,10 @@
 <footer>
 	<div class="footer" role="contentinfo">
 		<div class="container">
-			<div class="col-md-7">
+			<div class="col-md-5">
-				<p>&copy; {{year}} Nature Publishing Group.<br/>pa11y dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</p>
+				<small>&copy; {{year}} Nature Publishing Group.<br/>pa11y dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</small>
 			</div>
-			<div class="col-md-5 clearfix">
+			<div class="col-md-7 clearfix">
 				<ul class="crunch-bottom floated-list nav">
 					<li>
 						<a href="{{repo}}">GitHub Repo</a>
@@ -15,8 +15,11 @@
 					<li>
 						<a href="http://www.w3.org/TR/WCAG20/">WCAG 2.0 spec</a>
 					</li>
+					<li>
+						<a href="http://squizlabs.github.io/HTML_CodeSniffer/">HTML_CodeSniffer</a>
+					</li>
 				</ul>
 			</div>
 		</div>
 	</div>
-</footer>
+</footer>

view/partial/result-header.html

@@ -4,7 +4,7 @@
 			<div class="col-md-12">
 				<div class="h3 crunch well-med well pull-right"><span class="glyphicon glyphicon-calendar"></span>&nbsp;{{date-format mainResult.date format="DD MMM YYYY"}}</div>
 				<h1 class="h2 crunch-top">{{task.name}}</h1>
-				<p class="h4">{{simplify-url task.url}}<span class="h5"> - ({{task.standard}})</span></p>
+				<p class="h4">{{simplify-url task.url}}<span class="h5"> ({{task.standard}})</span></p>
 			</div>
 		</div>
 	</div>

view/partial/result.html

@@ -12,37 +12,36 @@
 		<div class="action-buttons col-md-12 col-sm-6 clearfix">
 			<div class="row">
 				<div class="col-md-12 col-sm-6 col-xs-12">
-			        <a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></a>
+			        <a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default" data-test="download-csv">
+			        	Download CSV <span class="glyphicon glyphicon-download"></span>
+			        </a>
 				</div>
 				<div class="col-md-12 col-sm-6 col-xs-12">
-			        <a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></a>
+			        <a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default" data-test="download-json">
+			        	Download JSON <span class="glyphicon glyphicon-download"></span>
+			        </a>
 				</div>
 			</div>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12 col-sm-12 clearfix">
+			<div class="well">
+				<h4 class="crunch-top">View results in browser</h4>
+				<p class="crunch-bottom">pa11y uses HTML_CodeSniffer to find accessibility issues. <a href="http://squizlabs.github.io/HTML_CodeSniffer/">Use their bookmarklet</a> to view results on the page you are testing.</p>
+			</div>
 	    </div>
 	</div>
-	<!-- ########### Functionality to be done ############# -->
-	<!-- List of other URLs -->
-    <!-- <div class="other-tasks well">
-    	<h4 class="crunch-top ruled-sm">Your other tracked URLs</h4>
-		<p>No other URLs</p>
-
-    	
-        <ul class="list-unstyled crunch-bottom">
-	        <li><a href="empty-task">rowanmanning.com</a></li>
-	        <li><a href="task">nature.com</a></li>
-        </ul>
-    </div> -->
-    <!-- ##################### End ######################## -->
 </div>
 
 <div class="col-md-9">
 	{{#if mainResult.count.error}}
-		<div class="heading label-danger showing first" id="errors">
+		<div class="heading label-danger showing first" id="errors" data-test="task-errors">
 			<span data-role="expander" class="pull-right expander"> - </span>
 			Errors ( {{mainResult.count.error}} )
 		</div>
 		<div class="task-danger tasks-list collapse clearfix in">
-			
+
 			<ul class="list-unstyled">
 				{{#mainResult.errors}}
 					<li>
@@ -58,7 +57,7 @@
 	{{/if}}
 
 	{{#if mainResult.count.warning}}
-		<div class="heading label-warning" id="warnings">
+		<div class="heading label-warning" id="warnings" data-test="task-warnings">
 			<span data-role="expander" class="pull-right expander"> + </span>
 			Warnings ( {{mainResult.count.warning}} )
 		</div>
@@ -79,7 +78,7 @@
 	{{/if}}
 
 	{{#if mainResult.count.notice}}
-		<div class="heading label-info" id="notices">
+		<div class="heading label-info" id="notices" data-test="task-notices">
 			<span data-role="expander" class="pull-right expander"> + </span>
 			Notices ( {{mainResult.count.notice}} )
 		</div>
@@ -101,7 +100,7 @@
 	{{#if task.ignore.length}}
 		<div class="heading label-default">
 			<span data-role="expander" class="pull-right expander"> + </span>
-			Ignored Rules
+			Ignored Rules ( {{task.ignore.length}} )
 		</div>
 		<div class="task-default tasks-list collapse clearfix">
 			<ul class="list-unstyled">
@@ -119,4 +118,4 @@
 	{{else}}
 		<p class="heading label-default">You have no ignored rules.</p>
 	{{/if}}
-</div>
+</div>

view/partial/task-header.html

@@ -1,12 +1,22 @@
-<div class="col-md-12">
+<div class="col-md-12 zfix">
 	<div class="ruled task-header">
 		<div class="row clearfix">
 			<div class="col-md-9 col-sm-9">
 				<h1 class="h2 crunch-top">{{task.name}}</h1>
-				<p class="h4">{{simplify-url task.url}}<span class="h5"> - ({{task.standard}})</span></p>
+				<p class="h4">{{simplify-url task.url}}<span class="h5"> ({{task.standard}})</span></p>
 			</div>
 			<div class="col-md-3 col-sm-3 text-right run-details">
-				<a href="{{task.hrefRun}}" class="btn btn-success">Run <span class="glyphicon glyphicon-play"></span></a>
+				{{#unless readonly}}
+					<div class="btn-group">
+				        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Options <span class="caret"></span></button>
+				        <ul class="dropdown-menu pull-right" role="menu">
+				          	<li><a href="/{{task.id}}/edit">Edit this task</a></li>
+							<li><a href="/{{task.id}}/delete">Delete this task</a></li>
+							<li class="divider"></li>
+							<li><a href="{{task.hrefRun}}" data-test="run-task">Run pa11y</a></li>
+						</ul>
+				    </div>
+				{{/unless}}
 				{{#if mainResult}}
 					<div class="date">Last run : {{date-format mainResult.date format="DD MMM YYYY"}}</div>
 				{{else}}
@@ -15,4 +25,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>

view/partial/tasks.html

@@ -1,13 +1,20 @@
 
 <ul class="list-unstyled clearfix crunch-bottom">
 	<li class="col-md-4 col-sm-6 task-card add-task">
-		<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new">
+		{{#if readonly}}
-			<p class="h3 crunch">Add new URL</p>
+			<span class="well task-card-link crunch-bottom">
-			<p class="supersize-me crunch">+</p>
+				<p class="h3 crunch">Add new URL</p>
-		</a>
+				<p class="supersize-me crunch">+</p>
+			</span>
+		{{else}}
+			<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
+				<p class="h3 crunch">Add new URL</p>
+				<p class="supersize-me crunch">+</p>
+			</a>
+		{{/if}}
 	</li>
-	{{#tasks}}
+	{{#each tasks}}
-		<li class="col-md-4 col-sm-6 task-card">
+		<li class="col-md-4 col-sm-6 task-card" data-test="task">
 			<a class="well task-card-link crunch-bottom" title="Details for URL {{simplify-url url}}" href="{{href}}">
 				<p class="h3">{{name}}</p>
 				<p class="h5">({{standard}})</p>
@@ -24,7 +31,17 @@
 					<p class="no-results">No results</p>
 				{{/if}}
 			</a>
-			<a title="Delete this URL" class="delete-button" href="{{hrefDelete}}"><span class="sr-only">Delete </span><span class="glyphicon glyphicon-remove"></span></a>
+			{{#unless ../readonly}}
+				<div class="btn-group options-button text-right">
+				        <button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown"><span class="sr-only">Options</span><span class="glyphicon glyphicon-cog"></span></button>
+				        <ul class="dropdown-menu pull-right" role="menu">
+				          	<li><a href="{{href}}/edit">Edit this task</a></li>
+							<li><a href="{{href}}/delete">Delete this task</a></li>
+							<li class="divider"></li>
+							<li><a href="{{href}}/run" data-test="run-task">Run pa11y</a></li>
+						</ul>
+				    </div>
+			{{/unless}}
 		</li>
-	{{/tasks}}
+	{{/each}}
 </ul>

view/presenter/ignore.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var standardsArray = require('../../data/standards')();
+var rules = createStandardDescriptionMap(standardsArray);
+
+module.exports = presentIgnoreRules;
+
+function presentIgnoreRules (ignore) {
+    return ignore.map(function (name) {
+        return {
+            name: name,
+            description: rules[name]
+        };
+    });
+}
+
+function createStandardDescriptionMap (standards) {
+    var map = {};
+    standards.forEach(function (standard) {
+        standard.rules.forEach(function (rule) {
+            map[rule.name] = rule.description;
+        });
+    });
+    return map;
+}

view/presenter/result.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _ = require('underscore');
+var presentIgnoreRules = require('./ignore');
 
 module.exports = presentResult;
 
@@ -14,6 +15,9 @@ function presentResult (result) {
     // Parse date
     result.date = new Date(result.date);
 
+    // Enhance the ignored rules
+    result.ignore = presentIgnoreRules(result.ignore);
+
     // Split out message types
     if (result.results) {
         var groupedByType = _.groupBy(result.results, 'type');

view/presenter/task.js

@@ -1,9 +1,8 @@
 'use strict';
 
 var _ = require('underscore');
+var presentIgnoreRules = require('./ignore');
 var presentResult = require('./result');
-var standardsArray = require('../../data/standards')();
-var rules = createStandardDescriptionMap(standardsArray);
 
 module.exports = presentTask;
 
@@ -14,14 +13,10 @@ function presentTask (task) {
     task.hrefDelete = '/' + task.id + '/delete';
     task.hrefRun = '/' + task.id + '/run';
     task.hrefJson = '/' + task.id + '.json';
+    task.hrefEdit = '/' + task.id + '/edit';
 
     // Enhance the ignored rules
-    task.ignore = task.ignore.map(function (name) {
+    task.ignore = presentIgnoreRules(task.ignore);
-        return {
-            name: name,
-            description: rules[name]
-        };
-    });
 
     // Present the last result if present
     if (task.last_result) {
@@ -31,13 +26,3 @@ function presentTask (task) {
 
     return task;
 }
-
-function createStandardDescriptionMap (standards) {
-    var map = {};
-    standards.forEach(function (standard) {
-        standard.rules.forEach(function (rule) {
-            map[rule.name] = rule.description;
-        });
-    });
-    return map;
-}

view/result/index.html

@@ -1,6 +1,6 @@
 
 {{#content "title"}}
-    {{task.url}} ({{task.standard}}) {{date-format mainResult.date format="DD MMM YYYY"}}
+    {{task.name}} - {{simplify-url task.url}} ({{task.standard}}) - {{date-format mainResult.date format="DD MMM YYYY"}}
 {{/content}}
 
 {{> result-header}}

view/task/delete.html

@@ -3,7 +3,7 @@
     Delete {{task.url}} ({{task.standard}})
 {{/content}}
 
-<form class="col-md-12" action="{{task.hrefDelete}}" method="post">
+<form class="col-md-12" action="{{task.hrefDelete}}" method="post" data-test="delete-url-form">
 	<div class="legend">
 		<legend>Delete URL ({{simplify-url task.url}})</legend>
 	</div>

view/task/edit.html

@@ -0,0 +1,87 @@
+
+{{#content "title"}}
+	Edit URL
+{{/content}}
+
+{{#edited}}
+	<div class="col-md-12 clearfix" data-test="alert">
+		<div class="alert alert-success">
+			<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+			<strong>Success!</strong>
+			<p>Your changes have been saved.</p>
+		</div>
+	</div>
+{{/edited}}
+
+<form role="form" class="col-md-12" action="/{{task.id}}/edit" method="post" data-test="edit-url-form">
+
+	<div class="legend">
+		<h1 class="h2 crunch-top">Edit URL</h1>
+	</div>
+
+	{{#error}}
+		<div class="col-md-12 clearfix" data-test="error">
+			<div class="row">
+				<div class="alert alert-danger">
+					<strong>Oh my gosh!</strong>
+					<p>{{.}}</p>
+				</div>
+			</div>
+		</div>
+	{{/error}}
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-8 col-sm-8 col-xs-10">
+				<label class="control-label" for="new-task-name">Name</label>
+				<input class="form-control" id="new-task-name" type="text" placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-8 col-sm-8 col-xs-10">
+				<label class="control-label" for="new-task-url">URL</label>
+				<input class="form-control" id="new-task-url" type="url" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}" disabled/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-standard">Standard</label>
+				<select data-role="new-task-select" class="form-control" id="new-task-standard" name="standard" disabled>
+					{{#standards}}
+						<option {{#selected}}selected{{/selected}}>{{title}}</option>
+					{{/standards}}
+				</select>
+			</div>
+		</div>
+	</div>
+
+	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/nature/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
+
+	<div class="standards-lists">
+		{{#standards}}
+			<div data-role="standards-list" data-attr="{{title}}" class="form-group">
+				<p class="control-label rules-list-title ruled"><b>{{title}} Rules</b></p>
+				<ul class="list-unstyled">
+					{{#rules}}
+						<li>
+							<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
+							<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
+								{{name}}
+							</label>
+						</li>
+					{{/rules}}
+				</ul>
+			</div>
+		{{/standards}}
+	</div>
+
+	<button type="submit" class="btn btn-success">Save changes <span class="glyphicon glyphicon-save"></span></button>
+	<a href="/{{task.id}}/edit" class="btn btn-primary">Undo <span class="glyphicon glyphicon-refresh"></span></a>
+
+</form>

view/task/index.html

@@ -1,10 +1,10 @@
 
 {{#content "title"}}
-	{{task.url}} ({{task.standard}})
+	{{task.name}} - {{simplify-url task.url}} ({{task.standard}})
 {{/content}}
 
 {{#added}}
-	<div class="col-md-12 clearfix">
+	<div class="col-md-12 clearfix" data-test="alert">
 		<div class="alert alert-success">
 			<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
 			<strong>Whoop whoop!</strong>
@@ -14,7 +14,7 @@
 {{/added}}
 
 {{#running}}
-	<div class="col-md-12 clearfix">
+	<div class="col-md-12 clearfix" data-test="alert">
 		<div class="alert alert-success">
 			<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
 			<strong>New results incoming!</strong>
@@ -41,7 +41,7 @@
 {{#if mainResult}}
 	{{> result}}
 {{else}}
-	<div class="col-md-12">
+	<div class="col-md-12" data-test="alert">
 		<div class="alert alert-info">
 			<h4>There are no results to show</h4>
 			<p>pa11y has not been run against this URL yet so there are no results to show.</p>