adding update warnings, output fix

vladikoff · vladikoff · commit 447682c411e4 · 2013-03-10T04:03:12.000-04:00
diff --git a/README.md b/README.md
@@ -59,11 +59,13 @@ The Chrome extension is auto-updated. However the npm module has to be manually
 
 ## TODO
 
-* Test Windows and Linux
+* Test Windows
 * registerMultiTask support
+* send tasks into background right away
 
 ### Release History
 
+* 0.1.0.7 - Fixes, added update warnings.
 * 0.1.0.6 - Various fixes.
 * 0.1.0.5 - Updating UI, Adding a way to set flags `--force` and `--verbose`, output fixes, background task updates.
 * 0.1.0.4 - Adding Background Task support. You can now press `(B)` to send
diff --git a/extension/css/devtools.css b/extension/css/devtools.css
@@ -35,7 +35,7 @@ h2, label {
 #backgroundTasks, #killTask {
   display: none;
 }
-#backgroundTasks.show {
+#backgroundTasks.show, #updateWarning.show {
   display: block;
 }
 
@@ -287,6 +287,22 @@ button {
   display: block;
 }
 
+#updateWarning {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border: 1px solid rgb(64%, 64%, 64%);
+  border-left: none;
+  border-bottom: none;
+  background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%);
+  font-size: 10px;
+}
+
+#updateWarning p {
+  padding: 0 10px;
+}
+
 @media all and (max-width: 250px) {
   #output {
     display: none;
diff --git a/extension/js/devtools.js b/extension/js/devtools.js
@@ -1,29 +1,25 @@
 'use strict';
 
-/**
- * Grunt project setting
- */
+// Chrome extension
+var manifest = chrome.runtime.getManifest(),
+  extVersion = manifest.version;
+
+// Grunt project setting
 var socket,
   projects = [],
   currentProject;
 
-/**
- * Port settings
- */
+// Port settings
 var startPort = 61749,
   currentPort = startPort,
   maxPort = currentPort + 5;
 
-/**
- * Templates
- */
+// Templates
 var projectListTpl = _.template($("#projectList").html()),
   taskListTpl = _.template($("#taskList").html()),
   bgTasksTpl = _.template($("#bgTaskList").html());
 
-/**
- * UI Selectors
- */
+// UI Selectors
 var $output = $("#placeOutput"),
   $outputWrap = $('#output'),
   $body = $('body'),
@@ -32,7 +28,8 @@ var $output = $("#placeOutput"),
   $bgTasks = $('#placeBackgroundTasks'),
   $regularTasks = $('#placeTasks'),
   $aliasTasks = $('#placeAliasTasks'),
-  $projects = $('#placeProjects');
+  $projects = $('#placeProjects'),
+  $warning = $('#updateWarning');
 
 /**
  * Connect to a devtools socket
@@ -82,13 +79,14 @@ function handleSocketMessage(event) {
       // connecting a new project
       // add this new project
       projects.push({
-        name:data.project,
-        port:parseInt(data.port),
-        socket:socket,
-        taskListAlias:data.alias,
-        taskListGeneric:data.tasks,
-        tasks:[],
-        running:false
+        name: data.project,
+        port: parseInt(data.port),
+        socket: socket,
+        taskListAlias: data.alias,
+        taskListGeneric: data.tasks,
+        tasks: [],
+        running: false,
+        devtoolsVersion: data.devtoolsVersion
       });
 
       // add new project button
@@ -107,7 +105,7 @@ function handleSocketMessage(event) {
     }
     // process started
     else if (data && data.action === 'start') {
-      currentProject.currentTask = {name:data.name, pid:data.pid, output:[]};
+      currentProject.currentTask = {name: data.name, pid: data.pid, output: []};
       currentProject.tasks.push(currentProject.currentTask);
       updateTaskList();
     }
@@ -117,21 +115,25 @@ function handleSocketMessage(event) {
       $output.html('');
     } else if (data.length > 1) {
       if (currentProject.tasks.length > 0) {
-        var msg = data.split("|");
-        var pid = msg[0];
-        var timestamp = new Date().toString().split(' ')[4];
-        var output = '<pre>' + timestamp + ' - ' + msg[1] + '</pre>';
+        var msg = data.split("|"),
+          pid = msg[0],
+          timestamp = new Date().toString().split(' ')[4],
+          output = '<pre>' + timestamp + ' - ' + _.escape(msg[1]) + '</pre>';
+
+        // find a task with a process id of the message
         var pidTask = _.find(currentProject.tasks, function (task) {
           return task.pid === parseInt(pid);
         });
+
+        // if we found a task with a pid
         if (pidTask) {
           pidTask.output.push(output);
         }
-        // append output
+
+        // append output to the current view if the process id matches
         if (currentProject.currentTask && parseInt(pid) === currentProject.currentTask.pid) {
           $output.append(output);
-          // TODO: fix this
-          $outputWrap.scrollTop(99999);
+          $outputWrap.scrollTop($output.height());
         }
       }
     }
@@ -175,7 +177,7 @@ function handleSocketClose(e) {
  */
 function handleSocketError() {
   // TODO: update this
-  alert('Something went really wrong, please report this...');
+  console.log('Something went really wrong, please report this...');
 }
 
 function updateProjectList() {
@@ -185,8 +187,8 @@ function updateProjectList() {
 
 function updateTaskList() {
   // set the tasks
-  $regularTasks.html(taskListTpl({buttons:currentProject.taskListGeneric}));
-  $aliasTasks.html(taskListTpl({buttons:currentProject.taskListAlias}));
+  $regularTasks.html(taskListTpl({buttons: currentProject.taskListGeneric}));
+  $aliasTasks.html(taskListTpl({buttons: currentProject.taskListAlias}));
 
   if (currentProject.currentTask) {
     $('.task[value="' + currentProject.currentTask.name + '"]')
@@ -203,7 +205,7 @@ function updateTaskList() {
 
   if (bgTasks.length > 0) {
     $bgSection.addClass('show');
-    $bgTasks.html(bgTasksTpl({tasks:bgTasks}));
+    $bgTasks.html(bgTasksTpl({tasks: bgTasks}));
   } else {
     $bgSection.removeClass('show');
   }
@@ -223,6 +225,14 @@ function setProject(idx) {
   var buttons = $projects.find('button');
   buttons.removeClass('active');
   $(buttons.get(idx)).addClass('active');
+  console.log(currentProject.devtoolsVersion);
+  // check version
+  if (currentProject.devtoolsVersion == null || currentProject.devtoolsVersion.replace(/-/g, '.') !== extVersion) {
+    $warning.addClass('show');
+  } else {
+    $warning.removeClass('show');
+  }
+
   // clear output
   if (currentProject && currentProject.currentTask) {
     $output.html(currentProject.currentTask.output);
@@ -304,16 +314,16 @@ $tasks.on('click', '.b-kill', function () {
 
   // if there's a pid, use it instead
   if (btn.data('pid')) {
-    taskInfo = {name:btn.val(), pid:btn.data('pid')};
+    taskInfo = {name: btn.val(), pid: btn.data('pid')};
     // TODO: validate this?
     currentProject.tasks = _.reject(currentProject.tasks, function (task) {
       return task.pid === btn.data('pid');
     });
     updateTaskList();
   }
   currentProject.socket.send(JSON.stringify({
-    action:'killTask',
-    task:taskInfo
+    action: 'killTask',
+    task: taskInfo
   }));
 });
 
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Grunt Devtools",
-  "version": "0.1.0.6",
+  "version": "0.1.0.7",
   "description": "Extends the Developer Tools, adding tools for Grunt",
   "icons": {
     "16": "img/icon16.png",
diff --git a/extension/panel.html b/extension/panel.html
@@ -9,6 +9,12 @@ <h2>Projects</h2>
       <div id='placeProjects'></div>
     </header>
     <div id='tools'>
+      <aside id='updateWarning'>
+        <p>
+          The version of <code>grunt-devtools</code> does not match for this project.
+          Please update using '<code>npm install grunt-devtools --save-dev</code>' or update the extension.
+        </p>
+      </aside>
       <section id='tasks'>
         <div id='backgroundTasks'>
           <header><h2>Background Tasks</h2></header>
diff --git a/grunt-plugin/package.json b/grunt-plugin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "grunt-devtools",
   "description": "Experimental! Grunt integration with Chrome Dev Tools",
-  "version": "0.1.0-6",
+  "version": "0.1.0-7",
   "homepage": "https://github.com/vladikoff/grunt-devtools",
   "author": {
     "name": "vladikoff",
@@ -33,15 +33,18 @@
     "grunt-contrib-clean": "~0.4.0",
     "grunt-contrib-nodeunit": "~0.1.2",
     "grunt": "~0.4.0",
+    "grunt-contrib-watch": "~0.2.0",
     "grunt-contrib-connect": "~0.1.2"
   },
   "peerDependencies": {
     "grunt": "~0.4.0"
   },
-  "keywords": [],
+  "keywords": [
+    "gruntplugin",
+    "devtools"
+  ],
   "dependencies": {
     "websocket": "~1.0.8",
-    "portscanner": "~0.1.3",
-    "grunt-contrib-watch": "~0.2.0"
+    "portscanner": "~0.1.3"
   }
 }
diff --git a/grunt-plugin/tasks/devtools.js b/grunt-plugin/tasks/devtools.js
@@ -5,24 +5,23 @@ module.exports = function (grunt) {
   grunt.registerTask('devtools', 'Runs a server for devtools', function () {
     this.async();
     var WebSocketServer = require('websocket').server;
-    var fs = require("fs");
-    var spawn = require("child_process").spawn;
+
+    var fs = require("fs"),
+      spawn = require("child_process").spawn,
+      http = require('http'),
+      portscanner = require('portscanner');
+
     var workers = [];
-    var http = require('http');
-    var portscanner = require('portscanner');
 
-    var version = 0; // TODO
-    var pjson = require('../package.json');
-    if (pjson.version) {
+    var pjson = require('../package.json'),
       version = pjson.version;
-    }
 
     // TODO: update this
-    var projectPath = process.cwd().split('/');
-    var projectName = projectPath[projectPath.length - 1];
-    var aliasTasks = getAliasTasks();
-    var allTasks = Object.keys(grunt.task._tasks);
-    var basicTasks = grunt.util._.difference(allTasks, aliasTasks);
+    var projectPath = process.cwd().split('/'),
+      projectName = projectPath[projectPath.length - 1],
+      aliasTasks = getAliasTasks(),
+      allTasks = Object.keys(grunt.task._tasks),
+      basicTasks = grunt.util._.difference(allTasks, aliasTasks);
 
     var server = http.createServer(function (request, response) {
       response.writeHead(404);
@@ -43,8 +42,8 @@ module.exports = function (grunt) {
     });
 
     var wsServer = new WebSocketServer({
-      httpServer:server,
-      autoAcceptConnections:false
+      httpServer: server,
+      autoAcceptConnections: false
     });
 
     wsServer.on('request', function (request) {
@@ -72,20 +71,21 @@ module.exports = function (grunt) {
 
             if (cmd[0] === 'handleSocketOpen') {
               connection.sendUTF(JSON.stringify({
-                tasks:basicTasks,
-                alias:aliasTasks,
-                project:projectName,
-                port:projectPort
+                tasks: basicTasks,
+                alias: aliasTasks,
+                project: projectName,
+                port: projectPort,
+                devtoolsVersion: version
               }));
             }
             else if (allTasks.indexOf(cmd[0]) > -1) {
               var watcher = spawn('grunt', cmd);
               watcher.key = key;
               workers.push(watcher);
               connection.sendUTF(JSON.stringify({
-                action:'start',
-                name:cmd[0],
-                pid:watcher.pid
+                action: 'start',
+                name: cmd[0],
+                pid: watcher.pid
               }));
               // TODO: fix bug here with running task return
               connection.send('Running Task: ' + cmd[0]);
@@ -100,7 +100,7 @@ module.exports = function (grunt) {
                   connection.send(watcher.pid + '|' + data.toString());
                   grunt.log.writeln().write(data.toString());
                 }
-                connection.sendUTF(JSON.stringify({ action:'done', pid:watcher.pid }));
+                connection.sendUTF(JSON.stringify({ action: 'done', pid: watcher.pid }));
               });
               watcher.stderr.on('data', function (data) {
                 if (data) {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "Grunt Devtools",`
`3`		`- "version": "0.1.0.6",`
	`3`	`+ "version": "0.1.0.7",`
`4`	`4`	`"description": "Extends the Developer Tools, adding tools for Grunt",`
`5`	`5`	`"icons": {`
`6`	`6`	`"16": "img/icon16.png",`