From c13f1aa5d10eb82c5d6d2614b7ac11aa5183939d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 12 Oct 2016 15:25:35 +0100
Subject: [PATCH] Fix API log page in Firefox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The details of each notification were not being hidden on page load in
Firefox.

Firefox does not natively support the `<details>` element, so we
polyfill it.

Because of the way the polyfill is written[1]

1. There can’t be any `<div>` elements inside the `<summary>` (this
   commit changes them to be `<span>`s instead, and adds CSS to make
   sure they wrap as before)
2. The contents to be shown/hidden must be wrapped in a `<div>` (which
   this commit adds)

***

1. https://github.com/alphagov/govuk_elements/blob/48fde82c721917feed3b7cf9b655e41fcddb3f49/public/javascripts/govuk/details.polyfill.js#L90
---
 app/assets/stylesheets/views/api.scss |  1 +
 app/templates/views/api/index.html    | 30 ++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/views/api.scss b/app/assets/stylesheets/views/api.scss
index 6a947afef..98e21685e 100644
--- a/app/assets/stylesheets/views/api.scss
+++ b/app/assets/stylesheets/views/api.scss
@@ -19,6 +19,7 @@
     }
 
     &-meta {
+      display: block;
       color: $secondary-text-colour;
     }
 
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
index a446e9dbb..cd650bc85 100644
--- a/app/templates/views/api/index.html
+++ b/app/templates/views/api/index.html
@@ -61,25 +61,27 @@
           <h3 class="api-notifications-item-recipient">
             {{ notification.to }}
           </h3>
-          <div class="grid-row api-notifications-item-meta">
-            <div class="column-half api-notifications-item-key">
+          <span class="grid-row api-notifications-item-meta">
+            <span class="column-half api-notifications-item-key">
               {{notification.key_name}}
-            </div>
-            <div class="column-half api-notifications-item-time">
+            </span>
+            <span class="column-half api-notifications-item-time">
               <time class="timeago" datetime="{{ notification.created_at }}">
                 {{ notification.created_at|format_delta }}
               </time>
-            </div>
-          </div>
+            </span>
+          </span>
         </summary>
-        <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
-          {% for key in [
-            'id', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
-          ] %}
-            <dt>{{ key }}:</dt>
-            <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
-          {% endfor %}
-        </dl>
+        <div>
+          <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
+            {% for key in [
+              'id', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
+            ] %}
+              <dt>{{ key }}:</dt>
+              <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
+            {% endfor %}
+          </dl>
+        </div>
       </details>
     {% endfor %}
     {% if api_notifications.notifications %}