postmortem 0.2.0 → 0.2.6

data/layout/layout.js

@@ -1,13 +1,30 @@
 (function () {
+  if (POSTMORTEM && POSTMORTEM.downloadedPreview) document.title = 'PostMortem';
+
   let previousInbox;
   let currentView;
+  let reloadIdentityIframeTimeout;
+  let identityUuid;
   let indexUuid;
-
-  var htmlIframeDocument = document.querySelector("#html-iframe").contentDocument;
-  var indexIframe = document.querySelector("#index-iframe");
-  var textIframeDocument = document.querySelector("#text-iframe").contentDocument;
-  var sourceIframeDocument = document.querySelector("#source-iframe").contentDocument;
-  var sourceHighlightBundle = [
+  let twoColumnView;
+  let headersView;
+  let indexIframeTimeout;
+
+  const inboxContent = [];
+  const headers = document.querySelector('.headers');
+  const inbox = document.querySelector('#inbox-container');
+  const inboxInfo = document.querySelector('#inbox-info');
+  const columnSwitch = document.querySelector('.column-switch');
+  const headersViewSwitch = document.querySelector('.headers-view-switch');
+  const readAllButton = document.querySelector('.read-all-button');
+  const showHideReadButton = document.querySelector('.show-hide-read-button');
+  const showHideReadIcon = document.querySelector('.show-hide-read-icon');
+  const htmlIframeDocument = document.querySelector("#html-iframe").contentDocument;
+  const indexIframe = document.querySelector("#index-iframe");
+  const identityIframe = document.querySelector("#identity-iframe");
+  const textIframeDocument = document.querySelector("#text-iframe").contentDocument;
+  const sourceIframeDocument = document.querySelector("#source-iframe").contentDocument;
+  const sourceHighlightBundle = [
      '<link rel="stylesheet"',
      '     href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/agate.min.css"',
      '     integrity="sha512-mMMMPADD4HAIogAWZbv+WjZTC0itafUZNI0jQm48PMBTApXt11omF5jhS7U1kp3R2Pr6oGJ+JwQKiUkUwCQaUQ=="',
@@ -18,46 +35,55 @@
      '<script>hljs.initHighlightingOnLoad();</' + 'script>',
   ].join('\n');
 
+  const storage = window.localStorage;
+
   const initialize = () => {
-    loadMail(initialData);
-
-    let reloadIframeTimeout = setTimeout(() => indexIframe.src += '', 3000);
-    window.addEventListener('message', function (ev) {
-      clearTimeout(reloadIframeTimeout);
-      reloadIframeTimeout = setTimeout(() => indexIframe.src += '', 3000);
-      if (indexUuid !== ev.data.uuid) renderInbox(ev.data.mails);
-      indexUuid = ev.data.uuid;
-    });
+    reloadIdentityIframeTimeout = setTimeout(() => identityIframe.src += '', 3000);
 
-    setInterval(function () { indexIframe.contentWindow.postMessage('HELO', '*'); }, 1000);
+    setInterval(function () { identityIframe.contentWindow.postMessage('HELO', '*'); }, 1000);
 
-    toolbar.html.onclick    = function (ev) { setView('html', ev); };
-    toolbar.text.onclick    = function (ev) { setView('text', ev); };
-    toolbar.source.onclick  = function (ev) { setView('source', ev); };
-    toolbar.headers.onclick = function () { setHeadersView(!headersView); };
-    columnSwitch.onclick    = function () { setColumnView(!twoColumnView); };
+    toolbar.html.onclick       = (ev) => setView('html', ev);
+    toolbar.text.onclick       = (ev) => setView('text', ev);
+    toolbar.source.onclick     = (ev) => setView('source', ev);
+    toolbar.headers.onclick    = ()   => setHeadersView(!headersView);
+    columnSwitch.onclick       = ()   => setColumnView(!twoColumnView);
+    readAllButton.onclick      = ()   => markAllAsRead();
+    showHideReadButton.onclick = ()   => toggleHideReadMessages();
 
-    if (hasHtml) {
+    if (POSTMORTEM.hasHtml) {
       setView('html');
     } else {
       setView('text');
     }
 
-    setColumnView(true);
+    setColumnView(!POSTMORTEM.downloadedPreview);
     setHeadersView(true);
+    setEnabled(columnSwitch);
+    setOn(columnSwitch);
+    setHidden(inbox, POSTMORTEM.downloadedPreview);
 
-    $('[data-toggle="tooltip"]').tooltip();
-  }
+    if (POSTMORTEM.downloadedPreview) {
+      setHidden(toolbar.download, true);
+      setHidden(columnSwitch, true);
+    } else {
+      window.addEventListener('message', function (ev) {
+        switch (ev.data.type) {
+          case 'index':
+            loadInbox(ev.data.uuid, ev.data.mails);
+            break;
+          case 'identity':
+            compareIdentity(ev.data.uuid);
+            break;
+        };
+      });
+    }
 
+    loadMail(POSTMORTEM.initialData);
 
-  var twoColumnView;
-  var headersView;
-  var headers = document.querySelector('.headers');
-  var inbox = document.querySelector('#inbox');
-  var columnSwitch = document.querySelector('.column-switch');
-  var headersViewSwitch = document.querySelector('.headers-view-switch');
+    $('[data-toggle="tooltip"]').tooltip();
+  }
 
-  var setHeadersView = function (enableHeadersView) {
+  const setHeadersView = (enableHeadersView) => {
     headersView = enableHeadersView;
     if (enableHeadersView) {
       setOn(headersViewSwitch);
@@ -68,9 +94,11 @@
     }
   };
 
-  var setColumnView = function (enableTwoColumnView) {
-    var container = document.querySelector('.container');
-    twoColumnView = enableTwoColumnView;
+  const setColumnView = (enableTwoColumnView) => {
+    if (!inbox) return;
+
+    const container = document.querySelector('.container');
+    twoColumnView = POSTMORTEM.downloadedPreview ? false : enableTwoColumnView;
     if (twoColumnView) {
       setVisible(inbox, true);
       setOn(columnSwitch);
@@ -82,42 +110,51 @@
     }
   };
 
-  var contexts = ['source', 'text', 'html'];
+  const contexts = ['source', 'text', 'html'];
 
-  var views = {
+  const views = {
     source: document.querySelector('.source-view'),
     html: document.querySelector('.html-view'),
     text: document.querySelector('.text-view'),
   };
 
-  var toolbar = {
+  const toolbar = {
     source: document.querySelector('.source-view-switch'),
     html: document.querySelector('.html-view-switch'),
     text: document.querySelector('.text-view-switch'),
     headers: document.querySelector('.headers-view-switch'),
+    download: document.querySelector('#download-link'),
   };
 
-  var setOn = function(element) {
+  const setOn = function(element) {
     element.classList.add('text-primary');
     element.classList.remove('text-secondary');
   };
 
-  var setOff = function(element) {
+  const setOff = function(element) {
     element.classList.add('text-secondary');
     element.classList.remove('text-primary');
   };
 
-  var setDisabled = function(element) {
+  const setDisabled = function(element) {
     element.classList.add('disabled');
     element.classList.remove('text-secondary');
   };
 
-  var setEnabled = function(element) {
+  const setEnabled = function(element) {
     element.classList.remove('disabled');
     element.classList.add('text-secondary');
   };
 
-  var setVisible = function(element, visible) {
+  const setHidden = function(element, hidden) {
+    if (hidden) {
+      element.classList.add('hidden');
+    } else {
+      element.classList.remove('hidden');
+    }
+  };
+
+  const setVisible = function(element, visible) {
     if (visible) {
       element.classList.add('visible');
     } else {
@@ -125,9 +162,9 @@
     }
   };
 
-  var setView = function(context, ev) {
+  const setView = function(context, ev) {
     if (ev && $(ev.target).hasClass('disabled')) return;
-    var key;
+    let key;
     for (i = 0; i < contexts.length; i++) {
       key = contexts[i];
       if (key === context) {
@@ -170,7 +207,7 @@
       setDisabled(toolbar.text);
       setView('html');
     } else {
-      setDisabled(toolbar.text);
+      setEnabled(toolbar.text);
     }
 
     if (!mail.htmlBody) {
@@ -181,10 +218,23 @@
       setEnabled(toolbar.html);
       setEnabled(toolbar.source);
     }
+
     setView(currentView);
   };
 
   const loadMail = (mail) => {
+    const initializeScript = document.querySelector("#initialize-script");
+    const initObject = {
+      initialData: mail,
+      hasHtml: !!mail.htmlBody,
+      hasText: !!mail.textBody,
+      downloadedPreview: true,
+    };
+
+    initializeScript.text = [
+      `const POSTMORTEM = ${JSON.stringify(initObject)};`
+    ].join('\n\n');
+
     htmlIframeDocument.open();
     htmlIframeDocument.write(mail.htmlBody);
     htmlIframeDocument.close();
@@ -200,25 +250,135 @@
 
     loadHeaders(mail);
     loadToolbar(mail);
+    loadDownloadLink(mail);
+
+    highlightMail(mail);
+    markAsRead(mail);
+    updateInboxInfo();
+  };
+
+  const markAsRead = (mail) => {
+    storage.setItem(mail.id, 'read');
+    $(`li[data-email-id="${mail.id}"]`).removeClass('unread');
+    $(readAllButton).blur();
+  };
+
+  const showReadMessages = (show) => {
+    if (show) {
+      inbox.classList.remove('hide-read');
+    } else {
+      inbox.classList.add('hide-read');
+    }
   };
 
-  const renderInbox = function (mails) {
+  const toggleHideReadMessages = () => {
+    const $target = $(showHideReadButton);
+    const $icon = $(showHideReadIcon);
+
+    if ($target.data('state') === 'hide') {
+      $target.data('state', 'show');
+      $target.attr('data-original-title', 'Hide read messages');
+      $target.attr('title', 'Hide read messages');
+      $icon.removeClass('fa-eye-slash');
+      $icon.addClass('fa fa-eye text-primary');
+      showReadMessages(true);
+    } else {
+      $target.data('state', 'hide');
+      $target.attr('data-original-title', 'Show read messages');
+      $target.attr('title', 'Show read messages');
+      $icon.removeClass('fa-eye text-primary');
+      $icon.addClass('fa fa-eye-slash');
+      showReadMessages(false);
+    }
+
+    $target.blur();
+  };
+
+  const markAllAsRead = () => {
+    inboxContent.forEach(mail => markAsRead(mail));
+    updateInboxInfo();
+  };
+
+  const isNewMail = (mail) => {
+    if (!storage.getItem(mail.id)) return true;
+
+    return false;
+  };
+
+  const highlightMail = (mail) => {
+    window.location.hash = mail.id;
+    const $target = $(`li[data-email-id="${mail.id}"]`);
+    $('.inbox-item').removeClass('active');
+    $target.addClass('active');
+  };
+
+  const loadDownloadLink = (mail) => {
+    const html = document.documentElement.innerHTML;
+    const start = html.indexOf('<!--INBOX-START-->');
+    const end = html.indexOf('<!--INBOX-END-->') + '<!--INBOX-END-->'.length;
+    const modifiedHtml = [html.substring(0, start), html.substring(end + 1, html.length)].join('');
+    const blob = new Blob([modifiedHtml], { type: 'application/octet-stream' });
+    const uri = window.URL.createObjectURL(blob);
+    $("#download-link").attr('href', uri);
+    console.log(mail.subject.replace(/[0-9a-zA-Z_ -]/gi, ''));
+    $("#download-link").attr('download', mail.subject.replace(/[^0-9a-zA-Z_ -]/gi, '') + '.html');
+  };
+
+  const compareIdentity = (uuid) => {
+    clearTimeout(reloadIdentityIframeTimeout);
+    reloadIdentityIframeTimeout = setTimeout(() => identityIframe.src += '', 3000);
+    if (identityUuid !== uuid) {
+      indexIframe.src += '';
+      clearTimeout(indexIframeTimeout);
+      indexIframeTimeout = setInterval(function () { indexIframe.contentWindow.postMessage('HELO', '*'); }, 200);
+    }
+    identityUuid = uuid;
+  };
+
+  const updateInboxInfo = () => {
+    if (!inboxContent.length) return;
+
+    const unreadCount = inboxContent.filter((mail) => isNewMail(mail)).length;
+    document.title = `PostMortem ${unreadCount}/${inboxContent.length} (unread/total)`;
+    inboxInfo.textContent = `${inboxContent.length} emails (${unreadCount} unread)`;
+    inboxInfo.innerHTML = `&mdash; ${inboxInfo.innerHTML}`;
+  };
+
+  const loadInbox = (uuid, mails) => {
+    clearTimeout(indexIframeTimeout);
+    inboxContent.splice(0, Infinity, ...mails)
+    if (uuid === indexUuid) {
+      return;
+    }
+    const mailsById = {};
     const html = mails.map((mail, index) => {
       const parsedTimestamp = new Date(mail.timestamp);
       const timestampSpan = `<span class="timestamp">${parsedTimestamp.toLocaleString()}</span>`;
       const classes = ['list-group-item', 'inbox-item'];
-      if (window.location.href.split('#')[0].endsWith(mail.path)) classes.push('active');
-      return `<li data-email-index="${index}" class="${classes.join(' ')}"><a title="${mail.subject}" href="javascript:void(0)">${mail.subject}</a>${timestampSpan}</li>`
+
+      if (window.location.hash === '#' + mail.id) classes.push('active');
+      if (isNewMail(mail)) classes.push('unread');
+
+      mailsById[mail.id] = mail;
+
+      return [`<li data-email-id="${mail.id}" class="${classes.join(' ')}">`,
+              `<a title="${mail.subject}" href="javascript:void(0)">`,
+              `<i class="fa fa-envelope-open read-icon"></i>`,
+              `<i class="fa fa-envelope unread-icon"></i>${mail.subject}`,
+              `</a>`,
+              `${timestampSpan}</li>`].join('');
     });
+    updateInboxInfo();
     if (arrayIdentical(html, previousInbox)) return;
     previousInbox = html;
     $('#inbox').html('<ul class="list-group">' + html.join('\n') + '</ul>');
     $('.inbox-item').click((ev) => {
       const $target = $(ev.currentTarget);
-      loadMail(mails[$target.data('email-index')].content);
-      $('.inbox-item').removeClass('active');
-      $target.addClass('active');
+      const id = $target.data('email-id');
+      setTimeout(() => loadMail(mailsById[id].content), 0);
     });
+
+    indexUuid = uuid;
   };
 
   initialize();

data/layout/postmortem_identity.html.erb

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div data-uuid="<%= uuid %>" id="identity">
+</div>
+<script>
+  window.addEventListener('message', function (ev) {
+    const identity = document.querySelector('#identity');
+    const uuid = identity.dataset.uuid;
+    const type = 'identity';
+    ev.source.postMessage({ uuid, type }, '*');
+  });
+
+  setInterval(function () {
+    window.location.reload();
+  }, 3000);
+
+</script>
+</body>
+</html>

data/layout/{index.html.erb → postmortem_index.html.erb}

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <body>
-<div data-uuid="<%= SecureRandom.uuid %>" id="index">
+<div data-uuid="<%= uuid %>" id="index">
 ### INDEX START
 <% encoded_index.each do |encoded| -%>
 <%= encoded %>
@@ -13,16 +13,13 @@
     const filter = (line) => line !== '' && !line.startsWith('### INDEX');
     const index = document.querySelector('#index');
     const uuid = index.dataset.uuid;
+    const type = 'index';
     const mails = index.innerText
                        .split('\n')
                        .filter(filter)
                        .map(line => JSON.parse(atob(line)));
-    ev.source.postMessage({ uuid, mails }, '*');
+    ev.source.postMessage({ uuid, type, mails }, '*');
   });
-
-  setInterval(function () {
-    window.location.reload();
-  }, 1000);
 </script>
 </body>
 </html>

data/lib/postmortem.rb

@@ -8,12 +8,15 @@ require 'mail'
 require 'erb'
 require 'json'
 require 'cgi'
+require 'digest'
+require 'securerandom'
 
 require 'postmortem/version'
 require 'postmortem/adapters'
 require 'postmortem/delivery'
 require 'postmortem/layout'
 require 'postmortem/configuration'
+require 'postmortem/identity'
 require 'postmortem/index'
 
 # HTML email inspection tool.
@@ -54,7 +57,7 @@ module Postmortem
     private
 
     def log_delivery(delivery)
-      output_file.write(colorized(delivery.path.to_s) + "\n")
+      output_file.write("#{colorized(delivery.path.to_s)}\n")
       output_file.flush
     end
 
@@ -65,7 +68,7 @@ module Postmortem
     end
 
     def output_file
-      return STDOUT if config.log_path.nil?
+      return $stdout if config.log_path.nil?
 
       @output_file ||= File.open(config.log_path, mode: 'a')
     end