xray-rails 0.1.1

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Brent Dillingham
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,74 @@
+# Xray
+
+### Reveal the structure of your UI.
+
+The dev tools available to web developers in modern browsers are great. Many of us can't remember what life was like before "Inspect Element". But what we see in the compiled output sent to our browser is often the wrong level of detail - what about being able to visualize the higher level components of your UI? Controllers, templates, partials, Backbone views, etc.
+
+Xray is the missing link between the browser and your app code. Press **cmd+ctrl+x** to reveal an overlay of what files are powering your UI - click anything to open the associated file in your editor.
+
+![Screenshot](http://dl.dropbox.com/u/156655/Screenshots/xgf7ukh3fya-.png)
+
+### Current Support
+
+Xray is in early stages and currently supports only Rails 3.1+ with use of the asset pipeline as a requirement.
+
+So far, Xray can reveal:
+
+  * Rails views and partials
+  * Backbone View instances
+
+### Installation
+
+Add to your Gemfile, preferably under your development group:
+
+```ruby
+group :development do
+  ...
+  gem 'xray-rails', github: 'brentd/xray-rails'
+end
+```
+
+Then bundle and delete your cached assets:
+
+```
+$ bundle && rm -rf tmp/cache/assets
+```
+
+Restart your app, open your browser, and press `cmd+ctrl+x` to see the overlay.
+
+### Configuration
+
+By default, Xray will open files with Sublime Text, looking for `/usr/local/bin/subl`.
+
+You can configure this to be your editor of choice in Xray's UI, or create `~/.xrayconfig`, a YAML file.
+
+Example `.xrayconfig`:
+
+```yaml
+:editor: '/usr/local/bin/mate'
+```
+
+Or for something more complex, use the `$file` placeholder.
+
+```yaml
+:editor: "/usr/local/bin/tmux split-window -v '/usr/local/bin/vim $file'"
+```
+
+### How this works
+
+* During asset compilation, JS files and templates are modified to contain file path information.
+* A middleware inserts `xray.js`, `xray.css`, and the Xray bar into all successful HTML response bodies.
+* When the overlay is shown, `xray.js` examines the file path information inserted during asset compilation.
+* Another middleware piggybacks the Rails server to respond to requests to open file paths with the user's desired editor.
+
+### Contributing
+
+If you have an idea, open an issue and let's talk about it, or fork away and send a pull request.
+
+A laundry list of things to take on:
+
+  * Reveal views from Ember, Knockout, Angular, etc.
+  * Overlapping boxes are a problem - parent views in real applications will often be obscured by their children.
+  * The current scheme for associating a JS constructor with a filepath is messy and can make stack traces ugly.
+
+Worth noting is that I have plans to solidify xray.js into an API and specification that could be used to aid development in any framework - not just Rails and the asset pipeline.

data/app/assets/javascripts/xray-backbone.js.coffee

@@ -0,0 +1,20 @@
+# Xray Backbone integration. This involves hooking into the lifecycle
+# of Backbone.View by monkey patching its prototype. Would love a cleaner
+# way of doing this, as nobody wants to this stuff in their stack traces.
+
+return unless window.Backbone && window.Xray
+
+# Wrap Backbone.View::_ensureElement to add the view to Xray once
+# its element has been setup.
+_ensureElement = Backbone.View::_ensureElement
+Backbone.View::_ensureElement = ->
+  _.defer =>
+    info = Xray.constructorInfo @constructor
+    Xray.ViewSpecimen.add @el, info
+  _ensureElement.apply(this, arguments)
+
+# Cleanup when view is removed.
+_remove = Backbone.View::remove
+Backbone.View::remove = ->
+  Xray.ViewSpecimen.remove @el
+  _remove.apply(this, arguments)

data/app/assets/javascripts/xray.js.coffee

@@ -0,0 +1,282 @@
+window.Xray = {}
+return unless $ = window.jQuery
+
+# Max CSS z-index. The overlay and xray bar use this.
+MAX_ZINDEX = 2147483647
+
+# Initialize Xray. Called immediately, but some setup is deferred until DOM ready.
+Xray.init = do ->
+  return if Xray.initialized
+  Xray.initialized = true
+
+  # Register keyboard shortcuts
+  $(document).keydown (e) ->
+    if e.ctrlKey and e.metaKey and e.keyCode is 88 # cmd+ctrl+x
+      if Xray.isShowing then Xray.hide() else Xray.show()
+    if Xray.isShowing and e.keyCode is 27 # esc
+      Xray.hide()
+
+  $ ->
+    # Instantiate the overlay singleton.
+    new Xray.Overlay
+    # Go ahead and do a pass on the DOM to find templates.
+    Xray.findTemplates()
+    # Ready to rock.
+    console?.log "Ready to Xray. Press cmd+ctrl+x to scan your UI."
+
+# Returns all currently created Xray.Specimen objects.
+Xray.specimens = ->
+  Xray.ViewSpecimen.all.concat Xray.TemplateSpecimen.all
+
+# Looks up the stored constructor info
+Xray.constructorInfo = (constructor) ->
+  if window.XrayPaths
+    for own info, func of window.XrayPaths
+      return JSON.parse(info) if func == constructor
+  null
+
+# Scans the document for templates, creating Xray.TemplateSpecimens for them.
+Xray.findTemplates = -> util.bm 'findTemplates', ->
+  # Find all <!-- XRAY START ... --> comments
+  comments = $('*:not(iframe,script)').contents().filter ->
+    this.nodeType == 8 and this.data[0..9] == "XRAY START"
+
+  # Find the <!-- XRAY END ... --> comment for each. Everything between the
+  # start and end comment becomes the contents of an Xray.TemplateSpecimen.
+  for comment in comments
+    [_, id, path] = comment.data.match(/^XRAY START (\d+) (.*)$/)
+    $templateContents = new jQuery
+    el = comment.nextSibling
+    until !el or (el.nodeType == 8 and el.data == "XRAY END #{id}")
+      if el.nodeType == 1 and el.tagName != 'SCRIPT'
+        $templateContents.push el
+      el = el.nextSibling
+    # Remove XRAY template comments from the DOM.
+    el.parentNode.removeChild(el) if el?.nodeType == 8
+    comment.parentNode.removeChild(comment)
+    # Add the template specimen
+    Xray.TemplateSpecimen.add $templateContents,
+      name: path.split('/').slice(-1)[0]
+      path: path
+
+# Open the given filesystem path by calling out to Xray's server.
+Xray.open = (path) ->
+  $.ajax(url: "/_xray/open?path=#{path}")
+
+# Show the Xray overlay
+Xray.show = (type = null) ->
+  Xray.Overlay.instance().show(type)
+
+# Hide the Xray overlay
+Xray.hide = ->
+  Xray.Overlay.instance().hide()
+
+Xray.toggleSettings = ->
+  Xray.Overlay.instance().settings.toggle()
+
+# Wraps a DOM element that Xray is tracking. This is subclassed by
+# Xray.TemplateSpecimen and Xray.ViewSpecimen.
+class Xray.Specimen
+  @add: (el, info = {}) ->
+    @all.push new this(el, info)
+
+  @remove: (el) ->
+    @find(el)?.remove()
+
+  @find: (el) ->
+    el = el[0] if el instanceof jQuery
+    for specimen in @all
+      return specimen if specimen.el == el
+    null
+
+  @reset: ->
+    @all = []
+
+  constructor: (contents, info = {}) ->
+    @el = if contents instanceof jQuery then contents[0] else contents
+    @$contents = $(contents)
+    @name = info.name
+    @path = info.path
+
+  remove: ->
+    idx = @constructor.all.indexOf(this)
+    @constructor.all.splice(idx, 1) unless idx == -1
+
+  isVisible: ->
+    @$contents.length and @$contents.is(':visible')
+
+  makeBox: ->
+    @bounds = util.computeBoundingBox(@$contents)
+    @$box = $("<div class='xray-specimen #{@constructor.name}'>").css(@bounds)
+
+    # If the element is fixed, override the computed position with the fixed one.
+    if @$contents.css('position') == 'fixed'
+      @$box.css
+        position : 'fixed'
+        top      : @$contents.css('top')
+        left     : @$contents.css('left')
+
+    @$box.click => Xray.open @path
+    @$box.append @makeLabel
+
+  makeLabel: =>
+    $("<div class='xray-specimen-handle #{@constructor.name}'>").append(@name)
+
+
+# Wraps elements that constitute a Javascript "view" object, e.g.
+# Backbone.View.
+class Xray.ViewSpecimen extends Xray.Specimen
+  @all = []
+
+
+# Wraps elements that were rendered by a template, e.g. a Rails partial or
+# a client-side rendered JS template.
+class Xray.TemplateSpecimen extends Xray.Specimen
+  @all = []
+
+
+# Singleton class for the Xray "overlay" invoked by the keyboard shortcut
+class Xray.Overlay
+  @instance: ->
+    @singletonInstance ||= new this
+
+  constructor: ->
+    Xray.Overlay.singletonInstance = this
+    @bar = new Xray.Bar('#xray-bar')
+    @settings = new Xray.Settings('#xray-settings')
+    @shownBoxes = []
+    @$overlay = $('<div id="xray-overlay">')
+    @$overlay.click => @hide()
+
+  show: (type = null) ->
+    @reset()
+    Xray.isShowing = true
+    util.bm 'show', =>
+      @bar.$el.find('#xray-bar-togglers .xray-bar-btn').removeClass('active')
+      unless @$overlay.is(':visible')
+        $('body').append @$overlay
+        @bar.show()
+      switch type
+        when 'templates'
+          Xray.findTemplates()
+          specimens = Xray.TemplateSpecimen.all
+          @bar.$el.find('.xray-bar-templates-toggler').addClass('active')
+        when 'views'
+          specimens = Xray.ViewSpecimen.all
+          @bar.$el.find('.xray-bar-views-toggler').addClass('active')
+        else
+          Xray.findTemplates()
+          specimens = Xray.specimens()
+          @bar.$el.find('.xray-bar-all-toggler').addClass('active')
+      for element in specimens
+        continue unless element.isVisible()
+        element.makeBox()
+        # A cheap way to "order" the boxes, where boxes positioned closer to the
+        # bottom right of the document have a higher z-index.
+        element.$box.css
+          zIndex: Math.ceil(MAX_ZINDEX*0.9 + element.bounds.top + element.bounds.left)
+        @shownBoxes.push element.$box
+        $('body').append element.$box
+
+  reset: ->
+    $box.remove() for $box in @shownBoxes
+    @shownBoxes = []
+
+  hide: ->
+    Xray.isShowing = false
+    @$overlay.detach()
+    @reset()
+    @bar.hide()
+
+
+# The Xray bar shows controller, action, and view information, and has
+# toggle buttons for showing the different types of specimens in the overlay.
+class Xray.Bar
+  constructor: (el) ->
+    @$el = $(el)
+    @$el.css(zIndex: MAX_ZINDEX)
+    @$el.find('#xray-bar-controller-path .xray-bar-btn').click ->
+      Xray.open($(this).attr('data-path'))
+    @$el.find('.xray-bar-all-toggler').click       -> Xray.show()
+    @$el.find('.xray-bar-templates-toggler').click -> Xray.show('templates')
+    @$el.find('.xray-bar-views-toggler').click     -> Xray.show('views')
+    @$el.find('.xray-bar-settings-btn').click      -> Xray.toggleSettings()
+
+  show: ->
+    @$el.show()
+    @originalPadding = parseInt $('html').css('padding-bottom')
+    if @originalPadding < 40
+      $('html').css paddingBottom: 40
+
+  hide: ->
+    @$el.hide()
+    $('html').css paddingBottom: @originalPadding
+
+
+class Xray.Settings
+  constructor: (el) ->
+    @$el = $(el)
+    @$el.find('form').submit @save
+
+  toggle: =>
+    @$el.toggle()
+
+  save: (e) =>
+    e.preventDefault()
+    editor = @$el.find('#xray-editor-input').val()
+    $.ajax
+      url: '/_xray/config'
+      type: 'POST'
+      data: {editor: editor}
+      success: => @displayUpdateMsg(true)
+      error: => @displayUpdateMsg(false)
+
+  displayUpdateMsg: (success) =>
+    if success
+      $msg = $("<span class='xray-settings-success xray-settings-update-msg'>Success!</span>")
+    else
+      $msg = $("<span class='xray-settings-error xray-settings-update-msg'>Uh oh, something went wrong!</span>")
+    @$el.append($msg)
+    $msg.delay(2000).fadeOut(500, => $msg.remove(); @toggle())
+
+
+# Utility methods.
+util =
+  # Benchmark a piece of code
+  bm: (name, fn) ->
+    time = new Date
+    result = fn()
+    # console.log "#{name} : #{new Date() - time}ms"
+    result
+
+  # Computes the bounding box of a jQuery set, which may be many sibling
+  # elements with no parent in the set.
+  computeBoundingBox: ($contents) ->
+    # Edge case: the container may not physically wrap its children, for
+    # example if they are floated and no clearfix is present.
+    if $contents.length == 1 and $contents.height() <= 0
+      return util.computeBoundingBox($contents.children())
+
+    boxFrame =
+      top    : Number.POSITIVE_INFINITY
+      left   : Number.POSITIVE_INFINITY
+      right  : Number.NEGATIVE_INFINITY
+      bottom : Number.NEGATIVE_INFINITY
+
+    for el in $contents
+      $el = $(el)
+      continue unless $el.is(':visible')
+      frame = $el.offset()
+      frame.right  = frame.left + $el.outerWidth()
+      frame.bottom = frame.top + $el.outerHeight()
+      boxFrame.top    = frame.top if frame.top < boxFrame.top
+      boxFrame.left   = frame.left if frame.left < boxFrame.left
+      boxFrame.right  = frame.right if frame.right > boxFrame.right
+      boxFrame.bottom = frame.bottom if frame.bottom > boxFrame.bottom
+
+    return {
+      left   : boxFrame.left
+      top    : boxFrame.top
+      width  : boxFrame.right - boxFrame.left
+      height : boxFrame.bottom - boxFrame.top
+    }

data/app/assets/stylesheets/xray.css

@@ -0,0 +1,349 @@
+@charset "UTF-8";
+
+/* selector for element and children */
+#xray-overlay, #xray-overlay *, #xray-overlay a:hover, #xray-overlay a:visited, #xray-overlay a:active,
+#xray-bar, #xray-bar *, #xray-bar a:hover, #xray-bar a:visited, #xray-bar a:active {
+  background:none;
+  border:none;
+  bottom:auto;
+  clear:none;
+  cursor:default;
+  float:none;
+  font-family:Arial, Helvetica, sans-serif;
+  font-size:medium;
+  font-style:normal;
+  font-weight:normal;
+  height:auto;
+  left:auto;
+  letter-spacing:normal;
+  line-height:normal;
+  max-height:none;
+  max-width:none;
+  min-height:0;
+  min-width:0;
+  overflow:visible;
+  position:static;
+  right:auto;
+  text-align:left;
+  text-decoration:none;
+  text-indent:0;
+  text-transform:none;
+  top:auto;
+  visibility:visible;
+  white-space:normal;
+  width:auto;
+  z-index:auto;
+}
+
+#xray-overlay {
+  position: fixed; left: 0; top: 0; bottom: 0; right: 0;
+  background: rgba(0,0,0,0.7);
+  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0.8) 100%);
+  z-index: 9000;
+}
+
+.xray-specimen {
+  position: absolute;
+  background: rgba(255,255,255,0.15);
+  outline: 1px solid rgba(255,255,255,0.8);
+  outline-offset: -1px;
+  color: #666;
+  font-family: "Helvetica Neue", sans-serif;
+  font-size: 13px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.7);
+}
+
+  .xray-specimen:hover {
+    cursor: pointer;
+    background: rgba(255,255,255,0.4);
+  }
+
+  .xray-specimen.TemplateSpecimen {
+    outline: 1px solid rgba(255,50,50,0.8);
+    background: rgba(255,50,50,0.1);
+  }
+
+  .xray-specimen.TemplateSpecimen:hover {
+    background: rgba(255,50,50,0.4);
+  }
+
+  .xray-specimen-handle {
+    float:left;
+    background: #fff;
+    padding: 0 3px;
+    color: #333;
+    font-size: 10px;
+  }
+
+  .xray-specimen-handle.TemplateSpecimen {
+    background: rgba(255,50,50,0.8);
+    color: #fff;
+  }
+
+#xray-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 40px;
+  padding: 0 8px;
+  background: #222;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 200;
+  color: #fff;
+  z-index: 10000;
+  box-shadow: 0 -1px 0 rgba(255,255,255,0.1), inset 0 2px 6px rgba(0,0,0,0.8);
+  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3)),
+                    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDRkNBMTUwNzdGRTIxMUUyQjBGQ0NBRTc5RDQ3MEJFNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDRkNBMTUwODdGRTIxMUUyQjBGQ0NBRTc5RDQ3MEJFNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNGQ0ExNTA1N0ZFMjExRTJCMEZDQ0FFNzlENDcwQkU1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNGQ0ExNTA2N0ZFMjExRTJCMEZDQ0FFNzlENDcwQkU1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+aIv7XwAAAEVJREFUeNpiFBMTY2BgEBISYsAGWICAATdgkZeXB1Lv37/HLo1LAgKYGPACdOl3YIAwHNOpKFw0aTSXokujuZSA0wACDABh2BIyJ1wQkwAAAABJRU5ErkJggg==);
+}
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    #xray-bar {
+      background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3)),
+                        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0Q0ZGQkRGRTdGRTMxMUUyQjBGQ0NBRTc5RDQ3MEJFNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0Q0ZGQkRGRjdGRTMxMUUyQjBGQ0NBRTc5RDQ3MEJFNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNGQ0ExNTA5N0ZFMjExRTJCMEZDQ0FFNzlENDcwQkU1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNGQ0ExNTBBN0ZFMjExRTJCMEZDQ0FFNzlENDcwQkU1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+T6y4zwAAAIZJREFUeNrkkjEKwCAMRWMbERw8gE5O3v9q6lIEbbDQMZJ2Kv0gBOSR8HkqxphzBgDnnDEGJNkRsfc+xmitWWtF8KaUuqZ7EMDee1qutQ4hSGGkl1Kis2utYviYgUfZ4EU+CiP/TV0y/i02l1L6DA3is3n/FjDvHy5bYfxbF8b490fDTgEGAJveOCvuYEabAAAAAElFTkSuQmCC);
+      background-size: auto, 10px 10px;
+    }
+  }
+
+  #xray-bar .xray-bar-btn {
+    position: relative;
+    color: #fff;
+    margin: 8px 1px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 8px;
+    float: left;
+    font-size: 14px;
+    cursor: pointer;
+    vertical-align: middle;
+    background-color: #444;
+    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
+    border-radius: 2px;
+    box-shadow: 1px 1px 1px rgba(0,0,0,0.5),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2),
+                inset 0 0 2px rgba(255, 255, 255, 0.2);
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
+    transition: background-color 0.1s;
+  }
+
+    #xray-bar .xray-bar-btn b {
+      position: absolute;
+      display: block;
+      right: -19px;
+      top: 0;
+      width: 20px;
+      height: 24px;
+      z-index: 10;
+      overflow: hidden;
+      font-size: 44px;
+      line-height: 19px;
+      text-indent: -7px;
+    }
+
+    #xray-bar .xray-bar-btn b:before {
+      content: "";
+      width: 18px;
+      height: 18px;
+      display: block;
+      position: absolute;
+      left: -9px;
+      top: 3px;
+      border-radius: 2px;
+      box-shadow: 1px -1px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 2px rgba(255, 255, 255, 0.2);
+      background-image: linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,0.2));
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+      transition: background-color 0.1s;
+    }
+
+    #xray-bar .xray-bar-btn:hover {
+      background-color: #555;
+    }
+
+  #xray-bar #xray-bar-controller-path {
+    margin-right: 20px;
+  }
+
+    #xray-bar #xray-bar-controller-path .xray-bar-btn {
+      border-radius: 2px 0 0 2px;
+      padding: 0 6px 0 16px;
+      margin: 8px 1px 8px 0;
+    }
+
+    #xray-bar #xray-bar-controller-path .xray-bar-btn:first-child {
+      padding-left: 8px;
+    }
+
+    #xray-bar #xray-bar-controller-path .xray-bar-btn:last-child {
+      border-radius: 2px;
+      padding-right: 10px;
+    }
+
+    #xray-bar-controller-path .xray-bar-controller { padding-left: 6px; }
+    #xray-bar-controller-path .xray-bar-controller,
+    #xray-bar-controller-path .xray-bar-controller b:before { background-color: #444; }
+    #xray-bar-controller-path .xray-bar-controller:hover,
+    #xray-bar-controller-path .xray-bar-controller:hover b:before { background-color: #555; }
+    #xray-bar-controller-path .xray-bar-controller-action { color: #ddd; }
+    #xray-bar-controller-path .xray-bar-layout,
+    #xray-bar-controller-path .xray-bar-layout b:before { background-color: #c12e27; }
+    #xray-bar-controller-path .xray-bar-layout:hover,
+    #xray-bar-controller-path .xray-bar-layout:hover b:before { background-color: #de362d; }
+    #xray-bar-controller-path .xray-bar-view,
+    #xray-bar-controller-path .xray-bar-view b:before { background-color: #ff2c1e; }
+    #xray-bar-controller-path .xray-bar-view:hover,
+    #xray-bar-controller-path .xray-bar-view:hover b:before { background-color: #ff4c36; }
+
+  #xray-bar #xray-bar-togglers {
+    float: left;
+    margin-left: 20px;
+  }
+
+    #xray-bar #xray-bar-togglers .xray-bar-btn {
+      border-radius: 0;
+      margin-right: 0;
+      color: #999;
+    }
+
+    #xray-bar #xray-bar-togglers .xray-bar-btn:first-child {
+      border-radius: 2px 0 0 2px;
+    }
+
+    #xray-bar #xray-bar-togglers .xray-bar-btn:last-child {
+      border-radius: 0 2px 2px 0;
+    }
+
+    #xray-bar #xray-bar-togglers .xray-bar-btn:before {
+      font-size: 9px;
+      vertical-align: middle;
+      margin-bottom: 1px;
+      margin-right: 5px;
+      background: rgba(255,255,255,0.2);
+      color: #eee;
+      padding: 2px 4px;
+      text-shadow: none;
+    }
+
+    #xray-bar #xray-bar-togglers .xray-bar-btn.active {
+      background: #555;
+      color: #fff;
+    }
+
+    #xray-bar #xray-bar-togglers .xray-bar-templates-toggler:before { content: 'HTML'; }
+    #xray-bar #xray-bar-togglers .xray-bar-templates-toggler.active:before { background: red; }
+    #xray-bar #xray-bar-togglers .xray-bar-views-toggler:before { content: 'JS'; }
+    #xray-bar #xray-bar-togglers .xray-bar-views-toggler.active:before { background: #fff; color: #333; }
+    #xray-bar #xray-bar-togglers .xray-bar-styles-toggler:before { content: 'CSS'; }
+
+    #xray-bar #xray-bar-togglers .xray-icon-search:before {
+      font-size: 16px;
+      background: none;
+      padding: 0;
+      margin: 0;
+    }
+
+  #xray-bar .xray-bar-settings-btn {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    color: #666;
+    cursor: pointer;
+    text-shadow: 0 1px 0 #000;
+    font-size: 16px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+    #xray-bar .xray-bar-settings-btn:hover {
+      color: #fff;
+    }
+
+#xray-settings {
+  position: absolute;
+  right: 0;
+  bottom: 40px;
+  width: 300px;
+  height: 100px;
+  background: rgba(0,0,0,0.9);
+  padding: 10px;
+  font-size: 14px
+}
+
+  #xray-settings label {
+    display: inline;
+    margin: 2px 10px;
+    padding: 0;
+  }
+
+  #xray-settings input {
+    padding: 5px;
+    display: inline;
+    background: #333;
+    border: 1px solid #666;
+    color: #fff;
+    width: 200px;
+    margin: 0;
+    font-size: 13px;
+    line-height: 13px;
+    border-radius: 3px;
+    vertical-align: middle;
+  }
+
+  #xray-settings button {
+    position: absolute;
+    right: 18px;
+    left: 18px;
+    bottom: 10px;
+    padding: 7px;
+    color: #fff;
+    background: #04be00;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  #xray-settings button:hover {
+    background: #049d00;
+  }
+
+  #xray-settings p {
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+    margin: 10px 0 0 0;
+  }
+
+  #xray-settings .xray-settings-update-msg {
+    margin-left: 12px;
+  }
+
+
+@font-face {
+  font-family: 'xray-icons';
+  src: url("data:application/octet-stream;base64,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") format('woff'), url("data:application/octet-stream;base64,AAEAAAAPAIAAAwBwRkZUTWLHZegAAAD8AAAAHE9TLzL9A/OpAAABGAAAAFZjbWFwF68G+wAAAXAAAAHWY3Z0IAaZ/0QAAAwUAAAAHGZwZ20w9Z6VAAAMMAAACZZnYXNwAAAAEAAADAwAAAAIZ2x5ZrbJr7oAAANIAAAFRGhlYWT9l/ipAAAIjAAAADZoaGVhBz8DUwAACMQAAAAkaG10eBhwAH4AAAjoAAAAKGxvY2EGGATyAAAJEAAAABZtYXhwAPEKFwAACSgAAAAgbmFtZY6wAecAAAlIAAACWHBvc3TzQj6+AAALoAAAAGxwcmVwuL3ioQAAFcgAAABYAAAAAQAAAADH/rDfAAAAAM1kWoQAAAAAzWRahAABAxoB9AAFAAACigK7AAAAjAKKArsAAAHfADEBAgAAAgAGAwAAAAAAAAAAAAASAIAAAAAAAAAAAABQZkVkAEAmof//A1L/agBaAzMAd4AAAAEAAAAAAAAAAAAFAAAAAwAAACwAAAAEAAAAbAABAAAAAADQAAMAAQAAACwAAwAKAAAAbAAEAEAAAAAMAAgAAgAEJqEnFegA8Fbw2///AAAmoScV6ADwVvDb///ZYtjvGAUPsA8sAAEAAAAAAAAAAAAAAAAADAAAAAAAZAAAAAAAAAAHAAAmoQAAJqEAAAADAAAnFQAAJxUAAAAEAADoAAAA6AAAAAAFAADwVgAA8FYAAAAGAADw2wAA8NsAAAAHAAH0xAAB9MQAAAAIAAH1DQAB9Q0AAAAJAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAIQAAASoCmgADAAcAKUAmAAAAAwIAA1cAAgEBAksAAgIBTwQBAQIBQwAABwYFBAADAAMRBQ8rMxEhESczESMhAQnox8cCmv1mIQJYAAAAAQAS/5wCBgMgAAUABrMEAQEmKxMBAxcBExIBeH76/ol9AYwBlP6ikv5sAV4AAAAAAQAP/+8CpgKGACcAJUAiIRcNAwQCAAFAAQEAAgIATQEBAAACUQMBAgACRSQsJCkEEis2ND8BJyY0PwE2MzIfATc2MzIfARYUDwEXFhQPAQYjIi8BBwYjIi8BDxCkpBAQTBAVFhCkpRAVFhBMEBCkpBAQTA8XFg+lpA8XFg9MWiwQpKQQLBBMEBCkpBAQTBAsEKSkECwQTA8PpKQPD0wAAAIAD/+6A1cDAgAtADcARUBCKBkCAwEqFxMABAIDEQICAAIDQCQiHx0EAT4NCwgGBAA9AAEAAwIBA1kAAgAAAk0AAgIAUQAAAgBFNDMvLiEgGQQPKyUGByYHBhcGByYiByYnNicmByYnNjU0JzY3Fjc2JzY3FjI3FhcGFxY3FhcGFRQEMjY1NCYiBhUUA1cMFkZCNhQpKy6sLispFDY1Uw8TUlITD0o+NhQoLC+qLywoFDZCRhYMUP5gmGprlmvkKSkSPjpOFBBSUhAUUTc2FB01NFBINDUdEj43URUNUFANFU46PhIpKTJKSG5qTEttbUtMAAACAAD/iQOqAzMAEwBeAFRAUUlCPjYEAwZOMQIEAxoBAgRRGQIBAgRABwEFCAYIBQZmAAMGBAYDBGYABAACAQQCWgAICABRAAAACkEABgYBUQABAQsBQltaEyQcJSgrKCQJFisRNDY3NjMyFhcWFRQGBwYjIiYnJjcUFhcWFzUGIyInLgEvASY1NDMyFx4BFxYzMjc2Ny4BNTQ3JjU0NzIXFhc2MzIXPgEzFhUUBxYVFAYHFh0BPgI1NCYnLgEiDgKEZmmCh9M8P4NmbICG1Dw/Tkk6PVIcDkMbBREGFwkRIRsBCwUcHB0VCh1nYS0JESAcGiUyNTMrJDYgEQksYGYqUH1EPzIzj6aOZkABXobUPD+DZmqCh9M8P4RmaYJaljQ2GmcEPQ8YBRUHAgglAREFGggkEgpSYEkwGRsiIAsKHAsKGhYfIxgbMEpfUwocNIoZcJZVUpAyM0BAZo4AAAAAAwAP/7EDsAMLAA8AFgAdADFALgABBQEDAgEDVwQBAgAAAk0EAQICAFEGAQACAEUBAB0cGRcWFRQSCQYADwEOBw4rFyImNRE0NjMhMhYVERQGIyUUFjMhESEBITI2NREhaCU0NCUC7iU1NSX9AAoIAVT+mgGtAVMICv6bTzUlAqYlNTUl/VolNVoHCwKD/X0LBwJxAAMAD/+xAtkDCwATABwAHwBBQD4fAQUDAUAAAQADBQEDVwAFBwECBAUCWQAEAAAESwAEBABRBgEABABFFRQBAB4dGxoZGBQcFRwJBgATARIIDisXIiY1ETQ2MyEyFh8BHgEVERQGIwMiJj0BIREhESczJ0UXHx8XAS8XNw7jDhgfFvoWIP7iAjzWpqZPHxcC7hcfGA7kDjYY/kIXHwH0Hxfo/TYBrEinAAIAD//iAxkC6gAVACAAK0AoFQECAwYBAAICQAABAAMCAQNZAAIAAAJNAAICAFEAAAIARSUYJScEEislFg8BBi8BBiMiJjU0NzYzMhcWFRQHABQWMjY1NCcmIyIDEx4YLiQgvklTgL5aWoB/YWAu/hiIsH5EQ1lYTiIcLiAgviq+gIBbW19fgFlJAQKwiH5aV0RDAAABAAAAAQAAM+pS218PPPUACwPoAAAAAM1kWoQAAAAAzWRahAAA/4kDsAMzAAAACAACAAAAAAAAAAEAAAMz/4kAWgO/AAAAAAOwAAEAAAAAAAAAAAAAAAAAAAAKAWwAIQAAAAABTQAAAhgAEgK1AA8DZgAPA6oAAAO/AA8C6AAPAzMADwAAACgAKAAoAEAAkAEKAboCBAJYAqIAAAABAAAACgBfAAMAAAAAAAIAEgAgAGwAAABlCZYAAAAAAAAADgCuAAEAAAAAAAAANQBsAAEAAAAAAAEACAC0AAEAAAAAAAIABgDLAAEAAAAAAAMAJAEcAAEAAAAAAAQACAFTAAEAAAAAAAUAEAF+AAEAAAAAAAYACAGhAAMAAQQJAAAAagAAAAMAAQQJAAEAEACiAAMAAQQJAAIADAC9AAMAAQQJAAMASADSAAMAAQQJAAQAEAFBAAMAAQQJAAUAIAFcAAMAAQQJAAYAEAGPAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQAyACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAQ29weXJpZ2h0IChDKSAyMDEyIGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb20AAGYAbwBuAHQAZQBsAGwAbwAAZm9udGVsbG8AAE0AZQBkAGkAdQBtAABNZWRpdW0AAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAZgBvAG4AdABlAGwAbABvACAAOgAgADEAMgAtADMALQAyADAAMQAzAABGb250Rm9yZ2UgMi4wIDogZm9udGVsbG8gOiAxMi0zLTIwMTMAAGYAbwBuAHQAZQBsAGwAbwAAZm9udGVsbG8AAFYAZQByAHMAaQBvAG4AIAAwADAAMQAuADAAMAAwACAAAFZlcnNpb24gMDAxLjAwMCAAAGYAbwBuAHQAZQBsAGwAbwAAZm9udGVsbG8AAAIAAAAAAAD/gwAyAAAAAAAAAAAAAAAAAAAAAAAAAAAACgAAAAEAAgECAQMBBAEFAQYBBwEIB3VuaTI2QTEHdW5pMjcxNQd1bmlFODAwB3VuaUYwNTYHdW5pRjBEQgZ1MUY0QzQGdTFGNTBEAAEAAf//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgMz/4kDM/+JsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywCCNCsAcjQrAAI0KwAEOwB0NRWLAIQyuyAAEAQ2BCsBZlHFktsAUssABDIEUgsAJFY7ABRWJgRC2wBiywAEMgRSCwACsjsQIEJWAgRYojYSBkILAgUFghsAAbsDBQWLAgG7BAWVkjsABQWGVZsAMlI2FERC2wByyxBQVFsAFhRC2wCCywAWAgILAKQ0qwAFBYILAKI0JZsAtDSrAAUlggsAsjQlktsAksILgEAGIguAQAY4ojYbAMQ2AgimAgsAwjQiMtsAosS1RYsQcBRFkksA1lI3gtsAssS1FYS1NYsQcBRFkbIVkksBNlI3gtsAwssQANQ1VYsQ0NQ7ABYUKwCStZsABDsAIlQrIAAQBDYEKxCgIlQrELAiVCsAEWIyCwAyVQWLAAQ7AEJUKKiiCKI2GwCCohI7ABYSCKI2GwCCohG7AAQ7ACJUKwAiVhsAgqIVmwCkNHsAtDR2CwgGIgsAJFY7ABRWJgsQAAEyNEsAFDsAA+sgEBAUNgQi2wDSyxAAVFVFgAsA0jQiBgsAFhtQ4OAQAMAEJCimCxDAQrsGsrGyJZLbAOLLEADSstsA8ssQENKy2wECyxAg0rLbARLLEDDSstsBIssQQNKy2wEyyxBQ0rLbAULLEGDSstsBUssQcNKy2wFiyxCA0rLbAXLLEJDSstsBgssAcrsQAFRVRYALANI0IgYLABYbUODgEADABCQopgsQwEK7BrKxsiWS2wGSyxABgrLbAaLLEBGCstsBsssQIYKy2wHCyxAxgrLbAdLLEEGCstsB4ssQUYKy2wHyyxBhgrLbAgLLEHGCstsCEssQgYKy2wIiyxCRgrLbAjLCBgsA5gIEMjsAFgQ7ACJbACJVFYIyA8sAFgI7ASZRwbISFZLbAkLLAjK7AjKi2wJSwgIEcgILACRWOwAUViYCNhOCMgilVYIEcgILACRWOwAUViYCNhOBshWS2wJiyxAAVFVFgAsAEWsCUqsAEVMBsiWS2wJyywByuxAAVFVFgAsAEWsCUqsAEVMBsiWS2wKCwgNbABYC2wKSwAsANFY7ABRWKwACuwAkVjsAFFYrAAK7AAFrQAAAAAAEQ+IzixKAEVKi2wKiwgPCBHILACRWOwAUViYLAAQ2E4LbArLC4XPC2wLCwgPCBHILACRWOwAUViYLAAQ2GwAUNjOC2wLSyxAgAWJSAuIEewACNCsAIlSYqKRyNHI2EgWGIbIVmwASNCsiwBARUUKi2wLiywABawBCWwBCVHI0cjYbAGRStlii4jICA8ijgtsC8ssAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgsAlDIIojRyNHI2EjRmCwBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhIyAgsAQmI0ZhOBsjsAlDRrACJbAJQ0cjRyNhYCCwBEOwgGJgIyCwACsjsARDYLAAK7AFJWGwBSWwgGKwBCZhILAEJWBkI7ADJWBkUFghGyMhWSMgILAEJiNGYThZLbAwLLAAFiAgILAFJiAuRyNHI2EjPDgtsDEssAAWILAJI0IgICBGI0ewACsjYTgtsDIssAAWsAMlsAIlRyNHI2GwAFRYLiA8IyEbsAIlsAIlRyNHI2EgsAUlsAQlRyNHI2GwBiWwBSVJsAIlYbABRWMjIFhiGyFZY7ABRWJgIy4jICA8ijgjIVktsDMssAAWILAJQyAuRyNHI2EgYLAgYGawgGIjICA8ijgtsDQsIyAuRrACJUZSWCA8WS6xJAEUKy2wNSwjIC5GsAIlRlBYIDxZLrEkARQrLbA2LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrEkARQrLbA3LLAuKyMgLkawAiVGUlggPFkusSQBFCstsDgssC8riiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSQBFCuwBEMusCQrLbA5LLAAFrAEJbAEJiAuRyNHI2GwBkUrIyA8IC4jOLEkARQrLbA6LLEJBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CyBCgJRVJEswoLBgQrsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBE") format('truetype');
+}
+
+[class^="xray-icon-"]:before,
+[class*=" xray-icon-"]:before {
+  font-family: 'xray-icons';
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: 0.1em;
+  text-align: center;
+  line-height: 1em;
+}
+
+.xray-icon-cog:before { content: '\e800'; } /* '' */
+.xray-icon-flash:before { content: '\26a1'; } /* '⚡' */
+.xray-icon-cancel:before { content: '\2715'; } /* '✕' */
+.xray-icon-github:before { content: '\f056'; } /* '' */
+.xray-icon-columns:before { content: '\f0db'; } /* '' */
+.xray-icon-doc:before { content: '📄'; } /* '\1f4c4' */
+.xray-icon-search:before { content: '🔍'; } /* '\1f50d' */

data/app/views/_xray_bar.html.erb

@@ -0,0 +1,46 @@
+
+<!-- XRAY BAR -->
+
+<div id="xray-bar" style="display:none">
+  <% if Xray.request_info.present? %>
+    <div id="xray-bar-controller-path">
+      <% if Xray.request_info[:controller] %>
+        <span class="xray-bar-btn xray-bar-controller xray-icon-flash" data-path="<%= Xray.request_info[:controller][:path] %>">
+          <b></b>
+          <%= Xray.request_info[:controller][:name] %><span class="xray-bar-controller-action">#<%= Xray.request_info[:controller][:action] %></span>
+        </span>
+      <% end %>
+      <% if Xray.request_info[:view] %>
+        <% layout_path = lookup_context.find(Xray.request_info[:view][:layout]).identifier %>
+        <span class="xray-bar-btn xray-bar-layout xray-icon-columns" data-path="<%= layout_path %>">
+          <b></b>
+          <%= layout_path.split('/').last %>
+        </span>
+        <span class="xray-bar-btn xray-bar-view xray-icon-doc" data-path="<%= Xray.request_info[:view][:path] %>">
+          <%= Xray.request_info[:view][:path].split('/').last %>
+        </span>
+      <% end %>
+    </div>
+  <% end %>
+  <div id="xray-bar-togglers">
+    <span class="xray-bar-btn xray-bar-all-toggler xray-icon-search"></span>
+    <span class="xray-bar-btn xray-bar-templates-toggler">
+      templates
+    </span>
+    <span class="xray-bar-btn xray-bar-views-toggler">
+      views
+    </span>
+  </div>
+  <span class="xray-bar-settings-btn xray-icon-cog"></span>
+  <div id="xray-settings" style="display:none">
+    <form>
+      <label for="xray-editor-input">Editor</label>
+      <input id="xray-editor-input" type="text" value="<%= Xray.config.editor %>">
+      <button type="submit">Save</button>
+      <p>Settings are saved to ~/.xrayconfig</p>
+  </form>
+  </div>
+  <%= stylesheet_link_tag :xray %>
+</div>
+
+<!-- /XRAY BAR -->

data/lib/xray/config.rb

@@ -0,0 +1,52 @@
+module Xray
+
+  def self.config
+    @@config ||= Config.new
+  end
+
+  class Config
+    attr_accessor :editor
+
+    CONFIG_FILE = "#{Dir.home}/.xrayconfig"
+    DEFAULT_EDITOR = '/usr/local/bin/subl'
+
+    def editor
+      load_config[:editor]
+    end
+
+    def editor=(new_editor)
+      if new_editor && new_editor != editor
+        write_config(editor: new_editor)
+        true
+      else
+        false
+      end
+    end
+
+    def to_yaml
+      {editor: editor}.to_yaml
+    end
+
+    private
+
+    def write_config(new_config)
+      config = load_config.merge(new_config)
+      File.open(CONFIG_FILE, 'w') { |f| f.write(config.to_yaml) }
+    end
+
+    def load_config
+      default_config.merge(local_config)
+    end
+
+    def local_config
+      YAML.load_file(CONFIG_FILE)
+    rescue
+      {}
+    end
+
+    def default_config
+      { editor: DEFAULT_EDITOR }
+    end
+
+  end
+end

data/lib/xray/engine.rb

@@ -0,0 +1,88 @@
+module Xray
+
+  # This is the main point of integration with Rails. This engine hooks into
+  # Sprockets and monkey patches ActionView in order to augment the app's JS
+  # and HTML templates with filepath information that can be used by xray.js
+  # in the browser. It also hooks in a middleware responsible for injecting
+  # xray.js and the xray bar into the app's response bodies.
+  class Engine < ::Rails::Engine
+    initializer "xray.initialize" do |app|
+      app.middleware.use Xray::Middleware
+
+      # Register as a Sprockets processor to augment JS files, including
+      # compiled coffeescript, with filepath information. See
+      # `Xray.augment_js` for details.
+      app.assets.register_postprocessor 'application/javascript', :xray do |context, data|
+        path = context.pathname.to_s
+        if path =~ /^#{app.root}.+\.(js|coffee)(\.|$)/
+          Xray.augment_js(data, path)
+        else
+          data
+        end
+      end
+
+      # Monkey patch ActionView::Template to augment server-side templates
+      # with filepath information. See `Xray.augment_template` for details.
+      ActionView::Template.class_eval do
+        def render_with_xray(*args, &block)
+          path = identifier
+          source = render_without_xray(*args, &block)
+          if path =~ /\.(html|slim|haml)(\.|$)/ && !path.include?('_xray_bar')
+            Xray.augment_template(source, path)
+          else
+            source
+          end
+        end
+        alias_method_chain :render, :xray
+      end
+
+      # Augment JS templates
+      app.assets.register_preprocessor 'application/javascript', :xray do |context, source|
+        path = context.pathname.to_s
+        if path =~ /^#{app.root}.+\.(jst)(\.|$)/
+          Xray.augment_template(source, path)
+        else
+          source
+        end
+      end
+
+      # This event is called near the beginning of a request cycle. We use it to
+      # collect information about the controller and action that is responding, for
+      # display in the Xray bar.
+      ActiveSupport::Notifications.subscribe('start_processing.action_controller') do |*args|
+        event           = ActiveSupport::Notifications::Event.new(*args)
+        controller_name = event.payload[:controller]
+        action_name     = event.payload[:action]
+        path            = ActiveSupport::Dependencies.search_for_file(controller_name.underscore)
+
+        # Reset the request info hash for this request.
+        # NOTE: Nothing about this is thread-safe. Could this affect anyone in dev mode?
+        Xray.request_info.clear
+
+        Xray.request_info[:controller] = {
+          :path   => path,
+          :name   => controller_name,
+          :action => action_name
+        }
+      end
+
+      # This event is called each time during the request cycle that
+      # ActionView renders a template. The first time it's called will most
+      # likely be the view the controller is rendering, which is what we're
+      # interested in.
+      ActiveSupport::Notifications.subscribe('render_template.action_view') do |*args|
+        event  = ActiveSupport::Notifications::Event.new(*args)
+        layout = event.payload[:layout]
+        path   = event.payload[:identifier]
+
+        # We are only interested in the first notification that has a layout.
+        if layout
+          Xray.request_info[:view] ||= {
+            :path   => path,
+            :layout => layout
+          }
+        end
+      end
+    end
+  end
+end

data/lib/xray/middleware.rb

@@ -0,0 +1,88 @@
+require "open3"
+
+module Xray
+  OPEN_PATH = '/_xray/open'
+  UPDATE_CONFIG_PATH = '/_xray/config'
+
+  # This middleware is responsible for injecting xray.js, xray-backbone.js, and
+  # the Xray bar into the app's pages. It also listens for requests to open files
+  # with the user's editor.
+  class Middleware
+    def initialize(app)
+      @app = app
+    end
+
+    def call(env)
+      # Request for opening a file path.
+      if env['PATH_INFO'] == OPEN_PATH
+        req, res = Rack::Request.new(env), Rack::Response.new
+        out, err, status = Xray.open_file(req.GET['path'])
+        if status.success?
+          res.status = 200
+        else
+          res.write out
+          res.status = 500
+        end
+        res.finish
+      elsif env['PATH_INFO'] == UPDATE_CONFIG_PATH
+        req, res = Rack::Request.new(env), Rack::Response.new
+        if req.post? && Xray.config.editor = req.POST['editor']
+          res.status = 200
+        else
+          res.status = 400
+        end
+        res.finish
+      # Inject xray.js and friends if it's a plain ol' successful HTML request.
+      else
+        status, headers, response = @app.call(env)
+        if should_inject_xray?(status, headers, response)
+          body = response.body.sub(/<body[^>]*>/) { "#{$~}\n#{xray_bar}" }
+          append_js!(body, 'jquery', :xray)
+          append_js!(body, 'backbone', :'xray-backbone')
+          headers['Content-Length'] = body.bytesize.to_s
+        end
+        [status, headers, (body ? [body] : response)]
+      end
+    end
+
+    private
+
+    def xray_bar
+      ActionController::Base.new.render_to_string(:partial => '/xray_bar').html_safe
+    end
+
+    # Appends the given `script_name` after the `after_script_name`.
+    def append_js!(html, after_script_name, script_name)
+      # Matches:
+      #   <script src="/assets/jquery.js"></script>
+      #   <script src="/assets/jquery-min.js"></script>
+      #   <script src="/assets/jquery.min.1.9.1.js"></script>
+      html.sub!(/<script[^>]+#{after_script_name}([-.]{1}[\d\.]+)?([-.]{1}min)?\.js[^>]+><\/script>/) do
+        h = ActionController::Base.helpers
+        "#{$~}\n" + h.javascript_include_tag(script_name)
+      end
+    end
+
+    def should_inject_xray?(status, headers, response)
+      status == 200 &&
+      html_request?(headers, response) &&
+      !file?(headers) &&
+      !empty?(response) &&
+      !response.body.frozen?
+    end
+
+    def empty?(response)
+      # response may be ["Not Found"], ["Move Permanently"], etc.
+      (response.is_a?(Array) && response.size <= 1) ||
+        !response.respond_to?(:body) || response.body.empty?
+    end
+
+    def file?(headers)
+      headers["Content-Transfer-Encoding"] == "binary"
+    end
+
+    def html_request?(headers, response)
+      headers['Content-Type'] && headers['Content-Type'].include?('text/html') && response.body.include?("<html")
+    end
+  end
+end

data/lib/xray/version.rb

@@ -0,0 +1,3 @@
+module Xray
+  VERSION = "0.1.1"
+end

data/lib/xray-rails.rb

@@ -0,0 +1,106 @@
+require "json"
+require "active_support/all"
+require_relative "xray/version"
+require_relative "xray/config"
+require_relative "xray/middleware"
+
+if defined?(Rails) && Rails.env.development?
+  require "xray/engine"
+end
+
+module Xray
+  FILE_PLACEHOLDER = '$file'
+
+  # Used to collect request information during each request cycle for use in
+  # the Xray bar.
+  # TODO: there's nothing thread-safe about this. Not sure how big of a deal that is.
+  def self.request_info
+    @request_info ||= {}
+  end
+
+  # Patterns for the kind of JS constructors Xray is interested in knowing the
+  # filepath of. Unforunately, these patterns will result in a lot of false
+  # positives, because we can't only match direct Backbone.View subclasses -
+  # the app's JS may have a more complex class hierarchy than that.
+  CONSTRUCTOR_PATTERNS = [
+    '(?!jQuery|_)[\w\.]+\.extend\({', # Match uses of extend(), excluding jQuery and underscore
+    '\(function\(_super\) {'          # Coffeescript-generated constructors
+  ]
+
+  # Example matches:
+  #   MyView = Backbone.View.extend({ ...
+  #   Foo.MyView = Backbone.View.extend({ ...
+  #   MyView = (function(_super) { ...
+  #
+  # Captures:
+  #   $1 = space before the constructor
+  #   $2 = the constructor's name
+  #   $3 = the beginning of the constructor function
+  CONSTRUCTOR_REGEX = /^( *)([\w\.]+) *= *(#{CONSTRUCTOR_PATTERNS.join('|')})/
+
+  # Returns augmented JS source where constructors Xray wants to know the
+  # filepath of are captured in such a way that at runtime, xray.js can look
+  # up a view constructor's filepath and name.
+  #
+  # This:
+  #   MyView = Backbone.View.extend({ ...
+  #
+  # Becomes:
+  #   MyView = (window.XrayPaths||(window.XrayPaths={}))['{"name":"MyView","path":"/path/to/file.js"}'] = Backbone.View.extend({ ...
+  #
+  # A goal here was to not add any new lines to the source so as not to throw
+  # off line numbers if an exception is thrown, hence the odd pattern of
+  # abusing an object set operation in a multiple assignment.
+  #
+  # TODO: This is simple and gets the job done, but is a bit ridiculous.
+  #       I've also seen this appear in stack traces :( Would love to find a
+  #       way to do this without actually writing to the files.
+  def self.augment_js(source, path)
+    source.gsub(CONSTRUCTOR_REGEX) do
+      space, class_name, func = $1, $2, $3
+      info = {name: class_name, path: path.to_s}
+      xray = "(window.XrayPaths||(window.XrayPaths={}))['#{info.to_json}']"
+      "#{space}#{class_name} = #{xray} = #{func}"
+    end
+  end
+
+  # Returns augmented HTML where the source is simply wrapped in an HTML
+  # comment with filepath info. Xray.js uses these comments to associate
+  # elements with the tempaltes that rendered them.
+  #
+  # This:
+  #   <div class=".my-element">
+  #     ...
+  #   </div>
+  #
+  # Becomes:
+  #   <!-- XRAY START 123 /path/to/file.html -->
+  #   <div class=".my-element">
+  #     ...
+  #   </div>
+  #   <!-- XRAY END 123 -->
+  def self.augment_template(source, path)
+    id = next_id
+    # skim doesn't allow html comments, so use skim's comment syntax if it's skim
+    if path =~ /\.(skim)(\.|$)/
+      augmented = "/!XRAY START #{id} #{path}\n#{source}\n/!XRAY END #{id}"
+    else
+      augmented = "<!--XRAY START #{id} #{path}-->\n#{source}\n<!--XRAY END #{id}-->"
+    end
+    ActiveSupport::SafeBuffer === source ? ActiveSupport::SafeBuffer.new(augmented) : augmented
+  end
+
+  def self.next_id
+    @id = (@id ||= 0) + 1
+  end
+
+  def self.open_file(file)
+    editor = Xray.config.editor
+    cmd = if editor.include?('$file')
+      editor.gsub '$file', file
+    else
+      "#{editor} #{file}"
+    end
+    Open3.capture3(cmd)
+  end
+end

metadata

@@ -0,0 +1,201 @@
+--- !ruby/object:Gem::Specification
+name: xray-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+  prerelease: 
+platform: ruby
+authors:
+- Brent Dillingham
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-05-01 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: coffee-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: backbone-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: eco
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+description: Provides a dev bar and an overlay in-browser to visualize your UI's rendered
+  partials and Backbone views
+email:
+- brentdillingham@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- app/assets/javascripts/xray-backbone.js.coffee
+- app/assets/javascripts/xray.js.coffee
+- app/assets/stylesheets/xray.css
+- app/views/_xray_bar.html.erb
+- lib/xray/config.rb
+- lib/xray/engine.rb
+- lib/xray/middleware.rb
+- lib/xray/version.rb
+- lib/xray-rails.rb
+- LICENSE
+- README.md
+homepage: https://github.com/brentd/xray-rails
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: Reveal the structure of your UI
+test_files: []