Merge pull request #2295 from waddlesplash/master

Make comments look nicer

web/images/annotation-comment.svg

@@ -1,3 +1,15 @@
-<svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-  <path d="M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z" fill="#333333"></path>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   height="40"
+   width="40">
+  <rect
+     style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+     width="33.76017"
+     height="33.76017"
+     x="3.119915"
+     y="3.119915" />
+  <path
+     d="m 20.677967,8.54499 c -7.342801,0 -13.295293,4.954293 -13.295293,11.065751 0,2.088793 0.3647173,3.484376 1.575539,5.150563 L 6.0267418,31.45501 13.560595,29.011117 c 2.221262,1.387962 4.125932,1.665377 7.117372,1.665377 7.3428,0 13.295291,-4.954295 13.295291,-11.065753 0,-6.111458 -5.952491,-11.065751 -13.295291,-11.065751 z"
+     style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.93031836;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
 </svg>

web/images/annotation-help.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="40"
+   height="40">
+  <g
+     transform="translate(0,-60)"
+     id="layer1">
+    <rect
+       width="36.460953"
+       height="34.805603"
+       x="1.7695236"
+       y="62.597198"
+       style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.30826771;stroke-opacity:1" />
+    <g
+       transform="matrix(0.88763677,0,0,0.88763677,2.2472646,8.9890584)">
+      <path
+         d="M 20,64.526342 C 11.454135,64.526342 4.5263421,71.454135 4.5263421,80 4.5263421,88.545865 11.454135,95.473658 20,95.473658 28.545865,95.473658 35.473658,88.545865 35.473658,80 35.473658,71.454135 28.545865,64.526342 20,64.526342 z m -0.408738,9.488564 c 3.527079,0 6.393832,2.84061 6.393832,6.335441 0,3.494831 -2.866753,6.335441 -6.393832,6.335441 -3.527079,0 -6.393832,-2.84061 -6.393832,-6.335441 0,-3.494831 2.866753,-6.335441 6.393832,-6.335441 z"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.02768445;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+      <path
+         d="m 7.2335209,71.819938 4.9702591,4.161823 c -1.679956,2.581606 -1.443939,6.069592 0.159325,8.677725 l -5.1263071,3.424463 c 0.67516,1.231452 3.0166401,3.547686 4.2331971,4.194757 l 3.907728,-4.567277 c 2.541952,1.45975 5.730694,1.392161 8.438683,-0.12614 l 3.469517,6.108336 c 1.129779,-0.44367 4.742234,-3.449633 5.416358,-5.003859 l -5.46204,-4.415541 c 1.44319,-2.424098 1.651175,-5.267515 0.557303,-7.748623 l 5.903195,-3.833951 C 33.14257,71.704996 30.616217,69.018606 29.02952,67.99296 l -4.118813,4.981678 C 22.411934,71.205099 18.900853,70.937534 16.041319,72.32916 l -3.595408,-5.322091 c -1.345962,0.579488 -4.1293881,2.921233 -5.2123901,4.812869 z m 8.1010311,3.426672 c 2.75284,-2.446266 6.769149,-2.144694 9.048998,0.420874 2.279848,2.56557 2.113919,6.596919 -0.638924,9.043185 -2.752841,2.446267 -6.775754,2.13726 -9.055604,-0.428308 -2.279851,-2.565568 -2.107313,-6.589485 0.64553,-9.035751 z"
+         style="fill:#000000;fill-opacity:1;stroke:none" />
+    </g>
+  </g>
+</svg>

web/images/annotation-note.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="40"
+   height="40">
+  <rect
+     width="36.075428"
+     height="31.096582"
+     x="1.962286"
+     y="4.4517088"
+     id="rect4"
+     style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.23004246;stroke-opacity:1" />
+  <rect
+     width="27.96859"
+     height="1.5012145"
+     x="6.0157046"
+     y="10.285"
+     id="rect6"
+     style="fill:#000000;fill-opacity:1;stroke:none" />
+  <rect
+     width="27.96859"
+     height="0.85783684"
+     x="6.0157056"
+     y="23.21689"
+     id="rect8"
+     style="fill:#000000;fill-opacity:1;stroke:none" />
+  <rect
+     width="27.96859"
+     height="0.85783684"
+     x="5.8130345"
+     y="28.964394"
+     id="rect10"
+     style="fill:#000000;fill-opacity:1;stroke:none" />
+  <rect
+     width="27.96859"
+     height="0.85783684"
+     x="6.0157046"
+     y="17.426493"
+     id="rect12"
+     style="fill:#000000;fill-opacity:1;stroke:none" />
+</svg>

web/images/annotation-text.svg

@@ -1,46 +0,0 @@
-<?xml version="1.0" encoding="utf-8" standalone="no"?>
-<svg
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   height="40"
-   width="40"
-   id="svg2995"
-   version="1.1">
-  
-  <rect
-     style="fill:#f1e47b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-opacity:1"
-     id="rect3009"
-     width="30.169491"
-     height="24.576269"
-     x="4.237288"
-     y="6.7796612" />
-  <rect
-     style="fill:#000000;fill-opacity:1;stroke:none"
-     id="rect3781"
-     width="23.38983"
-     height="1.1864407"
-     x="7.6271186"
-     y="11.389831" />
-  <rect
-     style="fill:#000000;fill-opacity:1;stroke:none"
-     id="rect3781-1"
-     width="23.38983"
-     height="0.67796612"
-     x="7.6271191"
-     y="21.61017" />
-  <rect
-     style="fill:#000000;fill-opacity:1;stroke:none"
-     id="rect3781-7"
-     width="23.38983"
-     height="0.67796612"
-     x="7.4576273"
-     y="26.152542" />
-  <rect
-     style="fill:#000000;fill-opacity:1;stroke:none"
-     id="rect3781-1-4"
-     width="23.38983"
-     height="0.67796612"
-     x="7.6271186"
-     y="17.033899" />
-</svg>

web/viewer.css

@@ -1195,31 +1195,30 @@ canvas {
 ::selection { background:rgba(0,0,255,0.3); }
 ::-moz-selection { background:rgba(0,0,255,0.3); }
 
-.annotComment > div {
+.annotText > div {
   z-index: 200;
   position: absolute;
-}
+  padding: 0.6em;
-
-.annotComment > img {
-  position: absolute;
-}
-
-.annotComment > img:hover {
-  cursor: pointer;
-  opacity: 0.7;
-}
-
-.annotComment > div {
-  padding: 0.2em;
   max-width: 20em;
-  background-color: #F1E47B;
+  background-color: #FFFF99;
   -webkit-box-shadow: 0px 2px 10px #333;
   -moz-box-shadow: 0px 2px 10px #333;
   box-shadow: 0px 2px 10px #333;
+  border-radius: 7px;
+  -moz-border-radius: 7px;
 }
 
-.annotComment > div > h1 {
+.annotText > img {
-  font-weight: normal;
+  position: absolute;
+  opacity: 0.6;
+}
+
+.annotText > img:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+
+.annotText > div > h1 {
   font-size: 1.2em;
   border-bottom: 1px solid #000000;
   margin: 0px;

web/viewer.js

@@ -42,6 +42,8 @@ var FindStates = {
   FIND_PENDING: 3
 };
 
+var ANNOT_MIN_SIZE = 10;
+
 //#if (GENERIC || CHROME)
 //PDFJS.workerSrc = '../build/pdf.js';
 //#endif
@@ -1791,9 +1793,11 @@ var PageView = function pageView(container, pdfPage, id, scale,
         return false;
       };
     }
-    function createElementWithStyle(tagName, item) {
+    function createElementWithStyle(tagName, item, rect) {
-      var rect = viewport.convertToViewportRectangle(item.rect);
+      if (!rect) {
-      rect = PDFJS.Util.normalizeRect(rect);
+        rect = viewport.convertToViewportRectangle(item.rect);
+        rect = PDFJS.Util.normalizeRect(rect);
+      }
       var element = document.createElement(tagName);
       element.style.left = Math.floor(rect[0]) + 'px';
       element.style.top = Math.floor(rect[1]) + 'px';
@@ -1801,16 +1805,24 @@ var PageView = function pageView(container, pdfPage, id, scale,
       element.style.height = Math.ceil(rect[3] - rect[1]) + 'px';
       return element;
     }
-    function createCommentAnnotation(type, item) {
+    function createTextAnnotation(item) {
       var container = document.createElement('section');
-      container.className = 'annotComment';
+      container.className = 'annotText';
 
-      var image = createElementWithStyle('img', item);
-      var type = item.type;
       var rect = viewport.convertToViewportRectangle(item.rect);
       rect = PDFJS.Util.normalizeRect(rect);
-      image.src = kImageDirectory + 'annotation-' + type.toLowerCase() + '.svg';
+      // sanity check because of OOo-generated PDFs
-      image.alt = mozL10n.get('text_annotation_type', {type: type},
+      if ((rect[3] - rect[1]) < ANNOT_MIN_SIZE) {
+        rect[3] = rect[1] + ANNOT_MIN_SIZE;
+      }
+      if ((rect[2] - rect[0]) < ANNOT_MIN_SIZE) {
+        rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
+      }
+      var image = createElementWithStyle('img', item, rect);
+      var iconName = item.name;
+      image.src = kImageDirectory + 'annotation-' +
+        iconName.toLowerCase() + '.svg';
+      image.alt = mozL10n.get('text_annotation_type', {type: iconName},
         '[{{type}} Annotation]');
       var content = document.createElement('div');
       content.setAttribute('hidden', true);
@@ -1824,7 +1836,7 @@ var PageView = function pageView(container, pdfPage, id, scale,
         content.setAttribute('hidden', true);
       } else {
         var e = document.createElement('span');
-        var lines = item.content.split('\n');
+        var lines = item.content.split(/(?:\r\n?|\n)/);
         for (var i = 0, ii = lines.length; i < ii; ++i) {
           var line = lines[i];
           e.appendChild(document.createTextNode(line));
@@ -1861,9 +1873,9 @@ var PageView = function pageView(container, pdfPage, id, scale,
             div.appendChild(link);
             break;
           case 'Text':
-            var comment = createCommentAnnotation(item.name, item);
+            var textAnnotation = createTextAnnotation(item);
-            if (comment)
+            if (textAnnotation)
-              div.appendChild(comment);
+              div.appendChild(textAnnotation);
             break;
           case 'Widget':
             // TODO: support forms