Improves rendering performance of annotation layers.

This change does the following:
 * Address TODO to remove getEmptyContainer helper.
 * Not set container bg-color. The old code is incorrect, causing it to
   not have any effect. It sets color to an array (item.color) rather
   css string. Also in most cases it would set it to black background
   which is incorrect.
 * only add border instructions when there is actually a border
 * reduce memory consumption by not creating new 3 element arrays for
   annotation colors. In fact according to spec, this would be incorrect,
   as the default should be "transparent" for an empty array. Adobe
   Reader interprets a missing color array as black however.

Note that only Link annotations were actually setting a border style and
color. While Text annotations might have calculated a border they did
not color it. This behaviour is now controlled by the boolean flag.

src/core/annotation.js

@@ -79,12 +79,26 @@ var Annotation = (function AnnotationClosure() {
     data.annotationFlags = dict.get('F');
 
     var color = dict.get('C');
-    if (isArray(color) && color.length === 3) {
+    if (!color) {
-      // TODO(mack): currently only supporting rgb; need support different
+      // The PDF spec does not mention how a missing color array is interpreted.
-      // colorspaces
+      // Adobe Reader seems to default to black in this case.
-      data.color = color;
-    } else {
       data.color = [0, 0, 0];
+    } else if (isArray(color)) {
+      switch (color.length) {
+        case 0:
+          // Empty array denotes transparent border.
+          data.color = null;
+          break;
+        case 1:
+          // TODO: implement DeviceGray
+          break;
+        case 3:
+          data.color = color;
+          break;
+        case 4:
+          // TODO: implement DeviceCMYK
+          break;
+      }
     }
 
     // Some types of annotations have border style dict which has more
@@ -101,7 +115,7 @@ var Annotation = (function AnnotationClosure() {
       if (data.borderWidth > 0 && dashArray) {
         if (!isArray(dashArray)) {
           // Ignore the border if dashArray is not actually an array,
-          // this is consistent with the behaviour in Adobe Reader. 
+          // this is consistent with the behaviour in Adobe Reader.
           data.borderWidth = 0;
         } else {
           var dashArrayLength = dashArray.length;

src/display/annotation_helper.js

@@ -45,26 +45,27 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
     style.fontFamily = fontFamily + fallbackName;
   }
 
-  // TODO(mack): Remove this, it's not really that helpful.
+  function initContainer(item, drawBorder) {
-  function getEmptyContainer(tagName, rect, borderWidth) {
+    var container = document.createElement('section');
-    var bWidth = borderWidth || 0;
+    var cstyle = container.style;
-    var element = document.createElement(tagName);
+    var width = item.rect[2] - item.rect[0];
-    element.style.borderWidth = bWidth + 'px';
+    var height = item.rect[3] - item.rect[1];
-    var width = rect[2] - rect[0] - 2 * bWidth;
-    var height = rect[3] - rect[1] - 2 * bWidth;
-    element.style.width = width + 'px';
-    element.style.height = height + 'px';
-    return element;
-  }
 
-  function initContainer(item) {
+    var bWidth = item.borderWidth || 0;
-    var container = getEmptyContainer('section', item.rect, item.borderWidth);
+    if (bWidth) {
-    container.style.backgroundColor = item.color;
+      width = width - 2 * bWidth;
-
+      height = height - 2 * bWidth;
-    var color = item.color;
+      cstyle.borderWidth = bWidth + 'px';
-    item.colorCssRgb = Util.makeCssRgb(Math.round(color[0] * 255),
+      var color = item.color;
-                                       Math.round(color[1] * 255),
+      if (drawBorder && color) {
-                                       Math.round(color[2] * 255));
+        cstyle.borderStyle = 'solid';
+        cstyle.borderColor = Util.makeCssRgb(Math.round(color[0] * 255),
+                                             Math.round(color[1] * 255),
+                                             Math.round(color[2] * 255));
+      }
+    }
+    cstyle.width = width + 'px';
+    cstyle.height = height + 'px';
 
     var highlight = document.createElement('div');
     highlight.className = 'annotationHighlight';
@@ -79,7 +80,11 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
   }
 
   function getHtmlElementForTextWidgetAnnotation(item, commonObjs) {
-    var element = getEmptyContainer('div', item.rect, 0);
+    var element = document.createElement('div');
+    var width = item.rect[2] - item.rect[0];
+    var height = item.rect[3] - item.rect[1];
+    element.style.width = width + 'px';
+    element.style.height = height + 'px';
     element.style.display = 'table';
 
     var content = document.createElement('div');
@@ -109,7 +114,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
       rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
     }
 
-    var container = initContainer(item);
+    var container = initContainer(item, false);
     container.className = 'annotText';
 
     var image  = document.createElement('img');
@@ -218,12 +223,9 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
   }
 
   function getHtmlElementForLinkAnnotation(item) {
-    var container = initContainer(item);
+    var container = initContainer(item, true);
     container.className = 'annotLink';
 
-    container.style.borderColor = item.colorCssRgb;
-    container.style.borderStyle = 'solid';
-
     var link = document.createElement('a');
     link.href = link.title = item.url || '';