From 1252b36a1c4c17f30702f8eededcbb692ff1272b Mon Sep 17 00:00:00 2001
From: Thibaut <thibaut@me.com>
Date: Sun, 9 Aug 2015 13:12:38 -0400
Subject: [PATCH] Improve offline mode error page

---
 assets/javascripts/app/db.coffee                |  8 +++++++-
 assets/javascripts/templates/error_tmpl.coffee  | 17 +++++++++++++----
 .../views/content/offline_page.coffee           |  2 +-
 assets/stylesheets/components/_content.scss     |  4 ++--
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/assets/javascripts/app/db.coffee b/assets/javascripts/app/db.coffee
index 51fb1fa9..0bdf1909 100644
--- a/assets/javascripts/app/db.coffee
+++ b/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
 
diff --git a/assets/javascripts/templates/error_tmpl.coffee b/assets/javascripts/templates/error_tmpl.coffee
index e36b94ad..ae060069 100644
--- a/assets/javascripts/templates/error_tmpl.coffee
+++ b/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 = ->
-  error """ Oops, the database failed to load. """,
-        """ DevDocs requires IndexedDB to cache documentations for offline access.<br>
-            Unfortunately IndexedDB is either not supported in your browser, disabled, or buggy. """
+app.templates.offlineError = (reason) ->
+  reason = switch reason
+    when 'not_supported'
+      """ 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">
diff --git a/assets/javascripts/views/content/offline_page.coffee b/assets/javascripts/views/content/offline_page.coffee
index 836fa6c1..53c1cd74 100644
--- a/assets/javascripts/views/content/offline_page.coffee
+++ b/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()
diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
index e243e9f3..3df6d5b4 100644
--- a/assets/stylesheets/components/_content.scss
+++ b/assets/stylesheets/components/_content.scss
@@ -163,8 +163,8 @@
 }
 
 ._error-title {
-  margin: -5.5rem 0 .5rem;
-  line-height: 2;
+  margin: -5.5rem 0 1rem;
+  line-height: 2rem;
   font-size: 1.5rem;
 }