From b6077c739810dae8265486892e49c8d66cc62c77 Mon Sep 17 00:00:00 2001 From: benbro Date: Sat, 12 May 2012 03:40:40 +0300 Subject: [PATCH 01/47] IE9 breaks when adding to many style elements to the page. --- src/fonts.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/fonts.js b/src/fonts.js index 22037e724..d22a54352 100644 --- a/src/fonts.js +++ b/src/fonts.js @@ -20,6 +20,9 @@ var kPDFGlyphSpaceUnits = 1000; // Until hinting is fully supported this constant can be used var kHintingEnabled = false; +// A reference to a reusable style sheet. +var styleSheet; + var FontFlags = { FixedPitch: 1, Serif: 2, @@ -2374,11 +2377,14 @@ var Font = (function FontClosure() { window.btoa(data) + ');'); var rule = "@font-face { font-family:'" + fontName + "';src:" + url + '}'; - var styleElement = document.createElement('style'); - document.documentElement.getElementsByTagName('head')[0].appendChild( - styleElement); - var styleSheet = styleElement.sheet; + if(!styleSheet) { + var styleElement = document.createElement('style'); + document.documentElement.getElementsByTagName('head')[0].appendChild( + styleElement); + + styleSheet = styleElement.sheet; + } styleSheet.insertRule(rule, styleSheet.cssRules.length); if (PDFJS.pdfBug && FontInspector.enabled) From 81681e7914523ec393a947a60415a1779a8110a8 Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Sun, 27 May 2012 13:50:46 -0500 Subject: [PATCH 02/47] Pre-scale image in the paintImageMaskXObject --- src/canvas.js | 46 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/canvas.js b/src/canvas.js index 9d470fbec..b9d8e9e17 100644 --- a/src/canvas.js +++ b/src/canvas.js @@ -1094,6 +1094,40 @@ var CanvasGraphics = (function CanvasGraphicsClosure() { } } } + function rescaleImage(pixels, widthScale, heightScale) { + var scaledWidth = Math.ceil(width / widthScale); + var scaledHeight = Math.ceil(height / heightScale); + + var itemsSum = new Uint32Array(scaledWidth * scaledHeight * 4); + var itemsCount = new Uint32Array(scaledWidth * scaledHeight); + for (var i = 0, position = 0; i < height; i++) { + var lineOffset = (0 | (i / heightScale)) * scaledWidth; + for (var j = 0; j < width; j++) { + var countOffset = lineOffset + (0 | (j / widthScale)); + var sumOffset = countOffset << 2; + itemsSum[sumOffset] += pixels[position]; + itemsSum[sumOffset + 1] += pixels[position + 1]; + itemsSum[sumOffset + 2] += pixels[position + 2]; + itemsSum[sumOffset + 3] += pixels[position + 3]; + itemsCount[countOffset]++; + position += 4; + } + } + var tmpCanvas = createScratchCanvas(scaledWidth, scaledHeight); + var tmpCtx = tmpCanvas.getContext('2d'); + var imgData = tmpCtx.getImageData(0, 0, scaledWidth, scaledHeight); + pixels = imgData.data; + for (var i = 0, j = 0, ii = scaledWidth * scaledHeight; i < ii; i++) { + var count = itemsCount[i]; + pixels[j] = itemsSum[j] / count; + pixels[j + 1] = itemsSum[j + 1] / count; + pixels[j + 2] = itemsSum[j + 2] / count; + pixels[j + 3] = itemsSum[j + 3] / count; + j += 4; + } + tmpCtx.putImageData(imgData, 0, 0); + return tmpCanvas; + } this.save(); @@ -1117,7 +1151,17 @@ var CanvasGraphics = (function CanvasGraphicsClosure() { applyStencilMask(pixels, inverseDecode); tmpCtx.putImageData(imgData, 0, 0); - ctx.drawImage(tmpCanvas, 0, -h); + var currentTransform = ctx.mozCurrentTransformInverse; + var widthScale = Math.max(Math.abs(currentTransform[0]), 1); + var heightScale = Math.max(Math.abs(currentTransform[3]), 1); + if (widthScale >= 2 || heightScale >= 2) { + // canvas does not resize large images to small -- using simple + // algorithm to perform pre-scaling + tmpCanvas = rescaleImage(imgData.data, widthScale, heightScale); + ctx.scale(widthScale, heightScale); + ctx.drawImage(tmpCanvas, 0, -h / heightScale); + } else + ctx.drawImage(tmpCanvas, 0, -h); this.restore(); }, From 50b86ff480ffbad345ca9ca39974143006afc9da Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Mon, 28 May 2012 15:10:44 -0500 Subject: [PATCH 03/47] Move putImageData --- src/canvas.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/canvas.js b/src/canvas.js index b9d8e9e17..0be8cdb59 100644 --- a/src/canvas.js +++ b/src/canvas.js @@ -1150,17 +1150,17 @@ var CanvasGraphics = (function CanvasGraphicsClosure() { applyStencilMask(pixels, inverseDecode); - tmpCtx.putImageData(imgData, 0, 0); var currentTransform = ctx.mozCurrentTransformInverse; var widthScale = Math.max(Math.abs(currentTransform[0]), 1); var heightScale = Math.max(Math.abs(currentTransform[3]), 1); if (widthScale >= 2 || heightScale >= 2) { - // canvas does not resize large images to small -- using simple + // canvas does not resize well large images to small -- using simple // algorithm to perform pre-scaling tmpCanvas = rescaleImage(imgData.data, widthScale, heightScale); ctx.scale(widthScale, heightScale); ctx.drawImage(tmpCanvas, 0, -h / heightScale); } else + tmpCtx.putImageData(imgData, 0, 0); ctx.drawImage(tmpCanvas, 0, -h); this.restore(); }, From 4e39685753b5f70979496b42f45dc69f68c43a2b Mon Sep 17 00:00:00 2001 From: benbro Date: Thu, 31 May 2012 12:01:15 +0300 Subject: [PATCH 04/47] Use a style tag with an ID instead of keeping a reference to it. --- src/fonts.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/fonts.js b/src/fonts.js index d22a54352..e0dfe8b2b 100644 --- a/src/fonts.js +++ b/src/fonts.js @@ -20,9 +20,6 @@ var kPDFGlyphSpaceUnits = 1000; // Until hinting is fully supported this constant can be used var kHintingEnabled = false; -// A reference to a reusable style sheet. -var styleSheet; - var FontFlags = { FixedPitch: 1, Serif: 2, @@ -2377,14 +2374,14 @@ var Font = (function FontClosure() { window.btoa(data) + ');'); var rule = "@font-face { font-family:'" + fontName + "';src:" + url + '}'; - - if(!styleSheet) { - var styleElement = document.createElement('style'); - document.documentElement.getElementsByTagName('head')[0].appendChild( - styleElement); - - styleSheet = styleElement.sheet; + var styleElement = document.getElementById('PDFJS_FONT_STYLE_TAG'); + if (!styleElement) { + styleElement = document.createElement('style'); + document.documentElement.getElementsByTagName('head')[0].appendChild( + styleElement); } + + var styleSheet = styleElement.sheet; styleSheet.insertRule(rule, styleSheet.cssRules.length); if (PDFJS.pdfBug && FontInspector.enabled) From 6de284acc9a5fdbb6073eea440a43fcbb4a95d02 Mon Sep 17 00:00:00 2001 From: benbro Date: Thu, 31 May 2012 12:05:06 +0300 Subject: [PATCH 05/47] Set the style element ID. --- src/fonts.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/fonts.js b/src/fonts.js index e0dfe8b2b..0e505a808 100644 --- a/src/fonts.js +++ b/src/fonts.js @@ -2377,6 +2377,7 @@ var Font = (function FontClosure() { var styleElement = document.getElementById('PDFJS_FONT_STYLE_TAG'); if (!styleElement) { styleElement = document.createElement('style'); + styleElement.id = 'PDFJS_FONT_STYLE_TAG'; document.documentElement.getElementsByTagName('head')[0].appendChild( styleElement); } From d5da15e0017ae45b944642fd3d3c7185bb2e67c5 Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Tue, 5 Jun 2012 17:56:18 -0500 Subject: [PATCH 06/47] Fixes brackets --- src/canvas.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/canvas.js b/src/canvas.js index 0be8cdb59..06b02c2eb 100644 --- a/src/canvas.js +++ b/src/canvas.js @@ -1159,9 +1159,10 @@ var CanvasGraphics = (function CanvasGraphicsClosure() { tmpCanvas = rescaleImage(imgData.data, widthScale, heightScale); ctx.scale(widthScale, heightScale); ctx.drawImage(tmpCanvas, 0, -h / heightScale); - } else + } else { tmpCtx.putImageData(imgData, 0, 0); ctx.drawImage(tmpCanvas, 0, -h); + } this.restore(); }, From 2dacbb7a03f591218b0b0fdd83765ebe18405aea Mon Sep 17 00:00:00 2001 From: Saebekassebil Date: Thu, 7 Jun 2012 21:27:26 +0200 Subject: [PATCH 07/47] Dismiss native browser zoom, and use PDF.JS zoom instead --- web/viewer.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/web/viewer.js b/web/viewer.js index 751f2deff..7d07b991e 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -1844,6 +1844,18 @@ window.addEventListener('pagechange', function pagechange(evt) { document.getElementById('next').disabled = (page >= PDFView.pages.length); }, true); +// Firefox specific event, so that we can prevent browser from zooming +window.addEventListener('DOMMouseScroll', function(evt) { + if(evt.ctrlKey) { + evt.preventDefault(); + + var ticks = evt.detail; + var direction = (ticks > 0) ? 'zoomOut' : 'zoomIn'; + for(var i = 0, length = Math.abs(ticks); i < length; i++) + PDFView[direction](); + } +}, false); + window.addEventListener('keydown', function keydown(evt) { var handled = false; var cmd = (evt.ctrlKey ? 1 : 0) | From 67703364fc0c05ed9613dd9bb2d4b7fc650e4a41 Mon Sep 17 00:00:00 2001 From: Saebekassebil Date: Thu, 7 Jun 2012 21:39:18 +0200 Subject: [PATCH 08/47] lint errors --- web/viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index 7d07b991e..29b57a948 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -1846,12 +1846,12 @@ window.addEventListener('pagechange', function pagechange(evt) { // Firefox specific event, so that we can prevent browser from zooming window.addEventListener('DOMMouseScroll', function(evt) { - if(evt.ctrlKey) { + if (evt.ctrlKey) { evt.preventDefault(); var ticks = evt.detail; var direction = (ticks > 0) ? 'zoomOut' : 'zoomIn'; - for(var i = 0, length = Math.abs(ticks); i < length; i++) + for (var i = 0, length = Math.abs(ticks); i < length; i++) PDFView[direction](); } }, false); From cebee4026d8add0ee6fbd054e92861708c4f6bd1 Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Thu, 7 Jun 2012 13:51:29 -0700 Subject: [PATCH 09/47] UI update from shorlanders comments. --- l10n/en-US/viewer.properties | 2 - web/images/toolbarButton-openFile.png | Bin 708 -> 417 bytes web/images/toolbarButton-search.png | Bin 744 -> 503 bytes web/viewer.css | 122 +++++++++++++++----------- web/viewer.html | 10 +-- web/viewer.js | 14 +-- 6 files changed, 82 insertions(+), 66 deletions(-) diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties index 66f4a43e8..de6fd95db 100644 --- a/l10n/en-US/viewer.properties +++ b/l10n/en-US/viewer.properties @@ -78,8 +78,6 @@ page_scale_auto=Automatic Zoom page_scale_actual=Actual Size # Loading indicator messages -# LOCALIZATION NOTE (error_line): "{{percent}}" will be replaced with a percentage -loading=Loading… {{percent}}% loading_error_indicator=Error loading_error=An error occurred while loading the PDF. diff --git a/web/images/toolbarButton-openFile.png b/web/images/toolbarButton-openFile.png index 12ce45f876b12eef3e5030b492d58d5fbb47ebbf..fc7023f2aafcdbb3b2412934c017225637c8bb9e 100644 GIT binary patch delta 392 zcmV;30eAky1)&3wBYy#CNklY`u@r0Pg5(gIt zKS4o}g1A}g%jhT};$T7OAPy;H>flra2St?bnbSZL$Y+TEgF85m2n7#*aQD1j5<>Dk z{}-_qVGT5BavG17$sDU1MbRrJ{zyK9Ab6?OYC6B5c=6<(=YM%$j^lg_uIo;H-=9t< zlSkxtp{YKd7+ej*aEu$@{_qYTs@ZHdX1zdk1V->IOVe~{S=O~}+x;xdhH4&0tQQEy z;Yk+9@qki#irfZlnx@%Jl4PLPv0flMI6MgWnD@G_A0u9eGFNZ4S|=$;IdoA&%*aEIC8B#;6{bGAq_B!YUBYID#T6c70jX< zF<={qb5*0!=peVnXqwh3s$soA*73KUA<$LypwIQxJnLb-KvsalAsjJ$e*iY@^Szp< myqA<<2`aEWrwZ>W{Q@<`>KMYv%sl`A002ovPDHLkU;%=F`M78R delta 685 zcmV;e0#f~<1H=W8BYyw{b3#c}2nYxWdT2_|?DW!B>L;_wc?Zu;_6+$X4AyT|~3gSQD&4XUWvwt`1MT#adDA|iAF$O&J zW)IeYO?2C3X?|_U?q;)L$AgU|O^W?sm~S5Md-J`Sk1)n?TBK5`$2`wpsaC7^cXoDy zX&f?5U~_Ym9}EUB7Zw)Mk|afHwOZNpyp3Y9*!r(PGMPL#Gc)r}Rn;4kB=GbGvUdso->AAhF`Boc|silV$#Rdt!?`7vR}7!1Ss={U~ALZR?+h;t);Z^^R!d47I= znGiBzD-1)#VzEo2D85Oj(+`F?9VVhEMmdiAWSXWxDZRe9xOibyz_Ki(UavpmIL`Kc zzcOYalgZqko11&Ky1Kdq0J&TavMi5vaCmrV3xe>RNu$-Rt#MG);r1X%j@x^CmDt2!bGhZQB*7L`x76v;_%@ zmM9iB^r1sVf!&a+LRUjYsGy;SXlXDSqS4Xa%|ApGMeLk-iHe)y13!4)=bZC?+^cI* zoxlhzV3LU5D72Q=TJZiW)sw zOIjPumdoV_nC`7s>n7GF&?y+kY>OH_^lEJ|5AhnNTS<~Our_?t44hGe=Z0Rb4W^8#t2=CeL_CxW$eqsE#3}8W)3Rq Ufyij|od5s;07*qoM6N<$f}oq*$p8QV delta 721 zcmV;?0xtdc1Ly^iBYyw{b3#c}2nYxWdYE`J5-`*D{Nl}cr8 zW@g3@!w|V#4u4x)TfYG81AvBqh=?@Cm9Om&^9U6?&eR*Yo*&bKHJUPEKC$ z?CiV+z~<)Wo>i;WcZ0!T#4|ZL+0Z=C%Z>v$jsqg<5>Y3ePNyEW006dadzxvQ{y0D? zl^XsKLYR#GeT=4QW;M?F*a|r3sr$EOS*dZJWJ)rb)sK&lzqVSfpHURCe!mYP1cVSc zJ3IS+Z@js=Y3%OqzL!!`5CqUPjX39Yd3iZ{%KxL^o{ai{04ZY800000NkvXXu0mjf D(X2-Q diff --git a/web/viewer.css b/web/viewer.css index 329bff2d5..7c7d4f684 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -146,7 +146,7 @@ html[dir='rtl'] #sidebarContent { #toolbarSidebar { width: 200px; - height: 32px; + height: 29px; background-image: url(images/texture.png), -moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95)); background-image: url(images/texture.png), @@ -242,9 +242,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { margin-right:0; } +.splitToolbarButton.toggled .toolbarButton { + margin: 0; +} + .splitToolbarButton:hover > .toolbarButton, .splitToolbarButton:focus > .toolbarButton, -.splitToolbarButton.toggled > .toolbarButton { +.splitToolbarButton.toggled > .toolbarButton, +.toolbarButton.textButton { background-color: hsla(0,0%,0%,.12); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); @@ -263,7 +268,9 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { } .splitToolbarButton > .toolbarButton:hover, .splitToolbarButton > .toolbarButton:focus, -.dropdownToolbarButton:hover { +.dropdownToolbarButton:hover, +.toolbarButton.textButton:hover, +.toolbarButton.textButton:focus { background-color: hsla(0,0%,0%,.2); box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, @@ -544,8 +551,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before { .toolbarField { - min-width: 16px; - width: 32px; padding: 3px 6px; margin: 4px 0 4px 0; border: 1px solid transparent; @@ -560,7 +565,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before { color: hsl(0,0%,95%); font-size: 12px; line-height: 14px; - text-align: right; outline-style: none; -moz-transition-property: background-color, border-color, box-shadow; -moz-transition-duration: 150ms; @@ -568,6 +572,8 @@ html[dir='rtl'] .toolbarButton.pageDown::before { } .toolbarField.pageNumber { + min-width: 16px; + text-align: right; width: 40px; } @@ -682,9 +688,11 @@ a:focus > .thumbnail > .thumbnailSelectionRing, margin-left: 20px; } -.outlineItem > a { +.outlineItem > a, +#searchResults > a { text-decoration: none; - display: block; + display: inline-block; + min-width: 95%; height: 20px; padding: 2px 0 0 10px; margin-bottom: 1px; @@ -697,7 +705,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing, white-space: nowrap; } -.outlineItem > a:hover { +.outlineItem > a:hover, +#searchResults > a:hover { background-color: hsla(0,0%,100%,.02); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-clip: padding-box; @@ -707,6 +716,23 @@ a:focus > .thumbnail > .thumbnailSelectionRing, color: hsla(0,0%,100%,.9); } +.outlineItem.selected { + background-color: hsla(0,0%,100%,.08); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2); + color: hsla(0,0%,100%,1); +} + +.noOutline, +.noResults { + font-size: 12px; + color: hsla(0,0%,100%,.8); + font-style: italic; +} + #searchScrollView { position: absolute; top: 10px; @@ -723,27 +749,26 @@ a:focus > .thumbnail > .thumbnailSelectionRing, } #searchToolbar > input { - margin-left: 8px; - width: 130px; + margin-left: 4px; + width: 124px; +} + +#searchToolbar button { + width: auto; + margin: 0; + padding: 0 6px; + height: 22px; } #searchResults { overflow: auto; - background-color: #fff; position: absolute; top: 30px; bottom: 0px; left: 0px; right: 0; + padding: 4px 4px 0; font-size: smaller; - opacity: 0.7; -} - -#searchResults a { - display: block; - white-space: pre; - text-decoration: none; - color: black; } #sidebarControls { @@ -754,24 +779,6 @@ a:focus > .thumbnail > .thumbnailSelectionRing, bottom: 35px; } -.outlineItem.selected { - background-color: hsla(0,0%,100%,.08); - background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); - background-clip: padding-box; - box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, - 0 0 1px hsla(0,0%,100%,.1) inset, - 0 0 1px hsla(0,0%,0%,.2); - color: hsla(0,0%,100%,1); -} - -.noOutline { - font-size: 12px; - color: hsla(0,0%,100%,.8); - font-style: italic; -} - - - canvas { margin: auto; display: block; @@ -814,23 +821,33 @@ canvas { } #loadingBox { - margin: 100px 0; + position: absolute; + top: 50%; + margin-top: -25px; + left: 0; + right: 0; text-align: center; color: #ddd; font-size: 14px; } #loadingBar { - background-color: #333; display: inline-block; - border: 1px solid black; clear: both; margin: 0px; margin-top: 5px; line-height: 0; - border-radius: 4px; + border-radius: 2px; width: 200px; height: 25px; + + background-color: hsla(0,0%,0%,.3); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + border: 1px solid #000; + box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2) inset, + 0 0 1px 1px rgba(255, 255, 255, 0.1); } #loadingBar .progress { @@ -838,23 +855,22 @@ canvas { float: left; background: #666; - background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999)); - background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: linear-gradient(top, #999 0%,#666 50%,#999 100%); - - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + background: -moz-linear-gradient(top, #b2b2b2 0%, #898989 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989)); + background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: linear-gradient(top, #b2b2b2 0%,#898989 100%); + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; width: 0%; height: 100%; } #loadingBar .progress.full { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } .textLayer { diff --git a/web/viewer.html b/web/viewer.html index f76c3665f..4edf6ce1a 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -45,7 +45,7 @@
-
+
@@ -63,8 +63,8 @@
@@ -150,8 +150,8 @@
-
Loading... 0%
-
+
+