Add "Show diff only" checkbox to hide unchanged lines in diff report

lib/sitediff/files/sitediff.css

@@ -247,6 +247,10 @@ table .status-col {
   width: 100%;
 }
 
+body.show-diff-only .diff li.unchanged {
+  display: none;
+}
+
 /*** Overlay */
 .overlay {
   background-color: rgba(0, 0, 0, 0.25);
@@ -309,6 +313,16 @@ table .status-col {
   color: #9b9db8;
   cursor: not-allowed;
 }
+.overlay header .diff-only {
+  padding: 1em;
+  white-space: nowrap;
+}
+.overlay header .diff-only label {
+  cursor: pointer;
+}
+.overlay header .diff-only input {
+  margin-right: 0.25em;
+}
 .overlay header .path {
   flex-grow: 1;
   padding: 1em;

lib/sitediff/files/sitediff.js

@@ -79,6 +79,47 @@ SiteDiff.scrollToElement = function (el, options) {
     }
 };
 
+/**
+ * Gets the value of a cookie.
+ *
+ * @param name
+ *   The cookie name.
+ *
+ * @returns
+ *   The cookie value, or null if not found.
+ */
+SiteDiff.getCookie = function (name) {
+    var nameEq = name + '=';
+    var cookies = document.cookie.split(';');
+    for (var i = 0; i < cookies.length; i++) {
+        var cookie = cookies[i].trim();
+        if (cookie.indexOf(nameEq) === 0) {
+            return cookie.substring(nameEq.length);
+        }
+    }
+    return null;
+};
+
+/**
+ * Sets a cookie.
+ *
+ * @param name
+ *   The cookie name.
+ * @param value
+ *   The cookie value.
+ * @param days
+ *   Number of days until the cookie expires.
+ */
+SiteDiff.setCookie = function (name, value, days) {
+    var expires = '';
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = '; expires=' + date.toUTCString();
+    }
+    document.cookie = name + '=' + value + expires + '; path=/';
+};
+
 /**
  * Initialize behaviors.
  */
@@ -90,6 +131,9 @@ SiteDiff.init = function () {
         break;
 
     case 'diff':
+        if (SiteDiff.getCookie('sitediffDiffOnly') === '1') {
+            $(document.body).addClass('show-diff-only');
+        }
         SiteDiff.jumpToFirstDiff();
         break;
     }
@@ -193,6 +237,7 @@ SiteDiff.initOverlay = function () {
     $('body').append($(
         '<div class="overlay" style="display: none;"><div class="overlay__inner"><header>' +
         '<div class="path"></div>' +
+        '<div class="diff-only"><label><input type="checkbox" id="input-diff-only" /> Show diff only</label></div>' +
         '<div class="prev"><a href="#" title="Previous diff (left arrow)">< Prev</a></div>' +
         '<div class="next"><a href="#" title="Next diff (right arrow)">Next ></a></div>' +
         '<div class="exit"><a href="#" title="Close diff display (Esc)">Close</a></div>' +
@@ -210,6 +255,11 @@ SiteDiff.initOverlay = function () {
         event.preventDefault();
         SiteDiff.nextDiff();
     });
+    $('#input-diff-only').on('change', function () {
+        var checked = $(this).is(':checked');
+        SiteDiff.setCookie('sitediffDiffOnly', checked ? '1' : '0', 7);
+        SiteDiff.applyDiffOnly(checked);
+    });
 
 };
 
@@ -261,6 +311,7 @@ SiteDiff.openOverlay = function (index) {
     SiteDiff.currentDiff = index;
     SiteDiff.showDiff();
     SiteDiff.initKeyHandlers();
+    $('#input-diff-only').prop('checked', SiteDiff.getCookie('sitediffDiffOnly') === '1');
     $('.overlay').fadeIn(300);
 };
 
@@ -273,6 +324,34 @@ SiteDiff.showDiff = function () {
     $('.overlay header .path').text(diff.path);
     SiteDiff.setPrevNext();
     $('.overlay article').html(iframe);
+    $('.overlay article iframe').on('load', function () {
+        SiteDiff.applyDiffOnly($('#input-diff-only').is(':checked'));
+    });
+};
+
+/**
+ * Applies or removes the "show diff only" state on the current diff iframe.
+ *
+ * @param showDiffOnly
+ *   Whether to show only the changed lines.
+ */
+SiteDiff.applyDiffOnly = function (showDiffOnly) {
+    var $iframe = $('.overlay article iframe');
+    if ($iframe.length) {
+        try {
+            var $body = $iframe.contents().find('body');
+            if (showDiffOnly) {
+                $body.addClass('show-diff-only');
+            }
+            else {
+                $body.removeClass('show-diff-only');
+            }
+        }
+        catch (e) {
+            // Ignore cross-origin access errors; the iframe will read the
+            // cookie on its next load.
+        }
+    }
 };
 
 /**