Add eslint and deps + fix css errors

Gruntfile.js

@@ -0,0 +1,45 @@
+'use strict';
+
+/* globals module */
+
+module.exports = function(grunt) {
+  // configure project
+  grunt.initConfig({
+    // make node configurations available
+    pkg: grunt.file.readJSON('package.json'),
+    csslint: {
+      options: {
+        csslintrc: '.csslintrc'
+      },
+      src: ['css/*.css', 'src/css/*.css']
+    },
+    eslint: {
+      options: {
+        configFile: '.eslintrc',
+        cache: true
+      },
+      target: ['src/**/*.js']
+    },
+    githooks: {
+      all: {
+        'pre-commit': 'csslint htmlhint eslint'
+      }
+    },
+    htmlhint: {
+      html1: {
+        src: [
+          'src/**/*.html, index.html'
+        ]
+      }
+    },
+  });
+
+  // enable plugins
+  grunt.loadNpmTasks('grunt-contrib-csslint');
+  grunt.loadNpmTasks('grunt-eslint');
+  grunt.loadNpmTasks('grunt-githooks');
+  grunt.loadNpmTasks('grunt-htmlhint');
+
+  // set default tasks to run when grunt is called without parameters
+  grunt.registerTask('default', ['csslint', 'htmlhint', 'eslint']);
+};

css/landing_page.css

@@ -17,18 +17,18 @@ a:hover {
 }
 
 a#viewSource {
-  display: block;
-  margin: 1.3em 0 0 0;
   border-top: 1px solid #999;
+  display: block;
+  margin: 1.3em 0 .0 0;
   padding: 1em 0 0 0;
 }
 
 body {
   font-family: 'Roboto', sans-serif;
+  font-weight: 300;
   margin: 0;
   padding: 1em;
   word-break: break-word;
-  font-weight: 300;
 }
 
 div#container {

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "test-pages",
+  "description": "Test pages",
+  "keywords": [
+    "webrtc",
+    "demos",
+    "samples",
+    "javascript"
+  ],
+  "homepage": "https://github.com/webrtc/test-pages",
+  "bugs": {
+    "url": "https://github.com/webrtc/test-pages/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": "The WebRTC project authors",
+  "main": "index.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webrtc/test-pages.git"
+  },
+  "scripts": {
+    "lint": "grunt"
+  },
+  "devDependencies": {
+    "eslint-config-webrtc": "^1.0.0",
+    "express": "^4.14.1",
+    "grunt": "^0.4.5",
+    "grunt-cli": ">=0.1.9",
+    "grunt-contrib-csslint": ">=0.3.1",
+    "grunt-eslint": "^17.2.0",
+    "grunt-githooks": "^0.3.1",
+    "grunt-htmlhint": ">=0.9.12",
+    "pem": "^1.9.4"
+  }
+}

src/css/main.css

@@ -6,17 +6,17 @@
  *  tree.
  */
 .drop-down {
-  width: 65%;
   font-size: 10px;
-  white-space: nowrap
+  white-space: nowrap;
+  width: 65%;
 }
 
 .constraints {
-  width: 75%;
+  display: none;
   height: auto;
-  position: absolute;
   overflow: scroll;
-  display: none;
+  position: absolute;
+  width: 75%;
 }
 
 .float-left {
@@ -25,8 +25,8 @@
 }
 
 .float-clear-left {
-  float: left;
   clear: left;
+  float: left;
   width: 100%;
 }
 
@@ -39,9 +39,9 @@
 }
 
 #messages {
-  word-wrap: break-word;
-  white-space: pre-wrap;
   font-size: 0.7em;
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
 #audio-source {
@@ -64,14 +64,14 @@
 }
 
 #pc-server {
-  width: 98%;
   margin-left: 0.1em;
   margin-top: 0.1em;
+  width: 98%;
 }
 
 #peer-id-container {
-  margin-left: 60%;
   height: 1.5em;
+  margin-left: 60%;
 }
 
 #peer-id {
@@ -84,11 +84,11 @@
 }
 
 #pc-server-container {
-  position: absolute;
+  height: 1.5em;
   margin: 0 0 0 12%;
-  width: 40%;
   overflow: hidden;
-  height: 1.5em;
+  position: absolute;
+  width: 40%;
 }
 
 #pc-constraints-left {
@@ -107,8 +107,8 @@
 }
 
 .float-clear-left {
-  float: left;
   clear: left;
+  float: left;
   width: 100%;
 }
 
@@ -185,8 +185,8 @@ div#container {
   margin: 0 auto 0 auto;
   max-width: 40em;
   padding: 0 1.5em 1.3em 1.5em;
-  z-index: 2;
   position: relative;
+  z-index: 2;
 }
 
 h2 {
@@ -220,22 +220,22 @@ video {
 
 #log {
   float: left;
-  position: fixed;
+  left: 0;
   overflow: auto;
+  padding: 16px;
+  position: fixed;
   top: 0;
-  left: 0;
   width: 20%;
-  padding: 16px;
   word-wrap: break-word;
   z-index: 1;
 }
 
 @media screen and (max-width: 1200px) {
   div#log {
     float: none;
-    width: 100%;
-    position: inherit;
     padding: 0;
+    position: inherit;
+    width: 100%;
   }
   button {
     padding: 0.7em;