Delete and edit Annotations

Author: morvader

HTMLReport/preview.css

@@ -28,7 +28,8 @@ a.canvasjs-chart-credit {
 }
 
 #export{
-    clear:both;
+    float:left;
+    /*clear:both;*/
     margin-left:5px;
     margin-top: 4px;
 }
@@ -86,4 +87,28 @@ background: #F2F2F2;
 }
 .updatethVal{
     width: 100%;
+}
+.deleteBtn {
+    width: 13px;
+}
+.deleteBtn:hover{ 
+    cursor:pointer
+}
+#cancelDelete{
+    margin-right: 8px;
+    margin-left: 8px;
+}
+#divOverlay { 
+    display: none; 
+    background-color:lightcoral; 
+    text-align:center;
+    position:absolute; 
+    z-index:10000;
+    opacity:0.95; 
+}
+#deleteDialog{
+    margin-top: 8px;
+}
+#deleteDialog span{
+    font-weight: bold;
 }

HTMLReport/preview.html

@@ -32,18 +32,24 @@ <h1>Exploratory Session Report</h1>
         <div id="canvasHolder">
             <span>Graph</span>
         </div>
-    </div>
-
-</div>
+        </div>
 
+    </div>
 
 <div>
     <div id="sessionResults">
         <label>Data Table</label>
     </div>
-   
+
+    </div>
+<button id="export" class="actionButton" title="Get report in a plain HTML file">Export Session to HTML</button>
+<div id="divOverlay">
+    <div id='deleteDialog'>
+        <span>Delete this annotation?</span>
+        <button id="cancelDelete" class="cancelButton" title="Cancel deletion">No</button>
+        <button id="deleteYes" class="actionButton" title="Delete annotation">Yes</button>
+    </div>
 </div>
- <button id="export" class="actionButton" title="Get report in a plain HTML file">Export Session to HTML</button>
 </body>
 
 </html>

background.js

@@ -1,19 +1,18 @@
-
 var session = new Session();
 
 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
-    switch(request.type) {
+    switch (request.type) {
         case "addBug":
-            addAnnotation("Bug",request.name,request.imageURL);
+            addAnnotation("Bug", request.name, request.imageURL);
             break;
         case "addIdea":
-            addAnnotation("Idea",request.name,request.imageURL);
+            addAnnotation("Idea", request.name, request.imageURL);
             break;
         case "addNote":
-            addAnnotation("Note",request.name,request.imageURL);
+            addAnnotation("Note", request.name, request.imageURL);
             break;
         case "addQuestion":
-            addAnnotation("Question",request.name,request.imageURL);
+            addAnnotation("Question", request.name, request.imageURL);
             break;
         case "updateAnnotationName":
             var AnnotationID = request.annotationID;
@@ -23,65 +22,75 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
             var annotation = annotations[AnnotationID];
             annotation.setName(newName);
 
+            break;
+        case "deleteAnnotation":
+            session.deleteAnnotation(request.annotationID);
             break;
         case "exportSessionCSV":
-            if(!exportSessionCSV())
-                sendResponse({status: "nothing to export"});
+            if (!exportSessionCSV())
+                sendResponse({
+                    status: "nothing to export"
+                });
             break;
         case "clearSession":
             clearSession();
             break;
     }
-    sendResponse({status: "ok"});
+    sendResponse({
+        status: "ok"
+    });
     return true;
 });
 
-function addAnnotation(type, name, imageURL){
+function addAnnotation(type, name, imageURL) {
 
     var currentUrl;
     var now = Date.now();
 
-    if(session.getAnnotations().length == 0) this.startSession();
-
-     chrome.tabs.query({currentWindow: true, active: true},
-      function(tabs){
-         currentUrl = tabs[0].url;
-         //alert(currentUrl);
-        switch(type){
-          case "Bug":
-            var newBug = new Bug(name,currentUrl, now,imageURL);
-            session.addBug(newBug);
-            break;
-          case "Note":
-            var newNote = new Note(name,currentUrl, now,imageURL);
-            session.addNote(newNote);
-            break;
-          case "Idea":
-            var newIdea = new Idea(name,currentUrl, now,imageURL);
-            session.addIdea(newIdea);
-            break;
-          case "Question":
-            var newQuestion = new Question(name,currentUrl, now,imageURL);
-            session.addQuestion(newQuestion);
-            break;
-        }
-      });
+    if (session.getAnnotations().length == 0) this.startSession();
+
+    chrome.tabs.query({
+            currentWindow: true,
+            active: true
+        },
+        function(tabs) {
+            currentUrl = tabs[0].url;
+            //alert(currentUrl);
+            switch (type) {
+                case "Bug":
+                    var newBug = new Bug(name, currentUrl, now, imageURL);
+                    session.addBug(newBug);
+                    break;
+                case "Note":
+                    var newNote = new Note(name, currentUrl, now, imageURL);
+                    session.addNote(newNote);
+                    break;
+                case "Idea":
+                    var newIdea = new Idea(name, currentUrl, now, imageURL);
+                    session.addIdea(newIdea);
+                    break;
+                case "Question":
+                    var newQuestion = new Question(name, currentUrl, now, imageURL);
+                    session.addQuestion(newQuestion);
+                    break;
+            }
+        });
 }
 
-function startSession(){
-    var browser=get_browser_info();
+function startSession() {
+    var browser = get_browser_info();
     var browserInfoString = browser.name + "_" + browser.version;
 
-    session = new Session(Date.now(),browserInfoString);
+    session = new Session(Date.now(), browserInfoString);
 };
 
-function clearSession(){
+function clearSession() {
     session.clearAnnotations();
 };
 
-function exportSessionCSV(){
+function exportSessionCSV() {
 
-    if(session.getAnnotations().length == 0) return false;
+    if (session.getAnnotations().length == 0) return false;
 
     var exportService = new ExportSessionCSV(session);
     var csvData = exportService.getCSVData();
@@ -94,10 +103,11 @@ function exportSessionCSV(){
     var fileName = "ExploratorySession_" + browserInfo + "_" + startDateTime + ".csv";
 
     var pom = document.createElement('a');
-    var blob = new Blob([csvData],{type: 'text/csv;charset=utf-8;'});
+    var blob = new Blob([csvData], {
+        type: 'text/csv;charset=utf-8;'
+    });
     var url = URL.createObjectURL(blob);
     pom.href = url;
     pom.setAttribute('download', fileName);
     pom.click();
-};
-
+};

images/delete84.png

@@ -4,7 +4,7 @@
   "short_name": "Chrome Exploratory Testing",
   "description": "Exploratory testing session using Chrome",
   "author": "@morvader",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "icons": {
     "16": "/icons/iconbig.png",
     "48": "/icons/iconbig.png",

manifest.json

@@ -21,6 +21,12 @@ Session.prototype.setAnnotations = function(newAnnotations) {
   this.annotations = newAnnotations;
 };
 
+Session.prototype.deleteAnnotation = function(annotationID) {
+  if (annotationID > -1) {
+    this.annotations.splice(annotationID, 1);
+  }
+};
+
 Session.prototype.getAnnotations = function() {
   return this.annotations;
 };

src/Session.js

@@ -15,7 +15,7 @@ describe("Exploratory Session", function() {
 
 	});
 
-	describe("shloud store annotations: bugs, ideas, questions and notes", function() {
+	describe("should manage annotations: bugs, ideas, questions and notes", function() {
 
 		var session;
 
@@ -177,6 +177,30 @@ describe("Exploratory Session", function() {
 
 		});
 
+		it("session annotaitons can be deleted", function() {
+
+			session.addBug(new Bug("Add Bug"));
+			session.addIdea(new Idea("Add Idea"));
+			session.addNote(new Note("Add Note"));
+			session.addQuestion(new Question("Add Question"));
+
+			var annotations = session.getAnnotations();
+
+			expect(annotations.length).toEqual(4);
+
+			session.deleteAnnotation(1);
+
+			annotations = session.getAnnotations();
+
+			expect(annotations.length).toEqual(3);
+
+			expect(annotations[0].getName()).toEqual("Add Bug");
+			expect(annotations[1].getName()).toEqual("Add Note");
+			expect(annotations[2].getName()).toEqual("Add Question");
+
+
+		});
+
 	});
 
 });