diffux-core 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 80f32154fc059c048c223e8e2ca3646a802a8859
-  data.tar.gz: 7452b31f9989d95cbc3799d5bcacbe1e4dcd99b7
+  metadata.gz: 8362662564dad77a53ca282a389cbad52a5ed59c
+  data.tar.gz: 9ca2065b9f022ad5202f1a26e15c334b3bc2ea74
 SHA512:
-  metadata.gz: 240ad46905dfd690d5c3fcafc82eff833ba0c0128a3e786c08089dc40cf33b720efda4f9d971e70f2767eb975829d7a5971981983c5b5be2acaf352ae923a383
-  data.tar.gz: 60e6f38b354ad99791fad9c333ed52e9e038f7eee7ac823c3eebcd92ee84294dfae794436f64e0717babf168e896380dfd08ee66b92564ce23957fef2fd42a3c
+  metadata.gz: 29e01c7448c6287d31f3b71ee141cbf08118b1c1d0262b74c503fe393e4f566dbdf03484caca80378971aa5fce09f033c0084a58d683300c7be63022710b1336
+  data.tar.gz: b4d1c26cc7e928ca91be9c1929c7e84cb473c42fb01ef476fa47b420e4ff2485590f6a40ef5995c79fd738f07d085ef381e219f2f9ed4d6305b3321ea10a76e2

data/bin/diffux-snapshot

@@ -26,6 +26,11 @@ OptionParser.new do |opts|
     options[:width] = w
   end
 
+  opts.on('-c', '--cropselector CROPSELECTOR',
+          'Limit the snapshot to a specific element') do |cs|
+    options[:crop_selector] = cs
+  end
+
   opts.on('-a', '--useragent USERAGENT',
           'Set a useragent header when loading the url') do |ua|
     options[:useragent] = ua
@@ -47,10 +52,10 @@ unless options[:outfile]
   exit 1
 end
 
-snapshot = Diffux::Snapshotter.new(
+Diffux::Snapshotter.new(
   viewport_width: options[:width],
+  crop_selector:  options[:crop_selector],
   user_agent:     options[:useragent],
   outfile:        options[:outfile],
-  url:            options[:url],
+  url:            options[:url]
 ).take_snapshot!
-

data/lib/diffux_core/script/take-snapshot.js

@@ -0,0 +1,170 @@
+var page = require('webpage').create(),
+    opts = JSON.parse(require('system').args[1]);
+
+page.viewportSize = opts.viewportSize;
+if (opts.userAgent) {
+  page.settings.userAgent = opts.userAgent;
+} else {
+  page.settings.userAgent = page.settings.userAgent + ' Diffux';
+}
+
+/**
+ * Configure timeouts
+ */
+page.waitTimeouts = {
+  initial: 1000,
+  afterResourceDone: 300,
+  fallback: 60000
+};
+// Don't wait more than 5 seconds on resources
+page.settings.resourceTimeout = 5000;
+
+/**
+ * Saves a log string. The full log will be added to the console.log in the end,
+ * so that consumers of this script can use that information.
+ */
+page.allLogs = [];
+page.log = function(string) {
+  page.allLogs.push(new Date().getTime() + ': ' + string);
+};
+
+/**
+ * By preventing animations from happening when we are taking the snapshots, we
+ * avoid timing issues that cause unwanted differences.
+ */
+page.preventAnimations = function() {
+  // CSS Transitions
+  var css   = document.createElement('style');
+  css.type  = 'text/css';
+  document.head.appendChild(css);
+  var sheet = css.sheet;
+  sheet.addRule('*', '-webkit-transition: none !important;');
+  sheet.addRule('*', 'transition: none !important;');
+  sheet.addRule('*', '-webkit-animation-duration: 0 !important;');
+  sheet.addRule('*', 'animation-duration: 0 !important;');
+
+  // jQuery
+  if (window.jQuery) {
+    jQuery.fx.off = true;
+    jQuery('*').stop(true, true);
+  }
+
+  // Prevent things like blinking cursors by un-focusing any focused
+  // elements
+  document.activeElement.blur();
+};
+
+
+/**
+ * Waits until the page is ready and then fires a callback.
+ *
+ * This method will keep track of all resources requested (css, javascript, ajax
+ * requests, etc). As soon as we have no outstanding requests active, we start a
+ * short timer which fires the callback. If a new resource is requested in that
+ * short timeframe, we cancel the timer and wait for the new resource.
+ *
+ * In case something goes wrong, there's a 10 second fallback timer running in
+ * the background.
+ */
+page.waitUntilReady = function(callback) {
+  var fireCallback = function() {
+    page.log('Done - page is ready.');
+    clearTimeout(page.resourceWaitTimer);
+    clearTimeout(page.fallbackWaitTimer);
+    callback();
+  };
+
+  page.resourcesActive = [];
+
+  page.onResourceRequested = function(request) {
+    page.log('Ready: Request started - [' + request.id + '] ' + request.url);
+    page.log('Active requests - ' + page.resourcesActive);
+    if (page.resourceWaitTimer) {
+      page.log('Clearing timeout.');
+      clearTimeout(page.resourceWaitTimer);
+      page.resourceWaitTimer = null;
+    }
+    page.resourcesActive.push(request.id);
+  };
+
+  function onResourceEnded(response) {
+    page.log('Ready: Resource received - [' + response.id + '] '
+        + response.url);
+    page.log('Active requests - ' + page.resourcesActive);
+
+    page.resourcesActive.splice(page.resourcesActive.indexOf(response.id), 1);
+
+    if (page.resourcesActive.length === 0) {
+      page.log('Potentially done, firing after short timeout.');
+      page.resourceWaitTimer = setTimeout(fireCallback,
+          page.waitTimeouts.afterResourceDone);
+    }
+  }
+
+
+  page.onResourceError = onResourceEnded;
+  page.onResourceTimout = onResourceEnded;
+  page.onResourceReceived = function(response) {
+    if (response.stage === 'end') {
+      onResourceEnded(response);
+    }
+  };
+
+  page.log('Starting default timeouts. ' + JSON.stringify(page.waitTimeouts));
+  page.resourceWaitTimer = setTimeout(fireCallback, page.waitTimeouts.initial);
+  page.fallbackWaitTimer = setTimeout(fireCallback, page.waitTimeouts.fallback);
+};
+
+/**
+* Gets the top, left, width, and height of an element to crop and sets that to
+* `page.clipRect` (a PhantomJS thing that will force `render` to only render
+* that rectangle).
+*/
+page.cropOutElement = function() {
+  page.log('Cropping out ' + opts.cropSelector);
+
+  page.clipRect = page.evaluate(function(selector) {
+    var cropElement = document.querySelector(selector);
+    if (!cropElement) {
+      return;
+    }
+    return cropElement.getBoundingClientRect();
+  }, opts.cropSelector);
+  page.log('Crop set to ' + JSON.stringify(page.clipRect));
+};
+
+/**
+ * Main place for taking the screenshot. Will exit the script when done.
+ */
+page.takeDiffuxSnapshot = function() {
+  // Try to prevent animations from running, to reduce variation in
+  // snapshots.
+  page.evaluate(page.preventAnimations);
+
+  // Check if the snapshot image should be cropped.
+  if (opts.cropSelector) {
+    page.cropOutElement();
+  }
+  // Save a PNG of the rendered page
+  page.render(opts.outfile);
+
+  // Capture metadata
+  var response = page.evaluate(function() {
+    return { title: document.title };
+  });
+
+  response.opts   = opts;
+  response.log    = page.allLogs.join('\n');
+  response.status = status;
+
+  // The phantomjs gem can read what is written to STDOUT which includes
+  // console.log, so we can use that to pass information from phantomjs back
+  // to the app.
+  console.log(JSON.stringify(response));
+
+  phantom.exit();
+};
+
+page.open(opts.address, function(status) {
+  page.waitUntilReady(page.takeDiffuxSnapshot);
+});

data/lib/diffux_core/snapshot_comparison_image/base.rb

@@ -66,10 +66,6 @@ module Diffux
         # no default implementation
       end
 
-      # Could be simplified as ChunkyPNG::Color::MAX * 2, but this format mirrors
-      # the math in #pixel_diff_score
-      MAX_EUCLIDEAN_DISTANCE = Math.sqrt(ChunkyPNG::Color::MAX**2 * 4)
-
       # Compute a score that represents the difference between 2 pixels
       #
       # This method simply takes the Euclidean distance between the RGBA channels
@@ -86,12 +82,8 @@ module Diffux
       # @return [Float] number between 0 and 1 where 1 is completely different
       #   and 0 is no difference
       def pixel_diff_score(pixel_after, pixel_before)
-        Math.sqrt(
-          (r(pixel_after) - r(pixel_before))**2 +
-          (g(pixel_after) - g(pixel_before))**2 +
-          (b(pixel_after) - b(pixel_before))**2 +
-          (a(pixel_after) - a(pixel_before))**2
-        ) / MAX_EUCLIDEAN_DISTANCE
+        ChunkyPNG::Color::euclidean_distance_rgba(pixel_after, pixel_before) /
+          ChunkyPNG::Color::MAX_EUCLIDEAN_DISTANCE_RGBA
       end
 
       # @param diff_score [Float]

data/lib/diffux_core/snapshotter.rb

@@ -8,7 +8,8 @@ module Diffux
   # for a given URL and viewoprt, and then saving that snapshot to a file and
   # storing any metadata on the Snapshot object.
   class Snapshotter
-    SCRIPT_PATH = File.join(File.dirname(__FILE__), 'script/take-snapshot.js').to_s
+    SCRIPT_PATH = File.join(File.dirname(__FILE__),
+                            'script/take-snapshot.js').to_s
 
     # @param url [String} the URL to snapshot
     # @param viewport_width [Integer] the width of the screen used when
@@ -16,15 +17,22 @@ module Diffux
     # @param outfile [File] where to store the snapshot PNG.
     # @param user_agent [String] an optional useragent string to used when
     #   requesting the page.
+    # @param crop_selector [String] an optional string containing a CSS
+    #   selector. If this is present, and the page contains something matching
+    #   it, the resulting snapshot image will only contain that element. If the
+    #   page contains multiple elements mathing the selector, only the first
+    #   element will be used.
     def initialize(url:     raise, viewport_width: raise,
-                   outfile: raise, user_agent: nil)
+                   outfile: raise, user_agent: nil,
+                   crop_selector: nil)
       @viewport_width = viewport_width
+      @crop_selector  = crop_selector
       @user_agent     = user_agent
       @outfile        = outfile
       @url            = url
     end
 
-    # Takes a snapshot of the URL and saves it in the out_file as a PNG image.
+    # Takes a snapshot of the URL and saves it in the outfile as a PNG image.
     #
     # @return [Hash] a hash containing the following keys:
     #   title [String] the <title> of the page being snapshotted
@@ -34,6 +42,7 @@ module Diffux
       opts = {
         address: @url,
         outfile: @outfile,
+        cropSelector: @crop_selector,
         viewportSize: {
           width:  @viewport_width,
           height: @viewport_width,

data/lib/diffux_core/version.rb

@@ -1,4 +1,4 @@
 # Defines the gem version.
 module DiffuxCore
-  VERSION = '0.0.1'
+  VERSION = '0.0.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: diffux-core
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Joe Lencioni
@@ -9,8 +9,22 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-04-27 00:00:00.000000000 Z
+date: 2014-05-03 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
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.3.1
 - !ruby/object:Gem::Dependency
   name: oily_png
   requirement: !ruby/object:Gem::Requirement
@@ -81,6 +95,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 1.0.0
+- !ruby/object:Gem::Dependency
+  name: codeclimate-test-reporter
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Tools for taking and comparing responsive website snapshots
 email:
 - joe.lencioni@causes.com
@@ -95,6 +123,7 @@ files:
 - bin/diffux-snapshot
 - lib/diffux_core.rb
 - lib/diffux_core/diff_cluster_finder.rb
+- lib/diffux_core/script/take-snapshot.js
 - lib/diffux_core/snapshot_comparer.rb
 - lib/diffux_core/snapshot_comparison_image/after.rb
 - lib/diffux_core/snapshot_comparison_image/base.rb
@@ -128,3 +157,4 @@ signing_key:
 specification_version: 4
 summary: Diffux Core
 test_files: []
+has_rdoc: