happo 2.7.6 → 2.7.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6b9353da172d06d10d7aa9c9bc1f1526553e5ec6
-  data.tar.gz: ae91a53e96b445b790973a50e4e36956eb09f4f4
+  metadata.gz: d12582fe8c4a7617c5f1e8bd52ee2585bcac5859
+  data.tar.gz: c6810b91202a389f418d8825c33350e4456a1a2a
 SHA512:
-  metadata.gz: 493416b10f5a881202d6ec3e250e96973de130faf26c410354339d10567a12156ef94a87690da60a38e4f3cc91c77159c10de6a30650f629b3f052f9965ab5bd
-  data.tar.gz: 57a4cd127019c3b6e4a49b4226b26613b9faa4750601659ad8616852b6b5850da4285fb5144139c2f957a2fae46a17d7f9942753504cef52814e408a6c15e9c4
+  metadata.gz: 4ce0eb932ab4866a6a80104b26f07e9a5a8241b0d5f14ab21096f94789129408ad703ba46569d488e9849ec1f12fcbaaf3bbaaceee344b7ed89f67a4bf0136ca
+  data.tar.gz: 71cbb7f703e03136869fbc84868a46c845f0762acbe0797ee9a961c465f85ef53ae1d9f91bc73dd89357685209070bded30329e20c9af9ef3d75a28cd2e145fa

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

@@ -251,12 +251,20 @@ window.happo = {
       // 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);
+      box.bottom += parseFloat(computedStyle.getPropertyValue('margin-bottom'));
+      box.left -= parseFloat(computedStyle.getPropertyValue('margin-left'));
+      box.right += parseFloat(computedStyle.getPropertyValue('margin-right'));
+      box.top -= parseFloat(computedStyle.getPropertyValue('margin-top'));
     }
 
+    // Since getBoundingClientRect() and margins can contain subpixel values, we
+    // want to round everything before calculating the width and height to
+    // ensure that we will take a screenshot of the entire component.
+    box.bottom = Math.ceil(box.bottom);
+    box.left = Math.floor(box.left);
+    box.right = Math.ceil(box.right);
+    box.top = Math.floor(box.top);
+
     // As the last step, we calculate the width and height for the box. This is
     // to avoid having to do them for every node. Before we do that however, we
     // cut off things that render off the screen to the top or left, since those
@@ -275,16 +283,14 @@ window.happo = {
 
   processExample: function processExample(currentExample) {
     try {
-      // 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,
-        width: Math.ceil(rect.width),
-        height: Math.ceil(rect.height),
-        top: Math.floor(rect.top),
-        left: Math.floor(rect.left),
+        width: rect.width,
+        height: rect.height,
+        top: rect.top,
+        left: rect.left,
       };
     } catch (error) {
       return this.handleError(currentExample, error);

data/lib/happo/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: happo
 version: !ruby/object:Gem::Version
-  version: 2.7.6
+  version: 2.7.7
 platform: ruby
 authors:
 - Henric Trotzig
@@ -145,8 +145,6 @@ files:
 - bin/happo
 - lib/happo.rb
 - lib/happo/logger.rb
-- lib/happo/public/HappoApp.bundle.js
-- lib/happo/public/HappoApp.bundle.js.map
 - lib/happo/public/HappoDiffs.jsx
 - lib/happo/public/favicon.ico
 - lib/happo/public/happo-runner.js

data/lib/happo/public/HappoApp.bundle.js

@@ -1 +0,0 @@
-!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}var a=r(1),u=n(a),i=r(20),o=n(i),l=r(8),s=n(l);document.addEventListener("DOMContentLoaded",function(){o["default"].render(u["default"].createElement(s["default"],window.APP_PROPS),document.getElementById("react-root"))})},function(e,t){e.exports=React},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(1);t["default"]={description:n.PropTypes.string.isRequired,viewport:n.PropTypes.string.isRequired,diff:n.PropTypes.string,previous:n.PropTypes.string,current:n.PropTypes.string.isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.children,r=e.to;return i["default"].createElement("a",{className:"InlineLink",href:"#"+r},t)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u);a.propTypes={children:u.PropTypes.node.isRequired,to:u.PropTypes.string.isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.image;return i["default"].createElement("h3",{id:(0,d["default"])(t)},i["default"].createElement(l["default"],{to:(0,d["default"])(t)},t.description," @ ",t.viewport))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u),o=r(3),l=n(o),s=r(2),f=n(s),c=r(18),d=n(c);a.propTypes={image:u.PropTypes.shape(f["default"]).isRequired}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={SIDE_BY_SIDE:"Side-by-side",SWIPE:"Swipe",DIFF:"Diff"}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function o(e){var t=e.image,r=e.selectedView,n=e.onClick;return f["default"].createElement("div",null,f["default"].createElement(d["default"],{image:t}),f["default"].createElement("div",{className:"Diff__buttons"},Object.keys(v["default"]).map(function(e){return v["default"][e]}).map(function(e,t){var a=["Diff__button"];return 0===t?a.push("Diff__button--first"):t===Object.keys(v["default"]).length-1&&a.push("Diff__button--last"),f["default"].createElement("button",{key:e,className:a.join(" "),"aria-pressed":e===r,onClick:function(){n(e)}},e)})),f["default"].createElement("div",{className:"Diff__images"},f["default"].createElement(h["default"],{image:t,selectedView:r})))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=t.DiffController=void 0;var l=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=r(1),f=n(s),c=r(4),d=n(c),p=r(12),h=n(p),m=r(5),v=n(m),y=r(2),_=n(y),g=t.DiffController=function(e){function t(e){a(this,t);var r=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={selectedView:v["default"].SIDE_BY_SIDE},r.handleClick=r.handleClick.bind(r),r}return i(t,e),l(t,[{key:"handleClick",value:function(e){this.setState({selectedView:e})}},{key:"render",value:function(){return f["default"].createElement(o,{image:this.props.image,selectedView:this.state.selectedView,onClick:this.handleClick})}}]),t}(f["default"].Component);g.propTypes={image:s.PropTypes.shape(_["default"]).isRequired},t["default"]=o,o.propTypes={image:s.PropTypes.shape(_["default"]).isRequired,onClick:s.PropTypes.func.isRequired,selectedView:s.PropTypes.oneOf(Object.keys(v["default"]).map(function(e){return v["default"][e]})).isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.images;return t.length?i["default"].createElement("div",null,i["default"].createElement("h2",{id:"diffs"},i["default"].createElement(s["default"],{to:"diffs"},"Diffs (",t.length,")")),t.map(function(e){return i["default"].createElement(o.DiffController,{key:e.current,image:e})})):null}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u),o=r(6),l=r(3),s=n(l),f=r(2),c=n(f);a.propTypes={images:u.PropTypes.arrayOf(u.PropTypes.shape(c["default"])).isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.pageTitle,r=e.generatedAt,n=e.diffImages,a=e.newImages;return i["default"].createElement("div",null,i["default"].createElement("header",{className:"HappoDiffs__header"},i["default"].createElement("h1",{className:"HappoDiffs__headerTitle"},t),i["default"].createElement("div",{className:"HappoDiffs__headerTime"},"Generated: ",r)),i["default"].createElement("main",{className:"HappoDiffs__main"},i["default"].createElement(l["default"],{images:n}),i["default"].createElement(f["default"],{images:a})))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u),o=r(7),l=n(o),s=r(11),f=n(s),c=r(2),d=n(c);a.propTypes={pageTitle:u.PropTypes.string.isRequired,diffImages:u.PropTypes.arrayOf(d["default"]).isRequired,newImages:u.PropTypes.arrayOf(d["default"]).isRequired,generatedAt:u.PropTypes.string.isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),l=r(1),s=n(l),f=r(16),c=n(f),d=r(17),p=n(d),h=function(e){function t(e){a(this,t);var r=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={previousData:null,currentData:null},r}return i(t,e),o(t,[{key:"componentDidMount",value:function(){var e=this,t=this.props,r=t.previous,n=t.current;(0,p["default"])(r).then(function(t){e.setState({previousData:t})}),(0,p["default"])(n).then(function(t){e.setState({currentData:t})})}},{key:"render",value:function(){var e=this,t=this.state,r=t.previousData,n=t.currentData,a=void 0,u=void 0;return r&&n&&(a=Math.max(r.width,n.width),u=Math.max(r.height,n.height),setTimeout(function(){for(var t=e.canvas.getContext("2d"),i=t.createImageData(a,u),o=i.data,l=0;l<u;l++)for(var s=0;s<a;s++){var f=(0,c["default"])(r.getPixelAt(s,l),n.getPixelAt(s,l)),d=4*(l*a+s);o[d+0]=f[0],o[d+1]=f[1],o[d+2]=f[2],o[d+3]=f[3]}t.putImageData(i,0,0)},0)),s["default"].createElement("canvas",{width:a,height:u,ref:function(t){e.canvas=t}})}}]),t}(s["default"].Component);t["default"]=h,h.propTypes={previous:l.PropTypes.string.isRequired,current:l.PropTypes.string.isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.image;return i["default"].createElement("div",null,i["default"].createElement(l["default"],{image:t}),i["default"].createElement("img",{role:"presentation",src:t.current}))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u),o=r(4),l=n(o),s=r(2),f=n(s);a.propTypes={image:u.PropTypes.shape(f["default"]).isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.images;return t.length?i["default"].createElement("div",null,i["default"].createElement("h2",{id:"new"},i["default"].createElement(l["default"],{to:"new"},"New examples (",t.length,")")),t.map(function(e){return i["default"].createElement(f["default"],{key:e.current,image:e})})):null}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u),o=r(3),l=n(o),s=r(10),f=n(s),c=r(2),d=n(c);a.propTypes={images:u.PropTypes.arrayOf(u.PropTypes.shape(d["default"])).isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.image,r=e.selectedView;return r===h["default"].SIDE_BY_SIDE?i["default"].createElement(f["default"],{previous:t.previous,current:t.current}):r===h["default"].DIFF?i["default"].createElement(l["default"],{previous:t.previous,current:t.current}):r===h["default"].SWIPE?i["default"].createElement(d["default"],{previous:t.previous,current:t.current}):void 0}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u),o=r(9),l=n(o),s=r(13),f=n(s),c=r(14),d=n(c),p=r(5),h=n(p),m=r(2),v=n(m);a.propTypes={image:u.PropTypes.shape(v["default"]).isRequired,selectedView:u.PropTypes.oneOf(Object.keys(h["default"]).map(function(e){return h["default"][e]})).isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e){var t=e.previous,r=e.current;return i["default"].createElement("div",{className:"SideBySide"},i["default"].createElement("img",{className:"SideBySide__image",role:"presentation",src:t,title:"Before"})," ",i["default"].createElement("img",{className:"SideBySide__image",role:"presentation",src:r,title:"After"}))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(1),i=n(u);a.propTypes={previous:u.PropTypes.string.isRequired,current:u.PropTypes.string.isRequired}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),l=r(1),s=n(l),f=r(19),c=n(f),d=function(e){function t(e){a(this,t);var r=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={cursorLeft:0,height:"auto",width:"auto"},r.handleMouseMove=r.handleMouseMove.bind(r),r}return i(t,e),o(t,[{key:"componentWillMount",value:function(){var e=this;this.updateSize(this.props).then(function(t){var r=t.width;e.setState({cursorLeft:r/2})})}},{key:"componentWillReceiveProps",value:function(e){this.updateSize(e)}},{key:"updateSize",value:function(e){var t=this,r=e.current,n=e.previous,a=(0,c["default"])(r,n).then(function(e){var r=e.width,n=e.height;return t.setState({width:r,height:n}),{width:r,height:n}});return Promise.resolve(a)}},{key:"handleMouseMove",value:function(e){this.setState({cursorLeft:e.pageX-e.target.offsetLeft})}},{key:"render",value:function(){var e=this.props,t=e.previous,r=e.current,n=this.state,a=n.cursorLeft,u=n.height,i=n.width;return s["default"].createElement("div",{className:"Swiper",style:{height:u,width:i},onMouseMove:this.handleMouseMove},s["default"].createElement("div",{className:"Swiper__image",style:{width:a}},s["default"].createElement("img",{src:t,role:"presentation"})),s["default"].createElement("div",{className:"Swiper__image",style:{transform:"translateX("+a+"px)",width:i-a}},s["default"].createElement("img",{src:r,style:{transform:"translateX(-"+a+"px)"},role:"presentation"})),s["default"].createElement("div",{className:"Swiper__cursor",style:{transform:"translateX("+a+"px)"}}))}}]),t}(s["default"].Component);t["default"]=d,d.propTypes={previous:l.PropTypes.string.isRequired,current:l.PropTypes.string.isRequired}},function(e,t){"use strict";function r(e,t){for(var r=0,n=0;n<e.length;n++)r+=(e[n]-t[n])*(e[n]-t[n]);return Math.sqrt(r)/e.length/255}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!e)return t;if(!t)return e;var r=(0,i["default"])(e,t);return 0===r?[t[0],t[1],t[2],50]:(r<.2&&(r=.2),[255,0,0,255*r])}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=a;var u=r(15),i=n(u)},function(e,t){"use strict";function r(e){return new Promise(function(t){var r=new Image;r.onload=function(){var e=r.width,n=r.height,a=document.createElement("canvas");a.width=e,a.height=n;var u=a.getContext("2d");u.drawImage(r,0,0);var i=u.getImageData(0,0,e,n).data,o=4*e,l=function(t,r){if(!(t>e||r>n)){var a=r*o+4*t;return[i[a],i[a+1],i[a+2],i[a+3]]}};t({getPixelAt:l,width:e,height:n})},r.src=e})}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t){"use strict";function r(e){return btoa(e.description+e.viewport)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r},function(e,t){"use strict";function r(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function n(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];var a={};return new Promise(function(e,n){t.forEach(function(u,i){var o=new Image;o.onerrer=function(e){n(e)},o.onload=function(){var n=this.width,u=this.height;if(a[i]={width:n,height:u},Object.keys(a).length>=t.length){var o=Object.keys(a).map(function(e){return a[e]}),l=Math.max.apply(Math,r(o.map(function(e){return e.width}))),s=Math.max.apply(Math,r(o.map(function(e){return e.height})));e({width:l,height:s})}},o.src=u})})}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t){e.exports=ReactDOM}]);