happo 2.6.0 → 2.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f9a8cddb3cdd182db6d8d96d32b9a81c5802f449
-  data.tar.gz: 6d9726df428ef2da13115dbfedbf739d27e0875d
+  metadata.gz: 4f44c560afe02096d68d9a04a2f2f8bb787768ae
+  data.tar.gz: a88fa0dcd66c6c1cd21b2dfd05914da55a0b5814
 SHA512:
-  metadata.gz: f1b0f14bc41131d94b70ae1efc96bcde6e717958634dcb72cdd73438cc503b0a2aeadc1b7336589df246c1765c6c589ae1d313c4cba96c04b29d8d13ffb520c5
-  data.tar.gz: af494cf1cc7b4d18cf2aae3ab6941157f35a2cc474d9e7e1e3ae3c5661884cb54d838baf26a1939e02b869f4add0a1f6b7bb0739415cb1f8fb71d2b35b1fb90d
+  metadata.gz: 47ed2b3c591ccfa1acf1cbf47bc917fd2f71c917b9d8de65e97ca40fc8d4fa428e458bbd3a6c616e7bc7b8b1dffddec055a5855f50514f49b7f0f403d9c0650a
+  data.tar.gz: bef158db3def1a19b72caa132a87abcf0cfe16298112fb0559d0e9f0637a32d3274cafce16557cc50a6935f1d9ad52745767589c0fd0a3cbfe3c236c793c6491

data/lib/happo/public/HappoDiffs.jsx

@@ -240,25 +240,19 @@ Swiper.propTypes = {
 function SideBySide({ previous, current }) {
   return (
     <div className='SideBySide'>
-      <div className='SideBySide__image'>
-        <img
-          role='presentation'
-          src={previous}
-        />
-        <div className='SideBySide__caption'>
-          Before
-        </div>
-      </div>
+      <img
+        className='SideBySide__image'
+        role='presentation'
+        src={previous}
+        title='Before'
+      />
       {' '}
-      <div className='SideBySide__image'>
-        <img
-          role='presentation'
-          src={current}
-        />
-        <div className='SideBySide__caption'>
-          After
-        </div>
-      </div>
+      <img
+        className='SideBySide__image'
+        role='presentation'
+        src={current}
+        title='After'
+      />
     </div>
   );
 }

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

@@ -10,7 +10,6 @@
 window.happo = {
   defined: {},
   fdefined: [],
-  currentRenderedElement: undefined,
   errors: [],
 
   define: function define(description, func, options) {
@@ -99,8 +98,7 @@ window.happo = {
    *
    * @param {Object} renderedElement
    */
-  cleanOutElement: function cleanOutElement(renderedElement) {
-    renderedElement.parentNode.removeChild(renderedElement);
+  cleanOutElement: function cleanOutElement() {
   },
 
   /**
@@ -121,10 +119,8 @@ window.happo = {
       }
 
       // Clear out the body of the document
-      if (this.currentRenderedElement) {
-        this.cleanOutElement(this.currentRenderedElement);
-      }
       while (document.body.firstChild) {
+        this.cleanOutElement(document.body.firstChild);
         document.body.removeChild(document.body.firstChild);
       }
 
@@ -133,8 +129,8 @@ 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) {
-          doneFunc(this.processElem(currentExample, elem));
+        this.tryAsync(func).then(function () {
+          doneFunc(this.processExample(currentExample));
         }.bind(this)).catch(function (error) {
           doneFunc(this.handleError(currentExample, error));
         }.bind(this));
@@ -146,15 +142,15 @@ 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) {
-            doneFunc(this.processElem(currentExample, elem));
+          result.then(function () {
+            doneFunc(this.processExample(currentExample));
           }.bind(this)).catch(function (error) {
             doneFunc(this.handleError(currentExample, error));
           }.bind(this));
         } else {
           // The function did not return a promise, so we assume it gave us an
           // element that we can process immediately.
-          doneFunc(this.processElem(currentExample, result));
+          doneFunc(this.processExample(currentExample));
         }
       }
     } catch (error) {
@@ -197,38 +193,36 @@ window.happo = {
     }
   },
 
-  // This function gets the full size of the given node, including all
-  // 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 getFullRect(node) {
-    this.removeScrollbars(node);
-
-    var rect = node.getBoundingClientRect();
-
+  // This function gets the full size of children in the document body,
+  // including all 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 getFullRect() {
     // Set up the initial object that we will mutate in our recursive function.
     var box = {
-      bottom: rect.bottom,
-      left: rect.left,
-      right: rect.right,
-      top: rect.top,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
     };
 
-    // getBoundingClientRect does not include margin, so we need to use
-    // getComputedStyle. Since this is slow and the margin of descendent
-    // elements is significantly less likely to matter, let's include the margin
-    // only from the topmost node.
-    var computedStyle = window.getComputedStyle(node);
-    box.bottom += parseInt(computedStyle.getPropertyValue('margin-bottom'), 10);
-    box.left -= parseInt(computedStyle.getPropertyValue('margin-left'), 10);
-    box.right += parseInt(computedStyle.getPropertyValue('margin-right'), 10);
-    box.top -= parseInt(computedStyle.getPropertyValue('margin-top'), 10);
-
     // If there are any children, we want to iterate over them recursively,
     // mutating our box object along the way to expand to include all descendent
     // nodes.
-    for (var i = 0; i < node.children.length; i++) {
-      this.getFullRectRecursive(node.children[i], box);
+    for (var i = 0; i < document.body.children.length; i++) {
+      var node = document.body.children[i];
+
+      this.getFullRectRecursive(node, box);
+
+      // getBoundingClientRect does not include margin, so we need to use
+      // getComputedStyle. Since this is slow and the margin of descendent
+      // elements is significantly less likely to matter, let's include the
+      // margin only from the topmost nodes.
+      var computedStyle = window.getComputedStyle(node);
+      box.bottom += parseInt(computedStyle.getPropertyValue('margin-bottom'), 10);
+      box.left -= parseInt(computedStyle.getPropertyValue('margin-left'), 10);
+      box.right += parseInt(computedStyle.getPropertyValue('margin-right'), 10);
+      box.top -= parseInt(computedStyle.getPropertyValue('margin-top'), 10);
     }
 
     // As the last step, we calculate the width and height for the box. This is
@@ -247,23 +241,11 @@ window.happo = {
     return box;
   },
 
-  processElem: function processElem(currentExample, elem) {
+  processExample: function processExample(currentExample) {
     try {
-      this.currentRenderedElement = elem;
-
-      var rect;
-      if (currentExample.options.snapshotEntireScreen) {
-        rect = {
-          width: window.innerWidth,
-          height: window.innerHeight,
-          top: 0,
-          left: 0,
-        };
-      } else {
-        // Note that this method returns floats, so we need to round those off
-        // to integers before returning.
-        rect = this.getFullRect(elem);
-      }
+      // Note that this method returns floats, so we need to round those off
+      // to integers before returning.
+      var rect = this.getFullRect();
 
       return {
         description: currentExample.description,

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

@@ -123,25 +123,5 @@ body {
 }
 
 .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/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: happo
 version: !ruby/object:Gem::Version
-  version: 2.6.0
+  version: 2.7.0
 platform: ruby
 authors:
 - Henric Trotzig
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-09-02 00:00:00.000000000 Z
+date: 2016-09-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: chunky_png