Move all styling configuration to the client

assets/javascripts/app/app.coffee

@@ -17,6 +17,8 @@
     @settings = new app.Settings
     @db = new app.DB()
 
+    @settings.initLayout()
+
     @docs = new app.collections.Docs
     @disabledDocs = new app.collections.Docs
     @entries = new app.collections.Entries
@@ -26,8 +28,6 @@
     @document = new app.views.Document
     @mobile = new app.views.Mobile if @isMobile()
 
-    @settings.initLayout()
-
     if document.body.hasAttribute('data-doc')
       @DOC = JSON.parse(document.body.getAttribute('data-doc'))
       @bootOne()

assets/javascripts/app/serviceworker.coffee

@@ -30,13 +30,13 @@ class app.ServiceWorker
     $.on @registration, 'updatefound', @onUpdateFound
     return
 
-  onUpdateFound: () =>
+  onUpdateFound: =>
     $.off @installingRegistration, 'statechange', @onStateChange() if @installingRegistration
     @installingRegistration = @registration.installing
     $.on @installingRegistration, 'statechange', @onStateChange
     return
 
-  onStateChange: () =>
+  onStateChange: =>
     if @installingRegistration and @installingRegistration.state == 'installed' and navigator.serviceWorker.controller
       @installingRegistration = null
       @onUpdateReady()

assets/javascripts/app/settings.coffee

@@ -120,6 +120,7 @@ class app.Settings
   initLayout: ->
     @toggleDark(@get('dark'))
     @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS
+    @addResizerCSS()
 
   toggleDark: (enable) ->
     classList = document.documentElement.classList
@@ -130,3 +131,23 @@ class app.Settings
     classList = document.body.classList
     classList[if enable then 'add' else 'remove'](layout) unless layout is SIDEBAR_HIDDEN_LAYOUT
     classList[if $.overlayScrollbarsEnabled() then 'add' else 'remove']('_overlay-scrollbars')
+
+  addResizerCSS: ->
+    size = @get('size')
+    size = if size then size + 'px' else '20rem'
+
+    css = """
+      ._container { margin-left: #{size}; }
+      ._header, ._list { width: #{size}; }
+      ._list-hover.clone { min-width: #{size}; }
+      ._notice, ._path, ._resizer { left: #{size}; }
+    """
+
+    style = document.createElement('style')
+    style.type = 'text/css'
+    style.appendChild(document.createTextNode(css))
+    style.setAttribute('data-size', size)
+    style.setAttribute('data-resizer', '')
+
+    document.head.appendChild(style)
+    return

lib/app.rb

@@ -205,10 +205,6 @@ class App < Sinatra::Application
       ].compact
     end
 
-    def app_size
-      @app_size ||= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px"
-    end
-
     def bypass_cache?
       !memoized_cookies['bypassCache'].nil?
     end

public/manifest.json

@@ -4,6 +4,7 @@
   "description": "API Documentation Browser",
   "start_url": "/",
   "display": "standalone",
+  "background_color": "#EEEEEE",
   "icons": [
     {
       "src": "/images/webapp-icon-32.png",
@@ -25,6 +26,11 @@
       "sizes": "128x128",
       "type": "image/png"
     },
+    {
+      "src": "/images/webapp-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
     {
       "src": "/images/webapp-icon-256.png",
       "sizes": "256x256",

views/app.erb

@@ -63,9 +63,3 @@
     <symbol id="icon-external-link" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></symbol>
   </defs>
 </svg>
-<style data-size="<%= app_size %>" data-resizer>
-  ._container { margin-left: <%= app_size %>; }
-  ._header, ._list { width: <%= app_size %>; }
-  ._list-hover.clone { min-width: <%= app_size %>; }
-  ._notice, ._path, ._resizer { left: <%= app_size %>; }
-</style>

views/service-worker.js.erb

@@ -2,17 +2,11 @@
 <%# This ensures that the cache is always updated if the hash of the application.js file changes %>
 const cacheName = '<%= javascript_path('application', asset_host: false).scan(/application-([^\.]+)\.js/).last&.first || 'app' %>';
 
-<%# Paths to cache when the service worker is installed %>
-const cachePaths = [
+<%# Url's to cache when the service worker is installed %>
+const urlsToCache = [
   '/',
   '/favicon.ico',
   '/manifest.json',
-  '/images/webapp-icon-32.png',
-  '/images/webapp-icon-60.png',
-  '/images/webapp-icon-80.png',
-  '/images/webapp-icon-128.png',
-  '/images/webapp-icon-256.png',
-  '/images/webapp-icon-512.png',
   '<%= service_worker_asset_urls.join "',\n  '" %>',
   '<%= doc_index_urls.join "',\n  '" %>',
 ];
@@ -22,7 +16,7 @@ self.addEventListener('install', event => {
   self.skipWaiting();
 
   event.waitUntil(
-    caches.open(cacheName).then(cache => cache.addAll(cachePaths)),
+    caches.open(cacheName).then(cache => cache.addAll(urlsToCache)),
   );
 });