card-mod-format 0.11.0

data/set/all/header.rb

@@ -0,0 +1,62 @@
+# LOCALIZE first item
+TOGGLE_MAP = { close: %w[open open], open: %w[close closed] }.freeze
+
+format :html do
+  view :header, perms: :none do
+    main_header
+  end
+
+  def main_header
+    header_wrap _render_header_title
+  end
+
+  def header_wrap content=nil
+    haml :header_wrap, content: (block_given? ? yield : output(content))
+  end
+
+  view :header_title, perms: :none do
+    header_title_elements
+  end
+
+  def header_title_elements
+    voo.hide :title_toggle if show_view?(:icon_toggle, :hide)
+    title_view = show_view?(:title_toggle, :hide) ? :title_toggle : :title
+    [_render_icon_toggle(optional: :hide), _render(title_view)]
+  end
+
+  def show_draft_link?
+    card.drafts.present? && @slot_view == :edit
+  end
+
+  view :title_toggle, perms: :none do
+    content_toggle(_render_title(hide: :title_link))
+  end
+
+  view :icon_toggle, perms: :none do
+    direction = @toggle_mode == :close ? :expand : :collapse_down
+    content_toggle icon_tag(direction)
+  end
+
+  view :toggle, :icon_toggle  # deprecated; use icon_toggle
+
+  def content_toggle text=""
+    return if text.nil?
+
+    verb, adjective = toggle_verb_adjective
+    link_to_view adjective, text, title: "#{verb} #{card.name}",   # LOCALIZE
+                                  class: "toggle-#{adjective} toggler nodblclick"
+  end
+
+  def toggle_view
+    toggle_verb_adjective.last
+  end
+
+  def toggle_verb_adjective
+    TOGGLE_MAP[@toggle_mode || :open] ||
+      raise(Card::Error, "invalid toggle mode: #{@toggle_mode}")
+  end
+
+  def structure_editable?
+    card.structure && card.template.ok?(:update)
+  end
+end

data/set/all/header/header_wrap.haml

@@ -0,0 +1,4 @@
+%div{ class: [classy("d0-card-header")], href: path(view: toggle_view) }
+  = _render_menu
+  %div{ class: classy("d0-card-header-title") }
+    = content

data/set/all/html_content.rb

@@ -0,0 +1,168 @@
+format :html do
+  def prepare_content_slot
+    class_up "card-slot", "d0-card-content"
+    voo.hide :menu
+  end
+
+  before(:content) { prepare_content_slot }
+
+  view :content do
+    voo.hide :edit_button
+    wrap do
+      [_render_menu, _render_core, _render_edit_button(edit: :inline)]
+    end
+  end
+
+  before(:content_with_edit_button) do
+    prepare_content_slot
+  end
+
+  view :content_with_edit_button do
+    wrap do
+      [_render_menu, _render_core, _render_edit_button(edit: :inline)]
+    end
+  end
+
+  view :short_content, wrap: { div: { class: "text-muted" } } do
+    short_content
+  end
+
+  view :raw_one_line_content, unknown: :mini_unknown,
+                              wrap: { div: { class: "text-muted" } } do
+    raw_one_line_content
+  end
+
+  view :one_line_content, unknown: :mini_unknown,
+                          wrap: { div: { class: "text-muted" } } do
+    one_line_content
+  end
+
+  before(:content_with_title) { prepare_content_slot }
+
+  view :content_with_title do
+    wrap true, title: card.format(:text).render_core do
+      [_render_menu, _render_core]
+    end
+  end
+
+  before :content_panel do
+    prepare_content_slot
+    class_up "card-slot", "card"
+  end
+
+  view :content_panel do
+    wrap do
+      wrap_with :div, class: "card-body" do
+        [_render_menu, _render_core]
+      end
+    end
+  end
+
+  view :titled do
+    @content_body = true
+    wrap do
+      [
+        naming { render_header },
+        render_flash,
+        wrap_body { render_titled_content },
+        render_comment_box(optional: :hide)
+      ]
+    end
+  end
+
+  view :labeled, unknown: true do
+    @content_body = true
+    wrap(true, class: "row") do
+      labeled(render_title, wrap_body { "#{render_menu}#{render_labeled_content}" })
+    end
+  end
+
+  def labeled label, content
+    haml :labeled, label: label, content: content
+  end
+
+  def labeled_field field, item_view=:name, opts={}
+    opts[:title] ||= Card.fetch_name field
+    field_nest field, opts.merge(view: :labeled,
+                                 items: (opts[:items] || {}).merge(view: item_view))
+  end
+
+  view :open do
+    toggle_logic
+    @toggle_mode = :open
+    @content_body = true
+    frame do
+      [_render_open_content, render_comment_box(optional: :hide)]
+    end
+  end
+
+  view :closed do
+    with_nest_mode :compact do
+      toggle_logic
+      class_up "d0-card-body", "closed-content"
+      @content_body = false
+      @toggle_mode = :close
+      frame
+    end
+  end
+
+  def toggle_logic
+    show_view?(:title_link, :hide) ? voo.show(:icon_toggle) : voo.show(:title_toggle)
+  end
+
+  def current_set_card
+    set_name = params[:current_set]
+    set_name ||= "#{card.name}+*type" if card.known? && card.type_id == Card::CardtypeID
+    set_name ||= "#{card.name}+*self"
+    Card.fetch(set_name)
+  end
+
+  def raw_one_line_content
+    cleaned = Card::Content.clean! render_raw, {}
+    cut_with_ellipsis cleaned
+  end
+
+  def one_line_content
+    # TODO: use a version of Card::Content.smart_truncate
+    #       that counts characters instead of clean!
+    cleaned = Card::Content.clean! render_core, {}
+    cut_with_ellipsis cleaned
+  end
+
+  # LOCALIZE
+  def short_content
+    short_content_items || short_content_fields || short_content_from_core
+  end
+
+  def short_content_items
+    return unless card.respond_to? :count
+    "#{count} #{'item'.pluralize count}"
+  end
+
+  def short_content_fields
+    with_short_content_fields do |num_fields|
+      "#{num_fields} #{'field'.pluralize num_fields}" if num_fields.positive?
+    end
+  end
+
+  def with_short_content_fields
+    yield nested_field_names.size if voo.structure || card.structure
+  end
+
+  def short_content_from_core
+    content = render_core
+    if content.blank?
+      "empty"
+    elsif content.size <= 5
+      content
+    elsif content.count("\n") < 2
+      "#{content.size} characters"
+    else
+      "#{content.count("\n") + 1} lines"
+    end
+  end
+
+  def count
+    @count ||= card.count
+  end
+end

data/set/all/html_content/labeled.haml

@@ -0,0 +1,4 @@
+.label.col-4.text-right
+  = label
+.labeled-content.col-8
+  = content

data/set/all/html_error.rb

@@ -0,0 +1,193 @@
+format :html do
+  view :server_error, template: :haml
+
+  view :debug_server_error, wrap: { modal: { size: :full } } do
+    error_page = BetterErrors::ErrorPage.new Card::Error.current,
+                                             "PATH_INFO" => request.env["REQUEST_URI"]
+    haml :debug_server_error, {}, error_page
+  end
+
+  view :unknown do
+    createable { wrap { unknown_link "#{unknown_icon} #{render_title}" } }
+  end
+
+  # icon only, no wrap
+  view :mini_unknown, unknown: true, cache: :never do
+    createable { unknown_link unknown_icon }
+  end
+
+  def createable
+    card.ok?(:create) ? yield : ""
+  end
+
+  def unknown_link text
+    path_opts = voo.type ? { card: { type: voo.type } } : {}
+    link_to_view :new_in_modal, text, path: path_opts, class: classy("unknown-link")
+  end
+
+  def unknown_icon
+    fa_icon "plus-square"
+  end
+
+  view :compact_missing, perms: :none do
+    wrap_with :span, h(title_in_context), class: "text-muted"
+  end
+
+  view :conflict, cache: :never do
+    actor_link = link_to_card card.last_action.act.actor.name
+    class_up "card-slot", "error-view"
+    wrap do # LOCALIZE
+      alert "warning" do
+        %(
+          <strong>Conflict!</strong>
+          <span class="new-current-revision-id">#{card.last_action_id}</span>
+          <div>#{actor_link} has also been making changes.</div>
+          <div>Please examine below, resolve above, and re-submit.</div>
+          #{render_act}
+        )
+      end
+    end
+  end
+
+  view :errors, perms: :none do
+    return if card.errors.empty?
+
+    voo.title = card.name.blank? ? "Problems" : tr(:problems_name, cardname: card.name)
+    voo.hide! :menu
+    class_up "alert", "card-error-msg"
+    standard_errors voo.title
+  end
+
+  view :not_found do
+    voo.hide! :menu
+    voo.title = "Not Found"
+    frame do
+      [not_found_errors, sign_in_or_up_links("to create it")]
+    end
+  end
+
+  view :denial do
+    focal? ? loud_denial : quiet_denial
+  end
+
+  def view_for_unknown view
+    main? && ok?(:create) ? :new : super
+  end
+
+  def show_all_errors?
+    # make configurable by env
+    Auth.always_ok? || Rails.env.development?
+  end
+
+  def error_cardname exception
+    cardname = super
+    show_all_errors? ? backtrace_link(cardname, exception) : cardname
+  end
+
+  def rendering_error exception, view
+    wrap_with(:span, class: "render-error alert alert-danger") { super }
+  end
+
+  def error_modal_id
+    @error_modal_id ||= unique_id
+  end
+
+  def error_message exception
+    %{
+      <h3>Error message (visible to admin only)</h3>
+      <p><strong>#{CGI.escapeHTML exception.message}</strong></p>
+      <div>#{exception.backtrace * "<br>\n"}</div>
+    }
+  end
+
+  def backtrace_link cardname, exception
+    # TODO: make this a modal link after new modal handling is merged in
+    wrap_with(:span, title: error_message(exception)) { cardname }
+  end
+
+  def standard_errors heading=nil
+    alert "warning", true do
+      [
+        (wrap_with(:h4, heading, class: "alert-heading error") if heading),
+        error_messages.join("<hr>")
+      ]
+    end
+  end
+
+  def simple_error_message message
+    h message
+  end
+
+  def standard_error_message error
+    "<p><strong>#{h error.attribute.to_s.upcase}:</strong> #{h error.message}</p>"
+  end
+
+  def not_found_errors
+    if card.errors.any?
+      standard_errors
+    else
+      haml :not_found
+    end
+  end
+
+  def sign_in_or_up_links to_task
+    return if Auth.signed_in?
+
+    links = [signin_link, signup_link].compact.join " #{tr :or} "
+    wrap_with(:div) do
+      [tr(:please), links, to_task].join(" ") + "."
+    end
+  end
+
+  def signin_link
+    link_to_card :signin, tr(:sign_in),
+                 class: "signin-link", slotter: true, path: { view: :open }
+  end
+
+  def signup_link
+    return unless signup_ok?
+
+    link_to_card :signup, tr(:sign_up),
+                 class: "signup-link", slotter: true, path: { action: :new }
+  end
+
+  def signup_ok?
+    Card.new(type_id: Card::SignupID).ok? :create
+  end
+
+  def quiet_denial
+    wrap_with :span, class: "denied" do
+      "<!-- Sorry, you don't have permission (#{@denied_task}) -->"
+    end
+  end
+
+  def loud_denial
+    voo.hide :menu
+    frame do
+      [wrap_with(:h1, tr(:sorry)),
+       wrap_with(:div, loud_denial_message)]
+    end
+  end
+
+  def loud_denial_message
+    to_task = @denied_task ? tr(:denied_task, denied_task: @denied_task) : tr(:to_do_that)
+
+    case
+    when not_denied_task_read?
+      tr(:read_only)
+    when Auth.signed_in?
+      tr(:need_permission_task, task: to_task)
+    else
+      Env.save_interrupted_action request.env["REQUEST_URI"]
+      sign_in_or_up_links to_do_unauthorized_task
+    end
+  end
+
+  def not_denied_task_read?
+    @denied_task != :read && Card.config.read_only
+  end
+
+  def to_do_unauthorized_task
+    @denied_task ? tr(:denied_task, denied_task: @denied_task) : tr(:to_do_that)
+  end
+end

data/set/all/html_error/debug_server_error.haml

@@ -0,0 +1,1015 @@
+
+:css
+  /* Basic reset */
+      * {
+          margin: 0;
+          padding: 0;
+      }
+
+      table {
+          width: 100%;
+          border-collapse: collapse;
+      }
+
+      th, td {
+          vertical-align: top;
+          text-align: left;
+      }
+
+      textarea {
+          resize: none;
+      }
+
+      body {
+          font-size: 10pt;
+      }
+
+      body, td, input, textarea {
+          font-family: helvetica neue, lucida grande, sans-serif;
+          line-height: 1.5;
+          color: #333;
+          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+      }
+
+      html {
+          background: #f0f0f5;
+      }
+
+      .clearfix::after{
+          clear: both;
+          content: ".";
+          display: block;
+          height: 0;
+          visibility: hidden;
+      }
+
+      /* ---------------------------------------------------------------------
+       * Basic layout
+       * --------------------------------------------------------------------- */
+
+      /* Small */
+      @media screen and (max-width: 1100px) {
+          html {
+              overflow-y: scroll;
+          }
+
+          body {
+              margin: 0 20px;
+          }
+
+          header.exception {
+              margin: 0 -20px;
+          }
+
+          nav.sidebar {
+              padding: 0;
+              margin: 20px 0;
+          }
+
+          ul.frames {
+              max-height: 200px;
+              overflow: auto;
+          }
+      }
+
+      /* Wide */
+      @media screen and (min-width: 1100px) {
+          header.exception {
+             position: fixed;
+             top: 0;
+             left: 0;
+             right: 0;
+          }
+
+          nav.sidebar,
+          .frame_info {
+              position: fixed;
+              top: 95px;
+              bottom: 0;
+
+              box-sizing: border-box;
+
+              overflow-y: auto;
+              overflow-x: hidden;
+          }
+
+          nav.sidebar {
+              width: 40%;
+              left: 20px;
+              top: 115px;
+              bottom: 20px;
+          }
+
+          .frame_info {
+              right: 0;
+              left: 40%;
+
+              padding: 20px;
+              padding-left: 10px;
+              margin-left: 30px;
+          }
+      }
+
+      nav.sidebar {
+          background: #d3d3da;
+          border-top: solid 3px #a33;
+          border-bottom: solid 3px #a33;
+          border-radius: 4px;
+          box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+      }
+
+      /* ---------------------------------------------------------------------
+       * Header
+       * --------------------------------------------------------------------- */
+
+      header.exception {
+          padding: 18px 20px;
+
+          height: 59px;
+          min-height: 59px;
+
+          overflow: hidden;
+
+          background-color: #20202a;
+          color: #aaa;
+          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+          font-weight: 200;
+          box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+
+          -webkit-text-smoothing: antialiased;
+      }
+
+      /* Heading */
+      header.exception h2 {
+          font-weight: 200;
+          font-size: 11pt;
+      }
+
+      header.exception h2,
+      header.exception p {
+          line-height: 1.4em;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
+      }
+
+      header.exception h2 strong {
+          font-weight: 700;
+          color: #d55;
+      }
+
+      header.exception p {
+          font-weight: 200;
+          font-size: 20pt;
+          color: white;
+      }
+
+      header.exception:hover {
+          height: auto;
+          z-index: 2;
+      }
+
+      header.exception:hover h2,
+      header.exception:hover p {
+          padding-right: 20px;
+          overflow-y: auto;
+          word-wrap: break-word;
+          white-space: pre-wrap;
+          height: auto;
+          max-height: 7.5em;
+      }
+
+      @media screen and (max-width: 1100px) {
+          header.exception {
+              height: auto;
+          }
+
+          header.exception h2,
+          header.exception p {
+              padding-right: 20px;
+              overflow-y: auto;
+              word-wrap: break-word;
+              height: auto;
+              max-height: 7em;
+          }
+      }
+
+  <haml_silent>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  </haml_silent>
+      /* ---------------------------------------------------------------------
+       * Navigation
+       * --------------------------------------------------------------------- */
+
+      nav.tabs {
+          border-bottom: solid 1px #ddd;
+
+          background-color: #eee;
+          text-align: center;
+
+          padding: 6px;
+
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+      }
+
+      nav.tabs a {
+          display: inline-block;
+
+          height: 22px;
+          line-height: 22px;
+          padding: 0 10px;
+
+          text-decoration: none;
+          font-size: 8pt;
+          font-weight: bold;
+
+          color: #999;
+          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+      }
+
+      nav.tabs a.selected {
+          color: white;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 16px;
+          box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
+          text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4);
+      }
+
+      nav.tabs a.disabled {
+          text-decoration: line-through;
+          text-shadow: none;
+          cursor: default;
+      }
+
+      /* ---------------------------------------------------------------------
+       * Sidebar
+       * --------------------------------------------------------------------- */
+
+      ul.frames {
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Each item */
+      ul.frames li {
+          background-color: #f8f8f8;
+          background: -webkit-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
+          background: -moz-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
+          background: linear-gradient(top, #f8f8f8 80%, #f0f0f0);
+          box-shadow: inset 0 -1px 0 #e2e2e2;
+          padding: 7px 20px;
+
+          cursor: pointer;
+          overflow: hidden;
+      }
+
+      ul.frames .name,
+      ul.frames .location {
+          overflow: hidden;
+          height: 1.5em;
+
+          white-space: nowrap;
+          word-wrap: none;
+          text-overflow: ellipsis;
+      }
+
+      ul.frames .method {
+          color: #966;
+      }
+
+      ul.frames .location {
+          font-size: 0.85em;
+          font-weight: 400;
+          color: #999;
+      }
+
+      ul.frames .line {
+          font-weight: bold;
+      }
+
+      /* Selected frame */
+      ul.frames li.selected {
+          background: #38a;
+          box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      ul.frames li.selected .name,
+      ul.frames li.selected .method,
+      ul.frames li.selected .location {
+          color: white;
+          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+      }
+
+      ul.frames li.selected .location {
+          opacity: 0.6;
+      }
+
+      /* Iconography */
+      ul.frames li {
+          padding-left: 60px;
+          position: relative;
+      }
+
+      ul.frames li .icon {
+          display: block;
+          width: 20px;
+          height: 20px;
+          line-height: 20px;
+          border-radius: 15px;
+
+          text-align: center;
+
+          background: white;
+          border: solid 2px #ccc;
+
+          font-size: 9pt;
+          font-weight: 200;
+          font-style: normal;
+
+          position: absolute;
+          top: 14px;
+          left: 20px;
+      }
+
+      ul.frames .icon.application {
+          background: #808090;
+          border-color: #555;
+      }
+
+      ul.frames .icon.application:before {
+          content: 'A';
+          color: white;
+          text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+      }
+
+      /* Responsiveness -- flow to single-line mode */
+      @media screen and (max-width: 1100px) {
+          ul.frames li {
+              padding-top: 6px;
+              padding-bottom: 6px;
+              padding-left: 36px;
+              line-height: 1.3;
+          }
+
+          ul.frames li .icon {
+              width: 11px;
+              height: 11px;
+              line-height: 11px;
+
+              top: 7px;
+              left: 10px;
+              font-size: 5pt;
+          }
+
+          ul.frames .name,
+          ul.frames .location {
+              display: inline-block;
+              line-height: 1.3;
+              height: 1.3em;
+          }
+
+          ul.frames .name {
+              margin-right: 10px;
+          }
+      }
+
+      /* ---------------------------------------------------------------------
+       * Monospace
+       * --------------------------------------------------------------------- */
+
+      pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums {
+          font-family: menlo, lucida console, monospace;
+          font-size: 8pt;
+      }
+
+      /* ---------------------------------------------------------------------
+       * Display area
+       * --------------------------------------------------------------------- */
+
+      .trace_info {
+          background: #fff;
+          padding: 6px;
+          border-radius: 3px;
+          margin-bottom: 2px;
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
+      }
+
+      .code_block{
+          background: #f1f1f1;
+          border-left: 1px solid #ccc;
+      }
+
+      /* Titlebar */
+      .trace_info .title {
+          background: #f1f1f1;
+
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+          overflow: hidden;
+          padding: 6px 10px;
+
+          border: solid 1px #ccc;
+          border-bottom: 0;
+
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+      }
+
+      .trace_info .title .name,
+      .trace_info .title .location {
+          font-size: 9pt;
+          line-height: 26px;
+          height: 26px;
+          overflow: hidden;
+      }
+
+      .trace_info .title .location {
+          float: left;
+          font-weight: bold;
+          font-size: 10pt;
+      }
+
+      .trace_info .title .location a {
+          color:inherit;
+          text-decoration:none;
+          border-bottom:1px solid #aaaaaa;
+      }
+
+      .trace_info .title .location a:hover {
+          border-color:#666666;
+      }
+
+      .trace_info .title .name {
+          float: right;
+          font-weight: 200;
+      }
+
+      .code, .be-console, .unavailable {
+          background: #fff;
+          padding: 5px;
+
+          box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+      }
+
+      .code_linenums{
+          background:#f1f1f1;
+          padding-top:10px;
+          padding-bottom:9px;
+          float:left;
+      }
+
+      .code_linenums span{
+          display:block;
+          padding:0 12px;
+      }
+
+      .code {
+          margin-bottom: -1px;
+          border-top-left-radius:2px;
+          padding: 10px 0;
+          overflow: auto;
+      }
+
+      .code pre{
+          padding-left:12px;
+          min-height:16px;
+      }
+
+      /* Source unavailable */
+      p.unavailable {
+          padding: 20px 0 40px 0;
+          text-align: center;
+          color: #b99;
+          font-weight: bold;
+      }
+
+      p.unavailable:before {
+          content: '\00d7';
+          display: block;
+
+          color: #daa;
+
+          text-align: center;
+          font-size: 40pt;
+          font-weight: normal;
+          margin-bottom: -10px;
+      }
+
+      @-webkit-keyframes highlight {
+          0%   { background: rgba(220, 30, 30, 0.3); }
+          100% { background: rgba(220, 30, 30, 0.1); }
+      }
+      @-moz-keyframes highlight {
+          0%   { background: rgba(220, 30, 30, 0.3); }
+          100% { background: rgba(220, 30, 30, 0.1); }
+      }
+      @keyframes highlight {
+          0%   { background: rgba(220, 30, 30, 0.3); }
+          100% { background: rgba(220, 30, 30, 0.1); }
+      }
+
+      .code .highlight, .code_linenums .highlight {
+          background: rgba(220, 30, 30, 0.1);
+          -webkit-animation: highlight 400ms linear 1;
+          -moz-animation: highlight 400ms linear 1;
+          animation: highlight 400ms linear 1;
+      }
+
+      /* REPL shell */
+      .be-console {
+          padding: 0 1px 10px 1px;
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+      }
+
+      .be-console pre {
+          padding: 10px 10px 0 10px;
+          max-height: 400px;
+          overflow-x: none;
+          overflow-y: auto;
+          margin-bottom: -3px;
+          word-wrap: break-word;
+          white-space: pre-wrap;
+      }
+
+      /* .command-line > span + input */
+      .be-console .command-line {
+          display: table;
+          width: 100%;
+      }
+
+      .be-console .command-line span,
+      .be-console .command-line input {
+          display: table-cell;
+      }
+
+      .be-console .command-line span {
+          width: 1%;
+          padding-right: 5px;
+          padding-left: 10px;
+          white-space: pre;
+      }
+
+      .be-console .command-line input {
+          width: 99%;
+      }
+
+      /* Input box */
+      .be-console input,
+      .be-console input:focus {
+          outline: 0;
+          border: 0;
+          padding: 0;
+          background: transparent;
+          margin: 0;
+      }
+
+      /* Hint text */
+      .hint {
+          margin: 15px 0 20px 0;
+          font-size: 8pt;
+          color: #8080a0;
+          padding-left: 20px;
+      }
+
+      .hint:before {
+          content: '\25b2';
+          margin-right: 5px;
+          opacity: 0.5;
+      }
+
+      /* ---------------------------------------------------------------------
+       * Variable infos
+       * --------------------------------------------------------------------- */
+
+      .sub {
+          padding: 10px 0;
+          margin: 10px 0;
+      }
+
+      .sub:before {
+          content: '';
+          display: block;
+          width: 100%;
+          height: 4px;
+
+          border-radius: 2px;
+          background: rgba(0, 150, 200, 0.05);
+          box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 2px 2px 2px rgba(0, 0, 0, 0.07);
+      }
+
+      .sub h3 {
+          color: #39a;
+          font-size: 1.1em;
+          margin: 10px 0;
+          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+
+          -webkit-font-smoothing: antialiased;
+      }
+
+      .sub .inset {
+          overflow-y: auto;
+      }
+
+      .sub table {
+          table-layout: fixed;
+      }
+
+      .sub table td {
+          border-top: dotted 1px #ddd;
+          padding: 7px 1px;
+      }
+
+      .sub table td.name {
+          width: 150px;
+
+          font-weight: bold;
+          font-size: 0.8em;
+          padding-right: 20px;
+
+          word-wrap: break-word;
+      }
+
+      .sub table td pre {
+          max-height: 15em;
+          overflow-y: auto;
+      }
+
+      .sub table td pre {
+          width: 100%;
+
+          word-wrap: break-word;
+          white-space: normal;
+      }
+
+      /* "(object doesn't support inspect)" */
+      .sub .unsupported {
+        font-family: sans-serif;
+        color: #777;
+      }
+
+      /* ---------------------------------------------------------------------
+       * Scrollbar
+       * --------------------------------------------------------------------- */
+
+      nav.sidebar::-webkit-scrollbar,
+      .inset pre::-webkit-scrollbar,
+      .be-console pre::-webkit-scrollbar,
+      .code::-webkit-scrollbar {
+          width: 10px;
+          height: 10px;
+      }
+
+      .inset pre::-webkit-scrollbar-thumb,
+      .be-console pre::-webkit-scrollbar-thumb,
+      .code::-webkit-scrollbar-thumb {
+          background: #ccc;
+          border-radius: 5px;
+      }
+
+      nav.sidebar::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.0);
+          border-radius: 5px;
+      }
+
+      nav.sidebar:hover::-webkit-scrollbar-thumb {
+          background-color: #999;
+          background: -webkit-linear-gradient(left, #aaa, #999);
+      }
+
+      .be-console pre:hover::-webkit-scrollbar-thumb,
+      .inset pre:hover::-webkit-scrollbar-thumb,
+      .code:hover::-webkit-scrollbar-thumb {
+          background: #888;
+      }
+:javascript
+  (function() {
+      var elements = ["section", "nav", "header", "footer", "audio"];
+      for (var i = 0; i < elements.length; i++) {
+          document.createElement(elements[i]);
+      }
+  })();
+:javascript
+  if (window.Turbolinks) {
+      for(var i=0; i < document.styleSheets.length; i++) {
+          if(document.styleSheets[i].href)
+              document.styleSheets[i].disabled = true;
+      }
+      if (window.Turbolinks.controller) {
+          // Turbolinks > 5 (see https://github.com/turbolinks/turbolinks/issues/6)
+          document.addEventListener("turbolinks:load", function restoreCSS(e) {
+              for(var i=0; i < document.styleSheets.length; i++) {
+                  document.styleSheets[i].disabled = false;
+              }
+              document.removeEventListener("turbolinks:load", restoreCSS, false);
+          });
+      } else {
+          document.addEventListener("page:restore", function restoreCSS(e) {
+              for(var i=0; i < document.styleSheets.length; i++) {
+                  document.styleSheets[i].disabled = false;
+              }
+              document.removeEventListener("page:restore", restoreCSS, false);
+          });
+      }
+  }
+.top
+  %header.exception
+    %h2
+      %strong= exception_type
+      %span
+        at #{request_path}
+    %p= exception_message
+%section.backtrace
+  %nav.sidebar
+    %nav.tabs
+      %a#application_frames{:href => "#"} Application Frames
+      %a#all_frames{:href => "#"} All Frames
+    %ul.frames
+      - backtrace_frames.each_with_index do |frame, index|
+        %li{:class => "#{frame.context}", "data-context" => "#{frame.context}", "data-index" => index}
+          %span.stroke
+          %i{:class => "icon #{frame.context}"}
+          .info
+            .name
+              %strong= frame.class_name
+              %span.method= frame.method_name
+            .location
+              %span.filename>= frame.pretty_path
+              , line
+              %span.line= frame.line
+  - backtrace_frames.each_with_index do |frame, index|
+    .frame_info{:id => "frame_info_#{index}", :style => "display:none;"}
+:javascript
+  (function() {
+
+    var OID = "#{id}";
+
+    var previousFrame = null;
+    var previousFrameInfo = null;
+    var allFrames = document.querySelectorAll("ul.frames li");
+    var allFrameInfos = document.querySelectorAll(".frame_info");
+
+    function apiCall(method, opts, cb) {
+        var req = new XMLHttpRequest();
+        req.open("POST", "//" + window.location.host + "/__better_errors/" + OID + "/" + method, true);
+      req.setRequestHeader("Content-Type", "application/json");
+        req.send(JSON.stringify(opts));
+        req.onreadystatechange = function() {
+            if(req.readyState == 4) {
+                var res = JSON.parse(req.responseText);
+                cb(res);
+            }
+        };
+    }
+
+    function escapeHTML(html) {
+        return html.replace(/&/, "&amp;").replace(/</g, "&lt;");
+    }
+
+    function REPL(index) {
+        this.index = index;
+
+        var previousCommands = JSON.parse(localStorage.getItem("better_errors_previous_commands"));
+        if(previousCommands === null) {
+          localStorage.setItem("better_errors_previous_commands", JSON.stringify([]));
+          previousCommands = [];
+        }
+
+        this.previousCommandOffset = previousCommands.length;
+    }
+
+    REPL.all = [];
+
+    REPL.prototype.install = function(containerElement) {
+        this.container = containerElement;
+
+        this.promptElement  = this.container.querySelector(".command-line .prompt");
+        this.inputElement   = this.container.querySelector("input");
+        this.outputElement  = this.container.querySelector("pre");
+
+        var self = this;
+        this.inputElement.onkeydown = function(ev) {
+            self.onKeyDown(ev);
+        };
+
+        this.setPrompt(">>");
+
+        REPL.all[this.index] = this;
+    }
+
+    REPL.prototype.focus = function() {
+        this.inputElement.focus();
+    };
+
+    REPL.prototype.setPrompt = function(prompt) {
+        this._prompt = prompt;
+        this.promptElement.innerHTML = escapeHTML(prompt);
+    };
+
+    REPL.prototype.getInput = function() {
+        return this.inputElement.value;
+    };
+
+    REPL.prototype.setInput = function(text) {
+        this.inputElement.value = text;
+
+        if(this.inputElement.setSelectionRange) {
+            // set cursor to end of input
+            this.inputElement.setSelectionRange(text.length, text.length);
+        }
+    };
+
+    REPL.prototype.writeRawOutput = function(output) {
+        this.outputElement.innerHTML += output;
+        this.outputElement.scrollTop = this.outputElement.scrollHeight;
+    };
+
+    REPL.prototype.writeOutput = function(output) {
+        this.writeRawOutput(escapeHTML(output));
+    };
+
+    REPL.prototype.sendInput = function(line) {
+        var self = this;
+        apiCall("eval", { "index": this.index, source: line }, function(response) {
+            if(response.error) {
+                self.writeOutput(response.error + "\n");
+            }
+            self.writeOutput(self._prompt + " ");
+            self.writeRawOutput(response.highlighted_input + "\n");
+            self.writeOutput(response.result);
+            self.setPrompt(response.prompt);
+            self.setInput(response.prefilled_input);
+        });
+    };
+
+    REPL.prototype.onEnterKey = function() {
+        var text = this.getInput();
+        if(text != "" && text !== undefined) {
+            var previousCommands = JSON.parse(localStorage.getItem("better_errors_previous_commands"));
+            this.previousCommandOffset = previousCommands.push(text);
+            if(previousCommands.length > 100) {
+              previousCommands.splice(0, 1);
+              this.previousCommandOffset -= 1;
+            }
+            localStorage.setItem("better_errors_previous_commands", JSON.stringify(previousCommands));
+        }
+        this.setInput("");
+        this.sendInput(text);
+    };
+
+    REPL.prototype.onNavigateHistory = function(direction) {
+        this.previousCommandOffset += direction;
+        var previousCommands = JSON.parse(localStorage.getItem("better_errors_previous_commands"));
+
+        if(this.previousCommandOffset < 0) {
+            this.previousCommandOffset = -1;
+            this.setInput("");
+            return;
+        }
+
+        if(this.previousCommandOffset >= previousCommands.length) {
+            this.previousCommandOffset = previousCommands.length;
+            this.setInput("");
+            return;
+        }
+
+        this.setInput(previousCommands[this.previousCommandOffset]);
+    };
+
+    REPL.prototype.onKeyDown = function(ev) {
+        if(ev.keyCode == 13) {
+            this.onEnterKey();
+        } else if(ev.keyCode == 38 || (ev.ctrlKey && ev.keyCode == 80)) {
+            // the user pressed the up arrow or Ctrl-P
+            this.onNavigateHistory(-1);
+            ev.preventDefault();
+            return false;
+        } else if(ev.keyCode == 40 || (ev.ctrlKey && ev.keyCode == 78)) {
+            // the user pressed the down arrow or Ctrl-N
+            this.onNavigateHistory(1);
+            ev.preventDefault();
+            return false;
+        }
+    };
+
+    function switchTo(el) {
+        if(previousFrameInfo) previousFrameInfo.style.display = "none";
+        previousFrameInfo = el;
+
+        el.style.display = "block";
+
+        var replInput = el.querySelector('.be-console input');
+        if (replInput) replInput.focus();
+    }
+
+    function selectFrameInfo(index) {
+        var el = allFrameInfos[index];
+        if(el) {
+            if (el.loaded) {
+                return switchTo(el);
+            }
+
+            apiCall("variables", { "index": index }, function(response) {
+                el.loaded = true;
+                if(response.error) {
+                    el.innerHTML = "<h2 class='error'>" + escapeHTML(response.error) + "</h2>";
+                    if(response.explanation) {
+                      el.innerHTML += "<p class='explanation'>" + escapeHTML(response.explanation) + "</p>";
+                    }
+                    el.innerHTML += "<p><a target='_new' href='https://github.com/BetterErrors/better_errors'>More about Better Errors</a></p>";
+                } else {
+                    el.innerHTML = response.html;
+
+                    var repl = el.querySelector(".be-repl .be-console");
+                    if(repl) {
+                        new REPL(index).install(repl);
+                    }
+                }
+                switchTo(el);
+            });
+        }
+    }
+
+    for(var i = 0; i < allFrames.length; i++) {
+        (function(i, el) {
+            var el = allFrames[i];
+            el.onclick = function() {
+                if(previousFrame) {
+                    previousFrame.className = "";
+                }
+                el.className = "selected";
+                previousFrame = el;
+
+                selectFrameInfo(el.attributes["data-index"].value);
+            };
+        })(i);
+    }
+
+    // Click the first application frame
+    (
+      document.querySelector(".frames li.application") ||
+      document.querySelector(".frames li")
+    ).onclick();
+
+    // This is the second query performed for frames; maybe the 'allFrames' list
+    // currently used and this list can be better used to avoid the repetition:
+    var applicationFramesCount = document.querySelectorAll(
+        "ul.frames li[data-context=application]"
+    ).length;
+
+    var applicationFramesButtonIsInstalled = false;
+    var applicationFramesButton = document.getElementById("application_frames");
+    var allFramesButton = document.getElementById("all_frames");
+
+    // The application frames button only needs to be bound if
+    // there are actually any application frames to look at.
+    var installApplicationFramesButton = function() {
+        applicationFramesButton.onclick = function() {
+            allFramesButton.className = "";
+            applicationFramesButton.className = "selected";
+            for(var i = 0; i < allFrames.length; i++) {
+                if(allFrames[i].attributes["data-context"].value == "application") {
+                    allFrames[i].style.display = "block";
+                } else {
+                    allFrames[i].style.display = "none";
+                }
+            }
+            return false;
+        };
+
+        applicationFramesButtonIsInstalled = true;
+    }
+
+    allFramesButton.onclick = function() {
+        if(applicationFramesButtonIsInstalled) {
+            applicationFramesButton.className = "";
+        }
+
+        allFramesButton.className = "selected";
+        for(var i = 0; i < allFrames.length; i++) {
+            allFrames[i].style.display = "block";
+        }
+        return false;
+    };
+
+    // If there are no application frames, select the 'All Frames'
+    // tab by default.
+    if(applicationFramesCount > 0) {
+        installApplicationFramesButton();
+        applicationFramesButton.onclick();
+    } else {
+        applicationFramesButton.className = "disabled";
+        applicationFramesButton.title = "No application frames available";
+        allFramesButton.onclick();
+    }
+  })();