happo 2.2.1 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cc566abbe483b89e474a285181c8b9fecb5c56c8
-  data.tar.gz: 4562a7960785de93eed8d66012ff583b8385b665
+  metadata.gz: 88d89187e77ba6225483b0018803b72cb3226fc3
+  data.tar.gz: 0dad6cf7d66a3df8b2403c78ff881a065b15dacd
 SHA512:
-  metadata.gz: 6b91a8e431508812db6b92b0f333e98088832a5fe7f2cc6a9f0c33b87cedb865dec0b1eeb2a7fac371e84ac3a700abdbb0bd642778a41a8ae150f397172373ef
-  data.tar.gz: 31cf66c036ddb6cd4986588e200f5f8ab8042d1de74106d923817c83d6ea6ed4c3b29bb96ec4dbf58ab6255ea0b481f1bb7d89f0a2349f2e00ec4cc8fe552160
+  metadata.gz: e377214d9a7d2a1f01cd2b91f5d3b6f89f55c9755f13105b8ac9bf233ec27c690642faf3343e23bdc20b31c7e2e478a0a01660ce140c60dd8d8413c9cc9efd9b
+  data.tar.gz: 5b6ae122c2553cb4e30eee81af44410f76770d4fe7d4d460734e48b33cf95a503661e9ada714c04bcbc455b7284cd462a26605ab5bf45d4d72adc0827d18c48e

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

@@ -1,4 +1,67 @@
 body {
-  background-color: #f0f0f0;
-  font-family: helvetica, arial;
+  background-color: #ebebeb;
+  background-image: linear-gradient(
+    45deg,
+    #f4f4f4 25%,
+    transparent 25%,
+    transparent 75%,
+    #f4f4f4 75%,
+    #f4f4f4
+  ), linear-gradient(
+    45deg,
+    #f4f4f4 25%,
+    transparent 25%,
+    transparent 75%,
+    #f4f4f4 75%,
+    #f4f4f4
+  );
+  background-position: 0 0, 10px 10px;
+  background-size: 20px 20px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+.anchored {
+  color: #000000;
+  text-decoration: none;
+}
+
+.anchored:hover {
+  text-decoration: underline;
+}
+
+.anchored::after {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMy45IDEyYzAtMS43MSAxLjM5LTMuMSAzLjEtMy4xaDRWN0g3Yy0yLjc2IDAtNSAyLjI0LTUgNXMyLjI0IDUgNSA1aDR2LTEuOUg3Yy0xLjcxIDAtMy4xLTEuMzktMy4xLTMuMXpNOCAxM2g4di0ySDh2MnptOS02aC00djEuOWg0YzEuNzEgMCAzLjEgMS4zOSAzLjEgMy4xcy0xLjM5IDMuMS0zLjEgMy4xaC00VjE3aDRjMi43NiAwIDUtMi4yNCA1LTVzLTIuMjQtNS01LTV6Ii8+PC9zdmc+);
+  content: '';
+  display: inline-block;
+  height: 24px;
+  opacity: .2;
+  vertical-align: middle;
+  width: 24px;
+}
+
+.anchored:hover::after {
+  opacity: 1;
+}
+
+.header {
+  align-items: baseline;
+  background-color: #ffffff;
+  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 20px 10px 15px;
+}
+
+.header > :first-child {
+  margin-right: 10px;
+}
+
+.header__title {
+  margin: 0;
+}
+
+.main {
+  padding: 10px;
 }

data/lib/happo/server.rb

@@ -25,8 +25,79 @@ module Happo
     end
 
     get '/review' do
-      @snapshots = Happo::Utils.current_snapshots
-      erb :review
+      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
+      end
+
+      new_images = result_summary[:new_examples].map do |example|
+        file_path = Happo::Utils.path_to(
+          example[:description],
+          example[:viewport],
+          'current.png'
+        )
+        example[:url] = "/resource?file=#{ERB::Util.url_encode(file_path)}"
+        example
+      end
+      erb :diffs, locals: {
+        diff_images: diff_images,
+        new_images: new_images
+      }
+    end
+
+    get '/review-demo' do
+      diff_images = [
+        {
+          description: '<First> with "test"',
+          viewport: 'small',
+          url: 'http://placehold.it/350x150',
+        },
+        {
+          description: '<First> some other \'test\'',
+          viewport: 'medium',
+          url: 'http://placehold.it/550x150',
+        },
+        {
+          description: '<First>',
+          viewport: 'large',
+          url: 'http://placehold.it/850x150',
+        },
+      ]
+
+      new_images = [
+        {
+          description: '<New>',
+          viewport: 'small',
+          url: 'http://placehold.it/350x150',
+        },
+        {
+          description: '<New>',
+          viewport: 'medium',
+          url: 'http://placehold.it/550x150',
+        },
+        {
+          description: '<New>',
+          viewport: 'large',
+          url: 'http://placehold.it/850x150',
+        },
+        {
+          description: '<SomethingElseNew>',
+          viewport: 'small',
+          url: 'http://placehold.it/350x150',
+        },
+      ]
+
+      erb :diffs, locals: {
+        diff_images: diff_images,
+        new_images: new_images
+      }
     end
 
     get '/resource' do

data/lib/happo/uploader.rb

@@ -12,8 +12,7 @@ module Happo
     end
 
     def upload_diffs
-      result_summary = YAML.load(File.read(File.join(
-        Happo::Utils.config['snapshots_folder'], 'result_summary.yaml')))
+      result_summary = Happo::Utils.last_result_summary
 
       return [] if result_summary[:diff_examples].empty? &&
                    result_summary[:new_examples].empty?
@@ -51,7 +50,7 @@ module Happo
 
       html = bucket.objects.build("#{dir}/index.html")
       path = File.expand_path(
-        File.join(File.dirname(__FILE__), 'diffs.html.erb'))
+        File.join(File.dirname(__FILE__), 'views', 'diffs.erb'))
       html.content = ERB.new(File.read(path)).result(binding)
       html.content_type = 'text/html'
       html.save

data/lib/happo/utils.rb

@@ -32,7 +32,11 @@ module Happo
 
     def self.config_from_file
       config_file_name = ENV['HAPPO_CONFIG_FILE'] || '.happo.yaml'
-      YAML.load(ERB.new(File.read(config_file_name)).result)
+      if File.exist?(config_file_name)
+        YAML.load(ERB.new(File.read(config_file_name)).result)
+      else
+        {}
+      end
     end
 
     def self.normalize_description(description)
@@ -57,25 +61,51 @@ module Happo
                       query: query).to_s
     end
 
-    def self.current_snapshots
-      prepare_file = lambda do |file|
-        viewport_dir = File.expand_path('..', file)
-        description_dir = File.expand_path('..', viewport_dir)
-        {
-          description: Base64.decode64(File.basename(description_dir)),
-          viewport: File.basename(viewport_dir).sub('@', ''),
-          file: file
-        }
+    def self.pluralize(count, singular, plural)
+      if count == 1
+        "#{count} #{singular}"
+      else
+        "#{count} #{plural}"
+      end
+    end
+
+    def self.page_title(diff_images, new_images)
+      title = []
+
+      unless diff_images.count == 0
+        title << pluralize(diff_images.count, 'diff', 'diffs')
       end
 
-      snapshots_folder = Happo::Utils.config['snapshots_folder']
-      diff_files = Dir.glob("#{snapshots_folder}/**/diff.png")
-      previous_images = Dir.glob("#{snapshots_folder}/**/previous.png")
+      title << "#{new_images.count} new" unless new_images.count == 0
+
+      "#{title.join(', ')} · Happo"
+    end
+
+    def self.favicon_as_base64
+      favicon = File.expand_path('../public/favicon.ico', __FILE__)
+      "data:image/ico;base64,#{Base64.encode64(File.binread(favicon))}"
+    end
+
+    def self.css_styles
+      File.read(File.expand_path('../public/happo-styles.css', __FILE__))
+    end
+
+    def self.last_result_summary
+      YAML.load(File.read(File.join(
+        self.config['snapshots_folder'], 'result_summary.yaml')))
+    end
+
+    def self.to_inline_slug(string)
+      value = string.gsub(/[^\x00-\x7F]/n, '').to_s
+      value.gsub!(/[']+/, '')
+      value.gsub!(/\W+/, ' ')
+      value.strip!
+      value.tr!(' ', '-')
+      URI.escape(value)
+    end
 
-      {
-        diffs: diff_files.map(&prepare_file),
-        previous_images: previous_images.map(&prepare_file)
-      }
+    def self.image_slug(diff_image)
+      to_inline_slug("#{diff_image[:description]} #{diff_image[:viewport]}")
     end
   end
 end

data/lib/happo/version.rb

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

data/lib/happo/views/debug.erb

@@ -2,28 +2,40 @@
 <html>
   <head>
     <title>Happo Debug Tool</title>
-    <link rel="stylesheet" href="/happo-styles.css"></link>
+
+    <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />
+
+    <style>
+      <%= Happo::Utils.css_styles %>
+    </style>
+
     <script src="/happo-runner.js"></script>
     <% @config['source_files'].each do |source_file| %>
       <script src="/resource?file=<%= ERB::Util.url_encode(source_file) %>"></script>
     <% end %>
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
   </head>
+
   <body>
-    <h1>Happo Debug Tool</h1>
-    <p>Click on an item to render that example in isolation.</p>
-    <script>
-      (function() {
-        var ul = $('<ul>');
-        $('body').append(ul);
-        $.each(happo.defined, function(_, example) {
-          ul.append($('<li>').append(
-            $('<a>', {
-              href: '/?description=' + encodeURIComponent(example.description)
-            }).text(example.description)
-          ));
-        });
-      }());
-    </script>
+    <header class="header">
+      <h1 class="header__title">Happo Debug Tool</h1>
+    </header>
+
+    <main class="main">
+      <p>Click on an item to render that example in isolation.</p>
+      <script>
+        (function() {
+          var ul = $('<ul>');
+          $('main').append(ul);
+          $.each(happo.defined, function(_, example) {
+            ul.append($('<li>').append(
+              $('<a>', {
+                href: '/?debug=true&description=' + encodeURIComponent(example.description)
+              }).text(example.description)
+            ));
+          });
+        }());
+      </script>
+    </main>
   </body>
 </html>

data/lib/happo/views/diffs.erb

@@ -0,0 +1,61 @@
+<% require 'rack' %>
+<% require 'happo' %>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= Happo::Utils.page_title(diff_images, new_images) %></title>
+
+    <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />
+
+    <style>
+      <%= Happo::Utils.css_styles %>
+    </style>
+  </head>
+
+  <body>
+    <header class="header">
+      <h1 class="header_title">
+        <%= Happo::Utils.page_title(diff_images, new_images) %>
+      </h1>
+      <div class="header__time">Generated: <%= Time.now %></div>
+    </header>
+
+    <main class="main">
+      <% if diff_images.count > 0%>
+        <h2 id="diffs">
+          <a class="anchored" href="#diffs">
+            Diffs (<%= diff_images.count %>)
+          </a>
+        </h2>
+
+        <% diff_images.each do |image| %>
+          <h3 id="<%= Happo::Utils.image_slug(image) %>">
+            <a class="anchored" href="#<%= Happo::Utils.image_slug(image) %>">
+              <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
+            </a>
+          </h3>
+
+          <img src="<%= image[:url] %>">
+        <% end %>
+      <% end %>
+
+      <% if new_images.count > 0%>
+        <h2 id="new">
+          <a class="anchored" href="#new">
+            New examples (<%= new_images.count %>)
+          </a>
+        </h2>
+
+        <% new_images.each do |image| %>
+          <h3 id="<%= Happo::Utils.image_slug(image) %>">
+            <a class="anchored" href="#<%= Happo::Utils.image_slug(image) %>">
+              <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
+            </a>
+          </h3>
+
+          <img src="<%= image[:url] %>">
+        <% end %>
+      <% end %>
+    </main>
+  </body>
+</html>

data/lib/happo/views/index.erb

@@ -2,6 +2,9 @@
 <html>
   <head>
     <title>Happo</title>
+
+    <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />
+
     <style type="text/css">
       * {
         -webkit-transition: none !important;
@@ -11,17 +14,32 @@
         -moz-animation-duration: 0s !important;
         animation-duration: 0s !important;
       }
+
+      body {
+        background-color: #fff;
+        margin: 0;
+        <% unless params[:debug] %>
+          /*
+            We disable pointer events to prevent spurious diffs happening as a
+            result of an accidental mouse hover (or click) in the browser
+            window where happo is running.
+           */
+          pointer-events: none;
+        <% end %>
+      }
     </style>
 
     <% @config['stylesheets'].each do |stylesheet| %>
       <link rel="stylesheet" type="text/css"
         href="/resource?file=<%= ERB::Util.url_encode(stylesheet) %>">
     <% end %>
+
     <script src="/happo-runner.js"></script>
     <% @config['source_files'].each do |source_file| %>
       <script src="/resource?file=<%= ERB::Util.url_encode(source_file) %>"></script>
     <% end %>
   </head>
-  <body style="background-color: #fff; margin: 0; pointer-events: none;">
+
+  <body>
   </body>
 </html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: happo
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.3.0
 platform: ruby
 authors:
 - Henric Trotzig
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-08-18 00:00:00.000000000 Z
+date: 2016-08-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: chunky_png
@@ -144,8 +144,8 @@ extra_rdoc_files: []
 files:
 - bin/happo
 - lib/happo.rb
-- lib/happo/diffs.html.erb
 - lib/happo/logger.rb
+- lib/happo/public/favicon.ico
 - lib/happo/public/happo-runner.js
 - lib/happo/public/happo-styles.css
 - lib/happo/runner.rb
@@ -160,8 +160,8 @@ files:
 - lib/happo/utils.rb
 - lib/happo/version.rb
 - lib/happo/views/debug.erb
+- lib/happo/views/diffs.erb
 - lib/happo/views/index.erb
-- lib/happo/views/review.erb
 homepage: http://rubygems.org/gems/happo
 licenses:
 - MIT
@@ -182,7 +182,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5.1
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: Happo

data/lib/happo/diffs.html.erb

@@ -1,29 +0,0 @@
-<% require 'rack' %>
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Happo diffs</title>
-  </head>
-  <body>
-    <h1>Happo diffs</h1>
-    <p>File generated: <%= Time.now %></p>
-
-    <h2>Diffs</h2>
-    <% diff_images.each do |diff| %>
-      <h3>
-        <%= Rack::Utils.escape_html(diff[:description]) %> @ <%= diff[:viewport] %>
-      </h3>
-      <p><img src="<%= diff[:url] %>"></p>
-    <% end %>
-
-    <hr>
-
-    <h2>New examples</h2>
-    <% new_images.each do |image| %>
-      <h3>
-        <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
-      </h3>
-      <p><img src="<%= image[:url] %>"></p>
-    <% end %>
-  </body>
-</html>

data/lib/happo/views/review.erb

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Happo Review Tool</title>
-    <link rel="stylesheet" href="/happo-styles.css"></link>
-  </head>
-  <body>
-    <h1>Happo Review Tool</h1>
-    <h2>DIFFS</h2>
-    <% @snapshots[:diffs].each do |diff| %>
-      <h3>
-        <%= h diff[:description] %> @ <%= diff[:viewport] %>
-      </h3>
-      <p><img src="/resource?file=<%= ERB::Util.url_encode(diff[:file]) %>"></p>
-    <% end %>
-
-    <hr>
-
-    <h2>PREVIOUS</h2>
-    <% @snapshots[:previous_images].each do |previous_image| %>
-      <h3>
-        <%= h previous_image[:description] %> @ <%= previous_image[:viewport] %>
-      </h3>
-      <p><img src="/resource?file=<%= ERB::Util.url_encode(previous_image[:file]) %>"></p>
-    <% end %>
-  </body>
-</html>