view_inspect 0.3.5 → 0.3.6

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    MGRmOTVlYTY1Mjk4MjU1MmZkYmQwNDU0NWQ0NTM4ZmRmZGI3NzdhZA==
+    MzRkNWEzMjNkY2JjOGVmZTZjNmY5MzhhN2VlNjZiYWYwMzhlOGYxMg==
   data.tar.gz: !binary |-
-    OTFhNWVkNTBkOWY1OTlmODQ5ZGExZjk0MmZjYmMzZDkyNDI1NjRjOA==
+    MzE0M2E2NzRmN2M4MzMwN2RmN2FhNTU4NTI0OTc4NTUxYmUzYTljZA==
 SHA512:
   metadata.gz: !binary |-
-    MDY2ZjY5NzA2MThhZGNmMDcwZTBmNDcyYmUwNmMzMjAwODFiYWUzMTAyNTg1
-    NWIwZjQyYmNlNzljNGZlMTVmMTY4YjIwZmFlZTcwZGEwMDliN2ZkYjc1YjI5
-    Y2JkNDhjOTk0MWE2NzMyOTFlN2I0MDY5YzNhZDIyODc2ZTQwNzc=
+    OGNlMGU4MTE0ZDViMmU4NDYxM2RlZDUxZTJhN2M4OTM2ZjdlMjFmYjY2NzMy
+    YmY0NjI1NGRkNjhiNDgzMGFlMTdlMjNkNGU5MjNhYWI5NTdmMTBhNGIwZGY0
+    Y2Q3MmE1ZWE0ZTZkNTA5NTg0MDU3ZWZhY2IxZDZiNzU3ODljNDU=
   data.tar.gz: !binary |-
-    NGQ1ZDZhODc5NjBkY2RlNTcwOGMzNDAzMGIyNTA4ZTFjYzYzYzllOGE3MGI5
-    MDMzNDcwYTkwMmRkYTI4MmMzZTQ4OTY3NzI3Y2E2NGNiMGU1Mzg4Njk4YzQ1
-    N2Y0YmM0OGNmNmI4ZDc0YTJlYmNjZjczZWZlZjVlM2U0NTVkNTI=
+    M2I1MzgxZGU5OTllM2UwMGYyNWVkZDQyZmUxZmM5NDA0OWI1NGU4ODQ5Njg3
+    ZGJiNmU5NDkyZjViODc1ZmE4OTcyYjRjMmY0Y2FiODMwNmE3NzY2ODk5N2Vk
+    Y2E1YTRhMWU2OWQ5MmVlYWFmYTE1YTkzNWI3YWJiZTdiN2NlZjQ=

data/README.markdown

@@ -3,8 +3,6 @@ View Inspect
 
 View Inspect tells you which server-side or client-side template is responsible for rendering a DOM element. Instead of using grep to filter through a large codebase, the source location can be found right away in its data-attribute when you open up web inspector. Works with Rails 3 and 4. See below for templates supported and their required libraries.
 
-Source location is added by first stubbing out all template specific expressions (i.e. `<% %>` for erb). Nokogiri parses the resulting valid HTML fragment and adds file:line information to each DOM node. After which stubs are replaced back with original template expressions.
-
 Demo
 ----
 - [Diaspora:   Haml + Backbone.js](https://i.imgur.com/bhK6lap.png)
@@ -37,6 +35,12 @@ By default, this is only enabled for development to avoid exposing source code f
 
     ViewInspect.disable = true
 
+How it Works
+----
+
+Except for Haml and Slim where the compiler/parser is monkeypatched to include file:line information to each node, the rest of the templates are augment by preprocessing them with an HTML parser. Basically, we first stub out all template specific expressions (i.e. `<% %>` for erb) from a template file. Then, we use the Nokogiri HTML Parser to parse the resulting valid HTML fragment, and add file:line information to its child nodes. Once this is done, we bring back our original template expressions and remove the stubs. A little bit hacky but it works.
+
+
 Server-Side Templates
 ----
 
@@ -49,25 +53,13 @@ For client-side templates to work, they have to live in separate files as oppose
 
     rake tmp:clear
 
-Javascript DOM insertion
+HTML Syntax Errors
 ----
+ViewInspect depends on Nokogiri to preprocess a template and add file:line information to each node. If there's any invalid HTML in your file, Nokogiri would delete it, and sometimes your HTML would look different in the browser because of this. To prevent that from happening, a Warning message would be shown to the user detailing where the HTML syntax errors are located so that the user can remove it. This is the default behavior.
 
-If you use a lot of javascript/jquery to manually insert DOM elements, you can also enable javascript DOM insertion tracking by adding this line to `config/environments/development.rb`.
-
-    ViewInspect.enable_javascript_tracking!
-
-Then, you need to make sure that in your `config/environments/development.rb`, asset compression is turned off
-
-    config.assets.compress = false
-
-Also, depending which library you're using, you may need to specify external libraries you wish to prevent from showing up as a potential source location. This is because of the way we track the origin of javascript DOM insertion. In order to do that, pass in an array of library names you want to exclude to `enable_javascript_tracking!` . For example:
-
-    ViewInspect.enable_javascript_tracking!([:jquery, :backbone])
-
-
-The reason why you may need to do this is because of the way we track the javascript file:line. We intercept the native DOM insertion methods such as appendChild, insertBefore, or replaceChild, look at the stacktrace, and then go through it to find the most recent caller which corresponds to our javascript code.
-
+An alternative solution is to avoid adding file:line information to DOM elements whenever Nokogiri encounters HTML syntax errors. Instead, it'll just show the original HTML template. If you prefer this behavior, you can set it by adding this line to config/environments/development.rb
 
+    ViewInspect.show_html_syntax_error = false
 
 Copyright
 ----

data/lib/view_inspect/handlers/html_template.rb

@@ -27,6 +27,8 @@ module ViewInspect
       def add_file_line(source, filepath)
         doc = ::Nokogiri::HTML.fragment(source)
 
+        return source if doc.errors.count > 0 && !ViewInspect.show_html_syntax_error?
+
         doc.traverse do |node|
           if node.is_a?(::Nokogiri::XML::Element)
             file_line = [filepath, node.line].join(":")
@@ -34,7 +36,27 @@ module ViewInspect
           end
         end
 
-        CGI.unescapeHTML(doc.inner_html)
+        source = CGI.unescapeHTML(doc.inner_html)
+
+        if doc.errors.length > 0
+          error_msg = build_html_syntax_error_msg(doc.errors, filepath)
+          "#{error_msg}#{source}"
+        else
+          source
+        end
+      end
+
+      def build_html_syntax_error_msg(errors, filepath)
+        errors_list = errors.inject("") do |result, error|
+          result << "<li>line #{error.line} - #{error.to_s}</li>"
+          result
+        end
+
+        "<div id='view_inspect_error_message' style='border: solid 1px black; z-index: 9999; position: absolute; margin-left: 200px; width: 800px; padding: 20px; background-color: rgb(255, 229, 229); color: black;'>
+          <h3 style='font-size: 20px; line-height: 20px; font-weight: bold; background-color: lightgray; padding: 5px; display: inline-block; border: solid 1px black;'>Please correct HTML syntax errors</h3>
+          <h3 style='font-size: 16px; line-height: 16px; margin-bottom: 20px;'>#{filepath}</h3>
+          <ul style='list-style: none;'>#{errors_list}</ul>
+        </div>"
       end
 
       def replace_expression_with_stub(source)

data/lib/view_inspect/rails/railtie.rb

@@ -2,7 +2,7 @@ module ViewInspect
   module Rails
     class Railtie < ::Rails::Railtie
       initializer "view_inspect_railtie.configure_rails_initialization" do |app|
-        ViewInspect.init(app)
+        ViewInspect.init
       end
     end
   end

data/lib/view_inspect/version.rb

@@ -1,3 +1,3 @@
 module ViewInspect
-  VERSION = "0.3.5"
+  VERSION = "0.3.6"
 end

data/lib/view_inspect.rb

@@ -1,18 +1,15 @@
 require 'view_inspect/server_side_template'
 require 'view_inspect/client_side_template'
-require 'view_inspect/rails/middleware'
 
 module ViewInspect
 
-  def self.init(app)
+  def self.init
     return unless allow_view_source_location?
 
     ServerSideTemplate.handle
     ClientSideTemplate.handle
 
-    if track_javascript?
-      app.middleware.use ViewInspect::Middleware
-    end
+    @show_html_syntax_error = true
   end
 
   def self.allow_view_source_location?
@@ -23,17 +20,12 @@ module ViewInspect
     @disable = bool
   end
 
-  def self.enable_javascript_tracking!(*library_exclude_list)
-    @track_javascript = true
-    @library_exclude_list = library_exclude_list.flatten
+  def self.show_html_syntax_error?
+    @show_html_syntax_error
   end
 
-  def self.track_javascript?
-    @track_javascript
-  end
-
-  def self.library_exclude_list
-    Array(@library_exclude_list)
+  def self.show_html_syntax_error=(bool)
+    @show_html_syntax_error = bool
   end
 
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: view_inspect
 version: !ruby/object:Gem::Version
-  version: 0.3.5
+  version: 0.3.6
 platform: ruby
 authors:
 - Reginald Tan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-12 00:00:00.000000000 Z
+date: 2014-11-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -45,10 +45,8 @@ files:
 - lib/view_inspect/handlers/haml.rb
 - lib/view_inspect/handlers/handlebars.rb
 - lib/view_inspect/handlers/html_template.rb
-- lib/view_inspect/handlers/javascript_handler.js
 - lib/view_inspect/handlers/jst.rb
 - lib/view_inspect/handlers/slim.rb
-- lib/view_inspect/rails/middleware.rb
 - lib/view_inspect/rails/railtie.rb
 - lib/view_inspect/server_side_template.rb
 - lib/view_inspect/version.rb

data/lib/view_inspect/handlers/javascript_handler.js

@@ -1,109 +0,0 @@
-(function(){
-  var DOM_INSERT_METHOD_NAMES = [
-    "appendChild",
-    "insertBefore",
-    "replaceChild",
-  ];
-
-  var fileExcludeList;
-
-  var getStacktrace = function() {
-    var e = new Error('dummy');
-    var stack = e.stack.replace(/^[^\(]+?[\n$]/gm, '')
-        .replace(/^\s+at\s+/gm, '')
-        .replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@')
-        .split('\n');
-
-    stack.splice(0,3); // HACK: we dont want 3 top most callers since they belong to our code
-    return stack;
-  };
-
-  var isInFileExcludeList = function(caller) {
-    var exclude;
-
-    for (var i = 0; i < fileExcludeList.length; i++) {
-      exclude = fileExcludeList[i];
-      if (caller.indexOf(exclude) !== -1) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-
-  var removeUrlParams = function(fileline) {
-    var match = fileline.match(/(\?.*):/);
-
-    if (match) {
-      match = match.pop();
-      fileline = fileline.replace(match, "");
-    }
-
-    return fileline;
-  };
-
-  var getOrigFileLine = function() {
-    var stacktrace = getStacktrace();
-    var regex = /(file|http|https)\:\/\/.+?(\/.*:\d+):\d+/;
-    var match;
-    var fileline = "";
-
-    for (var i = 0; i < stacktrace.length; i++) {
-      caller = stacktrace[i];
-      if ((match = caller.match(regex)) && !isInFileExcludeList(caller)) {
-        fileline = match.pop();
-        fileline = removeUrlParams(fileline);
-        break;
-      }
-    }
-
-    return fileline;
-  };
-
-  var canSetFileLine = function(node,fileline) {
-    return typeof node.setAttribute !== "undefined" &&
-          !node.getAttribute("data-orig-file-line") &&
-          fileline.length > 0;
-  };
-
-  var setFileLineToElement = function(node,fileline) {
-    var child;
-
-    if (canSetFileLine(node, fileline)) {
-      node.setAttribute("data-orig-file-line", fileline);
-
-      for (var i = 0; i < node.children.length; i++) {
-        child = node.children[i];
-        setFileLineToElement(child, fileline);
-      }
-    }
-  };
-
-  var setFileLineOnCall = function(methodName) {
-    var method = Element.prototype[methodName];
-
-    Element.prototype[methodName] = function(){
-      method.apply(this, arguments);
-      var node = arguments[0];
-      var fileline = getOrigFileLine();
-      setFileLineToElement(node, fileline);
-      return node;
-    };
-  };
-
-  var getFileExcluseList = function() {
-    var list = document.getElementsByTagName("head")[0].getAttribute("data-orig-exclude-list");
-    list = list ? list.split(",") : [];
-    return list;
-  };
-
-  var enableViewInspect = function() {
-    fileExcludeList = getFileExcluseList();
-    for (var i = 0; i < DOM_INSERT_METHOD_NAMES.length; i++) {
-      var methodName = DOM_INSERT_METHOD_NAMES[i];
-      setFileLineOnCall(methodName);
-    }
-  };
-
-  enableViewInspect();
-})();

data/lib/view_inspect/rails/middleware.rb

@@ -1,58 +0,0 @@
-module ViewInspect
-  class Middleware
-    HEAD_REGEXP = /(<head.*?>)/
-    HTML_CONTENT_TYPE_REGEXP = /text\/html|application\/xhtml\+xml/
-
-    def initialize(app)
-      @app = app
-    end
-
-    def call(env)
-      status, headers, response = @app.call(env)
-
-      if headers["Content-Type"] =~ HTML_CONTENT_TYPE_REGEXP && response.each.to_a.join("") =~ HEAD_REGEXP
-        body = insert_view_inspect_script(response.body)
-        headers["Content-Length"] = body.length.to_s
-        response = [body]
-      end
-
-      [status, headers, response]
-    end
-
-    def insert_view_inspect_script(body)
-      body  = add_library_exclude_list(body)
-      index = get_insert_position(body)
-      body.insert(index, get_inline_script)
-      body
-    end
-
-    def add_library_exclude_list(body)
-      index = body.index(HEAD_REGEXP)
-      old_head = $1
-      new_head = old_head.dup
-      new_head.insert("<head".length, " data-orig-exclude-list='#{ViewInspect.library_exclude_list.join(",")}' ")
-      body.sub(old_head,new_head)
-    end
-
-    def get_insert_position(body)
-      index = body.index(HEAD_REGEXP)
-      match = $1
-      return index + match.length
-    end
-
-    def get_script
-      filepath = File.expand_path("javascript_handler.js","#{File.dirname(__FILE__)}/../handlers")
-      File.read(filepath)
-    end
-
-    def get_inline_script
-      <<-CODE
-        <script type="text/javascript" language="javascript" charset="utf-8">
-        //<![CDATA[
-          #{get_script}
-        //]]>
-        </script>
-      CODE
-    end
-  end
-end