Addressing notmasteryet's comments

src/core.js

@@ -379,7 +379,6 @@ var Page = (function PageClosure() {
             item.textAlignment = getInheritableProperty(annotation, 'Q');
             item.flags = getInheritableProperty(annotation, 'Ff') || 0;
             break;
-
           case 'Text':
             var content = annotation.get('Contents');
             var title = annotation.get('T');
@@ -387,7 +386,6 @@ var Page = (function PageClosure() {
             item.title = stringToPDFString(title || '');
             item.name = annotation.get('Name').name;
             break;
-
           default:
             TODO('unimplemented annotation type: ' + subtype.name);
             break;

web/viewer.css

@@ -251,29 +251,25 @@ canvas {
   position: absolute;
 }
 
-.annotComment > .annotImageComment {
-  background: transparent url('./images/text.svg') no-repeat left top;
-  background-size: 75% 75%;
+.annotComment > img {
+  position: absolute;
 }
 
-.annotComment > .annotImageCheck {
-  background: transparent url('./images/check.svg') no-repeat left top;
-  background-size: 75% 75%;
-}
-
-.annotComment > .annotImage:hover {
+.annotComment > img:hover {
   cursor: pointer;
   opacity: 0.7;
 }
 
-.annotComment > .annotDetails {
-  display: none;
+.annotComment > div {
   padding: 0.2em;
   max-width: 20em;
   background-color: #F1E47B;
+  box-shadow: 0px 2px 10px #333;
+  -moz-box-shadow: 0px 2px 10px #333;
+  -webkit-box-shadow: 0px 2px 10px #333;
 }
 
-.annotComment > .annotDetails > h1 {
+.annotComment > div > h1 {
   font-weight: normal;
   font-size: 1.2em;
   border-bottom: 1px solid #000000;

web/viewer.js

@@ -476,40 +476,39 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
       return element;
     }
     function createCommentAnnotation(type, item) {
-      var annotContainer = document.createElement('section');
-      annotContainer.className = 'annotComment';
-
-      var annotImage = createElementWithStyle('div', item);
-      annotImage.className = 'annotImage annotImage' + type;
-      var annotDetails = document.createElement('div');
-      annotDetails.className = 'annotDetails';
-      var annotTitle = document.createElement('h1');
-      var annotContent = document.createElement('p');
+      var container = document.createElement('section');
+      container.className = 'annotComment';
 
+      var image = createElementWithStyle('img', item);
+      image.src = './images/' + type.toLowerCase() + '.svg';
+      var content = document.createElement('div');
+      content.setAttribute('hidden', true);
+      var title = document.createElement('h1');
+      var text = document.createElement('p');
       var offsetPos = Math.floor(item.x - view.x + item.width);
-      annotDetails.style.left = (offsetPos * scale) + 'px';
-      annotDetails.style.top = (Math.floor(item.y - view.y) * scale) + 'px';
-      annotTitle.textContent = item.title;
+      content.style.left = (offsetPos * scale) + 'px';
+      content.style.top = (Math.floor(item.y - view.y) * scale) + 'px';
+      title.textContent = item.title;
 
       if (!item.content) {
-        annotContent.style.display = 'none';
+        content.setAttribute('hidden', true);
       } else {
-        annotContent.innerHTML = item.content.replace('\n', '<br />');
-        annotImage.addEventListener('mouseover', function() {
-           this.nextSibling.style.display = 'block';
-        }, true);
+        text.innerHTML = item.content.replace('\n', '<br />');
+        image.addEventListener('mouseover', function annotationImageOver() {
+           this.nextSibling.removeAttribute('hidden');
+        }, false);
 
-        annotImage.addEventListener('mouseout', function() {
-           this.nextSibling.style.display = 'none';
-        }, true);
+        image.addEventListener('mouseout', function annotationImageOut() {
+           this.nextSibling.setAttribute('hidden', true);
+        }, false);
       }
 
-      annotDetails.appendChild(annotTitle);
-      annotDetails.appendChild(annotContent);
-      annotContainer.appendChild(annotImage);
-      annotContainer.appendChild(annotDetails);
+      content.appendChild(title);
+      content.appendChild(text);
+      container.appendChild(image);
+      container.appendChild(content);
 
-      return annotContainer;
+      return container;
     }
 
     var items = content.getAnnotations();
@@ -523,9 +522,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
             bindLink(link, ('dest' in item) ? item.dest : null);
           div.appendChild(link);
           break;
-
         case 'Text':
-        case 'Check':
           var comment = createCommentAnnotation(item.name, item);
           if (comment)
             div.appendChild(comment);