happo 2.4.0 → 2.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8151e36e534eae38fab096a18a81ae2cb6e61cf0
-  data.tar.gz: f28280aea360ccf7e2a413bb9e83889e404928df
+  metadata.gz: dbd179b01168cbba70f43a4bcaf1ebf1d94490f3
+  data.tar.gz: 6ea1662f9bdfad75f768809d208e81afcd760efb
 SHA512:
-  metadata.gz: 5583155f820c9c67ca92c94f2f88a659f00f7c54c53873c9b370fd85351bacaea54aa729f318ad6794e25e7f2387e39212eaa196611e3ffaee260169ec09ef78
-  data.tar.gz: 8d39502a92d286e08cd85f3013f8419e7601f73c662ba06b99e57dbd57c5c197ded39edfbe40c255ae46f985341e45c4874536ff5bcda35b3188614708bfd909
+  metadata.gz: 7956f0d125a8bb1f28e95cdc59188addf921d6890e499589a78693c1b04b16874233458108b5943f2a5c856d3a1316feabefda99e78b059ee3c227ab13da5880
+  data.tar.gz: af8f7aae63bd847275ef37d494c07b722036f9b2e9ebc47ed50e3c81c9c33017e30a02afa3ac2733e1761a8991da2608c59997edeeef4c112834804d3abdfe48

data/lib/happo/public/HappoDiffs.jsx

@@ -1,91 +1,397 @@
+/* global React */
+/* eslint-disable react/no-multi-comp */
 const PropTypes = React.PropTypes;
 
-const imageObjectStructure = {
+const VIEWS = {
+  SIDE_BY_SIDE: 'Side-by-side',
+  SWIPE: 'Swipe',
+  DIFF: 'Diff',
+};
+
+const imageShape = {
   description: PropTypes.string.isRequired,
   viewport: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
+  diff: PropTypes.string,
+  previous: PropTypes.string,
+  current: PropTypes.string.isRequired,
 };
 
 function imageSlug(image) {
-  return btoa(image.description +  image.viewport);
+  return btoa(image.description + image.viewport);
+}
+
+function InlineLink({ children, to }) {
+  return (
+    <a className='InlineLink' href={`#${to}`}>
+      {children}
+    </a>
+  );
 }
+InlineLink.propTypes = {
+  children: PropTypes.node.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+function ImageHeading({ image }) {
+  return (
+    <h3 id={imageSlug(image)}>
+      <InlineLink to={imageSlug(image)}>
+        {image.description}
+        {' @ '}
+        {image.viewport}
+      </InlineLink>
+    </h3>
+  );
+}
+ImageHeading.propTypes = {
+  image: PropTypes.shape(imageShape).isRequired,
+};
 
-function renderImage(image) {
+function NewImage({ image }) {
   return (
     <div>
-      <h3 id={imageSlug(image)}>
-        <a className='anchored' href={`#${imageSlug(image)}`}>
-          {image.description}
-          {' @ '}
-          {image.viewport}
-        </a>
-      </h3>
-      <img src={image.url} />
+      <ImageHeading
+        image={image}
+      />
+      <img
+        role='presentation'
+        src={image.current}
+      />
     </div>
   );
 }
+NewImage.propTypes = {
+  image: PropTypes.shape(imageShape).isRequired,
+};
 
-function renderDiffImages(diffImages) {
-  if (!diffImages.length) {
+function DiffImages({ images }) {
+  if (!images.length) {
     return null;
   }
 
   return (
     <div>
       <h2 id='diffs'>
-        <a className='anchored' href='#diffs'>
-          Diffs ({ diffImages.length })
-        </a>
+        <InlineLink to='diffs'>
+          Diffs ({ images.length })
+        </InlineLink>
       </h2>
 
-      {diffImages.map(renderImage)}
+      {images.map((image) => (
+        <DiffController
+          key={image.current}
+          image={image}
+        />
+      ))}
     </div>
   );
 }
+DiffImages.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.shape(imageShape)).isRequired,
+};
 
-function renderNewImages(newImages) {
-  if (!newImages.length) {
+function NewImages({ images }) {
+  if (!images.length) {
     return null;
   }
 
   return (
     <div>
       <h2 id='new'>
-        <a className='anchored' href='#new'>
-          New examples ({ newImages.length })
-        </a>
+        <InlineLink to='new'>
+          New examples ({ images.length })
+        </InlineLink>
       </h2>
 
-      {newImages.map(renderImage)}
+      {images.map((image) => (
+        <NewImage
+          key={image.current}
+          image={image}
+        />
+      ))}
     </div>
   );
 }
+NewImages.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.shape(imageShape)).isRequired,
+};
+
+function maxImageSize(...imageUrls) {
+  const dimensions = {};
+
+  return new Promise((resolve, reject) => {
+    imageUrls.forEach((url, i) => {
+      const image = new Image();
+
+      image.onerrer = function handleImageError(e) {
+        reject(e);
+      };
+
+      image.onload = function handleImageLoad() {
+        const { width, height } = this;
+
+        // Use the index in case the URL is somehow duplicated.
+        dimensions[i] = { width, height };
+
+        if (Object.keys(dimensions).length >= imageUrls.length) {
+          // We are done, so compute the max width and height and resolve.
+          const values = Object.keys(dimensions).map(key => dimensions[key]);
+          const maxWidth = Math.max(...values.map(value => value.width));
+          const maxHeight = Math.max(...values.map(value => value.height));
+          resolve({ width: maxWidth, height: maxHeight });
+        }
+      };
+
+      image.src = url;
+    });
+  });
+}
 
-window.HappoDiffs = React.createClass({
-  propTypes: {
-    pageTitle: PropTypes.string.isRequired,
-    diffImages: PropTypes.arrayOf(imageObjectStructure).isRequired,
-    newImages: PropTypes.arrayOf(imageObjectStructure).isRequired,
-    generatedAt: PropTypes.string.isRequired,
-  },
+class Swiper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      cursorLeft: 0,
+      height: 'auto',
+      width: 'auto',
+    };
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+  }
+
+  componentWillMount() {
+    this.updateSize(this.props)
+      .then(({ width }) => {
+        // Start in the center
+        this.setState({ cursorLeft: width / 2 });
+      });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.updateSize(nextProps);
+  }
+
+  updateSize({ current, previous }) {
+    const sizes = maxImageSize(current, previous)
+      .then(({ width, height }) => {
+        this.setState({ width, height });
+        return { width, height };
+      });
+
+    return Promise.resolve(sizes);
+  }
+
+  handleMouseMove(event) {
+    this.setState({
+      cursorLeft: event.pageX - event.target.offsetLeft,
+    });
+  }
 
   render() {
+    const { previous, current } = this.props;
+    const { cursorLeft, height, width } = this.state;
+
     return (
-      <div>
-        <header className='header'>
-          <h1 className='header_title'>
-            {this.props.pageTitle}
-          </h1>
-          <div className='header__time'>
-            Generated: {this.props.generatedAt}
-          </div>
-        </header>
-
-        <main className='main'>
-          {renderDiffImages(this.props.diffImages)}
-          {renderNewImages(this.props.newImages)}
-        </main>
+      <div
+        className='Swiper'
+        style={{ height, width }}
+        onMouseMove={this.handleMouseMove}
+      >
+        <div
+          className='Swiper__image'
+          style={{ width: cursorLeft }}
+        >
+          <img
+            src={previous}
+            role='presentation'
+          />
+        </div>
+
+        <div
+          className='Swiper__image'
+          style={{
+            transform: `translateX(${cursorLeft}px)`,
+            width: width - cursorLeft,
+          }}
+        >
+          <img
+            src={current}
+            style={{
+              transform: `translateX(-${cursorLeft}px)`,
+            }}
+            role='presentation'
+          />
+        </div>
+
+        <div
+          className='Swiper__cursor'
+          style={{
+            transform: `translateX(${cursorLeft}px)`,
+          }}
+        />
       </div>
     );
   }
-});
+}
+Swiper.propTypes = {
+  previous: PropTypes.string.isRequired,
+  current: PropTypes.string.isRequired,
+};
+
+function SideBySide({ previous, current }) {
+  return (
+    <div className='SideBySide'>
+      <div className='SideBySide__image'>
+        <img
+          role='presentation'
+          src={previous}
+        />
+        <div className='SideBySide__caption'>
+          Before
+        </div>
+      </div>
+      {' '}
+      <div className='SideBySide__image'>
+        <img
+          role='presentation'
+          src={current}
+        />
+        <div className='SideBySide__caption'>
+          After
+        </div>
+      </div>
+    </div>
+  );
+}
+SideBySide.propTypes = {
+  previous: PropTypes.string.isRequired,
+  current: PropTypes.string.isRequired,
+};
+
+function SelectedView({ image, selectedView }) {
+  if (selectedView === VIEWS.SIDE_BY_SIDE) {
+    return (
+      <SideBySide
+        previous={image.previous}
+        current={image.current}
+      />
+    );
+  }
+
+  if (selectedView === VIEWS.DIFF) {
+    return (
+      <img role='presentation' src={image.diff} />
+    );
+  }
+
+  if (selectedView === VIEWS.SWIPE) {
+    return (
+      <Swiper
+        previous={image.previous}
+        current={image.current}
+      />
+    );
+  }
+}
+SelectedView.propTypes = {
+  image: PropTypes.shape(imageShape).isRequired,
+  selectedView: PropTypes.oneOf(Object.keys(VIEWS).map(key => VIEWS[key])).isRequired,
+};
+
+class DiffController extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedView: VIEWS.SIDE_BY_SIDE,
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(view) {
+    this.setState({ selectedView: view });
+  }
+
+  render() {
+    return (
+      <Diff
+        image={this.props.image}
+        selectedView={this.state.selectedView}
+        onClick={this.handleClick}
+      />
+    );
+  }
+}
+DiffController.propTypes = {
+  image: PropTypes.shape(imageShape).isRequired,
+};
+
+function Diff({ image, selectedView, onClick }) {
+  return (
+    <div>
+      <ImageHeading
+        image={image}
+      />
+      <div className='Diff__buttons'>
+        {Object.keys(VIEWS).map(key => VIEWS[key]).map((view, i) => {
+          const classes = ['Diff__button'];
+          if (i === 0) {
+            classes.push('Diff__button--first');
+          } else if (i === Object.keys(VIEWS).length - 1) {
+            classes.push('Diff__button--last');
+          }
+
+          return (
+            <button
+              key={view}
+              className={classes.join(' ')}
+              aria-pressed={view === selectedView}
+              onClick={() => { onClick(view); }}
+            >
+              {view}
+            </button>
+          );
+        })}
+      </div>
+      <div className='Diff__images'>
+        <SelectedView image={image} selectedView={selectedView} />
+      </div>
+    </div>
+  );
+}
+Diff.propTypes = {
+  image: PropTypes.shape(imageShape).isRequired,
+  onClick: PropTypes.func.isRequired,
+  selectedView: PropTypes.oneOf(Object.keys(VIEWS).map(key => VIEWS[key])).isRequired,
+};
+
+function HappoDiffs({ pageTitle, generatedAt, diffImages, newImages }) {
+  return (
+    <div>
+      <header className='HappoDiffs__header'>
+        <h1 className='HappoDiffs__headerTitle'>
+          {pageTitle}
+        </h1>
+        <div className='HappoDiffs__headerTime'>
+          Generated: {generatedAt}
+        </div>
+      </header>
+
+      <main className='HappoDiffs__main'>
+        <DiffImages
+          images={diffImages}
+        />
+        <NewImages
+          images={newImages}
+        />
+      </main>
+    </div>
+  );
+}
+HappoDiffs.propTypes = {
+  pageTitle: PropTypes.string.isRequired,
+  diffImages: PropTypes.arrayOf(imageShape).isRequired,
+  newImages: PropTypes.arrayOf(imageShape).isRequired,
+  generatedAt: PropTypes.string.isRequired,
+};
+
+window.HappoDiffs = HappoDiffs;

data/lib/happo/public/happo-runner.js

@@ -1,3 +1,10 @@
+/* eslint strict: 0 */
+/* eslint object-shorthand: 0 */
+/* eslint prefer-template: 0 */
+/* eslint comma-dangle: 0 */
+/* eslint no-var: 0 */
+/* eslint prefer-arrow-callback: 0 */
+/* eslint vars-on-top: 1 */
 'use strict';
 
 window.happo = {
@@ -6,11 +13,11 @@ window.happo = {
   currentRenderedElement: undefined,
   errors: [],
 
-  define: function(description, func, options) {
+  define: function define(description, func, options) {
     // Make sure we don't have a duplicate description
     if (this.defined[description]) {
-      throw 'Error while defining "' + description +
-        '": Duplicate description detected'
+      throw new Error('Error while defining "' + description +
+        '": Duplicate description detected');
     }
     this.defined[description] = {
       description: description,
@@ -19,7 +26,7 @@ window.happo = {
     };
   },
 
-  fdefine: function(description, func, options) {
+  fdefine: function fdefine(description, func, options) {
     this.define(description, func, options); // add the example
     this.fdefined.push(description);
   },
@@ -27,12 +34,12 @@ window.happo = {
   /**
    * @return {Array.<Object>}
    */
-  getAllExamples: function() {
+  getAllExamples: function getAllExamples() {
     var descriptions = this.fdefined.length ?
       this.fdefined :
       Object.keys(this.defined);
 
-    return descriptions.map(function(description) {
+    return descriptions.map(function processDescription(description) {
       var example = this.defined[description];
       // We return a subset of the properties of an example (only those relevant
       // for happo_runner.rb).
@@ -43,7 +50,7 @@ window.happo = {
     }.bind(this));
   },
 
-  handleError: function(currentExample, error) {
+  handleError: function handleError(currentExample, error) {
     console.error(error.stack);
     return {
       description: currentExample.description,
@@ -57,23 +64,24 @@ window.happo = {
    *   that is called when it is done.
    * @return {Promise}
    */
-  tryAsync: function(func) {
-    return new Promise(function(resolve, reject) {
+  tryAsync: function tryAsync(func) {
+    return new Promise(function tryAsyncPromise(resolve, reject) {
       // Safety valve: if the function does not finish after 3s, then something
       // went haywire and we need to move on.
-      var timeout = setTimeout(function() {
+      var timeout = setTimeout(function tryAsyncTimeout() {
         reject(new Error('Async callback was not invoked within timeout.'));
       }, 3000);
 
       // This function is called by the example when it is done executing.
-      var doneCallback = function(elem) {
+      var doneCallback = function doneCallback(elem) {
         clearTimeout(timeout);
 
         if (!arguments.length) {
-          return reject(new Error(
+          reject(new Error(
             'The async done callback expects the rendered element as an ' +
             'argument, but there were no arguments.'
           ));
+          return;
         }
 
         resolve(elem);
@@ -91,7 +99,7 @@ window.happo = {
    *
    * @param {Object} renderedElement
    */
-  cleanOutElement: function(renderedElement) {
+  cleanOutElement: function cleanOutElement(renderedElement) {
     renderedElement.parentNode.removeChild(renderedElement);
   },
 
@@ -103,9 +111,10 @@ window.happo = {
    * @param {Function} doneFunc injected by driver.execute_async_script in
    *   happo/runner.rb
    */
-  renderExample: function(exampleDescription, doneFunc) {
+  renderExample: function renderExample(exampleDescription, doneFunc) {
+    var currentExample = this.defined[exampleDescription];
+
     try {
-      var currentExample = this.defined[exampleDescription];
       if (!currentExample) {
         throw new Error(
           'No example found with description "' + exampleDescription + '"');
@@ -124,9 +133,9 @@ window.happo = {
         // The function takes an argument, which is a callback that is called
         // once it is done executing. This can be used to write functions that
         // have asynchronous code in them.
-        this.tryAsync(func).then(function(elem) {
+        this.tryAsync(func).then(function (elem) {
           doneFunc(this.processElem(currentExample, elem));
-        }.bind(this)).catch(function(error) {
+        }.bind(this)).catch(function (error) {
           doneFunc(this.handleError(currentExample, error));
         }.bind(this));
       } else {
@@ -137,9 +146,9 @@ window.happo = {
         if (result instanceof Promise) {
           // The function returned a promise, so we need to wait for it to
           // resolve before proceeding.
-          result.then(function(elem) {
+          result.then(function (elem) {
             doneFunc(this.processElem(currentExample, elem));
-          }.bind(this)).catch(function(error) {
+          }.bind(this)).catch(function (error) {
             doneFunc(this.handleError(currentExample, error));
           }.bind(this));
         } else {
@@ -154,13 +163,15 @@ window.happo = {
   },
 
   // This function takes a node and a box object that we will mutate.
-  getFullRectRecursive: function(node, box) {
+  getFullRectRecursive: function getFullRectRecursive(node, box) {
     var rect = node.getBoundingClientRect();
 
+    /* eslint-disable no-param-reassign */
     box.bottom = Math.max(box.bottom, rect.bottom);
     box.left = Math.min(box.left, rect.left);
     box.right = Math.max(box.right, rect.right);
     box.top = Math.min(box.top, rect.top);
+    /* eslint-enable no-param-reassign */
 
     for (var i = 0; i < node.children.length; i++) {
       this.getFullRectRecursive(node.children[i], box);
@@ -171,7 +182,7 @@ window.happo = {
   // descendent nodes. This allows us to ensure that the screenshot includes
   // absolutely positioned elements. It is important that this is fast, since we
   // may be iterating over a high number of nodes.
-  getFullRect: function(node) {
+  getFullRect: function getFullRect(node) {
     var rect = node.getBoundingClientRect();
 
     // Set up the initial object that we will mutate in our recursive function.
@@ -209,13 +220,13 @@ window.happo = {
     box.left = Math.max(box.left, 0);
     box.top = Math.max(box.top, 0);
 
-    box.width =  box.right - box.left;
-    box.height =  box.bottom - box.top;
+    box.width = box.right - box.left;
+    box.height = box.bottom - box.top;
 
     return box;
   },
 
-  processElem: function(currentExample, elem) {
+  processElem: function processElem(currentExample, elem) {
     try {
       this.currentRenderedElement = elem;
 
@@ -246,35 +257,35 @@ window.happo = {
   }
 };
 
-window.addEventListener('load', function() {
+window.addEventListener('load', function handleWindowLoad() {
   var matches = window.location.search.match(/description=([^&]*)/);
   if (!matches) {
     return;
   }
   var example = decodeURIComponent(matches[1]);
-  window.happo.renderExample(example, function() {});
+  window.happo.renderExample(example, function () {});
 });
 
 // We need to redefine a few global functions that halt execution. Without this,
 // there's a chance that the Ruby code can't communicate with the browser.
-window.alert = function(message) {
+window.alert = function alert(message) {
   console.log('`window.alert` called', message);
 };
 
-window.confirm = function(message) {
+window.confirm = function confirm(message) {
   console.log('`window.confirm` called', message);
   return true;
 };
 
-window.prompt = function(message, value) {
+window.prompt = function prompt(message, value) {
   console.log('`window.prompt` called', message, value);
   return null;
 };
 
-window.onerror = function(message, url, lineNumber) {
+window.onerror = function onerror(message, url, lineNumber) {
   window.happo.errors.push({
     message: message,
     url: url,
     lineNumber: lineNumber
   });
-}
+};

data/lib/happo/public/happo-styles.css

@@ -21,16 +21,16 @@ body {
   margin: 0;
 }
 
-.anchored {
+.InlineLink {
   color: #000000;
   text-decoration: none;
 }
 
-.anchored:hover {
+.InlineLink:hover {
   text-decoration: underline;
 }
 
-.anchored::after {
+.InlineLink::after {
   background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMy45IDEyYzAtMS43MSAxLjM5LTMuMSAzLjEtMy4xaDRWN0g3Yy0yLjc2IDAtNSAyLjI0LTUgNXMyLjI0IDUgNSA1aDR2LTEuOUg3Yy0xLjcxIDAtMy4xLTEuMzktMy4xLTMuMXpNOCAxM2g4di0ySDh2MnptOS02aC00djEuOWg0YzEuNzEgMCAzLjEgMS4zOSAzLjEgMy4xcy0xLjM5IDMuMS0zLjEgMy4xaC00VjE3aDRjMi43NiAwIDUtMi4yNCA1LTVzLTIuMjQtNS01LTV6Ii8+PC9zdmc+);
   content: '';
   display: inline-block;
@@ -41,11 +41,11 @@ body {
   margin-left: 5px;
 }
 
-.anchored:hover::after {
+.InlineLink:hover::after {
   opacity: 1;
 }
 
-.header {
+.HappoDiffs__header {
   align-items: baseline;
   background-color: #ffffff;
   box-shadow: 0 0 4px rgba(0, 0, 0, .3);
@@ -55,14 +55,93 @@ body {
   padding: 20px 10px 15px;
 }
 
-.header > :first-child {
+.HappoDiffs__header > :first-child {
   margin-right: 10px;
 }
 
-.header__title {
+.HappoDiffs__headerTitle {
   margin: 0;
 }
 
-.main {
+.HappoDiffs__main {
   padding: 10px;
 }
+
+.Diff__images {
+  white-space: nowrap;
+}
+
+.Diff__buttons {
+  margin-bottom: 5px;
+}
+
+.Diff__button {
+  border: 1px solid #ccc;
+  border-left-width: 0;
+  background-color: #f0f0f0;
+  padding: 5px 15px;
+}
+
+.Diff__button[aria-pressed="true"] {
+  background-color: #666;
+  border-color: #444;
+  color: white;
+}
+
+.Diff__button--first {
+  border-left-width: 1px;
+  border-radius: 3px 0 0 3px;
+}
+
+.Diff__button--last {
+  border-radius: 0 3px 3px 0;
+}
+
+.Swiper {
+  display: inline-block;
+  line-height: 0;
+  position: relative;
+}
+
+.Swiper__cursor {
+  box-shadow: 0px 0px 2px 0px #ffffff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: #666666;
+  pointer-events: none;
+}
+
+.Swiper__image {
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+}
+
+.SideBySide__image {
+  display: inline-block;
+  line-height: 0;
+  position: relative;
+  vertical-align: top;
+}
+
+.SideBySide__caption {
+  background-color: #666666;
+  bottom: 0;
+  color: #ffffff;
+  font-size: 10px;
+  line-height: 1;
+  opacity: 0;
+  padding: 3px 6px;
+  position: absolute;
+  right: 0;
+  transition: opacity .2s;
+}
+
+.SideBySide__image:hover .SideBySide__caption {
+  opacity: 1;
+}

data/lib/happo/server.rb

@@ -27,25 +27,28 @@ module Happo
     get '/review' do
       result_summary = Happo::Utils.last_result_summary
 
-      diff_images = result_summary[:diff_examples].map do |example|
-        file_path = Happo::Utils.path_to(
-          example[:description],
-          example[:viewport],
-          'diff.png'
-        )
-        example[:url] = "/resource?file=#{ERB::Util.url_encode(file_path)}"
-        example
+      diff_images = result_summary[:diff_examples].map do |image|
+        [:previous, :diff, :current].each do |variant|
+          file_path = Happo::Utils.path_to(
+            image[:description],
+            image[:viewport],
+            "#{variant}.png"
+          )
+          image[variant] = "/resource?file=#{ERB::Util.url_encode(file_path)}"
+        end
+        image
       end
 
-      new_images = result_summary[:new_examples].map do |example|
+      new_images = result_summary[:new_examples].map do |image|
         file_path = Happo::Utils.path_to(
-          example[:description],
-          example[:viewport],
+          image[:description],
+          image[:viewport],
           'current.png'
         )
-        example[:url] = "/resource?file=#{ERB::Util.url_encode(file_path)}"
-        example
+        image[:current] = "/resource?file=#{ERB::Util.url_encode(file_path)}"
+        image
       end
+
       erb :diffs, locals: {
         diff_images: diff_images,
         new_images: new_images
@@ -57,17 +60,23 @@ module Happo
         {
           description: '<First> with "test"',
           viewport: 'small',
-          url: 'http://placehold.it/350x150',
+          previous: 'http://placehold.it/350x150',
+          diff: 'http://placehold.it/350x150',
+          current: 'http://placehold.it/450x190',
         },
         {
           description: '<First> some other \'test\'',
           viewport: 'medium',
-          url: 'http://placehold.it/550x150',
+          previous: 'http://placehold.it/550x150',
+          diff: 'http://placehold.it/550x150',
+          current: 'http://placehold.it/450x110',
         },
         {
           description: '<First>',
           viewport: 'large',
-          url: 'http://placehold.it/850x150',
+          previous: 'http://placehold.it/850x150',
+          diff: 'http://placehold.it/850x150',
+          current: 'http://placehold.it/850x150',
         },
       ]
 
@@ -75,22 +84,22 @@ module Happo
         {
           description: '<New>',
           viewport: 'small',
-          url: 'http://placehold.it/350x150',
+          current: 'http://placehold.it/350x150',
         },
         {
           description: '<New>',
           viewport: 'medium',
-          url: 'http://placehold.it/550x150',
+          current: 'http://placehold.it/550x150',
         },
         {
           description: '<New>',
           viewport: 'large',
-          url: 'http://placehold.it/850x150',
+          current: 'http://placehold.it/850x150',
         },
         {
           description: '<SomethingElseNew>',
           viewport: 'small',
-          url: 'http://placehold.it/350x150',
+          current: 'http://placehold.it/350x150',
         },
       ]
 

data/lib/happo/snapshot_comparer.rb

@@ -2,9 +2,7 @@ require 'oily_png'
 require 'diff-lcs'
 require_relative 'snapshot_comparison_image/base'
 require_relative 'snapshot_comparison_image/gutter'
-require_relative 'snapshot_comparison_image/before'
 require_relative 'snapshot_comparison_image/overlayed'
-require_relative 'snapshot_comparison_image/after'
 
 module Happo
   # This class is responsible for comparing two Snapshots and generating a diff.
@@ -38,7 +36,8 @@ module Happo
       number_of_different_rows = 0
 
       sprite, all_comparisons = initialize_comparison_images(
-        [@png_after.width, @png_before.width].max, sdiff.size)
+        [@png_after.width, @png_before.width].max, sdiff.size
+      )
 
       sdiff.each_with_index do |row, y|
         # each row is a Diff::LCS::ContextChange instance
@@ -49,7 +48,7 @@ module Happo
       percent_changed = number_of_different_rows.to_f / sdiff.size * 100
       {
         diff_in_percent: percent_changed,
-        diff_image:      (sprite if percent_changed > 0),
+        diff_image:      (sprite if percent_changed > 0.0),
       }
     end
 
@@ -69,22 +68,13 @@ module Happo
     # @return [Array<SnapshotComparisonImage>]
     def initialize_comparison_images(width, height)
       gutter_width = Happo::SnapshotComparisonImage::Gutter::WIDTH
-      total_width = (width * 3) + (gutter_width * 3)
+      total_width = gutter_width + width
 
       sprite = ChunkyPNG::Image.new(total_width, height)
       offset, comparison_images = 0, []
       comparison_images << Happo::SnapshotComparisonImage::Gutter.new(offset, sprite)
       offset += gutter_width
-      comparison_images << Happo::SnapshotComparisonImage::Before.new(offset, sprite)
-      offset += width
-      comparison_images << Happo::SnapshotComparisonImage::Gutter.new(offset, sprite)
-      offset += gutter_width
       comparison_images << Happo::SnapshotComparisonImage::Overlayed.new(offset, sprite)
-      offset += width
-      comparison_images << Happo::SnapshotComparisonImage::Gutter.new(offset, sprite)
-      offset += gutter_width
-      comparison_images << Happo::SnapshotComparisonImage::After.new(offset, sprite)
-
       [sprite, comparison_images]
     end
   end

data/lib/happo/uploader.rb

@@ -3,6 +3,8 @@ require 'securerandom'
 require 'uri'
 
 module Happo
+  # Handles uploading diffs (serialized html doc + images) to an Amazon S3
+  # account.
   class Uploader
     def initialize
       @s3_access_key_id = ENV['S3_ACCESS_KEY_ID']
@@ -17,40 +19,22 @@ module Happo
       return [] if result_summary[:diff_examples].empty? &&
                    result_summary[:new_examples].empty?
 
-      bucket = find_or_build_bucket
-      dir = if @s3_bucket_path.nil? || @s3_bucket_path.empty?
-              SecureRandom.uuid
-            else
-              File.join(@s3_bucket_path, SecureRandom.uuid)
-            end
-
-      diff_images = result_summary[:diff_examples].map do |diff|
-        img_name = "#{diff[:description]}_#{diff[:viewport]}.png"
-        image = bucket.objects.build("#{dir}/#{img_name}")
-        image.content = open(Happo::Utils.path_to(diff[:description],
-                                                     diff[:viewport],
-                                                     'diff.png'))
-        image.content_type = 'image/png'
-        image.save
-        diff[:url] = URI.escape(img_name)
-        diff
+      diff_images = result_summary[:diff_examples].map do |image|
+        image[:previous] = upload_image(image, 'previous')
+        image[:diff] = upload_image(image, 'diff')
+        image[:current] = upload_image(image, 'current')
+        image
       end
 
-      new_images = result_summary[:new_examples].map do |example|
-        img_name = "#{example[:description]}_#{example[:viewport]}.png"
-        image = bucket.objects.build("#{dir}/#{img_name}")
-        image.content = open(Happo::Utils.path_to(example[:description],
-                                                     example[:viewport],
-                                                     'current.png'))
-        image.content_type = 'image/png'
-        image.save
-        example[:url] = URI.escape(img_name)
-        example
+      new_images = result_summary[:new_examples].map do |image|
+        image[:current] = upload_image(image, 'current')
+        image
       end
 
-      html = bucket.objects.build("#{dir}/index.html")
+      html = find_or_build_bucket.objects.build("#{directory}/index.html")
       path = File.expand_path(
-        File.join(File.dirname(__FILE__), 'views', 'diffs.erb'))
+        File.join(File.dirname(__FILE__), 'views', 'diffs.erb')
+      )
       html.content = ERB.new(File.read(path)).result(binding)
       html.content_encoding = 'utf-8'
       html.content_type = 'text/html'
@@ -61,11 +45,33 @@ module Happo
     private
 
     def find_or_build_bucket
-      service = S3::Service.new(access_key_id: @s3_access_key_id,
-                                secret_access_key: @s3_secret_access_key)
-      bucket = service.bucket(@s3_bucket_name)
-      bucket.save(location: :us) unless bucket.exists?
-      bucket
+      @bucket ||= begin
+        service = S3::Service.new(access_key_id: @s3_access_key_id,
+                                  secret_access_key: @s3_secret_access_key)
+        bucket = service.bucket(@s3_bucket_name)
+        bucket.save(location: :us) unless bucket.exists?
+        bucket
+      end
+    end
+
+    def directory
+      if @s3_bucket_path.nil? || @s3_bucket_path.empty?
+        SecureRandom.uuid
+      else
+        File.join(@s3_bucket_path, SecureRandom.uuid)
+      end
+    end
+
+    def upload_image(image, variant)
+      bucket = find_or_build_bucket
+      img_name = "#{image[:description]}_#{image[:viewport]}_#{variant}.png"
+      s3_image = bucket.objects.build("#{directory}/#{img_name}")
+      s3_image.content = open(Happo::Utils.path_to(image[:description],
+                                                   image[:viewport],
+                                                   "#{variant}.png"))
+      s3_image.content_type = 'image/png'
+      s3_image.save
+      URI.escape(img_name)
     end
   end
 end

data/lib/happo/version.rb

@@ -1,4 +1,4 @@
 # Defines the gem version.
 module Happo
-  VERSION = '2.4.0'
+  VERSION = '2.5.0'
 end

data/lib/happo/views/diffs.erb

@@ -12,9 +12,9 @@
       <%= Happo::Utils.css_styles %>
     </style>
 
-    <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
-    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
-    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
+    <script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
+    <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
+    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
 
     <script type="text/babel">
       <%= Happo::Utils.jsx_code %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: happo
 version: !ruby/object:Gem::Version
-  version: 2.4.0
+  version: 2.5.0
 platform: ruby
 authors:
 - Henric Trotzig
@@ -9,22 +9,22 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-08-29 00:00:00.000000000 Z
+date: 2016-09-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: chunky_png
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: 1.3.1
+        version: 1.3.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: 1.3.1
+        version: 1.3.6
 - !ruby/object:Gem::Dependency
   name: diff-lcs
   requirement: !ruby/object:Gem::Requirement
@@ -152,9 +152,7 @@ files:
 - lib/happo/runner.rb
 - lib/happo/server.rb
 - lib/happo/snapshot_comparer.rb
-- lib/happo/snapshot_comparison_image/after.rb
 - lib/happo/snapshot_comparison_image/base.rb
-- lib/happo/snapshot_comparison_image/before.rb
 - lib/happo/snapshot_comparison_image/gutter.rb
 - lib/happo/snapshot_comparison_image/overlayed.rb
 - lib/happo/uploader.rb

data/lib/happo/snapshot_comparison_image/after.rb

@@ -1,21 +0,0 @@
-module Happo
-  module SnapshotComparisonImage
-    # This subclass of `SnapshotComparisonImage` knows how to draw the
-    # representation of the "after" image.
-    class After < SnapshotComparisonImage::Base
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_changed_row(y, row)
-        render_added_row(y, row)
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_added_row(y, row)
-        row.new_element.each_with_index do |pixel_after, x|
-          render_pixel(x, y, pixel_after)
-        end
-      end
-    end
-  end
-end

data/lib/happo/snapshot_comparison_image/before.rb

@@ -1,21 +0,0 @@
-module Happo
-  module SnapshotComparisonImage
-    # This subclass of `SnapshotComparisonImage` knows how to draw the
-    # representation of the "before" image.
-    class Before < SnapshotComparisonImage::Base
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_changed_row(y, row)
-        render_deleted_row(y, row)
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_deleted_row(y, row)
-        row.old_element.each_with_index do |pixel_before, x|
-          render_pixel(x, y, pixel_before)
-        end
-      end
-    end
-  end
-end