Quick Jump: Show error when loading 'doc-index.json' failed (#691)

Author: timjb

haddock-api/resources/html/haddock-bundle.min.js

@@ -3,10 +3,6 @@ import preact = require("preact");
 
 const { h, Component } = preact;
 
-declare interface ObjectConstructor {
-  assign(target: any, ...sources: any[]): any;
-}
-
 type DocItem = {
   display_html: string
   name: string
@@ -19,8 +15,13 @@ function loadJSON(path: string, success: (json: DocItem[]) => void, error: (xhr:
   xhr.onreadystatechange = () => {
     if (xhr.readyState === XMLHttpRequest.DONE) {
       if (xhr.status === 200) {
-        if (success)
-          success(JSON.parse(xhr.responseText));
+        if (success) {
+          try {
+            success(JSON.parse(xhr.responseText));
+          } catch (exc) {
+            error(xhr);
+          }
+        }
       } else {
         if (error) { error(xhr); }
       }
@@ -218,7 +219,19 @@ class QuickJump extends Component<QuickJumpProps, QuickJumpState> {
   }
 
   render(props: any, state: QuickJumpState) {
-    if (state.failedLoading) { return null; }
+    if (state.failedLoading) {
+      const usingFileProtocol = window.location.protocol == 'file:';
+      return <div id="search" class={state.isVisible ? '' : 'hidden'}>
+        <div id="search-results">
+          <p class="error">Failed to load file 'doc-index.json' containing definitions in this package.</p>
+          {usingFileProtocol ? <p class="error">
+              To use quick jump, load this page with HTTP (from a local static file web server) instead of using the <code>file://</code> protocol.
+              (For security reasons, it is not possible to fetch auxiliary files using JS in a HTML page opened with <code>file://</code>.)
+            </p> : []
+          }
+        </div>
+      </div>;
+    }
 
     this.linkIndex = 0;
 

haddock-api/resources/html/js-src/quick-jump.tsx

@@ -33,17 +33,24 @@
   outline: none;
 }
 
+#search p.error {
+  color: rgb(107, 24, 24);
+  font-weight: bold;
+}
+
 #search-results {
-  top: 3em;
-  max-height: calc(100% - 3em);
   box-sizing: border-box;
-  border-width: 0 0.05em 0.05em;
-  border-style: solid;
-  border-color: #b2d5fb;
+  border: 0.05em solid #b2d5fb;
   background: #e8f3ff;
   overflow-y: auto;
 }
 
+#search-form input + #search-results {
+  border-top: none;
+  top: 3em;
+  max-height: calc(100% - 3em);
+}
+
 /* @end */
 
 /* @group search results */