Improve offline mode error page

assets/javascripts/app/db.coffee

@@ -29,6 +29,7 @@ class app.DB
         @checkedBuggyIDB = true
     catch
       try db.close()
+      @reason = 'apple'
       @onOpenError()
       return
 
@@ -47,6 +48,7 @@ class app.DB
       app.onQuotaExceeded()
     else
       @useIndexedDB = false
+      @reason or= 'cant_open'
       @runCallbacks()
     return
 
@@ -251,7 +253,11 @@ class app.DB
 
   useIndexedDB: ->
     try
-      !app.isSingleDoc() and !!window.indexedDB
+      if !app.isSingleDoc() and window.indexedDB
+        true
+      else
+        @reason = 'not_supported'
+        false
     catch
       false
 

assets/javascripts/templates/error_tmpl.coffee

@@ -22,10 +22,19 @@ app.templates.bootError = ->
         """ Check your Internet connection and try <a href="javascript:location.reload()">reloading</a>.<br>
             If you keep seeing this, you're likely behind a proxy or firewall that blocks cross-domain requests. """
 
-app.templates.offlineError = ->
+app.templates.offlineError = (reason) ->
-  error """ Oops, the database failed to load. """,
+  reason = switch reason
-        """ DevDocs requires IndexedDB to cache documentations for offline access.<br>
+    when 'not_supported'
-            Unfortunately IndexedDB is either not supported in your browser, disabled, or buggy. """
+      """ Unfortunately your browser either doesn't support it or does not make it available. """
+    when 'cant_open'
+      """ Although your browser appears to support it, DevDocs couldn't open the database.<br>
+          This could be because you're browsing in private mode and have disallowed offline storage on the domain. """
+    when 'apple'
+      """ Unfortunately Safari's implementation of IndexedDB is <a href="https://bugs.webkit.org/show_bug.cgi?id=136937">badly broken</a>.<br>
+          This message will automatically go away when Apple fix their code. """
+
+  error """ Oops, offline mode is unavailable. """,
+        """ DevDocs requires IndexedDB to cache documentations for offline access.<br>#{reason} """
 
 app.templates.unsupportedBrowser = """
   <div class="_fail">

assets/javascripts/views/content/offline_page.coffee

@@ -14,7 +14,7 @@ class app.views.OfflinePage extends app.View
     app.docs.getInstallStatuses (statuses) =>
       return unless @activated
       if statuses is false
-        @html @tmpl('offlineError')
+        @html @tmpl('offlineError', app.db.reason)
       else
         html = ''
         html += @renderDoc(doc, statuses[doc.slug]) for doc in app.docs.all()

assets/stylesheets/components/_content.scss

@@ -163,8 +163,8 @@
 }
 
 ._error-title {
-  margin: -5.5rem 0 .5rem;
+  margin: -5.5rem 0 1rem;
-  line-height: 2;
+  line-height: 2rem;
   font-size: 1.5rem;
 }