blinkr 0.2.9 → 0.3.0

data/lib/blinkr/extensions/meta.rb

@@ -1,3 +1,4 @@
+require 'blinkr/error'
 require 'ostruct'
 require 'slim'
 
@@ -38,18 +39,30 @@ module Blinkr
             lines << elm.line
             snippets << elm.to_s
           end
-          page.errors << OpenStruct.new({ :severity => 'info', :category => 'HTML Compatibility/Correctness', :type => '<title> tag declared more than once',  :title => %Q{<title> declared more than once (lines #{lines.join(', ')})}, :message => %Q{<title> declared more than onc}, :snippet => snippets.join('\n'), :icon => 'fa-header' })
+          page.errors << Blinkr::Error.new({:severity => :info, :category => 'HTML Compatibility/Correctness',
+                                            :type => '<title> tag declared more than once',
+                                            :title => %Q{<title> declared more than once (lines #{lines.join(', ')})},
+                                            :message => %Q{<title> declared more than onc},
+                                            :snippet => snippets.join('\n'), :icon => 'fa-header'})
         elsif elms.empty?
-          page.errors << OpenStruct.new({ :severity => 'warning', :category => 'SEO', :type => '<title> tag missing',  :title => %Q{<title> tag missing}, :message => %Q{<title> tag missing}, :icon => 'fa-header' })
+          page.errors << Blinkr::Error.new({:severity => :warning, :category => 'SEO', :type => '<title> tag missing',
+                                            :title => %Q{<title> tag missing}, :message => %Q{<title> tag missing},
+                                            :icon => 'fa-header'})
         else
           title = elms.first.text
           @titles[title] ||= {}
           @titles[title][page.response.effective_url] = page
           if title.length < 20
-            page.errors << OpenStruct.new({ :severity => 'info', :category => 'SEO', :type => 'page title too short',  :title => %Q{<title> too short (line #{elms.first.line})}, :message => %Q{<title> too short (< 20 characters)}, :snippet => elms.first.to_s, :icon => 'fa-header' })
+            page.errors << Blinkr::Error.new({:severity => :info, :category => 'SEO', :type => 'page title too short',
+                                              :title => %Q{<title> too short (line #{elms.first.line})},
+                                              :message => %Q{<title> too short (< 20 characters)},
+                                              :snippet => elms.first.to_s, :icon => 'fa-header'})
           end
           if title.length > 55
-            page.errors << OpenStruct.new({ :severity => 'info', :category => 'SEO', :type => 'page title too long',  :title => %Q{<title> too long (line #{elms.first.line})}, :message => %Q{<title> too long (> 55 characters)}, :snippet => elms.first.to_s, :icon => 'fa-header' })
+            page.errors << Blinkr::Error.new({:severity => :info, :category => 'SEO', :type => 'page title too long',
+                                              :title => %Q{<title> too long (line #{elms.first.line})},
+                                              :message => %Q{<title> too long (> 55 characters)},
+                                              :snippet => elms.first.to_s, :icon => 'fa-header'})
           end
         end
       end
@@ -63,18 +76,34 @@ module Blinkr
             lines << elm.line
             snippets << elm.to_s
           end
-          page.errors << OpenStruct.new({ :severity => 'info', :category => 'HTML Compatibility/Correctness', :type => '<meta name="description"> tag declared more than once',  :title => %Q{<meta name="description"> tag declared more than once (lines #{lines.join(', ')})}, :message => %Q{<meta name="description"> tag declared more than once}, :snippet => snippets.join('\n'), :icon => 'fa-header' })
+          page.errors << Blinkr::Error.new({:severity => :info, :category => 'HTML Compatibility/Correctness',
+                                            :type => '<meta name="description"> tag declared more than once',
+                                            :title => %Q{<meta name="description"> tag declared more than once (lines #{lines.join(', ')})},
+                                            :message => %Q{<meta name="description"> tag declared more than once},
+                                            :snippet => snippets.join('\n'), :icon => 'fa-header'})
         elsif elms.empty?
-          page.errors << OpenStruct.new({ :severity => 'info', :category => 'SEO', :type => '<meta name="description"> tag missing',  :title => %Q{<meta name="description"> tag missing}, :message => %Q{<meta name="description"> tag missing}, :icon => 'fa-header' })
+          page.errors << Blinkr::Error.new({:severity => :info, :category => 'SEO',
+                                            :type => '<meta name="description"> tag missing',
+                                            :title => %Q{<meta name="description"> tag missing},
+                                            :message => %Q{<meta name="description"> tag missing},
+                                            :icon => 'fa-header'})
         else
           desc = elms.first['content']
           @descriptions[desc] ||= {}
           @descriptions[desc][page.response.effective_url] = page
           if desc.length < 60
-            page.errors << OpenStruct.new({ :severity => 'info', :category => 'SEO', :type => '<meta name="description"> too short',  :title => %Q{<meta name="description"> too short (lines #{elms.first.line})}, :message => %Q{<meta name="description"> too short (< 60 characters)}, :snippet => elms.first.to_s, :icon => 'fa-header' })
+            page.errors << Blinkr::Error.new({:severity => :info, :category => 'SEO',
+                                              :type => '<meta name="description"> too short',
+                                              :title => %Q{<meta name="description"> too short (lines #{elms.first.line})},
+                                              :message => %Q{<meta name="description"> too short (< 60 characters)},
+                                              :snippet => elms.first.to_s, :icon => 'fa-header'})
           end
           if desc.length > 115
-            page.errors << OpenStruct.new({ :severity => 'info', :category => 'SEO', :type => '<meta name="description"> too long',  :title => %Q{<meta name="description"> too long (lines #{elms.first.line})}, :message => %Q{<meta name="description"> too long (> 115 characters)}, :snippet => elms.first.to_s, :icon => 'fa-header' })
+            page.errors << Blinkr::Error.new({:severity => :info, :category => 'SEO',
+                                              :type => '<meta name="description"> too long',
+                                              :title => %Q{<meta name="description"> too long (lines #{elms.first.line})},
+                                              :message => %Q{<meta name="description"> too long (> 115 characters)},
+                                              :snippet => elms.first.to_s, :icon => 'fa-header'})
           end
         end
       end

data/lib/blinkr/extensions/resources.rb

@@ -1,3 +1,5 @@
+require 'blinkr/error'
+
 module Blinkr
   module Extensions
     class Resources
@@ -11,7 +13,9 @@ module Blinkr
           start = error['errorString'].rindex('server replied: ')
           message = error['errorString'].slice(start.nil? ? 0 : start + 16, error['errorString'].length) unless error['errorString'].nil?
           code = error['errorCode'].nil? ? nil : error['errorCode'].to_i
-          page.errors << OpenStruct.new({ :severity => 'danger', :category => 'Resources missing', :type => 'Resource loading error', :title => error['url'], :code => code, :message => message, :icon => 'fa-file-image-o' })
+          page.errors << Blinkr::Error.new(:severity => 'danger', :category => 'Resources missing',
+                                           :type => 'Resource loading error', :title => error['url'],
+                                           :code => code, :message => message, :icon => 'fa-file-image-o')
         end
       end
 

data/lib/blinkr/hacks.rb

@@ -0,0 +1,20 @@
+class Numeric
+  def duration
+    rest, secs = self.divmod( 60 )  # self is the time difference t2 - t1
+    rest, mins = rest.divmod( 60 )
+    days, hours = rest.divmod( 24 )
+
+    # the above can be factored out as:
+    # days, hours, mins, secs = self.duration_as_arr
+    #
+    # this is not so great, because it could include zero values:
+    # self.duration_as_arr.zip ['Days','Hours','Minutes','Seconds']).flatten.join ' '
+
+    result = []
+    result << "#{days} Days" if days > 0
+    result << "#{hours} Hours" if hours > 0
+    result << "#{mins} Minutes" if mins > 0
+    result << "#{secs} Seconds" if secs > 0
+    return result.join(' ')
+  end
+end

data/lib/blinkr/http_utils.rb

@@ -2,13 +2,15 @@ require 'uri'
 
 module Blinkr
   module HttpUtils
-    
-    def sanitize dest, src
+
+    def sanitize(dest, src)
+      return nil if (dest.nil? || src.nil?)
+
       # src is the page that tried to load the URL
       # URI fails to handle #! style fragments, so we chomp them
       src = src[0, src.rindex('#!')] unless src.rindex('#!').nil?
       src_uri = URI(src)
-      
+
       # Remove the query and fragment from the SRC URI, as we are going to use it to resolve the relative dest URIs
       src_uri.query = nil
       src_uri.fragment = nil
@@ -23,13 +25,16 @@ module Blinkr
         dest_uri.fragment = nil if @config.ignore_fragments
 
         # If we have a relative URI, or just a fragment, join what we have to our base URL
-        dest_uri = URI.join(src_uri, dest) if ( empty?(dest_uri.path) && !empty?(dest_uri.fragment ) ) || dest_uri.relative?
+        dest_uri = URI.join(src_uri, dest) if (empty?(dest_uri.path) && !empty?(dest_uri.fragment)) || dest_uri.relative?
 
         # If we have an absolute path URI, join it to the base URL
         dest_uri = URI.join(base_uri.scheme, base_uri.hostname, base_uri.port, dest_uri) if empty?(dest_uri.scheme) && empty?(dest_uri.hostname)
-      
+
         dest = dest_uri.to_s
       rescue URI::InvalidURIError, URI::InvalidComponentError, URI::BadURIError
+        # ignored
+      rescue StandardError
+        return nil
       end
       dest.chomp('#').chomp('index.html')
     end

data/lib/blinkr/manticore_wrapper.rb

@@ -0,0 +1,59 @@
+require 'manticore'
+require 'blinkr/cache'
+require 'blinkr/http_utils'
+
+module Blinker
+  class ManticoreWrapper
+    include HttpUtils
+
+    attr_reader count
+
+    def initialize(config, context)
+      @config = config.validate
+      @client = Manticore::Client.new({:pool_max => (@config.maxconnects || 50),
+                                       :pool_max_per_route => 10
+                                      })
+      @count = 0
+      @context = context
+    end
+
+    def process_all(urls, limit, opts = {}, &block)
+      urls.each do |url|
+        process url, limit, opts, &block
+      end
+      @client.execute!
+    end
+
+    def process(url, limit, opts = {}, &block)
+      _process url, limit, limit, opts, &block
+    end
+
+    def name
+      'manticore'
+    end
+
+    private
+
+    def _process(url, limit, max, opts = {}, &block)
+      unless @config.skipped? url
+        resp = @client.async.get(url)
+        resp.on_complete do |resp|
+          if retry? resp
+            if limit > 1
+              puts "Loading #{url} via manticore (attempt #{max - limit + 2} of #{max})" if @config.verbose
+              _process(url, limit - 1, max, &Proc.new)
+            else
+              puts "Loading #{url} via manticore failed" if @config.verbose
+              response = @client.respond_with(:code => 0, :status_message => "Server timed out after #{max} retries",
+                                              :body => '').get(url)
+              block.call response, nil, nil
+            end
+          else
+            block.call resp, nil, nil
+          end
+          @count += 1
+        end
+      end
+    end
+  end
+end

data/lib/blinkr/phantomjs_wrapper.rb

@@ -2,9 +2,9 @@ require 'typhoeus'
 require 'ostruct'
 require 'tempfile'
 require 'blinkr/http_utils'
+require 'blinkr/cache'
 require 'parallel'
 
-
 module Blinkr
   class PhantomJSWrapper 
     include HttpUtils
@@ -17,16 +17,17 @@ module Blinkr
       @config = config.validate
       @context = context
       @count = 0
+      @cache = Blinkr::Cache.new
     end
 
-    def process_all urls, limit, &block
-      Parallel.each(urls, :in_threads => @config.phantomjs_threads) do |url|
-        process url, limit, &block
+    def process_all urls, limit, opts = {}, &block
+      Parallel.each(urls, :in_threads => (@config.phantomjs_threads || Parallel.processor_count * 2)) do |url|
+        process url, limit, opts, &block
       end
     end
 
-    def process url, limit, &block
-      _process url, limit, limit, &block
+    def process url, limit, opts = {}, &block
+      _process url, limit, limit, opts, &block
     end
 
     def name
@@ -35,15 +36,25 @@ module Blinkr
 
     private
 
-    def _process url, limit, max, &block
+    def _process url, limit, max, opts = {}, &block
       raise "limit must be set. url: #{url}, limit: #{limit}, max: #{max}" if limit.nil?
       unless @config.skipped? url
         Tempfile.open('blinkr') do|f|
+          # Try and sidestep any unnecessary requests by checking the cache
+          request = Typhoeus::Request.new(url)
+          if @cache.get(request)
+            return block.call response, @cache.get("#{url}-resourceErrors"), @cache.get("#{url}-javascriptErrors")
+          end
+
           if system "phantomjs #{SNAP_JS} #{url} #{@config.viewport} #{f.path}"
             json = JSON.load(File.read(f.path))
-            response = Typhoeus::Response.new(code: 200, body: json['content'], effective_url: json['url'], mock: true)
+            response = Typhoeus::Response.new(:code => 200, :body => json['content'], :effective_url => json['url'],
+                                              :mock => true)
             response.request = Typhoeus::Request.new(url)
             Typhoeus.stub(url).and_return(response)
+            @cache.set(response.request, response)
+            @cache.set("#{url}-resourceErrors", json['resourceErrors'])
+            @cache.set("#{url}-javascriptErrors", json['javascriptErrors'])
             block.call response, json['resourceErrors'], json['javascriptErrors']
           else
             if limit > 1
@@ -51,9 +62,11 @@ module Blinkr
               _process url, limit - 1, max, &block
             else
               puts "Loading #{url} via phantomjs failed" if @config.verbose
-              response = Typhoeus::Response.new(code: 0, status_message: "Server timed out after #{max} retries", mock: true)
+              response = Typhoeus::Response.new(:code => 0, :status_message => "Server timed out after #{max} retries",
+                                                :mock => true)
               response.request = Typhoeus::Request.new(url)
               Typhoeus.stub(url).and_return(response)
+              @cache.set(response.request, response)
               block.call response, nil, nil
             end
           end

data/lib/blinkr/report.html.slim

@@ -1,238 +1,214 @@
-doctype html 
-head
-  link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
-  script src="http://code.jquery.com/jquery-1.11.0.min.js"
-  script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
-  link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"
-  meta name="viewport" content="width=device-width, initial-scale=1"
-  title Blinkr
-body
-
-  .container
-    .row
-      h1 Blinkr
-      p.lead Blackbox testing for websites
-
-      h2 
-        | Pages
-        .label.label-primary.pull-right = blinkr.error_count
-      .panel.panel-default
-        .panel-heading
-          h4
-            a> data-toggle="collapse" href="#filters" id="control-filters"
-              i.fa.fa-caret-square-o-down
-            | Filters
-        .panel-collapse.collapse.in#filters
-          .panel-body
-            form.row
-              .col-md-4#severities
-                .panel.panel-default
-                  .panel-heading
-                    .checkbox
-                      label
-                        input.severities type="checkbox" value="severities" onchange="severities()" checked="true"
-                        | Severity
-                      .label.label-primary< = blinkr.error_count
-                  .panel-body
-                    - blinkr.severities.each do |severity, metadata|
+doctype html
+html[ng-app="blinkr"]
+  head
+    meta[http-equiv="Content-Type" content="text/html; charset=UTF-8"]
+    link[href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"]
+    link[href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"]
+    title
+      | Blinkr
+    meta[content="width=device-width, initial-scale=1" name="viewport"]
+  body
+    div[ng-controller="ErrorCtrl"]
+      .container
+        h1
+          | Blinkr
+        p.lead
+          | Blackbox testing for websites
+        h2
+          ' Pages
+          .label.label-default>
+            | {{numPages}}
+          ' Errors
+          .label.label-default
+            | {{report.total}}
+        .panel.panel-default
+          .panel-heading
+            h4
+              a#control-filters[data-toggle="collapse" href="#filters"]
+                i.fa.fa-caret-square-o-down
+              |  Filters
+          #filters.panel-collapse.collapse.in
+            .panel-body
+              form.row
+                #severities.col-md-2
+                  .panel.panel-default
+                    .panel-heading
                       .checkbox
                         label
-                          input.severity type="checkbox" value="severity-#{metadata.id}" onchange="updateSeverities(); filter()" checked="true"
-                          | #{severity.capitalize}
-                        div< class="label label-#{severity}" = metadata.count
-              .col-md-8#types style="padding-left:20px; border-left: 1px solid #ccc;"
-                .row
-                  - blinkr.categories.each do |category, metadata|
-                    .col-md-6
+                          ' Severity
+                    .panel-body[ng-repeat="(key, value) in filters.severities"]
+                      .checkbox
+                        label>
+                          input.type>[ng-model="filters.severities[key].enabled" type="checkbox"]
+                          ' {{key}}
+                        div[class="label label-{{key}}"]
+                          ' {{value.count}}
+                #category.col-md-5[style="padding-left:20px; border-left: 1px solid #ccc;"]
+                  .row
+                    .col-md-12
                       .panel.panel-default
                         .panel-heading
                           .checkbox
                             label
-                              input.category type="checkbox" value="category-#{metadata.id}" onchange="category()" checked="true"
-                              | #{category}
-                            - metadata.severities.each do |severity, count|
-                              div< class="label label-#{severity}" = count
-                        .panel-body
-                          - metadata.types.each do |type, type_metadata|
-                            .checkbox
-                              label
-                                input.type type="checkbox" value="type-#{metadata.id}-#{type_metadata.id}" onchange="updateCategory(); filter();" checked="true" data-category="category-#{metadata.id}"
-                                | #{type}
-                              - type_metadata.severities.each do |severity, count|
-                                div< class="label label-#{severity}" = count
-      javascript:
-        $('#filters').on('show.bs.collapse', function () {
-          $('a#control-filters').html('<i class="fa fa-caret-square-o-down"></i>');
-        });
-        $('#filters').on('hide.bs.collapse', function () {
-          $('a#control-filters').html('<i class="fa fa-caret-square-o-right"></i>');
-        });
-      .spinner.center-block style="padding-top: 2em"
-        img src="http://static.jboss.org/www/images/_images_icons_ajax-loader-8.gif"
-      javascript:
-        $( '.spinner' ).hide();
-      #pages
-        - blinkr.pages.each_with_index do |(url, page), index|
-
-          div class="page panel panel-#{page.max_severity}"
+                              ' Category
+                        .panel-body[ng-repeat="(key, value) in filters.categories"]
+                          .checkbox
+                            label>
+                              input.type[ng-model="filters.categories[key].enabled" type="checkbox"]
+                              ' {{key}}
+                            .label.label-default
+                              | {{value.count}}
+                #types.col-md-5[style="padding-left:20px; border-left: 1px solid #ccc;"]
+                  .row
+                    .col-md-12
+                      .panel.panel-default
+                        .panel-heading
+                          .checkbox
+                            label>
+                              ' Type
+                        .panel-body[ng-repeat="(key, value) in filters.types"]
+                          .checkbox
+                            label>
+                              input.type[ng-model="filters.types[key].enabled" type="checkbox"]
+                              | {{key}}
+                            .label.label-default
+                              | {{value.count}}
+        .page[ng-repeat="(url,page) in report.pages | showPage:filters"]
+          div[class="panel panel-{{page.max_severity}}"]
             .panel-heading
-              a> data-toggle="collapse" href="#p-#{index}" id="control-p-#{index}"
-                i.fa.fa-caret-square-o-right>
-              ' #{url}
-              a> href="#{url}" target='_blank'
-                i.fa.fa-external-link
-              a href="view-source:#{url}" target='_blank'
-                i.fa.fa-file-code-o
-            .panel-body.collapse id="p-#{index}"
-              ul.list-group
-              - page.errors.each do |error|
-                == engine.transform page, error do
-                  li.list-group-item.error data-ids="type-#{blinkr.categories[error.category].id}-#{blinkr.categories[error.category].types[error.type].id} severity-#{error.severity} category-#{blinkr.categories[error.category].id}"
-                    - unless error.icon.nil?
-                      i class="fa fa-2x #{error.icon} pull-left"
-                    - unless error.code.nil? && error.message.nil?
-                      div class="pull-right label label-#{error.severity}"
-                        - unless error.code.nil?
-                          ' #{error.code}
-                        - unless error.message.nil?
-                          | #{error.message}
-                    div
-                      ' #{error.title}
-                      - if error.url
-                        a href="#{error.url}" target='_blank'
-                          i.fa.fa-external-link
-                      - if error.detail
-                        p= error.detail
-                    - if error.snippet
-                      pre #{error.snippet}
-            javascript:
-              $('#p-#{index}').on('show.bs.collapse', function () {
-                $('a#control-p-#{index}').html('<i class="fa fa-caret-square-o-down"></i>');
-              });
-              $('#p-#{index}').on('hide.bs.collapse', function () {
-                $('a#control-p-#{index}').html('<i class="fa fa-caret-square-o-right"></i>');
-              });
-
-      - if blinkr.pages.length == 0
-        .panel.panel-success
-          .panel-heading
-            a id='resources'
-            | No errors detected
+              .panel-title
+                ul.list-inline
+                  li
+                    a>[data-toggle="collapse" href="#"]
+                      i.fa.fa-caret-square-o-right
+                    | {{url}} ({{page.errors.length}} total errors)
+                  li
+                    a[href="{{url}}" target="_blank"]
+                      i.fa.fa-external-link
+                  li
+                    a[href="{{url}}" target="_blank"]
+                      i.fa.fa-file-code-o
+            .panel-body.collapse.panel-collapse
+              ul
+                li.list-group-item.error[ng-repeat="(i,page_error) in page.errors | displayError:filters"]
+                  i.fa.fa-2x.fa-bookmark-o.pull-left
+                  div[class="pull-right label label-{{page_error.severity}}"]
+                    | {{page_error.code}} {{page_error.message}}
+                  div
+                    ' {{page_error.title}}
+                    a[href="{{page_error.title}}" target="_blank"]
+                      i.fa.fa-external-link
+                  pre
+                    | {{page_error.snippet}}
+    script[src="http://code.jquery.com/jquery-2.1.4.min.js"]
+    script[src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"]
+    script[src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"]
+    javascript:
+      var blinkr = angular.module('blinkr', []);
+      blinkr.factory('report', function reportFactory() {
+        return #{{errors}};
+      });
 
-      - engine.append(blinkr).each do |result|
-        == result
+      blinkr.controller("ErrorCtrl", ['$scope', 'report', function ($scope, report) {
+        $scope.report = report;
+        $scope.filters = {severities: {}, categories: {}, types: {}};
+        $scope.report = report;
+        $scope.numPages = Object.keys(report.pages).length;
+        window.scope = $scope;
 
-  javascript:
-    $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
+        Object.keys($scope.report.severity).forEach(function (s) {
+          $scope.filters.severities[s] = {enabled: false, count: report.severity[s].count};
+        });
 
-    function category() {
-      $( "#filters #types input.category[type=checkbox]" ).each( function() {
-        var category = $( this ).val();
-        var checked = $( this ).prop("checked");
-        $( "#filters #types input.type[type=checkbox][data-category=" + category + "]" ).each( function() {
-          $( this ).prop( "checked", checked );
+        Object.keys($scope.report.category).forEach(function (c) {
+          $scope.filters.categories[c] = {enabled: false, count: report.category[c].count};
         });
-      });
-      filter();
-    }
 
-    function severities() {
-      $( "#filters #severities input.severities[type=checkbox]" ).each( function() {
-        var checked = $( this ).prop("checked");
-        $( "#filters #severities input.severity[type=checkbox]" ).each( function() {
-          $( this ).prop( "checked", checked );
+        Object.keys($scope.report.type).forEach(function (t) {
+          $scope.filters.types[t] = {enabled: false, count: report.type[t].count};
         });
+      }]);
+
+      blinkr.filter('displayError', function () {
+        return function (errors, filters) {
+          var returned_errors = [];
+          errors.forEach(function (error) {
+            if (showError(error, filters)) {
+              returned_errors.push(error);
+            }
+          });
+          panelBind();
+          return returned_errors;
+        }
       });
-      filter();
-    }
 
-    function updateCategory() {
-      $( "#filters #types input.category[type=checkbox]" ).each( function() {
-        var category = $( this ).val();
-        var checked = 0;
-        var unchecked = 0;
-        $( "#filters #types input.type[type=checkbox][data-category=" + category + "]" ).each( function() {
-          if ( $( this ).prop( "checked" ) ) {
-            checked++;
-          } else {
-            unchecked++;
-          }
-        });
-        if (unchecked == 0) {
-          $( this ).prop( "checked", true );
-        } else {
-          $( this ).prop( "checked", false );
+      blinkr.filter('showPage', function () {
+        return function (all_pages, filters) {
+          var pages = {};
+          Object.keys(all_pages).forEach(function (url) {
+            var page = all_pages[url];
+            page.errors.forEach(function (error) {
+              if (showError(error, filters)) {
+                pages[url] = all_pages[url];
+              }
+            });
+          });
+          return pages;
         }
       });
-    }
 
-    function updateSeverities() {
-      $( "#filters #severities input.severities[type=checkbox]" ).each( function() {
-        var checked = 0;
-        var unchecked = 0;
-        $( "#filters #severities input.severity[type=checkbox]" ).each( function() {
-          if ( $( this ).prop( "checked" ) ) {
-            checked++;
-          } else {
-            unchecked++;
+      function enabledFilters(filters, filterName) {
+        var enabled = [];
+        Object.keys(filters[filterName]).forEach(function (f) {
+          if (filters[filterName][f].enabled) {
+            enabled.push(f);
           }
         });
-        if (unchecked == 0) {
-          $( this ).prop( "checked", true );
-        } else {
-          $( this ).prop( "checked", false );
-        }
-      });
-    }
+        return enabled;
+      }
 
-    function filter() {
-      $( ".pages" ).hide();
-      $( ".spinner" ).show();
-      var selectedTypes = [];
-      var selectedSeverities = [];
-      $( "#filters #severities input[type=checkbox]" ).each( function() {
-        if ( $( this ).prop( "checked" ) ) {
-          selectedSeverities.push( $( this ).val() );
-        }
-      });
-      $( "#filters #types input.type[type=checkbox]" ).each( function() {
-        if ( $( this ).prop( "checked" ) ) {
-          selectedTypes.push( $( this ).val() );
+      function showError(error, filters) {
+        var categories = enabledFilters(filters, 'categories'),
+                severities = enabledFilters(filters, 'severities'),
+                types = enabledFilters(filters, 'types'),
+                possibleReturn = false;
+
+        if (categories.length > 0 && categories.indexOf(error.category) > -1) {
+          possibleReturn = true;
         }
-      });
-      $( "#pages .page" ).each( function() {
-        var count = 0;
-        $( "li.error[data-ids]", this ).each( function() {
-          var showType = false;
-          var showSeverity = false;
-          var ids = $( this ).attr("data-ids");
-          for (i = 0; i < selectedTypes.length; i++) {
-            if (ids.indexOf(selectedTypes[i]) >= 0) {
-              showType = true;
-              continue;
-            }
+
+        if (possibleReturn) {
+          if (severities.length > 0) {
+            possibleReturn = severities.indexOf(error.severity) > -1;
           }
-          for (i = 0; i < selectedSeverities.length; i++) {
-            if (ids.indexOf(selectedSeverities[i]) >= 0) {
-              showSeverity = true;
-              continue;
-            }
+        } else {
+          if (severities.length > 0) {
+            possibleReturn = severities.indexOf(error.severity) > -1;
           }
-          if (showSeverity && showType) {
-            $( this ).show();
-            count++;
-          } else {
-            $( this ).hide();
+        }
+
+        if (possibleReturn) {
+          if (types.length > 0) {
+            possibleReturn = !!(types.length > 0 && types.indexOf(error.type) > -1);
           }
-        });
-        if (count == 0) {
-          $( this ).hide();
         } else {
-          $( this ).show();
+          if (types.length > 0) {
+            possibleReturn = !!(types.length > 0 && types.indexOf(error.type) > -1);
+          }
         }
-      });
-      $( ".pages" ).show();
-      $( ".spinner" ).hide();
-    }
 
-    
+        return possibleReturn;
+      }
+
+      window.panelBind = function () {
+        $('.panel-title').find('a[data-toggle=collapse]').on('click', function (e) {
+          e.preventDefault();
+          var target = $(this).parents('.panel').find('.panel-collapse');
+          target.collapse('toggle');
+        });
+        $('.page').find('panel-collapse').collapse({toggle: false});
+      };
+
+      angular.element(document).ready(function () {
+        panelBind();
+      });