Adding new errorback and code to display error messages.

web/viewer.css

@@ -252,6 +252,37 @@ canvas {
   display: none;
 }
 
+#errorWrapper {
+  background: none repeat scroll 0 0 #FF5555;
+  color: white;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 30px;
+  z-index: 1000;
+  padding: 3px;
+}
+
+#errorMessageLeft {
+  float: left;
+}
+
+#errorMessageRight {
+  float: right;
+}
+
+#errorMoreInfo {
+  background-color: #FFFFFF;
+  color: black;
+  padding: 3px;
+  margin: 3px;
+  white-space: pre;
+}
+
+.clearBoth {
+  clear: both;
+}
+
 /* === Printed media overrides === */
 @media print {
   #sidebar {

web/viewer.html

@@ -97,6 +97,24 @@
 
       <span id="info">--</span>
     </div>
+    <div id="errorWrapper" hidden='true'>
+      <div id="errorMessageLeft">
+        <span id="errorMessage"></span>
+        <button id="errorShowMore" onclick="" oncontextmenu="return false;">
+          More Information
+        </button>
+        <button id="errorShowLess" onclick="" oncontextmenu="return false;" hidden='true'>
+          Less Information
+        </button>
+      </div>
+      <div id="errorMessageRight">
+        <button id="errorClose" oncontextmenu="return false;">
+          X
+        </button>
+      </div>
+      <div class="clearBoth"></div>
+      <div id="errorMoreInfo" hidden='true'></div>
+    </div>
 
     <div id="sidebar">
       <div id="sidebarBox">

web/viewer.js

@@ -181,9 +181,34 @@ var PDFView = {
     return '';
   },
 
-  error: function pdfViewError() {
-    var loadingIndicator = document.getElementById('loading');
-    loadingIndicator.innerHTML = 'Error';
+  error: function pdfViewError(message, error) {
+    var errorWrapper = document.getElementById('errorWrapper');
+    errorWrapper.removeAttribute('hidden');
+
+    var errorMessage = document.getElementById('errorMessage');
+    errorMessage.innerHTML = message;
+
+    if (error) {
+      var errorMoreInfo = document.getElementById('errorMoreInfo');
+      var moreInfoButton = document.getElementById('errorShowMore');
+      var lessInfoButton = document.getElementById('errorShowLess');
+      var closeButton = document.getElementById('errorClose');
+      moreInfoButton.onclick = function() {
+        errorMoreInfo.removeAttribute('hidden');
+        moreInfoButton.setAttribute('hidden', 'true');
+        lessInfoButton.removeAttribute('hidden');
+      };
+      lessInfoButton.onclick = function() {
+        errorMoreInfo.setAttribute('hidden', 'true');
+        moreInfoButton.removeAttribute('hidden');
+        lessInfoButton.setAttribute('hidden', 'true');
+      };
+      closeButton.onclick = function() {
+        errorWrapper.setAttribute('hidden', 'true');
+      };
+      moreInfoButton.removeAttribute('hidden');
+      errorMoreInfo.innerHTML = error.message + '\n' + error.stack;
+    }
   },
 
   progress: function pdfViewProgress(level) {
@@ -487,7 +512,9 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     ctx.translate(-this.x * scale, -this.y * scale);
 
     stats.begin = Date.now();
-    this.content.startRendering(ctx, this.updateStats);
+    this.content.startRendering(ctx, this.updateStats, function(e) {
+      PDFView.error('An error occured while rendering the page.', e);
+    });
 
     setupLinks(this.content, this.scale);
     div.setAttribute('data-loaded', true);