better_errors 2.8.1 → 2.10.0.beta1

data/gemfiles/rails61_boc.gemfile

@@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gem "rails", "~> 6.1.0rc"
+gem "binding_of_caller"
+
+gem 'simplecov',      require: false
+gem 'simplecov-lcov', require: false
+
+gemspec path: "../"

data/gemfiles/rails61_haml.gemfile

@@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gem "rails", "~> 6.1.0rc"
+gem "haml"
+
+gem 'simplecov',      require: false
+gem 'simplecov-lcov', require: false
+
+gemspec path: "../"

data/lib/better_errors.rb

@@ -3,6 +3,7 @@ require "erubi"
 require "coderay"
 require "uri"
 
+require "better_errors/version"
 require "better_errors/code_formatter"
 require "better_errors/inspectable_value"
 require "better_errors/error_page"
@@ -10,21 +11,9 @@ require "better_errors/middleware"
 require "better_errors/raised_exception"
 require "better_errors/repl"
 require "better_errors/stack_frame"
-require "better_errors/version"
+require "better_errors/editor"
 
 module BetterErrors
-  POSSIBLE_EDITOR_PRESETS = [
-    { symbols: [:emacs, :emacsclient],  sniff: /emacs/i, url: "emacs://open?url=file://%{file}&line=%{line}" },
-    { symbols: [:macvim, :mvim],        sniff: /vim/i,   url: proc { |file, line| "mvim://open?url=file://#{file}&line=#{line}" } },
-    { symbols: [:sublime, :subl, :st],  sniff: /subl/i,  url: "subl://open?url=file://%{file}&line=%{line}" },
-    { symbols: [:textmate, :txmt, :tm], sniff: /mate/i,  url: "txmt://open?url=file://%{file}&line=%{line}" },
-    { symbols: [:idea], sniff: /idea/i, url: "idea://open?file=%{file}&line=%{line}" },
-    { symbols: [:rubymine], sniff: /mine/i, url: "x-mine://open?file=%{file}&line=%{line}" },
-    { symbols: [:vscode, :code], sniff: /code/i, url: "vscode://file/%{file}:%{line}" },
-    { symbols: [:vscodium, :codium], sniff: /codium/i, url: "vscodium://file/%{file}:%{line}" },
-    { symbols: [:atom], sniff: /atom/i,  url: "atom://core/open/file?filename=%{file}&line=%{line}" },
-  ]
-
   class << self
     # The path to the root of the application. Better Errors uses this property
     # to determine if a file in a backtrace should be considered an application
@@ -64,17 +53,18 @@ module BetterErrors
   @maximum_variable_inspect_size = 100_000
   @ignored_classes = ['ActionDispatch::Request', 'ActionDispatch::Response']
 
-  # Returns a proc, which when called with a filename and line number argument,
+  # Returns an object which responds to #url, which when called with
+  # a filename and line number argument,
   # returns a URL to open the filename and line in the selected editor.
   #
   # Generates TextMate URLs by default.
   #
-  #   BetterErrors.editor["/some/file", 123]
+  #   BetterErrors.editor.url("/some/file", 123)
   #     # => txmt://open?url=file:///some/file&line=123
   #
   # @return [Proc]
   def self.editor
-    @editor
+    @editor ||= default_editor
   end
 
   # Configures how Better Errors generates open-in-editor URLs.
@@ -115,20 +105,15 @@ module BetterErrors
   #   @param [Proc] proc
   #
   def self.editor=(editor)
-    POSSIBLE_EDITOR_PRESETS.each do |config|
-      if config[:symbols].include?(editor)
-        return self.editor = config[:url]
-      end
-    end
-
-    if editor.is_a? String
-      self.editor = proc { |file, line| editor % { file: URI.encode_www_form_component(file), line: line } }
+    if editor.is_a? Symbol
+      @editor = Editor.editor_from_symbol(editor)
+      raise(ArgumentError, "Symbol #{editor} is not a symbol in the list of supported errors.") unless editor
+    elsif editor.is_a? String
+      @editor = Editor.for_formatting_string(editor)
+    elsif editor.respond_to? :call
+      @editor = Editor.for_proc(editor)
     else
-      if editor.respond_to? :call
-        @editor = editor
-      else
-        raise TypeError, "Expected editor to be a valid editor key, a format string or a callable."
-      end
+      raise ArgumentError, "Expected editor to be a valid editor key, a format string or a callable."
     end
   end
 
@@ -145,12 +130,8 @@ module BetterErrors
   #
   # @return [Symbol]
   def self.default_editor
-    POSSIBLE_EDITOR_PRESETS.detect(-> { {} }) { |config|
-      ENV["EDITOR"] =~ config[:sniff]
-    }[:url] || :textmate
+    Editor.default_editor
   end
-
-  BetterErrors.editor = default_editor
 end
 
 begin

data/lib/better_errors/editor.rb

@@ -0,0 +1,103 @@
+require "uri"
+
+module BetterErrors
+  class Editor
+    KNOWN_EDITORS = [
+      { symbols: [:atom], sniff: /atom/i, url: "atom://core/open/file?filename=%{file}&line=%{line}" },
+      { symbols: [:emacs, :emacsclient], sniff: /emacs/i, url: "emacs://open?url=file://%{file}&line=%{line}" },
+      { symbols: [:idea], sniff: /idea/i, url: "idea://open?file=%{file}&line=%{line}" },
+      { symbols: [:macvim, :mvim], sniff: /vim/i, url: "mvim://open?url=file://%{file_unencoded}&line=%{line}" },
+      { symbols: [:rubymine], sniff: /mine/i, url: "x-mine://open?file=%{file}&line=%{line}" },
+      { symbols: [:sublime, :subl, :st], sniff: /subl/i, url: "subl://open?url=file://%{file}&line=%{line}" },
+      { symbols: [:textmate, :txmt, :tm], sniff: /mate/i, url: "txmt://open?url=file://%{file}&line=%{line}" },
+      { symbols: [:vscode, :code], sniff: /code/i, url: "vscode://file/%{file}:%{line}" },
+      { symbols: [:vscodium, :codium], sniff: /codium/i, url: "vscodium://file/%{file}:%{line}" },
+    ]
+
+    def self.for_formatting_string(formatting_string)
+      new proc { |file, line|
+        formatting_string % { file: URI.encode_www_form_component(file), file_unencoded: file, line: line }
+      }
+    end
+
+    def self.for_proc(url_proc)
+      new url_proc
+    end
+
+    # Automatically sniffs a default editor preset based on
+    # environment variables.
+    #
+    # @return [Symbol]
+    def self.default_editor
+      editor_from_environment_formatting_string ||
+        editor_from_environment_editor ||
+        editor_from_symbol(:textmate)
+    end
+
+    def self.editor_from_environment_editor
+      if ENV["BETTER_ERRORS_EDITOR"]
+        editor = editor_from_command(ENV["BETTER_ERRORS_EDITOR"])
+        return editor if editor
+        puts "BETTER_ERRORS_EDITOR environment variable is not recognized as a supported Better Errors editor."
+      end
+      if ENV["EDITOR"]
+        editor = editor_from_command(ENV["EDITOR"])
+        return editor if editor
+        puts "EDITOR environment variable is not recognized as a supported Better Errors editor. Using TextMate by default."
+      else
+        puts "Since there is no EDITOR or BETTER_ERRORS_EDITOR environment variable, using Textmate by default."
+      end
+    end
+
+    def self.editor_from_command(editor_command)
+      env_preset = KNOWN_EDITORS.find { |preset| editor_command =~ preset[:sniff] }
+      for_formatting_string(env_preset[:url]) if env_preset
+    end
+
+    def self.editor_from_environment_formatting_string
+      return unless ENV['BETTER_ERRORS_EDITOR_URL']
+
+      for_formatting_string(ENV['BETTER_ERRORS_EDITOR_URL'])
+    end
+
+    def self.editor_from_symbol(symbol)
+      KNOWN_EDITORS.each do |preset|
+        return for_formatting_string(preset[:url]) if preset[:symbols].include?(symbol)
+      end
+    end
+
+    def initialize(url_proc)
+      @url_proc = url_proc
+    end
+
+    def url(raw_path, line)
+      if virtual_path && raw_path.start_with?(virtual_path)
+        if host_path
+          file = raw_path.sub(%r{\A#{virtual_path}}, host_path)
+        else
+          file = raw_path.sub(%r{\A#{virtual_path}/}, '')
+        end
+      else
+        file = raw_path
+      end
+        
+      url_proc.call(file, line)
+    end
+
+    def scheme
+      url('/fake', 42).sub(/:.*/, ':')
+    end
+
+    private
+
+    attr_reader :url_proc
+
+    def virtual_path
+      @virtual_path ||= ENV['BETTER_ERRORS_VIRTUAL_PATH']
+    end
+
+    def host_path
+      @host_path ||= ENV['BETTER_ERRORS_HOST_PATH']
+    end
+  end
+end

data/lib/better_errors/error_page.rb

@@ -5,6 +5,8 @@ require "securerandom"
 module BetterErrors
   # @private
   class ErrorPage
+    VariableInfo = Struct.new(:frame, :editor_url, :rails_params, :rack_session, :start_time)
+
     def self.template_path(template_name)
       File.expand_path("../templates/#{template_name}.erb", __FILE__)
     end
@@ -13,6 +15,15 @@ module BetterErrors
       Erubi::Engine.new(File.read(template_path(template_name)), escape: true)
     end
 
+    def self.render_template(template_name, locals)
+      locals.send(:eval, self.template(template_name).src)
+    rescue => e
+      # Fix the backtrace, which doesn't identify the template that failed (within Better Errors).
+      # We don't know the line number, so just injecting the template path has to be enough.
+      e.backtrace.unshift "#{self.template_path(template_name)}:0"
+      raise
+    end
+
     attr_reader :exception, :env, :repls
 
     def initialize(exception, env)
@@ -26,20 +37,21 @@ module BetterErrors
       @id ||= SecureRandom.hex(8)
     end
 
-    def render(template_name = "main", csrf_token = nil)
-      binding.eval(self.class.template(template_name).src)
-    rescue => e
-      # Fix the backtrace, which doesn't identify the template that failed (within Better Errors).
-      # We don't know the line number, so just injecting the template path has to be enough.
-      e.backtrace.unshift "#{self.class.template_path(template_name)}:0"
-      raise
+    def render_main(csrf_token, csp_nonce)
+      frame = backtrace_frames[0]
+      first_frame_variable_info = VariableInfo.new(frame, editor_url(frame), rails_params, rack_session, Time.now.to_f)
+      self.class.render_template('main', binding)
+    end
+
+    def render_text
+      self.class.render_template('text', binding)
     end
 
     def do_variables(opts)
       index = opts["index"].to_i
-      @frame = backtrace_frames[index]
-      @var_start_time = Time.now.to_f
-      { html: render("variable_info") }
+      frame = backtrace_frames[index]
+      variable_info = VariableInfo.new(frame, editor_url(frame), rails_params, rack_session, Time.now.to_f)
+      { html: self.class.render_template("variable_info", variable_info) }
     end
 
     def do_eval(opts)
@@ -67,6 +79,10 @@ module BetterErrors
       exception.message.strip.gsub(/(\r?\n\s*\r?\n)+/, "\n")
     end
 
+    def exception_hint
+      exception.hint
+    end
+
     def active_support_actions
       return [] unless defined?(ActiveSupport::ActionableError)
 
@@ -90,7 +106,7 @@ module BetterErrors
     private
 
     def editor_url(frame)
-      BetterErrors.editor[frame.filename, frame.line]
+      BetterErrors.editor.url(frame.filename, frame.line)
     end
 
     def rack_session
@@ -109,11 +125,11 @@ module BetterErrors
       env["PATH_INFO"]
     end
 
-    def html_formatted_code_block(frame)
+    def self.html_formatted_code_block(frame)
       CodeFormatter::HTML.new(frame.filename, frame.line).output
     end
 
-    def text_formatted_code_block(frame)
+    def self.text_formatted_code_block(frame)
       CodeFormatter::Text.new(frame.filename, frame.line).output
     end
 
@@ -121,7 +137,7 @@ module BetterErrors
       str + "\n" + char*str.size
     end
 
-    def inspect_value(obj)
+    def self.inspect_value(obj)
       if BetterErrors.ignored_classes.include? obj.class.name
         "<span class='unsupported'>(Instance of ignored class. "\
         "#{obj.class.name ? "Remove #{CGI.escapeHTML(obj.class.name)} from" : "Modify"}"\

data/lib/better_errors/exception_hint.rb

@@ -0,0 +1,29 @@
+module BetterErrors
+  class ExceptionHint
+    def initialize(exception)
+      @exception = exception
+    end
+
+    def hint
+      case exception
+      when NoMethodError
+        /\Aundefined method `(?<method>[^']+)' for (?<val>[^:]+):(?<klass>\w+)/.match(exception.message) do |match|
+          if match[:val] == "nil"
+            return "Something is `nil` when it probably shouldn't be."
+          elsif !match[:klass].start_with? '0x'
+            return "`#{match[:method]}` is being called on a `#{match[:klass]}` object, "\
+              "which might not be the type of object you were expecting."
+          end
+        end
+      when NameError
+        /\Aundefined local variable or method `(?<method>[^']+)' for/.match(exception.message) do |match|
+          return "`#{match[:method]}` is probably misspelled."
+        end
+      end
+    end
+
+    private
+
+    attr_reader :exception
+  end
+end

data/lib/better_errors/middleware.rb

@@ -40,7 +40,7 @@ module BetterErrors
     allow_ip! "127.0.0.0/8"
     allow_ip! "::1/128" rescue nil # windows ruby doesn't have ipv6 support
 
-    CSRF_TOKEN_COOKIE_NAME = 'BetterErrors-CSRF-Token'
+    CSRF_TOKEN_COOKIE_NAME = "BetterErrors-#{BetterErrors::VERSION}-CSRF-Token"
 
     # A new instance of BetterErrors::Middleware
     #
@@ -94,12 +94,13 @@ module BetterErrors
     def show_error_page(env, exception=nil)
       request = Rack::Request.new(env)
       csrf_token = request.cookies[CSRF_TOKEN_COOKIE_NAME] || SecureRandom.uuid
+      csp_nonce = SecureRandom.base64(12)
 
       type, content = if @error_page
         if text?(env)
-          [ 'plain', @error_page.render('text') ]
+          [ 'plain', @error_page.render_text ]
         else
-          [ 'html', @error_page.render('main', csrf_token) ]
+          [ 'html', @error_page.render_main(csrf_token, csp_nonce) ]
         end
       else
         [ 'html', no_errors_page ]
@@ -110,10 +111,25 @@ module BetterErrors
         status_code = ActionDispatch::ExceptionWrapper.new(env, exception).status_code
       end
 
-      response = Rack::Response.new(content, status_code, { "Content-Type" => "text/#{type}; charset=utf-8" })
+      headers = {
+        "Content-Type" => "text/#{type}; charset=utf-8",
+        "Content-Security-Policy" => [
+          "default-src 'none'",
+          # Specifying nonce makes a modern browser ignore 'unsafe-inline' which could still be set 
+          # for older browsers without nonce support.
+          # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
+          "script-src 'self' 'nonce-#{csp_nonce}' 'unsafe-inline'",
+          # Inline style is required by the syntax highlighter.
+          "style-src 'self' 'unsafe-inline'",
+          "connect-src 'self'",
+          "navigate-to 'self' #{BetterErrors.editor.scheme}",
+        ].join('; '),
+      }
+
+      response = Rack::Response.new(content, status_code, headers)
 
       unless request.cookies[CSRF_TOKEN_COOKIE_NAME]
-        response.set_cookie(CSRF_TOKEN_COOKIE_NAME, value: csrf_token, httponly: true, same_site: :strict)
+        response.set_cookie(CSRF_TOKEN_COOKIE_NAME, value: csrf_token, path: "/", httponly: true, same_site: :strict)
       end
 
       # In older versions of Rack, the body returned here is actually a Rack::BodyProxy which seems to be a bug.

data/lib/better_errors/raised_exception.rb

@@ -1,7 +1,9 @@
+require 'better_errors/exception_hint'
+
 # @private
 module BetterErrors
   class RaisedException
-    attr_reader :exception, :message, :backtrace
+    attr_reader :exception, :message, :backtrace, :hint
 
     def initialize(exception)
       if exception.class.name == "ActionView::Template::Error" && exception.respond_to?(:cause)
@@ -23,6 +25,7 @@ module BetterErrors
       @message = exception.message
 
       setup_backtrace
+      setup_hint
       massage_syntax_error
     end
 
@@ -78,5 +81,9 @@ module BetterErrors
         end
       end
     end
+
+    def setup_hint
+      @hint = ExceptionHint.new(exception).hint
+    end
   end
 end

data/lib/better_errors/templates/main.erb

@@ -3,7 +3,7 @@
 <head>
     <title><%= exception_type %> at <%= request_path %></title>
 </head>
-<body>
+<body class="better-errors-javascript-not-loaded">
     <%# Stylesheets are placed in the <body> for Turbolinks compatibility. %>
     <style>
     /* Basic reset */
@@ -90,7 +90,7 @@
         nav.sidebar,
         .frame_info {
             position: fixed;
-            top: 95px;
+            top: 102px;
             bottom: 0;
 
             box-sizing: border-box;
@@ -102,11 +102,13 @@
         nav.sidebar {
             width: 40%;
             left: 20px;
-            top: 115px;
+            top: 122px;
             bottom: 20px;
         }
 
         .frame_info {
+            display: none;
+
             right: 0;
             left: 40%;
 
@@ -114,6 +116,9 @@
             padding-left: 10px;
             margin-left: 30px;
         }
+        .frame_info.current {
+            display: block;
+        }
     }
 
     nav.sidebar {
@@ -131,7 +136,7 @@
     header.exception {
         padding: 18px 20px;
 
-        height: 59px;
+        height: 66px;
         min-height: 59px;
 
         overflow: hidden;
@@ -227,6 +232,10 @@
      * Navigation
      * --------------------------------------------------------------------- */
 
+    .better-errors-javascript-not-loaded .backtrace .tabs {
+        display: none;
+    }
+
     nav.tabs {
         border-bottom: solid 1px #ddd;
 
@@ -411,6 +420,18 @@
      * Display area
      * --------------------------------------------------------------------- */
 
+    p.no-javascript-notice {
+      margin-bottom: 1em;
+      padding: 1em;
+      border: 2px solid #e00;
+    }
+    .better-errors-javascript-loaded .no-javascript-notice {
+        display: none;
+    }
+    .no-inline-style-notice {
+        display: none;
+    }
+
     .trace_info {
         background: #fff;
         padding: 6px;
@@ -468,6 +489,10 @@
         font-weight: 200;
     }
 
+    .better-errors-javascript-not-loaded .be-repl {
+        display: none;
+    }
+
     .code, .be-console, .unavailable {
         background: #fff;
         padding: 5px;
@@ -595,6 +620,12 @@
         color: #8080a0;
         padding-left: 20px;
     }
+    .console-has-been-used .live-console-hint {
+        display: none;
+    }
+    .better-errors-javascript-not-loaded .live-console-hint {
+        display: none;
+    }
 
     .hint:before {
         content: '\25b2';
@@ -611,17 +642,6 @@
         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;
@@ -709,7 +729,7 @@
     </style>
 
     <%# IE8 compatibility crap %>
-    <script>
+    <script nonce="<%= csp_nonce %>">
     (function() {
         var elements = ["section", "nav", "header", "footer", "audio"];
         for (var i = 0; i < elements.length; i++) {
@@ -723,7 +743,7 @@
       rendered in the host app's layout. Let's empty out the styles of the
       host app.
     %>
-    <script>
+    <script nonce="<%= csp_nonce %>">
       if (window.Turbolinks) {
           for(var i=0; i < document.styleSheets.length; i++) {
               if(document.styleSheets[i].href)
@@ -748,6 +768,15 @@
       }
     </script>
 
+    <p class='no-inline-style-notice'>
+        <strong>
+            Better Errors can't apply inline style<span class='no-javascript-notice'> (or run Javascript)</span>,
+            possibly because you have a Content Security Policy along with Turbolinks.
+            But you can
+            <a href='/__better_errors' target="_blank">open the interactive console in a new tab/window</a>.
+        </strong>
+    </p>
+
     <div class='top'>
         <header class="exception">
             <h2><strong><%= exception_type %></strong> <span>at <%= request_path %></span></h2>
@@ -764,6 +793,9 @@
                     <% end %>
                 </div>
             <% end %>
+            <% if exception_hint %>
+              <h2>Hint: <%= exception_hint %></h2>
+            <% end %>
         </header>
     </div>
 
@@ -791,21 +823,37 @@
             </ul>
         </nav>
 
-        <% backtrace_frames.each_with_index do |frame, index| %>
-            <div class="frame_info" id="frame_info_<%= index %>" style="display:none;"></div>
-        <% end %>
+        <div class="frameInfos">
+            <div class="frame_info current" data-frame-idx="0">
+                <p class='no-javascript-notice'>
+                    Better Errors can't run Javascript here<span class='no-inline-style-notice'> (or apply inline style)</span>,
+                    possibly because you have a Content Security Policy along with Turbolinks.
+                    But you can
+                    <a href='/__better_errors' target="_blank">open the interactive console in a new tab/window</a>.
+                </p>
+                <!-- this is enough information to show something in case JS doesn't get to load -->
+                <%== ErrorPage.render_template('variable_info', first_frame_variable_info) %>
+            </div>
+        </div>
     </section>
 </body>
-<script>
+<script nonce="<%= csp_nonce %>">
 (function() {
 
     var OID = "<%= id %>";
     var csrfToken = "<%= csrf_token %>";
 
     var previousFrame = null;
-    var previousFrameInfo = null;
     var allFrames = document.querySelectorAll("ul.frames li");
-    var allFrameInfos = document.querySelectorAll(".frame_info");
+    var frameInfos = document.querySelector(".frameInfos");
+
+    document.querySelector('body').classList.remove("better-errors-javascript-not-loaded");
+    document.querySelector('body').classList.add("better-errors-javascript-loaded");
+
+    var noJSNotices = document.querySelectorAll('.no-javascript-notice');
+    for(var i = 0; i < noJSNotices.length; i++) {
+        noJSNotices[i].remove();
+    }
 
     function apiCall(method, opts, cb) {
         var req = new XMLHttpRequest();
@@ -825,6 +873,28 @@
         return html.replace(/&/, "&amp;").replace(/</g, "&lt;");
     }
 
+    function hasConsoleBeenUsedPreviously() {
+      return !!document.cookie.split('; ').find(function(cookie) {
+          return cookie.startsWith('BetterErrors-has-used-console=');
+      });
+    }
+
+    var consoleHasBeenUsed = hasConsoleBeenUsedPreviously();
+
+    function consoleWasJustUsed() {
+        if (consoleHasBeenUsed) {
+            return;
+        }
+
+        hideConsoleHint();
+        consoleHasBeenUsed = true;
+        document.cookie = "BetterErrors-has-used-console=true;path=/;max-age=31536000;samesite"
+    }
+
+    function hideConsoleHint() {
+        document.querySelector('body').className += " console-has-been-used";
+    }
+
     function REPL(index) {
         this.index = index;
 
@@ -846,15 +916,20 @@
         this.inputElement   = this.container.querySelector("input");
         this.outputElement  = this.container.querySelector("pre");
 
+        if (consoleHasBeenUsed) {
+            hideConsoleHint();
+        }
+
         var self = this;
         this.inputElement.onkeydown = function(ev) {
             self.onKeyDown(ev);
+            consoleWasJustUsed();
         };
 
         this.setPrompt(">>");
 
         REPL.all[this.index] = this;
-    }
+    };
 
     REPL.prototype.focus = function() {
         this.inputElement.focus();
@@ -952,17 +1027,25 @@
     };
 
     function switchTo(el) {
-        if(previousFrameInfo) previousFrameInfo.style.display = "none";
-        previousFrameInfo = el;
+        var currentFrameInfo = document.querySelectorAll('.frame_info.current');
+        for(var i = 0; i < currentFrameInfo.length; i++) {
+            currentFrameInfo[i].className = "frame_info";
+        }
 
-        el.style.display = "block";
+        el.className = "frame_info current";
 
         var replInput = el.querySelector('.be-console input');
         if (replInput) replInput.focus();
     }
 
     function selectFrameInfo(index) {
-        var el = allFrameInfos[index];
+        var el = document.querySelector(".frame_info[data-frame-idx='" + index + "']")
+        if (!el) {
+          el = document.createElement("div");
+          el.className = "frame_info";
+          el.setAttribute('data-frame-idx', index);
+          frameInfos.appendChild(el);
+        }
         if(el) {
             if (el.loaded) {
                 return switchTo(el);